/* ============================================================
   e-GEN | Calculadora de respaldo de energía

   Paleta del manual de marca e-GEN (Ver. 20/01/2026):
     --marca      Pantone 142-7   verde principal
     --marca-ink  Pantone 343 C   verde oscuro
     --muted      Pantone 425 C   gris oscuro
     --line       Pantone 423 C   gris

   --marca es SÓLO relleno: como texto sobre blanco da 2,95:1 y no pasa AA.
   Todo texto verde va con --marca-ink (8,80:1). Sobre un relleno --marca el
   texto va oscuro (--marca-on, 5,53:1); el blanco encima no se puede usar.
   El manual pide neutros claros y acentos verdes reducidos: el verde se gasta
   en lo decisivo, no en cada superficie.
   ============================================================ */

:root{
  --paper:#E7EBEC; --panel:#FFFFFF; --ink:#121E24; --muted:#53575A;
  --line:#D6D7D8; --line-soft:#E6E7E7;

  --marca:#02AD58; --marca-ink:#095540; --marca-on:#06251A;
  --marca-soft:#E2F4EA; --marca-soft-2:#CDEBDC; --marca-tenue:#F2FBF6;
  --marca-hover:#01984D; --marca-pale:#6FCFA3;

  /* Pantalla del panel lateral: azul frío, para que el verde no compita */
  --screen:#DCE9F6; --screen-2:#F0F6FC; --screen-line:#BCD2E6;
  --screen-txt:#12242F; --screen-mut:#4E6880; --screen-well:#C9DCEC;

  --amb:#8A5A00; --amb-soft:#FDF3E0;
  --err:#A3231B; --err-soft:#FBEEEC;

  --r:14px; --r-sm:9px;
  --sh:0 1px 2px rgba(18,30,36,.05), 0 6px 18px rgba(18,30,36,.06);
  --sh-md:0 8px 30px rgba(18,30,36,.14);
  --tr:.16s cubic-bezier(.4,0,.2,1);

  --mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 15px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; line-height:1.2; font-weight:800; letter-spacing:-.015em; }
a{ color:var(--marca-ink); }
button{ font:inherit; }
svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2;
     stroke-linecap:round; stroke-linejoin:round; flex:none; }
[hidden]{ display:none !important; }

.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:18px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ══════════════ PORTAL LEGAL ══════════════
   Cubre la pantalla hasta que se acepta. Va antes que nada en el HTML: al
   revés se vería la calculadora un instante antes del aviso.

   El fondo es la calculadora de verdad, desenfocada: se intuye lo que hay
   del otro lado sin poder leerlo ni tocarlo. El desenfoque tiene que ser
   grande, si no parece un error de foco en vez de una decisión. */
.gate{
  position:fixed; inset:0; z-index:200; overflow:auto;
  padding:24px 18px; display:grid; place-items:center;
  background:rgba(18,30,36,.26);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
          backdrop-filter:blur(14px) saturate(1.05);
}
/* Sin desenfoque el velo translucido dejaría leer la calculadora por detrás,
   así que ahí vuelve a ser opaco. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .gate{ background:var(--ink); }
}
.gate__c{
  width:100%; max-width:620px; background:var(--panel);
  border-radius:var(--r); box-shadow:var(--sh-md); padding:30px 32px;
}
.gate__logo{ height:44px; width:auto; margin-bottom:20px; }
.gate__t{ font-size:23px; margin-bottom:12px; }
.gate__i{ margin:0 0 14px; font-size:16px; }
.gate ul{ margin:0 0 16px; padding-left:20px; }
.gate li{ margin-bottom:7px; color:var(--muted); }
.gate li b{ color:var(--ink); }
.gate__ver{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--marca-ink); font-size:14px; font-weight:600;
  text-decoration:underline; text-underline-offset:2px;
}
.gate__cierre{
  margin:16px 0 0; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--marca-soft); color:var(--marca-on); font-size:14.5px;
}
.gate__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.gate__btns .btn{ flex:1; min-width:170px; }
.gate__legal{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  max-height:300px; overflow:auto; font-size:14px; color:var(--muted);
}
.gate__legal h3{ font-size:15px; margin-bottom:8px; color:var(--ink); }
.gate__legal p{ margin:0 0 10px; }
.gate__legal b{ color:var(--ink); }
.gate__no{
  margin-top:16px; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--amb-soft); color:var(--amb); font-size:14.5px;
}

/* ══════════════ PORTADA ══════════════
   No hay barra fija: el logo va grande aca, como en el sitio de referencia. */
.hero{ padding:clamp(20px,4vw,44px) 0 clamp(24px,4vw,40px); }
.hero__eye{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 20px; }
.hero__logo{ width:132px; height:auto; flex:none; }
.hero__eye span{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  color:var(--marca-ink); padding-left:14px; border-left:1px solid var(--line); line-height:1.1;
}
/* Sin tope de ancho: el titulo y la bajada ocupan toda la pagina. El .wrap ya
   les pone el margen lateral; cualquier max-width de mas los dejaria cortos.  */
.hero__t{ font-size:clamp(28px,4.6vw,46px); line-height:1.04; letter-spacing:-.03em; }
.hero__s{ margin:14px 0 0; color:var(--muted); font-size:clamp(15px,1.6vw,18px); }
@media(max-width:520px){
  .hero__logo{ width:108px; }
  .hero__eye span{ font-size:11px; letter-spacing:.16em; }
}

/* ══════════════ BARRA DE BUSQUEDA ══════════════
   Vive fuera del paso y se ve siempre: el buscador mira los 77 equipos, no la
   seleccion del paso en el que se esta. Ademas, al no redibujarse con cada
   tecla, el foco deja de perderse solo. */
.toolbar{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.buscador{ position:relative; flex:1 1 220px; }
/* La regla general de los input vive mas abajo y tiene la misma especificidad:
   sin el .toolbar de adelante, gana ella y el icono se monta sobre el texto. */
.toolbar .buscador input{ padding-left:40px; }
.buscador svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:18px; }
.btn-add{
  border:1px dashed var(--marca); color:var(--marca-ink); background:var(--marca-soft);
  border-radius:11px; padding:12px 16px; font:inherit; font-weight:650;
  cursor:pointer; white-space:nowrap;
}
.btn-add:hover{ background:var(--marca-soft-2); }

/* ══════════════ CABEZA DEL WIZARD ══════════════ */
.wiz__h{ margin-bottom:14px; }
.wiz__t{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; }
.paso__pos{
  font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--marca-ink);
  background:var(--marca-soft); padding:3px 10px; border-radius:20px;
  font-weight:600; white-space:nowrap;
}
.paso__cat{ font-size:clamp(19px,2.4vw,23px); font-weight:800; letter-spacing:-.02em; }

/* ══════════════ GRILLA PRINCIPAL ══════════════ */
.grid{ display:grid; grid-template-columns:1fr; gap:22px; padding-bottom:44px; }
@media (min-width:940px){
  .grid{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:28px; align-items:start; }
}

/* ══════════════ PUNTOS DE PROGRESO ══════════════ */
.dots{ display:flex; gap:6px; margin-bottom:14px; }
.dot{
  flex:1; height:6px; border-radius:99px; background:var(--line);
  border:0; padding:0; cursor:pointer; transition:var(--tr);
}
.dot.done{ background:var(--marca-pale); }
.dot.on{ background:var(--marca); }
.dot:focus-visible{ outline:2px solid var(--marca-ink); outline-offset:3px; }
.dot:disabled{ cursor:default; opacity:.5; }

/* ══════════════ TARJETA DE PASO ══════════════ */
/* Sin relleno propio: la barra verde y los rotulos de columna llegan hasta el
   borde, y lo que si necesita margen lo pide con .card__b. */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh); padding:0; overflow:hidden;
}
.card__b{ padding:14px 18px; }

/* Banda gris que separa un bloque del siguiente. Va de borde a borde de la
   tarjeta, como .nota y .aps__h: por eso pone su propio margen lateral en vez
   de heredarlo de .card__b. */
.seccion{
  padding:9px 18px; background:var(--paper); color:var(--ink);
  font-size:12.5px; font-weight:800; letter-spacing:.04em;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
/* La primera pegada a la barra verde no necesita su propia linea de arriba. */
.nota + .seccion{ border-top:0; }

/* Barra verde con la consigna del paso. */
.nota{
  display:flex; align-items:center; gap:9px; padding:12px 18px;
  background:var(--marca-soft); color:var(--marca-ink);
  font-size:13px; font-weight:600; line-height:1.35;
}
.nota svg{ flex:none; stroke-width:2.4; }

/* Rotulos de columna de la lista. Sin esto, la tilde de la derecha no dice de
   que es. */
.aps__h{
  display:flex; align-items:flex-end; gap:14px; padding:8px 18px;
  background:var(--paper);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.aps__hn{ flex:1; min-width:0; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.aps__hq{ width:92px; text-align:center; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.aps__he{ width:120px; text-align:center; font-size:11.5px; line-height:1.2; color:var(--marca-ink); font-weight:700; }
@media(max-width:520px){ .aps__h{ display:none; } }

.fld{ display:block; margin-bottom:13px; }
.fld__l{ display:block; margin-bottom:7px; font-size:13.5px; font-weight:700; color:var(--ink); }
.fld__h{ display:block; margin-top:6px; font-size:13px; color:var(--muted); }

input[type=text],input[type=email],input[type=number],input[type=search]{
  width:100%; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel); color:var(--ink); font:inherit; font-size:15px;
  transition:var(--tr);
}
input:focus{ outline:none; border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-soft-2); }
.fld--corto{ max-width:210px; }
/* Fuera de un .fld, in-unidad es inline: necesita ser bloque para que el
   max-width tenga efecto. */
label.in-unidad{ display:block; }
.in-unidad{ position:relative; }
.in-unidad span{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:14px; pointer-events:none;
}
.in-unidad input{ padding-right:44px; }

/* ---- Opciones tipo píldora ---- */
.ops{ display:flex; flex-wrap:wrap; gap:8px; }
.op{
  padding:9px 16px; border-radius:99px; cursor:pointer;
  border:1.5px solid var(--line); background:var(--panel);
  color:var(--muted); font-size:14.5px; font-weight:600; transition:var(--tr);
}
.op:hover{ border-color:var(--marca-pale); color:var(--ink); }
.op.on{ border-color:var(--marca); background:var(--marca-soft); color:var(--marca-on); }

/* ---- Contadores de ambientes ---- */
.ambs{ display:grid; gap:0; }
.ambs > *:last-child .amb-row{ border-bottom:0; }
.amb-row{ display:flex; align-items:center; gap:12px; padding:6px 18px; border-bottom:1px solid var(--line-soft); }
.amb-row:last-child{ border-bottom:0; }
.amb-row__n{ flex:1; font-size:15px; }
.stepper{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.stepper button{
  width:34px; height:36px; cursor:pointer; border:0; background:var(--paper);
  color:var(--ink); font-size:17px; font-weight:700; line-height:1; transition:var(--tr);
}
.stepper button:hover:not(:disabled){ background:var(--marca-soft); }
.stepper button:disabled{ opacity:.35; cursor:default; }
.stepper output{ width:44px; text-align:center; font-family:var(--mono); font-size:14px; font-weight:600; }
/* La cantidad se escribe. Sin borde ni fondo propios para que siga leyendose
   como parte del control y no como un campo suelto al lado de los botones. */
.stepper .q{
  width:46px; padding:0; border:0; border-radius:0; background:none;
  text-align:center; font-family:var(--mono); font-size:14px; font-weight:600;
  color:var(--ink); -moz-appearance:textfield;
}
.stepper .q::-webkit-outer-spin-button,
.stepper .q::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper .q:focus{ outline:2px solid var(--marca); outline-offset:-2px; box-shadow:none; }
.amb-m2{ margin:0 18px 8px; max-width:210px; }

/* ══════════════ FILAS DE EQUIPOS ══════════════ */

.aps{ display:grid; }
.ap{
  display:grid; grid-template-columns:1fr auto auto;
  gap:14px; align-items:center;
  padding:9px 18px; border-bottom:1px solid var(--line-soft);
}
.ap:last-child{ border-bottom:0; }
.ap__n{ font-size:15px; }
.ap__m{ display:block; margin-top:3px; font-family:var(--mono); font-size:11.5px; letter-spacing:-.01em; color:var(--muted); }
.ap.off .ap__m{ opacity:.6; }

/* Casilla de emergencia. Es una tilde y no un interruptor: la pregunta del
   rotulo es de si o no, y la tilde cae justo debajo de su columna. */
.emg{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:120px; cursor:pointer; user-select:none;
}
.emg input{ position:absolute; opacity:0; pointer-events:none; }
.emg__b{
  width:24px; height:24px; flex:none; position:relative;
  border:2px solid #C3C6C7; border-radius:7px; background:var(--panel);
  transition:background .15s ease, border-color .15s ease;
}
.emg__b::after{
  content:''; position:absolute; left:7.5px; top:3.5px; width:5px; height:10px;
  border:solid var(--marca-on); border-width:0 2.6px 2.6px 0;
  transform:rotate(45deg) scale(0); transition:transform .15s ease;
}
.emg input:checked + .emg__b{ background:var(--marca); border-color:var(--marca); }
.emg input:checked + .emg__b::after{ transform:rotate(45deg) scale(1); }
.emg input:focus-visible + .emg__b{ outline:2px solid var(--ink); outline-offset:2px; }
.emg__t{ font-size:12.5px; font-weight:600; color:var(--muted); min-width:20px; text-align:left; }
.emg input:checked ~ .emg__t{ color:var(--marca-ink); }
.ap.off .emg{ opacity:.4; pointer-events:none; }

/* La columna de cantidad tambien fija su ancho, si no los steppers bailan
   segun cuantas cifras tenga cada numero. */
.ap .stepper{ width:92px; }

/* ══════════════ BOTONES ══════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; cursor:pointer; border:1.5px solid transparent;
  border-radius:var(--r-sm); font-size:15px; font-weight:700;
  text-decoration:none; transition:var(--tr);
}
.btn--pri{ background:var(--marca); color:var(--marca-on); }
.btn--pri:hover{ background:var(--marca-hover); }
.btn--sec{ background:var(--panel); border-color:var(--line); color:var(--ink); }
.btn--sec:hover{ border-color:var(--muted); }
.btn--fant{ background:none; color:var(--marca-ink); padding-inline:10px; }
.btn--fant:hover{ background:var(--marca-tenue); }
.btn--sm{ padding:8px 14px; font-size:13.5px; }
.btn:disabled{ opacity:.45; cursor:default; }

.nav{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.nav__mid{ flex:1; text-align:center; font-size:13px; color:var(--muted); }

/* ══════════════ PANEL LATERAL ══════════════ */
.unit{
  position:sticky; top:16px;
  background:linear-gradient(170deg,var(--screen-2),var(--screen));
  border:1px solid var(--screen-line); border-radius:var(--r);
  box-shadow:var(--sh); padding:20px; color:var(--screen-txt);
}
@media (max-width:1000px){ .unit{ position:static; } }

/* Cada dato del lugar es una pastilla suelta: se leen de un vistazo y se
   acomodan solas cuando son varias. */
.unit__lugar{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:15px; }
.unit__lugar:empty{ display:none; }
.unit__lugar span{
  font-family:var(--mono); font-size:11.5px; color:var(--screen-mut);
  border:1px solid var(--screen-line); border-radius:20px; padding:3px 10px; white-space:nowrap;
}
.unit__l{ margin:12px 0 2px; font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--screen-mut); }
.read{ display:flex; align-items:baseline; gap:7px; }
.read .val{ font-family:var(--mono); font-size:clamp(34px,7vw,46px); font-weight:600; letter-spacing:-.02em; }
.read .u{ font-family:var(--mono); font-size:14px; color:var(--marca-ink); }
.read__sub{ margin:5px 0 0; font-family:var(--mono); font-size:12.5px; color:var(--screen-mut); }
.read__sub b{ color:var(--screen-txt); font-weight:600; }

/* Apagada, la lectura se atenua pero no desaparece: si se fuera del todo, el
   panel cambiaria de alto al marcar el primer equipo y saltaria la pagina. */
.unit--off .read .val,
.unit--off .read__sub b{ color:var(--screen-mut); opacity:.55; }

/* Al pie del panel y no entre los botones de avance: es la unica accion que
   destruye trabajo y no tiene que quedar al lado de "Siguiente". El rojo
   aparece recien al pasar por encima, cuando se esta por decidir. */
.btn-reset{
  display:block; width:100%; margin-top:18px; padding:9px 12px;
  border:1px solid var(--screen-line); border-radius:var(--r-sm);
  background:none; color:var(--screen-mut); font:inherit; font-size:13px;
  font-weight:600; cursor:pointer; transition:var(--tr);
}
.btn-reset:hover{ border-color:var(--err); background:var(--err-soft); color:var(--err); }
.btn-reset:focus-visible{ outline:2px solid var(--screen-txt); outline-offset:2px; }

.hr{ height:1px; background:var(--screen-line); margin:16px 0; }

.target label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; }
.target__in{ display:flex; align-items:center; gap:8px; max-width:150px; }
.target__in input{ background:var(--panel); }
.target__in span{ font-size:14px; color:var(--screen-mut); }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chip{
  padding:5px 11px; border-radius:99px; cursor:pointer;
  border:1px solid var(--screen-line); background:var(--screen-2);
  color:var(--screen-txt); font-size:13px; font-weight:700; transition:var(--tr);
}
.chip:hover{ border-color:var(--marca); }
.chip.on{ background:var(--marca); border-color:var(--marca); color:var(--marca-on); }

/* ---- Recomendación ---- */
.reco{ margin-top:16px; padding:16px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--screen-line); }
.reco__k{ font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--marca-ink); }
.reco__m{ font-size:22px; margin:3px 0 6px; }
.reco__a{ font-size:14px; color:var(--muted); }
.reco__a b{ color:var(--marca-ink); }
.reco__btns{ display:grid; gap:7px; margin-top:13px; }
.reco--vacio{ background:var(--screen-well); border-style:dashed; color:var(--screen-mut); font-size:14px; }
.reco--vacio b{ display:block; color:var(--screen-txt); margin-bottom:3px; }

/* ---- Barras de autonomía ---- */
.gauges{ margin-top:18px; }
.gauges__h{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px; }
.gauges__t{ font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--screen-mut); }
.gauges__k{ font-size:12px; color:var(--screen-mut); }
.gauges__k i{ color:var(--marca-ink); font-style:normal; font-weight:700; }

.g{ margin-bottom:9px; cursor:pointer; }
.g__h{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:3px; }
.g__n{ font-weight:700; }
.g__v{ color:var(--screen-mut); font-variant-numeric:tabular-nums; }
.g__bar{ position:relative; height:9px; border-radius:99px; background:var(--screen-well); overflow:hidden; }
.g__fill{ height:100%; border-radius:99px; background:var(--marca-pale); transition:width .3s var(--tr); }
.g.ok .g__fill{ background:var(--marca); }
.g.sel .g__n{ color:var(--marca-ink); }
.g__meta{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--marca-ink); }

/* ══════════════ MI LISTA ══════════════ */
.lista{ display:grid; }
.lista__i{ display:grid; grid-template-columns:auto 1fr auto auto; gap:12px; align-items:center; padding:7px 18px; border-bottom:1px solid var(--line-soft); }
.lista__q{ font-family:var(--mono); font-weight:600; color:var(--marca-ink); }
.lista__v{ font-family:var(--mono); font-size:12.5px; color:var(--muted); white-space:nowrap; }
.lista__x{ background:none; border:0; cursor:pointer; color:var(--muted); font-size:17px; padding:2px 6px; border-radius:6px; }
.lista__x:hover{ background:var(--err-soft); color:var(--err); }
.vacio{ padding:30px 18px; text-align:center; color:var(--muted); }

/* ══════════════ MODALES ══════════════ */
.modal{
  position:fixed; inset:0; z-index:150; padding:20px;
  background:rgba(18,30,36,.55); display:grid; place-items:center; overflow:auto;
}
.modal__c{ width:100%; max-width:440px; background:var(--panel); border-radius:var(--r); box-shadow:var(--sh-md); padding:26px; }
.modal__t{ font-size:19px; margin-bottom:6px; }
.modal__d{ margin:0 0 18px; color:var(--muted); font-size:14.5px; }
.modal__btns{ display:flex; gap:9px; justify-content:flex-end; margin-top:20px; }
.modal__ok{
  margin:0 0 4px; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--marca-soft); color:var(--marca-on); font-size:14.5px;
}
.modal__err{ margin:10px 0 0; color:var(--err); font-size:13.5px; min-height:1em; }
.modal__nota{ margin:14px 0 0; font-size:12.5px; color:var(--muted); }
/* Trampa antispam: invisible para personas, tentadora para bots */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ══════════════ PIE ══════════════ */
.ftr{ background:var(--panel); border-top:1px solid var(--line); padding:22px 0 30px; }
.ftr p{ margin:0 0 8px; font-size:13px; color:var(--muted); }
.ftr b{ color:var(--ink); }
.ftr__legal{ background:none; border:0; padding:0; cursor:pointer; color:var(--marca-ink); font-size:13px; font-weight:600; text-decoration:underline; }

/* ══════════════ IMPRESIÓN ══════════════ */
@media print{
  @page{ margin:14mm; }
  .hero,.dots,.nav,.gate,.modal,.unit .target,.unit .gauges,.reco__btns,
  .buscador,.btn-add,.btn-reset{ display:none !important; }
  body{ background:#fff; font-size:11pt; }
  .grid{ grid-template-columns:1fr; gap:0; }
  .unit{ position:static; background:none !important; border:1px solid var(--line); }
  .card{ box-shadow:none; }
  .prn-hd{ display:flex !important; }
}
.prn-hd{ display:none; align-items:center; gap:18px; padding-bottom:12px; margin-bottom:16px; border-bottom:3px solid var(--marca); }
.prn-hd img{ height:52px; width:auto; }
.prn-hd b{ display:block; font-size:16pt; }
.prn-hd span{ font-size:10pt; color:var(--muted); }