/* ==========================================================================
   Brasa 97 — Hoja base: tokens, portada tipo linktree, horarios, confirmación
   Mobile-first. Ancho de trabajo: 360–480 px.
   ========================================================================== */

:root {
    /* Paleta tomada del menú impreso — fondos oscuros de página */
    --carbon:      #100C0A;
    --humo:        #1B1512;
    --humo-alto:   #241C18;
    --brasa:       #FF512F;
    --rojo:        #C1272D;
    --crema:       #F2E7D5;
    --crema-tenue: rgba(242, 231, 213, 0.62);
    --ceniza:      rgba(242, 231, 213, 0.14);
    --verde:       #5C8F3A;
    --ambar:       #E9B94B;

    /* Superficies claras: tarjetas/controles legibles de noche */
    --tarjeta:         #F6EFE4;
    --tarjeta-hover:   #FFF9F0;
    --tinta:           #1C1411;
    --tinta-tenue:     rgba(28, 20, 17, 0.68);
    --borde-tarjeta:   rgba(28, 20, 17, 0.16);
    --control:         #FFFDF9;
    --control-borde:   rgba(28, 20, 17, 0.22);

    --display: 'Oswald', 'Arial Narrow', sans-serif;
    --texto:   'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --radio:    14px;
    --radio-sm: 10px;
    --sombra:   0 10px 24px rgba(0, 0, 0, 0.45);
    --ancho:    480px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
    background: var(--carbon);
    color: var(--crema);
    font-family: var(--texto);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }

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

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

/* --- Rescoldo de fondo (páginas interiores / login) --------------------- */
.rescoldo {
    position: fixed;
    inset: auto 0 0 0;
    height: 62vh;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(120% 90% at 50% 120%, rgba(255, 81, 47, 0.42) 0%, rgba(193, 39, 45, 0.16) 45%, rgba(16, 12, 10, 0) 72%);
}

/* Portada: foto de parrilla a pantalla completa (solo con .rescoldo--foto) */
.rescoldo--foto {
    inset: 0;
    height: auto;
    overflow: hidden;
    background: #000;
}

.rescoldo--foto .rescoldo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fuego abajo, cielo negro arriba: ancla el arte en móvil y escritorio */
    object-position: center bottom;
    max-width: none;
}

/* Veladura para legibilidad del logo y los accesos sobre la foto */
.rescoldo--foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(16, 12, 10, 0.55) 0%,
            rgba(16, 12, 10, 0.28) 38%,
            rgba(16, 12, 10, 0.42) 68%,
            rgba(16, 12, 10, 0.78) 100%
        ),
        radial-gradient(120% 70% at 50% 100%, rgba(255, 81, 47, 0.18) 0%, rgba(16, 12, 10, 0) 55%);
}

/* --- Contenedor -------------------------------------------------------- */
.envoltura {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 14px 18px 16px;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* --- Encabezado de marca ------------------------------------------------ */
.marca { text-align: center; margin-bottom: 10px; }

/* Logo a color, compacto, sin tarjeta: el negro del PNG es transparente */
.marca__logo {
    width: 118px;
    margin: 0 auto 6px;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    filter: drop-shadow(0 10px 28px rgba(255, 81, 47, 0.22));
}

.marca__logo img {
    width: 100%;
    height: auto;
}

.marca__handle {
    font-family: var(--display);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(242, 231, 213, 0.78);
}

.marca__tagline {
    font-size: 0.78rem;
    color: var(--crema-tenue);
    margin-top: 1px;
}

/* --- Aviso de estado del servicio --------------------------------------- */
.aviso {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: var(--tarjeta);
    border: 1px solid var(--borde-tarjeta);
    border-left: 4px solid var(--ambar);
    border-radius: var(--radio-sm);
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 0.8rem;
    color: var(--tinta-tenue);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.aviso--abierto { border-left-color: var(--verde); }
.aviso--error   { border-left-color: var(--rojo); color: var(--tinta); }
.aviso i { margin-top: 3px; color: var(--tinta); }

/* --- Lista de accesos (linktree) ---------------------------------------- */
.accesos {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.acceso {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--tarjeta);
    border: 1px solid var(--borde-tarjeta);
    border-radius: var(--radio);
    padding: 11px 12px;
    color: var(--tinta);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.acceso:hover,
.acceso:focus-visible {
    background: var(--tarjeta-hover);
    border-color: rgba(193, 39, 45, 0.45);
    transform: translateY(-2px);
}

.acceso--principal {
    background: linear-gradient(135deg, var(--rojo) 0%, #8E1B22 100%);
    border-color: rgba(255, 81, 47, 0.7);
    color: #fff;
}

.acceso--principal:hover { background: linear-gradient(135deg, #D62D33 0%, #9C1E26 100%); }

.acceso--apagado { opacity: 0.55; pointer-events: none; }

.acceso__icono {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(193, 39, 45, 0.12);
    font-size: 1rem;
    color: var(--rojo);
}

.acceso--principal .acceso__icono { color: #fff; background: rgba(0, 0, 0, 0.28); }

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

.acceso__titulo {
    display: block;
    font-family: var(--display);
    font-weight: 500;
    font-size: 0.98rem;
    letter-spacing: 0.04em;
}

.acceso__sub {
    display: block;
    font-size: 0.76rem;
    color: var(--tinta-tenue);
}

.acceso--principal .acceso__sub { color: rgba(255, 255, 255, 0.85); }

.acceso__flecha { color: var(--tinta-tenue); font-size: 0.95rem; }
.acceso--principal .acceso__flecha { color: rgba(255, 255, 255, 0.8); }

/* --- Redes sociales ----------------------------------------------------- */
.redes {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.redes__item {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    background: var(--tarjeta);
    border: 1px solid var(--borde-tarjeta);
    color: var(--tinta);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.redes__item:hover,
.redes__item:focus-visible {
    color: var(--rojo);
    background: var(--tarjeta-hover);
    border-color: rgba(193, 39, 45, 0.5);
    transform: translateY(-2px);
}

/* --- Pie ---------------------------------------------------------------- */
.pie {
    margin-top: auto;
    padding-top: 14px;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(242, 231, 213, 0.45);
}

.pie__creditos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}

.pie__creditos img { width: 94px; opacity: 0.85; }

.pie a { color: rgba(242, 231, 213, 0.6); text-decoration: underline; }

.pie__admin {
    margin-top: 10px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.pie__admin a {
    color: rgba(242, 231, 213, 0.42);
    text-decoration: none;
}

.pie__admin a:hover,
.pie__admin a:focus-visible {
    color: rgba(242, 231, 213, 0.75);
    text-decoration: underline;
}

/* --- Barra superior de páginas interiores ------------------------------- */
.barra {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(16, 12, 10, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ceniza);
}

.barra__volver {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tarjeta);
    border: 1px solid var(--borde-tarjeta);
    color: var(--tinta);
    flex: 0 0 38px;
}

.barra__titulo {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.12rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.barra__extra { margin-left: auto; font-size: 0.85rem; color: var(--crema-tenue); }

/* --- Tarjetas de contenido interior ------------------------------------- */
.panel {
    background: var(--tarjeta);
    border: 1px solid var(--borde-tarjeta);
    border-radius: var(--radio);
    padding: 16px;
    margin-bottom: 14px;
    color: var(--tinta);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.panel__titulo {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rojo);
    margin-bottom: 10px;
}

/* --- Horarios ----------------------------------------------------------- */
.horario { display: flex; flex-direction: column; }

.horario__fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--borde-tarjeta);
}

.horario__fila:last-child { border-bottom: 0; }

.horario__fila--hoy {
    color: var(--tinta);
    font-weight: 600;
}

.horario__dia {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.98rem;
}

.horario__fila--hoy .horario__dia { color: var(--rojo); }

.horario__rango { font-variant-numeric: tabular-nums; color: var(--tinta-tenue); }

.horario__fila--hoy .horario__rango { color: var(--tinta); }

.etiqueta-hoy {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--brasa);
    color: #1A0D08;
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 8px;
    font-weight: 700;
}

/* --- Botones genéricos --------------------------------------------------- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 14px 18px;
    border: 0;
    border-radius: var(--radio);
    background: var(--brasa);
    color: #1A0D08;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.18s ease;
}

.boton:hover:not(:disabled) { filter: brightness(1.08); }
.boton:active:not(:disabled) { transform: scale(0.99); }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }

.boton--fantasma {
    background: var(--control);
    border: 1px solid var(--control-borde);
    color: var(--tinta);
}

.boton--verde { background: var(--verde); color: #F4FFE9; }

/* --- Ticket de confirmación --------------------------------------------- */
.ticket { text-align: center; padding: 26px 18px; }

.ticket__sello {
    width: 74px;
    height: 74px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2rem;
    background: rgba(92, 143, 58, 0.18);
    border: 2px solid var(--verde);
    color: var(--verde);
}

.ticket__folio {
    font-family: var(--display);
    font-size: 2.1rem;
    letter-spacing: 0.06em;
    color: var(--brasa);
    margin: 6px 0 2px;
}

.ticket__estado {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--control);
    border: 1px solid var(--borde-tarjeta);
    color: var(--tinta);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.ticket__lineas {
    text-align: left;
    margin: 20px 0 0;
    border-top: 1px dashed var(--borde-tarjeta);
    padding-top: 14px;
}

.ticket__linea {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 0.94rem;
}

.ticket__linea span:last-child { font-variant-numeric: tabular-nums; }

.ticket__total {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--borde-tarjeta);
    margin-top: 10px;
    padding-top: 12px;
    font-family: var(--display);
    font-size: 1.3rem;
}

.texto-tenue { color: var(--crema-tenue); font-size: 0.88rem; }
.panel .texto-tenue,
.acceso-caja .texto-tenue { color: var(--tinta-tenue); }
.centro { text-align: center; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

/* --- Escritorio: mismo diseño, centrado --------------------------------- */
@media (min-width: 720px) {
    .envoltura { padding: 28px 20px 24px; }
    .marca { margin-bottom: 16px; }
    .marca__logo { width: 156px; margin-bottom: 10px; }
    .marca__handle { font-size: 0.95rem; }
    .marca__tagline { font-size: 0.88rem; }
}