/* hotel-ops: sistema de diseno pequeno, mobile-first, sin dependencias.
   Paleta calida y sobria (arena, terracota). Modo claro/oscuro automatico.
   Sin estilos en linea (CSP style-src 'self'): todo se hace con clases. Breakpoints 600 / 960. */
:root {
  /* colores */
  --bg: #fbf7f0; --surf: #ffffff; --surf-2: #f5eee3; --txt: #2b2118; --muted: #65574a; --borde: #e2d6c4;
  --pri: #a0471f; --pri-osc: #7f3716; --pri-txt: #ffffff; --pri-bg: #f7e8dc;
  --ok: #1d7a3b; --ok-bg: #e2f3e7; --err: #b3261e; --err-bg: #fce9e7; --warn: #805200; --warn-bg: #fff0cc; --info: #20566e; --info-bg: #e2f0f6;
  --gris-bg: #ece5d9;
  /* espacios, radios, sombras */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem;
  --radio: 14px; --radio-s: 10px; --sombra: 0 1px 2px rgba(60, 40, 20, .08), 0 2px 8px rgba(60, 40, 20, .06);
  --tap: 52px; --nav-h: 64px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #19140f; --surf: #251e17; --surf-2: #2e251c; --txt: #f3ebe0; --muted: #c0b1a0; --borde: #43372b;
    --pri: #f0a46d; --pri-osc: #f7bf94; --pri-txt: #2a1608; --pri-bg: #3a281b;
    --ok: #6fd58a; --ok-bg: #17301f; --err: #ff9d94; --err-bg: #3c1d1a; --warn: #ffcb66; --warn-bg: #382a0e; --info: #8fcde6; --info-bg: #14303c;
    --gris-bg: #342b21; --sombra: 0 1px 2px rgba(0, 0, 0, .4);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.5 var(--fuente); color: var(--txt); background: var(--bg); min-height: 100vh; }
h1 { font-size: 1.5rem; line-height: 1.2; margin: 0; } h2 { font-size: 1.2rem; margin: 0 0 var(--e2); } h3 { font-size: 1.05rem; margin: 0 0 var(--e1); }
p { margin: 0 0 var(--e2); } a { color: var(--pri); }
:focus-visible { outline: 3px solid var(--pri); outline-offset: 2px; }
.sr-only, .saltar:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--surf); padding: .6rem 1rem; border-radius: 8px; }
[hidden] { display: none !important; }
.ico { flex: none; vertical-align: middle; }

/* ---------- Estructura ---------- */
.cabecera { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: .6rem var(--e4); background: var(--surf); border-bottom: 1px solid var(--borde); }
.cabecera .marca { font-weight: 800; color: var(--pri); font-size: 1.1rem; }
.cabecera .usuario { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--muted); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--pri-bg); color: var(--pri); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
#app { max-width: 960px; margin: 0 auto; padding: var(--e4) var(--e4) calc(var(--nav-h) + 2.5rem); outline: none; }
.nav-inf { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; background: var(--surf); border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom); }
.nav-inf a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--nav-h); font-size: .85rem; color: var(--muted); text-decoration: none; padding: 6px 2px; position: relative; }
.nav-inf a[aria-current="page"] { color: var(--pri); font-weight: 700; }
.nav-inf a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--pri); }
body.sin-nav .nav-inf, body.kiosko .nav-inf, body.kiosko .cabecera { display: none; }
body.sin-nav #app, body.kiosko #app { padding-bottom: var(--e5); }
.aviso-mock, .aviso-red { background: var(--warn-bg); color: var(--warn); text-align: center; font-size: .9rem; padding: .3rem var(--e2); font-weight: 600; }
.aviso-red { position: sticky; top: 0; z-index: 30; display: flex; justify-content: center; align-items: center; gap: .4rem; }
@media (min-width: 960px) {
  /* escritorio: la navegacion pasa a una barra lateral */
  .nav-inf { top: 0; bottom: 0; right: auto; width: 220px; flex-direction: column; justify-content: flex-start; gap: var(--e1); padding: 96px var(--e3) var(--e3); border-top: 0; border-right: 1px solid var(--borde); }
  .nav-inf a { flex: none; flex-direction: row; justify-content: flex-start; gap: .75rem; min-height: 52px; padding: 0 var(--e4); border-radius: var(--radio-s); font-size: 1rem; }
  .nav-inf a[aria-current="page"] { background: var(--pri-bg); } .nav-inf a[aria-current="page"]::before { display: none; }
  body:not(.sin-nav):not(.kiosko) #app { margin: 0 0 0 220px; max-width: none; }
  #app { padding-bottom: var(--e6); }
  body:not(.sin-nav):not(.kiosko) #app > * { max-width: 880px; margin-left: auto; margin-right: auto; }
  #toasts { bottom: 24px; }
}

/* ---------- Titulos y bloques ---------- */
.barra-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-bottom: var(--e4); }
.barra-pagina h1 { flex: 1; min-width: 0; }
.barra-acc { display: flex; flex-wrap: wrap; gap: var(--e2); }
.volver { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -.5rem; border-radius: 50%; color: var(--txt); }
.volver:hover { background: var(--gris-bg); }
.saludo { margin: var(--e2) 0 var(--e4); } .saludo h1 { font-size: 1.7rem; } .saludo p { color: var(--muted); margin: .15rem 0 0; }
.seccion { margin-bottom: var(--e5); } .seccion > h2 { color: var(--muted); font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
.tarjeta { background: var(--surf); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e4); margin-bottom: var(--e3); }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e2); margin-bottom: var(--e1); }
.tarjeta-cab strong { font-size: 1.05rem; }
.grid { display: grid; gap: var(--e3); } .grid-2 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 960px) { .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); align-items: start; } }
.fila { display: flex; justify-content: space-between; gap: var(--e4); padding: .2rem 0; font-size: 1rem; }
.fila-et { color: var(--muted); } .fila-val { text-align: right; word-break: break-word; }
.ayuda { color: var(--muted); font-size: .95rem; margin: .2rem 0 var(--e2); }
.nota { color: var(--muted); font-style: italic; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.centro { text-align: center; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap); padding: .5rem 1.2rem; border-radius: var(--radio-s); border: 1.5px solid var(--borde); background: var(--surf); color: var(--txt); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; touch-action: manipulation; }
.btn:hover { border-color: var(--pri); }
.btn[disabled] { opacity: .65; cursor: not-allowed; }
.btn[aria-busy="true"]::before { content: ""; width: 1.1em; height: 1.1em; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .8s linear infinite; }
.btn-pri { background: var(--pri); color: var(--pri-txt); border-color: var(--pri); } .btn-pri:hover { background: var(--pri-osc); border-color: var(--pri-osc); }
.btn-peligro { background: var(--err); color: #fff; border-color: var(--err); }
.btn-sec { background: var(--surf); }
.btn-suave { background: transparent; border-color: transparent; color: var(--pri); }
.btn-bloque { display: flex; width: 100%; }
.btn-grande { min-height: 68px; font-size: 1.2rem; }
.btn-chico { min-height: 48px; padding: .3rem .9rem; font-size: 1rem; }

/* ---------- Formularios ---------- */
.campo { margin-bottom: var(--e4); } .campo label { display: block; font-weight: 700; margin-bottom: .3rem; }
.campo input:not([type="checkbox"]), .campo select, .campo textarea { width: 100%; min-height: var(--tap); padding: .6rem .8rem; font: inherit; color: var(--txt); background: var(--surf); border: 1.5px solid var(--borde); border-radius: var(--radio-s); }
.campo textarea { min-height: 96px; }
.campo [aria-invalid="true"] { border-color: var(--err); border-width: 2px; }
.campo-error { color: var(--err); font-size: .95rem; font-weight: 600; margin: .25rem 0 0; } .campo-error:empty { display: none; }
.req { color: var(--err); }
.campo-check { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; min-height: var(--tap); }
.campo-check input { width: 28px; height: 28px; accent-color: var(--pri); } .campo-check label { margin: 0; flex: 1; font-weight: 600; } .campo-check .campo-error { flex-basis: 100%; }
.campo-pass { position: relative; } .campo-pass input { padding-right: 3.6rem !important; }
.ver-pass { position: absolute; top: 0; right: 0; width: var(--tap); height: var(--tap); background: transparent; border: 0; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.req-fila { display: grid; gap: 0 var(--e3); } @media (min-width: 600px) { .req-fila { grid-template-columns: 1fr 1fr; } }
.etiqueta { display: block; font-weight: 700; margin: 0 0 .3rem; }
.opciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
.btn-op { min-height: var(--tap); padding: .4rem 1.1rem; border-radius: 999px; border: 2px solid var(--borde); background: var(--surf); color: var(--txt); font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.btn-op.activo { border-color: var(--pri); background: var(--pri); color: var(--pri-txt); }
.stepper { display: inline-flex; align-items: center; gap: var(--e2); }
.stepper .btn { width: var(--tap); padding: 0; font-size: 1.5rem; }
.step-valor { width: 4rem; min-height: var(--tap); text-align: center; font: inherit; font-size: 1.25rem; font-weight: 700; border: 1.5px solid var(--borde); border-radius: var(--radio-s); background: var(--surf); color: var(--txt); }
.campo .stepper .step-valor { width: 4rem; padding: 0; }
.mas-opc { margin: 0 0 var(--e4); border: 1.5px dashed var(--borde); border-radius: var(--radio-s); padding: 0 var(--e3); }
.mas-opc > summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 700; color: var(--pri); cursor: pointer; }
.mas-opc[open] > summary { margin-bottom: var(--e2); }
.barra-accion { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--e2)); z-index: 10; background: var(--surf); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 4px 16px rgba(60, 40, 20, .18); padding: var(--e3); margin-top: var(--e4); }
.barra-accion { display: flex; align-items: center; gap: var(--e3); }
.barra-info { flex: 1; min-width: 0; } .barra-info .total-vivo { margin: 0; font-size: 1.45rem; } .barra-info .ayuda { margin: 0; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-accion .btn { flex: 0 0 auto; min-width: 9.5rem; min-height: 60px; }
@media (min-width: 960px) { .barra-accion { bottom: var(--e4); } }
.total-vivo { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.6rem; font-weight: 800; margin: var(--e2) 0; }
.total-vivo small { font-size: 1rem; font-weight: 600; color: var(--muted); }

/* ---------- Insignias, mensajes, estados ---------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px; font-size: .9rem; font-weight: 700; background: var(--gris-bg); white-space: nowrap; }
.sem-verde, .b-ok { background: var(--ok-bg); color: var(--ok); }
.sem-rojo, .b-err { background: var(--err-bg); color: var(--err); }
.sem-amarillo, .b-warn { background: var(--warn-bg); color: var(--warn); }
.sem-gris { background: var(--gris-bg); color: var(--muted); }
.b-info { background: var(--info-bg); color: var(--info); }
.banner { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e3) var(--e4); border-radius: var(--radio-s); margin-bottom: var(--e3); background: var(--info-bg); color: var(--txt); border: 1px solid transparent; }
.banner .ico { margin-top: 2px; } .banner > div { flex: 1; } .banner p:last-child { margin-bottom: 0; }
.banner-ok { background: var(--ok-bg); border-color: var(--ok); } .banner-warn, .fila-geo { background: var(--warn-bg); border-color: var(--warn); } .banner-err { background: var(--err-bg); border-color: var(--err); }
.fila-geo { border: 1px solid var(--warn); color: var(--txt); border-radius: var(--radio-s); padding: var(--e3) var(--e4); margin-bottom: var(--e3); }
.estado { text-align: center; padding: var(--e5) var(--e4); color: var(--muted); }
.estado .circulo { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--e3); display: flex; align-items: center; justify-content: center; background: var(--pri-bg); color: var(--pri); }
.estado p { font-size: 1.05rem; } .estado .btn { margin-top: var(--e2); }
.estado-error { color: var(--txt); } .estado-error .circulo { background: var(--err-bg); color: var(--err); }
.estado-carga { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.spinner { width: 22px; height: 22px; border: 3px solid var(--borde); border-top-color: var(--pri); border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes brillo { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.esq { border-radius: 8px; background: linear-gradient(90deg, var(--gris-bg) 25%, var(--surf-2) 50%, var(--gris-bg) 75%); background-size: 200% 100%; animation: brillo 1.4s ease-in-out infinite; }
.esq-tarjeta { height: 92px; border-radius: var(--radio); margin-bottom: var(--e3); }
.esq-linea { height: 16px; margin-bottom: var(--e2); width: 100%; } .esq-corta { width: 55%; } .esq-media { width: 80%; }
.esq-titulo { height: 28px; width: 45%; margin-bottom: var(--e4); }
@media (prefers-reduced-motion: reduce) { .spinner, .esq, .btn[aria-busy="true"]::before { animation-duration: 3s; } }

#toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + 12px); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: .4rem; pointer-events: none; padding: 0 var(--e4); }
.toast { pointer-events: auto; max-width: 560px; padding: .75rem 1rem; border-radius: var(--radio-s); background: var(--ok); color: #fff; box-shadow: var(--sombra); font-weight: 700; }
@media (prefers-color-scheme: dark) { .toast { color: #0d2213; } }
.toast-error { background: var(--err); } .toast-info { background: var(--info); }
@media (prefers-color-scheme: dark) { .toast-error, .toast-info { color: #1a1a1a; } }

.modal-fondo { position: fixed; inset: 0; z-index: 80; background: rgba(30, 20, 10, .55); display: flex; align-items: flex-end; justify-content: center; }
.modal { background: var(--surf); width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; border-radius: 20px 20px 0 0; padding: var(--e5) var(--e4) var(--e4); }
@media (min-width: 600px) { .modal-fondo { align-items: center; } .modal { border-radius: 20px; } }

/* ---------- Inicio: tarjetas de tareas ---------- */
.tareas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); margin-bottom: var(--e5); }
@media (min-width: 960px) { .tareas { grid-template-columns: repeat(3, 1fr); } }
.tarea { display: flex; flex-direction: column; gap: .35rem; min-height: 132px; padding: var(--e4); border-radius: var(--radio); background: var(--surf); border: 1px solid var(--borde); box-shadow: var(--sombra); color: var(--txt); text-decoration: none; }
.tarea:hover { border-color: var(--pri); } .tarea:active { transform: scale(.985); }
.tarea .circulo { width: 48px; height: 48px; border-radius: 14px; background: var(--pri-bg); color: var(--pri); display: flex; align-items: center; justify-content: center; }
.tarea strong { font-size: 1.1rem; line-height: 1.25; } .tarea span.sub { color: var(--muted); font-size: .95rem; line-height: 1.3; }
.tarea-principal { grid-column: 1 / -1; background: var(--pri); border-color: var(--pri); color: var(--pri-txt); flex-direction: row; align-items: center; gap: var(--e4); min-height: 112px; }
.tarea-principal:hover { background: var(--pri-osc); border-color: var(--pri-osc); }
.tarea-principal .circulo { background: rgba(255, 255, 255, .2); color: inherit; width: 60px; height: 60px; }
.tarea-principal span.sub { color: inherit; opacity: .92; } .tarea-principal strong { font-size: 1.3rem; }
.tarea-principal .texto { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.resumen-dia { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); margin: var(--e2) 0 var(--e3); }
.resumen-dia div { background: var(--surf-2); border-radius: var(--radio-s); padding: var(--e2); text-align: center; }
.resumen-dia b { display: block; font-size: 1.6rem; line-height: 1.1; } .resumen-dia span { font-size: .9rem; color: var(--muted); }

/* ---------- Marcar asistencia ---------- */
.marcar { text-align: center; }
.reloj-grande { font-size: 3.4rem; font-weight: 800; letter-spacing: .02em; line-height: 1; font-variant-numeric: tabular-nums; margin: var(--e2) 0 .2rem; }
.fecha-grande { color: var(--muted); margin-bottom: var(--e3); } .fecha-grande::first-letter { text-transform: uppercase; }
.estado-hoy { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem; border-radius: 999px; font-weight: 700; background: var(--gris-bg); margin-bottom: var(--e4); }
.estado-hoy.verde { background: var(--ok-bg); color: var(--ok); } .estado-hoy.amarillo { background: var(--warn-bg); color: var(--warn); }
.btn-marca { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; width: min(78vw, 280px); height: min(78vw, 280px); margin: var(--e2) auto var(--e4); border-radius: 50%; border: 0; background: var(--pri); color: var(--pri-txt); font: inherit; font-size: 1.6rem; font-weight: 800; cursor: pointer; box-shadow: 0 8px 24px rgba(160, 71, 31, .35); touch-action: manipulation; }
.btn-marca:active { transform: scale(.97); } .btn-marca[disabled] { opacity: .75; cursor: progress; }
.btn-marca.salida { background: var(--ok); } @media (prefers-color-scheme: dark) { .btn-marca.salida { color: #0d2213; } .btn-marca { box-shadow: none; } }
.btn-marca.refri { background: var(--info); } @media (prefers-color-scheme: dark) { .btn-marca.refri { color: #0b1c24; } }
.btn-marca .spinner { border-color: rgba(255, 255, 255, .5); border-top-color: #fff; width: 34px; height: 34px; }
.por-que { display: flex; gap: var(--e3); align-items: flex-start; text-align: left; background: var(--info-bg); border-radius: var(--radio-s); padding: var(--e3) var(--e4); margin: var(--e3) 0; }
.por-que p { margin: 0; }
.pasos-ayuda { text-align: left; padding-left: 0; list-style: none; counter-reset: paso; margin: var(--e2) 0; }
.pasos-ayuda li { counter-increment: paso; display: flex; gap: var(--e3); align-items: flex-start; margin-bottom: var(--e2); }
.pasos-ayuda li::before { content: counter(paso); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pri); color: var(--pri-txt); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.linea-tiempo { list-style: none; padding: 0; margin: 0 0 var(--e3); text-align: left; }
.linea-tiempo li { display: flex; justify-content: space-between; padding: .45rem 0; border-bottom: 1px solid var(--borde); }
.linea-tiempo li:last-child { border-bottom: 0; }
.exito { text-align: center; padding: var(--e5) var(--e4); }
.exito .circulo { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto var(--e4); display: flex; align-items: center; justify-content: center; background: var(--ok-bg); color: var(--ok); }
.exito h2 { font-size: 1.5rem; margin-bottom: var(--e2); } .exito .acciones { justify-content: center; flex-direction: column; align-items: stretch; }
@media (min-width: 600px) { .exito .acciones { flex-direction: row; justify-content: center; } }

/* ---------- Personas (asistencia admin) ---------- */
.persona { border-left: 6px solid var(--borde); }
.persona.sem-verde-b { border-left-color: var(--ok); } .persona.sem-rojo-b { border-left-color: var(--err); } .persona.sem-amarillo-b { border-left-color: var(--warn); } .persona.sem-gris-b { border-left-color: var(--muted); }
.persona-datos { display: flex; flex-wrap: wrap; gap: .25rem var(--e4); color: var(--muted); margin: .2rem 0 0; }
.persona-datos b { color: var(--txt); }

/* ---------- Listas de productos, ventas, comandas ---------- */
.rejilla-prod { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); margin-bottom: var(--e4); max-height: 46vh; overflow: auto; padding: 2px; }
@media (min-width: 600px) { .rejilla-prod { grid-template-columns: repeat(3, 1fr); } }
.item-prod { display: flex; flex-direction: column; justify-content: space-between; gap: .25rem; min-height: 84px; padding: var(--e3); background: var(--surf); border: 2px solid var(--borde); border-radius: var(--radio-s); font: inherit; color: var(--txt); text-align: left; cursor: pointer; }
.item-prod .precio { color: var(--muted); font-weight: 700; }
.item-prod[aria-pressed="true"] { border-color: var(--pri); background: var(--pri-bg); }
.envio { display: flex; align-items: center; gap: var(--e3); padding: var(--e3); background: var(--surf); border: 1px solid var(--borde); border-radius: var(--radio-s); margin-bottom: var(--e2); }
.envio > div { flex: 1; min-width: 0; } .envio p { margin: 0; } .envio .ico-estado { flex: none; display: flex; }
.envio-ok .ico-estado { color: var(--ok); } .envio-err { border-color: var(--err); background: var(--err-bg); } .envio-err .ico-estado { color: var(--err); }
.cmd-pendiente { border-left: 6px solid var(--warn); } .cmd-prep { border-left: 6px solid var(--info); } .cmd-listo { border-left: 6px solid var(--ok); }
.cmd-lineas { margin: .3rem 0; padding-left: 1.2rem; } .cmd-lineas li { margin: .15rem 0; }
.cola { display: grid; gap: var(--e3); } @media (min-width: 600px) { .cola { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .cola { grid-template-columns: repeat(3, 1fr); } }
.plato { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); }
.plato .nombre { flex: 1 1 140px; } .plato .nombre b { display: block; } .plato .nombre span { color: var(--muted); }
.cat-titulo { margin: var(--e4) 0 var(--e2); color: var(--muted); font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.nota-in { width: 100%; min-height: 48px; margin-top: var(--e2); padding: .4rem .7rem; font: inherit; color: var(--txt); background: var(--surf); border: 1.5px solid var(--borde); border-radius: var(--radio-s); }

/* ---------- Menu "Mas" ---------- */
.lista-enlaces { display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin-bottom: var(--e4); }
.lista-enlaces a, .lista-enlaces button { display: flex; align-items: center; gap: var(--e3); min-height: 56px; padding: .5rem var(--e4); color: var(--txt); text-decoration: none; border: 0; border-bottom: 1px solid var(--borde); background: transparent; font: inherit; font-weight: 600; text-align: left; cursor: pointer; width: 100%; }
.lista-enlaces > :last-child { border-bottom: 0; } .lista-enlaces a span, .lista-enlaces button span { flex: 1; }
.lista-enlaces .ico:last-child { color: var(--muted); }
.avanzado { margin-top: var(--e5); } .avanzado > summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 700; color: var(--muted); cursor: pointer; }

/* ---------- Tablas: tarjetas en movil, tabla en pantallas grandes ---------- */
.tabla-wrap { display: none; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; background: var(--surf); }
.tabla th, .tabla td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--borde); } .tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla thead th { background: var(--gris-bg); position: sticky; top: 0; }
.lista-cards .tarjeta { padding: var(--e3) var(--e4); }
@media (min-width: 960px) { .tabla-wrap { display: block; } .lista-cards { display: none; } }

.filtros { display: grid; gap: 0 var(--e3); grid-template-columns: 1fr; align-items: end; } @media (min-width: 600px) { .filtros { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .filtros { grid-template-columns: repeat(3, 1fr); } }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); max-width: 340px; margin: var(--e4) auto; }
.pin-pad .btn { min-height: 72px; font-size: 1.6rem; }
.pin-puntos { text-align: center; font-size: 2rem; letter-spacing: .6rem; min-height: 2.6rem; }
.kiosko-lista { display: grid; grid-template-columns: 1fr; gap: var(--e3); } @media (min-width: 600px) { .kiosko-lista { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .kiosko-lista { grid-template-columns: repeat(3, 1fr); } }
.kiosko-lista .btn { min-height: 76px; justify-content: space-between; text-align: left; }
.confirmacion-grande { text-align: center; font-size: 1.6rem; padding: var(--e5) var(--e4); }

/* ---------- Ingreso ---------- */
.login-caja { max-width: 420px; margin: 5vh auto 0; }
.login-marca { text-align: center; margin-bottom: var(--e5); }
.login-marca .logo { width: 72px; height: 72px; border-radius: 20px; background: var(--pri); color: var(--pri-txt); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--e3); }
.login-marca h1 { font-size: 1.7rem; } .login-marca p { color: var(--muted); }

/* ---------- Bienvenida ---------- */
.bienvenida { text-align: center; }
.bienvenida .circulo { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto var(--e4); background: var(--pri-bg); color: var(--pri); display: flex; align-items: center; justify-content: center; }
.puntitos { display: flex; justify-content: center; gap: .5rem; margin: var(--e3) 0; }
.puntitos span { width: 10px; height: 10px; border-radius: 50%; background: var(--borde); } .puntitos span.act { background: var(--pri); }

.imprimir-solo { display: none; }
@media print { .cabecera, .nav-inf, .barra-acc, #toasts, .no-imprimir, .volver { display: none !important; } body { background: #fff; color: #000; } .imprimir-solo { display: block; } .tabla-wrap { display: block; } .lista-cards { display: none; } }