/* ══════════════════════════════════════════════════════════════════════
   Calculadora EcoApo — hoja de estilos

   Los tokens salen tal cual de la web institucional (css/styles.css) y del
   manual de identidad (guia-de-estilo.html). Dos diferencias a propósito:

   1. NO existe --teal. El manual prohíbe #00987e explícitamente; en la web
      quedó como deuda técnica y acá no se replica.
   2. Se suman tokens que la web no necesita (bordes, estados, superficies
      de tabla) porque esto es una herramienta, no una landing.

   Reglas heredadas que no se negocian: sin frameworks, Red Hat Display,
   títulos con gradiente, botones pill, contenedor 1200px, breakpoint
   único en 900px, íconos SVG inline stroke 1.8, nunca emoji.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marca ─────────────────────────────────────────────────────── */
  --green: #41c406;
  --green-dark: #35a005;
  --lime: #b2d235;
  --dark: #1c2621;
  --text: #333d38;
  --muted: #6c757d;
  --bg-alt: #f4f8f5;
  --white: #ffffff;

  --radius: 14px;
  --shadow: 0 6px 24px rgba(28, 38, 33, 0.08);
  --shadow-lg: 0 18px 44px rgba(28, 38, 33, 0.13);
  --font: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;

  --grad-text: linear-gradient(270deg, #b2d235, #99ce26, #59c60a, #41c406);
  --grad-btn: linear-gradient(0deg, hsl(101, 94%, 40%) 0%, hsl(94, 97%, 40%) 55%, hsl(83, 96%, 44%) 100%);
  --grad-card: linear-gradient(135deg, #35a005, #41c406 55%, #59c60a);

  /* ── Tokens propios de la herramienta ──────────────────────────── */
  --border: #d7ded9;          /* borde de inputs, igual que la web */
  --border-soft: #e9ecef;     /* separadores */
  --tint: #f6faf2;            /* fondo verde muy suave (campo destacado) */
  --tint-border: #dcecd0;
  --hover: #f0fae8;           /* hover verde de la web */
  --danger: #dc3545;
  --danger-bg: #fdf0f0;
  --warn: #b26a00;
  --warn-bg: #fff8e6;
  --warn-border: #ffe2a8;

  /* Dónde se frena una columna pegada (el carrito del catálogo, el kit del
     asistente) para que no se meta debajo del header sticky. Es el alto del
     header más aire. Un token y no dos números sueltos: antes el carrito usaba
     84 y el kit 90, que no era una decisión, era que nadie los había mirado
     juntos. Si cambia el alto del header, se cambia acá. */
  --header-alto: 64px;   /* .app-header-inner { min-height: 64px } */
  --tope-pegado: calc(var(--header-alto) + 20px);
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 1.0625rem; /* 17px, igual que la web */
  color: var(--text);
  line-height: 1.6;
  background: var(--bg-alt);
  -webkit-font-smoothing: antialiased;

  /* El footer va pegado abajo cuando la página tiene poco contenido.
     Antes esto se intentaba con `min-height: 60vh` en .app-main, que es una
     adivinanza: con una tabla de dos filas la suma header + main + footer no
     llegaba al alto de la pantalla y quedaba una franja de fondo DEBAJO del
     footer. Repartir el alto acá lo resuelve para cualquier contenido.
     dvh y no vh: en el navegador del celular la barra de direcciones aparece
     y desaparece, y vh usa el alto sin barra, así que deja la página unos
     píxeles más larga de la cuenta. Queda vh arriba como respaldo. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--green-dark); text-decoration: none; }
a:hover { color: var(--green); }

h1, h2, h3, h4 { line-height: 1.15; color: var(--dark); font-weight: 800; text-wrap: balance; }

button, input, select, textarea { font-family: inherit; font-size: 100%; }

/* Foco visible para teclado, invisible para el mouse. */
:focus-visible { outline: 3px solid rgba(65, 196, 6, 0.45); outline-offset: 2px; }

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.container-ancho { max-width: 1440px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Tipografía de marca ─────────────────────────────────────────── */
.text-grad, .titulo-grad {
  color: var(--green);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

.pretitle {
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.pretitle::after {
  content: "";
  width: 48px; height: 6px;
  border-radius: 3px;
  background: var(--lime);
}

.titulo-pagina { font-size: 1.85rem; font-weight: 900; margin-bottom: 4px; }
.subtitulo { color: var(--muted); font-size: 0.98rem; }

/* ── Botones ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  border-radius: 50px;
  white-space: nowrap;
  padding: 12px 28px;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  cursor: pointer;
  border: none;
  text-align: center;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none; filter: none;
}

.btn-primary {
  background-image: var(--grad-btn);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.88rem;
  box-shadow: rgba(0, 0, 0, 0.35) 0 16px 32px -12px;
}
.btn-primary:hover { filter: brightness(1.08); color: var(--white); }

.btn-secundario {
  background: var(--white);
  color: var(--green-dark);
  border: 1px solid var(--tint-border);
  box-shadow: var(--shadow);
}
.btn-secundario:hover { background: var(--hover); color: var(--green-dark); }

.btn-fantasma {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.btn-fantasma:hover { color: var(--dark); border-color: var(--muted); }

.btn-peligro { background: var(--danger-bg); color: var(--danger); border: 1px solid #f3c9cd; }
.btn-peligro:hover { background: var(--danger); color: var(--white); }

.btn-sm { padding: 8px 18px; font-size: 0.78rem; }
.btn-lg { padding: 14px 30px; font-size: 0.92rem; }
.btn-bloque { width: 100%; }

/* Botón redondo solo-ícono (quitar del carrito, editar en tabla). */
.btn-icono {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-icono:hover { color: var(--green-dark); background: var(--hover); border-color: var(--tint-border); }
.btn-icono.peligro:hover { color: var(--danger); background: var(--danger-bg); border-color: #f3c9cd; }

/* ── Header de la app ────────────────────────────────────────────── */
/* No es el header de la web pública: acá no hay menú de marketing, hay
   navegación de herramienta. Mismo logo, misma sombra, mismo sticky. */
.app-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.app-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 16px;
}
.app-logo { flex: 0 0 auto; }
.app-logo img { width: 150px; height: auto; }

.app-nav { display: none; }
.app-nav ul { list-style: none; display: flex; gap: 4px; align-items: center; }
.app-nav a {
  display: block; padding: 8px 14px; border-radius: 50px;
  font-weight: 700; font-size: 0.95rem; color: var(--dark);
  transition: background 0.15s ease, color 0.15s ease;
}
.app-nav a:hover { background: var(--hover); color: var(--green-dark); }
.app-nav a[aria-current="page"] { background: var(--hover); color: var(--green-dark); }

.app-header-acciones { display: flex; align-items: center; gap: 10px; }

/* Menú de usuario */
.usuario-menu { position: relative; }
.usuario-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  padding: 6px 8px; border-radius: 50px; color: var(--dark); font-weight: 700;
  font-size: 0.9rem;
}
.usuario-btn:hover { background: var(--bg-alt); }
.usuario-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad-card); color: var(--white);
  display: grid; place-items: center; font-size: 0.85rem; font-weight: 900;
  flex: 0 0 auto;
}
.usuario-nombre { display: none; }
.usuario-drop {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 210px; background: var(--white);
  border-radius: 12px; box-shadow: 0 16px 38px rgba(28, 38, 33, 0.17);
  padding: 8px; display: none; z-index: 110;
}
.usuario-drop[data-abierto="true"] { display: block; }
.usuario-drop a, .usuario-drop button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 8px;
  font-size: 0.93rem; font-weight: 500; color: var(--text);
  background: none; border: none; cursor: pointer;
}
.usuario-drop a:hover, .usuario-drop button:hover { background: var(--bg-alt); color: var(--green-dark); }
.usuario-drop hr { border: none; border-top: 1px solid var(--border-soft); margin: 6px 0; }

/* Hamburguesa (mismo patrón que la web) */
.nav-toggle {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 8px; cursor: pointer;
}
.nav-toggle span {
  width: 26px; height: 3px; background: var(--dark); border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-movil {
  position: absolute; top: 64px; left: 0; right: 0;
  background: var(--white); box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
}
.nav-movil.open { max-height: min(85vh, 600px); overflow-y: auto; }
.nav-movil ul { list-style: none; padding: 12px 20px 20px; }
.nav-movil a { display: block; padding: 11px 0; font-weight: 700; color: var(--dark); }
.nav-movil a[aria-current="page"] { color: var(--green); }

/* ── Layout de página ────────────────────────────────────────────── */
/* flex: 1 en lugar de min-height: 60vh — el alto que sobra lo toma el main y
   el footer queda abajo de todo. Ver la nota en `body`. */
.app-main { padding: 28px 0 64px; flex: 1; }
.page-head { margin-bottom: 24px; }
.page-head-fila {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: flex-end; justify-content: space-between;
}

/* ── Tarjetas / paneles ──────────────────────────────────────────── */
.panel {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 20px;
}
.panel-elevado { box-shadow: var(--shadow-lg); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.panel-head h2 { font-size: 1.2rem; font-weight: 800; }
.panel + .panel { margin-top: 20px; }

.panel-verde {
  background: var(--grad-card); color: var(--white);
  border-radius: var(--radius); padding: 22px 20px;
  box-shadow: 0 12px 26px rgba(53, 160, 5, 0.28);
}
.panel-verde h2, .panel-verde h3 { color: var(--white); }

/* ── Formularios ─────────────────────────────────────────────────── */
.campo { margin-bottom: 16px; }
.campo label, .campo > .etiqueta {
  display: block; font-weight: 700; font-size: 0.92rem;
  margin-bottom: 6px; color: var(--dark);
}
.campo-ayuda {
  display: block; font-weight: 500; font-size: 0.85rem;
  color: var(--muted); margin: -2px 0 8px;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"],
select, textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--white);
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(65, 196, 6, 0.18);
}
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.14);
}
textarea { min-height: 110px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.campo-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.campo-grid .ancho { grid-column: 1 / -1; }

.campo-destacado {
  background: var(--tint);
  border: 1px solid var(--tint-border);
  border-radius: 12px;
  padding: 16px 16px 14px;
}
.campo-destacado label { color: var(--green-dark); }

/* Input con prefijo de moneda */
.campo-moneda { position: relative; }
.campo-moneda .simbolo {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 700; pointer-events: none;
}
.campo-moneda input { padding-left: 42px; }

/* Checkbox / radio */
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px;
  accent-color: var(--green); cursor: pointer;
}
.check span { font-size: 0.95rem; font-weight: 500; }

/* Grupo de opciones tipo tarjeta (lo usa el wizard) */
.opciones { display: grid; gap: 12px; grid-template-columns: 1fr; }
.opcion {
  position: relative;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; cursor: pointer; background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.opcion:hover { border-color: var(--lime); background: var(--tint); }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion:has(input:checked) {
  border-color: var(--green);
  background: var(--tint);
  box-shadow: 0 0 0 3px rgba(65, 196, 6, 0.15);
}
.opcion .opcion-titulo { font-weight: 800; color: var(--dark); display: block; }
.opcion .opcion-desc { font-size: 0.88rem; color: var(--muted); display: block; margin-top: 2px; }

/* ── Avisos ──────────────────────────────────────────────────────── */
.aviso {
  border-radius: 10px; padding: 12px 16px;
  font-size: 0.93rem; margin-bottom: 16px;
  border-left: 4px solid var(--muted); background: var(--bg-alt);
}
.aviso-error { background: var(--danger-bg); border-left-color: var(--danger); }
.aviso-ok { background: var(--tint); border-left-color: var(--green); }
.aviso-atencion { background: var(--warn-bg); border-left-color: var(--warn); color: var(--warn); }
.aviso strong { color: var(--dark); }
.aviso-atencion strong { color: var(--warn); }

.supuestos {
  background: var(--tint);
  border: 1px solid var(--tint-border);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.86rem;
  color: var(--muted);
}
.supuestos strong { color: var(--dark); }

/* ── Chips y badges ──────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 50px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 0.85rem; font-weight: 700; color: var(--muted);
  cursor: pointer; transition: all 0.15s ease;
}
.chip:hover { border-color: var(--lime); color: var(--dark); }
.chip[aria-pressed="true"] {
  background: var(--tint); border-color: var(--green); color: var(--green-dark);
}

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 50px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.3px;
  background: var(--bg-alt); color: var(--muted);
}
.badge-verde { background: var(--tint); color: var(--green-dark); }
.badge-atencion { background: var(--warn-bg); color: var(--warn); }
.badge-error { background: var(--danger-bg); color: var(--danger); }

/* ── Tabla (admin) ───────────────────────────────────────────────── */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Ancho mínimo para que la tabla haga scroll dentro de la tarjeta en lugar de
   comprimir las columnas hasta volverlas ilegibles. */
.tabla-scroll .tabla { min-width: 820px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.tabla th {
  text-align: left; font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted);
  padding: 12px 14px; border-bottom: 2px solid var(--border-soft);
  white-space: nowrap;
}
.tabla td { padding: 13px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.tabla tbody tr:hover { background: var(--bg-alt); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla .codigo { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.85rem; color: var(--muted); }

/* ── Grilla de productos ─────────────────────────────────────────── */
.productos-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }

.producto {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.producto:hover { box-shadow: 0 20px 44px rgba(28, 38, 33, 0.16); transform: translateY(-2px); }
.producto-codigo {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.75rem; color: var(--muted); letter-spacing: 0.3px;
}
.producto h3 { font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
/* Tres renglones y no dos: al angostar las tarjetas para que entren tres o
   cuatro por fila, dos paneles distintos se cortaban en el mismo lugar
   ("Panel Solar AMERISOLAR- Monocristalino, media celd…") y solo los
   distinguía el chip de potencia. El renglón de más cuesta ~20px por tarjeta
   y devuelve la parte del nombre que trae el modelo. */
.producto-descripcion { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.producto-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.producto-precio { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.producto-precio .valor { font-size: 1.4rem; font-weight: 900; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.producto-precio .nota { display: block; font-size: 0.8rem; color: var(--muted); }
.producto-acciones { display: flex; gap: 8px; align-items: center; }

/* Producto sin costo cargado: se muestra, pero no se cotiza. */
.producto.sin-precio .producto-precio .valor { color: var(--muted); font-size: 1.05rem; }

/* ── Control de cantidad ─────────────────────────────────────────── */
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 50px; overflow: hidden; }
.cantidad button {
  width: 36px; height: 38px; border: none; background: var(--white);
  color: var(--green-dark); font-size: 1.1rem; font-weight: 700; cursor: pointer;
}
.cantidad button:hover { background: var(--hover); }
.cantidad input {
  width: 52px; border: none; border-radius: 0; text-align: center;
  padding: 0; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cantidad input:focus { box-shadow: none; }

/* Descripción editable de un renglón del presupuesto. Se ve como texto
   hasta que se la toca: es un campo, pero no tiene que gritar que lo es. */
.renglon-texto {
  width: 100%;
  min-height: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.35;
  resize: vertical;
  background: transparent;
}
.renglon-texto:hover { border-color: var(--border-soft); background: var(--bg-alt); }
.renglon-texto:focus { border-color: var(--green); background: var(--white); }

/* ── Carrito / resumen ───────────────────────────────────────────── */
.carrito { position: sticky; top: var(--tope-pegado); }
.carrito-items { list-style: none; max-height: 42vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.carrito-item {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border-soft);
}
.carrito-item h4 { font-size: 0.9rem; font-weight: 700; line-height: 1.3; }
.carrito-item .linea-precio { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carrito-item .meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.carrito-vacio { text-align: center; color: var(--muted); padding: 28px 10px; font-size: 0.93rem; }

.totales { border-top: 2px solid var(--border-soft); padding-top: 14px; margin-top: 4px; }
.totales-fila {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; font-size: 0.93rem; font-variant-numeric: tabular-nums;
}
.totales-fila .etiqueta { color: var(--muted); }
.totales-fila.total {
  border-top: 1px solid var(--border-soft); margin-top: 8px; padding-top: 12px;
  font-size: 1.18rem; font-weight: 900;
}
.totales-fila.total .valor { color: var(--green-dark); }

/* Selector USD/ARS y con/sin IVA */
.toggle-grupo {
  display: inline-flex; background: var(--bg-alt);
  border-radius: 50px; padding: 3px; gap: 2px;
}
.toggle-grupo button {
  border: none; background: none; cursor: pointer;
  padding: 7px 16px; border-radius: 50px;
  font-size: 0.82rem; font-weight: 700; color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.toggle-grupo button[aria-pressed="true"] {
  background: var(--white); color: var(--green-dark);
  box-shadow: 0 2px 8px rgba(28, 38, 33, 0.1);
}
.toggle-grupo button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Buscador del catálogo ───────────────────────────────────────── */
/* Barra propia y no un `.campo` más: está arriba de la grilla, es lo primero
   que se ve al entrar y tiene que leerse como la acción principal, no como un
   filtro más de la barra lateral. */
.buscador { position: relative; }
.buscador input[type="search"] {
  padding-left: 46px;
  padding-block: 15px;
  font-size: 1rem;
  background: var(--white);
  box-shadow: var(--shadow);
  border-radius: 50px;
}
.buscador-lupa {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--muted); pointer-events: none;
}
.buscador input[type="search"]:focus + .buscador-lupa,
.buscador:focus-within .buscador-lupa { color: var(--green-dark); }

/* Catálogo: sólo comportamiento que no cubren los componentes compartidos. */
.familias-lista { display: flex; flex-direction: column; gap: 8px; }
.familias-lista .chip { justify-content: space-between; width: 100%; }
.etiqueta-filtro { display: block; font-size: 0.88rem; font-weight: 800; color: var(--dark); margin: 16px 0 8px; }
.catalogo-centrado { text-align: center; }
.catalogo-movil { display: flex; }
.filtros { display: none; margin: 0 0 16px; }
.filtros.abierto { display: block; }
.carrito { display: none; position: fixed; inset: auto 0 0; z-index: 120; max-height: 82vh; overflow-y: auto; border-radius: var(--radius) var(--radius) 0 0; }
.carrito.abierto { display: block; }
.carrito-barra { position: fixed; z-index: 119; left: 12px; right: 12px; bottom: 12px; width: calc(100% - 24px); justify-content: space-between; border: 0; border-radius: 50px; padding: 14px 20px; background: var(--dark); color: var(--white); font-weight: 800; box-shadow: var(--shadow-lg); }
body:has(.layout-catalogo) .app-main { padding-bottom: 100px; }

/* ── Datos destacados (resultado del wizard) ─────────────────────── */
.datos-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.dato { background: var(--bg-alt); border-radius: 12px; padding: 18px 16px; text-align: center; }
.dato .valor {
  display: block; font-size: 1.75rem; font-weight: 900; line-height: 1.1;
  color: var(--green);
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dato .etiqueta { display: block; font-size: 0.9rem; color: var(--muted); margin-top: 6px; }

/* ── Pasos del wizard ────────────────────────────────────────────── */
.wizard-pasos {
  display: flex; gap: 6px; list-style: none;
  margin-bottom: 24px; flex-wrap: wrap;
}
.wizard-pasos li {
  flex: 1 1 0; min-width: 70px;
  font-size: 0.78rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding-top: 10px; border-top: 4px solid var(--border-soft);
}
.wizard-pasos li[data-estado="actual"] { color: var(--green-dark); border-top-color: var(--green); }
.wizard-pasos li[data-estado="hecho"] { color: var(--dark); border-top-color: var(--lime); }

/* ── Login ───────────────────────────────────────────────────────── */
/* Login, registro y error no llevan header ni footer: el .login-wrap es el
   único hijo del body y se queda con todo el alto. El min-height: 100vh que
   tenía sobraba y encima dejaba unos píxeles de scroll en el celular, donde
   el body ya mide 100dvh. */
.login-wrap { flex: 1; display: grid; place-items: center; padding: 32px 20px; background: var(--bg-alt); }
.login-card {
  width: 100%; max-width: 420px;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 32px 26px;
}
.login-card .app-logo { margin: 0 auto 22px; }
.login-card h1 { font-size: 1.5rem; text-align: center; margin-bottom: 6px; }
.login-card > p { text-align: center; color: var(--muted); font-size: 0.95rem; margin-bottom: 24px; }
.login-pie { text-align: center; font-size: 0.88rem; color: var(--muted); margin-top: 20px; }

/* ── Diálogos ────────────────────────────────────────────────────── */
/* <dialog> nativo con la ropa de la marca. Reemplaza a prompt() y confirm(),
   que el navegador dibuja a su manera. */
.dlg {
  /* El reset global de arriba pone margin:0 en todo, y eso pisa el margin:auto
     con el que el navegador centra un <dialog> modal: sin esta línea se abre
     pegado a la esquina superior izquierda. */
  margin: auto;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0;
  width: min(460px, calc(100vw - 32px));
  color: var(--text);
  background: var(--white);
}
.dlg::backdrop { background: rgba(28, 38, 33, 0.45); }
.dlg form { padding: 26px 24px 22px; }
.dlg h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; }
.dlg .subtitulo { margin-bottom: 18px; }
.dlg .campo:last-of-type { margin-bottom: 0; }
.dlg-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}
/* En pantallas chicas los botones ocupan el ancho: son el objetivo táctil. */
@media (max-width: 480px) {
  .dlg-acciones { flex-direction: column-reverse; }
  .dlg-acciones .btn { width: 100%; }
}

/* ── Estado vacío ────────────────────────────────────────────────── */
.vacio { text-align: center; padding: 48px 20px; color: var(--muted); }
.vacio svg { width: 48px; height: 48px; margin: 0 auto 14px; color: var(--border); }
.vacio h3 { font-size: 1.1rem; margin-bottom: 6px; }

/* ── Footer ──────────────────────────────────────────────────────── */
/* Los hijos de un grid no se achican por debajo de su contenido salvo que se
   les diga. Esta es la red de contención del problema de arriba. */
.layout-admin > *, .layout-catalogo > *, .layout-wizard > * { min-width: 0; }

/* En una sola columna hasta 900px, igual que todo el resto. */
.layout-wizard { display: grid; gap: 24px; align-items: start; grid-template-columns: 1fr; }

.app-footer {
  background: var(--dark); color: rgba(255, 255, 255, 0.8);
  padding: 24px 0; font-size: 0.85rem; text-align: center;
}
.app-footer a { color: var(--lime); }
.app-footer a:hover { color: var(--white); }

/* ── Utilidades ──────────────────────────────────────────────────── */
.flex { display: flex; }
.entre { justify-content: space-between; }
.centrado { align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.wrap { flex-wrap: wrap; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.texto-muted { color: var(--muted); }
.texto-sm { font-size: 0.88rem; }
.num { font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }

/* Íconos inline: heredan el color del texto, stroke 1.8 como manda el manual. */
.icono { width: 20px; height: 20px; flex: 0 0 auto; stroke-width: 1.8; }
.icono-sm { width: 16px; height: 16px; }
.icono-lg { width: 24px; height: 24px; }

/* ══════════════════════════════════════════════════════════════════
   Escritorio — breakpoint único en 900px, igual que la web
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .app-nav { display: block; }
  .nav-toggle { display: none; }
  .nav-movil { display: none; }
  .usuario-nombre { display: inline; }

  .titulo-pagina { font-size: 2.1rem; }
  .app-main { padding: 36px 0 80px; }

  .panel { padding: 28px 26px; }

  .campo-grid { grid-template-columns: 1fr 1fr; }
  .opciones { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

  /* 235 y no 280: con 280 no entraban dos columnas ni en una pantalla de
     1440. Una tarjeta tiene código, dos renglones de descripción, marca, una
     spec, precio y el control de cantidad — 235 le alcanza, y es lo que hace
     la diferencia entre una columna y tres. */
  .productos-grid { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); }
  .datos-grid { grid-template-columns: repeat(3, 1fr); }

  /* ── Catálogo: filtros · productos · carrito ───────────────────────
     EL CATÁLOGO ES MÁS ANCHO QUE EL RESTO, a propósito.

     El contenedor de 1200px del manual es una columna de LECTURA: sirve para
     la web institucional, donde lo que hay es texto. Acá lo que hay son 161
     productos con dos rieles fijos al costado, y ese ancho los ahogaba: 1200
     menos 40 de padding, menos filtros, carrito y gaps dejaban 542px para la
     grilla. Con tarjetas de 280 mínimo, dos no entraban. El catálogo mostraba
     UNA sola tarjeta por fila en cualquier pantalla, y ver 24 productos eran
     diez pantallas de scroll mientras sobraban 240px de margen vacío de cada
     lado. Eso fue lo que reportó EcoApo.

     Se ensancha el `.container` de la página entera y no solo el de la grilla,
     para que el header siga alineado con el contenido. */
  body:has(.layout-catalogo) .container { max-width: 1680px; }

  .layout-catalogo {
    display: grid;
    /* minmax(0, 1fr) y no 1fr: ver la nota en .layout-admin. */
    grid-template-columns: 220px minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
  }
  .catalogo-movil { display: none; }
  .filtros { display: block; margin: 0; }
  /* Deshace la hoja de abajo (donde el carrito es un panel fijo al pie) y lo
     devuelve a columna pegada al costado.

     ⚠ NO usar `inset: auto` acá. El shorthand pisa las cuatro, incluido el
     `top` de la regla base, y el carrito dejaba de quedarse a la vista: se iba
     scrolleando con la página. Se anulan right/bottom/left a mano.

     ⚠ Y hay que bajar el z-index. El 120 de la hoja móvil tiene que estar por
     ENCIMA del header (100) para taparlo; acá, al costado, tiene que estar por
     debajo, o se dibuja sobre el nav al scrollear. */
  .carrito {
    display: block;
    position: sticky;
    top: var(--tope-pegado);
    right: auto; bottom: auto; left: auto;
    z-index: auto;
    max-height: none; overflow: visible;
  }
  body:has(.layout-catalogo) .app-main { padding-bottom: 80px; }
    /* minmax(0, 1fr) y no 1fr: una columna 1fr tiene min-width:auto, así que
     no se achica por debajo del ancho de su contenido. Con la tabla de
     productos adentro —diez columnas— la columna crecía, empujaba el layout
     fuera de la pantalla y el overflow-x de .tabla-scroll nunca llegaba a
     actuar, porque el que se desbordaba era el contenedor. */
  .layout-admin { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }

  /* Asistente: pasos · kit propuesto. El kit queda pegado al scroll para que
     el instalador vea cambiar el equipo y el precio mientras toca los campos:
     si hay que bajar a buscarlo, la relación entre lo que cambió y lo que
     costó se pierde. */
  .layout-wizard { grid-template-columns: minmax(0, 1fr) 330px; }
  .wizard-kit { position: sticky; top: var(--tope-pegado); }
}

@media (min-width: 900px) and (max-width: 1359px) {
  /* A esta altura los dos rieles le sacan demasiado a la grilla: los filtros
     pasan arriba y el carrito se queda al costado.

     El corte está en 1360 y no en 1200 porque ahí es donde entra la tercera
     columna CON los dos rieles puestos: 3 × 235 + 2 × 16 = 737 de grilla, más
     220 de filtros, 300 de carrito, 40 de gaps y 40 de padding = 1337... más
     la barra de scroll. Ese último sumando es el que me faltaba en el primer
     intento: con el corte en 1340 medí 725 px de grilla y la página se caía a
     DOS columnas justo al cruzar el umbral, que es peor que no haber tocado
     nada. 1360 deja las dos orillas en tres columnas.

     Abajo del corte conviene darle el ancho a los productos: un portátil de
     1280 pasa de dos columnas a tres. */
  .layout-catalogo { grid-template-columns: minmax(0, 1fr) 300px; }
  .layout-catalogo > .filtros { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .producto:hover { transform: none; }
}

/* ── Impresión (respaldo del PDF) ────────────────────────────────── */
@media print {
  .app-header, .app-footer, .no-imprimir { display: none !important; }
  body { background: var(--white); font-size: 11pt; }
  .panel { box-shadow: none; border: 1px solid var(--border); }
}