/*
    El comandero.

    Misma identidad que el resto de Andahost, pero con las prioridades de una
    pantalla de bar y no de una oficina:

    · Todo se toca con el dedo. Nada por debajo de 48 px de alto, y las mesas
      bastante más: se pulsan de pie, con prisa y a veces con las manos mojadas.
    · Nada de hover como única señal. En una tablet no existe.
    · Contraste alto. Una terraza a mediodía es el peor sitio del mundo para
      mirar una pantalla, y ahí es donde se usa.
    · Sin animaciones de adorno. Lo que se mueve distrae, y aquí se trabaja.
*/

:root {
    --cian: #12a4fa;
    --indigo: #5f45e6;
    --purpura: #7d2cc9;

    --fondo: #0b0e17;
    --fondo-2: #111624;
    --fondo-3: #182034;
    --borde: #232c44;
    --borde-claro: #2f3a56;

    --texto: #eef1f8;
    --texto-2: #a8b2ca;
    --texto-3: #6f7b96;

    --libre: #35c98a;
    --ocupada: #f2555a;
    --aviso: #f5a524;

    --r: 12px;
    --r-g: 18px;

    --tipo: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--tipo);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* En una pantalla de sala, seleccionar texto sin querer solo estorba. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

a { color: var(--cian); text-decoration: none; }

h1 { margin: 0 0 6px; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }

p { margin: 0 0 12px; }

.apagado { color: var(--texto-3); font-size: 14.5px; }

.oculto {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--cian); outline-offset: 3px; border-radius: 6px; }

.host {
    background: linear-gradient(90deg, var(--cian), var(--indigo), var(--purpura));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --------------------------------------------------------------- Entrada */

body.centrado {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(95, 69, 230, .22), transparent 70%),
        var(--fondo);
}

.entrada { width: 100%; max-width: 460px; }

.entrada__marca {
    margin: 0 0 20px;
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.entrada__pie {
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--texto-3);
}

.tarjeta {
    padding: 28px 26px 24px;
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
}

.campo { display: block; margin: 20px 0; }

/*
    El campo del código y el de la clave se escriben mirando el teclado, no la
    pantalla: grandes, centrados y con las letras separadas para no perder la
    cuenta de lo que se lleva escrito.
*/
.codigo {
    width: 100%;
    padding: 16px 14px;
    background: var(--fondo);
    border: 2px solid var(--borde-claro);
    border-radius: var(--r);
    color: var(--texto);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 30px;
    letter-spacing: .18em;
    text-align: center;
    text-transform: uppercase;
}
.codigo::placeholder { color: var(--texto-3); letter-spacing: .18em; }
.codigo:focus { border-color: var(--cian); outline: none; }

input[type="password"].codigo { letter-spacing: .3em; }

.error {
    display: block;
    margin-top: 10px;
    font-size: 14.5px;
    font-style: normal;
    color: var(--ocupada);
    text-align: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 22px;
    background: linear-gradient(90deg, var(--indigo), var(--purpura));
    border: 0;
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.btn:active { filter: brightness(1.15); }

.btn--grande { width: 100%; min-height: 58px; font-size: 18px; }

.btn--fantasma {
    background: transparent;
    border: 1px solid var(--borde-claro);
    color: var(--texto-2);
    font-size: 15px;
    padding: 10px 18px;
}

/* Elegir quién eres */

.grupo {
    margin: 22px 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-3);
}

.personas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.persona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    background: var(--fondo-3);
    border: 1px solid var(--borde-claro);
    border-radius: var(--r);
    color: var(--texto);
}
.persona:active { border-color: var(--cian); }

.persona__inicial {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--indigo), var(--purpura));
    font-size: 20px;
    font-weight: 800;
}

.persona__nombre { font-size: 15px; font-weight: 600; }

/* ----------------------------------------------------------- Barra superior */

.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 10px 16px;
    background: var(--fondo-2);
    border-bottom: 1px solid var(--borde);
}

.barra__marca { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--texto); }
.barra__local { font-size: 15px; color: var(--texto-3); }

.barra__yo { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.barra__yo form { margin: 0; }

.quien { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.quien strong { font-size: 15px; }
.quien span { font-size: 12.5px; color: var(--texto-3); }

.pantalla { padding: 18px clamp(14px, 2.5vw, 28px) 40px; }

.aviso {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: var(--r);
    font-size: 15px;
}
.aviso--ok { background: rgba(53, 201, 138, .12); border: 1px solid rgba(53, 201, 138, .35); color: #7ee0b4; }
.aviso--error { background: rgba(242, 85, 90, .12); border: 1px solid rgba(242, 85, 90, .35); color: #ff9296; }

/* ---------------------------------------------------------------- Resumen */

.resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.dato {
    padding: 14px 18px;
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
}
.dato__n {
    display: block;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.dato__de { font-size: 17px; font-weight: 600; color: var(--texto-3); }
.dato__q { display: block; margin-top: 2px; font-size: 13.5px; color: var(--texto-3); }

/* ------------------------------------------------------------------ Zonas */

.zonas {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.zonas::-webkit-scrollbar { display: none; }

.zona-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 48px;
    padding: 11px 20px;
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--texto-2);
    font-size: 16px;
    font-weight: 600;
}
.zona-btn.activa {
    background: var(--fondo-3);
    border-color: var(--color, var(--indigo));
    color: var(--texto);
    box-shadow: inset 0 0 0 1px var(--color, var(--indigo));
}

.recargo {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245, 165, 36, .16);
    color: #f0b45c;
    font-size: 12px;
    font-weight: 700;
}

/* ------------------------------------------------------------------ Plano */

/*
    Las mesas se colocan en porcentaje sobre esta caja. La proporción es fija
    para que una posición guardada signifique siempre lo mismo: si el alto
    dependiera del contenido, mover el navegador movería las mesas.
*/
.plano {
    position: relative;
    aspect-ratio: 16 / 10;
    min-height: 380px;
    background:
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--color-zona) 8%, transparent), transparent 70%),
        var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
    overflow: hidden;
}

.mesa {
    position: absolute;
    /* El punto de anclaje es el centro de la mesa: así el porcentaje guardado
       es dónde está la mesa, no dónde empieza su esquina. */
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 104px;
    min-height: 78px;
    padding: 8px 10px;
    background: var(--fondo-3);
    border: 2px solid var(--libre);
    border-radius: var(--r);
    color: var(--texto);
    text-align: center;
}

.mesa--redonda { border-radius: 50%; width: 90px; min-height: 90px; }
.mesa--rectangular { width: 128px; }

.mesa--ocupada {
    border-color: var(--ocupada);
    background: color-mix(in srgb, var(--ocupada) 14%, var(--fondo-3));
}

.mesa:active { filter: brightness(1.2); }

.mesa__nombre { font-size: 19px; font-weight: 800; line-height: 1.1; }
.mesa__total {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #ff9296;
}
.mesa__pie { font-size: 11.5px; color: var(--texto-3); line-height: 1.3; }
.mesa__espera { color: var(--aviso); }

/* En pantallas estrechas el plano se estira: con menos ancho, más alto, para
   que las mesas no se amontonen unas encima de otras. */
@media (max-width: 700px) {
    .plano { aspect-ratio: 3 / 4; }
    .mesa { width: 86px; min-height: 68px; padding: 6px 8px; }
    .mesa--redonda { width: 76px; min-height: 76px; }
    .mesa--rectangular { width: 100px; }
    .mesa__nombre { font-size: 17px; }
}

/* --------------------------------------------------------------- Leyenda */

.leyenda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--texto-2);
}

.punto {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin-left: 8px;
}
.punto--libre { background: var(--libre); }
.punto--ocupada { background: var(--ocupada); }
.leyenda .punto:first-child { margin-left: 0; }

.vacio {
    padding: 40px 20px;
    text-align: center;
    color: var(--texto-3);
    background: var(--fondo-2);
    border: 1px dashed var(--borde-claro);
    border-radius: var(--r-g);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms; transition-duration: 0.01ms; }
}

/* ==========================================================================
   Las pantallas de trabajo: mesa, cuenta, cocina, carta, sala y central.
   Todo pensado para el dedo; nada por debajo de 48 px de alto.
   ========================================================================== */

.barra__nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.barra__nav::-webkit-scrollbar { display: none; }

.barra__nav a {
    flex: 0 0 auto;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--texto-2);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}
.barra__nav a.activo { background: var(--fondo-3); color: var(--texto); }

.aviso--atencion {
    background: rgba(245, 165, 36, .12);
    border: 1px solid rgba(245, 165, 36, .35);
    color: #f0b45c;
}

/* ------------------------------------------------------ Cabecera de pantalla */

.mesa-cab {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.mesa-cab h1 { font-size: clamp(21px, 3vw, 28px); }
.mesa-cab p { margin: 0; }

.volver {
    flex: 0 0 auto;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--texto-2);
    font-size: 15px;
}

.mesa-cab__total { margin-left: auto; text-align: right; }
.cifra {
    display: block;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/*
   Dos columnas: la cuenta a la izquierda y lo que se toca a la derecha.
   En una tablet en vertical se apilan, con la cuenta arriba: lo primero que se
   mira al llegar a una mesa es lo que ya lleva.
*/
.mesa-cuerpo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

@media (min-width: 900px) {
    .mesa-cuerpo { grid-template-columns: minmax(320px, 0.9fr) 1.3fr; gap: 24px; }
}

.cuenta, .cobro, .bloque {
    padding: 18px 20px;
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
}
.bloque { margin-top: 20px; }

.cuenta h2, .cobro h2, .bloque h2 { margin: 0 0 14px; font-size: 16px; }
h2.sub { margin-top: 26px; }

/* --------------------------------------------------------- Lo que lleva */

.lineas { margin: 0 0 16px; padding: 0; list-style: none; }

.linea {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--borde);
}
.linea:last-child { border-bottom: 0; }

/* Lo que aún no ha salido hacia cocina se distingue: es lo único que todavía
   se puede corregir sin que nadie se entere. */
.linea--pendiente { box-shadow: inset 3px 0 0 var(--aviso); padding-left: 10px; }
.linea--agotado { opacity: .55; }

.linea__cant {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    background: var(--fondo-3);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.linea__que { flex: 1; min-width: 0; display: grid; gap: 2px; }
.linea__que strong { font-size: 15.5px; }
.linea__estado { font-size: 12.5px; color: var(--texto-3); }

.linea__importe {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.quitar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--fondo-3);
    border: 1px solid var(--borde-claro);
    border-radius: 10px;
    color: var(--texto-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.quitar:active { border-color: var(--ocupada); color: var(--ocupada); }

.totales { display: grid; gap: 6px; margin: 0; padding-top: 14px; border-top: 1px solid var(--borde); }
.totales > div { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; }
.totales dt { color: var(--texto-3); }
.totales dd { margin: 0; font-variant-numeric: tabular-nums; }
.totales .total { padding-top: 8px; border-top: 1px solid var(--borde); font-size: 20px; font-weight: 800; }
.totales .total dt { color: var(--texto); }

.acciones-mesa { display: grid; gap: 10px; margin-top: 16px; }
.btn--ancho { width: 100%; }

/* --------------------------------------------------------------- La carta */

.categorias {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }

.cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 48px;
    padding: 11px 18px;
    background: var(--fondo-3);
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--texto-2);
    font-size: 15.5px;
    font-weight: 600;
    white-space: nowrap;
}
.cat-btn.activa {
    border-color: var(--color, var(--indigo));
    color: var(--texto);
    box-shadow: inset 0 0 0 1px var(--color, var(--indigo));
}

/*
   Los botones de producto son el elemento más pulsado de todo el sistema.
   Grandes, con el precio debajo y sin nada más: en una barra no se lee, se
   reconoce.
*/
.rejilla-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
    gap: 10px;
}
.rejilla-productos form { margin: 0; }

.producto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 84px;
    padding: 12px 10px;
    background: var(--fondo-3);
    border: 1px solid var(--borde-claro);
    border-radius: var(--r);
    color: var(--texto);
    font: inherit;
    text-align: center;
    cursor: pointer;
}
.producto:active { border-color: var(--cian); filter: brightness(1.15); }

.producto__nombre { font-size: 15px; font-weight: 700; line-height: 1.2; }
.producto__precio { font-size: 14px; color: var(--texto-2); font-variant-numeric: tabular-nums; }

.producto--agotado { opacity: .45; cursor: not-allowed; }
.producto__agotado {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ocupada);
}

/* ------------------------------------------------------------------ Cobro */

.formulario { display: grid; gap: 2px; }

.form-linea {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.form-linea .campo { flex: 1 1 160px; margin-bottom: 14px; }
.form-linea .campo--corto { flex: 0 1 130px; }
.form-linea .btn { margin-bottom: 14px; }

.campo { display: block; margin: 0 0 14px; }
.campo > span, .campo legend {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-2);
}
.campo small { display: block; margin-top: 6px; font-size: 12px; color: var(--texto-3); }
.campo fieldset, fieldset.campo { border: 0; padding: 0; margin: 0 0 14px; }

input[type="text"], input[type="number"], input[type="tel"], input[type="email"],
input[type="password"], select, textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    background: var(--fondo);
    border: 1px solid var(--borde-claro);
    border-radius: var(--r);
    color: var(--texto);
    font-family: inherit;
    font-size: 16px;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--cian); outline: none; }

input[type="color"] {
    width: 56px;
    min-height: 48px;
    padding: 3px;
    background: var(--fondo);
    border: 1px solid var(--borde-claro);
    border-radius: var(--r);
    cursor: pointer;
}

.importe { font-size: 26px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }

.metodos { display: flex; gap: 10px; flex-wrap: wrap; }

.metodo {
    flex: 1 1 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 12px;
    background: var(--fondo-3);
    border: 2px solid var(--borde-claro);
    border-radius: var(--r);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
/* El borde marca lo elegido. Si `:has()` no estuviera, sigue viéndose el punto
   del radio: no se pierde información. */
.metodo:has(input:checked) { border-color: var(--cian); background: rgba(18, 164, 250, .1); }
.metodo input { width: auto; min-height: 0; accent-color: var(--indigo); }

.pagos { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pagos li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 12px;
    background: var(--fondo-3);
    border-radius: 10px;
    font-size: 14.5px;
}
.pagos strong { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- Cocina */

.tickets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 14px;
    align-items: start;
}

.ticket {
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
    overflow: hidden;
}

.ticket__cab {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 16px;
    background: var(--fondo-3);
    border-bottom: 1px solid var(--borde);
}
.ticket__mesa { font-size: 21px; font-weight: 800; }
.ticket__num { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--texto-3); }
.ticket__quien { margin-left: auto; font-size: 13.5px; color: var(--texto-3); }

.ticket__lineas { margin: 0; padding: 0; list-style: none; }

.ticket__linea {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--borde);
}
.ticket__linea:last-child { border-bottom: 0; }

/* Lo que lleva más de diez minutos esperando se marca. En una cocina el orden
   de llegada importa menos que lo que se está enfriando. */
.ticket__linea.esperando { box-shadow: inset 4px 0 0 var(--aviso); }
.ticket__linea.lista { box-shadow: inset 4px 0 0 var(--libre); }

.ticket__cant {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    background: var(--fondo-3);
    border-radius: 10px;
    font-size: 19px;
    font-weight: 800;
}

.ticket__que { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ticket__que strong { font-size: 17px; line-height: 1.25; }
.ticket__nota { font-size: 13.5px; color: #f0b45c; }
.ticket__min { font-size: 12.5px; color: var(--texto-3); }

.avanzar {
    min-height: 48px;
    padding: 12px 18px;
    background: linear-gradient(90deg, var(--indigo), var(--purpura));
    border: 0;
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.avanzar:active { filter: brightness(1.15); }

.vacio--grande { padding: 70px 20px; font-size: 18px; }

/* ---------------------------------------------------------------- Central */

.etiqueta {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.etiqueta--ok   { background: rgba(53, 201, 138, .15); color: #7ee0b4; border: 1px solid rgba(53, 201, 138, .35); }
.etiqueta--aviso{ background: rgba(245, 165, 36, .15); color: #f0b45c; border: 1px solid rgba(245, 165, 36, .35); }
.etiqueta--mal  { background: rgba(242, 85, 90, .15);  color: #ff9296; border: 1px solid rgba(242, 85, 90, .35); }

code, .codigo-bar {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .92em;
    letter-spacing: .06em;
    color: var(--texto);
    -webkit-user-select: all;
    user-select: all;
}
.codigo-bar {
    padding: 3px 10px;
    background: var(--fondo-3);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
}

.linea .btn--fantasma { min-height: 44px; padding: 10px 16px; }

/* ==========================================================================
   El cobro: elegir qué paga cada uno, el cambio y el recibo.
   ========================================================================== */

.o-bien {
    margin: 14px 0;
    text-align: center;
    font-size: 13px;
}

/* ------------------------------------------------------- Elegir qué paga */

.elegir { margin: 0 0 130px; padding: 0; list-style: none; display: grid; gap: 8px; }

/*
   Filas grandes que se tocan enteras, no una casilla diminuta al lado. Se
   eligen de pie, delante del cliente y con prisa: fallar el objetivo obliga a
   repetir el gesto justo cuando hay alguien mirando.
*/
.elegible {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 14px 16px;
    background: var(--fondo-2);
    border: 2px solid var(--borde);
    border-radius: var(--r);
    cursor: pointer;
}
.elegible:has(input:checked) {
    border-color: var(--cian);
    background: rgba(18, 164, 250, .1);
}

.elegible input {
    width: 26px;
    height: 26px;
    min-height: 0;
    flex: 0 0 auto;
    accent-color: var(--cian);
}

.elegible__cant {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    background: var(--fondo-3);
    border-radius: 10px;
    font-size: 17px;
    font-weight: 800;
}

.elegible__que { flex: 1; min-width: 0; display: grid; gap: 2px; }
.elegible__que strong { font-size: 16px; }

.elegible__importe {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
   La suma va pegada abajo porque se elige mirando la lista: si estuviera al
   final habría que bajar para saber cuánto llevas seleccionado, y volver.
*/
.pie-pegado {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px clamp(14px, 2.5vw, 28px);
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--fondo-2) 96%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--borde-claro);
}

.pie-pegado__cifra { display: grid; line-height: 1.15; }
.pie-pegado__cifra strong {
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.pie-pegado .btn { flex: 1; max-width: 340px; margin-left: auto; }
.pie-pegado .btn:disabled { opacity: .4; }

/* ------------------------------------------------------------- Billetes */

/*
   Los billetes con los que se paga de verdad en una barra. Un botón evita
   teclear «20.00» con el cliente esperando, que es donde se cometen los
   errores de cambio.
*/
.billetes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }

.billete {
    flex: 1 1 90px;
    min-height: 56px;
    padding: 12px;
    background: var(--fondo-3);
    border: 1px solid var(--borde-claro);
    border-radius: var(--r);
    color: var(--texto);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.billete:active { border-color: var(--cian); filter: brightness(1.15); }

/* ---------------------------------------------------------- La devolución */

/*
   El número que hay que contar del cajón. Verde y enorme porque es lo único
   que importa en ese instante, y porque un error aquí sale del bolsillo de
   alguien.
*/
.devolucion {
    display: grid;
    gap: 4px;
    margin: 16px 0;
    padding: 18px 20px;
    background: rgba(53, 201, 138, .12);
    border: 2px solid rgba(53, 201, 138, .45);
    border-radius: var(--r-g);
    text-align: center;
}
.devolucion > span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #7ee0b4; }
.devolucion strong {
    font-size: clamp(38px, 9vw, 58px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #7ee0b4;
    font-variant-numeric: tabular-nums;
}
.devolucion .apagado { text-transform: none; letter-spacing: 0; }

.devolucion--grande { margin: 0 0 20px; padding: 26px 22px; }
.devolucion--limpia {
    background: var(--fondo-2);
    border-color: var(--borde-claro);
}
.devolucion--limpia > span, .devolucion--limpia strong { color: var(--texto); }

/* --------------------------------------------------------------- Recibo */

.recibo { max-width: 560px; margin: 0 auto; }

/* El ticket se ve como un ticket: estrecho, monoespaciado y en papel claro.
   Reconocerlo de un vistazo es lo que evita confundirlo con la cuenta. */
.ticket-papel {
    padding: 20px 22px;
    background: #f6f5f2;
    border-radius: var(--r);
    color: #1b1b1b;
    font-family: ui-monospace, Consolas, "Liberation Mono", monospace;
    font-size: 13.5px;
    line-height: 1.6;
}

.ticket-papel header {
    display: grid;
    gap: 2px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed #b9b6ad;
    text-align: center;
}
.ticket-papel header strong { font-size: 15px; }

.ticket-papel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ticket-papel li { display: flex; justify-content: space-between; gap: 14px; }

.ticket-papel__total {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px dashed #b9b6ad;
    font-size: 17px;
}
.ticket-papel__total strong { font-weight: 800; }

.ticket-papel__pie {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px dashed #b9b6ad;
    font-size: 12px;
    text-align: center;
    color: #4a4a4a;
}

/* ------------------------------------------------------- ¿Paga alguien más? */

.siguiente {
    margin-top: 22px;
    padding: 20px;
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
    text-align: center;
}

.pregunta { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.cerrada { margin: 0 0 14px; font-size: 17px; color: #7ee0b4; }

/* Dos botones del mismo tamaño: ninguna de las dos respuestas es la esperada,
   y hacer una más grande empuja a pulsarla sin leer. */
.si-no { display: flex; gap: 12px; margin-top: 16px; }
.si-no .btn { flex: 1; }

.imprimir-nota {
    display: grid;
    gap: 10px;
    justify-items: center;
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
}

/* Al imprimir sale el ticket y nada más. */
@media print {
    .barra, .siguiente, .imprimir-nota, .devolucion { display: none; }
    body { background: #fff; }
    .pantalla { padding: 0; }
    .ticket-papel { background: #fff; padding: 0; }
}

/* ---------------------------------------------------- Quitar ingredientes */

.producto__editable {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cian);
}

/* Lo que se ha quitado se lee antes que nada: es el dato por el que un plato
   vuelve a la cocina si se pasa por alto. */
.linea__sin, .ticket__sin {
    font-size: 12.5px;
    font-weight: 700;
    color: #ff9296;
}
.ticket__sin { font-size: 14px; }

.editar-producto { max-width: 560px; margin: 0 auto; padding-bottom: 120px; }

.lleva {
    margin: 14px 0 0;
    padding: 12px 16px;
    background: var(--fondo-2);
    border-radius: var(--r);
    font-size: 14.5px;
    color: var(--texto-2);
}

.ingredientes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.ingrediente {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 14px 16px;
    background: var(--fondo-2);
    border: 2px solid var(--borde);
    border-radius: var(--r);
    cursor: pointer;
}

/* Marcado = se quita. Rojo, porque lo que se marca es una ausencia. */
.ingrediente:has(input:checked) {
    border-color: var(--ocupada);
    background: rgba(242, 85, 90, .1);
}
.ingrediente:has(input:checked) .ingrediente__nombre {
    text-decoration: line-through;
    color: #ff9296;
}

.ingrediente input { width: 26px; height: 26px; min-height: 0; flex: 0 0 auto; accent-color: var(--ocupada); }
.ingrediente__nombre { flex: 1; font-size: 16.5px; font-weight: 600; }
.ingrediente__marca {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-3);
}

.ingrediente--fijo { cursor: default; opacity: .6; }

.pie-pegado__cifra strong[data-resumen] { font-size: 16px; font-weight: 700; }

/*
 * `hidden` tiene que ocultar, siempre.
 *
 * El navegador oculta lo marcado con `hidden` mediante `display: none`, pero es
 * una regla suya de baja prioridad: en cuanto una clase nuestra dice
 * `display: grid` o `display: block`, gana la nuestra y el elemento se queda a
 * la vista aunque JavaScript lo haya dado por escondido.
 *
 * Eso provocó un fallo feo al cobrar: escribiendo «30» sobre una cuenta de
 * 28,30 €, al teclear el «3» aparecía «faltan 25,30 €», y al añadir el «0» el
 * aviso ya no se iba. Se veía la devolución correcta y, justo debajo, un aviso
 * de que no llegaba el dinero. Con prisa y un cliente delante, eso es un cobro
 * mal hecho.
 *
 * Se arregla una vez y para toda la aplicación, no en esa pantalla: el mismo
 * choque estaba esperando en cualquier otro sitio donde se oculte algo con clase.
 */
[hidden] { display: none !important; }

/* ===================================================================== BARRA
 *
 * La venta que se paga en el acto: teclado, carta y cobro en la misma pantalla.
 *
 * No hay pasos ni pantallas encadenadas a proposito. En una mesa se puede ir y
 * volver, pero aqui hay alguien enfrente con el dinero en la mano: todo lo que
 * hace falta para cerrar la venta tiene que estar a la vista de una sola vez.
 */

.barra-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 18px;
    align-items: start;
}

.barra-cuenta {
    position: sticky;
    top: 12px;
    display: grid;
    gap: 12px;
    padding: 18px;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
}

.barra-mandos { display: grid; gap: 14px; }

/* El mas y el menos de cada linea: corregir con el dedo, sin volver atras. */
.linea__mas-menos { display: flex; gap: 6px; }

.linea__mas-menos button {
    width: 38px;
    height: 38px;
    font-size: 20px;
    line-height: 1;
    color: var(--texto);
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--r-p);
    cursor: pointer;
}

.linea__mas-menos button:hover { border-color: var(--acento); }

.cobro-barra { display: grid; gap: 10px; }

/* Sin nada marcado no hay nada que cobrar: los botones lo dicen sin esconderse,
   para que no parezca que la pantalla se ha quedado a medias. */
.apagado-todo { opacity: .45; pointer-events: none; }

.cobrar-como { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ------------------------------------------------------------- El teclado */

.teclado {
    display: grid;
    gap: 12px;
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
}

.teclado__pantalla {
    display: block;
    padding: 14px 18px;
    font-size: 40px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    letter-spacing: -.01em;
    color: var(--texto);
    background: var(--fondo);
    border: 2px solid var(--borde);
    border-radius: var(--r-p);
}

/* Cuando se intenta cobrar cero. Es un aviso de medio segundo: no merece un
   mensaje que haya que leer y cerrar. */
.teclado__pantalla--mal {
    border-color: var(--ocupada);
    animation: negar 220ms ease-in-out 2;
}

@keyframes negar {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

.teclado__teclas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.tecla {
    padding: 18px 0;
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--texto);
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--r-p);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.tecla:hover  { border-color: var(--acento); }
.tecla:active { background: var(--panel); }

.tecla--borrar { color: var(--ocupada); }

.teclado__acciones {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.teclado__acciones form { display: grid; gap: 8px; }

.teclado__pista { font-size: 13px; line-height: 1.45; margin: 0; }

/* Quitar ingredientes sin salir de la barra. Cerrado por defecto: el que pide
   el serranito entero es la mayoria, y no tiene que ver la lista. */
.quitar-aqui {
    grid-column: 1 / -1;
    padding: 10px 12px;
    background: var(--panel);
    border: 1px dashed var(--borde);
    border-radius: var(--r-p);
}

.quitar-aqui > summary {
    cursor: pointer;
    font-size: 14px;
    color: var(--suave);
}

.quitar-aqui[open] > summary { margin-bottom: 10px; color: var(--texto); }

.quitar-aqui form { display: grid; gap: 8px; }

/* En tableta y movil el teclado va primero: es lo que mas se usa. */
@media (max-width: 900px) {
    .barra-cuerpo { grid-template-columns: 1fr; }
    .barra-cuenta { position: static; order: 2; }
    .barra-mandos { order: 1; }
    .teclado__acciones { grid-template-columns: 1fr; }
}

/* Los ingredientes de un producto, en su pantalla. */
.ingredientes--editar { display: grid; gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; }

.ingrediente-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.marca-quitable {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--suave);
    white-space: nowrap;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--r-p);
    cursor: pointer;
}

.marca-quitable:has(input:checked) { color: var(--texto); border-color: var(--acento); }

.ficha__pista { margin: 0; font-size: 13.5px; line-height: 1.5; }

@media (max-width: 620px) {
    .ingrediente-fila { grid-template-columns: 1fr; }
}

/* ============================================================ LA PDA EN MOVIL
 *
 * El camarero no lleva una tableta: lleva su telefono, de pie, con una mano y
 * con el bar lleno. Lo que en un monitor es comodo, ahi es inservible.
 *
 * Tres cosas cambian respecto al escritorio:
 *
 *   1. Manda la carta, no la cuenta. En el ordenador se ven las dos a la vez;
 *      en el movil van una debajo de otra, y lo que se pulsa cien veces al dia
 *      tiene que estar arriba. La cuenta se consulta, la carta se usa.
 *
 *   2. El total y el boton de mandar se quedan pegados abajo. Antes estaban
 *      dentro de la cuenta, o sea al principio del todo: se marcaban seis cosas
 *      y habia que volver a subir para mandarlas.
 *
 *   3. Todo lo que se pulsa mide 48 px o mas y no depende del raton por encima.
 *      En una pantalla tactil no existe «pasar el cursor».
 */

/* Nada de zoom accidental al pulsar dos veces seguidas, ni destello azul. */
button, .btn, .cat-btn, .producto, .tecla, .quitar, .mesa, a[class] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/*
 * 16 px es el minimo que evita que el navegador del movil haga zoom solo al
 * tocar un campo. Con zoom, la pantalla se queda descolocada y hay que cerrar
 * y volver a entrar.
 */
input, select, textarea { font-size: max(16px, 1rem); }

/* ------------------------------------------------------------ El pie fijo */

/* En pantalla grande no hace falta: se ve todo a la vez. */
.pda-pie { display: none; }

.pda-pie__cuenta {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: var(--texto);
    text-decoration: none;
}

.pda-pie__cuenta strong {
    font-size: 24px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.pda-pie__cuenta .apagado { font-size: 12px; }

.pda-pie__quieto { font-size: 13.5px; text-align: right; }

/* Un punto del color de la categoria, siempre, no solo en la activa: se busca
   por color antes que por texto en cuanto te sabes la carta. */
.cat-btn::before {
    content: '';
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    background: var(--color, var(--indigo));
    border-radius: 50%;
}

/* La rejilla lleva el color de su categoria: al cambiar de pestaña se nota que
   ha cambiado sin tener que leer cual esta marcada. */
.rejilla-productos .producto {
    border-left: 3px solid var(--color, var(--borde-claro));
}

@media (max-width: 899.98px) {

    /* La carta primero. La cuenta se consulta; la carta se usa. */
    .mesa-cuerpo { display: flex; flex-direction: column; }
    .mesa-cuerpo > .carta  { order: 1; }
    .mesa-cuerpo > .cuenta { order: 2; }

    /* Sitio para el pie, y para la barra del sistema en los moviles con gesto. */
    .pantalla { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

    .pda-pie {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        padding: 12px clamp(12px, 3vw, 20px);
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        background: var(--fondo-2);
        border-top: 1px solid var(--borde-claro);
        box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .7);
    }

    .pda-pie form { margin: 0; }
    .pda-pie .btn { min-height: 52px; padding-inline: 22px; white-space: nowrap; }

    /* El boton de mandar ya vive abajo: repetirlo dentro de la cuenta solo
       hace dudar de cual de los dos es el bueno. */
    .acciones-mesa { display: none; }

    /* Dos por fila entran bien hasta en un telefono estrecho, y siguen siendo
       lo bastante grandes para no fallar el dedo. */
    .rejilla-productos { grid-template-columns: repeat(auto-fill, minmax(min(128px, 46%), 1fr)); gap: 8px; }
    .producto { min-height: 76px; }

    /* La tira de categorias se desliza y cada una se coloca sola en su sitio. */
    .categorias { scroll-snap-type: x proximity; margin-inline: -4px; padding-inline: 4px; }
    .cat-btn { scroll-snap-align: start; }

    /* Al saltar a la cuenta desde el pie, que no quede pegada al borde. */
    .cuenta { scroll-margin-top: 16px; }
}

/* En telefono estrecho la cabecera de la mesa ocupa demasiado alto. */
@media (max-width: 520px) {
    .mesa-cab { gap: 8px; }
    .mesa-cab h1 { font-size: 22px; }
    .mesa-cab__total .cifra { font-size: 22px; }
    .producto__nombre { font-size: 14px; }
    .pda-pie__cuenta strong { font-size: 21px; }
}

/* Movil tumbado: sobra alto, asi que la cabecera se encoge y se ve mas carta. */
@media (max-width: 899.98px) and (orientation: landscape) {
    .barra { padding-block: 6px; }
    .mesa-cab { margin-bottom: 10px; }
}

/* ================================================== FOTOS Y BARRA, SEGUNDA MANO
 *
 * Un boton con foto se reconoce sin leerlo. Eso importa en una barra: el ojo
 * encuentra la lata de Fanta antes de que el cerebro lea «Fanta naranja».
 *
 * Pero la foto NO sustituye al nombre por su cuenta. Se guarda producto a
 * producto lo que dijo quien lo dio de alta, porque solo el sabe si la imagen
 * se explica sola.
 */

.producto--con-foto {
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 8px 10px;
}

.producto__foto {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    background: var(--fondo);
}

/* Sin nombre, el precio se queda solo y necesita algo mas de presencia. */
.producto--con-foto .producto__nombre[hidden] + .producto__precio { font-size: 15px; font-weight: 700; }

/* Miniatura en la lista de la carta, para saber cual tiene foto de un vistazo. */
.linea__foto {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--fondo-3);
}

/* ------------------------------------------------------- La ficha del producto */

.foto-ficha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.foto-ficha__marco {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--fondo-3);
    border: 1px dashed var(--borde-claro);
    border-radius: var(--r);
}

.foto-ficha__marco img { width: 100%; height: 100%; object-fit: cover; }
.foto-ficha__sin { font-size: 14px; color: var(--texto-3); }

.foto-ficha__prueba { display: grid; gap: 8px; width: 160px; }
.foto-ficha__prueba .apagado { font-size: 12px; }

/* La muestra es un boton de verdad, no un dibujo: es lo que se va a ver. */
.producto--muestra { cursor: default; }

.pregunta-foto {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    background: var(--fondo-3);
    border: 1px solid var(--borde);
    border-radius: var(--r);
    cursor: pointer;
}

.pregunta-foto:has(input:checked) { border-color: var(--acento); }
.pregunta-foto > span { display: grid; gap: 4px; }
.pregunta-foto .apagado { font-size: 13px; line-height: 1.5; }

.ficha__forma { display: grid; gap: 14px; }
.ficha__aparte { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* --------------------------------------------------------- La barra, pulida */

/*
 * El total, en grande y separado.
 *
 * En las cajas de bar de toda la vida el total va en una franja aparte y no
 * como una linea mas de la cuenta. Tiene razon de ser: es lo que pregunta el
 * cliente, y buscarlo entre las lineas con gente esperando es perder un segundo
 * cada vez.
 */
.barra-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(124, 92, 255, .16), rgba(124, 92, 255, .06));
    border: 1px solid rgba(124, 92, 255, .45);
    border-radius: var(--r);
}

.barra-total > span { font-size: 13px; color: var(--texto-2); }

.barra-total > strong {
    font-size: 34px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1;
}

/* La lista crece hasta un limite y luego se desliza sola: si no, el teclado y
   el cobro se van fuera de la pantalla en cuanto hay diez lineas. */
.barra-cuenta__lista { max-height: min(38vh, 340px); overflow-y: auto; }

/* Cobrar en efectivo es lo que mas se hace: se ve antes que lo demas. */
.btn--cobrar {
    background: linear-gradient(180deg, #2fbf7d, #1f9c63);
    border-color: transparent;
    color: #04120b;
    font-weight: 800;
}

.billete--tecleado { border-style: dashed; }

.barra-cancelar { margin-top: 2px; }

/* Un producto con ingredientes abre su panel debajo, sin salir de la carta. */
.producto-quitable { grid-column: span 1; }
.producto-quitable > summary { list-style: none; }
.producto-quitable > summary::-webkit-details-marker { display: none; }
.producto-quitable[open] > summary { border-color: var(--acento); }

.producto-quitable__panel {
    display: grid;
    gap: 10px;
    margin-top: 8px;
    padding: 12px;
    background: var(--fondo-3);
    border: 1px solid var(--borde-claro);
    border-radius: var(--r);
}

.producto-quitable__panel form { display: grid; gap: 8px; }

.teclado__suelto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

/* El pie de la barra lleva al cobro, que en el movil queda debajo de la carta. */
.pda-pie--barra { text-decoration: none; color: inherit; }

@media (max-width: 899.98px) {
    /* Igual que en la PDA: primero lo que se pulsa, luego lo que se consulta. */
    .barra-cuerpo { display: flex; flex-direction: column; }
    .barra-cuerpo > .barra-mandos { order: 1; }
    .barra-cuerpo > .barra-cuenta  { order: 2; }

    .pda-pie--barra { display: grid; }
    .barra-cuenta { scroll-margin-top: 12px; }
    .barra-cuenta__lista { max-height: none; }
    .teclado__suelto { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .foto-ficha { grid-template-columns: 1fr; }
    .foto-ficha__prueba { width: 160px; }
    .barra-total > strong { font-size: 28px; }
}

[hidden] { display: none !important; }

/* ======================================================= «OIGA, LA CUENTA»
 *
 * Tres estados y tres colores, y cada uno responde a una pregunta distinta:
 *
 *   rojo      — hay gente sentada consumiendo. No hay nada que hacer.
 *   amarillo  — piden la cuenta. Hay que imprimirla y llevarla.
 *   azul      — el camarero cruza el salon con el dinero. Hay que contar cambio.
 *
 * El color solo no basta: cada mesa lleva ademas escrito lo que le pasa. Un
 * encargado daltonico existe, y una pantalla que solo habla en colores le deja
 * fuera.
 */

/* El amarillo de aviso, definido aparte para poder usarlo en varios sitios. */
:root {
    --pide-cuenta: #e7b74a;
    --pide-cuenta-fondo: rgba(231, 183, 74, .16);
    --en-caja: #4aa9e7;
    --en-caja-fondo: rgba(74, 169, 231, .16);
}

.mesa--pide-cuenta {
    background: var(--pide-cuenta-fondo);
    border-color: var(--pide-cuenta);
    /* Un latido lento. Llama la atencion al pasar la vista por el plano sin
       convertir la pantalla en una maquina recreativa. */
    animation: late 2.2s ease-in-out infinite;
}

.mesa--en-caja {
    background: var(--en-caja-fondo);
    border-color: var(--en-caja);
    animation: none;
}

@keyframes late {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 183, 74, .45); }
    50%      { box-shadow: 0 0 0 6px rgba(231, 183, 74, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .mesa--pide-cuenta { animation: none; }
}

.mesa__marca {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pide-cuenta);
}

.mesa--en-caja .mesa__marca { color: var(--en-caja); }

.punto--pide { background: var(--pide-cuenta); }
.punto--caja { background: var(--en-caja); }

/* ------------------------------------------------- Lo que espera a la caja */

.esperando {
    margin-bottom: 18px;
    padding: 16px 18px;
    background: var(--fondo-2);
    border: 1px solid var(--pide-cuenta);
    border-radius: var(--r-g);
}

.esperando h2 { margin: 0 0 12px; font-size: 15px; }
.esperando ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.esperando__mesa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: var(--pide-cuenta-fondo);
    border-radius: var(--r);
}

.esperando__mesa--dinero { background: var(--en-caja-fondo); }

.esperando__mesa > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    color: var(--texto);
    text-decoration: none;
}

.esperando__que { display: grid; gap: 2px; min-width: 0; }
.esperando__que strong { font-size: 17px; }
.esperando__que span { font-size: 12.5px; color: var(--texto-2); }

.esperando__cifras { display: grid; gap: 2px; text-align: right; white-space: nowrap; }
.esperando__cifras strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.esperando__cifras .apagado { font-size: 11.5px; }

/* La chincheta del menu de arriba. */
.chincheta {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #1a1206;
    background: var(--pide-cuenta);
    border-radius: 999px;
}

/* ------------------------------------------------------- «¿Como pagan?» */

/*
 * Cuando la mesa pide la cuenta, esto es lo primero de la pantalla y se nota.
 * El camarero vuelve con el ticket en la mano y no tiene que buscar nada.
 */
.pagar-mesa {
    margin-bottom: 20px;
    padding: 18px 20px;
    background: var(--fondo-2);
    border: 2px solid var(--pide-cuenta);
    border-radius: var(--r-g);
}

.pagar-mesa__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.pagar-mesa__cab h2 { margin: 0 0 4px; font-size: 20px; }
.pagar-mesa__cab p { margin: 0; font-size: 13px; }
.pagar-mesa__espera { color: var(--pide-cuenta); }

.pagar-mesa__total { text-align: right; }
.pagar-mesa__total .apagado { display: block; font-size: 12px; }

.pagar-mesa__total strong {
    font-size: 34px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.pagar-mesa form { display: grid; gap: 14px; }
.pagar-mesa__pregunta { margin: 0; font-size: 14px; color: var(--texto-2); }

/* Efectivo o tarjeta: dos botones grandes, no un desplegable. */
.metodos--grandes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.metodo-btn {
    min-height: 56px;
    padding: 12px;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    color: var(--texto-2);
    background: var(--fondo-3);
    border: 2px solid var(--borde);
    border-radius: var(--r);
    cursor: pointer;
}

.metodo-btn.activo {
    color: var(--texto);
    border-color: var(--acento);
    background: var(--fondo);
}

.pagar-mesa__salidas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pagar-mesa__retirar { margin-top: 12px; }

/* «Cuenta solicitada»: el mismo amarillo que va a ponerse la mesa, para que se
   entienda de un vistazo qué hace el boton. */
.btn--aviso {
    background: var(--pide-cuenta);
    border-color: transparent;
    color: #1a1206;
    font-weight: 800;
}

@media (max-width: 620px) {
    .pagar-mesa__cab { flex-direction: column; }
    .pagar-mesa__total { text-align: left; }
    .pagar-mesa__salidas { grid-template-columns: 1fr; }
    .esperando__mesa { grid-template-columns: 1fr; }
    .esperando__mesa > a { flex-wrap: wrap; }
}

/* En el movil el boton de mandar ya vive en el pie fijo. */
@media (max-width: 899.98px) {
    .acciones-mesa { display: grid; }
    .acciones-mesa__mandar { display: none; }
}

[hidden] { display: none !important; }

/* ===================================== LA BARRA DE ARRIBA EN PANTALLA ESTRECHA
 *
 * Los enlaces se salian de la pantalla y no habia forma de llegar a «Carta» o
 * «Sala» desde un movil. La causa no era el ancho: .barra__nav ya sabia
 * desplazarse, pero como hijo de un flex no podia ENCOGER (min-width:auto es
 * el valor por defecto), asi que empujaba a sus vecinos fuera en vez de
 * activar su propio scroll.
 */
.barra__nav { min-width: 0; }

@media (max-width: 760px) {
    .barra { flex-wrap: wrap; row-gap: 2px; padding-block: 8px; }

    /* El nombre del bar sobra en un movil: ya sabes en que bar estas. */
    .barra__local { display: none; }

    /* La navegacion baja a su propia fila, entera y deslizable. */
    .barra__nav { order: 10; width: 100%; }
    .barra__nav a { padding: 8px 13px; font-size: 14px; }

    .barra__yo { margin-left: auto; }
    .barra__yo .quien span { display: none; }
}

/* ================================================== EL PLANO EN UN TELEFONO
 *
 * El plano de verdad coloca cada mesa donde esta en el bar: por porcentaje y
 * con un ancho fijo. Eso funciona en un monitor o una tablet, pero en un
 * telefono las cuentas no salen nunca: un 20% de separacion son 70 pixeles y
 * la mesa mide 86, asi que se montan unas encima de otras.
 *
 * En pantalla estrecha se renuncia al mapa y las mesas pasan a una REJILLA:
 * mismas tarjetas, mismos colores y avisos, pero ordenadas por nombre y sin
 * poder pisarse jamas. En un movil nadie navega "por el plano": busca la mesa
 * 7, y una rejilla ordenada la encuentra antes que un mapa apretado.
 */
@media (max-width: 700px) {
    .plano {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
        height: auto;
        aspect-ratio: auto !important;
        padding: 14px;
    }

    /* Fuera del mapa: la posicion guardada (left/top) deja de aplicar sola
       al volver el elemento al flujo normal. */
    .plano .mesa {
        position: static;
        width: auto;
        min-height: 84px;
        display: grid;
        align-content: center;
        justify-items: center;
        gap: 2px;
        padding: 10px 8px;
    }

    /* En la rejilla todas son tarjetas: la forma de la mesa es informacion
       del mapa, y aqui el mapa ya no existe. */
    .plano .mesa--redonda,
    .plano .mesa--rectangular { width: auto; border-radius: 14px; }

    /* Que el texto no se salga de su tarjeta ("3 en cocina" desbordaba). */
    .mesa__pie {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
    }
    .mesa__total { font-size: 14px; }

    /* La leyenda quedaba debajo de la barra del navegador del iPhone. */
    .pantalla { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
    .leyenda { padding-bottom: env(safe-area-inset-bottom); }
}

/* Remate de la rejilla movil: el mapa ancla cada mesa por su CENTRO con un
   translate(-50%,-50%). En la rejilla ese desplazamiento seguia aplicandose y
   cortaba cada tarjeta por la mitad. */
@media (max-width: 700px) {
    .plano .mesa { transform: none; }

    /* Cinturon: pase lo que pase, la pagina nunca se desplaza de lado. Si un
       elemento se pasa de ancho, se recorta el, no rompe toda la pantalla. */
    html, body { overflow-x: hidden; max-width: 100vw; }

    /* La leyenda, siempre por encima de la barra del navegador del iPhone. */
    .leyenda { margin-bottom: calc(52px + env(safe-area-inset-bottom)); }
}

/* Ajustes del local: una tarjeta por empleado con sus casillas. */
.permiso-forma { display: grid; gap: 10px; padding: 12px 0; border-top: 1px solid var(--borde); }
.permiso-forma:first-of-type { border-top: 0; }
.permiso-forma__quien { display: flex; gap: 10px; align-items: baseline; margin: 0; }
.permiso-forma__grupo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.permiso-forma__grupo > .apagado { width: 74px; font-size: 12.5px; }

/* ================================================================ EL TICKET
 * Imita un rollo termico de 80 mm: tipografia de maquina, cabecera centrada,
 * rayas discontinuas y numeros alineados a la derecha.
 */
.tique {
    max-width: 320px;
    margin-inline: auto;
    padding: 18px 16px;
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.45;
    color: #1a1a1a;
    background: #fdfdf8;
    border-radius: 6px;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
}

.tique__cab { text-align: center; }
.tique__cab p { margin: 0; }
.tique__nombre { font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tique__lema { font-style: italic; }

.tique__meta { margin: 8px 0 0; text-align: center; }

.tique__raya { margin: 8px 0; border-top: 1px dashed #777; }

.tique__lineas, .tique__totales { width: 100%; border-collapse: collapse; }
.tique__lineas td { padding: 1px 0; vertical-align: top; }
.tique__cant { width: 24px; }
.tique__que small { color: #444; }
.tique__importe, .tique__totales td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tique__total td { font-size: 16px; font-weight: 700; padding-top: 4px; }

.tique__pie { text-align: center; }
.tique__pie p { margin: 0; }
.tique__iva { font-size: 11px; color: #555; }

/* Al imprimir: SOLO el ticket, a ancho de rollo, sin sombras ni fondos. */
@media print {
    body * { visibility: hidden; }
    .tique, .tique * { visibility: visible; }
    .tique {
        position: absolute;
        inset: 0 auto auto 0;
        width: 72mm;
        max-width: none;
        margin: 0;
        padding: 2mm 3mm;
        box-shadow: none;
        border-radius: 0;
        background: #fff;
        color: #000;
    }
}

/* ============================================ LOS PRODUCTOS EN UN TELEFONO
 *
 * DOS COSAS, Y LA PRIMERA ES LA IMPORTANTE.
 *
 * 1. La rejilla salia con cinco columnas de 132 px en una pantalla de 375:
 *    cuatro productos quedaban fuera y no habia forma de llegar a ellos. No
 *    era la rejilla: era que `.carta` media 693 px dentro de un padre de 347.
 *    Un hijo de un contenedor flex NO encoge por debajo de su contenido
 *    (min-width: auto), y la tira de categorias, que es ancha por naturaleza,
 *    estiraba a su padre. El mismo fallo que ya tuvo la barra de navegacion.
 *
 * 2. En cascada: un producto por fila. En un movil, dos columnas obligan a
 *    recortar los nombres ("Tinto ver."), y con prisa se pulsa el equivocado.
 *    Una fila por producto deja el nombre entero, el precio a la derecha y una
 *    diana ancha para el dedo.
 */
@media (max-width: 899.98px) {
    .mesa-cuerpo > *,
    .barra-cuerpo > * { min-width: 0; }
}

@media (max-width: 620px) {
    .rejilla-productos { grid-template-columns: 1fr; gap: 6px; }

    .producto {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 58px;
        padding: 10px 14px;
        text-align: left;
    }

    /* El nombre manda y se lee entero; el precio se ancla a la derecha. */
    .producto__nombre { flex: 1 1 auto; font-size: 16px; line-height: 1.25; }
    .producto__precio { flex: 0 0 auto; font-size: 16px; font-weight: 700; }

    /* Con foto, miniatura a la izquierda en vez de imagen a toda anchura. */
    .producto--con-foto { justify-content: flex-start; }
    .producto__foto { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 8px; }

    /* Los avisos, pequeños y al lado del precio. */
    .producto__editable, .producto__agotado { flex: 0 0 auto; font-size: 10px; }

    /* El panel de quitar ingredientes ocupa su fila entera. */
    .producto-quitable { grid-column: 1 / -1; }
}

/* `min-width: 0` no bastaba: en un flex EN COLUMNA el ancho es el eje
   transversal, y ahi lo que manda es max-width. Sin esto, `.carta` se estiraba
   a 693 px dentro de un padre de 347 —arrastrada por la tira de categorias— y
   la mitad de los productos quedaba fuera de la pantalla. Comprobado en el
   navegador: con `max-width: 100%` pasa de 693 a 347. */
@media (max-width: 899.98px) {
    .mesa-cuerpo > *,
    .barra-cuerpo > * { max-width: 100%; }
}

/* ==================================================== EL VALE Y LOS AVISOS */

/* La ventana del vale: solo el papel, nada mas. */
.solo-vale { display: grid; place-items: start center; padding: 12px; background: #fff; }
#impresora { display: none; width: 0; height: 0; border: 0; }

.vale {
    width: 74mm;
    padding: 4mm;
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.4;
    color: #000;
    background: #fff;
}
.vale__cab { text-align: center; }
.vale__cab p { margin: 0; }
.vale__destino { font-size: 12px; letter-spacing: .22em; }
.vale__mesa { font-size: 26px; font-weight: 700; line-height: 1.1; }
.vale__zona { font-size: 12px; }
.vale__raya { margin: 6px 0; border-top: 1px dashed #000; }
.vale__quien { margin: 0; font-size: 12px; text-align: center; }

.vale__lineas { margin: 0; padding: 0; list-style: none; }
.vale__lineas li { display: flex; gap: 8px; padding: 3px 0; align-items: baseline; }
.vale__cant { min-width: 22px; font-size: 18px; font-weight: 700; }
.vale__que { font-size: 16px; font-weight: 700; }

/* Lo que se quita, en su propia linea y sin poder pasar desapercibido: es
   justo el dato que, si se lee de reojo, devuelve el plato a la cocina. */
.vale__sin, .vale__nota { display: block; font-size: 13px; font-weight: 700; text-decoration: underline; }
.vale__pie { margin: 0; font-size: 11px; text-align: center; }

@media print {
    .solo-vale { padding: 0; }
    .vale { width: auto; padding: 0; }
}

/* --------------------------------------------------- Los avisos de barra */

.avisos-barra { display: grid; gap: 10px; }

.aviso-barra {
    background: var(--panel);
    border: 2px solid var(--acento);
    border-radius: var(--r-g);
    overflow: hidden;
}
.aviso-barra > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}
.aviso-barra > summary::-webkit-details-marker { display: none; }

.aviso-barra__mesa { font-size: 20px; font-weight: 800; }
.aviso-barra__mesa small { display: block; font-size: 12px; font-weight: 500; color: var(--texto-3); }
.aviso-barra__estado {
    padding: 4px 12px;
    font-size: 12px; font-weight: 700;
    color: #e7b74a;
    background: rgba(231, 183, 74, .16);
    border-radius: 999px;
}
.aviso-barra__n {
    margin-left: auto;
    display: grid; place-items: center;
    min-width: 36px; height: 36px;
    font-size: 17px; font-weight: 800;
    background: var(--fondo-3); border-radius: 50%;
}

.aviso-barra__cuerpo { padding: 0 16px 16px; display: grid; gap: 10px; }
.aviso-barra__lineas { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.aviso-barra__lineas li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 16px; }
.aviso-barra__lineas em { font-style: normal; font-size: 12.5px; color: #e7b74a; }
.aviso-barra__lineas .apagado { margin-left: auto; font-size: 12px; }
.aviso-barra__acciones { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

@media (max-width: 620px) {
    .aviso-barra__acciones { grid-template-columns: 1fr; }
    .aviso-barra > summary { flex-wrap: wrap; }
}

/* Cierre e informes. */
.entre-fechas { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 16px; }
.entre-fechas .campo { margin: 0; }
.fila-cierre { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--borde); font-size: 14px; }
.fila-cierre:last-child { border-bottom: 0; }
.cierre-desc { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* La pantalla de bar parado: sin menus ni enlaces, no hay nada que hacer aqui. */
.pantalla-parada { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: var(--fondo); }
.parada { max-width: 460px; text-align: center; }
.parada h1 { font-size: 26px; margin: 0 0 14px; color: var(--ocupada); }
.parada__mensaje {
    padding: 18px 20px; font-size: 18px; line-height: 1.5;
    background: var(--panel); border: 2px solid var(--ocupada); border-radius: var(--r-g);
}
.parada__pie { margin-top: 18px; font-size: 13px; color: var(--suave); }

/* Los avisos de Andahost en la pantalla de licencia. */
.aviso-central { padding: 12px 14px; margin-bottom: 10px; background: var(--panel); border-radius: var(--r); border-left: 3px solid var(--borde-claro); }
.aviso-central--sin-ver { border-left-color: #e7b74a; }
.aviso-central__titulo { margin: 0 0 4px; font-weight: 700; }
.aviso-central__cuerpo { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }

/* El logo del ticket: centrado, ancho contenido y en negro sobre el papel. */
.tique__logo { display: block; max-width: 60%; height: auto; margin: 0 auto 6px; }
@media print { .tique__logo { max-width: 45mm; } }

/* La muestra en ajustes, sobre fondo claro: es como se vera en el papel. */
.logo-ticket {
    display: grid; place-items: center;
    min-height: 90px; margin-bottom: 12px; padding: 12px;
    background: #fdfdf8; border: 1px dashed var(--borde-claro); border-radius: var(--r);
}
.logo-ticket img { max-width: 220px; height: auto; }
.logo-ticket .apagado { color: #555; font-size: 13px; }