:root {
  --tinta: #17242E;
  --tinta-2: #33434F;
  --tinta-3: #42535F;
  --papel: #F2F4F6;
  --blanco: #FFFFFF;
  --linea: #E1E6EA;
  --linea-2: #C6D0D7;
  --petroleo: #0E5A8A;
  --petroleo-osc: #0A4468;
  --petroleo-claro: #DCE8F1;
  --ambar: #B86200;
  --ambar-claro: #FCEFD9;
  --ambar-texto: #6E3B00;
  --rojo: #A3261B;
  --rojo-claro: #FBE4E1;
  --barra: #2A3F50;
  --superficie-2: #F4F6F8;
  --borde-suave: #E6EBEE;
  --pista: #DCE3E8;
  --hover: #E8EDF0;
  --chip: #E6EAED;
  --azul-texto: #0B4A73;
  --fondo-barra: #17242E;
  --activo: #17242E;
  --activo-texto: #FFFFFF;
  color-scheme: light;
  --fuente: 'IBM Plex Sans', 'Segoe UI', Roboto, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --radio: 10px;
}


html[data-tema="oscuro"] {
  --tinta: #E4ECF1;
  --tinta-2: #C3CFD8;
  --tinta-3: #9DAEBB;
  --papel: #0E161C;
  --blanco: #16212A;
  --linea: #2B3A46;
  --linea-2: #3D505E;
  --petroleo: #2F86C2;
  --petroleo-osc: #4A9AD2;
  --petroleo-claro: #173247;
  --ambar: #E09A3C;
  --ambar-claro: #3A2B14;
  --ambar-texto: #F2C27D;
  --rojo: #EE7B6E;
  --rojo-claro: #3B1C19;
  --barra: #1E2E3A;
  --superficie-2: #1C2934;
  --borde-suave: #24323D;
  --pista: #2B3A46;
  --hover: #22303B;
  --chip: #24323D;
  --azul-texto: #8CC4EA;
  --fondo-barra: #0A1116;
  --activo: #DCE8F1;
  --activo-texto: #0A1116;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--fuente); font-size: 15px; line-height: 1.45;
  color: var(--tinta); background: var(--papel);
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
p { margin: 0; }
a { color: var(--petroleo); }
:focus-visible { outline: 3px solid #7FB3D8; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.suave { color: var(--tinta-3); }
.pequeno { font-size: 13px; }
.cargando { padding: 40px; text-align: center; color: var(--tinta-3); }
[hidden] { display: none !important; }

/* ---------- Pantalla de carga ---------- */
.carga { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; background: var(--fondo-barra); color: #fff; text-align: center; }
.carga-icono { width: 104px; height: 112px; }
.carga-ticket { animation: imprimir 2.2s cubic-bezier(.3, .7, .3, 1) infinite; }
.carga-linea { fill: #4A9AD2; transform-box: fill-box; transform-origin: left center; animation: escribir 2.2s ease-out infinite; }
.carga-linea.l2 { animation-delay: .15s; }
.carga-linea.l3 { animation-delay: .3s; fill: #9DB4C4; }
@keyframes imprimir { 0% { transform: translateY(-70px); opacity: 1; } 55%, 93% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes escribir { 0%, 30% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
.carga-titulo { font-size: 24px; }
.carga-texto { max-width: 420px; color: #C9D5DD; }
.carga-barra { width: min(340px, 80vw); height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.carga-barra div { width: 35%; height: 100%; border-radius: 999px; background: #4A9AD2; animation: indeterminada 1.3s ease-in-out infinite; }
.carga-barra.determinada div { animation: none; transition: width .3s; }
@keyframes indeterminada { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
.carga-paso { min-height: 20px; font-size: 13px; color: #9DB4C4; font-variant-numeric: tabular-nums; }
.fallo-arranque { max-width: 560px; margin: 12vh auto; padding: 28px; display: flex; flex-direction: column; gap: 14px; border-radius: 16px; background: var(--blanco); border: 1px solid var(--linea); }
.fallo-arranque strong { font-size: 20px; }
.acciones-fila { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.acciones-fila .btn { min-height: 40px; padding: 0 12px; font-size: 14px; }

/* ---------- Estructura ---------- */
.app {
  display: grid; height: 100dvh;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr);
}
.barra {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; padding-top: env(safe-area-inset-top, 0);
  background: var(--fondo-barra); color: #fff;
}
.marca { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.marca strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca span { font-size: 12px; color: #C9D5DD; }
.estado-sync {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1px solid #3B5163; background: transparent; color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.estado-sync .punto { width: 9px; height: 9px; border-radius: 999px; background: #7FB3D8; flex: none; }
.estado-sync.alerta { border-color: #E3A04A; }
.estado-sync.alerta .punto { background: #F0A43A; }
.estado-sync.error { border-color: #E07A6F; }
.estado-sync.error .punto { background: #E5574A; }
.estado-sync.girando .punto { animation: latido 1s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .3; } }
.usuario-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; color: #DCE4EA; cursor: pointer;
}
.usuario-btn:hover { background: var(--barra); }

.menu {
  grid-row: 2; background: var(--fondo-barra); display: flex; flex-direction: column; gap: 4px;
  padding: 8px; overflow-y: auto;
}
.menu a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 64px; padding: 8px 4px; border-radius: var(--radio);
  color: #C9D5DD; text-decoration: none; font-size: 12px; font-weight: 500; text-align: center;
}
.menu a:hover { background: #22323E; color: #fff; }
.menu a[aria-current="page"] { background: var(--barra); color: #fff; }
.menu svg { width: 24px; height: 24px; }
.vista { grid-row: 2; overflow: auto; padding: 20px; min-width: 0; }
.pantalla { height: 100%; min-height: 0; }

@media (max-width: 760px) {
  .marca span { display: none; }
}

/* ---------- Componentes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: var(--radio); border: 1px solid transparent;
  font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }
.btn-primario { background: var(--petroleo); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--petroleo-osc); }
.btn-sec { background: var(--blanco); color: var(--tinta); border-color: var(--linea-2); }
.btn-sec:hover:not(:disabled) { background: var(--superficie-2); }
.btn-peligro { background: #A3261B; color: #fff; }
.btn-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; border-radius: 8px; background: transparent; color: var(--tinta-3); cursor: pointer; flex: none;
}
.btn-icono:hover { background: var(--hover); color: var(--tinta); }
.btn-icono svg { width: 20px; height: 20px; }

.cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cabecera .acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cabecera .acciones input, .cabecera .acciones select { width: auto; min-width: 200px; flex: 1 1 200px; }
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; padding: 20px; }
.tarjeta + .tarjeta { margin-top: 16px; }
.pila { display: flex; flex-direction: column; gap: 16px; }
.fila-campos { display: flex; flex-wrap: wrap; gap: 14px; }
.fila-campos > .campo { flex: 1 1 200px; min-width: 0; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .etiqueta { font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.campo .ayuda { font-size: 12px; color: var(--tinta-3); }
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="month"], input:not([type]), select, textarea {
  width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--linea-2); border-radius: 8px;
  background: var(--blanco);
}
textarea { padding: 10px 12px; min-height: 80px; resize: vertical; }
input.mono { font-family: var(--mono); }
.casilla { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; }
.casilla input { width: 22px; height: 22px; }

.segmentos { display: inline-flex; border: 1px solid var(--linea-2); border-radius: var(--radio); overflow: hidden; background: var(--blanco); }
.segmentos button {
  min-height: 44px; padding: 0 14px; border: 0; background: transparent; font-weight: 600; cursor: pointer; color: var(--tinta-2);
}
.segmentos button + button { border-left: 1px solid var(--linea-2); }
.segmentos button[aria-pressed="true"] { background: var(--activo); color: var(--activo-texto); }
.segmentos button:disabled { color: #9AA8B2; cursor: not-allowed; }
.segmentos button[aria-pressed="true"]:disabled { background: #8795A0; color: #fff; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--chip); color: var(--tinta-2); white-space: nowrap; }
.chip.azul { background: var(--petroleo-claro); color: var(--azul-texto); }
.chip.ambar { background: var(--ambar-claro); color: var(--ambar-texto); }
.chip.rojo { background: var(--rojo-claro); color: var(--rojo); }

.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--ambar-claro); color: var(--ambar-texto); font-size: 14px; font-weight: 500; }
.aviso.error { background: var(--rojo-claro); color: var(--rojo); }
.aviso.info { background: var(--petroleo-claro); color: var(--azul-texto); }
.aviso svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

.vacio { padding: 32px 16px; text-align: center; color: var(--tinta-3); }

.tabla-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: 12px; background: var(--blanco); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--borde-suave); font-size: 14px; vertical-align: middle; }
th { font-size: 12px; font-weight: 600; color: var(--tinta-3); background: var(--superficie-2); white-space: nowrap; }
td.der, th.der { text-align: right; }
tr:last-child td { border-bottom: 0; }
tr.clic { cursor: pointer; }
tr.clic:hover td { background: var(--superficie-2); }
tr.anulada td { color: #8A98A3; text-decoration: line-through; }
tr.anulada td:last-child { text-decoration: none; }

.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.dato { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; }
.dato span { display: block; font-size: 13px; color: var(--tinta-3); }
.dato strong { display: block; font-size: 22px; font-variant-numeric: tabular-nums; margin-top: 2px; }

.pestanas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--linea); }
.pestanas button { min-height: 44px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; font-weight: 600; color: var(--tinta-3); cursor: pointer; }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--petroleo); }

.barra-uso { height: 10px; border-radius: 999px; background: var(--pista); overflow: hidden; }
.barra-uso div { height: 100%; border-radius: 999px; background: var(--petroleo); }
.barra-uso.alerta div { background: var(--ambar); }
.barra-uso.bloqueo div { background: var(--rojo); }

/* ---------- Ventanas y avisos ---------- */
dialog.modal { border: 0; padding: 0; border-radius: 16px; width: min(560px, 94vw); max-height: 92dvh; background: var(--blanco); color: var(--tinta); }
dialog.modal.ancho { width: min(820px, 96vw); }
dialog.modal::backdrop { background: rgba(23, 36, 46, .5); }
.modal-marco { display: flex; flex-direction: column; max-height: 92dvh; }
.modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 10px 20px; border-bottom: 1px solid var(--borde-suave); }
.modal-cuerpo { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 20px 18px; border-top: 1px solid var(--borde-suave); }

#avisos { position: fixed; left: 112px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 50; width: min(520px, 92vw); pointer-events: none; }
.toast { padding: 12px 16px; border-radius: 10px; background: var(--fondo-barra); border: 1px solid #2E4453; color: #fff; font-weight: 500; box-shadow: 0 6px 24px rgba(23, 36, 46, .25); }
.toast.error { background: #A3261B; }
.toast.aviso { background: #6E3B00; }

/* ---------- Entrada ---------- */
.entrada { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--fondo-barra); }
.entrada form { width: min(400px, 100%); background: var(--blanco); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.entrada h1 { font-size: 22px; }

/* ---------- Caja ---------- */
.caja { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); gap: 16px; height: 100%; min-height: 0; }
.caja-buscar { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.buscador { position: relative; }
.buscador svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--tinta-3); }
.buscador input { min-height: 54px; padding-left: 44px; font-size: 17px; border-radius: 12px; }
.resultados { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; overflow-y: auto; align-content: start; padding-bottom: 8px; min-height: 0; }
.producto {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 104px; padding: 12px;
  border: 1px solid var(--linea); border-radius: 12px; background: var(--blanco); text-align: left; cursor: pointer;
}
.producto:hover { border-color: var(--linea-2); }
.producto:active { background: var(--petroleo-claro); }
.producto .p-nombre { font-weight: 600; line-height: 1.25; }
.producto .p-codigo { font-size: 12px; color: var(--tinta-3); font-family: var(--mono); }
.producto .p-pie { margin-top: auto; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 6px; }
.producto .p-precio { font-weight: 700; font-variant-numeric: tabular-nums; }
.producto.agotado { background: var(--superficie-2); }

.ticket { display: flex; flex-direction: column; min-height: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.ticket-cab { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-bottom: 1px solid var(--borde-suave); }
.ticket-cab .opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cliente-btn { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border: 1px solid var(--linea-2); border-radius: var(--radio); background: var(--blanco); cursor: pointer; text-align: left; }
.cliente-btn svg { width: 20px; height: 20px; color: var(--tinta-3); flex: none; }
.cliente-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ticket-avisos { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; }
.ticket-avisos:not(:empty) { padding-top: 12px; }
.lineas { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; min-height: 120px; }
.linea { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--borde-suave); }
.linea-nombre { display: block; font-weight: 600; line-height: 1.25; }
.linea-sub { display: block; font-size: 12px; color: var(--tinta-3); }
.cantidad { display: flex; align-items: center; border: 1px solid var(--linea-2); border-radius: 8px; overflow: hidden; }
.cantidad button { width: 40px; height: 42px; border: 0; background: var(--superficie-2); font-size: 20px; cursor: pointer; }
.cantidad input { width: 56px; min-height: 42px; border: 0; border-radius: 0; text-align: center; padding: 0 4px; font-variant-numeric: tabular-nums; }
.linea-total { min-width: 76px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.totales { padding: 10px 14px; border-top: 1px solid var(--borde-suave); display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.totales div { display: flex; justify-content: space-between; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.btn-cobrar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 14px 14px;
  min-height: 64px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--petroleo); color: #fff;
  font-size: 20px; font-weight: 700; cursor: pointer;
}
.btn-cobrar:hover:not(:disabled) { background: var(--petroleo-osc); }
.btn-cobrar:disabled { background: #9DB4C4; cursor: not-allowed; }
.btn-cobrar .monto { font-size: 24px; font-variant-numeric: tabular-nums; }
.pago-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; border-radius: 12px; background: var(--superficie-2); }
.pago-total strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.rapidos { display: flex; flex-wrap: wrap; gap: 8px; }
.rapidos button { min-width: 72px; }
.cambio { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lista-sel { display: flex; flex-direction: column; max-height: 46dvh; overflow-y: auto; border: 1px solid var(--linea); border-radius: 10px; }
.lista-sel button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--borde-suave); background: var(--blanco); text-align: left; cursor: pointer; }
.lista-sel button:hover { background: var(--superficie-2); }
.lista-sel button span { font-size: 12px; color: var(--tinta-3); }

@media (max-width: 1100px) {
  .caja { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr); gap: 12px; }
  .resultados { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
}

.filtros-familia { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.filtros-familia.sub { margin-top: 8px; }
.filtros-familia button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linea-2); background: var(--blanco); font-weight: 600; cursor: pointer; white-space: nowrap; }
.filtros-familia.sub button { min-height: 36px; font-weight: 500; }
.filtros-familia button[aria-pressed="true"] { background: var(--activo); border-color: var(--activo); color: var(--activo-texto); }
.familia { border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.familia-cab, .subfamilia { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; }
.familia-cab { background: var(--superficie-2); }
.subfamilia { border-top: 1px solid var(--borde-suave); padding-left: 28px; }
.familia-acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.familia-acciones .btn { min-height: 38px; padding: 0 12px; font-size: 14px; }

/* ---------- Efectivo, compras y arqueo ---------- */
.acciones-grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.accion-grande { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 88px; padding: 14px 16px; white-space: normal; text-align: left; }
.accion-grande strong { font-size: 17px; }
.accion-grande span { font-weight: 400; font-size: 13px; color: var(--tinta-3); }
input.monto-grande { min-height: 58px; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
input.celda-num { width: 110px; min-height: 40px; text-align: right; font-variant-numeric: tabular-nums; }
fieldset.permisos { border: 1px solid var(--linea); border-radius: 12px; padding: 8px 14px 10px; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 12px; }
fieldset.permisos legend { padding: 0 6px; }
.conteo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
.billetes { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.den { display: grid; grid-template-columns: 1fr 1fr 1.2fr; align-items: center; gap: 8px; min-height: 50px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--borde-suave); background: var(--blanco); text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.den:last-child { border-bottom: 0; }
.den[aria-pressed="true"] { background: var(--petroleo-claro); box-shadow: inset 4px 0 0 var(--petroleo); }
.den-nombre { font-weight: 700; }
.den-piezas { font-size: 18px; font-weight: 600; }
.den-subtotal { text-align: right; color: var(--tinta-2); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.teclado button { min-height: 60px; border: 1px solid var(--linea-2); border-radius: 12px; background: var(--blanco); font-size: 24px; font-weight: 600; cursor: pointer; }
.teclado button:active { background: var(--petroleo-claro); }
.teclado .tecla-ancha { grid-column: span 3; font-size: 17px; }
.teclado .tecla-siguiente { background: var(--activo); border-color: var(--activo); color: var(--activo-texto); }
.totales-arqueo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--superficie-2); }
.totales-arqueo span { display: block; font-size: 13px; color: var(--tinta-3); }
.totales-arqueo strong { font-size: 24px; }
.totales-arqueo .falta { color: var(--rojo); }
.totales-arqueo .sobra { color: var(--ambar-texto); }
@media (max-width: 760px) { .conteo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Impresión térmica ---------- */
#impresion { display: none; }
.ticket-papel { font-family: var(--mono); font-size: 11px; line-height: 1.35; color: #000; }
.papel-80 .ticket-papel { width: 72mm; }
.papel-58 .ticket-papel { width: 48mm; font-size: 10px; }
.ticket-papel hr { border: 0; border-top: 1px dashed #000; margin: 5px 0; }
.t-centro { text-align: center; }
.t-grande { font-size: 1.25em; font-weight: 700; }
.t-fuerte { font-weight: 700; }
.t-fila { display: flex; justify-content: space-between; gap: 8px; }
.t-item { margin-top: 2px; }
@media print {
  @page { margin: 2mm; }
  body { background: #fff; }
  body > *:not(#impresion) { display: none !important; }
  #impresion { display: block !important; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Barra superior: conexión, sincronizar, tema ---------- */
.estado-sync svg { width: 18px; height: 18px; flex: none; }
.estado-sync.en-linea { border-color: #2F8F57; }
.estado-sync.en-linea svg { color: #3DDC84; }
.estado-sync.sin-red { border-color: #E3A04A; }
.estado-sync.sin-red svg { color: #9AA8B2; }
.estado-sync.alerta svg { color: #F0A43A; }
.estado-sync.error svg { color: #E5574A; }
.barra-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid #3B5163; border-radius: 999px; background: transparent; color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.barra-btn:hover { background: var(--barra); }
.barra-btn svg { width: 18px; height: 18px; }
.barra-btn.solo-icono { width: 40px; padding: 0; }
.girando svg { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.progreso { height: 14px; border-radius: 999px; background: var(--pista); overflow: hidden; }
.progreso div { height: 100%; width: 0; border-radius: 999px; background: var(--petroleo); transition: width .25s; }
.progreso-texto { display: flex; justify-content: space-between; gap: 10px; }
@media (max-width: 760px) {
  .barra { gap: 6px; padding: 0 8px; }
  .barra-btn span, .estado-sync #estado-texto { display: none; }
  .estado-sync { padding: 0 10px; }
  #completa-btn { display: none; }
}

/* ---------- Pantalla de inicio con PIN ---------- */
.acceso { min-height: 100dvh; display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr); background: var(--papel); }
.acceso-lado { background: var(--fondo-barra); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 48px; }
.acceso-lado h1 { font-size: 28px; }
.acceso-logo { align-self: flex-start; max-width: 180px; max-height: 110px; object-fit: contain; background: #fff; border-radius: 12px; padding: 8px; }
.reloj-hora { font-family: var(--mono); font-size: clamp(40px, 5vw, 74px); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.reloj-hora { white-space: nowrap; }
.reloj-periodo { margin-left: 12px; font-size: .38em; font-weight: 600; letter-spacing: 0; }
html[data-tema="oscuro"] .btn-cobrar:disabled { background: #22303B; color: #7F909C; }
.reloj-fecha { margin-top: 10px; font-size: 19px; color: #C9D5DD; }
.acceso-panel { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 40px; min-width: 0; }
.acceso-panel form { width: min(420px, 100%); }
.usuarios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.usuario-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; padding: 18px 12px; border: 1px solid var(--linea); border-radius: 16px; background: var(--blanco); color: var(--tinta); cursor: pointer; text-align: center; }
.usuario-tile:hover { border-color: var(--petroleo); }
.avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; background: var(--petroleo-claro); color: var(--azul-texto); font-size: 22px; font-weight: 700; flex: none; }
.avatar.grande { width: 72px; height: 72px; font-size: 26px; }
.pin-cab { display: flex; align-items: center; gap: 16px; align-self: center; }
.pin-cab strong { font-size: 20px; }
.pin-puntos { display: flex; justify-content: center; gap: 16px; }
.pin-puntos span { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--tinta-3); }
.pin-puntos span.lleno { background: var(--tinta); border-color: var(--tinta); }
.sacudir { animation: sacudir .4s; }
@keyframes sacudir { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.pin-error { min-height: 24px; text-align: center; color: var(--rojo); font-weight: 600; }
.teclado-pin { width: min(360px, 100%); align-self: center; }
.teclado-pin button { min-height: 72px; font-size: 28px; }
.teclado-pin .tecla-texto { font-size: 15px; }
.enlace { align-self: center; min-height: 44px; border: 0; background: none; color: var(--petroleo); font-weight: 600; text-decoration: underline; cursor: pointer; }
@media (max-width: 860px) {
  .acceso { grid-template-columns: minmax(0, 1fr); }
  .acceso-lado { padding: 24px; gap: 10px; }
  .acceso-panel { padding: 20px; }
}

/* ---------- Imágenes de productos y logo ---------- */
.producto .p-img { width: 100%; height: 84px; object-fit: contain; border-radius: 8px; background: #fff; }
.miniatura { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--linea); vertical-align: middle; }
.imagen-producto { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.vista-previa { display: grid; place-items: center; width: 120px; height: 120px; flex: none; border: 1px dashed var(--linea-2); border-radius: 12px; background: #fff; color: #8795A0; overflow: hidden; }
.vista-previa img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vista-previa svg { width: 36px; height: 36px; }
.imagen-botones { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 260px; align-content: flex-start; }
.imagen-botones .btn { min-height: 42px; padding: 0 12px; font-size: 14px; }
.logo-previa { max-width: 220px; max-height: 110px; object-fit: contain; background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 6px; }
.t-logo { display: block; margin: 0 auto 4px; max-width: 46mm; max-height: 22mm; object-fit: contain; }

/* ================= Diseño limpio: mismo patrón en todas las pantallas ================= */
.vista { padding: 24px 28px; }
.cabecera { align-items: flex-start; margin-bottom: 18px; }
.titulos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.titulos h1, .cabecera > h1 { font-size: 26px; letter-spacing: -0.01em; }
.subtitulo { color: var(--tinta-3); font-size: 14px; max-width: 640px; }
.cabecera > .chip { margin-top: 6px; }
.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.herramientas input[type="search"] { flex: 1 1 260px; max-width: 440px; }
.herramientas select, .herramientas input[type="date"] { width: auto; min-width: 180px; }
.herramientas .separador { flex: 1 1 auto; }
.btn-texto { background: transparent; border-color: transparent; color: var(--petroleo); padding: 0 10px; }
.btn-texto:hover { background: var(--petroleo-claro); }
.btn-whatsapp { background: #1E7E46; color: #fff; }
.btn-whatsapp:hover:not(:disabled) { background: #176538; }
.btn-whatsapp svg { width: 18px; height: 18px; }
.btn:disabled.btn-whatsapp { background: #8FA59A; }

.tarjeta { border-radius: 16px; padding: 22px; }
.dato { border-radius: 14px; padding: 16px 18px; }
.dato span { font-size: 13px; }
.dato strong { font-size: 24px; margin-top: 4px; }
.dato-alerta strong { color: var(--rojo); }
.tabla-caja { border-radius: 14px; }
th { background: transparent; border-bottom: 1px solid var(--linea); padding: 12px 14px; }
td { padding: 12px 14px; }
tbody tr:hover td { background: var(--superficie-2); }
.vacio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 20px; border: 1px dashed var(--linea-2); border-radius: 16px; color: var(--tinta-3); }
.vacio svg { width: 36px; height: 36px; }
.tabla-caja .vacio, li.vacio { border: 0; }
.tramos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.tramo { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--superficie-2); }
.tramo span { font-size: 12px; color: var(--tinta-3); }
.tramo.con-atraso strong { color: var(--rojo); }

/* Barra superior con menú de usuario */
.barra { gap: 16px; }
.barra-derecha { display: flex; align-items: center; gap: 10px; }
.barra-btn { position: relative; }
.insignia { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #F0A43A; color: #1B1206; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.menu-usuario { position: relative; }
.usuario-btn { gap: 10px; padding: 0 8px 0 4px; border-radius: 999px; color: #fff; }
.avatar.mini { width: 32px; height: 32px; font-size: 13px; background: #2E4A5E; color: #fff; }
.menu-desplegable { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 240px; padding: 6px; border-radius: 14px; background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea); box-shadow: 0 12px 32px rgba(10, 17, 22, .18); }
.menu-desplegable-cab { display: flex; flex-direction: column; padding: 10px 12px 12px; border-bottom: 1px solid var(--linea); margin-bottom: 4px; }
.menu-desplegable-cab span { font-size: 13px; color: var(--tinta-3); }
.menu-desplegable button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; text-align: left; font-weight: 500; cursor: pointer; }
.menu-desplegable button:hover { background: var(--superficie-2); }
.menu-desplegable svg { width: 20px; height: 20px; color: var(--tinta-3); }

/* Menú lateral agrupado */
.menu { gap: 2px; }
.menu a { min-height: 58px; }
.menu-sep { height: 1px; margin: 6px 12px; background: #2E4453; flex: none; }

/* Avisos: uno a la vez, arriba al centro, sin tapar la caja */
#avisos { top: auto; bottom: 20px; left: 112px; transform: none; width: auto; max-width: min(520px, 60vw); }
.toast { padding: 10px 18px; border-radius: 999px; font-size: 14px; text-align: left; animation: aparecer .18s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }

/* Recordatorios */
.lista-recordatorios { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.recordatorio { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--borde-suave); }
.recordatorio:last-child { border-bottom: 0; }
.recordatorio.enviado { background: var(--superficie-2); }
.recordatorio.enviado strong { color: var(--tinta-3); }

@media (max-width: 760px) {
  .vista { padding: 14px; }
  .usuario-nombre { display: none; }
  .herramientas input[type="search"] { max-width: none; }
  .acciones-fila .btn-whatsapp span { display: none; }
  #avisos { left: 50%; transform: translateX(-50%); max-width: 92vw; }
}

/* ================= Adaptación a cada dispositivo ================= */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* En pantallas táctiles (tablet, iPhone, Android) los campos usan 16 px: así iPhone no hace zoom al tocarlos. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}
/* En monitores grandes las pantallas de consulta no se estiran de lado a lado; la caja sí usa todo el ancho. */
.pantalla { max-width: 1400px; margin: 0 auto; }
.pantalla:has(> .caja) { max-width: none; }
.pestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pestanas button { flex: none; }
.menu .menu-mas { display: none; }
.barra-ticket, .cerrar-ticket { display: none; }

/* Tablet vertical y teléfonos: el menú pasa abajo, como en las apps del teléfono */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .barra { min-height: 56px; }
  .menu {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    flex-direction: row; justify-content: space-around; gap: 2px; overflow: visible;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #2E4453;
  }
  .menu a, .menu .menu-mas { flex: 1 1 0; min-width: 0; min-height: 54px; padding: 6px 2px; font-size: 11px; }
  .menu a.secundario, .menu-sep { display: none; }
  .menu .menu-mas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: var(--radio); background: transparent; color: #C9D5DD; font-weight: 500; cursor: pointer; }
  .menu .menu-mas[aria-current="page"] { background: var(--barra); color: #fff; }
  .menu .menu-mas svg { width: 24px; height: 24px; }
  .vista { grid-row: 2; padding: 16px 16px calc(84px + env(safe-area-inset-bottom, 0px)); }
  #avisos { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); max-width: 92vw; }

  /* Tablas como tarjetas: cada fila se lee de arriba abajo, sin deslizar a los lados */
  .tabla-caja { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .tabla-caja table, .tabla-caja tbody, .tabla-caja tr, .tabla-caja td { display: block; width: 100%; }
  .tabla-caja thead { display: none; }
  .tabla-caja tr { margin-bottom: 10px; padding: 6px 2px; border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco); }
  .tabla-caja td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 14px; border: 0; text-align: right; }
  .tabla-caja td::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; font-size: 12px; font-weight: 600; color: var(--tinta-3); }
  .tabla-caja td:first-child { display: block; text-align: left; font-size: 16px; }
  .tabla-caja td:first-child::before, .tabla-caja td[data-label=""]::before, .tabla-caja td:not([data-label])::before { content: none; }
  .tabla-caja td[data-label=""] { justify-content: flex-end; }
  .tabla-caja td.vacio, .tabla-caja td[colspan] { display: block; text-align: center; }
  tbody tr:hover td { background: transparent; }
  .acciones-fila { width: 100%; justify-content: flex-end; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .tabla-caja tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabla-caja td:first-child, .tabla-caja td[data-label=""], .tabla-caja td[colspan] { grid-column: 1 / -1; }
}

/* Teléfonos: la caja muestra los productos y el ticket se abre a pantalla completa */
@media (max-width: 700px) {
  .caja { display: block; height: auto; }
  .resultados { overflow: visible; max-height: none; padding-bottom: 76px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .producto { min-height: 96px; padding: 10px; }
  .producto .p-img { height: 70px; }
  .ticket { display: none; position: fixed; inset: 0; z-index: 30; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .caja.ticket-abierto .ticket { display: flex; }
  .cerrar-ticket { display: inline-flex; align-self: flex-start; }
  .barra-ticket {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 24;
    min-height: 58px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--petroleo); color: #fff;
    font-weight: 700; font-size: 16px; box-shadow: 0 8px 24px rgba(10, 17, 22, .25); cursor: pointer;
  }
  .barra-ticket[hidden] { display: none; }
  .barra-ticket .monto { font-size: 20px; font-variant-numeric: tabular-nums; }
  .btn-cobrar { margin: 0 12px 12px; }
}

/* Teléfonos: ventanas a pantalla completa, números más compactos */
@media (max-width: 640px) {
  .vista { padding-left: 12px; padding-right: 12px; }
  .titulos h1, .cabecera > h1 { font-size: 22px; }
  .resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dato { padding: 12px 14px; }
  .dato strong { font-size: 19px; }
  .cabecera .acciones { width: 100%; }
  .cabecera .acciones .btn { flex: 1 1 auto; }
  .herramientas select, .herramientas input[type="date"] { flex: 1 1 140px; min-width: 0; }
  .herramientas .segmentos { width: 100%; overflow-x: auto; }
  .herramientas .segmentos button { flex: 1 0 auto; }
  dialog.modal, dialog.modal.ancho { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .modal-marco { height: 100dvh; max-height: 100dvh; padding-top: env(safe-area-inset-top, 0px); }
  .modal-cuerpo { flex: 1; }
  .modal-acciones { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .modal-acciones .btn { flex: 1 1 auto; }
  .usuarios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usuario-tile { min-height: 130px; }
  .acceso-lado { padding: 20px 20px 16px; }
  .teclado-pin button { min-height: 64px; }
}
.usuario-nombre { white-space: nowrap; }
@media (max-width: 760px) { .usuario-nombre { display: none; } }

/* Hoja del botón «Más» */
.menu-hoja { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.menu-hoja a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 12px 8px; border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco); color: var(--tinta); text-decoration: none; font-weight: 600; text-align: center; }
.menu-hoja a.actual { border-color: var(--petroleo); background: var(--petroleo-claro); }
.menu-hoja svg { width: 26px; height: 26px; color: var(--tinta-3); }

.con-miniatura { display: inline-flex; align-items: center; gap: 10px; }
.miniatura.vacia { display: inline-block; background: var(--superficie-2); border-style: dashed; }
@media (max-width: 900px) {
  .tabla-caja td:has(.acciones-fila) { grid-column: 1 / -1; }
  .tabla-caja td:has(.acciones-fila)::before { content: none; }
}
@media (max-width: 640px) {
  .tramos { display: flex; overflow-x: auto; scrollbar-width: none; }
  .tramo { flex: 0 0 auto; min-width: 118px; }
}

#avisos { width: max-content; }
/* Teléfonos: el aviso aparece arriba, para no tapar la barra del ticket ni el menú */
@media (max-width: 700px) {
  #avisos { top: calc(64px + env(safe-area-inset-top, 0px)); bottom: auto; }
  .toast { text-align: center; }
}

/* ---------- Métodos de pago y cuentas ---------- */
.metodos-pago { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.metodos-pago button { min-height: 50px; padding: 0 12px; border: 1px solid var(--linea-2); border-radius: 12px; background: var(--blanco); font-weight: 600; cursor: pointer; }
.metodos-pago button[aria-pressed="true"] { background: var(--activo); border-color: var(--activo); color: var(--activo-texto); }
fieldset.cuentas { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
fieldset.cuentas legend { margin-bottom: 8px; }
.cuenta { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--linea-2); border-radius: 12px; background: var(--blanco); cursor: pointer; }
.cuenta:has(input:checked) { border-color: var(--petroleo); background: var(--petroleo-claro); box-shadow: inset 0 0 0 1px var(--petroleo); }
.cuenta input { width: 22px; height: 22px; flex: none; }
.cuenta-datos { display: flex; flex-direction: column; gap: 2px; }
.cuenta-numero { font-size: 22px; font-weight: 600; letter-spacing: 0.02em; }
.metodo-tarjeta { display: flex; flex-direction: column; gap: 12px; }
.metodo-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.lista-cuentas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-cuentas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); }
.cuenta-editar { display: grid; grid-template-columns: 1.2fr 0.8fr 1.2fr 1.2fr auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--linea); border-radius: 12px; }
@media (max-width: 760px) { .cuenta-editar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Descuadre en el arqueo ---------- */
.descuadre { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border-radius: 14px; text-align: center; }
.descuadre span { font-weight: 600; }
.descuadre strong { font-size: 34px; font-variant-numeric: tabular-nums; }
.descuadre.falta { background: var(--rojo-claro); color: var(--rojo); }
.descuadre.sobra { background: var(--ambar-claro); color: var(--ambar-texto); }

.descuadre.cuadra { background: var(--petroleo-claro); color: var(--azul-texto); }

/* ---------- Elegir documentos al cobrar ---------- */
.documentos-pago { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.documento-pago { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--borde-suave); }
.documento-pago:last-child { border-bottom: 0; }
.documento-pago.elegido { background: var(--petroleo-claro); }
.documento-pago .casilla { min-height: 40px; align-items: center; }
.documento-pago .casilla span { display: flex; flex-direction: column; }
.documento-pago input.celda-num { width: 100%; }
@media (max-width: 640px) { .documento-pago { grid-template-columns: minmax(0, 1fr) 110px; } .documento-pago > .num { grid-column: 1 / -1; font-size: 13px; color: var(--tinta-3); } }

.casilla-documentos { padding: 10px 12px; border: 1px dashed var(--linea-2); border-radius: 12px; }
.casilla-documentos .chip { margin-left: 6px; }

/* ---------- Tarifas ---------- */
.tarifa-sel { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; min-height: 44px; border: 1px solid var(--linea-2); border-radius: 12px; background: var(--blanco); font-size: 14px; font-weight: 600; }
.tarifa-sel svg { width: 18px; height: 18px; color: var(--tinta-3); }
.tarifa-sel select { width: auto; min-height: 38px; border: 0; background: transparent; padding: 0 4px; font-weight: 600; }
.tarifa-fija { align-self: center; }
.tarifa-ejemplo { padding: 12px 14px; border-radius: 12px; background: var(--superficie-2); font-variant-numeric: tabular-nums; }

/* ---------- Animación al vender: impresora sacando el recibo ---------- */
.venta-ok { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; animation: vo-entrar .25s ease-out; }
.venta-ok.con-boton { background: rgba(10, 17, 22, .28); }
.venta-ok.saliendo { opacity: 0; transition: opacity .28s ease-in; }
.vo-tarjeta { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(380px, 90vw); padding: 14px 26px 22px; border-radius: 24px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: 0 28px 70px rgba(10, 17, 22, .32); text-align: center; }
.vo-impresora { width: 176px; height: 220px; overflow: visible; }
/* Impresión: el papel sale a tirones durante 2.4 s, como una impresora térmica, y luego se balancea. */
.vo-recibo { transform-box: view-box; transform-origin: 100px 78px; animation: vo-imprimir 2.4s steps(16, end) both, vo-balanceo 3.2s ease-in-out 2.6s infinite; }
.vo-cuerpo { animation: vo-vibrar .1s linear 24; }
.vo-luz { animation: vo-parpadeo .3s steps(2) 8; }
.vo-linea { fill: #9DB0BE; transform-box: fill-box; transform-origin: left center; animation: vo-escribir .25s ease-out both; }
.vo-linea.l1 { fill: #17242E; animation-delay: .5s; } .vo-linea.l2 { animation-delay: .8s; } .vo-linea.l3 { animation-delay: 1.05s; }
.vo-linea.l4 { animation-delay: 1.3s; } .vo-linea.l5 { animation-delay: 1.55s; } .vo-linea.l6 { animation-delay: 1.8s; } .vo-linea.l7 { animation-delay: 2.05s; }
.vo-total-papel { fill: #17242E; font: 700 17px var(--mono, monospace); }
.vo-check { transform-box: fill-box; transform-origin: center; animation: vo-check .4s cubic-bezier(.3, 1.6, .5, 1) 2.45s both; }
.vo-titulo { font-size: 19px; }
.vo-numero { color: var(--tinta-3); font-size: 14px; }
.vo-total { font-size: 18px; font-weight: 700; }
.vo-cambio { display: flex; flex-direction: column; width: 100%; margin-top: 8px; padding: 12px 18px; border-radius: 16px; background: var(--petroleo-claro); color: var(--azul-texto); animation: vo-resaltar .6s ease-out 2.5s both; }
.vo-cambio span { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.vo-cambio b { font-size: 44px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vo-detalle { display: flex; justify-content: center; gap: 18px; font-size: 14px; color: var(--tinta-3); }
.vo-detalle strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.vo-nueva { width: 100%; min-height: 56px; margin-top: 10px; font-size: 18px; }
.vo-pista { font-size: 13px; color: var(--tinta-3); }
@keyframes vo-entrar { from { opacity: 0; transform: scale(.96); } }
@keyframes vo-imprimir { from { transform: translateY(-150px); } to { transform: translateY(0); } }
@keyframes vo-balanceo { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.6deg); } }
@keyframes vo-vibrar { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }
@keyframes vo-escribir { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes vo-parpadeo { 50% { opacity: .15; } }
@keyframes vo-check { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes vo-resaltar { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@media (max-width: 700px) { .vo-impresora { width: 140px; height: 175px; } .vo-cambio b { font-size: 38px; } }

/* ================= Pantalla de usuarios (propuesta A) ================= */
.acceso { grid-template-columns: minmax(320px, 460px) minmax(0, 1fr); }
.acceso-lado { justify-content: space-between; gap: 32px; padding: 56px; }
.acceso-marca { display: flex; align-items: center; gap: 14px; }
.acceso-marca h1 { font-size: 19px; font-weight: 600; }
.acceso-sub { font-size: 14px; color: #C9D5DD; }
.acceso-sello { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--petroleo); color: #fff; font-weight: 700; font-size: 18px; flex: none; }
.acceso-logo { max-width: 72px; max-height: 72px; padding: 6px; }
.acceso-lado .reloj { display: flex; flex-direction: column; gap: 10px; }
.acceso-lado .reloj-hora { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; font-size: clamp(48px, 5.6vw, 72px); letter-spacing: -0.04em; white-space: normal; }
.acceso-lado .reloj-hora .reloj-periodo { white-space: nowrap; }
.acceso-lado .reloj-periodo { font-size: 0.34em; margin-left: 0; letter-spacing: 0; }
.acceso-lado .reloj-fecha { font-size: 20px; color: #C9D5DD; }
.acceso-estado { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #C9D5DD; }
.acceso-estado .punto { width: 10px; height: 10px; border-radius: 999px; background: #3DDC84; }
.acceso-estado .punto.sin-red { background: #F0A43A; }
.acceso-panel { justify-content: center; gap: 28px; padding: 56px 64px; }
.acceso-titulo h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.01em; }
.acceso-titulo p { margin-top: 6px; font-size: 17px; color: var(--tinta-3); }
.usuarios-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; max-width: 760px; }
.usuario-tile, .usuario-otro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 196px; padding: 26px 16px 22px; border-radius: 22px; cursor: pointer; text-align: center; font: inherit; }
.usuario-tile { border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta); transition: border-color .15s, box-shadow .15s, transform .15s; }
.usuario-tile:hover, .usuario-tile:focus-visible { border-color: var(--petroleo); box-shadow: 0 10px 28px rgba(14, 90, 138, .16); }
.usuario-tile:active { transform: scale(.98); }
.usuario-tile .avatar { width: 88px; height: 88px; font-size: 30px; }
.usuario-tile strong, .usuario-otro strong { font-size: 18px; }
.rol-chip { padding: 4px 12px; border-radius: 999px; background: var(--superficie-2); color: var(--tinta-2, #33434F); font-size: 13px; font-weight: 600; }
.rol-chip.admin { background: var(--petroleo-claro); color: var(--azul-texto); }
.usuario-otro { border: 2px dashed var(--linea-2); background: transparent; color: var(--tinta-3); }
.usuario-otro:hover { border-color: var(--petroleo); color: var(--tinta); }
.usuario-otro .avatar { width: 88px; height: 88px; background: var(--superficie-2); color: var(--tinta-3); }
.usuario-otro .avatar svg { width: 34px; height: 34px; }
.pin-cab .avatar.grande { width: 88px; height: 88px; font-size: 30px; }
@media (max-width: 860px) {
  .acceso { grid-template-columns: minmax(0, 1fr); }
  .acceso-lado { padding: 24px; gap: 16px; }
  .acceso-lado .reloj-hora { font-size: 56px; }
  .acceso-panel { padding: 24px 20px 32px; }
}
@media (max-width: 640px) {
  .acceso-estado { display: none; }
  .acceso-titulo h2 { font-size: 26px; }
  .usuarios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .usuario-tile, .usuario-otro { min-height: 168px; padding: 18px 10px; }
  .usuario-tile .avatar, .usuario-otro .avatar { width: 68px; height: 68px; font-size: 24px; }
}

/* Sin conexión con el servidor: indicador rojo, también cuando solo se ve el ícono */
.estado-sync.sin-red { border-color: #E5574A; background: rgba(229, 87, 74, .14); color: #FFD9D4; }
.estado-sync.sin-red svg { color: #FF6B5E; }
.estado-sync.en-linea { background: transparent; }
.acceso-estado .punto.sin-red { background: #FF6B5E; }

/* Sin internet, pero el servidor del local responde: ámbar */
.estado-sync.sin-internet { border-color: #E3A04A; background: rgba(240, 164, 58, .14); color: #FFE7C2; }
.estado-sync.sin-internet svg { color: #F0A43A; }
.acceso-estado .punto.sin-internet { background: #F0A43A; }

/* Descuentos y presentaciones en la caja */
.linea-desc { display: block; font-size: 12px; font-weight: 600; color: var(--verde-texto, #176538); }
.enlace-desc { padding: 2px 0; border: 0; background: transparent; color: var(--petroleo); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fila-descuento span:last-child { color: var(--verde-texto, #176538); font-weight: 700; }
.presentaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.presentacion { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 88px; padding: 14px; border: 1px solid var(--linea-2); border-radius: 14px; background: var(--blanco); font: inherit; font-weight: 600; text-align: left; cursor: pointer; color: var(--tinta); }
.presentacion:hover { border-color: var(--petroleo); }
.presentacion strong { font-size: 18px; font-variant-numeric: tabular-nums; margin-top: auto; }
.p-precio small { font-size: 12px; font-weight: 500; color: var(--tinta-3); }
.presentaciones-editor { border: 1px solid var(--linea); border-radius: 12px; padding: 10px 14px; }
.presentaciones-editor summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.presentaciones-editor[open] { display: flex; flex-direction: column; gap: 10px; }
.pres-fila { display: grid; grid-template-columns: 1.4fr 0.7fr 0.8fr 1.2fr auto; gap: 8px; align-items: end; }
@media (max-width: 760px) { .pres-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Reportes: encabezado con botón y ventas por hora */
.cabecera-seccion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cabecera-seccion select { width: auto; }
.horas { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 6px; align-items: end; height: 200px; padding: 12px; border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco); }
.hora { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.hora-barra { width: 100%; min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--petroleo); }
.hora strong { font-size: 10px; color: var(--tinta-3); white-space: nowrap; }
.hora span:last-child { font-size: 11px; color: var(--tinta-3); }
@media (max-width: 640px) { .horas { overflow-x: auto; grid-template-columns: repeat(17, 34px); } }

/* Menú inferior (tablet vertical y teléfono): el área que se desplaza termina encima del menú,
   así ningún botón queda tapado por él. */
@media (max-width: 900px) {
  .app { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; height: 100dvh; }
  .vista { padding-bottom: 24px; scroll-padding-bottom: 24px; }
  #avisos { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* Ticket: si no cabe todo (pantalla baja o letra grande), el ticket se desplaza
   y el botón Cobrar queda fijo abajo, siempre visible. */
.ticket { overflow-y: auto; overscroll-behavior: contain; }
.lineas { flex: 1 0 auto; min-height: 72px; overflow: visible; }
.totales { flex: none; }
.btn-cobrar { position: sticky; bottom: 0; z-index: 2; flex: none; box-shadow: 0 -10px 18px var(--blanco); }
@media (max-height: 760px) and (min-width: 701px) {
  .ticket-cab { gap: 8px; padding: 10px 12px; }
  .ticket-cab .cliente-btn { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
  .ticket-cab .segmentos button, .tarifa-sel { min-height: 40px; }
  .tarifa-sel select { min-height: 34px; }
  .totales { padding: 6px 12px; font-size: 13px; }
  .btn-cobrar { min-height: 56px; }
  .btn-cobrar .monto { font-size: 22px; }
  .vista { padding-top: 12px; padding-bottom: 12px; }
}
.p-precio { white-space: nowrap; }

/* Franja de búsqueda y filtros: separada de lo que tiene arriba, y todos sus controles de la misma altura. */
:not(.cabecera) + .herramientas { margin-top: 16px; }
.herramientas { align-items: stretch; }
.herramientas > input, .herramientas > select, .herramientas .segmentos, .herramientas > .btn, .herramientas > .casilla { min-height: 46px; }
.herramientas .segmentos button { min-height: 44px; }
.herramientas > .separador { align-self: center; }
.tramos { margin-bottom: 2px; }

/* Como app: sin zoom (ni con dos dedos ni con doble toque), sin «rebote» al deslizar, y sin el resaltado azul al tocar. */
/* Sin zoom en ningún elemento: cada zona que se desplaza por dentro necesita su propio bloqueo
   (no se hereda), así que se aplica a todos. pan-x pan-y deja desplazar pero no pellizcar ni hacer doble toque. */
*, *::before, *::after { touch-action: pan-x pan-y; }
html { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }

/* La página entera queda fija al tamaño exacto de la pantalla; solo se desplaza el contenido por dentro.
   Así la barra de arriba nunca se esconde (en iPhone, 100dvh puede medir más que la pantalla). */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
#raiz { height: 100%; }
/* Solo la pantalla de entrada (usuarios, PIN, correo) se desplaza dentro de #raiz; en iPhone, un contenedor
   con desplazamiento propio cambia cómo se ubican los elementos fijos (menú, ticket), por eso no se usa en la app. */
#raiz.desplazable { overflow-y: auto; overscroll-behavior: none; }
.app { height: 100%; }
@media (max-width: 900px) { .app { height: 100%; } }

/* Cambios rechazados en la ventana de Sincronizar */
.lista-errores { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 32vh; overflow-y: auto; }
.lista-errores li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--superficie-2); font-size: 14px; }
.lista-errores span { color: var(--tinta-3); font-size: 13px; }

/* ---------- Traslados ---------- */
.fila-traslado { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fila-traslado .campo { flex: 1 1 200px; margin: 0; }
.fila-traslado #invertir { min-height: 46px; font-size: 20px; padding: 0 16px; }
.escaner-traslado { margin-bottom: 14px; }
.escaner-traslado input { min-height: 56px; font-size: 18px; }
.lista-coincidencias { display: flex; flex-wrap: wrap; gap: 8px; }
input.cant-traslado { width: 120px; max-width: 120px; text-align: right; min-height: 44px; }
tr.fila-alerta td { background: color-mix(in srgb, var(--rojo, #c0392b) 8%, transparent); }
#pie { margin-top: 14px; }

/* ---------- Ventas en vivo ---------- */
.panel-resumen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.panel-resumen .destacado strong { font-size: 28px; color: var(--petroleo); }
.titulo-seccion { font-size: 17px; margin: 22px 0 10px; }
.panel-terminales { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.panel-terminal-cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.panel-terminal-total { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.panel-lineas { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; }
.panel-lineas .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Aviso de reposición después de una venta ---------- */
.reposicion {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 58;
  width: min(430px, calc(100vw - 32px)); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  background: #FFF7E6; color: #5A3A00; border: 1px solid #F0C36D; border-left: 8px solid #E09B12; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(10, 17, 22, .28); animation: reposicion-entra .35s cubic-bezier(.2, 1.3, .4, 1);
}
html[data-tema="oscuro"] .reposicion { background: #3A2A08; color: #FFE2A8; border-color: #8A6418; }
.reposicion-cab { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.reposicion-cab strong { flex: 1; }
.reposicion-icono { font-size: 22px; animation: reposicion-latido 1.4s ease-in-out 3; }
.reposicion-cerrar { color: inherit; }
.reposicion-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; }
.reposicion-lista li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .55); }
html[data-tema="oscuro"] .reposicion-lista li { background: rgba(0, 0, 0, .2); }
.reposicion-nombre { font-weight: 700; }
.reposicion-quedan { font-weight: 700; text-align: right; }
.reposicion-quedan.agotado { color: #B3261E; }
.reposicion-bodega { grid-column: 1 / -1; font-size: 14px; }
.reposicion-nota { margin: 0; font-size: 14px; }
.reposicion .btn-primario { width: 100%; min-height: 50px; font-size: 16px; }
@keyframes reposicion-entra { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes reposicion-latido { 50% { transform: scale(1.25); } }
@media (max-width: 900px) { .reposicion { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
/* En computadora y tablet horizontal: a la derecha del menú y por encima de los mensajes de abajo. */
@media (min-width: 901px) { .reposicion { left: 112px; bottom: 84px; } }

/* Teléfono y tablet vertical */
@media (max-width: 900px) {
  /* Si el iPhone deja una franja bajo la página, se ve del color del menú y no en blanco. */
  html { background-color: #17242E; }
  body { background-color: var(--papel); }
  .menu { padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
}
/* Con el ticket abierto a pantalla completa en el teléfono, el menú de abajo se oculta para que se vea «Cobrar». */
@media (max-width: 700px) {
  body.ticket-movil .menu { display: none; }
  body.ticket-movil .ticket { z-index: 45; }
}