/* ═══════════════════════════════════════════════════════════════════════════
   UNITE — hoja de estilos única
   Dirección: "la puerta". Sodio del farol de la vereda, UV que sale de adentro.
   Mobile first: todo se diseña a 390px y se ensancha desde ahí.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Archivo';
    src: url('fonts/archivo.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}
@font-face {
    font-family: 'Instrument Sans';
    src: url('fonts/instrumentsans.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: 'Martian Mono';
    src: url('fonts/martianmono.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --noche:  #0B0714;
    --sala:   #150C21;
    --borde:  #2C1D42;
    --uv:     #7A3DFF;
    --uv-alto:#A87BFF;
    --sodio:  #FFB627;
    --niebla: #B6A6C9;
    --luz:    #F7F3FB;

    --display: 'Archivo', 'Arial Black', sans-serif;
    --texto:   'Instrument Sans', system-ui, -apple-system, sans-serif;
    --dato:    'Martian Mono', ui-monospace, 'SF Mono', monospace;

    --radio: 14px;
    --ancho: 1120px;
    --lat: max(20px, env(safe-area-inset-left));
    --transicion: 420ms cubic-bezier(.2, .7, .2, 1);
    --cabecera: 64px;              /* alto de la barra superior pegajosa */
}

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

html {
    -webkit-text-size-adjust: 100%;
    /* La app es oscura siempre: así los controles nativos (calendarios, listas
       desplegables) salen oscuros y no en blanco sobre el fondo. */
    color-scheme: dark;
}

body {
    margin: 0;
    background: var(--noche);
    color: var(--luz);
    font-family: var(--texto);
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--sodio);
    outline-offset: 3px;
    border-radius: 4px;
}

.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
}

.contenido {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: var(--lat);
}

/* ── Piezas compartidas ──────────────────────────────────────────────────── */

.rotulo {
    font-family: var(--dato);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--niebla);
    margin: 0;
}

.titulo-seccion {
    font-family: var(--display);
    font-weight: 900;
    font-stretch: 118%;
    font-size: clamp(2rem, 9vw, 3.25rem);
    line-height: .95;
    letter-spacing: -.02em;
    margin: 10px 0 0;
    text-transform: uppercase;
}

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--texto);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, background-color 200ms ease, border-color 200ms ease;
}

.boton:active { transform: scale(.975); }

.boton--luz {
    background: var(--luz);
    color: #120A1C;
}

.boton--fantasma {
    background: transparent;
    color: var(--luz);
    border-color: var(--borde);
}

.boton--fantasma:hover { border-color: var(--uv-alto); }

.boton--sodio {
    background: var(--sodio);
    color: #2A1800;
}

.boton--bloque { width: 100%; }

/* ── El rig de luces: la firma de la página ──────────────────────────────── */

.rig {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.gel {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
}

.gel--uv {
    width: 130vw; height: 90vh;
    top: -34vh; left: -32vw;
    background: radial-gradient(circle at 50% 50%, rgba(122, 61, 255, .85), rgba(122, 61, 255, 0) 68%);
    animation: derivaUv 26s ease-in-out infinite alternate;
}

.gel--sodio {
    width: 110vw; height: 62vh;
    bottom: -26vh; right: -26vw;
    background: radial-gradient(circle at 50% 50%, rgba(255, 182, 39, .58), rgba(255, 182, 39, 0) 66%);
    animation: derivaSodio 34s ease-in-out infinite alternate;
}

/* Niebla de máquina de humo: ruido muy tenue para que los degradés no queden planos */
.grano {
    position: absolute;
    inset: -10%;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes derivaUv {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(9vw, 5vh, 0) scale(1.12); }
}

@keyframes derivaSodio {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to   { transform: translate3d(-11vw, -4vh, 0) scale(1); }
}

/* ── Portada ─────────────────────────────────────────────────────────────── */

.portada {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-block: 96px calc(40px + env(safe-area-inset-bottom));
    isolation: isolate;
}

.portada::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(to top, var(--noche), transparent);
    pointer-events: none;
}

.portada__cuerpo {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: var(--lat);
}

/* El nombre no entra por la puerta: se sale de la pantalla a propósito. */
.marca {
    font-family: var(--display);
    font-weight: 900;
    font-stretch: 125%;
    font-size: clamp(5.5rem, 27vw, 17rem);
    line-height: .78;
    letter-spacing: -.045em;
    text-transform: uppercase;
    margin: 12px 0 0;
    margin-inline-start: -.06em;
    color: var(--luz);
    text-shadow: 0 0 90px rgba(122, 61, 255, .5);
}

/* Si el admin cargó un logo, la marca deja de escribirse con la tipografía y
   pasa a ser esa imagen. Se le da el mismo aire que al texto: alto proporcional
   al ancho de la pantalla y el mismo resplandor UV de atrás. */
.marca__logo {
    width: auto;
    max-width: min(100%, 620px);
    height: clamp(72px, 22vw, 200px);
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 0 60px rgba(122, 61, 255, .45));
}

.bajada {
    font-size: clamp(1.15rem, 4.6vw, 1.6rem);
    line-height: 1.25;
    max-width: 20ch;
    margin: 18px 0 0;
    color: var(--luz);
}

/* Franja de puerta: la información más útil de la página, en el lugar más visible */
.puerta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-top: 26px;
    padding: 12px 0 12px 16px;
    border-left: 2px solid var(--sodio);
    font-family: var(--dato);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--niebla);
}

.puerta strong {
    color: var(--luz);
    font-weight: 700;
}

.puerta__cupo { color: var(--sodio); }

.portada__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.portada__acciones .boton { flex: 1 1 160px; }

/* ── Noches ──────────────────────────────────────────────────────────────── */

.seccion { padding-block: clamp(64px, 14vw, 120px); }

.seccion__encabezado { margin-bottom: 34px; }

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

.noche {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 22px 20px 20px 24px;
    background: var(--sala);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
}

/* El mismo par de luces, reducido a una línea, cose las tarjetas con la portada */
.noche::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--uv), var(--sodio));
}

.noche__fecha {
    font-family: var(--dato);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sodio);
}

.noche__titulo {
    font-family: var(--display);
    font-weight: 900;
    font-stretch: 112%;
    font-size: clamp(1.65rem, 7.5vw, 2.4rem);
    line-height: .98;
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin: 6px 0 0;
}

.noche__subtitulo {
    margin: 8px 0 0;
    color: var(--niebla);
    font-size: 15px;
}

.noche__lineup {
    font-family: var(--dato);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--uv-alto);
    margin: 0;
}

.noche__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
}

.noche__precio {
    font-family: var(--dato);
    font-size: 13px;
    font-weight: 700;
    color: var(--luz);
}

.noche__precio span {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--niebla);
}

.noche__cupo {
    font-family: var(--dato);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--niebla);
}

.noche--agotada .noche__cupo { color: var(--sodio); }

/* ── Cómo entrás (acá el orden importa de verdad: es una secuencia) ───────── */

.pasos {
    display: grid;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: paso;
}

.paso {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: start;
    padding: 22px 0;
    border-top: 1px solid var(--borde);
    counter-increment: paso;
}

.paso:last-child { border-bottom: 1px solid var(--borde); }

.paso::before {
    content: counter(paso, decimal-leading-zero);
    font-family: var(--dato);
    font-size: 12px;
    font-weight: 700;
    color: var(--uv-alto);
    padding-top: 4px;
}

.paso h3 {
    font-size: 1.08rem;
    font-weight: 600;
    margin: 0;
}

.paso p {
    margin: 6px 0 0;
    color: var(--niebla);
    font-size: 15px;
}

/* ── El lugar ────────────────────────────────────────────────────────────── */

.ficha {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
}

.ficha > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--borde);
}

.ficha dt {
    font-family: var(--dato);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--niebla);
}

.ficha dd {
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    text-align: right;
}

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.pie {
    padding-block: 44px calc(44px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--borde);
}

.pie__marca {
    font-family: var(--display);
    font-weight: 900;
    font-stretch: 125%;
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: -.02em;
    margin: 0;
}

.pie__legal {
    font-family: var(--dato);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--niebla);
    margin: 14px 0 0;
}

.pie__legal a {
    color: var(--luz);
    text-decoration-color: var(--borde);
    text-underline-offset: 3px;
}

/* ── Textos legales ──────────────────────────────────────────────────────── */

/* Prosa larga: una sola columna angosta, que es lo único que se lee en el
   celular sin cansar. Todo lo demás de la app es tarjetas; esto no. */
.legal {
    max-width: 66ch;
    color: var(--niebla);
}

.legal__fecha {
    font-family: var(--dato);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--niebla);
    margin: 18px 0 0;
}

.legal__entrada {
    font-size: 1.06rem;
    color: var(--luz);
    margin: 0 0 34px;
}

.legal h2 {
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 112%;
    font-size: 1.12rem;
    letter-spacing: -.01em;
    color: var(--luz);
    margin: 40px 0 12px;
    padding-top: 22px;
    border-top: 1px solid var(--borde);
}

.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal p { margin: 0 0 14px; }

.legal strong { color: var(--luz); font-weight: 600; }

.legal a {
    color: var(--uv-alto);
    text-underline-offset: 3px;
}

.legal code {
    font-family: var(--dato);
    font-size: .82em;
    color: var(--sodio);
}

.legal ul {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.legal li { padding-left: 20px; position: relative; }

.legal li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: .68em;
    width: 6px;
    height: 1px;
    background: var(--uv-alto);
}

/* El apartado del apartado: aclaraciones que no son parte del hilo principal. */
.legal__nota {
    border-left: 2px solid var(--borde);
    padding: 2px 0 2px 16px;
    font-size: .93rem;
    margin: 20px 0 14px;
}

/* ── Ingreso ─────────────────────────────────────────────────────────────── */

.ingreso {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

.ingreso__barra {
    position: relative;
    z-index: 1;
    padding: calc(18px + env(safe-area-inset-top)) var(--lat) 0;
}

.volver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-family: var(--dato);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--niebla);
    text-decoration: none;
}

.ingreso__cuerpo {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    padding: 32px var(--lat) calc(40px + env(safe-area-inset-bottom));
}

.ingreso__titulo {
    font-family: var(--display);
    font-weight: 900;
    font-stretch: 125%;
    font-size: clamp(2.75rem, 13vw, 4rem);
    line-height: .85;
    letter-spacing: -.04em;
    text-transform: uppercase;
    margin: 0;
}

.ingreso__bajada {
    color: var(--niebla);
    margin: 14px 0 30px;
    font-size: 15.5px;
    max-width: 32ch;
}

.metodos {
    display: grid;
    gap: 10px;
}

.metodo {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 0 20px;
    background: var(--sala);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--luz);
    font-family: var(--texto);
    font-size: 15.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease, transform 160ms ease;
}

.metodo:hover { border-color: var(--uv-alto); }
.metodo:active { transform: scale(.985); }

.metodo svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.separador {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    font-family: var(--dato);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--niebla);
}

.separador::before,
.separador::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--borde);
}

.campo { display: grid; gap: 8px; }

.campo label {
    font-family: var(--dato);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--niebla);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    min-height: 56px;
    padding: 0 18px;
    background: var(--sala);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--luz);
    font-family: var(--texto);
    font-size: 16px; /* menos de 16px hace que iOS haga zoom al enfocar */
    transition: border-color 200ms ease;
}

.campo select {
    appearance: none;
    /* La flechita va dibujada acá para no depender de la del sistema, que en
       Android sale negra sobre fondo oscuro. */
    background-image: linear-gradient(45deg, transparent 50%, var(--niebla) 50%),
                      linear-gradient(135deg, var(--niebla) 50%, transparent 50%);
    background-position: right 22px center, right 16px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 44px;
}

.campo select option { background: var(--sala); color: var(--luz); }

.campo textarea {
    padding: 16px 18px;
    min-height: 92px;
    line-height: 1.5;
    resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--uv-alto); outline: none; }

.campo input::placeholder,
.campo textarea::placeholder { color: #6C5C82; }

/* Dos campos cortos que entran uno al lado del otro (precio y medida, por caso). */
.campos-par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.campo__ayuda {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--niebla);
}

/* ── Los datos del local ─────────────────────────────────────────────────── */

.logo-caja { display: grid; gap: 14px; }

/* Fondo a cuadros: un logo con transparencia se tiene que ver como es, no
   confundido con el fondo oscuro de la app. */
.logo-caja__muestra {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 148px;
    padding: 18px;
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    background-color: var(--sala);
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%),
        linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%);
    background-size: 22px 22px;
    background-position: 0 0, 11px 11px;
}

.logo-caja__muestra img {
    max-width: 100%;
    max-height: 112px;
    object-fit: contain;
}

.logo-caja__vacio {
    font-family: var(--dato);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--niebla);
    text-align: center;
}

.logo-caja__acciones { display: flex; gap: 10px; }
.logo-caja__acciones .boton { flex: 1; cursor: pointer; }

.logo-caja__ayuda {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--niebla);
}

/* Barra de guardar pegada abajo: el formulario es largo y no se puede obligar
   a volver hasta el final para confirmar. Se levanta sobre la barra inferior,
   con el mismo despegue que usa el pedido flotante de la Barra. */
.guardar-flota {
    position: fixed;
    inset-inline: 0;
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px var(--lat);
    background: rgba(21, 12, 33, .94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--borde);
}

/* Mientras la barra está a la vista, el último campo no puede quedar tapado. */
.app:has(.guardar-flota:not([hidden])) .app__cuerpo { padding-bottom: 108px; }

@media (min-width: 900px) {
    /* Arriba de 900px la barra inferior se va al tope de la pantalla, así que
       acá abajo no hay nada que esquivar. */
    .guardar-flota { bottom: 0; }
}

.guardar-flota__aviso {
    flex: 1;
    font-family: var(--dato);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sodio);
}

.guardar-flota .boton { min-height: 46px; }

.campo input.codigo {
    font-family: var(--dato);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .35em;
    text-align: center;
    padding-inline: 0;
}

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

.aviso {
    display: none;
    padding: 13px 16px;
    border-radius: var(--radio);
    font-size: 14px;
    line-height: 1.45;
}

.aviso[data-visible='si'] { display: block; }

.aviso--error {
    background: rgba(255, 78, 78, .1);
    border: 1px solid rgba(255, 78, 78, .32);
    color: #FFA8A8;
}

/* Mismo cartel, en verde: se reusa el hueco del error para confirmar que algo
   se guardó, así no hay dos avisos peleando por el mismo lugar. */
.aviso--error.aviso--ok {
    background: rgba(90, 220, 150, .1);
    border-color: rgba(90, 220, 150, .34);
    color: #7FE3AC;
}

.aviso--dato {
    background: rgba(255, 182, 39, .09);
    border: 1px solid rgba(255, 182, 39, .3);
    color: var(--sodio);
    font-family: var(--dato);
    font-size: 12.5px;
    letter-spacing: .04em;
}

.letra-chica {
    margin: 26px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--niebla);
}

.letra-chica a { color: var(--uv-alto); }

.oculto { display: none !important; }

/* ── Entrada en escena ───────────────────────────────────────────────────── */

/* Sólo se esconde si hay JS para volver a mostrarlo: sin JS, todo se lee igual. */
.js .sube {
    opacity: 0;
    transform: translateY(18px);
}

.js .sube[data-visible='si'] {
    opacity: 1;
    transform: none;
    transition: opacity 620ms ease, transform 620ms cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--demora, 0ms);
}

/* ── Escritorio: la portada se abre en dos columnas ──────────────────────── */

@media (min-width: 900px) {
    .portada { justify-content: center; }

    .portada__cuerpo {
        display: grid;
        grid-template-columns: 1.35fr .85fr;
        grid-template-areas:
            'marca marca'
            'texto acciones';
        align-items: end;
        column-gap: 48px;
    }

    .portada__rotulo { grid-column: 1 / -1; }
    .marca           { grid-area: marca; }
    .portada__texto  { grid-area: texto; }
    .portada__lado   { grid-area: acciones; padding-bottom: 6px; }

    .portada__acciones { margin-top: 22px; }

    .noches { grid-template-columns: repeat(2, 1fr); }
    .noche--destacada { grid-column: 1 / -1; }

    .ficha { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
}

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

    .js .sube,
    .js .sube[data-visible='si'] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    * { scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANTALLAS DE LA APP (cuenta, invitar)
   Mismo rig de luces, pero atenuado: acá el protagonista es el dato.
   ═══════════════════════════════════════════════════════════════════════════ */

.app {
    position: relative;
    min-height: 100svh;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
    isolation: isolate;
}

.app .rig { position: fixed; height: 60svh; inset-block-end: auto; opacity: .5; }

.app__barra {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--cabecera);
    padding: 10px var(--lat);
    padding-top: calc(10px + env(safe-area-inset-top));
    background: rgba(11, 7, 20, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borde);
}

/* El nombre del apartado, en el medio, siempre visible. */
.app__seccion {
    flex: 1;
    margin: 0;
    font-family: var(--dato);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--luz);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app__cuerpo {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding: 22px var(--lat) 40px;
}

.app__titulo {
    font-family: var(--display);
    font-weight: 900;
    font-stretch: 125%;
    font-size: clamp(2.4rem, 12vw, 3.4rem);
    line-height: .85;
    letter-spacing: -.04em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.app__bajada {
    color: var(--niebla);
    font-size: 15px;
    margin: 0 0 26px;
    max-width: 40ch;
}

.bloque { margin-bottom: 34px; }

.bloque__titulo {
    font-family: var(--dato);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--niebla);
    margin: 0 0 12px;
}

/* Tarjetas de dato ------------------------------------------------------- */

.tarjeta {
    background: var(--sala);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 18px 18px 16px;
}

.tarjeta + .tarjeta { margin-top: 10px; }

.tarjeta__fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.tarjeta__nombre { font-weight: 600; font-size: 16px; }

.tarjeta__pie {
    font-family: var(--dato);
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--niebla);
    margin: 10px 0 0;
}

/* Números grandes: lo que le queda al cliente */
.cifra {
    font-family: var(--dato);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--sodio);
    white-space: nowrap;
}

.cifra small {
    font-size: 11px;
    font-weight: 500;
    color: var(--niebla);
}

.resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.resumen .tarjeta { padding: 16px; }
.resumen .tarjeta + .tarjeta { margin-top: 0; }

.resumen dt {
    font-family: var(--dato);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--niebla);
    margin-bottom: 8px;
}

.resumen dd { margin: 0; }

/* Chips ------------------------------------------------------------------ */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--borde);
    font-family: var(--dato);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--niebla);
    white-space: nowrap;
}

.chip--vip    { border-color: rgba(255, 182, 39, .45); color: var(--sodio); }
.chip--disco  { border-color: rgba(168, 123, 255, .45); color: var(--uv-alto); }
.chip--ok     { border-color: rgba(90, 220, 150, .4); color: #7FE3AC; }
.chip--espera { border-color: rgba(255, 182, 39, .4); color: var(--sodio); }
.chip--baja   { border-color: var(--borde); color: #7A6A90; }
.chip--mal    { border-color: rgba(255, 106, 106, .45); color: #FF8A8A; }

/* ── Auditoría ───────────────────────────────────────────────────────────── */

.auditoria__filtros { display: grid; gap: 14px; margin-bottom: 8px; }

/* El día como separador: el registro se lee por jornada, no como una lista
   infinita de horarios sueltos. */
.registros__dia {
    font-family: var(--dato);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--niebla);
    margin: 26px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--borde);
}

.registro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 4px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(44, 29, 66, .55);
    color: inherit;
    text-align: left;
    font-family: var(--texto);
    font-size: 15px;
    cursor: pointer;
}

.registro:hover { background: rgba(122, 61, 255, .07); }

.registro__hora {
    font-family: var(--dato);
    font-size: 11px;
    color: var(--niebla);
    padding-top: 3px;
    white-space: nowrap;
}

.registro__cuerpo { flex: 1; min-width: 0; }

.registro__accion {
    display: block;
    font-family: var(--dato);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--uv-alto);
}

.registro__desc {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.registro__actor {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--niebla);
}

/* El contexto guardado con cada acción: importes, estados de antes y después. */
.registro__datos {
    font-family: var(--dato);
    font-size: 11.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--noche);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 14px 16px;
    margin: 0;
    color: var(--niebla);
    overflow-x: auto;
}

/* Selector de fechas (scroll horizontal, se agarra con el pulgar) --------- */

.fechas {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-inline: calc(var(--lat) * -1);
    padding-inline: var(--lat);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.fechas::-webkit-scrollbar { display: none; }

.fecha {
    flex: none;
    scroll-snap-align: start;
    min-width: 168px;
    padding: 14px 16px;
    background: var(--sala);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    text-align: left;
    color: var(--luz);
    font-family: var(--texto);
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease;
}

.fecha[aria-pressed='true'] {
    border-color: var(--sodio);
    background: rgba(255, 182, 39, .07);
}

.fecha__dia {
    display: block;
    font-family: var(--dato);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sodio);
}

.fecha__titulo {
    display: block;
    font-weight: 600;
    font-size: 15px;
    margin-top: 6px;
    line-height: 1.2;
}

.fecha__cupo {
    display: block;
    font-family: var(--dato);
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--niebla);
    margin-top: 8px;
}

/* Lista de personas ------------------------------------------------------ */

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

.persona {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 62px;
    padding: 10px 14px;
    background: var(--sala);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--luz);
    font-family: var(--texto);
    text-align: left;
    cursor: pointer;
    transition: border-color 200ms ease, transform 160ms ease;
}

.persona:hover { border-color: var(--uv-alto); }
.persona:active { transform: scale(.99); }

li.persona { cursor: default; }

.persona__inicial {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--uv), var(--sodio));
    color: #12081F;
    font-family: var(--display);
    font-weight: 900;
    font-stretch: 118%;
    font-size: 16px;
}

.persona__datos { flex: 1; min-width: 0; }

.persona__nombre {
    display: block;
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.persona__contacto {
    display: block;
    font-family: var(--dato);
    font-size: 10px;
    letter-spacing: .04em;
    color: var(--niebla);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.persona__accion {
    flex: none;
    min-height: 40px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--niebla);
    font-family: var(--dato);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

.persona__accion:hover { border-color: #FF6B6B; color: #FF9B9B; }

/* Contador de invitados -------------------------------------------------- */

.contador {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-left: 2px solid var(--sodio);
    background: rgba(255, 182, 39, .05);
    border-radius: 0 var(--radio) var(--radio) 0;
    margin-bottom: 14px;
}

.contador__cifra {
    font-family: var(--dato);
    font-size: 20px;
    font-weight: 700;
    color: var(--sodio);
}

.contador__texto {
    font-family: var(--dato);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--niebla);
    text-align: right;
}

/* Estado vacío ----------------------------------------------------------- */

.vacio {
    padding: 26px 20px;
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    color: var(--niebla);
    font-size: 14.5px;
    text-align: center;
}

/* Barra inferior --------------------------------------------------------- */

.tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: space-around;
    gap: 4px;
    padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
    background: rgba(11, 7, 20, .92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--borde);
}

.tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-height: 52px;
    padding: 7px 4px;
    border-radius: 12px;
    color: var(--niebla);
    text-decoration: none;
    font-family: var(--dato);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.tab svg { width: 21px; height: 21px; }

.tab[aria-current='page'] { color: var(--sodio); }

.tab__globo {
    position: absolute;
    transform: translate(14px, -6px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--sodio);
    color: #2A1800;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

@media (min-width: 900px) {
    .tabbar {
        position: sticky;
        top: 0;
        bottom: auto;
        max-width: 720px;
        margin-inline: auto;
        justify-content: center;
        gap: 8px;
        border-top: 0;
        border-bottom: 1px solid var(--borde);
    }

    .tab { flex: 0 0 auto; flex-direction: row; padding-inline: 16px; }
    .app { padding-bottom: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CABECERA DE LA APP
   ═══════════════════════════════════════════════════════════════════════════ */

.marca-chica {
    font-family: var(--display);
    font-weight: 900;
    font-stretch: 125%;
    font-size: 20px;
    letter-spacing: -.03em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--luz);
}

.app__acciones { display: flex; align-items: center; gap: 8px; }

.avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--borde);
    background: var(--sala);
    color: var(--luz);
    font-family: var(--display);
    font-weight: 900;
    font-size: 15px;
    text-decoration: none;
}

.avatar[aria-current='page'] { border-color: var(--sodio); color: var(--sodio); }

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA — carta, preparación y pedido
   ═══════════════════════════════════════════════════════════════════════════ */

.filtros {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-inline: calc(var(--lat) * -1);
    padding: 0 var(--lat) 8px;
    scrollbar-width: none;
}

.filtros::-webkit-scrollbar { display: none; }

.filtro {
    flex: none;
    min-height: 40px;
    padding: 0 16px;
    background: var(--sala);
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--niebla);
    font-family: var(--dato);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.filtro[aria-pressed='true'] {
    background: var(--luz);
    border-color: var(--luz);
    color: #120A1C;
}

.carta { display: grid; gap: 8px; }

.trago {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 16px;
    background: var(--sala);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--luz);
    font-family: var(--texto);
    text-align: left;
    cursor: pointer;
    transition: border-color 200ms ease, transform 160ms ease;
}

.trago:hover:not(:disabled) { border-color: var(--sodio); }
.trago:active:not(:disabled) { transform: scale(.99); }
.trago:disabled { opacity: .45; cursor: not-allowed; }

.trago__datos { flex: 1; min-width: 0; }

.trago__nombre {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15.5px;
}

.trago__nombre .punto {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--sodio);
    flex: none;
}

.trago__desc {
    display: block;
    color: var(--niebla);
    font-size: 13px;
    margin-top: 3px;
}

.trago__medida {
    display: block;
    font-family: var(--dato);
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7A6A90;
    margin-top: 6px;
}

.trago__precio {
    flex: none;
    text-align: right;
    font-family: var(--dato);
    font-size: 14px;
    font-weight: 700;
    color: var(--luz);
}

.trago__mas {
    display: block;
    margin-top: 8px;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sodio);
}

/* Hoja de preparación ---------------------------------------------------- */

.hoja {
    width: min(560px, 100%);
    max-height: 88svh;
    margin: auto auto 0;
    padding: 0;
    border: 0;
    border-radius: var(--radio) var(--radio) 0 0;
    background: var(--sala);
    color: var(--luz);
    overflow: hidden;
}

.hoja::backdrop { background: rgba(5, 2, 10, .72); backdrop-filter: blur(3px); }

.hoja__cuerpo {
    max-height: calc(88svh - 96px);
    overflow-y: auto;
    padding: 22px var(--lat) 16px;
    border-bottom: 1px solid var(--borde);
}

.hoja__titulo {
    font-family: var(--display);
    font-weight: 900;
    font-stretch: 118%;
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin: 0;
}

.hoja__desc { color: var(--niebla); font-size: 14px; margin: 8px 0 0; }

.hoja__pie {
    display: flex;
    gap: 10px;
    padding: 14px var(--lat) calc(14px + env(safe-area-inset-bottom));
    background: var(--sala);
}

.hoja__pie .boton { flex: 1; }

.grupo { margin-top: 22px; }

.grupo__titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--dato);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--niebla);
    margin-bottom: 10px;
}

.grupo__obligatorio { color: var(--sodio); }

.opciones { display: grid; gap: 6px; }

.opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var(--borde);
    border-radius: 11px;
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease;
}

.opcion:has(input:checked) {
    border-color: var(--sodio);
    background: rgba(255, 182, 39, .07);
}

.opcion input {
    appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--borde);
    background: transparent;
    cursor: pointer;
}

.opcion input[type='radio'] { border-radius: 50%; }
.opcion input[type='checkbox'] { border-radius: 6px; }

.opcion input:checked {
    border-color: var(--sodio);
    background: var(--sodio);
    box-shadow: inset 0 0 0 3.5px var(--sala);
}

.opcion span { flex: 1; font-size: 15px; }

.opcion .recargo {
    flex: none;
    font-family: var(--dato);
    font-size: 11px;
    color: var(--sodio);
}

/* Selector de cantidad --------------------------------------------------- */

.cantidad {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--noche);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 4px;
}

.cantidad button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--luz);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.cantidad button:disabled { opacity: .3; cursor: not-allowed; }

.cantidad output {
    min-width: 34px;
    text-align: center;
    font-family: var(--dato);
    font-size: 15px;
    font-weight: 700;
}

/* Pedido en curso -------------------------------------------------------- */

.pedido-flota {
    position: fixed;
    inset-inline: 0;
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 4;
    padding-inline: var(--lat);
    pointer-events: none;
}

.pedido-flota .boton {
    width: min(680px, 100%);
    margin-inline: auto;
    pointer-events: auto;
    justify-content: space-between;
    box-shadow: 0 14px 34px rgba(5, 2, 10, .6);
}

.pedido-flota[hidden] { display: none; }

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

.linea-pedido__datos { flex: 1; min-width: 0; }

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

.linea-pedido__prep {
    display: block;
    font-family: var(--dato);
    font-size: 10px;
    letter-spacing: .04em;
    color: var(--niebla);
    margin-top: 4px;
    line-height: 1.5;
}

.linea-pedido__precio {
    font-family: var(--dato);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 0 4px;
}

.total__cifra {
    font-family: var(--dato);
    font-size: 24px;
    font-weight: 700;
    color: var(--sodio);
}

/* Elección de pago ------------------------------------------------------- */

.pagos { display: grid; gap: 8px; margin-top: 8px; }

.pago {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 62px;
    padding: 0 16px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    cursor: pointer;
}

.pago:has(input:checked) { border-color: var(--sodio); background: rgba(255, 182, 39, .07); }

.pago input {
    appearance: none;
    width: 20px; height: 20px;
    margin: 0;
    border: 1.5px solid var(--borde);
    border-radius: 50%;
    cursor: pointer;
}

.pago input:checked { border-color: var(--sodio); background: var(--sodio); box-shadow: inset 0 0 0 3.5px var(--noche); }

.pago__datos { flex: 1; }
.pago__nombre { display: block; font-weight: 600; font-size: 15px; }
.pago__ayuda  { display: block; font-size: 12.5px; color: var(--niebla); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN
   ═══════════════════════════════════════════════════════════════════════════ */

.tabla-admin {
    display: grid;
    gap: 6px;
}

.fila-admin {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
    align-items: center;
    padding: 12px 14px;
    background: var(--sala);
    border: 1px solid var(--borde);
    border-radius: 11px;
}

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

.fila-admin__meta {
    font-family: var(--dato);
    font-size: 9.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--niebla);
    margin-top: 4px;
}

.fila-admin__acciones { display: flex; align-items: center; gap: 6px; }

.precio-edit {
    width: 108px;
    min-height: 42px;
    padding: 0 12px;
    background: var(--noche);
    border: 1px solid var(--borde);
    border-radius: 9px;
    color: var(--luz);
    font-family: var(--dato);
    font-size: 13px;
    text-align: right;
}

.precio-edit:focus { border-color: var(--sodio); outline: none; }

.mini {
    min-height: 42px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--borde);
    border-radius: 9px;
    color: var(--niebla);
    font-family: var(--dato);
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.mini:hover { border-color: var(--sodio); color: var(--sodio); }
.mini--activa { border-color: var(--sodio); color: var(--sodio); }

/* ═══════════════════════════════════════════════════════════════════════════
   CÓDIGOS QR
   ═══════════════════════════════════════════════════════════════════════════ */

.boton-qr {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    margin-inline-start: 8px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--borde);
    border-radius: 11px;
    color: var(--sodio);
    cursor: pointer;
    vertical-align: middle;
    transition: border-color 180ms ease, background-color 180ms ease, transform 160ms ease;
}

.boton-qr svg { width: 21px; height: 21px; }

.boton-qr:hover  { border-color: var(--sodio); background: rgba(255, 182, 39, .08); }
.boton-qr:active { transform: scale(.94); }

.hoja--qr { text-align: center; }

.qr-cuerpo { padding: 26px var(--lat) 18px; }

.qr-titulo {
    font-family: var(--display);
    font-weight: 900;
    font-stretch: 118%;
    font-size: 1.4rem;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin: 0;
}

.qr-detalle {
    font-family: var(--dato);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--niebla);
    margin: 8px 0 0;
}

/* El QR va sobre blanco sí o sí: invertido no lo lee ningún lector */
.qr-lienzo {
    width: min(320px, 74vw);
    margin: 20px auto 0;
    padding: 14px;
    background: #FFFFFF;
    border-radius: 16px;
    line-height: 0;
}

.qr-lienzo svg { display: block; width: 100%; height: auto; }

.qr-codigo {
    font-family: var(--dato);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .12em;
    margin: 16px 0 0;
}

.qr-ayuda {
    font-size: 12.5px;
    color: var(--niebla);
    margin: 8px 0 0;
}

/* QR chico dentro de una tarjeta: se ve siempre, se toca para agrandar */
.qr-chico {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: center;
}

.qr-chico__lienzo {
    display: block;
    width: 148px;
    margin-inline: auto;
    padding: 10px;
    background: #FFFFFF;
    border-radius: 12px;
    line-height: 0;
    transition: transform 180ms ease;
}

.qr-chico__lienzo svg { display: block; width: 100%; height: auto; }

.qr-chico:active .qr-chico__lienzo { transform: scale(.96); }

.qr-chico__pie {
    display: block;
    margin-top: 9px;
    font-family: var(--dato);
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--niebla);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENÚ DE PESTAÑAS PEGADO ARRIBA (la Barra)
   ═══════════════════════════════════════════════════════════════════════════ */

.segmentos {
    position: sticky;
    top: calc(var(--cabecera) + env(safe-area-inset-top));
    z-index: 3;
    display: flex;
    gap: 4px;
    margin: 4px calc(var(--lat) * -1) 22px;
    padding: 10px var(--lat);
    background: rgba(11, 7, 20, .93);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borde);
}

.segmento {
    flex: 1;
    position: relative;
    min-height: 46px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--niebla);
    font-family: var(--dato);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.3;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.segmento[aria-selected='true'] {
    background: var(--sala);
    border-color: var(--sodio);
    color: var(--sodio);
    font-weight: 700;
}

.segmento__globo {
    display: inline-grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    margin-inline-start: 5px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--sodio);
    color: #2A1800;
    font-size: 9px;
    font-weight: 700;
    vertical-align: middle;
}

@media (min-width: 900px) {
    /* En escritorio la barra inferior se pega arriba, así que este menú va debajo */
    .segmentos { top: 69px; }
}

/* Menú lateral -----------------------------------------------------------
   Las cuatro secciones de la noche viven en la barra inferior, al alcance del
   pulgar. Acá va lo que se toca de vez en cuando. */

.hamburguesa {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-inline-start: -10px;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: var(--luz);
    cursor: pointer;
}
.hamburguesa svg { width: 22px; height: 22px; }
.hamburguesa:active { background: rgba(247, 243, 251, .06); }

.menu {
    width: min(340px, 86vw);
    max-width: none;
    height: 100%;
    max-height: 100svh;
    margin: 0 0 0 auto;              /* entra desde la derecha */
    padding: 0;
    border: 0;
    border-inline-start: 1px solid var(--borde);
    background: var(--sala);
    color: var(--luz);
    display: none;                   /* cerrado no ocupa ni tapa nada */
    flex-direction: column;
}
.menu[open] { display: flex; }




.menu::backdrop { background: rgba(5, 2, 10, .72); backdrop-filter: blur(3px); }

.menu[open] { animation: menu-entra 240ms cubic-bezier(.22, 1, .36, 1); }

@keyframes menu-entra {
    from { transform: translateX(14px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .menu[open] { animation: none; }
}

.menu__cuerpo {
    flex: 1;
    overflow-y: auto;
    padding: calc(18px + env(safe-area-inset-top)) 20px 10px;
}
.menu__encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--borde);
}
.menu__nombre {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}
.menu__contacto {
    margin: 4px 0 0;
    font-family: var(--dato);
    font-size: 11px;
    color: var(--niebla);
}
.menu__cerrar {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    margin: -6px -8px 0 0;
    background: transparent;
    border: 0;
    color: var(--niebla);
    cursor: pointer;
}
.menu__cerrar svg { width: 20px; height: 20px; }

.menu__grupo { padding: 18px 0 6px; }

.menu__titulo {
    margin: 0 0 6px;
    font-family: var(--dato);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--uv-alto);
}
.menu__enlace {
    display: flex;
    align-items: center;
    min-height: 46px;
    color: var(--luz);
    font-size: 15.5px;
    text-decoration: none;
    border-bottom: 1px solid rgba(44, 29, 66, .5);
}
.menu__enlace:last-child { border-bottom: 0; }
.menu__enlace:active { color: var(--sodio); }
.menu__enlace[aria-current='page'] { color: var(--sodio); font-weight: 600; }

.menu__pie {
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--borde);
}

/* Mi perfil --------------------------------------------------------------- */

.campo + .campo { margin-top: 16px; }
.campo + .boton { margin-top: 22px; }

.campo__ayuda {
    margin: 0;
    font-size: 12.5px;
    color: var(--niebla);
}

.perfil__tapa {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 0 22px;
}
.perfil__inicial {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--borde);
    background: linear-gradient(150deg, rgba(122, 61, 255, .22), rgba(255, 182, 39, .12));
    font-family: var(--display);
    font-weight: 900;
    font-size: 26px;
    color: var(--luz);
}
.perfil__nombre {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.15;
}
.perfil__desde {
    margin: 4px 0 0;
    font-family: var(--dato);
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--niebla);
}

/* El cumpleaños: cuando está cerca, se prende. */
.aviso--cumple {
    background: rgba(122, 61, 255, .1);
    border: 1px solid rgba(122, 61, 255, .32);
    color: var(--luz);
    font-size: 13.5px;
}
.aviso--cumple strong { color: var(--uv-alto); }

.aviso--cumple.aviso--fiesta {
    background: rgba(255, 182, 39, .12);
    border-color: rgba(255, 182, 39, .45);
}
.aviso--cumple.aviso--fiesta strong { color: var(--sodio); }

/* Dar ingreso — el lector de la puerta ------------------------------------ */

.aforo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.aforo__sector {
    padding: 14px 16px;
    background: var(--sala);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.aforo__sector--lleno { border-color: rgba(255, 92, 92, .5); }

.aforo__nombre {
    margin: 0;
    font-family: var(--dato);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--niebla);
}
.aforo__cifra {
    margin: 6px 0 0;
    font-family: var(--display);
    font-weight: 900;
    font-size: 2rem;
    line-height: 1;
}
.aforo__cifra small { font-size: .9rem; color: var(--niebla); font-weight: 400; }

.aforo__barra {
    height: 4px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(247, 243, 251, .08);
    overflow: hidden;
}
.aforo__barra span {
    display: block;
    height: 100%;
    background: var(--sodio);
    transition: width 400ms ease;
}
.aforo__sector--lleno .aforo__barra span { background: #FF5C5C; }

.aforo__pie {
    margin: 8px 0 0;
    font-family: var(--dato);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--niebla);
}
.aforo__sector--lleno .aforo__pie { color: #FF8A8A; }

.lector {
    position: relative;
    margin-top: 20px;
    border-radius: var(--radio);
    overflow: hidden;
    background: #000;
}

/* html5-qrcode arma adentro su propio video y su recuadro de puntería. */
#lectorQr { width: 100%; }
#lectorQr video {
    width: 100% !important;
    display: block;
    border-radius: var(--radio);
}
#lectorQr img { display: none; }        /* el logo que mete la librería */

.lector__cerrar {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    min-height: 44px;
    z-index: 2;
}

/* El resultado ocupa la pantalla y se lee de lejos */
.fallo {
    width: min(520px, 100%);
    max-width: none;
    height: 100%;
    max-height: 100svh;
    margin: 0;
    padding: 0;
    border: 0;
    display: none;
    flex-direction: column;
    color: var(--luz);
    background: var(--sala);
}
.fallo[open] { display: flex; }
.fallo::backdrop { background: rgba(5, 2, 10, .8); }

.fallo--ok  { background: #123021; }
.fallo--mal { background: #3A1220; }
.fallo--ojo { background: #3A2E10; }

.fallo__cuerpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 30px var(--lat);
    text-align: center;
}
.fallo__icono {
    font-size: 68px;
    line-height: 1;
    margin-bottom: 6px;
}
.fallo__titulo {
    margin: 0;
    font-family: var(--display);
    font-weight: 900;
    font-stretch: 118%;
    font-size: clamp(2.4rem, 13vw, 3.6rem);
    line-height: .95;
    text-transform: uppercase;
}
.fallo__mensaje {
    margin: 4px 0 18px;
    font-size: 16px;
    color: rgba(247, 243, 251, .82);
}
.fallo__cuerpo .ficha { text-align: left; }
.fallo__cuerpo .ficha > div { border-bottom-color: rgba(247, 243, 251, .14); }

.fallo__pie {
    padding: 16px var(--lat) calc(20px + env(safe-area-inset-bottom));
}

.lectura {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    border-inline-start-width: 3px;
}
.lectura + .lectura { margin-top: 8px; }
.lectura.fallo--ok  { background: transparent; border-inline-start-color: #4ADE80; }
.lectura.fallo--mal { background: transparent; border-inline-start-color: #FF5C5C; }
.lectura.fallo--ojo { background: transparent; border-inline-start-color: var(--sodio); }

.lectura__quien { margin: 0; font-weight: 600; font-size: 15px; }
.lectura__dato {
    margin: 3px 0 0;
    font-family: var(--dato);
    font-size: 10.5px;
    color: var(--niebla);
}