/* Estilos tomados del prototipo validado (06-Prototipo). Mismas clases, mismos tokens. */

/* Layout: una columna ancha, una tarea por pantalla, buscador siempre arriba, acción principal grande al final.
   Un solo tema claro, elegido a propósito: mostrador con mucha luz y usuarios con poca vista (contraste 7:1 o más). */
:root{
  --fondo:#f3f5ef;      /* papel con un toque verde */
  --hoja:#ffffff;
  --tinta:#10201a;      /* texto principal */
  --tinta2:#2f4038;     /* texto secundario, sigue siendo oscuro */
  --borde:#4f6058;
  --accion:#0a5a48;     /* botón principal */
  --accion-tinta:#ffffff;
  --peligro:#8f1717;
  --alerta:#a31212;      /* avisos que no se pueden pasar de largo */
  --aviso-fondo:#ffefb8;
  --ok-fondo:#d8f0e3;
  --practica:#10201a;
  --letra:"Atkinson Hyperlegible",Verdana,"Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
[hidden]{display:none!important}
html{font-size:18px;height:100%}
html[data-letra="grande"]{font-size:21px}
html[data-letra="muy"]{font-size:24px}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--letra);font-size:1rem;line-height:1.5}
.marco{max-width:80rem;margin:0 auto;padding-inline:16px;padding-block:0 3rem;display:flex;flex-direction:column;gap:1rem}
h1{font-size:1.7rem;line-height:1.2;margin:0;text-wrap:balance}
h2{font-size:1.25rem;line-height:1.25;margin:0;text-wrap:balance}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.pila{display:flex;flex-direction:column;gap:1rem;min-width:0}
textarea{font:inherit;color:inherit;min-height:7rem;padding:.4rem .7rem;border:2px solid var(--borde);border-radius:6px;background:var(--hoja);width:100%}
textarea:focus-visible{outline:4px solid #1d4ed8;outline-offset:2px}
.dos{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
@media(min-width:44rem){.dos{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.marca.rev{background:var(--alerta);color:#fff}
.tablero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1rem;align-items:start}
.cifra{font-size:2rem;font-weight:700;line-height:1.1}
.def{color:var(--tinta2);border-top:2px solid var(--borde);padding-top:.5rem}
.previa li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;border-top:2px solid var(--borde);padding-top:.4rem}
.previa li:first-child{border-top:0;padding-top:0}
input:disabled{background:var(--fondo);color:var(--tinta2)}
.cabecera{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}
.rapidos{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem}
.rapidos button{flex-direction:column;align-items:flex-start;text-align:left;gap:.15rem}
.rapidos button span{font-weight:400}
.tecla{font-weight:400;font-size:max(.85em,18px);border:2px solid currentColor;border-radius:4px;padding:0 .35rem;margin-left:.5rem}

.practica{background:var(--practica);color:#fff;text-align:center;font-weight:700;padding:.3rem 16px;font-size:18px}
.barra{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;padding-block:.4rem 0;font-size:18px}
.barra button,.barra .boton,.barra select{padding:.3rem .8rem}
.barra .comercio{font-weight:700;font-size:20px}
.barra .grupo{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.menu{display:flex;flex-wrap:wrap;gap:.5rem}
body.cobrando .menu{display:none}
/* El menú crece con la letra hasta un tope y cada botón ocupa lo que necesita su texto: así entra en un renglón también en pantallas de 1024. */
.menu button{flex:1 1 auto;font-size:min(1.1rem,22px);font-weight:700;min-height:48px;padding:.3rem .75rem}
@media(min-width:60rem){.barra{flex-wrap:nowrap}.barra .comercio{flex:1 1 0;min-width:0;line-height:1.2}.barra .grupo{flex:none;flex-wrap:nowrap}}
.menu button[aria-current="page"]{background:var(--tinta);color:#fff;border-color:var(--tinta)}

button,.boton,select,input{font:inherit;color:inherit}
button,.boton{min-height:48px;min-width:48px;padding:.5rem 1rem;border:2px solid var(--borde);border-radius:6px;background:var(--hoja);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-weight:700}
button.principal,.boton.principal{background:var(--accion);color:var(--accion-tinta);border-color:var(--accion);font-size:1.3rem;min-height:3.6rem;padding-inline:1.6rem}
button.peligro{background:var(--peligro);color:#fff;border-color:var(--peligro)}
button.secundario,.boton.llamativo{border:3px solid var(--accion);color:var(--accion);font-size:1.15rem;min-height:3rem}
/* Las ventas en espera son plata sin cobrar: el botón que las muestra tiene que verse de lejos. */
button.espera,.boton.espera{background:var(--aviso-fondo);border:3px solid var(--tinta);font-size:1.15rem;min-height:3rem}
.cierre-venta .secundario,.cierre-venta .espera{flex:1 1 auto;font-size:min(1.15rem,22px);padding-inline:.5rem}
.rl-trae{color:var(--tinta2);line-height:1.3}
button.chico{font-weight:400}
button[aria-pressed="true"],.boton[aria-pressed="true"]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
button:focus-visible,.boton:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:4px solid #1d4ed8;outline-offset:2px}
input,select{min-height:48px;padding:.4rem .7rem;border:2px solid var(--borde);border-radius:6px;background:var(--hoja);width:100%}
input.buscador{font-size:1.35rem;min-height:3.4rem;border-width:3px;border-color:var(--tinta)}
input.plata{font-size:1.3rem;max-width:14rem}
label{font-weight:700;display:block}
.campo{display:flex;flex-direction:column;gap:.25rem}
.campos{display:flex;flex-direction:column;gap:1rem;max-width:32rem}
.acciones{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.busqueda{display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:60rem){.busqueda.con-filtro{grid-template-columns:2fr 1fr}.busqueda.sola{grid-template-columns:1fr}}

.hoja{background:var(--hoja);border:2px solid var(--borde);border-radius:6px;padding:1rem;display:flex;flex-direction:column;gap:.75rem}
.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.art{background:var(--hoja);border:2px solid var(--borde);border-radius:6px;padding:.75rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start}
.art .foto{width:4.2rem;height:4.2rem;border:2px dashed var(--borde);border-radius:4px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:1rem;line-height:1.15;color:var(--tinta2);padding:.2rem;overflow:hidden}
.art .foto img{width:100%;height:100%;object-fit:cover}
.art .foto.con{width:10rem;height:10rem;border-style:solid;padding:0}
.foto-grande{display:block;width:100%;max-width:30rem;border:2px solid var(--borde);border-radius:6px}
@media(max-width:30rem){.art .foto.con{width:7rem;height:7rem}}
.art .cuerpo{min-width:0;display:flex;flex-direction:column;gap:.35rem}
.art .nombre{font-weight:700;font-size:1.1rem;line-height:1.25;overflow-wrap:anywhere}
.art .datos{display:flex;flex-wrap:wrap;gap:.25rem 1.2rem;color:var(--tinta2)}
.art .precio{font-size:1.35rem;font-weight:700;color:var(--tinta)}
.marca{display:inline-block;padding:.05rem .5rem;border:2px solid var(--tinta);border-radius:4px;font-weight:700;background:var(--hoja)}
.marca.no{background:var(--tinta);color:#fff}
.marca.poco{background:var(--aviso-fondo)}

.renglon{display:flex;flex-direction:column;gap:.3rem;padding:.5rem 0;border-top:2px solid var(--borde)}
.renglon:first-child{border-top:0}
.rl1{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 .75rem;line-height:1.3}
.rl2{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem}
.rl-precio{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.rl-precio input{max-width:9rem}
.renglon .cant{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}
.renglon .cant input{width:3.4rem;text-align:center;font-size:1.15rem;font-weight:700;padding-inline:.2rem}
.renglon .cant button{font-size:1.1rem;min-width:2.75rem;padding-inline:.4rem}
.renglon .sub{font-weight:700;font-size:1.25rem}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* El total y Cobrar quedan siempre a la vista aunque la venta tenga muchos renglones. */
.cierre-venta{position:sticky;bottom:0;background:var(--hoja);display:flex;flex-direction:column;gap:.75rem;padding-bottom:.25rem}
.mostrador{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.cobro{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}
.cobro-total{gap:.6rem}
.cobro-total .total{border-top:0;padding-top:0;gap:0 1rem}
.cobro-total .monto{margin-left:auto}
@media(min-width:45rem){.cobro{grid-template-columns:minmax(0,3fr) minmax(min(21rem,46%),2fr)}
  .cobro-total{position:sticky;top:calc(env(safe-area-inset-top,0px) + .5rem)}}
/* Dos columnas desde 720 px de ancho: una ventana sin maximizar o un monitor chico también tienen la venta al costado. */
@media(min-width:45rem){.mostrador.con-venta{grid-template-columns:minmax(0,3fr) minmax(min(21rem,46%),2fr);align-items:start}
  .mostrador .venta{position:sticky;top:calc(env(safe-area-inset-top,0px) + .5rem);max-height:calc(100vh - 1rem);overflow:auto;padding:6px}}
/* En pantallas de PC la pantalla de mostrador no se desplaza entera: el buscador y el total con «Cobrar» quedan siempre
   a la vista, y se desplazan por dentro la lista de resultados y los renglones de la venta. */
@media(min-width:45rem) and (min-height:26rem){
  body.fijo{height:100%;overflow:hidden;display:flex;flex-direction:column}
  body.fijo>.marco{flex:1;min-height:0;width:100%;gap:.6rem;padding-block:0 .5rem}
  body.fijo #pantalla{flex:1;min-height:0;gap:.6rem}
  body.fijo .mostrador.con-venta{flex:1;min-height:0;align-items:stretch;grid-template-rows:minmax(0,1fr)}
  body.fijo .mostrador>*{min-height:0}
  body.fijo .mostrador>.pila:first-child{overflow:auto;padding:4px}
  body.fijo .busqueda.con-filtro{position:sticky;top:-4px;z-index:1;background:var(--fondo);padding-block:.25rem;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  body.fijo .busqueda.sola{grid-template-columns:minmax(0,1fr)}
  body.fijo .cierre-venta{gap:.5rem}
  body.fijo .cierre-venta .monto{font-size:2rem;margin-left:auto}
  body.fijo .cierre-venta .principal{min-height:3rem}
  body.fijo .total{padding-top:.4rem;align-items:center;gap:.5rem .75rem}
  body.fijo .mostrador .venta{position:static;max-height:none;overflow:auto;padding:0;gap:.6rem}
  /* El título de la pantalla y el del panel se dejan solo para lectores de pantalla: el menú ya dice dónde está la persona. */
  body.fijo .cabecera h1,body.fijo .esta-venta>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body.fijo .cabecera{justify-content:flex-start}
  body.fijo .esta-venta{flex:1 1 auto;min-height:0;padding:.75rem}
  body.fijo .renglones{flex:1 1 0;min-height:4.5rem;overflow:auto}
  body.fijo .cierre-venta{position:static}
  body.fijo .venta-extra{flex:0 1 auto;max-height:30%;overflow:auto}
  body.fijo .pie{display:none}
}
@media(min-width:45rem) and (max-height:44rem){
  body.fijo .venta-extra{display:none} /* en pantallas bajas el lugar es para la venta */
}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;font-size:1.3rem;font-weight:700;border-top:4px solid var(--tinta);padding-top:.75rem}
.total .monto{font-size:2.4rem;line-height:1.1}
.pares{display:grid;grid-template-columns:1fr auto;gap:.35rem 1.5rem;margin:0}
.pares dt{color:var(--tinta2)}
.pares dd{margin:0;text-align:right;font-weight:700}
/* La cuenta del combo se lee de lejos: es lo que la dueña mira para decidir el precio. */
.pares.grande dt,.pares.grande dd{font-size:1.35rem;color:var(--tinta);font-weight:700}
.pares.grande .fuerte{font-size:1.7rem}
.pares .fuerte{font-size:1.35rem;color:var(--tinta);border-top:2px solid var(--borde);padding-top:.4rem}
.aviso{background:var(--alerta);color:#fff;border:3px solid var(--tinta);border-radius:6px;padding:.75rem 1rem;font-weight:700;font-size:1.1rem}
.bien{background:var(--ok-fondo);border:2px solid var(--tinta);border-radius:6px;padding:.75rem 1rem;font-weight:700}
.ayuda summary{cursor:pointer;font-weight:700;min-height:48px;display:flex;align-items:center;text-decoration:underline}
.ayuda ol{margin:.25rem 0 0;padding-left:1.4rem}
.medios{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.5rem}
.tilde{display:flex;gap:.6rem;align-items:center;min-height:48px;font-weight:700;cursor:pointer}
.tilde input{width:1.6rem;height:1.6rem;min-height:0;flex:none}
.comprobante{font-family:"Courier New",monospace;border-style:dashed;max-width:30rem}
.comprobante .linea{display:flex;justify-content:space-between;gap:1rem}
.comprobante .linea span:first-child{min-width:0;overflow-wrap:anywhere}
.pie{color:var(--tinta2);border-top:2px solid var(--borde);padding-top:1rem;display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}

/* El aviso va abajo a la izquierda para no tapar el total ni «Cobrar», que están a la derecha. */
#cartel{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:min(36rem,calc(100% - 32px));padding:.75rem 1rem;border:3px solid #fff;border-radius:6px;background:var(--tinta);color:#fff;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;font-weight:700}
#cartel button{color:var(--tinta)}
dialog{border:3px solid var(--tinta);border-radius:6px;padding:1.25rem;max-width:min(34rem,calc(100% - 32px));color:var(--tinta);background:var(--hoja);font-size:1rem}
dialog::backdrop{background:rgba(16,32,26,.7)}
dialog .cuerpo{display:flex;flex-direction:column;gap:1rem}

/* ---------- Propio del sistema real ---------- */
.mensajes{display:flex;flex-direction:column;gap:.5rem}
.form-linea{display:flex;flex-wrap:wrap;gap:.75rem;align-items:end}
.errorlist{list-style:none;margin:0;padding:0;color:var(--alerta);font-weight:700}
/* Ticket para impresora térmica de 80 mm (decisión del 14/10: solo térmica). */
@media print{
  @page{size:80mm auto;margin:3mm}
  body{background:#fff;font-size:12px}
  .barra,.menu,.practica,.no-imprimir,#cartel{display:none!important}
  .marco{padding:0;max-width:none}
  .comprobante{border:0;max-width:none;padding:0;font-size:12px}
}
/* En el sistema real el menú son enlaces (el prototipo usaba botones). */
.menu a.boton{flex:1 1 auto;font-size:min(1.1rem,22px);min-height:48px;padding:.3rem .75rem;color:var(--tinta)}
.menu a[aria-current="page"]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
a.boton{color:var(--tinta)}
a.boton.principal{color:var(--accion-tinta)}
a.boton.secundario{border:3px solid var(--accion);color:var(--accion);font-size:1.15rem;min-height:3rem}
form.en-linea{display:inline}
.cobro-opciones form{display:contents}

/* El aviso de la suscripción ocupa un solo renglón en la pantalla de venta. */
.fijo .aviso-pago{padding:.2rem .75rem;margin:0}
/* En la pantalla de venta el título repite lo que dice el menú: queda para los lectores de pantalla y deja lugar a los resultados. */
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* El menú entra en un renglón también en 1024 de ancho con letra «Muy grande» (tercera prueba, 13/10): espacios fijos, no crecen con la letra. */
.menu{gap:8px}
.menu a.boton{padding-inline:12px}
.mostrador .cabecera .acciones{gap:8px}
.mostrador .cabecera .boton{font-size:min(1.1rem,22px);padding-inline:12px}
/* Ventanas angostas (desde 720 px): la franja de arriba en un solo renglón, sin el nombre del comercio ni de quién usa. */
@media(max-width:60rem){.barra .comercio,.barra .quien{display:none}.barra{justify-content:flex-start}}
/* La franja de arriba no crece con el tamaño de letra (segunda prueba, 13/10): todo en píxeles fijos. */
.barra button,.barra .boton{padding:4px 12px;font-size:18px}
.barra .grupo{gap:8px}
/* En ventanas angostas el aviso de la suscripción no va en la pantalla de venta (se ve en las demás y llega por WhatsApp). */
@media(max-width:60rem){.fijo .mensajes:has(.aviso-pago){display:none}}
/* El cartel de práctica: grande y a la vista, pero en un solo renglón para no tapar la venta. */
.practica{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;font-size:20px}
.practica button{font-size:18px;padding:4px 12px;min-height:40px;background:#fff;color:var(--tinta)}
/* Ventanas angostas: «Total» y el importe en el mismo renglón, para que «Cobrar» quede a la vista. */
@media(max-width:60rem){body.fijo .cierre-venta .monto{font-size:1.6rem}.practica{padding-block:2px}}
@media(max-width:60rem){.practica button[value="de_nuevo"]{display:none}}
/* QR de Mercado Pago: grande y centrado, sobre fondo blanco para que el celular lo lea bien. */
.qr-imagen{background:#fff;align-self:center;padding:8px;border:2px solid var(--borde);border-radius:8px;width:min(100%,420px,calc(100vh - 300px));min-width:220px}
.qr-imagen svg{width:100%;height:auto;display:block}