/* ==========================================================================
   Aconcagua Charcutería — hoja de estilos
   Paleta de madera y campo. El logo es negro puro: el color lo pone el
   entorno, nunca el logo.
   ========================================================================== */

:root{
  /* superficies: madera clara lijada */
  --papel:#F1EBE0;
  --papel-2:#FBF7F0;
  --papel-3:#E7DFD1;

  /* tinta: el negro cálido del logo */
  --tinta:#241E18;
  --tinta-suave:#6B5F52;
  --tinta-tenue:#9A8D7D;

  /* acentos */
  --madera:#7C5334;
  --madera-clara:#A87B4E;
  --campo:#566B45;
  --brasa:#A5372A;
  --trigo:#96690F;

  --campo-fondo:rgba(86,107,69,.10);
  --brasa-fondo:rgba(165,55,42,.09);
  --trigo-fondo:rgba(150,105,15,.11);
  --madera-fondo:rgba(124,83,52,.09);

  --linea:rgba(36,30,24,.14);
  --linea-fuerte:rgba(36,30,24,.30);
  --sombra:rgba(36,30,24,.16);

  --logo-filtro:none;
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --papel:#191512;
    --papel-2:#221C17;
    --papel-3:#2C241D;

    --tinta:#EFE7DA;
    --tinta-suave:#A99B8A;
    --tinta-tenue:#7A6E60;

    --madera:#C89463;
    --madera-clara:#DDB187;
    --campo:#93A878;
    --brasa:#E58472;
    --trigo:#D7A94F;

    --campo-fondo:rgba(147,168,120,.14);
    --brasa-fondo:rgba(229,132,114,.14);
    --trigo-fondo:rgba(215,169,79,.14);
    --madera-fondo:rgba(200,148,99,.13);

    --linea:rgba(239,231,218,.13);
    --linea-fuerte:rgba(239,231,218,.28);
    --sombra:rgba(0,0,0,.5);

    --logo-filtro:invert(1) brightness(.94);
    color-scheme:dark;
  }
}

:root[data-tema="oscuro"]{
  --papel:#191512;
  --papel-2:#221C17;
  --papel-3:#2C241D;
  --tinta:#EFE7DA;
  --tinta-suave:#A99B8A;
  --tinta-tenue:#7A6E60;
  --madera:#C89463;
  --madera-clara:#DDB187;
  --campo:#93A878;
  --brasa:#E58472;
  --trigo:#D7A94F;
  --campo-fondo:rgba(147,168,120,.14);
  --brasa-fondo:rgba(229,132,114,.14);
  --trigo-fondo:rgba(215,169,79,.14);
  --madera-fondo:rgba(200,148,99,.13);
  --linea:rgba(239,231,218,.13);
  --linea-fuerte:rgba(239,231,218,.28);
  --sombra:rgba(0,0,0,.5);
  --logo-filtro:invert(1) brightness(.94);
  color-scheme:dark;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.5;
  min-height:100vh;
}

/* ---------- tipografía base ---------- */
h1,h2,h3,h4{
  font-family:"Archivo Narrow","Arial Narrow",sans-serif;
  font-weight:600;
  margin:0;
  text-wrap:balance;
  letter-spacing:.01em;
}
h1{font-size:1.9rem;text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
h2{font-size:1.35rem}
h3{font-size:1.1rem}

.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tinta-tenue);
}
.mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.suave{color:var(--tinta-suave)}
.tenue{color:var(--tinta-tenue)}

a{color:var(--madera);text-decoration-color:color-mix(in srgb,var(--madera) 40%,transparent)}
:focus-visible{outline:2px solid var(--madera);outline-offset:2px;border-radius:2px}

/* ---------- barra superior ---------- */
.barra{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:1rem;
  padding:.6rem 1rem;
  background:var(--papel-2);
  border-bottom:1px solid var(--linea);
  box-shadow:0 4px 16px -14px var(--sombra);
  flex-wrap:wrap;
}
.marca{display:flex;align-items:center;flex:none;text-decoration:none}
.logo{
  height:38px;width:auto;display:block;
  filter:var(--logo-filtro);
}
.modulos{display:flex;gap:.2rem;flex:1;flex-wrap:wrap;min-width:0}
.modulos a{
  font-family:"Archivo Narrow","Arial Narrow",sans-serif;
  font-size:.92rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinta-suave);text-decoration:none;
  padding:.35rem .6rem;border-radius:3px;
  border:1px solid transparent;
  transition:background .15s ease,color .15s ease;
  white-space:nowrap;
}
.modulos a:hover{background:var(--madera-fondo);color:var(--tinta)}
.modulos a[aria-current="page"]{
  background:var(--madera);color:var(--papel-2);
}
:root[data-tema="oscuro"] .modulos a[aria-current="page"],
:root:not([data-tema="claro"]) .modulos a[aria-current="page"]{color:#1A1410}
@media (prefers-color-scheme:light){
  :root:not([data-tema="oscuro"]) .modulos a[aria-current="page"]{color:#FBF7F0}
}

/*  El manual va separado de los módulos con un borde: se lee como "otra
    cosa", no como una sección más del trabajo. Se empuja a la derecha para
    que no se meta en el orden natural del recorrido.                      */
.modulos a.manual-boton{
  margin-left:auto;border-color:var(--linea);opacity:.85;
}
.modulos a.manual-boton::before{content:"? ";opacity:.6}
.modulos a.manual-boton:hover{opacity:1}
@media (max-width:720px){ .modulos a.manual-boton{margin-left:0} }

/*  El nombre de quien usa el sistema. Tiene que leerse de lejos: es lo que
    hace que alguien note que dice el nombre del turno anterior.          */
.quien-barra{
  flex:none;background:transparent;border:1px solid var(--linea);border-radius:3px;
  padding:.3rem .6rem;cursor:pointer;
  font-family:"Archivo Narrow","Arial Narrow",sans-serif;
  font-size:.92rem;font-weight:600;letter-spacing:.03em;color:var(--tinta);
  max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.quien-barra::before{content:"\2022 ";color:var(--campo)}
.quien-barra:hover{border-color:var(--madera)}
.quien-barra.sin-nombre{color:var(--brasa);border-color:var(--brasa)}
.quien-barra.sin-nombre::before{content:"\26A0 ";color:var(--brasa)}

.panel-quien{
  position:fixed;top:3.4rem;right:1rem;z-index:80;width:min(22rem,calc(100vw - 2rem));
  background:var(--papel-2);border:1px solid var(--linea-fuerte);border-radius:5px;
  padding:.9rem 1rem;box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.lista-quien{display:flex;flex-wrap:wrap;gap:.35rem}

.estado-conexion{
  flex:none;display:flex;align-items:center;gap:.4rem;
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-tenue);
}
.estado-conexion::before{
  content:"";width:.5rem;height:.5rem;border-radius:50%;
  background:var(--campo);
}
.estado-conexion.sin-red::before{background:var(--trigo)}
.estado-conexion.sin-red{color:var(--trigo)}

/* ---------- layout ---------- */
.pantalla{max-width:64rem;margin:0 auto;padding:1.6rem 1rem 5rem}
.cabecera-pantalla{margin-bottom:1.4rem}
.cabecera-pantalla h1{margin-top:.25rem}
.cabecera-pantalla .bajada{color:var(--tinta-suave);margin:.4rem 0 0;max-width:38rem}

.grilla{display:grid;gap:.9rem}
.grilla.dos{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.grilla.tres{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}

/* ---------- tarjetas ---------- */
.tarjeta{
  background:var(--papel-2);
  border:1px solid var(--linea);
  border-radius:4px;
  padding:1.1rem 1.15rem;
}
.tarjeta.plana{background:transparent;border-color:var(--linea)}
.tarjeta h3{margin-bottom:.5rem}

/* placas de producto */
.placas{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.placa{
  display:flex;flex-direction:column;gap:.3rem;
  background:var(--papel-2);
  border:1px solid var(--linea-fuerte);
  border-radius:4px;
  padding:1.1rem 1.1rem 1rem;
  text-align:left;cursor:pointer;
  font:inherit;color:inherit;
  transition:transform .12s ease,border-color .15s ease,background .15s ease;
  position:relative;overflow:hidden;
}
.placa::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--madera);
}
.placa:hover{border-color:var(--madera);background:var(--madera-fondo);transform:translateY(-2px)}
.placa .nombre{
  font-family:"Archivo Narrow","Arial Narrow",sans-serif;
  font-size:1.28rem;font-weight:600;line-height:1.1;
}
.placa .detalle{font-size:.82rem;color:var(--tinta-suave)}
.placa .curado{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--madera);margin-top:.3rem;
}

/* ---------- avisos ---------- */
.avisos{display:grid;gap:.5rem;margin-bottom:1.6rem}
.aviso{
  display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;
  padding:.7rem .9rem;
  border:1px solid var(--linea);
  border-left:4px solid var(--tinta-tenue);
  border-radius:3px;
  background:var(--papel-2);
  font-size:.93rem;
}
.aviso .icono{
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:.9rem;
  width:1.1rem;text-align:center;
}
.aviso .accion{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  color:var(--tinta-suave);text-decoration:none;
  border:1px solid var(--linea-fuerte);border-radius:2px;padding:.24rem .5rem;
}
.aviso .accion:hover{border-color:var(--madera);color:var(--madera)}
.aviso.critico{border-left-color:var(--brasa);background:var(--brasa-fondo)}
.aviso.critico .icono{color:var(--brasa)}
.aviso.atencion{border-left-color:var(--trigo);background:var(--trigo-fondo)}
.aviso.atencion .icono{color:var(--trigo)}
.aviso.bien{border-left-color:var(--campo);background:var(--campo-fondo)}
.aviso.bien .icono{color:var(--campo)}

/* ---------- botones ---------- */
.btn{
  font-family:"Archivo Narrow","Arial Narrow",sans-serif;
  font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  padding:.55rem 1.1rem;
  border:1px solid var(--linea-fuerte);
  background:transparent;color:var(--tinta);
  border-radius:3px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:.45rem;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{background:var(--madera-fondo);border-color:var(--madera)}
.btn.principal{background:var(--madera);border-color:var(--madera);color:#FBF7F0}
:root[data-tema="oscuro"] .btn.principal{color:#1A1410}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .btn.principal{color:#1A1410}
}
.btn.principal:hover{background:var(--madera-clara);border-color:var(--madera-clara)}
.btn.chico{font-size:.82rem;padding:.32rem .65rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.acciones{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}

/* ---------- formularios ---------- */
label.campo{display:grid;gap:.3rem;font-size:.88rem;color:var(--tinta-suave)}
input[type="text"],input[type="number"],input[type="search"],select,textarea{
  font:inherit;font-size:1rem;
  padding:.5rem .6rem;
  background:var(--papel);
  color:var(--tinta);
  border:1px solid var(--linea-fuerte);
  border-radius:3px;
  width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--madera);box-shadow:0 0 0 3px var(--madera-fondo)}
input.grande{font-family:"IBM Plex Mono",monospace;font-size:1.6rem;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- tablas ---------- */
.tabla-marco{overflow-x:auto;border:1px solid var(--linea);border-radius:4px;background:var(--papel-2)}
table{width:100%;border-collapse:collapse;font-size:.93rem}
thead th{
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-tenue);
  text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--linea);
  white-space:nowrap;
}
th.der,td.der{text-align:right}
th.centro,td.centro{text-align:center}
tbody td{padding:.55rem .7rem;border-bottom:1px solid var(--linea)}
tbody tr:last-child td{border-bottom:0}
tbody tr.agrupa td{border-bottom:0;padding-bottom:.15rem;font-weight:600}
td.hijo{padding-left:1.6rem;color:var(--tinta-suave);font-family:"IBM Plex Mono",monospace;font-size:.82rem;position:relative}
td.hijo::before{content:"└";position:absolute;left:.7rem;color:var(--tinta-tenue)}

/* ---------- etiquetas de estado ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.14rem .42rem;border-radius:2px;
  border:1px solid currentColor;white-space:nowrap;
}
.chip.critico{color:var(--brasa);background:var(--brasa-fondo)}
.chip.atencion{color:var(--trigo);background:var(--trigo-fondo)}
.chip.bien{color:var(--campo);background:var(--campo-fondo)}
.chip.neutro{color:var(--tinta-tenue);background:transparent}
.chip.madera{color:var(--madera);background:var(--madera-fondo)}

/* barra de nivel de stock */
.nivel{height:5px;background:var(--papel-3);border-radius:99px;overflow:hidden;min-width:4rem}
.nivel span{display:block;height:100%;background:var(--campo)}
.nivel.atencion span{background:var(--trigo)}
.nivel.critico span{background:var(--brasa)}

/* ---------- línea de tiempo del lote ---------- */
.linea-tiempo{display:flex;align-items:stretch;gap:0;margin:.9rem 0 .5rem;border-radius:3px;overflow:hidden}
.linea-tiempo .tramo{
  flex:var(--peso,1);padding:.45rem .6rem;
  background:var(--papel-3);
  border-right:2px solid var(--papel-2);
  font-size:.78rem;
}
.linea-tiempo .tramo:last-child{border-right:0}
.linea-tiempo .tramo.hecho{background:var(--campo-fondo)}
.linea-tiempo .tramo.actual{background:var(--madera-fondo);box-shadow:inset 0 -3px 0 var(--madera)}
.linea-tiempo .tramo .et{
  font-family:"Archivo Narrow",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;display:block;font-size:.85rem;
}
.linea-tiempo .tramo .fe{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--tinta-suave)}

/* ---------- checklist de la orden ---------- */
.seccion-receta{margin-top:1.5rem}
.seccion-receta h3{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-suave);
  display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem;
}
.seccion-receta h3::after{content:"";flex:1;border-top:1px solid var(--linea)}
.seccion-receta h3 .btn{margin-left:.6rem;text-transform:none;letter-spacing:.03em}
.seccion-receta h3:has(.btn)::after{order:-1}

.paso{display:grid;grid-template-columns:1.6rem 1fr;gap:.7rem;padding:.4rem 0;border-bottom:1px dotted var(--linea);font-size:.93rem}
.paso:last-child{border-bottom:0}
.paso .n{font-family:"IBM Plex Mono",monospace;font-size:.75rem;color:var(--tinta-tenue);padding-top:.15rem}

/* ---------- aviso flotante ---------- */
.aviso-flotante{
  position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);
  z-index:60;max-width:min(30rem,92vw);
  background:var(--tinta);color:var(--papel-2);
  padding:.7rem 1rem;border-radius:4px;
  font-size:.92rem;box-shadow:0 12px 32px -14px rgba(0,0,0,.6);
}
:root[data-tema="oscuro"] .aviso-flotante{background:var(--papel-3);color:var(--tinta);border:1px solid var(--linea-fuerte)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .aviso-flotante{background:var(--papel-3);color:var(--tinta);border:1px solid var(--linea-fuerte)}
}

/* ---------- tienda online: plano de ejemplo y reparto ---------- */
.plano{display:block;width:100%;height:auto;border:1px solid var(--linea);border-radius:4px}
.plano .pl-fondo{fill:var(--papel-2)}
.plano .pl-calle{stroke:var(--linea);stroke-width:2;fill:none}
.plano .pl-avenida{stroke:var(--linea-fuerte);stroke-width:7;fill:none}
.plano .pl-plaza{fill:var(--campo-fondo)}
.plano .pl-lago{fill:rgba(91,141,176,.22)}
.plano .pl-texto text{fill:var(--tinta-tenue);font:500 22px "IBM Plex Sans",sans-serif;text-anchor:middle}
.plano .pl-anillo{fill:none;stroke:var(--madera);stroke-width:2;stroke-dasharray:8 8;opacity:.7}
.plano .pl-anillo-txt{fill:var(--madera);font:600 19px "IBM Plex Mono",monospace}
.plano .pl-recorrido{fill:none;stroke:var(--madera);stroke-width:5;stroke-dasharray:14 9;stroke-linecap:round;stroke-linejoin:round}
.plano .pl-parada circle{fill:var(--tinta);stroke:var(--papel-2);stroke-width:3}
.plano .pl-parada text{fill:var(--papel-2);font:700 18px "IBM Plex Mono",monospace;text-anchor:middle}
.plano .pl-parada.candidato circle{fill:var(--papel-2);stroke:var(--tinta-tenue);stroke-dasharray:4 3}
.plano .pl-parada.candidato text{fill:var(--tinta-suave)}
.plano .pl-local rect{fill:var(--madera)}
.plano .pl-local text{fill:var(--papel-2);font:700 20px "IBM Plex Mono",monospace;text-anchor:middle}
.plano .pl-marca path{fill:var(--brasa);stroke:var(--papel-2);stroke-width:2}
.plano .pl-marca circle{fill:var(--papel-2)}
ol.hoja-ruta{margin:.4rem 0 0;padding-left:1.4rem;display:grid;gap:.9rem}
ol.hoja-ruta li{font-size:.92rem;line-height:1.5}
ol.hoja-ruta li::marker{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--madera)}

/* ---------- el comprobante de entrega: una hoja, siempre en blanco ---------- */
.hojas-comprobante{display:grid;gap:1.2rem}
.linea-corte{border-top:1px dashed var(--linea-fuerte);text-align:center;margin:.2rem 0}
.linea-corte span{background:var(--papel);position:relative;top:-.7rem;padding:0 .7rem;
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-tenue)}
.comprobante{
  background:#fff;color:#241E18;border:1px solid #C9BCA8;border-radius:3px;
  padding:1.3rem 1.4rem 1.1rem;font-size:.9rem;line-height:1.4;break-inside:avoid;
}
.comprobante header{display:grid;grid-template-columns:4.6rem 1fr auto;gap:1rem;align-items:start;
  border-bottom:2px solid #241E18;padding-bottom:.7rem}
.comprobante .logo-hoja{width:4.6rem;height:auto;filter:none}
.comprobante .emisor{display:flex;flex-direction:column;font-size:.8rem;color:#54483D;line-height:1.35}
.comprobante .emisor b{font-size:1.05rem;color:#241E18;font-family:"Archivo Narrow",sans-serif;letter-spacing:.01em}
.comprobante .numero{text-align:right;display:flex;flex-direction:column;gap:.1rem}
.comprobante .numero .rotulo{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:#8A7C6E}
.comprobante .numero .tipo{font-size:.82rem;color:#54483D}
.comprobante .numero b{font-size:1.3rem;letter-spacing:.02em}
.comprobante .leyenda{margin:.5rem 0 0;font-family:"IBM Plex Mono",monospace;font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;color:#8A7C6E}
.comprobante .a-quien{display:grid;grid-template-columns:5.5rem 1fr;gap:.6rem;margin:.7rem 0 .9rem;
  border:1px solid #E4D9C8;border-radius:2px;padding:.5rem .7rem;font-size:.86rem}
.comprobante .a-quien .k{font-size:.72rem;color:#8A7C6E;text-transform:uppercase;letter-spacing:.06em}
.comprobante table.detalle{width:100%;border-collapse:collapse}
.comprobante table.detalle th{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:#8A7C6E;text-align:left;border-bottom:1px solid #241E18;padding:.3rem .4rem}
.comprobante table.detalle td{padding:.4rem;border-bottom:1px solid #EBE2D4;vertical-align:top}
.comprobante table.detalle .der,.comprobante table.detalle th.der{text-align:right}
.comprobante .tenue{color:#8A7C6E}
.comprobante .cierre-comprobante{display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;margin-top:.8rem}
.comprobante .aclaraciones{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;color:#8A7C6E;max-width:24rem}
.comprobante .total-comprobante{text-align:right;display:flex;flex-direction:column;gap:.1rem}
.comprobante .total-comprobante span{font-size:.72rem;color:#8A7C6E;text-transform:uppercase;letter-spacing:.06em}
.comprobante .total-comprobante b{font-size:1.5rem}
.comprobante .total-comprobante .como-pago{text-transform:none;letter-spacing:0;font-size:.78rem}
.comprobante .firmas{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;margin-top:2.2rem}
.comprobante .firmas .linea{display:block;border-top:1px solid #241E18;margin-bottom:.25rem}
.comprobante .firmas .k{font-size:.72rem;color:#54483D}
@media (max-width:40rem){
  .comprobante header{grid-template-columns:3.4rem 1fr;gap:.7rem}
  .comprobante .numero{grid-column:1 / -1;text-align:left}
  .comprobante .firmas{grid-template-columns:1fr;gap:1.6rem}
}

.pie-version{margin:2.2rem 0 0;text-align:center;font-family:"IBM Plex Mono",monospace;
  font-size:.7rem;letter-spacing:.06em;color:var(--tinta-tenue)}
[data-ayuda]{cursor:help}
th[data-ayuda],summary[data-ayuda] h3,h3[data-ayuda]{text-decoration:underline dotted var(--tinta-tenue) 1px;text-underline-offset:3px}

.barra-practica{
  position:fixed;left:0;right:0;top:0;z-index:75;
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:center;
  background:var(--trigo);color:#1A1410;padding:.5rem .9rem;font-size:.88rem;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
/*  El !important es a propósito: la barra es siempre amarilla, no sigue el
    tema claro/oscuro, y las reglas del tema son más específicas.        */
.barra-practica button.btn{background:transparent;border-color:rgba(26,20,16,.5);color:#1A1410 !important}
.barra-practica button.btn.principal{background:#1A1410;color:#F7F1E7 !important;border-color:#1A1410}
.barra-practica button.btn:hover{background:rgba(26,20,16,.12)}
.barra-practica button.btn.principal:hover{background:#000;color:#fff}
body.practicando .barra{border-bottom-color:var(--trigo)}
/*  El marco es a propósito: tiene que cantar desde la otra punta del salón
    que eso no es el programa de verdad.                                  */
body.practicando::after{
  content:"";position:fixed;inset:0;z-index:74;pointer-events:none;
  border:4px solid var(--trigo);border-top-width:0;
}
body.practicando .modulos a[aria-current="page"]{background:var(--trigo);color:#1A1410}
body.practicando .placa::before{background:var(--trigo)}
body.practicando .cabecera-pantalla h1::after{
  content:" · práctica";color:var(--trigo);font-size:.5em;letter-spacing:.1em;text-transform:uppercase;
  vertical-align:middle;font-family:"IBM Plex Mono",monospace;
}

.barra-version{
  position:fixed;left:50%;transform:translateX(-50%);bottom:1.1rem;z-index:70;
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;justify-content:center;
  background:var(--tinta);color:var(--papel);border-radius:4px;padding:.6rem .9rem;
  box-shadow:0 6px 22px rgba(0,0,0,.28);font-size:.88rem;max-width:min(94vw,34rem);
}

.lista-limpia{list-style:none;padding:0;margin:.3rem 0 0;font-size:.92rem}
.lista-limpia li{padding:.3rem 0;border-bottom:1px dotted var(--linea)}
.lista-limpia li:last-child{border-bottom:0}

/* ---------- desplegables: la historia se ve solo si se pide ---------- */
.flecha{background:transparent;border:0;cursor:pointer;color:var(--tinta-tenue);font-size:.8rem;padding:0 .4rem 0 0;
  line-height:1;display:inline-block;transition:transform .15s ease}
.flecha:hover{color:var(--madera)}
.flecha[aria-expanded="true"]{transform:rotate(90deg);color:var(--madera)}
tr.fila-historia > td{background:var(--papel);padding:.5rem .8rem .8rem 1.6rem}
details.desplegable > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
details.desplegable > summary::-webkit-details-marker{display:none}
details.desplegable > summary::before{content:"▸";color:var(--tinta-tenue);display:inline-block;transition:transform .15s ease}
details.desplegable[open] > summary::before{transform:rotate(90deg);color:var(--madera)}
details.desplegable[open] > summary{margin-bottom:.5rem}
.historia-mini{width:100%;font-size:.86rem}
.historia-mini td{padding:.3rem .5rem;border-bottom:1px dotted var(--linea)}
.historia-mini tr:last-child td{border-bottom:0}
.historia-mini .mas{color:var(--campo);font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.historia-mini .menos{color:var(--brasa);font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.opciones-pago{display:flex;gap:.4rem;flex-wrap:wrap}
.opciones-pago .btn[aria-pressed="true"]{background:var(--madera);border-color:var(--madera);color:#FBF7F0}

/* ---------- vacío ---------- */
.vacio{
  text-align:center;padding:3rem 1rem;color:var(--tinta-tenue);
  border:1px dashed var(--linea-fuerte);border-radius:4px;
}

/* ---------- impresión: la orden en papel ---------- */
@media print{
  .barra,.acciones,.aviso-flotante,.no-imprimir{display:none !important}
  .cabecera-pantalla{display:none}
  /* las dos copias entran en una sola hoja: se corta al medio */
  .hojas-comprobante{gap:0}
  .comprobante{border:0;padding:0;font-size:8.4pt;page-break-inside:avoid;break-inside:avoid}
  .comprobante header{padding-bottom:.45rem}
  .comprobante .logo-hoja{width:3.4rem}
  .comprobante .emisor b{font-size:.95rem}
  .comprobante .numero b{font-size:1.1rem}
  .comprobante .leyenda{margin-top:.35rem}
  .comprobante .a-quien{margin:.45rem 0 .55rem;padding:.35rem .5rem}
  .comprobante table.detalle td{padding:.28rem .35rem}
  .comprobante .cierre-comprobante{margin-top:.5rem}
  .comprobante .total-comprobante b{font-size:1.15rem}
  .comprobante .firmas{margin-top:1.1rem;gap:1.6rem}
  .linea-corte{margin:.8rem 0 1rem;border-top:1px dashed #999}
  .linea-corte span{background:#fff;color:#8A7C6E}
  body{background:#fff;color:#000;font-size:11pt}
  .pantalla{max-width:none;padding:0}
  .tarjeta,.tabla-marco{border-color:#999;background:#fff;break-inside:avoid}
  .logo{filter:none !important}
  a{color:#000;text-decoration:none}
  .chip{border-color:#666;background:transparent !important;color:#000 !important}
}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}


/* ==========================================================================
   ESCÁNER — la cámara a pantalla completa
   ========================================================================== */
.capa-escaner{
  position:fixed;inset:0;z-index:80;background:#000;
  display:grid;place-items:center;overflow:hidden;
}
.capa-escaner .camara{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.capa-escaner .mira{
  position:relative;z-index:1;
  width:min(70vw,17rem);aspect-ratio:1;
  border:3px solid rgba(255,255,255,.9);border-radius:10px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.45);
  transition:border-color .12s ease,background .12s ease;
}
.capa-escaner .mira.leido{
  border-color:#7BE08A;background:rgba(123,224,138,.28);
}
.capa-escaner .ayuda{
  position:absolute;z-index:1;left:0;right:0;bottom:5.5rem;
  text-align:center;color:#fff;padding:0 1.2rem;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.capa-escaner .ayuda p{
  font-family:"Archivo Narrow","Arial Narrow",sans-serif;
  font-size:1.25rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;margin:0 0 .3rem;
}
.capa-escaner .ayuda span{font-size:.88rem;opacity:.85}
.capa-escaner .cerrar-escaner{
  position:absolute;z-index:2;bottom:1.6rem;left:50%;transform:translateX(-50%);
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.7rem 1.6rem;border-radius:3px;cursor:pointer;
  background:rgba(255,255,255,.94);color:#16181C;border:0;
}
.capa-escaner .cerrar-escaner:hover{background:#fff}


/* ==========================================================================
   PANEL DEL LECTOR — lo que aparece al pasar algo por el escáner
   ========================================================================== */
.capa-panel{
  position:fixed;inset:0;z-index:70;
  background:rgba(20,16,12,.55);
  display:grid;place-items:center;padding:1rem;
}
.panel-escaneo{
  background:var(--papel-2);
  border:1px solid var(--linea-fuerte);
  border-radius:4px;
  width:min(26rem,100%);
  padding:1.2rem 1.3rem 1.3rem;
  box-shadow:0 24px 60px -22px rgba(0,0,0,.55);
}
.panel-escaneo .cabeza{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:.7rem;
}
.panel-escaneo .cabeza h3{
  font-size:1.3rem;line-height:1.15;margin:0;
}
.panel-escaneo .opciones{display:grid;gap:.5rem}
.panel-escaneo .opciones .btn{width:100%;justify-content:center}

.panel-escaneo .bloque-opcion{
  border:1px solid var(--linea);
  border-radius:3px;
  padding:.8rem .9rem;
  margin-bottom:.7rem;
}
.panel-escaneo .bloque-opcion .rot{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--madera);
  margin-bottom:.35rem;
}