/* ══ Tokens y arranque ═════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   ZURMETA — la casa de despachos
   ══════════════════════════════════════════════════════════════
   Acero de TONO MEDIO. Ya no quedaban huecos de tono para el
   fondo, pero sí uno estructural: las once hermanas son claras
   (L>90) u oscuras (L<11) y ninguna está en medio. Ésta va en
   L21 %, y le sienta al giro — la nave donde se despacha.

   El acento sí tenía hueco: 83° sin nadie entre el violeta de una
   hermana (245°) y el magenta de otra (328°).

   Forma: placa de esquina viva con filete grueso. Nada redondeado.
   ══════════════════════════════════════════════════════════════ */
:root{--redondo:99px;   /* la pieza redonda entera: numerales y pastillas */
  /* la escala de espaciado: los escalones que ya mandaban en la hoja */
  --e1:.4rem;
  --e2:.5rem;
  --e3:.6rem;
  --e4:.75rem;
  --e5:.9rem;
  --e6:1rem;
  --e7:1.25rem;
  --e8:1.5rem;
  --e9:2rem;
  --e10:2.5rem;
  --e11:3rem;
  --e12:4rem;
  --base:#30363B;        /* acero */
  --panel:#3C4248;
  --panel-2:#494F55;
  --filete:#545C63;
  --filete-2:#7C858D;    /* borde de control: 3.26:1 */

  --tinta:#F4F5F6;       /* 11.21:1 */
  --tinta-2:#CDD1D6;     /* 7.97:1 */
  --apoyo:#A1A8AF;       /* 5.09:1 */

  --violeta:#D184EB;     /* 4.78:1 */
  --violeta-2:#52325D;
  --violeta-ink:#1D1221;

  --ok:#8FD694;   --ok-2:#2C4430;
  --pausa:#E8C468; --pausa-2:#4A3D1C;
  --alto:#EF8B84; --alto-2:#4C2724;

  --fd:"Big Shoulders Display","Plus Jakarta Sans",system-ui,sans-serif;
  --fs:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ancho:1360px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --ctrl:2px;            /* placa, no tarjeta */
  --t:.16s;
  --paso:.3s;}
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--base);color:var(--tinta);
  font-family:var(--fs);font-size:1rem;line-height:1.6;font-synthesis-weight:none}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
}
/* ── fin del fondo ── */
/* ── el tablero ────────────────────────────────────────────────────
   Casi a sangre y sin barra pegajosa: se lee como una consola, no
   como una página. Los encabezados van en banda a todo el ancho. */
:root{}
/* ── fin del panel ── */
/* ── el sistema de medidas ─────────────────────────────────────────
   El alto de los controles sale de un token, no del relleno: así el
   botón y el campo que van juntos miden lo mismo. Antes el mismo
   componente caía en alturas distintas según dónde estuviera. */
:root{--h-ctrl:46px;      /* botón y campo */
  --h-ctrl-lg:54px;   /* la variante grande */
  --h-ctrl-sm:34px;   /* la variante compacta */
  --e1:.35rem; --e2:.6rem; --e3:.9rem;
  --e4:1.25rem; --e5:1.75rem; --e6:2.5rem;}

/* ══ Base tipográfica ══════════════════════════════════════════════ */
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--fd);font-weight:700;line-height:1;
  letter-spacing:.01em;margin:0;text-wrap:balance;text-transform:uppercase}
p{margin:0;text-wrap:pretty}
/* La condensada aguanta cuerpos mayores sin desbordar: por eso el titular
   sube más aquí que en las hermanas de cara ancha. */
h1{font-size:clamp(2.5rem,1.4rem + 4vw,4.75rem)}
h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem)}
h3{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);letter-spacing:.02em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--violeta);outline-offset:2px}
::selection{background:var(--violeta);color:var(--violeta-ink)}
.zm-barra__in{display:flex;align-items:center;gap:var(--e8);min-height:56px}
.zm-logo{display:inline-flex;align-items:center;gap:.3em;font-family:var(--fd);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:1.5rem;
  color:var(--tinta);text-decoration:none}
.zm-nav{display:flex;gap:var(--e8);margin-left:auto;font-size:.8125rem;
  font-family:var(--fd);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.zm-barra__acc{display:flex;align-items:center;gap:var(--e5);margin-left:auto}
.zm-idioma{display:flex;gap:var(--e1);font-size:.8125rem;color:var(--apoyo)}
.zm-enlace{font-size:.9375rem;text-decoration:underline;text-underline-offset:3px}
.zm-b{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  font-family:var(--fd);font-weight:700;font-size:1rem;line-height:1;
  letter-spacing:.05em;text-transform:uppercase;
  padding:var(--e5) var(--e8);border-radius:var(--ctrl);text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:background var(--t),border-color var(--t),color var(--t)}
.zm-b--violeta{background:var(--violeta);color:var(--violeta-ink);border-color:var(--violeta)}
.zm-b--linea{background:transparent;color:var(--tinta);border-color:var(--filete-2)}
.zm-b--grande{padding:var(--e6) 1.8rem;font-size:1.125rem}
.zm-b--chico{padding:var(--e1) var(--e5);font-size:.8125rem;border-width:1px}
.zm-b--ancho{width:100%;margin-top:var(--e7)}
.zm-eyebrow{font-family:var(--fd);font-weight:700;font-size:.875rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--violeta)}
.zm-hero__d{margin-top:var(--e7);font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  color:var(--tinta-2);max-width:48ch}
.zm-hero__acc{margin-top:var(--e9);display:flex;flex-wrap:wrap;gap:var(--e4)}
.zm-orden{margin-top:var(--e9);counter-reset:or}
.zm-placa{margin-top:1.8rem;border:2px solid var(--violeta);
  border-radius:var(--ctrl);padding:clamp(1.5rem,4vw,2.25rem);background:var(--panel)}
.zm-placa__v{font-family:var(--fd);font-weight:700;
  font-size:clamp(2.5rem,1.5rem + 4vw,4.5rem);line-height:.95;letter-spacing:.01em;
  color:var(--violeta);font-variant-numeric:tabular-nums}
.zm-placa__d{margin-top:var(--e5);color:var(--tinta-2);max-width:52ch}
.zm-control{margin-top:var(--e9);border-top:1px solid var(--filete)}
.zm-control__k{font-family:var(--fd);font-weight:700;font-size:1rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--violeta)}
.zm-control__v{color:var(--tinta-2);max-width:60ch}
.zm-campo{display:block;margin-bottom:var(--e7)}
.zm-campo input,.zm-campo select,.zm-campo textarea, .zm-acceso input[type=email],.zm-acceso input[type=password], .zm-acceso input[type=text],.zm-acceso input[type=tel]{width:100%;font:inherit;color:var(--tinta);background:var(--panel);
  border:2px solid var(--filete);border-radius:var(--ctrl);
  padding:var(--e4) var(--e5);transition:border-color var(--t)}
.zm-campo input:focus,.zm-campo select:focus,.zm-campo textarea:focus, .zm-acceso input:focus{outline:0;border-color:var(--violeta)}
.zm-forma{margin-top:var(--e9);display:grid;gap:0 var(--e7);
  grid-template-columns:minmax(0,1fr)}
.zm-nota{display:flex;align-items:flex-start;gap:var(--e3);padding:var(--e5) var(--e6);
  border-left:4px solid var(--filete-2);background:var(--panel);
  margin-bottom:var(--e7);font-size:.9375rem}
.zm-chip{display:inline-flex;align-items:center;padding:.2rem var(--e3);
  font-family:var(--fd);font-size:.8125rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border:1px solid currentColor;border-radius:var(--ctrl)}
.zm-pie{margin-top:clamp(2.5rem,6vw,4.5rem);border-top:2px solid var(--filete);
  padding-top:clamp(2rem,4vw,3rem);font-size:.9375rem}
.zm-pie__in{display:grid;gap:var(--e9);grid-template-columns:minmax(0,1fr)}
.zm-pie__d{color:var(--apoyo);max-width:34ch}
.zm-pagos{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e6)}
.zm-pie__cierre{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e2);
  margin-top:var(--e9);padding:var(--e6) 0 var(--e8);border-top:1px solid var(--filete);
  font-size:.8125rem;color:var(--apoyo)}
.zm-acceso__d{margin:var(--e3) 0 var(--e8);color:var(--apoyo);font-size:.9375rem}
.zm-acceso__pie{margin-top:var(--e7);padding-top:var(--e7);border-top:1px solid var(--filete);
  font-size:.875rem;color:var(--apoyo)}
.zm-casilla{display:flex;gap:var(--e3);align-items:flex-start;margin-top:var(--e6);font-size:.875rem}
.zm-casilla--legal{color:var(--tinta-2)}
@media (max-width:900px){
.zm-nav{display:none}
}
@media (max-width:520px){
.zm-idioma{display:none}
}
/* ══════════════════════════════════════════════════════════════
   PANTALLAS INTERNAS — mostrador, comprobante y autorizaciones
   ══════════════════════════════════════════════════════════════
   Mismo fondo que las hermanas y otra forma: aquí todo va en
   tarjetas redondeadas sobre papel de estraza, con el verde sólo
   en lo que se puede pulsar. Nada de filetes a hueso.
   ══════════════════════════════════════════════════════════════ */
.zm-word{display:inline-block}
.zm-apagado{color:var(--apoyo)}
.zm-marca-agua{font-family:var(--fd);font-weight:600;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--violeta)}
.zm-marca-agua--alto{color:var(--alto)}
.zm-app__cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--e6);margin-bottom:var(--e9)}
.zm-app__estado{display:flex;align-items:center;gap:var(--e2);font-size:.9375rem;color:var(--tinta-2)}
/* El asiento: los tres totales, en pastillas y no en celdas con filete. */
.zm-cambio,.zm-asiento{display:grid;gap:var(--e5);grid-template-columns:minmax(0,1fr);margin-bottom:var(--e9)}
/* El mostrador: la remesa nueva a la izquierda, lo enviado a la derecha. */
.zm-escritorio{display:grid;gap:var(--e8);grid-template-columns:minmax(0,1fr);align-items:start}
.zm-cuenta__cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e6);
  padding:var(--e5) var(--e7);background:var(--violeta);color:var(--violeta-ink)}
.zm-cuenta__r{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e6);
  padding:var(--e5) var(--e7);border-bottom:1px solid var(--filete)}
.zm-cuenta__pie{padding:var(--e4) var(--e7);border-top:1px solid var(--filete);
  background:var(--panel);font-size:.75rem;color:var(--apoyo)}
.zm-asiento-chico{margin:var(--e7) 0 0;border:1px solid var(--filete);
  border-radius:var(--ctrl);overflow:hidden;background:var(--panel)}
/* El monto: la moneda en pastilla, no pegada al campo. */
.zm-monto{display:flex;align-items:stretch;border:1px solid var(--filete-2);
  border-radius:var(--ctrl);background:var(--panel-2);overflow:hidden}
.zm-monto__m{display:flex;align-items:center;padding:0 var(--e5);background:var(--panel);
  border-right:1px solid var(--filete);font-family:var(--fd);font-weight:700;
  font-size:.8125rem;color:var(--apoyo)}
.zm-monto input{flex:1;min-width:0;border:0;background:transparent;font:inherit;
  font-family:var(--fd);font-weight:700;font-size:1.375rem;padding:var(--e3) var(--e5);
  font-variant-numeric:tabular-nums}
.zm-monto input:focus{outline:0}
[data-monto-msg]{display:block;margin-top:var(--e1);font-size:.8125rem;color:var(--apoyo)}
[data-billetera] input{width:100%;font:inherit;font-family:var(--fd);background:var(--panel-2);
  border:1px solid var(--filete-2);border-radius:var(--ctrl);padding:var(--e4) var(--e5);
  overflow-wrap:anywhere}
[data-billetera] input:focus{outline:0;border-color:var(--violeta);box-shadow:0 0 0 3px var(--violeta-2)}
@keyframes zm-gira{
to{transform:rotate(360deg)}
}
main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), footer input:not([type=checkbox]):not([type=hidden]){min-height:var(--h-ctrl);box-sizing:border-box;padding-block:0}
/* el desplegable trae relleno propio del navegador y su alto natural se salta
   el mínimo: aquí va fijo, o queda de 2 a 7px más alto que el campo de al lado */
main select{height:var(--h-ctrl);min-height:var(--h-ctrl);box-sizing:border-box;padding-block:0}
main textarea{min-height:calc(var(--h-ctrl) * 2.8);box-sizing:border-box}

/* ══ Contenedor y zonas ════════════════════════════════════════════ */
.zm-ancho{width:min(var(--ancho),100% - var(--gut)*2);margin-inline:auto}
.zm-sec{padding:clamp(2.75rem,6vw,4.5rem) 0;border-top:2px solid var(--filete)}
.zm-sec__cab{max-width:none}
.zm-sec__cab p{margin-top:var(--e4);color:var(--tinta-2)}
/* la banda del encabezado: sangra a los lados y separa de su contenido */
section.zm-sec{padding-top:0}
/* --panel apenas se separaba del fondo; la banda tiene que leerse */
.zm-sec__cab{background:var(--panel-2);border-bottom:2px solid var(--filete-2);
  margin-inline:calc(50% - 50vw);
  /* el 50% del relleno se resuelve contra el ancho del PADRE, no contra la
     banda ya sangrada: daba 80px y el resto de la página va a 40 */
  padding:var(--e6) max(var(--gut),calc(50vw - var(--ancho)/2));
  margin-bottom:clamp(2rem,4vw,3rem)}
.zm-sec__cab h2{font-size:clamp(1.375rem,1.1rem + .9vw,1.75rem);letter-spacing:.02em}
.zm-sec__cab p{max-width:70ch}

/* ══ Cabecera ══════════════════════════════════════════════════════ */
.zm-barra{background:var(--base);border-bottom:2px solid var(--filete);
  position:sticky;top:0;z-index:40}
.zm-nav a{color:var(--tinta-2);text-decoration:none;padding-block:var(--e1);
  border-bottom:2px solid transparent;transition:color var(--t),border-color var(--t)}
.zm-nav a:hover,.zm-nav a.is-aqui{color:var(--violeta);border-bottom-color:var(--violeta)}
.zm-nav + .zm-barra__acc{margin-left:0}
.zm-idioma a{text-decoration:none}
.zm-idioma a[aria-current]{color:var(--violeta);font-weight:700}
@media (max-width:900px){
.zm-barra__acc{margin-left:auto}
}
@media (max-width:520px){
.zm-barra__in{gap:var(--e4)}
}
/* ── La marca en la barra ───────────────────────────────────────
   0.944 em = 1,18 mayúsculas de esta tipografía, que mide 0.800 em.
   El min-width:0 NO sobra: los hijos de un contenedor flexible nacen
   con min-width:auto y eso le pone un suelo de 1em a la insignia,
   ignorando el ancho en silencio. */
.zm-marca{width:0.944em;height:0.944em;min-width:0;flex:none;display:block}
.zm-barra{position:static}

/* ══ Botones ═══════════════════════════════════════════════════════ */
.zm-b--violeta:hover{background:#DDA0F0;border-color:#DDA0F0}
.zm-b--linea:hover{border-color:var(--violeta);color:var(--violeta)}
.zm-b--alto{background:var(--alto);color:var(--violeta-ink);border-color:var(--alto)}
/* El botón que el guion del panel emite con el nombre de la casa. */
.zm-b--sobre{background:var(--violeta);color:var(--violeta-ink);border-color:var(--violeta)}
.zm-b--sobre:hover{background:#DDA0F0;border-color:#DDA0F0}
.zm-b{min-height:var(--h-ctrl);padding-block:0;box-sizing:border-box}
.zm-b--grande{min-height:var(--h-ctrl-lg);padding-block:0}
.zm-b--chico{min-height:var(--h-ctrl-sm);padding-block:0}

/* ══ Campos y controles ════════════════════════════════════════════ */
.zm-campo > span{display:block;font-family:var(--fd);font-size:.8125rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--apoyo);margin-bottom:var(--e1)}
.zm-campo textarea{min-height:8rem;resize:vertical}
.zm-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zm-casilla input{margin-top:.2rem;flex:none;accent-color:var(--violeta)}
.zm-casilla--legal a{color:var(--violeta);text-underline-offset:3px}
.zm-grupo{border:0;margin:0 0 var(--e9);padding:var(--e7) 0 0;border-top:1px solid var(--filete)}
.zm-grupo:first-of-type{border-top:0;padding-top:0}
.zm-grupo legend{display:flex;align-items:center;gap:var(--e3);padding:0;
  font-family:var(--fd);font-weight:700;font-size:1rem}
.zm-grupo__n{flex:none;width:1.65rem;height:1.65rem;border-radius:var(--redondo);
  background:var(--violeta-2);color:var(--violeta);display:grid;place-items:center;
  font-size:.6875rem;font-weight:700;font-variant-numeric:tabular-nums}
.zm-grupo__d{margin:var(--e4) 0 var(--e7);font-size:.875rem;color:var(--apoyo);max-width:54ch}
.zm-par{display:grid;gap:0 var(--e7);grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){
.zm-par{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.zm-campo--sep{margin-top:var(--e7)}
.zm-condiciones{margin:0 0 var(--e7);background:var(--panel);border:1px solid var(--filete);
  border-radius:var(--ctrl);padding:var(--e5) var(--e6)}
.zm-condiciones li{position:relative;padding:var(--e1) 0 var(--e1) var(--e7);
  font-size:.8125rem;color:var(--tinta-2)}
.zm-condiciones li::before{content:"";position:absolute;left:0;top:.95rem;
  width:6px;height:6px;border-radius:var(--redondo);background:var(--violeta)}
.zm-ranura{counter-increment:ra;display:grid;gap:var(--e2) var(--e7);
  border:2px solid var(--filete);background:var(--panel);padding:var(--e6) var(--e7);
  margin-bottom:var(--e5);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){
.zm-ranura{grid-template-columns:2.5rem minmax(0,1fr)}
/* misma trampa que en .zm-orden: el numeral ::before ya ocupa la primera
     columna, así que la zona de archivo caía en los 40px y no se podía usar */
.zm-ranura > *{grid-column:2}
}
.zm-ranura::before{content:counter(ra,decimal-leading-zero);font-family:var(--fd);
  font-weight:700;font-size:1.5rem;color:var(--violeta);line-height:1;
  font-variant-numeric:tabular-nums}
.zm-ranura.is-puesta{border-color:var(--violeta)}
.zm-ranura.is-mal{border-color:var(--alto);background:var(--alto-2)}
.zm-ranura__k{font-family:var(--fd);font-weight:700;font-size:1rem;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--e1)}
.zm-ranura__k em{display:block;font-style:normal;font-weight:400;font-size:.75rem;
  letter-spacing:0;text-transform:none;color:var(--apoyo)}
.zm-ranura__v input[type=file]{width:100%;font:inherit;font-size:.8125rem}
.zm-ranura__img{width:100%;max-width:220px;margin-bottom:var(--e3);border:2px solid var(--filete)}
.zm-ranura__pie{margin-top:var(--e2);font-size:.8125rem;color:var(--apoyo);overflow-wrap:anywhere}
.zm-ranura__aviso{margin-top:var(--e5);padding:var(--e4) var(--e5);font-size:.875rem;color:var(--alto);
  background:var(--alto-2);border-left:4px solid var(--alto)}

/* ══ Contenedores de información ═══════════════════════════════════ */
.zm-nota .zm-i{flex:none;margin-top:.15rem}
.zm-nota--ok{border-left-color:var(--ok);background:var(--ok-2)}
.zm-nota--wait{border-left-color:var(--pausa);background:var(--pausa-2)}
.zm-nota--bad{border-left-color:var(--alto);background:var(--alto-2)}
.zm-chip--ok{color:var(--ok);background:var(--ok-2)}
.zm-chip--wait{color:var(--pausa);background:var(--pausa-2)}
.zm-chip--bad{color:var(--alto);background:var(--alto-2)}
.zm-aviso-caja{background:var(--panel-2);border:1px solid var(--filete);
  border-radius:var(--ctrl);padding:clamp(1.5rem,4vw,2.4rem);max-width:44rem}
.zm-aviso-caja h2{margin:var(--e4) 0;font-size:clamp(1.25rem,1.05rem + .8vw,1.625rem)}
.zm-aviso-caja p{color:var(--tinta-2);max-width:56ch}
.zm-aviso-caja .zm-b{margin-top:var(--e8)}
/* La tarjeta: cabecera en el color de la casa y cuerpo claro. */
.zm-cuenta{background:var(--panel-2);border:1px solid var(--filete);
  border-radius:var(--ctrl);overflow:hidden}
.zm-cuenta__cab b{font-family:var(--fd);font-weight:700;font-size:.9375rem}
.zm-cuenta__cab span{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;opacity:.88}
.zm-cuenta dl{margin:0}
.zm-cuenta__r:last-of-type{border-bottom:0}
.zm-cuenta__r--fuerte{background:var(--violeta-2)}
.zm-cuenta__r--fuerte dd{color:var(--violeta)}
.zm-cuenta dt{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--apoyo)}
.zm-cuenta dd{margin:0;font-family:var(--fd);font-weight:700;font-variant-numeric:tabular-nums}
.zm-cuenta__cuerpo{padding:var(--e7)}
.zm-cuenta--viva .zm-cuenta__cab span{opacity:1}
.zm-vacio{padding:var(--e10) var(--e8);text-align:center;color:var(--tinta-2)}
.zm-vacio .zm-i{margin:0 auto var(--e4);color:var(--filete-2)}
.zm-vacio__d{margin-top:var(--e1);font-size:.875rem;color:var(--apoyo)}
/* ── el manifiesto de canjes: filas a filete, sin caja ──────────
   La hermana clara lo mete en una tarjeta con borde; aquí las
   filas van sueltas sobre el fondo, separadas por filete. */
.zm-rueda{overflow-x:auto}
.zm-tabla{width:100%;border-collapse:collapse;font-size:.875rem}
.zm-tabla th{text-align:left;font-family:var(--fd);font-weight:600;font-size:.6875rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--violeta);
  padding:var(--e4) var(--e6);border-bottom:1px solid var(--filete-2);white-space:nowrap}
.zm-tabla td{padding:var(--e4) var(--e6);border-bottom:1px solid var(--filete);vertical-align:middle}
.zm-tabla tr:last-child td{border-bottom:0}
.zm-tabla .n{font-family:var(--fd);font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.zm-rueda{overflow-x:auto}
.zm-tabla{width:100%;border-collapse:collapse;font-size:.875rem}
.zm-tabla th{text-align:left;font-family:var(--fd);font-weight:700;font-size:.8125rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--violeta);
  padding:var(--e4) var(--e6);border-bottom:2px solid var(--filete);white-space:nowrap}
.zm-tabla td{padding:var(--e4) var(--e6);border-bottom:1px solid var(--filete);vertical-align:middle}
.zm-tabla tr:last-child td{border-bottom:0}
.zm-tabla .n{font-family:var(--fd);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ══ Portada ═══════════════════════════════════════════════════════ */
.zm-hero{position:relative;isolation:isolate;padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.zm-hero h1{margin-top:var(--e4);max-width:16ch}
/* El andén: una banda de datos duros, como un tablero de salidas.
   Es la pieza de esta casa y no se repite en ninguna otra zona. */
.zm-anden{margin-top:clamp(2.25rem,5vw,3.25rem);border-top:2px solid var(--filete);
  border-bottom:2px solid var(--filete);display:grid;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){
.zm-anden{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.zm-anden__c{padding:var(--e7) 0;border-bottom:1px solid var(--filete)}
@media (min-width:720px){
.zm-anden__c{padding:var(--e7) var(--e8);border-bottom:0;border-right:1px solid var(--filete)}
.zm-anden__c:first-child{padding-left:0}
.zm-anden__c:last-child{border-right:0}
}
.zm-anden__c:last-child{border-bottom:0}
.zm-anden dt{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--apoyo)}
.zm-anden dd{margin:var(--e1) 0 0;font-family:var(--fd);font-weight:700;
  font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);letter-spacing:.01em;
  font-variant-numeric:tabular-nums}
.zm-orden li{counter-increment:or;display:grid;gap:var(--e1) 1.75rem;
  padding:var(--e8) 0;border-bottom:1px solid var(--filete);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){
.zm-orden li{grid-template-columns:5rem minmax(0,1fr)}
/* el numeral es un ::before y ya ocupa la primera columna: hay TRES piezas
     de rejilla y dos columnas, así que sin esto el párrafo caía en la de 5rem
     y salía a palabra y media por renglón */
.zm-orden li > *{grid-column:2}
}
.zm-orden li::before{content:counter(or,decimal-leading-zero);
  font-family:var(--fd);font-weight:700;font-size:2.5rem;line-height:.9;
  color:var(--violeta);font-variant-numeric:tabular-nums}
.zm-orden h3{margin-bottom:var(--e1)}
.zm-orden p{color:var(--tinta-2);max-width:58ch}
.zm-control li{display:grid;gap:var(--e1) var(--e8);padding:var(--e7) 0;
  border-bottom:1px solid var(--filete);grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){
.zm-control li{grid-template-columns:14rem minmax(0,1fr)}
.zm-forma{grid-template-columns:repeat(2,minmax(0,1fr))}
.zm-forma__ancho{grid-column:1/-1}
.zm-cambio,.zm-asiento{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.zm-cambio__c{background:var(--panel);border:2px solid var(--filete);
  border-radius:var(--ctrl);padding:var(--e6) var(--e7)}
.zm-cambio dt{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--apoyo)}
.zm-cambio dd{margin:var(--e1) 0 0;font-family:var(--fd);font-weight:700;
  font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);font-variant-numeric:tabular-nums}
.zm-cambio dd small{font-size:.6875rem;font-weight:600;color:var(--apoyo);margin-left:var(--e1)}
.zm-pestanas{display:flex;flex-wrap:wrap;gap:var(--e1);margin-bottom:var(--e6)}
.zm-pestanas button b{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--apoyo)}
/* ── pestañas: control segmentado, placas pegadas ──────────────── */
.zm-pestanas{gap:0;border:2px solid var(--filete);display:inline-flex;flex-wrap:wrap;
  margin-bottom:var(--e7)}
.zm-pestanas button{display:inline-flex;align-items:center;gap:var(--e1);font:inherit;
  font-family:var(--fd);font-weight:700;font-size:.875rem;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;background:transparent;color:var(--tinta-2);
  border:0;border-right:2px solid var(--filete);border-radius:0;padding:var(--e3) var(--e6);
  transition:background var(--t),color var(--t)}
.zm-pestanas button:last-child{border-right:0}
.zm-pestanas button b{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--apoyo)}
.zm-pestanas button:hover{background:var(--panel)}
.zm-pestanas button.is-on{background:var(--violeta);color:var(--violeta-ink)}
.zm-pestanas button.is-on b{color:var(--violeta-ink);opacity:.75}
/* ── La orden en blanco ─────────────────────────────────────────
   Aquí había tres celdas con rótulo y cifra —la misma pieza que en
   las hermanas—. Ahora es el formulario de salida SIN llenar: los
   rótulos y sus renglones vacíos, como está una orden antes de
   despacharse. No lleva ni un número. */
.zm-orden-blanca{margin-top:clamp(2.25rem,5vw,3.25rem);border:2px solid var(--filete);
  padding:var(--e8) var(--e8);max-width:34rem;background:var(--panel)}
.zm-orden-blanca__t{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--e6);font-family:var(--fd);font-weight:700;font-size:1rem;letter-spacing:.08em;
  text-transform:uppercase;padding-bottom:var(--e5);border-bottom:1px solid var(--filete)}
.zm-orden-blanca__t span{font-family:var(--fs);font-weight:400;font-size:.6875rem;
  letter-spacing:.14em;color:var(--apoyo)}
.zm-orden-blanca__c{display:flex;align-items:baseline;gap:var(--e6);padding:var(--e5) 0 var(--e1);
  border-bottom:1px solid var(--filete)}
.zm-orden-blanca__c:last-child{border-bottom:0;padding-bottom:0}
.zm-orden-blanca__c span{flex:none;width:6.5rem;font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--apoyo)}
.zm-orden-blanca__c i{flex:1;height:1px;background:var(--filete-2)}
/* ── el fondo de la casa ───────────────────────────────────────────
   Vive a la derecha de la columna de texto, en el hueco que dejan el
   titular y la entradilla —medido, no supuesto—. Debajo de 900 px no
   hay hueco y se retira. */
.zm-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23545C63%27%20stroke-width%3D%273%27%3E%3Crect%20x%3D%2712%27%20y%3D%2712%27%20width%3D%27130%27%20height%3D%27130%27%2F%3E%3Crect%20x%3D%2798%27%20y%3D%2798%27%20width%3D%27130%27%20height%3D%27130%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat right -70px bottom -90px/min(34%,320px) auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0 calc(max(var(--gut),(100% - var(--ancho))/2) + 705px),#000 calc(max(var(--gut),(100% - var(--ancho))/2) + 825px));mask-image:linear-gradient(to right,transparent 0 calc(max(var(--gut),(100% - var(--ancho))/2) + 705px),#000 calc(max(var(--gut),(100% - var(--ancho))/2) + 825px))}
@media (max-width:899px){
.zm-hero::before{display:none}
}
@media (min-width:960px){
.zm-hero > .zm-ancho{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,25rem);
    gap:0 clamp(2rem,5vw,4rem);align-items:start}
.zm-hero > .zm-ancho > *{grid-column:1}
.zm-hero > .zm-ancho > .zm-orden-blanca{grid-column:2;grid-row:1 / span 4;margin-top:var(--e1)}
.zm-hero h1{max-width:14ch}
.zm-hero__d{max-width:42ch}
}
.zm-cambio{background:transparent;border:0;gap:var(--e5)}
.zm-cambio__c{border-bottom:2px solid var(--filete);}
/* .gv-pregunta era rejilla sin columnas declaradas: la pista se
   dimensionaba por contenido y se salía 14px del panel. Las demás
   piezas SÍ declaran las suyas y no se tocan. */
.zm-pregunta{grid-template-columns:minmax(0,1fr)}

/* ══ Acceso y alta ═════════════════════════════════════════════════ */
.zm-acceso{padding:clamp(2.5rem,6vw,4.5rem) var(--gut)}
.zm-acceso__caja{max-width:460px;margin-inline:auto;background:var(--panel);
  border:2px solid var(--filete);border-radius:var(--ctrl);
  padding:clamp(1.6rem,4vw,2.4rem)}
.zm-acceso__caja--ancha{max-width:720px}
.zm-acceso h1{font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem)}
.zm-acceso__pie a{color:var(--violeta);text-underline-offset:3px}
/* El layout va bajo [open]: un display suelto ABRE un <dialog> cerrado. */
.zm-dlg{border:1px solid var(--filete);border-radius:var(--ctrl);background:var(--panel-2);
  color:var(--tinta);padding:clamp(1.3rem,3vw,1.8rem);max-width:30rem;width:calc(100% - 2rem)}
.zm-dlg[open]{display:block}
.zm-dlg::backdrop{background:rgba(24,28,31,.5)}
.zm-dlg h2{font-size:1.25rem}
.zm-dlg__d{margin:var(--e4) 0 var(--e7);color:var(--tinta-2);font-size:.9375rem}
.zm-dlg__d-l{margin:0 0 var(--e8);border:1px solid var(--filete);border-radius:var(--ctrl);
  overflow:hidden}
.zm-dlg__d-l > div{display:flex;justify-content:space-between;gap:var(--e6);
  padding:var(--e4) var(--e5);border-bottom:1px solid var(--filete)}
.zm-dlg__d-l > div:last-child{border-bottom:0}
.zm-dlg__d-l dt{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--apoyo)}
.zm-dlg__d-l dd{margin:0;font-family:var(--fd);font-weight:700;
  font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.zm-dlg__f{display:flex;gap:var(--e3);justify-content:flex-end;flex-wrap:wrap}
.zm-cerrar{flex:none;background:transparent;border:0;color:var(--tinta-2);cursor:pointer;padding:.2rem}
.zm-cerrar:hover{color:var(--tinta)}
/* ── fin del hero en consola ── */
/* ── el acceso: una placa, con rótulo al costado ───────────────────
   A todo el ancho y en filas: el rótulo a la izquierda y el campo a la
   derecha, como se llena una orden. */
.zm-acceso__caja:not(.zm-acceso__caja--ancha){max-width:44rem;padding:0;
  background:var(--panel);border:2px solid var(--filete)}
.zm-acceso__caja:not(.zm-acceso__caja--ancha) > *{padding-inline:clamp(1.4rem,3.5vw,2.2rem)}
.zm-acceso__caja:not(.zm-acceso__caja--ancha) .zm-marca-agua{padding-block:var(--e5);border-bottom:2px solid var(--filete);margin:0}
.zm-acceso__caja:not(.zm-acceso__caja--ancha) h1{margin-top:var(--e8)}
@media (min-width:640px){
.zm-acceso__caja:not(.zm-acceso__caja--ancha) form{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);
    column-gap:0;align-items:center}
.zm-acceso__caja:not(.zm-acceso__caja--ancha) form > *{grid-column:1 / -1}
.zm-acceso__caja:not(.zm-acceso__caja--ancha) form > .zm-campo{grid-column:1;margin:0;padding:var(--e5) var(--e7) var(--e5) 0;
    border-top:1px solid var(--filete)}
.zm-acceso__caja:not(.zm-acceso__caja--ancha) form > .zm-campo > span{margin-bottom:0}
.zm-acceso__caja:not(.zm-acceso__caja--ancha) form > .zm-campo + input{grid-column:2;margin:0;border-top:1px solid var(--filete);
    border-inline:0;border-bottom:0;border-radius:0;background:transparent}
.zm-acceso__caja:not(.zm-acceso__caja--ancha) form > .zm-casilla{margin-top:var(--e7)}
}
.zm-acceso__caja:not(.zm-acceso__caja--ancha) .zm-acceso__pie{border-top:2px solid var(--filete);padding-block:var(--e6);margin-top:var(--e8)}
/* ── fin del acceso ── */
/* ── el alta: cada grupo en su placa ───────────────────────────────
   El título va en banda, como el encabezado de una orden. */
.zm-acceso__caja--ancha{background:transparent;border:0;padding:0}
.zm-acceso__caja--ancha .zm-grupo{border:2px solid var(--filete);background:var(--panel);
  padding:0 0 var(--e8);margin-bottom:var(--e8)}
.zm-acceso__caja--ancha .zm-grupo legend{width:100%;box-sizing:border-box;
  background:var(--filete);color:var(--tinta);padding:var(--e4) var(--e7);margin:0;
  text-transform:uppercase;letter-spacing:.08em;font-size:.875rem}
.zm-acceso__caja--ancha .zm-grupo__n{background:transparent;color:var(--tinta);
  border:1px solid var(--tinta);border-radius:0;width:auto;height:auto;padding:.05rem var(--e1)}
.zm-acceso__caja--ancha .zm-grupo > *:not(legend){margin-inline:var(--e7)}
.zm-acceso__caja--ancha .zm-grupo__d{margin-top:var(--e6)}

/* ══ Panel con sesion ══════════════════════════════════════════════ */
.zm-app__cab--centro{justify-content:center;text-align:center}
.zm-app__cab h1{margin-top:var(--e3)}
.zm-app__d{margin-top:var(--e4);color:var(--tinta-2);max-width:58ch}
.zm-app__pie{margin-top:var(--e5);text-align:center;font-size:.8125rem;color:var(--apoyo)}
.zm-app__acc{display:grid;gap:var(--e4);grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:var(--e8);padding-top:var(--e8);border-top:1px solid var(--filete)}
@media (min-width:1000px){
.zm-escritorio{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
}
.zm-monto:focus-within{border-color:var(--violeta);box-shadow:0 0 0 3px var(--violeta-2)}
.zm-rapidos{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e3)}
.zm-pista{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e6);
  margin-top:var(--e1);font-size:.8125rem;color:var(--apoyo)}
.zm-pista b{font-variant-numeric:tabular-nums;font-weight:700;flex:none}
[data-billetera].is-ok input{border-color:var(--ok)}
[data-billetera].is-ok .zm-pista{color:var(--ok)}
[data-billetera].is-warn input{border-color:var(--pausa)}
[data-billetera].is-warn .zm-pista{color:var(--pausa)}
[data-billetera].is-mal input{border-color:var(--alto)}
[data-billetera].is-mal .zm-pista{color:var(--alto)}
.zm-cargando{padding:var(--e9);text-align:center;color:var(--apoyo);font-size:.875rem}
.zm-codigo{display:flex;gap:var(--e2);justify-content:center;margin-bottom:var(--e7)}
.zm-codigo input:focus{outline:0;border-color:var(--violeta);box-shadow:0 0 0 3px var(--violeta-2)}
.zm-codigo input{width:3rem;height:3.5rem;text-align:center;font-family:var(--fd);
  font-weight:700;font-size:1.75rem;color:var(--tinta);background:var(--panel);
  border:2px solid var(--filete);border-radius:var(--ctrl);
  font-variant-numeric:tabular-nums;transition:border-color var(--t)}
.zm-codigo input:focus{outline:0;border-color:var(--violeta)}
.zm-codigo input.is-puesta{border-color:var(--violeta);color:var(--violeta)}
@media (min-width:1000px){
.zm-escritorio > :first-child{order:2}
}

/* ══ Paginas legales y prosa ═══════════════════════════════════════ */
.zm-doc{display:block;padding:var(--e3) var(--e4);background:var(--panel-2);border:1px solid var(--filete);
  border-radius:var(--ctrl);font-size:.8125rem;color:var(--violeta);text-decoration:none}
.zm-doc:hover{border-color:var(--violeta)}
.zm-legal__in{max-width:68ch}
.zm-legal__fecha{margin:var(--e3) 0 var(--e9);font-size:.875rem;color:var(--apoyo)}
.zm-prosa h2{margin:2.2rem 0 var(--e3);font-size:1.375rem}
.zm-prosa h3{margin:var(--e8) 0 var(--e2);font-size:1.0625rem}
.zm-prosa p,.zm-prosa li{color:var(--tinta-2);margin-bottom:var(--e5)}
.zm-prosa ul,.zm-prosa ol{margin:0 0 var(--e7) var(--e7);list-style:disc}
.zm-prosa ol{list-style:decimal}
.zm-prosa a{color:var(--violeta);text-underline-offset:3px}
.zm-prosa table{width:100%;border-collapse:collapse;margin-bottom:var(--e7)}
.zm-prosa th,.zm-prosa td{border:1px solid var(--filete);padding:var(--e3) var(--e4);text-align:left}

/* ══ Tienda ════════════════════════════════════════════════════════ */
.zm-woo a{color:var(--violeta)}
.zm-woo .button{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-weight:600;background:var(--violeta);color:var(--violeta-ink);
  border:1px solid var(--violeta);border-radius:var(--ctrl);padding:var(--e4) var(--e7);text-decoration:none}
.zm-woo input,.zm-woo select,.zm-woo textarea{font:inherit;background:var(--panel-2);
  border:1px solid var(--filete-2);border-radius:var(--ctrl);padding:var(--e4) var(--e5)}

/* ══ Pie ═══════════════════════════════════════════════════════════ */
@media (min-width:820px){
.zm-pie__in{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.zm-pie__marca .zm-logo{font-size:1.5rem;margin-bottom:var(--e3)}
.zm-pagos li{font-size:.75rem;color:var(--apoyo);border:1px solid var(--filete);
  padding:var(--e1) var(--e3)}
.zm-pie__col h2{font-family:var(--fd);font-size:.875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violeta);margin-bottom:var(--e4)}
.zm-pie__col li{margin-bottom:var(--e1)}
.zm-pie__col a{color:var(--tinta-2);text-decoration:none}
.zm-pie__col a:hover{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.zm-pie__cierre p{margin:0}
@media (min-width:820px){
.zm-pie__in{gap:var(--e8)}
}

/* ══ Resto ═════════════════════════════════════════════════════════ */
.zm-angosto{max-width:38rem}
[data-monto-msg].is-mal{color:var(--alto)}
.zm-sobre-rotulo{text-align:center;font-family:var(--fd);font-weight:600;
  font-size:.8125rem;margin-bottom:var(--e4)}
.zm-sobre-chip{margin-left:auto;font-family:var(--fd);font-weight:700;font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--violeta);
  background:var(--violeta-2);border-radius:var(--redondo);padding:var(--e1) var(--e4)}
.zm-herramientas{display:flex;flex-wrap:wrap;gap:var(--e3);margin-bottom:var(--e6)}
.zm-buscar{display:flex;align-items:center;gap:var(--e2);flex:1;min-width:14rem;
  background:var(--panel-2);border:1px solid var(--filete-2);border-radius:var(--ctrl);padding:0 var(--e5)}
.zm-buscar .zm-i{flex:none;color:var(--apoyo)}
.zm-buscar input{flex:1;min-width:0;border:0;background:transparent;font:inherit;padding:var(--e3) 0}
.zm-buscar input:focus{outline:0}
.zm-buscar:focus-within{border-color:var(--violeta)}
.zm-paginador{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--e3);padding:var(--e5) var(--e7);border-top:1px solid var(--filete);
  font-size:.8125rem;color:var(--apoyo)}
.zm-paginador > div{display:flex;gap:var(--e2)}
.zm-velo{position:fixed;inset:0;background:rgba(24,28,31,.45);opacity:0;visibility:hidden;
  transition:opacity var(--paso),visibility var(--paso);z-index:60}
.zm-velo.is-on{opacity:1;visibility:visible}
.zm-cajon{position:fixed;top:0;right:0;bottom:0;width:min(34rem,100%);z-index:61;
  background:var(--base);border-left:1px solid var(--filete-2);display:flex;
  flex-direction:column;transform:translateX(100%);transition:transform var(--paso) ease;overflow:hidden}
.zm-cajon.is-on{transform:none}
.zm-cajon__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e6);
  padding:var(--e7) var(--e7);border-bottom:1px solid var(--filete);background:var(--panel-2)}
.zm-cajon__cab h2{font-size:1.125rem}
.zm-cajon__cab p{margin-top:.2rem;font-size:.875rem;color:var(--apoyo)}
.zm-cajon__cuerpo{flex:1;overflow-y:auto;padding:var(--e7)}
.zm-cajon__pie{padding:var(--e6) var(--e7);border-top:1px solid var(--filete);background:var(--panel-2);
  display:flex;flex-wrap:wrap;gap:var(--e2)}
.zm-block{margin-bottom:var(--e8)}
.zm-block h3{font-family:var(--fd);font-size:.75rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--violeta);margin-bottom:var(--e3)}
.zm-docs{display:grid;gap:var(--e2);grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
.zm-qa > div{display:flex;justify-content:space-between;gap:var(--e6);padding:var(--e3) 0;
  border-bottom:1px solid var(--filete);font-size:.875rem}
.zm-qa dt{color:var(--apoyo)}
.zm-qa dd{margin:0;text-align:right}
.zm-log{font-size:.8125rem;color:var(--tinta-2)}
.zm-log li{padding:var(--e1) 0;border-bottom:1px solid var(--filete)}
.zm-decision{padding:var(--e3) var(--e5);font-size:.875rem;border:1px solid var(--filete);
  border-radius:var(--ctrl);background:var(--panel-2)}
.zm-decision--wait{border-color:var(--pausa);background:var(--pausa-2)}
.zm-spin{display:inline-block;width:1rem;height:1rem;border:2px solid var(--filete);
  border-top-color:var(--violeta);border-radius:50%;animation:zm-gira .7s linear infinite}
.zm-ranuras{border-top:1px solid var(--filete-2);padding-top:var(--e1)}
/* ── las dos caras: PLACAS a todo lo ancho, numeradas ──────────
   Una hermana las pone en dos columnas y otra apiladas con el
   rótulo al costado; aquí cada una es una placa completa con su
   numeral, como los renglones de una orden. */
.zm-ranuras{counter-reset:ra}