/* =====================================================================
   Graphie · sistema de órdenes de producción
   La referencia visual es su propio formato de papel: etiquetas en
   condensada mayúscula, una banda sólida de tinta para los encabezados
   de sección, cajas reglonadas y el folio impreso destacado.
   El óxido es el de su logotipo; el papel, un sustrato sin estucar.
   ===================================================================== */

:root{
  --papel:#F1F1EE; --sup:#FFFFFF; --sup-2:#E9E9E5;
  --tinta:#16181A; --tinta-2:#4C5055; --tinta-3:#84888C;
  --linea:#DCDCD6; --linea-2:#C2C2BA;
  --oxido:#C4551F; --oxido-osc:#9C4318; --oxido-suave:#F9EDE6;
  --azul:#1266A6; --alerta:#B3231C; --pausa:#8A5B07; --pausa-suave:#FBF1DC;
  --serie-trabajo:#1266A6; --serie-espera:#C4551F;
  --r:4px; --r-g:8px;
  --sombra:0 1px 0 rgba(22,24,26,.04), 0 1px 3px rgba(22,24,26,.06);
  --papel-0:rgba(241,241,238,0); --borde-desliz:rgba(22,24,26,.15);
  --banda:#16181A; --banda-txt:#F1F1EE; --banda-2:#C9CACB;
}
@media (prefers-color-scheme:dark){
  :root{
    --papel:#121315; --sup:#1A1C1F; --sup-2:#232629;
    --tinta:#E9EAEA; --tinta-2:#A3A7AB; --tinta-3:#797E83;
    --linea:#2A2D31; --linea-2:#3C4046;
    --oxido:#E0763C; --oxido-osc:#F0966A; --oxido-suave:#301508;
    --azul:#4F9BD4; --alerta:#F0837C; --pausa:#DFAB44; --pausa-suave:#2B2109;
    --serie-trabajo:#3182BC; --serie-espera:#D9682F;
    --sombra:0 1px 0 rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.4);
    --papel-0:rgba(18,19,21,0); --borde-desliz:rgba(0,0,0,.5);
    --banda:#2A2D31; --banda-txt:#F2F3F3; --banda-2:#B9BDC1;
  }
}

*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%;
  font-variant-numeric:tabular-nums;
}
.wrap{
  max-width:600px;margin:0 auto;
  /* La barra de acción mide 78 px; en un iPhone con indicador de inicio
     crece con el safe-area, así que el colchón crece con ella. */
  padding:18px 16px calc(108px + env(safe-area-inset-bottom));
}
a{color:var(--oxido-osc);text-decoration-thickness:1px;text-underline-offset:2px}
@media (prefers-color-scheme:dark){ a{color:var(--oxido-osc)} }

/* ---------- cabecera: la marca sobre una banda de tinta ---------- */
.top{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;row-gap:2px;
  background:var(--banda);color:var(--banda-txt);
  padding:0 16px;position:sticky;top:0;z-index:20;
  border-bottom:3px solid var(--oxido);
}
.top .marca{
  font-family:"Archivo Narrow","Archivo",sans-serif;
  font-weight:700;font-size:19px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--banda-txt);text-decoration:none;padding:12px 0;white-space:nowrap;
}
.top nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:2px 4px;align-items:center}
.top nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 10px;
  color:var(--banda-2);text-decoration:none;font-size:14px;border-radius:var(--r);
}
.top nav a:hover{color:var(--banda-txt);background:rgba(255,255,255,.10)}
.top nav a:active{background:var(--oxido)}
.top .quien{
  font-family:"Archivo Narrow",sans-serif;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--banda-2);opacity:.72;padding:0 6px;
}
@media (max-width:560px){
  .top{position:static;padding:0 12px}
  .top .quien{display:none}
  .top .marca{font-size:17px;padding:10px 0}
  .top nav a{padding:0 8px;font-size:13.5px}
}

/* ---------- títulos y bandas de sección ---------- */
h1{
  font-family:"Archivo Narrow","Archivo",sans-serif;
  font-size:26px;font-weight:700;letter-spacing:.01em;margin:6px 0 18px;
  text-wrap:balance;
}
h2.sub{
  font-family:"Archivo Narrow",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--banda);color:var(--banda-txt);
  margin:30px 0 12px;padding:7px 10px;border-radius:var(--r);
}
.vacio{color:var(--tinta-3);font-size:15px;padding:14px 0;max-width:60ch}
.nota{
  font-size:13px;color:var(--tinta-3);border-top:1px solid var(--linea);
  padding-top:12px;margin-top:18px;max-width:64ch;
}

.aviso{
  background:var(--oxido-suave);border:1px solid var(--oxido);
  border-left:4px solid var(--oxido);color:var(--oxido-osc);
  border-radius:var(--r);padding:12px 14px;margin:0 0 18px;font-size:14.5px;
}
.error{
  background:var(--sup);border:1px solid var(--alerta);
  border-left:4px solid var(--alerta);color:var(--alerta);
  border-radius:var(--r);padding:12px 14px;margin:0 0 18px;font-size:14.5px;
}

/* ---------- el campo grande: el renglón de la libreta ---------- */
label.hero{
  display:block;font-family:"Archivo Narrow",sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--banda-txt);background:var(--banda);padding:7px 10px;border-radius:var(--r) var(--r) 0 0;
}
textarea{
  width:100%;min-height:118px;padding:14px;
  border:2px solid var(--banda);border-top:0;border-radius:0 0 var(--r) var(--r);
  background:var(--sup);color:var(--tinta);
  font:inherit;font-size:18px;line-height:1.45;resize:vertical;
}
textarea:focus{outline:3px solid var(--oxido-suave);outline-offset:0;border-color:var(--oxido)}
.pista{font-size:13.5px;color:var(--tinta-3);margin:9px 2px 24px;max-width:62ch}
.pista b{color:var(--tinta-2);font-weight:600}

/* ---------- campos ---------- */
.campo{margin-bottom:20px;display:block}
.lab{
  display:block;font-family:"Archivo Narrow",sans-serif;
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-2);margin-bottom:7px;
}
.lab em{
  font-style:normal;font-size:10px;letter-spacing:.08em;color:var(--tinta-3);
  border:1px solid var(--linea-2);border-radius:2px;padding:1px 5px;margin-left:6px;
}
input[type=text],input[type=search],input[type=password],input[type=date],input:not([type]),select{
  width:100%;min-height:46px;padding:11px 13px;
  border:1px solid var(--linea-2);border-radius:var(--r);
  background:var(--sup);color:var(--tinta);font:inherit;font-size:16px;
}
input:focus,select:focus{outline:3px solid var(--oxido-suave);outline-offset:0;border-color:var(--oxido)}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fila.tres{grid-template-columns:1fr 1fr 1fr;gap:9px}
.fila.tres label,.col label,.filtros label,.fila-consent label{
  display:flex;flex-direction:column;gap:5px;
  font-family:"Archivo Narrow",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);
}
.col{display:flex;flex-direction:column;gap:16px;max-width:340px}
.col.ancho{max-width:440px}
.combo{position:relative}
.list{
  position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:15;
  background:var(--sup);border:1px solid var(--linea-2);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden;max-height:210px;overflow-y:auto;
}
.list button{
  display:block;width:100%;text-align:left;font:inherit;font-size:15px;
  padding:13px;background:none;border:0;color:var(--tinta);cursor:pointer;
  border-bottom:1px solid var(--linea);
}
.list button:last-child{border-bottom:0}
.list button:hover,.list button:focus-visible{background:var(--oxido-suave);outline:none}
.list .new{color:var(--oxido-osc);font-weight:600}

/* ---------- chips: un toque, objetivos grandes ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{
  font:inherit;font-size:15px;cursor:pointer;
  padding:0 15px;min-height:46px;
  border:1px solid var(--linea-2);border-radius:var(--r);
  background:var(--sup);color:var(--tinta-2);
}
.chips button:hover{border-color:var(--oxido);color:var(--tinta)}
.chips button:focus-visible{outline:3px solid var(--oxido-suave);outline-offset:1px}
.chips button.on{
  background:var(--banda);border-color:var(--banda);color:var(--banda-txt);font-weight:600;
  box-shadow:inset 0 -3px 0 var(--oxido);
}

/* ---------- acciones ---------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:25;
  background:var(--papel);border-top:1px solid var(--linea);
  /* En navegación por gestos, Android se queda con los toques de la franja
     inferior de la pantalla, y en pestaña de navegador el safe-area suele
     valer 0. Se reserva un mínimo para que el botón nunca caiga ahí. */
  padding:11px 16px max(22px, calc(11px + env(safe-area-inset-bottom)));
}
.barra .primario{display:block;max-width:568px;margin:0 auto;width:100%}
.primario{
  font-family:"Archivo Narrow",sans-serif;font-size:17px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  padding:16px;border:0;border-radius:var(--r);
  background:var(--oxido);color:#FFF;min-height:52px;
}
.primario:hover{background:var(--oxido-osc)}
.primario:focus-visible{outline:3px solid var(--oxido-suave);outline-offset:2px}
.primario.grande{width:100%;font-size:18px;padding:19px}
.secundario{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:0 18px;border:1px solid var(--linea-2);border-radius:var(--r);
  text-decoration:none;color:var(--tinta-2);background:var(--sup);
  font:inherit;font-size:15px;cursor:pointer;
}
.secundario:hover{border-color:var(--oxido);color:var(--tinta)}
.secundario.chico{min-height:44px;padding:0 16px;font-size:14px}
.enlace{
  background:none;border:0;color:var(--oxido-osc);cursor:pointer;font:inherit;
  font-size:14px;padding:10px 6px;min-height:44px;text-decoration:underline;
  text-underline-offset:2px;
}
.en-linea{display:inline}
.volver{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;text-decoration:none;color:var(--tinta-3);margin-bottom:2px;
}
.volver:hover{color:var(--oxido-osc)}
.acciones{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:22px;flex-wrap:wrap}

/* ---------- pestañas ---------- */
.pestanas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.pestanas a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 15px;
  border:1px solid var(--linea-2);border-radius:var(--r);
  text-decoration:none;color:var(--tinta-2);font-size:15px;background:var(--sup);
}
.pestanas a:hover{border-color:var(--oxido)}
.pestanas a.on{
  background:var(--banda);border-color:var(--banda);color:var(--banda-txt);font-weight:600;
  box-shadow:inset 0 -3px 0 var(--oxido);
}

/* ---------- tablas ---------- */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{
  text-align:left;font-family:"Archivo Narrow",sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3);
  padding:0 10px 8px 0;border-bottom:2px solid var(--tinta);
}
td{padding:13px 10px 13px 0;border-bottom:1px solid var(--linea);color:var(--tinta-2);vertical-align:top}
td.der,th.der{text-align:right}
td.n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--tinta);white-space:nowrap}
td.d{color:var(--tinta);max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr.anulado td{opacity:.45;text-decoration:line-through}
tr.motivo td{font-size:13px;color:var(--tinta-3);padding-top:0;text-decoration:none}
.alta-cat{grid-template-columns:1fr auto;margin-bottom:22px;align-items:end}

/* ---------- en teléfono, el historial se apila ----------
   Seis columnas no caben en 390 px. Deslizar de lado funciona, pero nadie en un
   taller lo descubre solo, y «Corregir» —que es la salida cuando alguien marca
   una etapa por error— quedaba escondida al final del renglón. En pantalla
   angosta cada paso se muestra como una ficha, con todo a la vista. */
@media (max-width:560px){
  .hist.apilar thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hist.apilar,.hist.apilar tbody,.hist.apilar tr,.hist.apilar td{display:block;width:auto}
  .hist.apilar tr{
    border:1px solid var(--linea-2);border-radius:var(--r);background:var(--sup);
    padding:10px 12px;margin-bottom:10px;
  }
  .hist.apilar tr.anulado{opacity:.5}
  .hist.apilar td{
    border:0;padding:3px 0;display:flex;justify-content:space-between;gap:14px;
    align-items:baseline;text-align:left;
  }
  .hist.apilar td::before{
    content:attr(data-r);flex:0 0 auto;
    font-family:"Archivo Narrow",sans-serif;font-size:11px;font-weight:700;
    letter-spacing:.11em;text-transform:uppercase;color:var(--tinta-3);
  }
  .hist.apilar td[data-r="Etapa"]{
    display:block;font-weight:600;font-size:16px;
    border-bottom:1px solid var(--linea);padding-bottom:8px;margin-bottom:6px;
  }
  .hist.apilar td[data-r="Etapa"]::before{display:none}
  .hist.apilar td.acc{justify-content:flex-end;padding-top:6px}
  .hist.apilar td.acc::before{display:none}
  .hist.apilar td.der{text-align:right}
  .hist.apilar tr.motivo td{display:block;font-size:13px}
  .hist.apilar tr.motivo{border-style:dashed;margin-top:-6px}
  /* apilada ya no necesita deslizarse */
  .rodillo:has(.hist.apilar){overflow-x:visible;background-image:none}
}

/* ---------- rodillo: la tabla ancha se desliza, la página no ----------
   Sin el rodillo, html{overflow-x:hidden} recortaba la última columna
   y dejaba «Corregir» fuera del alcance en un teléfono.
   La sombra de los bordes avisa que todavía hay columnas de ese lado. */
.rodillo{
  overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:thin;
  background-image:
    linear-gradient(to right, var(--papel), var(--papel-0)),
    linear-gradient(to left,  var(--papel), var(--papel-0)),
    linear-gradient(to right, var(--borde-desliz), var(--papel-0)),
    linear-gradient(to left,  var(--borde-desliz), var(--papel-0));
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:28px 100%,28px 100%,9px 100%,9px 100%;
  background-attachment:local,local,scroll,scroll;
}

/* El tablero vacío es la primera pantalla que abre el taller cada mañana:
   deja a la vista la única acción que tiene sentido ahí. */
.nada{
  border:1px dashed var(--linea-2);border-radius:var(--r-g);
  padding:26px 20px 28px;text-align:center;background:var(--sup);
}
.nada .vacio{padding:0 0 18px;margin:0 auto;max-width:38ch}
.como-boton{display:inline-flex;align-items:center;text-decoration:none;padding:16px 26px}

/* ---------- tablero: pila de tickets ---------- */
.tablero{display:flex;flex-direction:column;gap:10px}
.tarjeta{
  display:block;background:var(--sup);border:1px solid var(--linea-2);
  border-left:5px solid var(--tinta);border-radius:var(--r);
  padding:14px 16px;text-decoration:none;color:inherit;box-shadow:var(--sombra);
}
.tarjeta:hover{border-color:var(--oxido);border-left-color:var(--oxido)}
.tarjeta.vencida{border-left-color:var(--alerta)}
.tarjeta.detenida{border-left-color:var(--pausa)}
.tarjeta .linea{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tarjeta .folio{
  font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600;
  letter-spacing:-.02em;color:var(--tinta);
}
.tarjeta .etapa{
  font-family:"Archivo Narrow",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);
  border:1px solid var(--linea-2);border-radius:2px;padding:2px 7px;white-space:nowrap;
}
.tarjeta .desc{margin:8px 0;font-size:16px;color:var(--tinta);line-height:1.35}
.tarjeta .pie{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--tinta-3);flex-wrap:wrap}
.tarjeta .tiempo{font-family:"IBM Plex Mono",monospace}
.aviso-vencida,.aviso-detenida{
  margin-top:9px;font-family:"Archivo Narrow",sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.aviso-vencida{color:var(--alerta)}
.aviso-detenida{color:var(--pausa)}

/* ---------- ficha de la orden ---------- */
.desc-grande{font-size:19px;margin:0 0 6px;line-height:1.35}
.meta,.meta-acabados{color:var(--tinta-3);font-size:14px;margin:0 0 5px}
.accion{
  background:var(--sup);border:1px solid var(--linea-2);border-radius:var(--r);
  padding:18px;margin-bottom:26px;box-shadow:var(--sombra);
}
.ahora{margin:0 0 14px;color:var(--tinta-2);font-size:15.5px}
.ahora b{color:var(--tinta)}
.accion .lab{margin-top:14px}
.accion .chips{margin-bottom:16px}
table.hist{font-size:14px}
.maq,.inferido,.corr{
  display:inline-block;font-family:"Archivo Narrow",sans-serif;font-size:10.5px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:2px;padding:2px 6px;margin-left:6px;white-space:nowrap;
}
.maq{border:1px solid var(--linea-2);color:var(--tinta-3)}
.inferido{background:var(--pausa-suave);color:var(--pausa)}
.corr{border:1px solid var(--alerta);color:var(--alerta)}

/* ---------- orden detenida ---------- */
.detenida{
  border:1px solid var(--pausa);border-left:5px solid var(--pausa);
  border-radius:var(--r);padding:16px 18px;margin-bottom:24px;background:var(--sup);
}
.detenida p{margin:0 0 10px;font-size:15px;color:var(--tinta-2)}
.detenida .desde{font-size:13.5px;color:var(--tinta-3)}
.nota-bloq{display:inline-block;font-size:12.5px;color:var(--tinta-3);margin-left:6px}
details.bloquear{margin-bottom:24px}
details.bloquear summary{
  cursor:pointer;font-size:14px;color:var(--tinta-3);padding:12px 0;min-height:44px;
  display:flex;align-items:center;
}
details.bloquear summary:hover{color:var(--oxido-osc)}
details.bloquear form{margin-top:12px}

/* ---------- ticket ---------- */
.ticket{
  background:var(--sup);border:1px solid var(--tinta);border-radius:var(--r);
  padding:0 0 22px;max-width:420px;margin:0 auto;overflow:hidden;box-shadow:var(--sombra);
}
.ticket .folio{
  font-family:"IBM Plex Mono",monospace;font-size:30px;font-weight:600;
  letter-spacing:-.01em;text-align:center;color:var(--banda-txt);background:var(--banda);
  padding:14px 0;border-bottom:3px solid var(--oxido);
}
.ticket .qr{display:flex;justify-content:center;margin:20px 0 14px}
.qr-falta{
  border:1px dashed var(--linea-2);border-radius:var(--r);padding:16px;text-align:center;
  font-size:12.5px;color:var(--tinta-3);display:flex;flex-direction:column;gap:5px;
  width:100%;margin:0 22px;
}
.qr-falta b{color:var(--tinta-2);font-size:13.5px}
.ticket h2{font-size:18px;margin:6px 22px 18px;text-align:center;line-height:1.35}
.ticket dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 22px;font-size:14.5px}
.ticket dt{
  font-family:"Archivo Narrow",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);padding-top:2px;
}
.ticket dd{margin:0;color:var(--tinta)}

/* ---------- reportes ---------- */
.filtros{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:24px}
.titular{
  background:var(--sup);border:1px solid var(--linea-2);
  border-left:5px solid var(--serie-espera);border-radius:var(--r);
  padding:20px 22px;margin-bottom:30px;box-shadow:var(--sombra);
}
.titular .cifra{
  font-family:"IBM Plex Mono",monospace;font-size:46px;font-weight:600;
  letter-spacing:-.03em;line-height:1;margin:0 0 10px;color:var(--tinta);
}
.titular .glosa{margin:0;font-size:15px;color:var(--tinta-2);max-width:56ch;line-height:1.5}
.titular .glosa b{color:var(--tinta)}
.leyenda{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 14px;font-size:13px;color:var(--tinta-2)}
.clave{display:inline-flex;align-items:center;gap:7px}
.sw{width:12px;height:12px;border-radius:2px;display:inline-block}
.sw.trabajo{background:var(--serie-trabajo)} .sw.espera{background:var(--serie-espera)}
.barras{display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.fila-barra{display:grid;grid-template-columns:96px 1fr 66px;gap:12px;align-items:center}
.fila-barra .et{
  font-family:"Archivo Narrow",sans-serif;font-size:12.5px;letter-spacing:.04em;
  color:var(--tinta-2);text-align:right;line-height:1.25;word-break:break-word;
}
.fila-barra .val{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--tinta-2);text-align:right;
}
.riel{display:flex;height:18px;background:var(--sup-2);border-radius:2px;overflow:hidden}
.seg{display:block;height:100%}
.seg.espera{background:var(--serie-espera);box-shadow:2px 0 0 var(--papel)}
.seg.trabajo{background:var(--serie-trabajo)}
.dos{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.caja{
  flex:1;min-width:130px;background:var(--sup);border:1px solid var(--linea-2);
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--sombra);
}
.caja i{
  display:block;font-style:normal;font-family:"Archivo Narrow",sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);
}
.caja b{font-family:"IBM Plex Mono",monospace;font-size:28px;font-weight:600;letter-spacing:-.02em;color:var(--tinta)}

/* ---------- clientes y consentimiento ---------- */
.consent{
  border:1px solid var(--linea-2);border-radius:var(--r);padding:16px 18px;
  margin-bottom:20px;background:var(--sup);box-shadow:var(--sombra);
}
.consent.si{border-left:5px solid var(--azul)}
.consent.no{border-left:5px solid var(--alerta)}
.consent p{margin:0 0 10px;font-size:14.5px;color:var(--tinta-2)}
.consent .texto-legal{
  font-size:13.5px;color:var(--tinta-3);border-top:1px solid var(--linea);padding-top:12px;
}
.consent q{color:var(--tinta);font-style:italic}
.fila-consent{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:6px}
.fila-consent select{min-width:170px}
.ok{color:var(--azul);font-weight:600}
.no{color:var(--tinta-3)}
.soy-yo{
  font-family:"Archivo Narrow",sans-serif;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-3);padding:6px;
}
.pin-form{margin-left:10px}
.pin-form input{width:110px;min-height:40px;padding:6px 9px;font-size:14px;display:inline-block}

/* ---------- montos ---------- */
.campo.dinero,.dinero-ficha{
  border:1px solid var(--linea-2);border-left:5px solid var(--tinta-3);
  border-radius:var(--r);padding:16px 18px;background:var(--sup);box-shadow:var(--sombra);
}
.dinero-ficha{margin-bottom:26px}
.pista-dinero{font-size:13px;color:var(--tinta-3);margin:0 0 14px;max-width:58ch}
.calculo{
  margin:12px 0 0;font-family:"IBM Plex Mono",monospace;font-size:14.5px;color:var(--tinta-2);
}
.dinero-ficha dl{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:10px 0 0;font-size:14.5px}
.dinero-ficha dt{
  font-family:"Archivo Narrow",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);
}
.dinero-ficha dd{margin:0;text-align:right;font-family:"IBM Plex Mono",monospace;color:var(--tinta)}
.dinero-ficha .fuerte{font-weight:700;color:var(--tinta);border-top:1px solid var(--linea);padding-top:7px}

/* ---------- escáner ---------- */
.escaner{
  position:relative;background:#000;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;margin-bottom:12px;border:1px solid var(--tinta);
}
.escaner video{width:100%;height:100%;object-fit:cover;display:block}
.marco{
  position:absolute;inset:15%;border:3px solid var(--oxido);border-radius:6px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.4);pointer-events:none;
}

/* ---------- aviso de privacidad ---------- */
.legal{max-width:66ch;margin:0 auto}
.legal h1{font-size:24px;margin:10px 0 4px}
.legal .fecha-legal{color:var(--tinta-3);font-size:13.5px;margin:0 0 26px}
.legal h2{
  font-family:"Archivo Narrow",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--oxido-osc);
  margin:26px 0 9px;background:none;padding:0;
}
.legal p,.legal li{font-size:15px;color:var(--tinta-2);margin:0 0 10px;line-height:1.6}
.legal ul{padding-left:20px;margin:0 0 12px}
.pie-legal{
  max-width:600px;margin:0 auto;padding:26px 16px 34px;font-size:13px;
  border-top:1px solid var(--linea);
}
.pie-legal a{color:var(--tinta-3)}

.respaldo{margin-top:36px;border-top:1px solid var(--linea);padding-top:22px}
.respaldo .pista{max-width:62ch}

/* ---------- impresión del ticket ---------- */
@media print{
  @page{margin:12mm}
  .no-imprimir,.top,.barra,.pie-legal{display:none !important}
  body{background:#FFF;color:#000}
  .wrap{padding:0;max-width:none}
  /* 105 mm: el mismo ancho que en pantalla, y caben dos por hoja carta
     si deciden cortarlas. A ancho completo los campos quedaban perdidos
     contra un margen derecho vacío. */
  .ticket{
    border:1.5px solid #000;border-radius:0;box-shadow:none;
    width:105mm;max-width:100%;margin:0;padding-bottom:14px;
  }
  /* En papel el folio va negro sobre blanco. Con la banda de tinta corría el
     riesgo de salir en blanco sobre blanco —invisible— porque el navegador
     no imprime fondos salvo que el usuario active «gráficos de fondo»,
     y print-color-adjust no lo garantiza en todos. Además ahorra tóner
     en un ticket que se imprime decenas de veces al día. */
  .ticket .folio{
    background:none !important;color:#000 !important;border-bottom:2px solid #000;
    padding:8px 0 6px;font-size:28px;
  }
  /* 150px ≈ 40 mm: sobra para que el teléfono lo lea desde el papel. */
  .ticket .qr img,.ticket .qr canvas{width:150px;height:150px}
  .ticket dt{color:#000}
  .ticket dd{color:#000}
  a[href]:after{content:""}
}