/* ============================================================
 *  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: 38px; 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; }

/* Un solo dato, así que sin flex ni reparto de ancho: el nombre usa
   la fila entera y solo se corta si de verdad no cabe. Antes compartía
   con una píldora a la derecha y perdía la mitad del espacio. */
.panel-cuenta__cab {
    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;
}
/* Acá vivía .panel-cuenta__saldo, la píldora verde del saldo de
   créditos. Sin créditos que mostrar quedó sin contenido propio, y
   meterle el correo hacía que el nombre perdiera la mitad del ancho.
   Vuelve con v2 si vuelven los créditos. */

.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;
}



/* ============================================================
   DATOS DEL PIE, ACCIONABLES
   ------------------------------------------------------------
   La dirección abre el mapa y el número marca. Es lo que la gente
   intenta hacer con ellos en un celular; si no responden, los
   copian a mano y ahí se equivocan.

   VAN SUBRAYADOS, y no es cosmético: las pautas de accesibilidad
   piden que un enlace se distinga por algo más que el color, para
   quien no distingue colores. Un enlace que solo se nota por ser
   celeste, para esa persona es texto.
   ============================================================ */

.footer-dato__enlace {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, .35);
}
.footer-dato__enlace:hover,
.footer-dato__enlace:focus-visible {
    color: var(--sp-amarillo);
    text-decoration-color: currentColor;
}

/* Área táctil: en celular el pie es lo último que se toca y suele
   tocarse con el pulgar, que apunta peor que el índice. Dos líneas
   de texto pegadas hacen que uno marque cuando quería escribir. */
@media (max-width: 600px) {
    .footer-dato__enlace {
        display: inline-block;
        padding: 6px 0;
    }
}


/* ============================================================
 *  `hidden` NO GANA CONTRA UN `display` ESCRITO A MANO
 * ------------------------------------------------------------
 *  El navegador oculta con `display: none` desde su hoja por
 *  defecto, y cualquier `display` de autor tiene más peso. Un
 *  elemento con `hidden` y `display: grid` queda oculto para el
 *  HTML y visible en la pantalla.
 *
 *  Las reglas de abajo lo devuelven al orden. Hace falta una por
 *  cada clase que combine `hidden` con un `display` propio.
 * ============================================================ */
.btn[hidden]   { display: none; }
.campo[hidden] { display: none; }


/* ============================================================
   AVISO DE «YA TENÉS CUENTA»
   ------------------------------------------------------------
   Azul y no rojo: no es un error. Se puede seguir como invitado
   —hay casos legítimos, como reservar para un tercero— y el rojo
   diría «esto está mal».

   La regla [hidden] va PRIMERO y es obligatoria: sin ella el
   `display: flex` de abajo le gana al atributo y la caja se ve
   vacía, con su borde y su relleno.

   VIVE ACÁ y no en reservas.css porque lo usan tres pantallas: la
   confirmación de reserva, el formulario de crear cuenta y —vía
   admin.css— la de cliente nuevo. Estaba en reservas.css, que
   login.php no carga: el aviso salía sin borde, sin fondo y sin
   botón.
   ============================================================ */

.campo__cuenta[hidden] { display: none; }

.campo__cuenta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 10px 14px;
    border: 1px solid #c7ddf5;
    border-radius: 10px;
    background: #f2f8ff;
    font-size: .88rem;
    color: #0b3d73;
}

.campo__cuenta-btn {
    flex: 0 0 auto;
    padding: 7px 16px;
    border-radius: 8px;
    background: #005DB6;
    color: #fff;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
}
.campo__cuenta-btn:hover { background: #004d97; }


/* ============================================================
   LA CAJA DE «FALTA PAGAR»
   ------------------------------------------------------------
   Va arriba del resumen porque es lo ÚNICO que la persona tiene
   que hacer ahora.

   VIVE ACÁ Y NO EN reservas.css porque lo usan DOS pantallas de
   secciones distintas: reservas/gracias.php y ver-reserva.php. Y
   esa segunda NO carga reservas.css —carga reserva-estado.css—
   así que el bloque salía sin borde, sin fondo y con el botón
   como texto suelto.

   Mismo error que con .campo__cuenta en el lote 28: un estilo
   guardado en la hoja de una sección y usado desde otra.

   SE LLAMA `falta-pagar` Y NO `pago-caja` POR UNA RAZÓN:
   `.pago-caja` YA EXISTÍA en esta hoja, dos veces, y las dos con
   `display: flex; justify-content: space-between`. Son las filas
   del desglose de un pago — nombre a la izquierda, monto a la
   derecha.

   Al reusar ese nombre, mi caja heredó el flex y puso el título,
   las instrucciones, el código y el formulario UNO AL LADO DEL
   OTRO, cada uno en su columna angosta. Se veía roto y el HTML
   estaba perfecto.

   Antes de crear una clase hay que buscar si el nombre ya está
   tomado. `pago-caja` sonaba libre y no lo estaba.
   ============================================================ */

/* Anula el flex que pueda venir de una `.pago-caja` anterior si
   algún día alguien vuelve a mezclarlas. Barato y evita repetir
   el mismo diagnóstico. */
.falta-pagar {
    display: block;

    /* `.gracias` centra TODO su contenido, y eso está bien para el
       título y la bajada. Acá no: son instrucciones para seguir
       paso a paso, y un párrafo centrado de cuatro líneas obliga a
       buscar dónde empieza cada una. */
    text-align: left;
}

/* ============================================================
   ÁMBAR SI FALTA, VERDE SI YA AVISÓ
   ------------------------------------------------------------
   Era azul, que no dice nada: es el color de «información». El
   correo ya usaba ámbar para lo que falta, y tener la pantalla en
   otro color hace que se lean como dos cosas distintas cuando son
   la misma.

   Ámbar y no rojo, por lo mismo de siempre: no es un error. El
   cupo está apartado y hay tiempo.
   ============================================================ */
.falta-pagar {
    padding: 20px 22px;
    margin-bottom: 20px;
    border: 1px solid #f0dcc0;
    border-radius: 14px;
    background: #fffaf3;
}
.falta-pagar__titulo { color: #92400e; }
.falta-pagar__texto,
.falta-pagar__ref    { color: #7c2d12; }

/* Cuando ya avisó, la caja entera pasa a verde: el estado cambió y
   el color tiene que cambiar con él. Si se quedara ámbar, el
   mensaje diría «ya avisaste» sobre un fondo que grita «falta». */
.falta-pagar:has(.falta-pagar__titulo--ok) {
    border-color: #bfe3cd;
    background: #f2faf5;
}
/* Y sus hijos con ella: si el texto se quedara en el marrón del
   ámbar sobre fondo verde, se leería como un error de impresión. */
.falta-pagar:has(.falta-pagar__titulo--ok) .falta-pagar__texto { color: #14532d; }
.falta-pagar:has(.falta-pagar__titulo--ok) .falta-pagar__nota  { color: #4a7c5f; }

.falta-pagar__titulo {
    margin: 0 0 12px;
    font-size: 1.05rem;
    color: #0b3d73;
}
.falta-pagar__texto { margin: 0 0 14px; font-size: .92rem; line-height: 1.5; }
.falta-pagar__accion { margin: 0 0 16px; }

/* El aviso de monto que no calza va en ámbar y ocupa su lugar: es
   lo que hay que leer antes de pagar de más. */
.falta-pagar__alerta {
    padding: 12px 14px;
    margin: 0 0 14px;
    border: 1px solid #f0dcc0;
    border-radius: 10px;
    background: #fffaf3;
    color: #92400e;
    font-size: .9rem;
}

/* El código, grande y aparte. Va en el detalle de la
   transferencia y es lo único que después permite encontrar ese
   pago entre veinte iguales. Enterrado en un párrafo no se copia:
   solo se lee. */
/* El código, en su propia línea y con aire. Antes compartía renglón
   con el texto y quedaba a la mitad de una frase: hay que copiarlo,
   no leerlo al pasar. */
/* ============================================================
   TODO DENTRO DE LA CAJA COMPARTE SU FAMILIA DE COLOR
   ------------------------------------------------------------
   Este recuadro era GRIS AZULADO dentro de una caja ámbar, y el
   botón blanco. Los tres colores no se hablaban: el recuadro se
   perdía contra el fondo y el botón parecía deshabilitado.

   Mismo criterio que en el correo, donde el bloque entero es de
   una sola familia. Una caja que avisa de algo tiene que leerse
   como una sola cosa, no como tres piezas pegadas.
   ============================================================ */
.falta-pagar__ref {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin: 0 0 16px;
    border: 1px solid #f0dcc0;
    border-radius: 10px;
    background: #fff6e9;
    font-size: .9rem;
    color: #7c2d12;
}
.falta-pagar__codigo {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    background: #0b1e3f;
    color: #fff;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: 2px;
    user-select: all;   /* un toque lo selecciona entero, para copiarlo */
}

/* El formulario, separado por una línea: es un paso posterior —«ya
   pagué»— y no parte de las instrucciones de cómo pagar. Pegado
   arriba se lee como si hubiera que llenarlo ANTES de pagar. */
.falta-pagar__form {
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid #f0dcc0;
}

/* EL BOTÓN, SÓLIDO Y OSCURO. Era `.btn--sec` —blanco con borde
   fino— y dentro de una caja de color se lee como apagado, no como
   la acción principal. Y sí lo es: es lo único que hay que hacer
   en toda la caja. */
.falta-pagar__form .btn {
    background: #0b1e3f;
    border-color: #0b1e3f;
    color: #fff;
    min-height: 46px;
    padding: 12px 24px;
}
.falta-pagar__form .btn:hover { background: #16305e; border-color: #16305e; }

.falta-pagar__form .campo__input,
.falta-pagar__form input[type="text"] { background: #fff; }

/* El aviso de monto que no calza: ocupa su lugar y se lee antes de
   pagar de más. Va en un ámbar más fuerte que el fondo para no
   perderse dentro de él. */
.falta-pagar__alerta {
    padding: 12px 14px;
    margin: 0 0 14px;
    border: 1px solid #e8b57a;
    border-radius: 10px;
    background: #fdf0dc;
    color: #92400e;
    font-size: .9rem;
}

.falta-pagar__accion { margin: 0 0 14px; }
.falta-pagar__form .campo { margin-bottom: 12px; }
.falta-pagar__form .campo span { display: block; margin-bottom: 5px; font-size: .88rem; }
.falta-pagar__form input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 1rem;
}
.falta-pagar__nota {
    margin: 14px 0 0;
    font-size: .84rem;
    color: #6b7280;
}

/* ============================================================
   EL ACUSE: «YA NOS AVISASTE»
   ------------------------------------------------------------
   Verde y con el formulario fuera. El formulario tenía que
   desaparecer, no quedarse deshabilitado: mientras siguiera ahí,
   quien no vio el mensaje volvía a apretar.
   ============================================================ */

.falta-pagar__titulo--ok { color: #065f46; }

.falta-pagar__acuse {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    padding: 14px 16px;
    margin: 0 0 14px;
    border-radius: 10px;
    background: #eef8f2;
    font-size: .9rem;
}
.falta-pagar__acuse dt { color: #5b7a6b; }
.falta-pagar__acuse dd { margin: 0; color: #0b3d2c; }

/* En ver-reserva el bloque acompaña a la ficha en vez de
   encabezar la página, así que pesa menos. */
.falta-pagar--compacto {
    margin-top: 18px;
    padding: 16px 18px;
    border-width: 1px;
}
.falta-pagar--compacto .falta-pagar__titulo { font-size: .98rem; }

@media (max-width: 560px) {
    /* Etiqueta arriba del valor: un comprobante largo no entra al
       lado de su etiqueta en 380 píxeles. */
    .falta-pagar__acuse { grid-template-columns: 1fr; gap: 2px; }
    .falta-pagar__acuse dt { margin-top: 8px; font-size: .8rem; }
}



/* ============================================================
   LA AYUDA DEBAJO DE UN CAMPO
   ------------------------------------------------------------
   Estaba solo en reservas.css, y el bloque de «falta pagar» la usa
   desde ver-reserva.php, que no carga esa hoja. Acá la ven las dos.

   Se repite en reservas.css a propósito: quitarla de allá tocaría
   los formularios de reserva por un cambio que no es de ellos, y
   las dos definiciones son idénticas — no hay conflicto posible.
   ============================================================ */

.campo__ayuda { font-size: .82rem; color: #6b7280; margin: 5px 0 0; line-height: 1.45; }


/* ============================================================
   «TODO LISTO» — CUANDO NO QUEDA NADA POR PAGAR
   ------------------------------------------------------------
   Una línea y no una caja. La caja de «falta pagar» pide una
   acción; esta no pide nada, solo confirma. Darle el mismo peso
   visual haría que se lea como si hubiera algo que hacer.
   ============================================================ */

.todo-listo {
    padding: 12px 16px;
    margin: 0 0 18px;
    border-left: 3px solid #16a34a;
    border-radius: 0 8px 8px 0;
    background: #f2faf5;
    color: #14532d;
    font-size: .92rem;
    line-height: 1.5;
}