/* Camino A · La comanda (elegido por Daniel el 8-nov). La lista es el recibo: papel, tinta y resaltador. */
:root {
  color-scheme: light;
  --mesa: #2A211C; --mesa-2: #3B2F28; --papel: #FBF6E8; --papel-2: #F2EAD6; --campo-fondo: #FFFDF6;
  --tinta: #1C1815; --tinta-2: #5C5347; --linea: #CDC2AA;
  --resaltador: #FFD84A; --sello: #B3261E; --sello-claro: #FFA596; --sobre-mesa: #DCD0BB;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --toque: 44px; --campo: 16px;
  --letra: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
  --titulos: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--letra); font-size: 15px; line-height: 1.35; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }
h1, h2, p { margin: 0; }
input, select { font: inherit; font-size: var(--campo); color: var(--tinta); border-radius: 0; }
:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.oculto { display: none !important; }
.solo-ancho { display: none; }
.pie-claro { font-size: 14px; color: var(--sobre-mesa); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.pantalla { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Cabecera y barra: la mesa, oscura */
.cab { background: var(--mesa); color: var(--papel); padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) 12px calc(16px + var(--safe-l)); display: flex; flex-direction: column; gap: 8px; }
.cab h1 { font-family: var(--titulos); font-weight: 800; font-size: 27px; line-height: 1.05; letter-spacing: -.015em; overflow-wrap: anywhere; }
.cab-sub { color: var(--sobre-mesa); font-size: 14px; }
.cab-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sellos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.sello { width: 30px; height: 30px; border: 1.5px solid var(--sobre-mesa); color: var(--papel); display: grid; place-items: center; font-size: 13px; font-weight: 500; }
.sello.yo { background: var(--resaltador); border-color: var(--resaltador); color: var(--tinta); }
.dientes { height: 7px; flex: none; background: linear-gradient(135deg, var(--mesa) 50%, transparent 50%) 0 0/14px 7px repeat-x, linear-gradient(225deg, var(--mesa) 50%, transparent 50%) 0 0/14px 7px repeat-x; }

.menu { display: flex; gap: 2px; margin: 2px -8px -4px; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu button { min-height: var(--toque); padding: 0 8px; font-size: 14px; color: var(--sobre-mesa); white-space: nowrap; flex: none; }
.menu button.on { color: var(--resaltador); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* Pestañas de recibos: solo aparecen con más de uno */
.pestanas { display: flex; overflow-x: auto; scrollbar-width: none; margin: 10px 16px 0; border: 1.5px solid var(--tinta); }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button { flex: 1 0 auto; min-height: var(--toque); padding: 0 14px; font-size: 14px; font-weight: 500; text-align: center; white-space: nowrap; border-right: 1.5px solid var(--tinta); }
.pestanas button:last-child { border-right: 0; }
.pestanas button.on { background: var(--resaltador); }

/* Filtro */
.filtro { display: flex; margin: 12px 16px 4px; border: 1.5px solid var(--tinta); }
.filtro button { flex: 1; min-height: var(--toque); text-align: center; font-weight: 500; font-size: 14px; border-right: 1.5px solid var(--tinta); }
.filtro button:last-child { border-right: 0; }
.filtro button.on { background: var(--tinta); color: var(--papel); }

/* Filas de productos */
.fila { padding: 12px 16px 10px; border-bottom: 1.5px dashed var(--linea); display: flex; flex-direction: column; gap: 4px; }
.fila-toca { display: flex; gap: 12px; width: 100%; align-items: flex-start; min-height: var(--toque); }
.fila-toca:disabled { cursor: default; }
.caja { width: 26px; height: 26px; border: 2px solid var(--tinta); display: grid; place-items: center; flex: none; margin-top: -1px; }
.fila.mia .caja { background: var(--tinta); color: var(--resaltador); }
.fila.sin .caja { border-color: var(--sello); border-style: dashed; }
.cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.linea { display: flex; align-items: baseline; gap: 6px; }
.nom { font-weight: 500; font-size: 16px; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.puntos { flex: 1; min-width: 14px; border-bottom: 2px dotted var(--linea); transform: translateY(-3px); }
.val { font-weight: 500; font-size: 16px; white-space: nowrap; }
mark { background: linear-gradient(to bottom, transparent 8%, var(--resaltador) 8%, var(--resaltador) 92%, transparent 92%); color: inherit; padding: 0 3px; margin: 0 -3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.quien { font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }
.quien b { font-weight: 500; color: var(--tinta); }
.rojo { color: var(--sello); font-weight: 500; }
.fila-acc { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-left: 38px; }
.fila-acc .dividir { margin-right: auto; }
/* En un producto de una unidad, «Dividir» va al lado de quién lo marcó para que la lista no crezca. */
.fila.una { position: relative; }
.fila.una .quien { padding-right: 72px; }
.fila.una .fila-acc { position: absolute; right: 16px; bottom: 2px; padding-left: 0; }
.dividir { min-height: var(--toque); padding: 0 2px; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 6px; }
.cont { display: inline-flex; align-items: center; border: 1.5px solid var(--tinta); flex: none; }
.cont button { width: var(--toque); height: var(--toque); display: grid; place-items: center; }
.cont button:disabled { color: var(--linea); }
.cont span { width: 34px; text-align: center; font-family: var(--titulos); font-weight: 800; font-size: 19px; border-left: 1.5px solid var(--tinta); border-right: 1.5px solid var(--tinta); line-height: 44px; }
.cont.lleno span { background: var(--resaltador); }
.resto { padding: 11px 16px; display: flex; flex-direction: column; gap: 3px; border-bottom: 1.5px dashed var(--linea); }
.resto.ultimo { border-bottom: 0; }
.pie { font-size: 14px; color: var(--tinta-2); }
.total-fila .nom, .total-fila .val { font-family: var(--titulos); font-weight: 800; font-size: 19px; }

/* Barra fija */
.barra { position: sticky; bottom: 0; z-index: 5; margin-top: auto; background: var(--mesa); color: var(--papel); padding: 10px calc(16px + var(--safe-r)) calc(10px + var(--safe-b)) calc(16px + var(--safe-l)); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.barra-lbl { font-size: 14px; color: var(--sobre-mesa); }
.barra-val { font-family: var(--titulos); font-weight: 800; font-size: 32px; line-height: 1.05; letter-spacing: -.01em; }
.barra-sub { font-size: 13px; color: var(--sobre-mesa); }
.ir { color: var(--papel); border: 1.5px solid var(--sobre-mesa); min-height: var(--toque); padding: 8px 8px 8px 12px; display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; line-height: 1.2; max-width: 160px; }
.ir.alerta { color: var(--sello-claro); border-color: var(--sello-claro); }

/* Secciones */
.sec { padding: 16px 16px 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 500; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.sec.rojo { color: var(--sello); }
.nombres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ficha { min-height: var(--toque); padding: 0 12px; border: 1.5px solid var(--tinta); font-size: 15px; display: inline-flex; align-items: center; max-width: 100%; overflow-wrap: anywhere; }
.ficha.on { background: var(--resaltador); font-weight: 500; }
.ficha.tinta { background: var(--tinta); color: var(--papel); }
.sec-dato { letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--tinta-2); }
.conteo { margin: 8px 16px 2px; font-size: 14px; color: var(--tinta-2); }
.guarda { margin: 12px 16px 0; padding: 12px; background: var(--papel-2); display: flex; flex-direction: column; gap: 8px; }
.acciones-aviso { display: flex; gap: 8px; margin: 8px 16px 0; }
.acciones-aviso .boton { flex: 1; }
.fila-sin { padding: 12px 16px; border-bottom: 1.5px dashed var(--linea); }
.vacio { padding: 26px 16px; color: var(--tinta-2); font-size: 15px; }
.mas { min-height: var(--toque); margin: 4px 16px; font-weight: 500; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.aviso { margin: 8px 16px 0; padding: 10px 12px; border: 1.5px dashed var(--sello); color: var(--sello); font-weight: 500; font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
.aviso.bien { border-color: var(--tinta-2); color: var(--tinta); }
.aviso .i { margin-top: 1px; }

/* Quién pagó */
.pago { padding: 10px 16px; border-bottom: 1.5px dashed var(--linea); display: flex; flex-direction: column; gap: 6px; }
.pago-nom { font-weight: 500; font-size: 16px; overflow-wrap: anywhere; }
.pago-campos { display: flex; gap: 8px; align-items: flex-end; }
.pago-campos label { flex: 1; min-width: 0; font-size: 13px; color: var(--tinta-2); display: flex; flex-direction: column; gap: 3px; }
.campo { width: 100%; min-width: 0; height: var(--toque); border: 1.5px solid var(--tinta); background: var(--campo-fondo); padding: 0 10px; font-weight: 500; }
.campo.num { text-align: right; }
.campo.falta { border-color: var(--sello); border-width: 2px; background: #FFF1DC; }
.campo:disabled { background: var(--papel-2); color: var(--tinta-2); }
input[type="date"].campo { -webkit-appearance: none; appearance: none; min-height: var(--toque); }

/* Cierre */
.cierre { margin-top: 14px; background: var(--mesa); color: var(--papel); padding: 12px calc(16px + var(--safe-r)) calc(14px + var(--safe-b)) calc(16px + var(--safe-l)); display: flex; flex-direction: column; gap: 8px; }
.cerrar { min-height: 52px; background: var(--resaltador); color: var(--tinta); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; font-size: 16px; }
.cerrar.bloqueado { background: var(--mesa-2); color: var(--sobre-mesa); border: 1.5px dashed var(--sobre-mesa); }
.cierre ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--sobre-mesa); }

/* Cruces */
.colillas { display: flex; flex-direction: column; border-top: 1.5px dashed var(--tinta-2); border-bottom: 1.5px dashed var(--tinta-2); margin: 0 0 4px; }
.colilla { margin: 0 16px; background: var(--papel-2); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-left: 1.5px dashed var(--tinta-2); border-right: 1.5px dashed var(--tinta-2); }
.colilla + .colilla { border-top: 1.5px dashed var(--tinta-2); }
.colilla .de { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 16px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.colilla .cu { font-family: var(--titulos); font-weight: 800; font-size: 25px; white-space: nowrap; }
.colilla.tuya { background: var(--resaltador); }
.pers { border-bottom: 1.5px dashed var(--linea); }
.pers summary { list-style: none; padding: 11px 16px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.pers summary::-webkit-details-marker { display: none; }
.pers[open] { background: var(--papel-2); }
.pers .saldo { font-weight: 500; }
.renglones { display: flex; flex-direction: column; gap: 3px; padding: 0 16px 12px; font-size: 14px; }
.renglones .linea .nom, .renglones .linea .val { font-size: 14px; font-weight: 400; }
.renglones .linea.fuerte .nom, .renglones .linea.fuerte .val { font-weight: 500; }
.boton { min-height: var(--toque); border: 1.5px solid var(--tinta); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; font-size: 15px; padding: 0 14px; text-align: center; }
.boton.principal { background: var(--tinta); color: var(--papel); min-height: 52px; font-size: 16px; }
.boton.amarillo { background: var(--resaltador); min-height: 52px; font-size: 16px; }
.boton:disabled { opacity: .55; }
.acciones { margin: 12px 16px calc(16px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; }

/* Inicio y formularios sueltos */
.portada { background: var(--mesa); color: var(--papel); padding: calc(40px + var(--safe-t)) 20px 28px; display: flex; flex-direction: column; gap: 10px; }
.portada h1 { font-family: var(--titulos); font-weight: 800; font-size: 38px; line-height: 1.02; letter-spacing: -.02em; }
.portada p { color: var(--sobre-mesa); font-size: 15px; }
.formu { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.formu label { display: flex; flex-direction: column; gap: 5px; font-weight: 500; }

/* Foto */
.foto-opciones { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.boton-archivo { position: relative; overflow: hidden; cursor: pointer; }
.boton-archivo input { position: absolute; inset: 0; opacity: 0; font-size: 100px; cursor: pointer; }
.boton-archivo:focus-within { outline: 3px solid #1a5fb4; outline-offset: 2px; }
.leyendo { padding: 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.leyendo img { max-width: 100%; max-height: 52vh; border: 1.5px solid var(--tinta); }
.leyendo .titulo { font-weight: 500; font-size: 17px; }
.punto-vivo { display: inline-block; width: 10px; height: 10px; background: var(--resaltador); border: 1.5px solid var(--tinta); margin-right: 8px; animation: latido 1s ease-in-out infinite alternate; }
@keyframes latido { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .punto-vivo { animation: none; } }
.foto-recibo { padding: 8px 16px; }
.foto-recibo img { display: block; max-width: 100%; border: 1.5px solid var(--tinta); }

/* Corregir lo leído */
.edita { padding: 12px 16px; border-bottom: 1.5px dashed var(--linea); display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 6px 8px; }
.edita.dudosa { background: #FFF6E3; }
.edita .ancho { grid-column: 1 / -1; }
.edita .leido { grid-column: 1 / -1; font-size: 13px; color: var(--tinta-2); overflow-wrap: anywhere; }
.edita-fila2 { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.edita-fila2 .campo-val { width: 124px; flex: none; }
.chips { display: flex; flex: 1; min-width: 0; border: 1.5px solid var(--tinta); }
.chips button { flex: 1; min-width: 0; min-height: 41px; text-align: center; font-size: 13px; font-weight: 500; border-right: 1.5px solid var(--tinta); }
.chips button:last-child { border-right: 0; }
.chips button.on { background: var(--tinta); color: var(--papel); }
.icono-btn { width: var(--toque); height: var(--toque); display: grid; place-items: center; flex: none; }
.casilla { display: inline-flex; align-items: center; gap: 8px; min-height: var(--toque); font-size: 14px; cursor: pointer; flex: 1; min-width: 0; }
.casilla input { width: 22px; height: 22px; accent-color: var(--tinta); flex: none; margin: 0; }
.total-recibo { padding: 8px 16px; display: flex; align-items: center; gap: 10px; justify-content: space-between; font-weight: 500; }
.total-recibo .campo { width: 150px; flex: none; }

/* Compartir */
.qr { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 16px 6px; }
.qr img { width: min(78vw, 320px); height: auto; aspect-ratio: 1; background: #fff; border: 1.5px solid var(--tinta); padding: 6px; }
.enlace { font-size: 13px; color: var(--tinta-2); overflow-wrap: anywhere; text-align: center; }
.fila-persona { display: flex; align-items: center; gap: 10px; padding: 4px 16px; min-height: var(--toque); border-bottom: 1.5px dashed var(--linea); }
.fila-persona .nom { flex: 1; }
.agregar { display: flex; gap: 8px; padding: 10px 16px; }
.agregar .campo { flex: 1; }

/* Hoja inferior */
.velo { position: fixed; inset: 0; background: rgba(28, 24, 21, .55); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.hoja { background: var(--papel); width: 100%; max-width: 520px; max-height: 85vh; max-height: 85dvh; overflow-y: auto; padding: 0 0 calc(14px + var(--safe-b)); }
.hoja-cab { background: var(--mesa); color: var(--papel); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.hoja-cab h2 { font-family: var(--titulos); font-weight: 800; font-size: 22px; line-height: 1.1; }
.hoja-cuerpo { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.hoja-acc { display: flex; gap: 8px; padding: 0 16px; }
.hoja-acc .boton { flex: 1; }

/* Aviso flotante */
#aviso-flotante { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 40; width: min(92vw, 440px); pointer-events: none; }
#aviso-flotante div { background: var(--tinta); color: var(--papel); padding: 10px 14px; font-size: 14px; border-left: 5px solid var(--sello-claro); }
#aviso-flotante div.bien { border-left-color: var(--resaltador); }
.sin-red { background: var(--sello); color: #fff; font-size: 13px; padding: 4px 16px; text-align: center; }

/* Computador */
.lado { display: none; }
@media (min-width: 900px) {
  body { background: var(--mesa); }
  .pantalla { align-items: center; padding: 28px 24px 48px; }
  .cab { width: 100%; max-width: 1080px; padding: 0 0 18px; }
  .cab h1 { font-size: 38px; letter-spacing: -.02em; }
  .sello { width: auto; min-width: 34px; height: 34px; padding: 0 10px; font-size: 14px; }
  .menu { margin: 0 -8px; }
  .cab-dientes { display: none; }
  .cuerpo-pagina { width: 100%; max-width: 1080px; display: flex; gap: 24px; align-items: flex-start; }
  .ticket { flex: 1; min-width: 0; background: var(--papel); padding-bottom: 8px; }
  .ticket.angosta { flex: 0 1 640px; }
  .lado { display: flex; flex-direction: column; gap: 20px; width: 340px; flex: none; position: sticky; top: 20px; }
  .lado-caja { background: var(--papel); padding-bottom: 14px; }
  .lado-caja .sec { padding-top: 12px; }
  .lado-suma { padding: 0 16px; display: flex; flex-direction: column; gap: 4px; }
  .lado-suma .nom, .lado-suma .val { font-size: 15px; font-weight: 400; }
  .lado-grande { font-family: var(--titulos); font-weight: 800; font-size: 38px; line-height: 1.1; letter-spacing: -.01em; }
  .lado .boton { margin: 10px 16px 0; }
  .barra { display: none; }
  .cierre { position: static; margin-top: 0; padding: 14px 16px; }
  .fila { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
  .fila-toca { flex: 1; min-width: 300px; }
  .fila-acc { padding-left: 0; }
  .fila.una .quien { padding-right: 0; }
  .fila.una .fila-acc { position: static; }
  .fila-acc .dividir { margin-right: 4px; }
  .solo-angosto { display: none; }
  .solo-ancho { display: inline; }
  .hoja { align-self: center; }
  .portada { align-self: stretch; width: auto; background: transparent; padding: 48px 0 24px; align-items: center; text-align: center; }
  .portada h1 { font-size: 48px; }
  .portada-caja { width: 100%; max-width: 480px; background: var(--papel); padding-bottom: 6px; }
}
@media (max-width: 899px) {
  .lado { display: none !important; }
}
@media (max-width: 359px) {
  .barra-val { font-size: 27px; }
  .colilla .cu { font-size: 21px; }
  .edita-fila2 { flex-wrap: wrap; }
}