/* ============================================================
 *  Space Paintball — Tema global del sitio
 *  assets/css/estilos.css
 * ------------------------------------------------------------
 *  Estructura y componentes base de TODO el sitio: encabezado,
 *  pie, botones, formularios y "mi cuenta".
 *
 *  Es la base sobre la que va la identidad visual definitiva
 *  (paleta y tipografías de marca), que se hace de último.
 *  Los componentes —reservas.css, tienda.css— cargan DESPUÉS,
 *  y personalizado.css al final de todo.
 * ============================================================ */

:root {
    --sp-navy:   #0b1e3f;
    --sp-green:  #1f7a47;
    --sp-amber:  #f5b700;
    --sp-ink:    #1f2937;
    --sp-muted:  #6b7280;
    --sp-line:   #e5e7eb;
    --sp-bg:     #f7f8fa;
    --sp-radio:  12px;

    /* Ancho de los contenedores del sitio. Un solo lugar para cambiarlo.
       1440px es el estándar de la industria para paneles y catálogos:
       en un monitor de 1920 usa el 75% y en uno de 1440 va al borde.
       No se pone al 100% a propósito: una línea de texto de 1900px es
       ilegible, por eso eBay, Amazon y Shopify también topan el ancho. */
    --sp-ancho:  1440px;

    /* Aire lateral que crece con la ventana en vez de saltar por pasos. */
    --sp-borde:  clamp(16px, 3vw, 40px);

    /* --- Tipografías ---
       Space Age solo para títulos: es de despliegue, no trae minúsculas
       reales y en un párrafo se vuelve ilegible.

       "SP Texto" NO es una tipografía: es un nombre de familia que
       agrupa dos archivos según el peso. Hoy los dos son Gotham —Book
       para el texto normal, Bold para todo lo que va en negrita— pero
       el nombre es neutro a propósito: describe el papel que cumple,
       no el archivo que le toque adentro. El día que la negrita pase a
       Montserrat se cambia una línea en la declaración de abajo y no
       hay que tocar ninguna otra hoja ni estas variables. */
    --sp-display: 'Space Age', 'SP Texto', system-ui, sans-serif;
    --sp-texto:   'SP Texto', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* --- Colores del brandbook --- */
    --sp-azul:     #005DB6;
    --sp-amarillo: #F9D70D;

    /* --- Ancho de la barra de desplazamiento ---
       La pone assets/js/app.js al cargar. Sirve para las franjas a
       sangre completa: 100vw incluye la barra de desplazamiento pero
       el área de contenido no, así que un bloque estirado con vw
       queda unos píxeles corrido a la derecha en computadora — y
       centrado en celular, donde no hay barra visible. Ese era el
       motivo de que el indicador del hero se viera descentrado solo
       en escritorio. Con la variable en 0 el cálculo es el de antes,
       así que si el JavaScript no carga nada empeora. */
    --sp-barra: 0px;

    /* Alto real del encabezado. Lo mide assets/js/app.js al cargar y
       al cambiar el tamaño de la ventana. Sirve para pegar la franja
       de avisos justo debajo sin números mágicos: el encabezado cambia
       de alto entre escritorio y celular, y cuando el menú se abre. */
    --sp-alto-header: 66px;

    /* Reutilizables para cualquier sección a sangre completa. */
    --sp-sangria:      calc(50% - 50vw + (var(--sp-barra) / 2));
    --sp-sangria-pad:  calc(50vw - 50% - (var(--sp-barra) / 2) + var(--sp-borde));
}

/* ============================================================
   Tipografías
   ------------------------------------------------------------
   Los tres archivos estaban en assets/fonts/ desde junio y ninguna
   hoja los declaraba: el sitio entero venía cayendo a la tipografía
   del sistema. Las declaraciones viven acá, en la hoja global, para
   que apliquen en todas las páginas y no solo donde uno se acuerde.

   font-display: swap muestra el texto de inmediato con la fuente de
   respaldo y lo cambia cuando la de marca termina de bajar. Mejor
   que dejar el título invisible medio segundo.
   ============================================================ */
@font-face {
    font-family: 'Space Age';
    src: url('../fonts/space-age.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* Texto normal: Gotham Book. */
@font-face {
    font-family: 'SP Texto';
    src: url('../fonts/gotham-book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Negritas: Gotham Bold, PARA TODO PESO POR ENCIMA DE 400.
   ------------------------------------------------------------
   EL RANGO 500–900 ES EL PUNTO DE ESTA PRUEBA.

   Antes esta declaración decía solo `font-weight: 700`, y el sitio
   pide cuatro pesos distintos: 500 en tres lugares, 600 en ocho, 700
   en treinta y 800 en uno. Los que no tenían archivo declarado los
   fabricaba el navegador engordando el archivo más cercano por su
   cuenta —eso se llama negrita sintética— y sale con los trazos
   desparejos y las curvas deformadas. El de peso 800 era el peor
   caso: engordaba un archivo que YA era negrita.

   Con el rango, cualquier peso entre 500 y 900 usa gotham-bold tal
   como fue dibujado. Cero síntesis en todo el sitio.

   QUÉ MIRAR AL PROBARLO: los botones, las etiquetas de formulario y
   las cabeceras de tabla del área de cliente. Ahí es donde estaba el
   problema. Si ahora se ven limpias, era la síntesis y con esto
   alcanza. Si siguen empastadas, el problema es Gotham Bold en
   pantalla y ahí sí toca Montserrat.

   PARA CAMBIAR A MONTSERRAT: una sola línea, el src de acá abajo.
   Por eso la familia se llama 'SP Texto' y no 'Gotham': el nombre
   describe el papel que cumple, no el archivo que le toque adentro,
   así que cambiar de tipografía no obliga a tocar ninguna otra hoja
   ni las variables de arriba. */
@font-face {
    font-family: 'SP Texto';
    src: url('../fonts/gotham-bold.woff2') format('woff2');
    font-weight: 500 900;
    font-style: normal;
    font-display: swap;
}

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

/* Texto solo para lectores de pantalla. Vive acá y no en una hoja de
   página porque la usa el pie, que sale en todo el sitio. Estaba
   declarada en portada.css, que solo carga en la portada: la etiqueta
   del campo del boletín habría quedado visible en el resto. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

body {
    margin: 0;
    background: var(--sp-bg);
    color: var(--sp-ink);
    font-family: var(--sp-texto);
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img { max-width: 100%; }
a { color: var(--sp-green); }

/* ============================================================
   Encabezado
   ============================================================ */
.header {
    background: #fff;
    border-bottom: 1px solid var(--sp-line);
    position: sticky;
    top: 0;
    z-index: 50;
}
.header-inner {
    max-width: var(--sp-ancho);
    margin: 0 auto;
    padding: 12px var(--sp-borde);
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo { flex: 0 0 auto; display: block; line-height: 0; }
/* El alto baja por pasos según la pantalla; los cortes están más
   abajo, en el bloque responsive. */
.logo img { height: 46px; width: auto; display: block; }

/* --- Navegación del sitio ---
   Cuatro enlaces y nada más. El "Inicio" salió: el logo cumple esa
   función, que es la convención desde siempre. --- */
.nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-wrap: wrap;
}
.nav a {
    display: inline-block;
    padding: 9px 13px;
    border-radius: 8px;
    color: var(--sp-ink);
    text-decoration: none;
    font-size: .94rem;
    font-weight: 500;
    white-space: nowrap;
}
.nav a:hover { background: var(--sp-bg); color: var(--sp-navy); }
.nav a.activo {
    color: var(--sp-navy);
    font-weight: 700;
    background: var(--sp-bg);
}

/* ============================================================
   Acciones: carrito y cuenta
   ------------------------------------------------------------
   Van FUERA de la hamburguesa y quedan siempre a la vista, también
   en celular. Es lo que hace cualquier tienda: lo que se usa a
   mitad de una compra tiene que estar a un toque, no a dos.
   ============================================================ */
.acciones {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: 8px;
}

.accion {
    position: relative;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--sp-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}
.accion:hover { background: var(--sp-bg); color: var(--sp-navy); }

.accion__badge {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--sp-green);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* Punto verde: dice "hay sesión" sin gastar ancho en un nombre. */
.accion__punto {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sp-green);
    border: 2px solid #fff;
}

/* ============================================================
   Panel de cuenta
   ------------------------------------------------------------
   Se abre desde el icono de persona. Repite los ítems del menú
   lateral de mi-cuenta a propósito: así se llega a "Mis reservas"
   desde cualquier página, y es lo que permitió sacar el segundo
   botón desplegable que había dentro del área de cliente.

   Arranca cerrado desde el CSS y no desde JavaScript: si el script
   no cargara quedaría siempre abierto tapando la página.
   ============================================================ */
.cuenta-menu { position: relative; }

.panel-cuenta {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: 260px;
    background: #fff;
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(11, 30, 63, .14);
    overflow: hidden;
}
.panel-cuenta[data-abierto="1"] { display: block; }

.panel-cuenta__cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sp-line);
}
.panel-cuenta__nombre {
    font-weight: 700;
    color: var(--sp-navy);
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.panel-cuenta__saldo {
    flex: 0 0 auto;
    background: #eafaf0;
    color: #14532d;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.panel-cuenta__nav { padding: 6px 0; }
.panel-cuenta__nav a {
    display: block;
    padding: 9px 16px;
    color: var(--sp-ink);
    text-decoration: none;
    font-size: .92rem;
}
.panel-cuenta__nav a:hover { background: var(--sp-bg); color: var(--sp-navy); }

.panel-cuenta__nota {
    margin: 0;
    padding: 12px 16px 0;
    font-size: .88rem;
    color: var(--sp-muted);
}

.panel-cuenta__pie {
    padding: 10px 16px 14px;
    border-top: 1px solid var(--sp-line);
}
.panel-cuenta__pie a {
    color: var(--sp-muted);
    text-decoration: none;
    font-size: .88rem;
}
.panel-cuenta__pie a:hover { color: var(--sp-navy); }

.panel-cuenta__pie--cta {
    border-top: 0;
    padding-top: 4px;
}
.panel-cuenta__pie--cta .btn-sm {
    display: block;
    text-align: center;
    background: var(--sp-green);
    color: #fff !important;
    padding: 10px 16px;
    border-radius: 9px;
    font-weight: 700;
    text-decoration: none;
}
.panel-cuenta__pie--cta .btn-sm:hover { background: #196b3d; }

/* --- Hamburguesa ---
   Solo carga los cuatro enlaces del sitio. El carrito y la cuenta
   quedan fuera, siempre visibles. --- */
.menu-toggle {
    display: none;
    width: 42px; height: 42px;
    border: 1px solid var(--sp-line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 0;
}
.menu-toggle span {
    display: block; width: 19px; height: 2px;
    background: var(--sp-navy); border-radius: 2px;
}

@media (max-width: 940px) {
    .menu-toggle { display: flex; }
    .header-inner {
        flex-wrap: wrap;
        gap: 10px;
    }
    .acciones { margin-left: 0; }
    .nav {
        display: none;
        order: 3;
        width: 100%;
        margin: 4px 0 0;
        flex-direction: column;
        align-items: stretch;
        border-top: 1px solid var(--sp-line);
        padding-top: 8px;
    }
    .nav[data-abierto="1"] { display: flex; }
    .nav a { padding: 12px 10px; }

    /* Pegado al borde derecho de la pantalla, no del botón. */
    .panel-cuenta {
        right: 0;
        width: min(280px, calc(100vw - 2 * var(--sp-borde)));
    }
}

@media (max-width: 600px) {
    /* Logo más chico: en una pantalla de 390px, 46px de alto se comen
       la fila entera y dejan sin aire a los tres botones. */
    .logo img { height: 32px; }
    .header-inner { padding: 10px var(--sp-borde); gap: 8px; }
    .accion { width: 38px; height: 38px; }
    .menu-toggle { width: 38px; height: 38px; }
}

/* ============================================================
   Contenido
   ============================================================ */
.main {
    flex: 1 0 auto;
    max-width: var(--sp-ancho);
    width: 100%;
    margin: 0 auto;
    padding: 28px var(--sp-borde) 56px;
}
@media (max-width: 600px) {
    .main { padding: 20px var(--sp-borde) 40px; }
}

.seccion { margin-bottom: 32px; }
.seccion-titulo {
    font-family: var(--sp-display);
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sp-navy);
    margin: 0 0 16px;
}

/* ============================================================
   Pie
   ============================================================ */
.footer {
    background: var(--sp-navy);
    color: #c7d3e6;
    margin-top: auto;
    padding: 38px var(--sp-borde) 22px;
    font-size: .92rem;
}
.footer-inner {
    max-width: var(--sp-ancho);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 30px;
}
.footer-col h3, .footer-col h4 {
    margin: 0 0 12px;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #7f96bb;
    font-weight: 700;
}
.footer-marca { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0 0 10px; }
.footer-dato { margin: 0 0 7px; line-height: 1.6; }
.footer a { color: #e8eef7; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer-enlaces { list-style: none; margin: 0; padding: 0; }
.footer-enlaces li { margin-bottom: 10px; }
.footer-enlaces li:last-child { margin-bottom: 0; }
.footer-enlaces a { display: inline-block; }

/* ============================================================
   Boletín en el pie
   ============================================================ */
.footer-col--boletin { min-width: 0; }

.footer-boletin__titulo {
    margin: 0 0 4px;
    font-weight: 700;
    color: #fff;
    font-size: .95rem;
}
.footer-boletin__nota {
    margin: 0 0 12px;
    font-size: .85rem;
    color: #8ea3c4;
    line-height: 1.5;
}

.footer-boletin__fila {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.footer-boletin__fila input {
    flex: 1 1 180px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 9px;
    background: rgba(255,255,255,.07);
    color: #fff;
    font: inherit;
    font-size: .9rem;
}
.footer-boletin__fila input::placeholder { color: #7f93b4; }
.footer-boletin__fila input:focus {
    outline: 2px solid var(--sp-amarillo);
    outline-offset: 1px;
}
.footer-boletin__fila button {
    flex: 0 0 auto;
    padding: 10px 18px;
    border: 0;
    border-radius: 9px;
    background: var(--sp-green);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
}
.footer-boletin__fila button:hover:not(:disabled) { background: #24925a; }
.footer-boletin__fila button:disabled { opacity: .6; cursor: wait; }

.footer-boletin__aviso {
    margin: 10px 0 0;
    font-size: .85rem;
    line-height: 1.5;
    color: #9fe1cb;
}
.footer-boletin__aviso[data-error="1"] { color: #f5a3a3; }

/* Trampa antibots: fuera de pantalla, no display:none. Algunos robots
   ignoran los campos ocultos con display y este los atrapa. */
.footer-boletin__trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.redes { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.red {
    width: 36px; height: 36px; border-radius: 9px;
    background: rgba(255,255,255,.1);
    display: inline-flex; align-items: center; justify-content: center;
}
.red:hover { background: rgba(255,255,255,.22); }
.red img, .red svg { width: 18px; height: 18px; display: block; }

.footer-bajo {
    max-width: var(--sp-ancho);
    margin: 28px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.13);
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: .84rem; color: #8ea3c4;
}

/* ============================================================
   Botones
   ============================================================ */
.btn {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 9px;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.2;
    font-family: inherit;
    background: var(--sp-green);
    color: #fff;
}
.btn:hover:not(:disabled) { background: #196b3d; color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--cta { background: var(--sp-green); color: #fff; }
.btn--cta:hover:not(:disabled) { background: #196b3d; }
.btn--sec, .btn-secundario {
    background: #fff; color: var(--sp-navy); border-color: var(--sp-line);
}
.btn--sec:hover, .btn-secundario:hover { background: var(--sp-bg); color: var(--sp-navy); }

.enlace { color: var(--sp-green); text-decoration: none; font-weight: 600; }
.enlace:hover { text-decoration: underline; }

/* ============================================================
   Formularios
   ============================================================ */
.form { max-width: 460px; }
.campo { display: block; margin-bottom: 16px; }
.campo > span, .campo > label {
    display: block; margin-bottom: 5px;
    font-size: .86rem; color: var(--sp-muted); font-weight: 500;
}
.campo input, .campo select, .campo textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--sp-ink);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--sp-green);
    box-shadow: 0 0 0 3px rgba(31,122,71,.12);
}

.alerta { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: .93rem; }
.alerta-exito { background: #d1fae5; border: 1px solid #a7f3d0; color: #065f46; }
.alerta-error { background: #fee2e2; border: 1px solid #fecaca; color: #991b1b; }

.nota { font-size: .87rem; color: var(--sp-muted); line-height: 1.55; }
.nota--placeholder {
    background: #fff; border: 1px dashed #cbd5e1; border-radius: var(--sp-radio);
    padding: 26px 20px; text-align: center;
}

/* ============================================================
   Mi cuenta
   ============================================================ */
/* .cuenta ya no recorta a 940px: dentro de mi-cuenta el layout de dos
   columnas define el ancho, y fuera de ahí conviene que fluya. */
.cuenta { max-width: 100%; }

.cuenta-saldo {
    background: #fff;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radio);
    padding: 22px 26px;
    margin-bottom: 18px;
}
.cuenta-saldo-num {
    display: block; font-size: 2.1rem; font-weight: 800;
    color: var(--sp-green); line-height: 1;
}
.cuenta-saldo-valor { color: var(--sp-muted); font-size: 1rem; font-weight: 500; }
.cuenta-saldo-label {
    display: block; margin-top: 6px;
    font-size: .8rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--sp-muted);
}

.cuenta-proxima {
    background: #fff;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radio);
    padding: 20px 26px;
    margin-bottom: 18px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
}
.cuenta-proxima-codigo {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 1.5px; font-weight: 700; color: var(--sp-navy);
    background: var(--sp-bg); padding: 9px 15px; border-radius: 8px;
    white-space: nowrap;
}

/* --- Accesos --- */
.cuenta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.tarjeta, .tarjeta-link {
    display: block;
    background: #fff;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radio);
    padding: 18px 20px;
    text-decoration: none;
    color: var(--sp-navy);
    font-weight: 600;
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.tarjeta-link:hover {
    box-shadow: 0 8px 22px rgba(11,30,63,.09);
    transform: translateY(-2px);
    border-color: #cfd8e6;
}

/* --- Historial --- */
.historial, .historial-lista { display: flex; flex-direction: column; gap: 12px; }
.historial__item, .historial-item {
    display: block;
    background: #fff;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radio);
    padding: 16px 20px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .16s ease, border-color .16s ease;
}
.historial__item:hover, .historial-item:hover {
    box-shadow: 0 6px 18px rgba(11,30,63,.08); border-color: #cfd8e6;
}
.historial__cab, .historial-cabecera {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.historial__codigo, .historial-titulo {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700; letter-spacing: 1px; color: var(--sp-navy); font-size: 1rem;
}
.historial__datos, .historial-datos, .historial-montos {
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
    color: var(--sp-muted); font-size: .9rem;
}
.historial__datos strong, .historial-montos strong {
    color: var(--sp-navy); font-size: 1.05rem; margin-left: auto;
}
.historial__pie {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid #f0f2f5;
    font-size: .82rem; color: var(--sp-muted);
}

/* --- Pestañas --- */
.tabs {
    display: flex; gap: 2px; flex-wrap: wrap;
    border-bottom: 2px solid var(--sp-line);
    margin-bottom: 20px;
}
.tabs__btn {
    display: inline-block;
    padding: 11px 18px;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: none;
    color: var(--sp-muted);
    text-decoration: none;
    font-weight: 600; font-size: .95rem;
    font-family: inherit;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
}
.tabs__btn:hover { background: #eef1f5; color: var(--sp-ink); }
.tabs__btn--activa { color: var(--sp-navy); border-bottom-color: var(--sp-green); background: #fff; }

/* --- Verificación pendiente --- */
.verif-banner {
    background: #fef3c7; border: 1px solid #fde68a; border-radius: var(--sp-radio);
    padding: 16px 20px; margin-bottom: 18px;
}
.verif-banner-titulo { margin: 0 0 8px; color: #7c5c0a; font-size: 1rem; }
.verif-item { margin: 0 0 5px; font-size: .9rem; color: #7c5c0a; }
.verif-ok { color: var(--sp-green); font-weight: 600; }

/* --- Consulta / ticket --- */
.consulta { max-width: 640px; margin: 0 auto; }
.consulta__titulo { font-size: 1.6rem; color: var(--sp-navy); margin: 0 0 8px; }
.consulta__intro { color: var(--sp-muted); margin: 0 0 22px; }

@media (max-width: 600px) {
    .cuenta-proxima { flex-direction: column; align-items: flex-start; }
    .historial__datos strong, .historial-montos strong { margin-left: 0; }
}

/* Las reglas .nav-icono, .nav-badge, .nav-avatar y .nav-cuenta vivían
   acá y se borraron: el encabezado ya no usa avatar de iniciales ni
   enlaces de sesión. Lo reemplazaron .accion y .panel-cuenta, más
   arriba en este mismo archivo.

   .nav-avatar sí se conserva —abajo— porque mi-cuenta/_menu.php la
   usa en la cabecera de su menú lateral. */
.nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--sp-navy);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .5px;
    flex: 0 0 32px;
}


/* ============================================================
   Direcciones guardadas
   ============================================================ */
.dir-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}
@media (min-width: 860px) {
    .dir-grid { grid-template-columns: 1fr minmax(300px, 380px); align-items: start; }
}

.dir-card {
    background: #fff;
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
}
.dir-card--pred { border-color: #bfe6cd; background: #f7fdf9; }
.dir-card__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.dir-card__etiqueta { font-weight: 700; color: var(--sp-navy); }
.dir-card__badge {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .5px;
    background: var(--sp-green); color: #fff; padding: 3px 9px; border-radius: 999px;
}
.dir-card__linea { margin: 0 0 3px; color: var(--sp-ink); font-size: .95rem; }
.dir-card__zona { margin: 0 0 3px; color: var(--sp-muted); font-size: .86rem; }
.dir-card__acciones {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid #f2f4f7;
}
.dir-card__acciones form { margin: 0; }

.dir-form {
    background: #fff;
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    padding: 18px;
}
.dir-form__titulo {
    margin: 0 0 14px; font-size: .8rem; text-transform: uppercase;
    letter-spacing: 1px; color: var(--sp-muted);
}
.dir-form__zona { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) {
    .dir-form__zona { grid-template-columns: repeat(3, 1fr); }
}
.dir-form__acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* Elegir dirección en el checkout */
.dir-elegir { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.dir-opcion {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 13px;
    border: 2px solid var(--sp-line);
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
}
.dir-opcion:has(input:checked) { border-color: var(--sp-green); background: #f4fbf7; }
.dir-opcion input { margin-top: 3px; flex: 0 0 auto; }
.dir-opcion strong { display: block; color: var(--sp-navy); font-size: .95rem; }
.dir-opcion small { display: block; color: var(--sp-muted); font-size: .84rem; margin-top: 2px; }
.dir-opcion__pred {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .5px;
    color: var(--sp-green); font-style: normal; margin-left: 6px;
}
.dir-elegir__nota { margin: 0 0 14px; font-size: .84rem; }
[data-dir-manual][hidden] { display: none; }

/* ============================================================
   Reloj del apartado, junto al carrito
   ------------------------------------------------------------
   Solo el número. En un celular de 380px cualquier frase al lado
   del icono del carrito no cabe, y taparle media pantalla a alguien
   que está comprando es peor que no avisarle.

   Quién es se dice con el title del navegador al pasar el cursor.
   En celular no hay «pasar el cursor», así que tocarlo lleva al
   carrito: más útil que un globito que hay que cerrar.
   ============================================================ */
.reloj-apartado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #fffbea;
    border: 1px solid #fde68a;
    color: #7c5c0a !important;
    font-size: .8rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}
.reloj-apartado:hover {
    background: #fef6d5;
}
.reloj-apartado strong {
    /* Cifras de ancho fijo: si no, el número salta al pasar de 10:00
       a 9:59 y el bloque entero se mueve. */
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Últimos dos minutos. */
/* Vencido y esperando la respuesta del servidor. Es el segundo o dos
   que tarda la consulta: el reloj marca 0:00 y sin esto parece
   trabado. Atenuado comunica «ya pasó, se está resolviendo». */
.reloj-apartado[data-vencido="1"],
.cab-reserva__reloj[data-vencido="1"],
.grupo-caja__reloj[data-vencido="1"] {
    opacity: .5;
}

.reloj-apartado[data-urgente="1"] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b !important;
}

@media (max-width: 600px) {
    .reloj-apartado {
        padding: 4px 7px;
        font-size: .74rem;
        gap: 4px;
    }
}

/* ============================================================
   Franja de mensajes, bajo el encabezado
   ------------------------------------------------------------
   BARRA A TODO LO ANCHO, SIN AIRE PROPIO.

   La primera versión era una tarjeta con relleno alrededor. Dos
   problemas: el relleno del contenedor quedaba aunque el mensaje se
   cerrara, y en la portada —donde el encabezado se apoya sobre la
   foto del hero— esa banda blanca cortaba la imagen y se veía como
   un error de maquetación.

   Ahora la barra ocupa el ancho completo y toca el encabezado por
   arriba y el contenido por abajo. Sin huecos: o hay una barra de
   color de borde a borde, que se lee como parte del diseño, o no hay
   nada. El contenedor no tiene relleno ni márgenes propios, así que
   cuando queda vacío no deja rastro — y de todos modos el
   JavaScript lo elimina.
   ============================================================ */
/* PEGADA AL ENCABEZADO, NO A LA PÁGINA.
   El encabezado ya es position:sticky con top:0. La franja se pega
   justo debajo, así que al bajar por una página larga el mensaje
   sigue a la vista. Un aviso que se va con el scroll no sirve: la
   persona baja tres pantallas y ya no sabe qué le dijeron.

   El z-index queda UNO por debajo del encabezado (50) para que, si
   por lo que sea se superponen, el encabezado gane: la navegación
   siempre tiene que estar accesible. */
.avisos {
    margin: 0;
    padding: 0;
    position: sticky;
    top: var(--sp-alto-header, 66px);
    z-index: 49;
}

.aviso {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px var(--sp-borde);
    border: 0;
    border-bottom: 1px solid transparent;
    font-size: .92rem;
    line-height: 1.5;
}

/* El texto se alinea con el contenido del sitio, no con el borde de
   la pantalla: en un monitor ancho, un mensaje pegado a la izquierda
   queda lejísimos de lo que está describiendo. */
/* El contenido de la barra —texto y equis— se centra en el mismo
   ancho que el resto del sitio. En un monitor de 1920 un mensaje
   pegado al borde izquierdo queda lejísimos de lo que describe. */
.aviso {
    justify-content: center;
}
.aviso__texto {
    flex: 0 1 auto;
    min-width: 0;
    max-width: var(--sp-ancho);
}

.aviso--ok {
    background: #dcfce7;
    border-bottom-color: #86efac;
    color: #14532d;
}
.aviso--error {
    background: #fee2e2;
    border-bottom-color: #fca5a5;
    color: #991b1b;
}
.aviso--aviso {
    background: #fef3c7;
    border-bottom-color: #fcd34d;
    color: #78350f;
}
.aviso--info {
    background: #dbeafe;
    border-bottom-color: #93c5fd;
    color: #1e40af;
}

@media (max-width: 600px) {
    .aviso {
        padding: 10px var(--sp-borde);
        font-size: .88rem;
        gap: 8px;
    }
}

/* ============================================================
   Avisos que se cierran solos
   ------------------------------------------------------------
   Los mensajes de la tienda se quedaban hasta recargar y se
   acumulaban. Ahora los de éxito se van a los seis segundos; los de
   error NO, porque si algo salió mal no puede desaparecer antes de
   que la persona alcance a leerlo.
   ============================================================ */
.aviso-cerrar__x {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: .6;
}
.aviso-cerrar__x:hover { opacity: 1; }

.aviso-cerrar[data-yendose] {
    opacity: 0;
    transition: opacity .35s ease;
}

/* ============================================================
   Cabecera de reserva — el mismo bloque en toda la aplicación
   ------------------------------------------------------------
   La dibuja includes/_cabecera-reserva.php y aparece en la ficha
   de la tienda, la barra de contexto, el carrito y el pago. Los
   estilos viven acá, en la hoja global, porque ninguna de esas
   pantallas comparte hoja de página.
   ============================================================ */
.cab-reserva {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.cab-reserva__datos { min-width: 0; }

.cab-reserva__titulo {
    display: block;
    font-weight: 700;
    color: var(--sp-navy);
    letter-spacing: .3px;
}
.cab-reserva__titulo small {
    font-weight: 400;
    color: var(--sp-muted);
    letter-spacing: 0;
}

.cab-reserva__detalle {
    display: block;
    margin-top: 2px;
    font-size: .88rem;
    color: var(--sp-muted);
}

/* SIN RELLENO NI FONDO. Era una píldora con relleno horizontal, y ese
   relleno desalineaba su texto respecto del título y del detalle de
   arriba: los tres arrancaban en columnas distintas dentro de la misma
   caja. Ahora es texto y ya; el color alcanza para distinguirlo.

   display:block y no inline-block: con inline-block, el salto de línea
   y la sangría del HTML entre este span y el anterior se convierten en
   un espacio real y lo corren unos píxeles más. */
.cab-reserva__cupo {
    display: block;
    margin-top: 6px;
    padding: 0;
    color: #14532d;
    font-size: .84rem;
    font-weight: 700;
}
/* Sin entradas libres: deja de ser un dato y pasa a ser un aviso. */
.cab-reserva__cupo[data-agotado="1"] {
    color: #991b1b;
}

/* Mismo aspecto que los relojes del carrito y del encabezado. */
.cab-reserva__reloj {
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: 999px;
    background: #fffbea;
    border: 1px solid #fde68a;
    color: #7c5c0a;
    font-size: .82rem;
    white-space: nowrap;
}
.cab-reserva__reloj strong {
    font-variant-numeric: tabular-nums;
}
.cab-reserva__reloj[data-urgente="1"] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

@media (max-width: 560px) {
    .cab-reserva { align-items: flex-start; }
    .cab-reserva__reloj { font-size: .76rem; padding: 4px 9px; }
}

/* La cabecera compartida dentro de una caja de grupo hereda el ancho
   de la cabecera, no el suyo propio: si no, en el carrito quedaba
   pegada al borde. */
.grupo-caja__cab .cab-reserva {
    flex: 1 1 auto;
    min-width: 0;
}

/* La ficha de producto —.producto-ficha__compra, __cantidad, __btn—
   se estiliza en assets/css/tienda.css, que es su hoja y carga DESPUÉS
   de esta. Acá había una copia de esas reglas: además de duplicar, no
   servía de nada porque gana la de después. Se quitó.
   Si hay que tocar el acomodo de esa fila, va en tienda.css.

   Lo mismo con .entrada-hallada: su recuadro vivía en tienda.css y
   anularlo desde acá era imposible. El arreglo fue sacarle la clase al
   contenedor en el HTML. */


/* El recuadro verde. Lo llevan las dos cajas de la ficha —la de
   contexto y la verificada— para que se vean idénticas; el carrito y
   el pago no, porque ya tienen su propia caja alrededor. */
.cab-reserva--destacada {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 14px 16px;
}