/* Caja de autoservicio. Hereda los tokens de catalogo.css (la raíz lleva las clases
   kiosco catalogo caja): tarjeta, panel, toque, t1..t4, margen. Tres verbos: escanea,
   paga, embolsa. Una acción principal por pantalla; la guía aparece solo con problemas. */

.kiosco.caja .cat-cuerpo { padding-bottom: 0; }

/* ---------- Reposo ---------- */
.caja-reposo { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--escala) * 2vmin); padding: 4vmin; cursor: pointer; }
.caja-reposo .titulo { font-size: calc(var(--escala) * clamp(30px, 7vmin, 96px)); font-weight: 900; letter-spacing: -0.03em; line-height: 1; text-wrap: balance; }
.caja-reposo .sub { font-size: var(--t2); color: var(--texto-2); }
.caja-reposo .pasos { display: flex; gap: calc(var(--escala) * 3vmin); margin-top: calc(var(--escala) * 2vmin); flex-wrap: wrap; justify-content: center; }
.caja-reposo .paso { display: flex; flex-direction: column; align-items: center; gap: .8vmin; width: calc(var(--escala) * clamp(120px, 20vmin, 260px)); }
.caja-reposo .paso .n { width: calc(var(--toque) * 1.1); height: calc(var(--toque) * 1.1); border-radius: 50%; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--t1); font-weight: 900; }
.caja-reposo .paso .t { font-size: var(--t2); font-weight: 800; }
.caja-reposo .toque { margin-top: calc(var(--escala) * 3vmin); font-size: var(--t2); font-weight: 700; color: var(--acento); animation: latido-carro 1.6s ease-in-out infinite; }

/* ---------- Escaneo: carro a la izquierda, último producto y acciones a la derecha ---------- */
.caja-escaneo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: calc(var(--escala) * 2vmin); height: 100%; min-height: 0; padding-top: calc(var(--escala) * 1vmin); }
.caja-carro { display: flex; flex-direction: column; min-height: 0; background: var(--panel); color: var(--panel-texto); border-radius: var(--radio); overflow: hidden; }
.caja-carro .cabeza { display: flex; justify-content: space-between; align-items: baseline; padding: calc(var(--escala) * 1.6vmin) calc(var(--escala) * 2vmin) calc(var(--escala) * .8vmin); font-size: var(--t3); color: var(--panel-texto-2); }
.caja-carro .cabeza strong { font-size: var(--t2); color: var(--panel-texto); }
.caja-carro .lineas { flex: 1; min-height: 0; overflow-y: auto; padding: 0 calc(var(--escala) * 2vmin); }
.caja-carro .vacio { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--panel-texto-3); font-size: var(--t2); text-align: center; padding: 4vmin; }
.caja-linea { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: calc(var(--escala) * 1.4vmin); padding: calc(var(--escala) * 1vmin) 0; border-top: 1px solid var(--panel-linea); animation: aparecer-tarjeta .25s ease; }
.caja-linea:first-child { border-top: 0; }
.caja-linea.nueva { background: color-mix(in srgb, var(--acento) 8%, transparent); margin: 0 calc(-1 * var(--escala) * 2vmin); padding-left: calc(var(--escala) * 2vmin); padding-right: calc(var(--escala) * 2vmin); }
.caja-linea .foto { width: calc(var(--toque) * .9); height: calc(var(--toque) * .9); border-radius: calc(var(--radio) * .4); background: #fff; border: 1px solid rgba(0,0,0,.05); display: flex; align-items: center; justify-content: center; overflow: hidden; font-weight: 900; color: color-mix(in srgb, var(--acento) 35%, transparent); }
.caja-linea .foto img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.caja-linea .nombre { font-size: var(--t3); font-weight: 700; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.caja-linea .detalle { font-size: var(--t4); color: var(--panel-texto-2); }
.caja-linea .detalle .promo { color: #1B7F3B; font-weight: 700; }
.caja-linea .total { font-size: var(--t2); font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
.caja-linea .quitar { width: calc(var(--toque) * .8); height: calc(var(--toque) * .8); border-radius: 50%; background: var(--panel-suave); color: var(--panel-texto-2); font-size: var(--t2); display: flex; align-items: center; justify-content: center; }
.caja-carro .totales { padding: calc(var(--escala) * 1.4vmin) calc(var(--escala) * 2vmin); border-top: 2px solid var(--panel-linea); display: flex; justify-content: space-between; align-items: baseline; }
.caja-carro .totales .rotulo { font-size: var(--t2); font-weight: 700; color: var(--panel-texto-2); }
.caja-carro .totales .monto { font-size: calc(var(--escala) * clamp(28px, 5.5vmin, 72px)); font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--precio); }
.kiosco[data-tema="color"] .caja-carro .totales .monto { color: var(--acento); }
.caja-carro .totales .ahorro { font-size: var(--t4); color: #1B7F3B; font-weight: 700; }

.caja-lado { display: flex; flex-direction: column; gap: calc(var(--escala) * 1.6vmin); min-height: 0; }
.caja-ultimo { flex: 1; min-height: 0; background: var(--tarjeta-suave, var(--tarjeta)); color: var(--tarjeta-texto); border: 2px solid var(--tarjeta-suave-borde, var(--tarjeta-borde)); border-radius: var(--radio); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--escala) * 2vmin); gap: 1vmin; overflow: hidden; }
.caja-ultimo .foto { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.caja-ultimo .foto img { max-width: 100%; max-height: 100%; object-fit: contain; animation: aparecer-tarjeta .3s ease; }
.caja-ultimo .foto .monograma { font-size: calc(var(--escala) * clamp(60px, 18vmin, 220px)); font-weight: 900; color: color-mix(in srgb, var(--acento) 28%, transparent); }
.caja-ultimo .nombre { font-size: var(--t2); font-weight: 800; line-height: 1.1; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.caja-ultimo .precio { font-size: var(--t1); font-weight: 900; color: var(--precio); letter-spacing: -0.02em; }
.kiosco[data-tema="color"] .caja-ultimo .precio { color: var(--acento); }
.caja-ultimo .guia { font-size: var(--t2); color: var(--texto-2); font-weight: 600; }
.caja-ultimo.aviso { border-color: #E0A100; background: #FFF6DD; color: #5C4300; }
.caja-ultimo.aviso .guia { color: #5C4300; }
.caja-ultimo.error { border-color: #CA151A; background: #FBE3E4; color: #7A0F12; }
.caja-ultimo.error .guia { color: #7A0F12; }

.caja-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--escala) * 1.2vmin); }
.caja-acciones button { min-height: calc(var(--toque) * 1.15); border-radius: var(--radio); font-size: var(--t2); font-weight: 800; background: var(--tarjeta); color: var(--tarjeta-texto); border: 2px solid var(--tarjeta-borde); display: flex; align-items: center; justify-content: center; gap: .5em; padding: 0 1.5vmin; }
.caja-acciones .pagar { grid-column: 1 / -1; min-height: calc(var(--toque) * 1.5); background: var(--acento); color: #fff; border-color: transparent; font-size: var(--t1); }
.kiosco[data-tema="oscuro"] .caja-acciones .pagar { background: #FFC531; color: #17150F; }
.caja-acciones .ayuda { border-color: var(--acento); color: var(--acento); }
.kiosco[data-tema="color"] .caja-acciones .ayuda { color: #1E1B16; border-color: #fff; }
.caja-acciones button:disabled { opacity: .4; }

/* ---------- Sin código: categorías y fotos, sin escribir ---------- */
.caja-sincodigo { display: flex; flex-direction: column; gap: 1.2vmin; height: 100%; }
.caja-sincodigo .cat-pestanas { flex-shrink: 0; }
.caja-sincodigo .grilla { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--escala) * clamp(120px, 18vmin, 220px)), 1fr)); gap: calc(var(--escala) * 1.4vmin); align-content: start; padding-bottom: 2vmin; }
.caja-sincodigo .prod { display: flex; flex-direction: column; align-items: center; gap: .6vmin; padding: calc(var(--escala) * 1.2vmin); border-radius: var(--radio); background: var(--tarjeta-suave, var(--tarjeta)); color: var(--tarjeta-texto); border: 2px solid var(--tarjeta-suave-borde, var(--tarjeta-borde)); text-align: center; }
.caja-sincodigo .prod .foto { width: 100%; aspect-ratio: 1; background: #fff; border-radius: calc(var(--radio) * .6); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: var(--t1); font-weight: 900; color: color-mix(in srgb, var(--acento) 30%, transparent); }
.caja-sincodigo .prod .foto img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.caja-sincodigo .prod .nombre { font-size: var(--t4); font-weight: 700; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.caja-sincodigo .prod .precio { font-size: var(--t3); font-weight: 900; color: var(--precio); }
.kiosco[data-tema="color"] .caja-sincodigo .prod .precio { color: var(--acento); }

/* ---------- Pantallas de un solo mensaje: verificación, pago, comprobante, fin ---------- */
.caja-centro { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--escala) * 1.6vmin); padding: 3vmin; }
.caja-centro h1 { font-size: var(--t1); font-weight: 900; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.caja-centro .ayuda { font-size: var(--t2); color: var(--texto-2); max-width: 60ch; margin: 0; }
.caja-centro .espera { width: calc(var(--toque) * 1.4); height: calc(var(--toque) * 1.4); border-radius: 50%; border: 6px solid var(--linea); border-top-color: var(--acento); animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.caja-centro .lista-alertas { display: flex; flex-direction: column; gap: .8vmin; width: min(100%, 700px); }
.caja-centro .lista-alertas div { padding: 1.2vmin 2vmin; border-radius: calc(var(--radio) * .6); background: var(--tarjeta); color: var(--tarjeta-texto); font-size: var(--t3); text-align: left; }
.caja-salidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: calc(var(--escala) * 1.6vmin); width: min(100%, 1000px); }
.caja-salidas button { min-height: calc(var(--toque) * 2.2); border-radius: var(--radio); background: var(--tarjeta); color: var(--tarjeta-texto); border: 2px solid var(--tarjeta-borde); font-size: var(--t2); font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em; padding: 2vmin; }
.caja-salidas button .sub { font-size: var(--t4); font-weight: 600; color: var(--texto-2); }
.caja-salidas button.primaria { background: var(--acento); color: #fff; border-color: transparent; }
.caja-salidas button.primaria .sub { color: rgba(255,255,255,.8); }
.caja-salidas button:disabled { opacity: .4; }
.caja-folio { font-size: calc(var(--escala) * clamp(56px, 16vmin, 220px)); font-weight: 900; letter-spacing: -0.04em; color: var(--precio); line-height: 1; font-variant-numeric: tabular-nums; }
.kiosco[data-tema="color"] .caja-folio { color: #fff; }
.caja-barras { background: #fff; padding: 2vmin 3vmin; border-radius: calc(var(--radio) * .6); display: inline-flex; flex-direction: column; align-items: center; gap: .6vmin; color: #000; font-family: monospace; font-size: var(--t3); }
.caja-barras svg { height: calc(var(--escala) * clamp(40px, 8vmin, 100px)); width: auto; max-width: 80vw; }
.caja-check { width: calc(var(--toque) * 1.6); height: calc(var(--toque) * 1.6); border-radius: 50%; background: #1B7F3B; color: #fff; font-size: var(--t1); font-weight: 900; display: flex; align-items: center; justify-content: center; animation: latido-carro .5s ease; }

/* Panel del encargado en el tótem (tras el PIN) */
.caja-encargado { display: flex; flex-direction: column; gap: 1.2vmin; }
.caja-encargado .fila { display: flex; align-items: center; justify-content: space-between; gap: 1.2vmin; padding: 1vmin 0; border-top: 1px solid var(--panel-linea); font-size: var(--t3); }
.caja-encargado .fila button, .caja-encargado > .botones button { min-height: calc(var(--toque) * .8); padding: 0 2vmin; border-radius: 999px; border: 2px solid var(--panel-linea); color: var(--panel-texto); font-weight: 700; font-size: var(--t4); }
.caja-encargado > .botones { display: flex; flex-wrap: wrap; gap: 1vmin; }
.caja-encargado .peligro { border-color: #CA151A; color: #CA151A; }

/* Vertical o teléfono: apilado */
.kiosco.caja[data-orientacion="vertical"] .caja-escaneo, .kiosco.caja.angosto .caja-escaneo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.kiosco.caja[data-orientacion="vertical"] .caja-ultimo, .kiosco.caja.angosto .caja-ultimo { flex: 0 0 auto; flex-direction: row; text-align: left; }
.kiosco.caja[data-orientacion="vertical"] .caja-ultimo .foto, .kiosco.caja.angosto .caja-ultimo .foto { width: calc(var(--toque) * 2); height: calc(var(--toque) * 2); flex: 0 0 auto; }
@media (orientation: portrait) {
  .kiosco.caja[data-orientacion="auto"] .caja-escaneo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .kiosco.caja[data-orientacion="auto"] .caja-ultimo { flex: 0 0 auto; flex-direction: row; text-align: left; }
  .kiosco.caja[data-orientacion="auto"] .caja-ultimo .foto { width: calc(var(--toque) * 2); height: calc(var(--toque) * 2); flex: 0 0 auto; }
}

/* ---------- Supervisor de cajas ---------- */
.sup-cuerpo { padding: var(--margen); display: flex; flex-direction: column; gap: calc(var(--escala) * 1.6vmin); }
.sup-alertas { display: flex; flex-direction: column; gap: .8vmin; }
.sup-alerta { display: flex; align-items: center; gap: 1.6vmin; padding: 1.2vmin 2vmin; border-radius: calc(var(--radio) * .6); background: #FFF6DD; color: #5C4300; border: 2px solid #E0A100; font-size: var(--t3); }
.sup-alerta.bloquea { background: #FBE3E4; color: #7A0F12; border-color: #CA151A; }
.sup-alerta .caja { font-weight: 800; white-space: nowrap; }
.sup-alerta .texto { flex: 1; }
.sup-alerta .hace { font-size: var(--t4); opacity: .8; white-space: nowrap; }
.sup-alerta button { min-height: calc(var(--toque) * .8); padding: 0 2vmin; border-radius: 999px; font-weight: 800; font-size: var(--t4); background: #1B7F3B; color: #fff; }
.sup-alerta button.no { background: transparent; color: inherit; border: 2px solid currentColor; }
.sup-cajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--escala) * clamp(220px, 30vmin, 360px)), 1fr)); gap: calc(var(--escala) * 1.6vmin); }
.sup-caja { border-radius: var(--radio); background: var(--panel); color: var(--panel-texto); border: 3px solid var(--panel-linea); padding: calc(var(--escala) * 1.6vmin); display: flex; flex-direction: column; gap: .8vmin; }
.sup-caja.atencion { border-color: #CA151A; }
.sup-caja.activa { border-color: var(--acento); }
.sup-caja.fuera { opacity: .5; }
.sup-caja .nombre { font-size: var(--t2); font-weight: 800; display: flex; justify-content: space-between; align-items: center; }
.sup-caja .estado { font-size: var(--t4); font-weight: 700; padding: .3em .8em; border-radius: 999px; background: var(--panel-suave); color: var(--panel-texto-2); }
.sup-caja .estado.libre { background: #E2F5E9; color: #1B7F3B; }
.sup-caja .estado.escaneando { background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); }
.sup-caja .estado.esperando, .sup-caja .estado.bloqueada { background: #FBE3E4; color: #B3261E; }
.sup-caja .datos { display: flex; justify-content: space-between; font-size: var(--t3); color: var(--panel-texto-2); }
.sup-caja .total { font-size: var(--t1); font-weight: 900; letter-spacing: -0.02em; }
.sup-caja .ultimo { font-size: var(--t4); color: var(--panel-texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-caja .lineas { font-size: var(--t4); color: var(--panel-texto-2); max-height: 20vmin; overflow-y: auto; border-top: 1px solid var(--panel-linea); padding-top: .6vmin; }
.sup-caja .lineas div { display: flex; justify-content: space-between; gap: 1vmin; }
.sup-caja .botones { display: flex; flex-wrap: wrap; gap: .8vmin; margin-top: .4vmin; }
.sup-caja .botones button { min-height: calc(var(--toque) * .75); padding: 0 1.6vmin; border-radius: 999px; border: 2px solid var(--panel-linea); color: var(--panel-texto); font-weight: 700; font-size: var(--t4); }
.sup-caja .botones .peligro { border-color: #CA151A; color: #CA151A; }
.sup-vacio { color: var(--texto-2); font-size: var(--t2); text-align: center; padding: 8vmin 4vmin; }

/* Inicio de la compra: guía animada del lector, los tres pasos y las ofertas del día. */
.caja-carro .vacio { flex-direction: column; gap: .6vmin; }
.caja-carro .vacio .icono { color: var(--panel-texto-3); opacity: .7; }
.caja-carro .vacio .t { font-size: var(--t2); font-weight: 800; color: var(--panel-texto-2); }
.caja-carro .vacio .s { font-size: var(--t3); color: var(--panel-texto-3); max-width: 34ch; }
.caja-ultimo.inicio { justify-content: flex-start; gap: calc(var(--escala) * 1.6vmin); padding-top: calc(var(--escala) * 3vmin); }
.caja-ultimo .lector { position: relative; color: var(--texto); opacity: .85; line-height: 0; }
.kiosco[data-tema="color"] .caja-ultimo .lector { color: #1E1B16; }
.caja-ultimo .lector svg { width: calc(var(--escala) * clamp(160px, 26vmin, 320px)); height: auto; }
.caja-ultimo .lector .haz { position: absolute; left: -4%; right: -4%; top: 45%; height: 3px; background: #E30613; box-shadow: 0 0 10px 2px rgba(227, 6, 19, .7); animation: barrer 1.8s ease-in-out infinite; }
@keyframes barrer { 0%, 100% { top: 12%; } 50% { top: 84%; } }
.caja-ultimo.inicio .nombre { font-size: var(--t2); font-weight: 800; }
.caja-ultimo .pasos-mini { display: flex; gap: calc(var(--escala) * 2.4vmin); font-size: var(--t3); color: var(--texto-2); font-weight: 600; }
.caja-ultimo .pasos-mini b { display: inline-flex; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--acento); color: #fff; align-items: center; justify-content: center; margin-right: .4em; font-weight: 900; }
.caja-ultimo .ofertas { width: 100%; margin-top: auto; text-align: left; }
.caja-ultimo .ofertas .titulo-ofertas { font-size: var(--t3); font-weight: 800; color: var(--texto-2); margin-bottom: .6vmin; }
.caja-ultimo .ofertas .cat-promos { grid-auto-columns: minmax(min(40vw, 230px), 1fr); padding: 0 0 .4vmin; }
.caja-ultimo .ofertas .promo { min-height: calc(var(--escala) * clamp(90px, 15vmin, 170px)); background: #fff; }
.kiosco.catalogo .caja-ultimo .ofertas .promo .precio { font-size: var(--t2); }
@media (prefers-reduced-motion: reduce) { .caja-ultimo .lector .haz { animation: none; } }