/* ===========================================================================
   guest.css — estilos del flujo del huésped (Etapa 5 Wave 1, v2)
   Alineado visualmente con solardelacosta.com (marrón sólido + dorado).
   Depende de tokens.css y base.css.
   =========================================================================== */

/* --- Header marrón consistente con el sitio principal --- */
.sdc-header {
    background: var(--sdc-brown);
    color: var(--sdc-white);
    /* Queda pegado arriba al scrollear. Sigue ocupando su lugar en el flujo,
       así que no tapa el título de la página. */
    position: sticky;
    top: 0;
    box-shadow: 0 2px 10px rgba(45, 30, 15, 0.25);
    z-index: var(--sdc-z-sticky);
    height: 90px;
    display: flex;
    align-items: center;
    transition: height 0.3s ease;
}
/* Al scrollear se achica, igual que la barra del panel (main.js le pone
   .is-scrolled). Solo en escritorio: en celular ya es compacta. */
@media (min-width: 901px) {
    .sdc-header.is-scrolled { height: 66px; }
    .sdc-header.is-scrolled .sdc-brand img { height: 40px; }
}

/* El header siempre en flujo normal: simple, sin overlapping con la hero.
   Trade-off: perdemos el efecto "header translúcido sobre la foto", pero
   ganamos que el título nunca se oculte. */
.sdc-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sdc-space-6);
    width: 100%;
}
.sdc-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.sdc-brand img {
    height: 52px;
    width: auto;
    display: block;
    transition: height 0.3s ease;
}
.sdc-nav-list {
    list-style: none;
    display: flex;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
    font-size: 1.45rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sdc-nav-list a {
    color: var(--sdc-white);
    text-decoration: none;
    transition: color var(--sdc-trans);
    padding: var(--sdc-space-2) 0;
}
.sdc-nav-list a:hover { color: var(--sdc-sun); }
/* Nota: NO marcamos visualmente "active" — el sitio principal tampoco lo hace,
   y queremos que el header del subdominio se sienta idéntico al del principal. */

/* Lang switcher con banderas (muestra los OTROS dos idiomas, no el actual) */
.sdc-lang {
    display: inline-flex;
    gap: var(--sdc-space-3);
    align-items: center;
    flex-shrink: 0;
}
.sdc-lang a {
    display: inline-block;
    line-height: 0;
    border-radius: 3px;
    overflow: hidden;
    transition: transform var(--sdc-trans), box-shadow var(--sdc-trans);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.sdc-lang a:hover { transform: scale(1.08); }
.sdc-lang img, .sdc-lang svg {
    width: 38px;
    height: 26px;
    display: block;
    object-fit: cover;
}

/* Mobile menu (hamburger) */
.sdc-burger {
    display: none;
    border: none;
    background: transparent;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--sdc-white);
}
.sdc-burger svg { width: 28px; height: 28px; }

@media (max-width: 900px) {
    .sdc-header { height: 72px; }
    .sdc-brand img { height: 44px; }
    .sdc-nav-list { display: none; }
    .sdc-burger { display: inline-flex; }
    .sdc-nav-list.is-open {
        display: flex;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--sdc-brown-deep);
        padding: var(--sdc-space-4);
        box-shadow: var(--sdc-shadow-md);
    }
    .sdc-nav-list.is-open li {
        padding: var(--sdc-space-3) 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .sdc-nav-list.is-open li:last-child { border-bottom: none; }
}

/* --- Hero con foto de fondo (reservas.jpg) --- */
.sdc-hero {
    position: relative;
    /* La hero arranca limpia debajo del header (sin solapamiento), así
       que padding modesto. La altura la determina el contenido + padding. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--sdc-space-12) var(--sdc-space-5) var(--sdc-space-10);
    overflow: hidden;
    isolation: isolate;
    color: var(--sdc-white);
}
.sdc-hero::before {
    /* Foto de fondo fija — continúa por la sección de features
       sin moverse al hacer scroll (efecto parallax sutil).
       Filtro modesto: ligeramente más cálida y saturada. */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('/images/reservas.webp') center/cover no-repeat;
    background-attachment: fixed;
    filter: saturate(1.15) contrast(1.05);
}
.sdc-hero::after {
    /* Overlay con gradiente más oscuro arriba (para que el título blanco
       resalte sobre la zona luminosa del techo) y más cálido abajo. */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(45, 30, 15, 0.55) 0%,
        rgba(74, 50, 25, 0.35) 50%,
        rgba(74, 50, 25, 0.45) 100%
    );
}
.sdc-hero-content {
    text-align: center;
    max-width: 920px; /* el ancho de la search card: con campos de 16px no entraba en 760 */
    width: 100%;
}
.sdc-hero h1 {
    font-family: var(--sdc-font-display);
    font-size: var(--sdc-text-4xl);
    line-height: 1.05;
    margin-bottom: var(--sdc-space-3);
    color: var(--sdc-white);
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
    font-weight: 500;
    letter-spacing: -0.01em;
}
.sdc-hero .sdc-lead {
    color: rgba(255, 255, 255, 0.95);
    font-size: var(--sdc-text-lg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    max-width: 580px;
    margin: 0 auto;
}

/* --- Search card --- */
.sdc-search-card {
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: var(--sdc-radius-lg);
    box-shadow: var(--sdc-shadow-lg);
    padding: var(--sdc-space-6);
    margin: var(--sdc-space-8) auto 0;
    max-width: 920px;
    width: 100%;
    color: var(--sdc-ink);
    text-align: left;
    border-top: 4px solid var(--sdc-sun);
}
.sdc-search-card h2 {
    font-family: var(--sdc-font-body);
    font-size: var(--sdc-text-base);
    font-weight: 700;
    color: var(--sdc-brown);
    margin-bottom: var(--sdc-space-4);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.sdc-search-grid {
    display: grid;
    gap: var(--sdc-space-3);
    grid-template-columns: 1fr;
}
/* Desde 720px: los cuatro campos en una fila y el botón abajo, a todo el ancho.
   Desde 1000px la card ya tiene lugar para sumar el botón a la misma fila.
   minmax(0, …) evita que el ancho propio de los campos de fecha empuje al
   botón fuera de la card. */
@media (min-width: 720px) {
    .sdc-search-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr);
        align-items: end;
    }
    .sdc-search-grid > .sdc-btn { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
    .sdc-search-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;
    }
    .sdc-search-grid > .sdc-btn { grid-column: auto; }
}
.sdc-search-card .sdc-label {
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    color: var(--sdc-brown);
}
.sdc-search-card .sdc-input {
    font-size: 1.6rem;
    padding: 0.85rem 0.95rem;
    height: 52px; /* mismo alto que el botón para que la grilla quede pareja */
}
.sdc-search-card .sdc-btn {
    height: 52px;
    font-size: 1.4rem;
    border-radius: var(--sdc-radius);  /* mismo radio que los inputs (10px), no más pill */
    padding: 0 1.5rem;
}

/* Banner de errores debajo de la grilla — agrupa todos los errores en un solo
   bloque visible, así no se rompe la alineación del search-grid. */
.sdc-form-errors {
    margin-top: var(--sdc-space-4);
    padding: var(--sdc-space-4);
    background: var(--sdc-error-soft);
    border-left: 4px solid var(--sdc-error);
    border-radius: var(--sdc-radius);
    color: var(--sdc-error);
    font-size: 1.4rem;
}
.sdc-form-errors-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}
.sdc-form-errors-head i { font-size: 1.5rem; }
.sdc-form-errors ul {
    margin: 0;
    padding-left: 1.25rem;
}
.sdc-form-errors li {
    line-height: 1.55;
    margin: 0.15rem 0;
}

/* Input con error: borde rojo del .sdc-input-error base + glow sutil */
.sdc-search-card .sdc-input.sdc-input-error {
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

/* --- Trust signals bajo el form --- */
.sdc-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sdc-space-4) var(--sdc-space-8);
    margin-top: var(--sdc-space-6);
    color: rgba(255,255,255,0.97);
    font-size: 1.4rem;
    font-weight: 500;
    list-style: none;
    padding: 0;
}
.sdc-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.sdc-trust-item::before {
    content: '✓';
    width: 26px; height: 26px;
    background: var(--sdc-sun);
    color: var(--sdc-brown-deep);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* --- Features section: misma foto que el hero, fija, con overlay más oscuro
       para que las tarjetas blancas resalten. La continuidad la da
       background-attachment: fixed (misma posición de foto en hero y features). --- */
.sdc-features {
    position: relative;
    isolation: isolate;
    padding: var(--sdc-space-6) 0 var(--sdc-space-10);
    color: var(--sdc-white);
}
.sdc-features::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('/images/reservas.webp') center/cover no-repeat;
    background-attachment: fixed;
    filter: brightness(1.15) saturate(1.2) contrast(1.05);
}
.sdc-features::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(74, 50, 25, 0.45) 0%,
        rgba(45, 44, 44, 0.55) 100%
    );
}
.sdc-features-head {
    text-align: center;
    margin-bottom: var(--sdc-space-10);
    max-width: 720px;
    margin-inline: auto;
}
.sdc-features-head .sdc-eyebrow {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--sdc-sun);
    font-size: 1.4rem;
    letter-spacing: 0.22em;
}
.sdc-features-head h2 {
    font-family: var(--sdc-font-display);
    color: var(--sdc-white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.sdc-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sdc-space-5);
}
@media (min-width: 720px) {
    .sdc-feature-grid { grid-template-columns: repeat(3, 1fr); }
}
.sdc-feature {
    background: var(--sdc-white);
    border-radius: var(--sdc-radius-lg);
    padding: var(--sdc-space-8);
    box-shadow: var(--sdc-shadow-md);
    border: 1px solid var(--sdc-line);
    transition: transform var(--sdc-trans), box-shadow var(--sdc-trans);
}
.sdc-feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--sdc-shadow-lg);
}
.sdc-feature-icon {
    width: 60px; height: 60px;
    background: var(--sdc-cream-2);
    border: 2px solid var(--sdc-sun);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2.8rem;
    line-height: 1;
    margin-bottom: var(--sdc-space-4);
}
.sdc-feature h3 {
    font-family: var(--sdc-font-display);
    font-size: 1.65rem;
    margin-bottom: var(--sdc-space-3);
    color: var(--sdc-brown);
}
.sdc-feature p {
    color: var(--sdc-ink);
    font-size: 1.4rem;
    line-height: 1.55;
}

/* Botones al pie de la sección features — son acciones importantes
   (informar pago / consultar estado de reserva). Los hacemos prominentes:
   tarjeta blanca de borde dorado grueso, ícono dorado grande, texto bold. */
.sdc-features .sdc-btn-ghost {
    background: var(--sdc-white);
    color: var(--sdc-brown);
    border: 2px solid var(--sdc-sun);
    font-size: 1.5rem;
    padding: 1rem 1.8rem;
    font-weight: 700;
    border-radius: var(--sdc-radius-pill);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.sdc-features .sdc-btn-ghost i {
    color: var(--sdc-orange);
    font-size: 1.4rem;
}
.sdc-features .sdc-btn-ghost:hover {
    background: var(--sdc-sun);
    color: var(--sdc-brown-deep);
    border-color: var(--sdc-sun);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.sdc-features .sdc-btn-ghost:hover i {
    color: var(--sdc-brown-deep);
}

/* --- Footer naranja terracota, consistente con solardelacosta.com --- */
.sdc-footer {
    background: #ba5622; /* terracota brillante del sitio principal */
    color: var(--sdc-white);
    padding: var(--sdc-space-12) 0 0;
    position: relative;
}
.sdc-footer-main {
    display: grid;
    gap: var(--sdc-space-8);
    grid-template-columns: 1fr;
    padding-bottom: var(--sdc-space-10);
}
@media (min-width: 800px) {
    .sdc-footer-main {
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }
}
.sdc-footer-brand { display: flex; flex-direction: column; gap: var(--sdc-space-5); }
.sdc-footer-logo {
    height: 64px;
    width: auto;
    max-width: 100%;
    align-self: flex-start;
}
@media (max-width: 600px) {
    /* En mobile fuerza ancho máximo, alto se calcula proporcional para evitar
       que el reset global `img { max-width: 100% }` deforme la imagen. */
    .sdc-footer-logo {
        height: auto;
        width: auto;
        max-width: 280px;
    }
}
.sdc-footer-desc {
    font-size: 1.4rem;
    line-height: 1.5;
    max-width: 620px;
    margin: 0;
}
.sdc-footer-contact {
    font-style: normal;
    font-size: 1.3rem;
    line-height: 1.75;
}
.sdc-footer-contact a { color: var(--sdc-white); text-decoration: none; }
.sdc-footer-contact a:hover { text-decoration: underline; }

.sdc-footer-social h4 {
    font-family: var(--sdc-font-body);
    font-size: var(--sdc-text-lg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--sdc-space-4);
}
.sdc-footer .sdc-socials {
    display: flex;
    gap: var(--sdc-space-3);
    flex-wrap: wrap;
}
.sdc-footer .sdc-socials a {
    width: 42px; height: 42px;
    background: transparent;
    color: var(--sdc-white);
    border: 2px solid var(--sdc-sun);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    text-decoration: none;
    transition: transform var(--sdc-trans), background var(--sdc-trans), color var(--sdc-trans);
}
.sdc-footer .sdc-socials a:hover {
    background: var(--sdc-sun);
    color: #ba5622;
}

/* Copyright sobre fondo dorado (rgb 250,158,44 = --sdc-sun), italic negro */
.sdc-footer-stripe { display: none; } /* fusionamos la tira en el bloque de copyright */
.sdc-footer-copy {
    background: var(--sdc-sun);
    color: #1f1206;
    text-align: center;
    padding: var(--sdc-space-3) var(--sdc-space-5);
    font-size: 1.3rem;
    font-weight: 700;
    position: relative;  /* para anclar la llave discreta a la derecha */
}
.sdc-footer-copy em { font-style: italic; }

/* Llave discreta en la esquina inferior IZQUIERDA: el admin sabe que está acá,
   el huésped la ve como un detalle decorativo. Va a la izquierda para no
   chocar con el botón flotante de WhatsApp (derecha). */
.sdc-admin-key {
    position: absolute;
    left: var(--sdc-space-4);
    top: 50%;
    transform: translateY(-50%);
    color: rgba(31, 18, 6, 0.45);
    font-size: 1.4rem;
    text-decoration: none;
    transition: color var(--sdc-trans), transform var(--sdc-trans);
    padding: 0.4rem;
    line-height: 1;
}
.sdc-admin-key:hover {
    color: var(--sdc-ink);
    transform: translateY(-50%) scale(1.15);
}

/* Cuando el admin YA está logueado, los íconos van visibles a la derecha
   (no hace falta esconderlos — ya pasó el login). */
.sdc-admin-shortcut {
    position: relative;
    margin-left: var(--sdc-space-4);
    color: var(--sdc-ink);
    text-decoration: none;
    font-size: 1.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--sdc-radius);
    transition: background var(--sdc-trans);
}
.sdc-admin-shortcut:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   Bump tipográfico para mobile (<= 600px)
   En pantalla chica los textos pequeños cansan la vista. Aumentamos lo que
   se ve "apretado" sin tocar lo que ya está bien dimensionado por clamp().
   ============================================================================ */
@media (max-width: 600px) {
    .sdc-hero .sdc-lead       { font-size: 1.5rem; }
    .sdc-search-card .sdc-label { font-size: 1.4rem; }
    .sdc-search-card .sdc-input { font-size: 1.6rem; height: 64px; }
    .sdc-search-card .sdc-btn   { font-size: 1.4rem; height: 64px; }
    .sdc-trust                  { font-size: 1.4rem; }
    .sdc-form-errors            { font-size: 1.4rem; }
    .sdc-features-head .sdc-eyebrow { font-size: 1.4rem; }
    .sdc-feature h3             { font-size: 1.55rem; }
    .sdc-feature p              { font-size: 1.4rem; }
    .sdc-features .sdc-btn-ghost { font-size: 1.4rem; padding: 0.95rem 1.6rem; }
    .sdc-footer-desc            { font-size: 1.5rem; }
    .sdc-footer-contact         { font-size: 1.5rem; }
    .sdc-footer-copy            { font-size: 1.4rem; }
}

/* ============================================================================
   Sub-hero pages — banda con foto del timbre (la misma del home), overlay
   cálido para que el título blanco resalte. Continuidad visual con el home.
   ============================================================================ */
/* OJO: styles.css legacy tiene `@media (min-width: 1000px) { section:not(.booking) { padding: 10rem 0 } }`
   con especificidad (0,1,1) — IGUAL a `section.sdc-subhero`. Cuando empatan,
   gana la que se carga última, y styles.css se carga DESPUÉS de guest.css.
   Por eso usamos `.sdc-subhero.sdc-subhero` (doble clase = especificidad 0,2,0)
   o el chain con `section` (0,2,1) para ganar siempre. */
section.sdc-subhero.sdc-subhero {
    position: relative;
    isolation: isolate;
    color: var(--sdc-white);
    padding: 3rem 0;
    border-bottom: 4px solid var(--sdc-sun);
}
.sdc-subhero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('/images/reservas.webp') center/cover no-repeat;
    background-attachment: fixed;
    filter: saturate(1.15) contrast(1.05);
}
.sdc-subhero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(45, 30, 15, 0.65) 0%,
        rgba(74, 50, 25, 0.55) 100%
    );
}
.sdc-subhero-inner {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-space-2);
    align-items: flex-start;
}
.sdc-subhero-head {
    display: flex;
    align-items: flex-start;
    gap: var(--sdc-space-4);
    flex-wrap: wrap;
    width: 100%;
}
.sdc-subhero-titles {
    flex: 1;
    min-width: 260px;
}
@media (max-width: 700px) {
    /* En mobile el botón "Modificar búsqueda" va DEBAJO del título,
       a ancho completo. Más fácil de tocar con el pulgar. */
    .sdc-subhero-head { flex-direction: column; }
    .sdc-subhero-titles { min-width: 0; width: 100%; }
}
.sdc-subhero h1 {
    font-family: var(--sdc-font-display);
    /* Desktop: título más grande para llenar el ancho disponible */
    font-size: clamp(2.1rem, 1.6rem + 1.8vw, 3rem);
    line-height: 1.05;
    color: var(--sdc-white);
    margin: 0;
    text-shadow: 0 3px 12px rgba(0,0,0,0.45);
    font-weight: 500;
}
.sdc-subhero p {
    margin: 0;
    color: rgba(255,255,255,0.97);
    font-size: 1.5rem;
    max-width: 760px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    line-height: 1.5;
}

/* Chips con el resumen de la búsqueda */
.sdc-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sdc-space-2);
    margin-top: 0; /* el gap del .sdc-subhero-inner ya separa */
    list-style: none;
    padding: 0;
}
.sdc-summary-chip {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255,255,255,0.32);
    color: var(--sdc-white);
    padding: 0.6rem 1.2rem;
    border-radius: var(--sdc-radius-pill);
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.sdc-summary-chip i { color: var(--sdc-sun); font-size: 1.2em; }
.sdc-modify-toggle {
    margin-left: auto;
    background: var(--sdc-sun);
    color: var(--sdc-brown-deep);
    border: none;
    padding: 0.85rem 1.7rem;
    border-radius: var(--sdc-radius-pill);
    font-weight: 700;
    font-size: 1.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: transform var(--sdc-trans-fast), box-shadow var(--sdc-trans);
    align-self: flex-end;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.sdc-modify-toggle i { font-size: 1.15em; }
.sdc-modify-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.sdc-modify-toggle .chev { transition: transform var(--sdc-trans); }
.sdc-modify-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Panel desplegable con el form de modificar búsqueda (mismo del home) */
.sdc-modify-panel {
    display: none;
    margin-top: var(--sdc-space-4);
    background: var(--sdc-white);
    color: var(--sdc-ink);
    padding: var(--sdc-space-5);
    border-radius: var(--sdc-radius-lg);
    box-shadow: var(--sdc-shadow-md);
    width: 100%;
    border-top: 4px solid var(--sdc-sun);
}
.sdc-modify-panel.is-open { display: block; }
.sdc-modify-panel .sdc-search-grid { gap: var(--sdc-space-3); }
.sdc-modify-panel .sdc-label { color: var(--sdc-brown); }

/* Zona principal con las cards de habitación — continúa la misma foto del
   subhero (background-attachment: fixed = la imagen no se mueve al scrollear,
   da sensación de cards "flotando" sobre la foto). Overlay más oscuro acá
   para que las cards blancas resalten. */
.sdc-page {
    position: relative;
    isolation: isolate;
    /* Top compacto: el borde dorado de la subhero ya separa visualmente,
       no hace falta meter más aire arriba. Mantengo padding-bottom amplio
       para que la sticky CTA mobile y el footer no peguen contra la última card. */
    padding: var(--sdc-space-4) 0 var(--sdc-space-12);
    min-height: 50vh;
    color: var(--sdc-ink);
}
.sdc-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('/images/reservas.webp') center/cover no-repeat;
    background-attachment: fixed;
    filter: saturate(1.1) contrast(1.05);
}
.sdc-page::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(74, 50, 25, 0.55) 0%,
        rgba(45, 44, 44, 0.6) 100%
    );
}
/* Variante sin foto (por si alguna pantalla la necesita lisa) */
.sdc-page.sdc-page-plain {
    background: var(--sdc-cream);
}
.sdc-page.sdc-page-plain::before,
.sdc-page.sdc-page-plain::after { display: none; }

/* ============================================================================
   Stepper visual — barra de progreso de los 3 pasos del flujo de reserva
   (Habitaciones → Tus datos → Confirmación). Va dentro del subhero.
   ============================================================================ */
.sdc-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin-top: var(--sdc-space-4);
    margin-bottom: var(--sdc-space-2); /* separa del bloque de chips de abajo */
    width: 100%;
    max-width: 640px;
}
.sdc-step {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(255,255,255,0.65);
    font-weight: 600;
    font-size: 1.4rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    white-space: nowrap;
}
.sdc-step-num {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.32);
    color: rgba(255,255,255,0.85);
    font-weight: 700;
    font-size: 1.3rem;
    flex-shrink: 0;
    transition: all var(--sdc-trans);
}
.sdc-step-sep {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,0.22);
    margin: 0 var(--sdc-space-3);
    min-width: 24px;
}
.sdc-step-done .sdc-step-num {
    background: var(--sdc-sun);
    border-color: var(--sdc-sun);
    color: var(--sdc-brown-deep);
}
.sdc-step-done { color: rgba(255,255,255,0.9); }
.sdc-step-current .sdc-step-num {
    background: var(--sdc-white);
    border-color: var(--sdc-sun);
    color: var(--sdc-brown-deep);
    box-shadow: 0 0 0 4px rgba(250, 158, 44, 0.30);
}
.sdc-step-current { color: var(--sdc-white); }

@media (max-width: 600px) {
    .sdc-step-label { display: none; } /* en mobile solo los círculos numerados */
    .sdc-stepper { justify-content: center; gap: 0; }
    .sdc-step-sep { min-width: 32px; }
    .sdc-step-num { width: 36px; height: 36px; font-size: 1.4rem; }
}

/* ============================================================================
   Secciones de formulario — cards con header + contenido (data huesped,
   distribución de habitaciones). Usadas en finalInformation.
   ============================================================================ */
/* Sección de formulario sin fondo blanco — el "marco" lo dan las cards
   internas (occ-cards o guest-grid). El header de sección queda directo
   sobre la foto del .sdc-page, con texto blanco y text-shadow.
   OJO: usamos doble clase (.sdc-form-section.sdc-form-section) para ganarle
   en especificidad al legacy `section:not(.booking) { padding: 10rem 0 }`
   de styles.css. Mismo truco que en .sdc-subhero. */
section.sdc-form-section.sdc-form-section {
    background: transparent;
    padding: 0;
    /* En desktop: ancho limitado y centrado, igual que la card de datos
       (--card). Así toda la columna del form se ve coherente y no queda
       espacio vacío a los costados. En mobile vuelve a full-width. */
    max-width: 760px;
    margin: 0 auto var(--sdc-space-8);
}
@media (max-width: 720px) {
    section.sdc-form-section.sdc-form-section { max-width: none; }
}
.sdc-form-section-head {
    margin-bottom: var(--sdc-space-4);
    padding-bottom: var(--sdc-space-3);
    border-bottom: 1px solid rgba(255,255,255,0.25);
}
.sdc-form-section-head h2 {
    font-family: var(--sdc-font-display);
    font-size: var(--sdc-text-2xl);
    color: var(--sdc-white);
    margin: 0 0 var(--sdc-space-1);
    line-height: 1.15;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
    font-weight: 500;
}
.sdc-form-section-head p {
    margin: 0;
    color: rgba(255,255,255,0.95);
    font-size: var(--sdc-text-base);
    line-height: 1.5;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
/* Los datos del huésped, que NO tienen "cards" propias, sí necesitan
   un fondo para que los inputs blancos se vean integrados, no flotando.
   Igual: doble clase para ganarle al legacy. */
section.sdc-form-section.sdc-form-section--card {
    background: var(--sdc-white);
    border-radius: var(--sdc-radius-lg);
    border: 1px solid var(--sdc-line);
    box-shadow: var(--sdc-shadow-sm);
    padding: var(--sdc-space-6);
    /* En desktop limitamos el ancho del card de datos para que los inputs
       no se vean exageradamente largos (la card está dentro de un container
       de 1180px, sin tope quedaba demasiado ancha y "vacía"). */
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.sdc-form-section--card .sdc-form-section-head {
    border-bottom-color: var(--sdc-line);
}
.sdc-form-section--card .sdc-form-section-head h2 {
    color: var(--sdc-brown);
    text-shadow: none;
}
.sdc-form-section--card .sdc-form-section-head p {
    color: var(--sdc-ink-soft);
    text-shadow: none;
}
@media (max-width: 720px) {
    /* En mobile el card vuelve a ocupar todo el ancho del container */
    section.sdc-form-section.sdc-form-section--card {
        max-width: none;
    }
}

/* ============================================================================
   Contador en vivo de huéspedes asignados (3/4, etc.) — pill bajo el header
   de la sección "distribución". JS lo va actualizando.
   ============================================================================ */
.sdc-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: var(--sdc-space-3);
    padding: 0.75rem 1.4rem;
    border-radius: var(--sdc-radius-pill);
    font-weight: 700;
    font-size: 1.5rem;
    background: var(--sdc-cream-2);
    color: var(--sdc-ink);
    border: 1.5px solid var(--sdc-line);
    transition: background var(--sdc-trans), border-color var(--sdc-trans), color var(--sdc-trans);
}
/* Todo el texto del contador al MISMO tamaño base; el número se destaca por color y un punch un poco mayor */
.sdc-counter > * { font-size: inherit; }
.sdc-counter .sdc-counter-num {
    font-size: 1.5rem;
    color: inherit;
}
.sdc-counter .sdc-counter-num [data-counter-current] {
    font-size: 1.25em;
    font-weight: 800;
}
.sdc-counter[data-state="ok"]      { background: var(--sdc-success-soft); border-color: var(--sdc-success); color: var(--sdc-success); }
.sdc-counter[data-state="under"]   { background: #fef3c7; border-color: var(--sdc-warn); color: var(--sdc-warn); }
.sdc-counter[data-state="over"]    { background: var(--sdc-error-soft); border-color: var(--sdc-error); color: var(--sdc-error); }

/* ============================================================================
   Cards de distribución por habitación (occupancy cards)
   Foto a la izquierda + info y selectores a la derecha en desktop;
   apila en mobile.
   ============================================================================ */
.sdc-occ-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-space-4);
}

.sdc-occ-card {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-space-4);
    background: var(--sdc-cream);
    border: 1px solid var(--sdc-line);
    border-radius: var(--sdc-radius-lg);
    overflow: hidden;
    transition: border-color var(--sdc-trans), box-shadow var(--sdc-trans);
}
.sdc-occ-card.is-error {
    border-color: var(--sdc-error);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}
@media (min-width: 720px) {
    .sdc-occ-card {
        flex-direction: row;
        gap: 0;
        align-items: stretch;
    }
}

.sdc-occ-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--sdc-cream-2);
    flex-shrink: 0;
}
.sdc-occ-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 720px) {
    .sdc-occ-photo {
        width: 240px;
        aspect-ratio: auto;
    }
}

.sdc-occ-body {
    padding: var(--sdc-space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sdc-space-3);
}
.sdc-occ-badge {
    align-self: flex-start;
    background: var(--sdc-brown);
    color: var(--sdc-white);
    padding: 0.3rem 0.85rem;
    border-radius: var(--sdc-radius-pill);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sdc-occ-title {
    font-family: var(--sdc-font-display);
    font-size: 1.75rem;
    color: var(--sdc-brown);
    margin: 0;
    line-height: 1.15;
}
.sdc-occ-capacity {
    font-size: 1.4rem;
    color: var(--sdc-ink-soft);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.sdc-occ-capacity::before { content: '👥'; font-size: 1.15em; }

.sdc-occ-selectors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sdc-space-3);
    margin-top: auto;
}
@media (max-width: 400px) {
    .sdc-occ-selectors { grid-template-columns: 1fr; }
}

.sdc-people-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
/* Label + ayuda de edad en LA MISMA LÍNEA */
.sdc-people-field .sdc-label-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sdc-people-field .sdc-label {
    color: var(--sdc-brown);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin: 0;
}
.sdc-people-field .sdc-help {
    margin: 0;
    font-size: 1.4rem;
    color: var(--sdc-ink-mute);
    font-weight: 400;
}

/* Number stepper (− 0 +) — más mobile-friendly que select para cantidades 0-4 */
.sdc-num-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid var(--sdc-line);
    border-radius: var(--sdc-radius);
    background: var(--sdc-white);
    overflow: hidden;
    width: fit-content;
}
.sdc-num-stepper:focus-within {
    border-color: var(--sdc-sun);
    box-shadow: var(--sdc-shadow-focus);
}
.sdc-num-stepper.sdc-input-error {
    border-color: var(--sdc-error);
}
.sdc-num-stepper-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--sdc-cream-2);
    color: var(--sdc-brown);
    font-size: 1.35rem;
    font-weight: 700;
    cursor: pointer;
    display: grid;
    place-items: center;
    line-height: 1;
    user-select: none;
    transition: background var(--sdc-trans-fast);
}
.sdc-num-stepper-btn:hover:not(:disabled) { background: var(--sdc-sun); color: var(--sdc-brown-deep); }
.sdc-num-stepper-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sdc-num-stepper input {
    width: 52px;
    height: 40px;
    border: none;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sdc-ink);
    -moz-appearance: textfield;
}
.sdc-num-stepper input::-webkit-outer-spin-button,
.sdc-num-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sdc-num-stepper input:focus { outline: none; }

/* ============================================================================
   Grid de datos del huésped — 2 columnas desktop, 1 mobile.
   Toda la tipografía adentro va con bumps para que sea fácil de leer
   en mobile (turistas adultos, visión reducida).
   ============================================================================ */
.sdc-guest-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sdc-space-5);
}
@media (min-width: 720px) {
    .sdc-guest-grid { grid-template-columns: 1fr 1fr; }
    .sdc-guest-grid .sdc-field-full { grid-column: 1 / -1; }
}

/* Labels más grandes y legibles que el default .sdc-label (que es xs) */
.sdc-guest-grid .sdc-label {
    font-size: 1.4rem;
    color: var(--sdc-brown);
    font-weight: 700;
    letter-spacing: 0.05em;
}
/* Ayudas y errores debajo de los inputs también con bump */
.sdc-guest-grid .sdc-help {
    font-size: 1.3rem;
    color: var(--sdc-ink-soft);
}
.sdc-guest-grid .sdc-error-msg {
    font-size: 1.3rem;
}

.sdc-field-tall .sdc-input {
    height: 52px;
    font-size: 1.6rem;
}

/* En el header de la sección con fondo blanco, bump el subtítulo para
   que no se pierda contra el título grande */
.sdc-form-section--card .sdc-form-section-head p {
    font-size: 1.4rem;
}

/* ============================================================================
   Lista de tipos de habitación — cards con foto, info y selector.
   Layout adaptativo según count (1..5) para que la distribución quede armónica
   y nunca pase de 2 filas en desktop. La clase --N viene desde el EJS.
   ============================================================================ */
.sdc-room-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sdc-space-6);
    margin-top: 0; /* el padding-top de .sdc-page ya separa */
}

/* Desktop: grilla de 12 columnas. Cada variante reposiciona las cards
   para lograr la distribución dibujada en el mockup. */
@media (min-width: 780px) {
    .sdc-room-grid {
        grid-template-columns: repeat(12, 1fr);
    }

    /* Default (2 / 4 cards): 2 por fila (span 6) */
    .sdc-room-grid > .sdc-room-card {
        grid-column: span 6;
    }

    /* 5 cards: 3 arriba + 2 abajo centradas (todas span 4 = 1/3 del ancho) */
    .sdc-room-grid--5 > .sdc-room-card             { grid-column: span 4; }
    .sdc-room-grid--5 > .sdc-room-card:nth-child(4) { grid-column: 3 / span 4; }
    .sdc-room-grid--5 > .sdc-room-card:nth-child(5) { grid-column: 7 / span 4; }

    /* 3 cards: 2 arriba + 1 abajo centrada (todas span 6) */
    .sdc-room-grid--3 > .sdc-room-card:nth-child(3) { grid-column: 4 / span 6; }

    /* 1 card sola: span 4 centrada (~1/3 del ancho, no estirada) */
    .sdc-room-grid--1 > .sdc-room-card { grid-column: 5 / span 4; }
}

.sdc-room-card {
    background: var(--sdc-white);
    border: 1px solid var(--sdc-line);
    border-radius: var(--sdc-radius-lg);
    overflow: hidden;
    box-shadow: var(--sdc-shadow-sm);
    transition: transform var(--sdc-trans), box-shadow var(--sdc-trans);
    display: flex;
    flex-direction: column;
}
.sdc-room-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sdc-shadow);
}
.sdc-room-card.is-selected {
    border-color: var(--sdc-sun);
    box-shadow: 0 0 0 3px rgba(250, 158, 44, 0.25), var(--sdc-shadow);
}

.sdc-room-photo {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--sdc-cream-2);
    overflow: hidden;
}
.sdc-room-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.sdc-room-card:hover .sdc-room-photo img { transform: scale(1.04); }

.sdc-room-photo-link {
    position: absolute;
    bottom: var(--sdc-space-3);
    right: var(--sdc-space-3);
    background: rgba(45, 30, 15, 0.78);
    color: var(--sdc-white);
    padding: 0.4rem 0.8rem;
    border-radius: var(--sdc-radius-pill);
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background var(--sdc-trans);
}
.sdc-room-photo-link:hover { background: var(--sdc-brown-deep); }

.sdc-room-body {
    /* Compactamos un poco para que las cards no se sientan grandotas en 3-col */
    padding: var(--sdc-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--sdc-space-2);
    flex: 1;
}

.sdc-room-title {
    font-family: var(--sdc-font-display);
    font-size: 1.4rem;
    color: var(--sdc-brown);
    margin: 0;
    line-height: 1.15;
}

.sdc-room-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.sdc-room-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sdc-ink);
    font-family: var(--sdc-font-body);
}
.sdc-room-price-unit {
    color: var(--sdc-ink-soft);
    font-size: 1.3rem;
}

/* Badge "Quedan X disponibles" — variantes según urgencia */
.sdc-availability {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--sdc-radius-pill);
    font-size: 1.3rem;
    font-weight: 600;
}
.sdc-availability-ok    { background: var(--sdc-success-soft); color: var(--sdc-success); }
.sdc-availability-low   { background: #fef3c7;                  color: var(--sdc-warn); }
.sdc-availability-last  { background: var(--sdc-error-soft);   color: var(--sdc-error); }

/* Selector de cantidad — select grande, accesible */
.sdc-qty-row {
    display: flex;
    align-items: center;
    gap: var(--sdc-space-3);
    margin-top: auto; /* empuja al fondo de la card */
    padding-top: var(--sdc-space-2);
    border-top: 1px dashed var(--sdc-line);
}
.sdc-qty-label {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--sdc-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sdc-qty-select {
    flex: 1;
    height: 42px;
    border: 1.5px solid var(--sdc-line);
    background: var(--sdc-white);
    padding: 0 0.85rem;
    border-radius: var(--sdc-radius);
    color: var(--sdc-ink);
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--sdc-trans-fast), box-shadow var(--sdc-trans-fast);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a5430' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.2rem;
}
.sdc-qty-select:focus {
    outline: none;
    border-color: var(--sdc-sun);
    box-shadow: var(--sdc-shadow-focus);
}
.sdc-qty-select.sdc-input-error {
    border-color: var(--sdc-error);
    background-color: var(--sdc-error-soft);
}
.sdc-qty-select.is-active {
    border-color: var(--sdc-sun);
    background-color: #fffaf0;
}

/* Error inline debajo de un select de cantidad */
.sdc-card-error {
    margin-top: var(--sdc-space-2);
    color: var(--sdc-error);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.sdc-card-error::before { content: '⚠'; }

/* CTA inferior — sticky en mobile, centrada en desktop */
.sdc-cta-bar {
    display: flex;
    justify-content: center;
    margin-top: var(--sdc-space-8);
}
.sdc-cta-bar .sdc-btn { min-width: 240px; }

@media (max-width: 700px) {
    .sdc-cta-bar {
        position: sticky;
        bottom: 0;
        /* Como el fondo de la página ahora es la foto + overlay oscuro,
           el gradient va de transparente a marrón oscuro (no a crema). */
        background: linear-gradient(180deg, rgba(45, 30, 15, 0) 0%, rgba(45, 30, 15, 0.85) 50%, rgba(45, 30, 15, 0.95) 100%);
        padding: var(--sdc-space-5) var(--sdc-space-4) var(--sdc-space-6);
        margin: var(--sdc-space-6) calc(-1 * var(--sdc-space-5)) 0;
        z-index: 10;
    }
    .sdc-cta-bar .sdc-btn { width: 100%; }
}

@media (max-width: 600px) {
    /* En mobile el subhero quiere TEXTO GRANDE y ESPACIADO RESPIRADO.
       Turistas adultos con visión reducida — preferimos legibilidad y aire
       sobre densidad. */
    section.sdc-subhero         { padding: 1.25rem 0 1rem; }
    .sdc-subhero-inner          { gap: var(--sdc-space-4); }
    .sdc-subhero-head           { gap: var(--sdc-space-3); }
    .sdc-summary-chips          { gap: var(--sdc-space-3); }

    .sdc-subhero h1            { font-size: clamp(1.85rem, 1.5rem + 2vw, 2.2rem); }
    .sdc-subhero p             { font-size: 1.5rem; line-height: 1.45; }
    .sdc-summary-chip          { font-size: 1.4rem; padding: 0.6rem 1.15rem; }
    .sdc-modify-toggle         { font-size: 1.4rem; padding: 0.85rem 1.5rem; }

    /* En mobile el botón "Modificar búsqueda" sale del flujo "alineado a la
       derecha" y pasa a ocupar todo el ancho debajo del título. Más fácil
       de tocar con el pulgar. */
    .sdc-subhero .sdc-modify-toggle {
        margin-left: 0;
        align-self: stretch;
        justify-content: center;
        width: 100%;
    }

    .sdc-room-title            { font-size: 1.55rem; }
    .sdc-room-price            { font-size: 1.85rem; }
    .sdc-qty-label             { font-size: 1.4rem; }
    .sdc-qty-select            { height: 58px; font-size: 1.6rem; }
}

/* ============================================================================
   Confirmación de reserva (confirmed.ejs) — Wave 2.3
   Columna de cards: código gigante y copiable, pasos para pagar la seña,
   detalle de la estadía y aviso del mail. Reusa .sdc-form-section--card.
   OJO: styles.css legacy deja el root en 10px, así que acá 1rem = 10px.
   ============================================================================ */
.sdc-confirm section.sdc-form-section.sdc-form-section--card {
    margin-bottom: var(--sdc-space-5);
    font-size: 1.5rem;
    line-height: 1.5;
}
.sdc-confirm .sdc-form-section-head h2 { font-size: 2.2rem; }

/* --- Card del código --- */
.sdc-confirm section.sdc-code-card {
    border-top: 4px solid var(--sdc-sun);
    text-align: center;
}
.sdc-code-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sdc-space-3);
}
.sdc-code-head .sdc-eyebrow { font-size: 1.3rem; }
.sdc-confirm .sdc-badge { font-size: 1.2rem; padding: 0.4rem 1rem; gap: 0.5rem; }
.sdc-code-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sdc-space-4) var(--sdc-space-6);
    margin: var(--sdc-space-4) 0;
}
.sdc-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(3.4rem, 2.4rem + 4vw, 5.2rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.1;
    color: var(--sdc-brown-deep);
    background: var(--sdc-cream);
    border: 2px dashed var(--sdc-sun);
    border-radius: var(--sdc-radius-lg);
    padding: 1rem 2.2rem;
    /* El código es corto, pero si no entra en una pantalla muy angosta
       preferimos que corte antes que generar scroll horizontal. */
    overflow-wrap: anywhere;
    user-select: all;
}
.sdc-code-help {
    color: var(--sdc-ink-soft);
    max-width: 52ch;
    margin: 0 auto;
}

/* --- Botón "Copiar" (código y datos bancarios) --- */
.sdc-copy-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    border: 1.5px solid var(--sdc-line);
    background: var(--sdc-white);
    color: var(--sdc-brown);
    font-size: 1.3rem;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: var(--sdc-radius-pill);
    cursor: pointer;
    transition: background var(--sdc-trans), border-color var(--sdc-trans), color var(--sdc-trans);
}
.sdc-copy-btn:hover { background: var(--sdc-cream-2); border-color: var(--sdc-sun); }
.sdc-copy-btn.is-copied {
    background: var(--sdc-success-soft);
    border-color: var(--sdc-success);
    color: var(--sdc-success);
}
.sdc-copy-btn-lg { font-size: 1.5rem; padding: 1rem 1.8rem; }

/* --- Plazo para la seña (dentro del header de "Cómo confirmar") --- */
.sdc-confirm .sdc-form-section-head p.sdc-deadline {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-top: var(--sdc-space-3);
    padding: 1rem 1.4rem;
    border-radius: var(--sdc-radius);
    background: #fef3c7;
    color: var(--sdc-warn);
    font-size: 1.4rem;
    font-weight: 600;
}
.sdc-deadline i { margin-top: 0.25em; }

/* --- Pasos numerados --- */
.sdc-next-steps {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sdc-space-8);
}
.sdc-next-step {
    display: flex;
    align-items: flex-start;
    gap: var(--sdc-space-5);
}
.sdc-next-step-num {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sdc-sun);
    color: var(--sdc-brown-deep);
    font-weight: 800;
    font-size: 1.6rem;
}
.sdc-next-step-body { flex: 1; min-width: 0; }
.sdc-next-step-body h3 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sdc-brown-deep);
    margin: 0.3rem 0 0.4rem;
}
.sdc-next-step-body p { color: var(--sdc-ink-soft); margin: 0; }
.sdc-next-step-body .sdc-btn {
    margin-top: var(--sdc-space-4);
    font-size: 1.4rem;
    padding: 1.2rem 2.4rem;
}

/* --- Montos: seña destacada, total al lado --- */
.sdc-amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--sdc-space-4);
    margin-top: var(--sdc-space-5);
}
.sdc-amount {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.2rem 1.6rem;
    border-radius: var(--sdc-radius);
    border: 1px solid var(--sdc-line);
    background: var(--sdc-cream);
}
.sdc-amount-label,
.sdc-bank dt,
.sdc-stay dt {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sdc-ink-soft);
}
.sdc-amount-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--sdc-ink);
    font-variant-numeric: tabular-nums;
}
.sdc-amount-main { border-color: var(--sdc-sun); background: #fffaf0; }
.sdc-amount-main .sdc-amount-value { font-size: 2.8rem; color: var(--sdc-orange); }

/* --- Datos bancarios --- */
.sdc-bank {
    margin-top: var(--sdc-space-5);
    border: 1px solid var(--sdc-line);
    border-radius: var(--sdc-radius);
    overflow: hidden;
}
.sdc-bank-row {
    display: grid;
    grid-template-columns: 9rem 1fr;
    align-items: center;
    gap: var(--sdc-space-4);
    padding: 1rem 1.4rem;
}
.sdc-bank-row + .sdc-bank-row { border-top: 1px solid var(--sdc-line); }
.sdc-bank dd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sdc-space-4);
    min-width: 0;
}
.sdc-bank-value {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--sdc-ink);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* --- Detalle de la estadía --- */
.sdc-stay {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--sdc-space-5);
}
.sdc-stay dd { font-size: 1.8rem; font-weight: 700; color: var(--sdc-ink); }
.sdc-stay-rooms {
    list-style: none;
    padding: 0;
    margin-top: var(--sdc-space-6);
    border-top: 1px solid var(--sdc-line);
}
.sdc-stay-room {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sdc-space-2) var(--sdc-space-4);
    padding: var(--sdc-space-4) 0;
}
.sdc-stay-room + .sdc-stay-room { border-top: 1px solid var(--sdc-line); }
.sdc-stay-room-name { font-weight: 700; color: var(--sdc-brown-deep); }
.sdc-stay-room-people { color: var(--sdc-ink-soft); margin-left: auto; }

/* --- Aviso del mail --- */
.sdc-confirm section.sdc-mail-note {
    display: flex;
    align-items: flex-start;
    gap: var(--sdc-space-5);
}
.sdc-mail-note-icon { font-size: 2.6rem; color: var(--sdc-orange); margin-top: 0.3rem; }
.sdc-mail-note h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--sdc-brown-deep);
    margin: 0 0 0.4rem;
}
.sdc-mail-note p { color: var(--sdc-ink-soft); overflow-wrap: anywhere; }
.sdc-mail-note-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: var(--sdc-space-4);
    color: var(--sdc-orange);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sdc-mail-note-link:hover { color: var(--sdc-brown-deep); }

@media (max-width: 600px) {
    .sdc-confirm section.sdc-form-section.sdc-form-section--card { font-size: 1.6rem; }
    .sdc-code-row { flex-direction: column; }
    .sdc-copy-btn-lg { width: 100%; justify-content: center; }
    .sdc-next-step { gap: var(--sdc-space-4); }
    .sdc-next-step-body .sdc-btn { width: 100%; }
    /* Etiqueta arriba y valor + botón abajo: el CBU no entra al lado en un celular */
    .sdc-bank-row { grid-template-columns: 1fr; gap: 0.2rem; }
    .sdc-stay-room-people { margin-left: 0; width: 100%; }
}

/* ============================================================================
   Página de mensaje (error/errorSession.ejs): sin disponibilidad, sesión
   vencida, reserva cancelada. Una card centrada con ícono, título en tono
   normal (no mayúsculas gigantes), texto de apoyo y dos salidas claras.
   ============================================================================ */
.sdc-message-page {
    display: flex;
    align-items: center;
    min-height: 60vh;
    padding-top: var(--sdc-space-12);
}
.sdc-message-page section.sdc-form-section.sdc-message {
    max-width: 62rem;
    margin-bottom: 0;
    padding: var(--sdc-space-10) var(--sdc-space-8);
    text-align: center;
    border-top: 4px solid var(--sdc-sun);
    font-size: 1.6rem;
    line-height: 1.55;
}
.sdc-message-icon {
    display: inline-grid;
    place-items: center;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%;
    background: #fef3c7;
    color: var(--sdc-warn);
    font-size: 2.8rem;
    margin-bottom: var(--sdc-space-5);
}
.sdc-message--ok .sdc-message-icon { background: var(--sdc-success-soft); color: var(--sdc-success); }
.sdc-message h1 {
    font-family: var(--sdc-font-display);
    font-size: clamp(2.4rem, 2rem + 1.2vw, 3rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--sdc-brown);
    margin: 0 0 var(--sdc-space-3);
}
.sdc-message p {
    color: var(--sdc-ink-soft);
    max-width: 48ch;
    margin: 0 auto;
}
.sdc-message-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sdc-space-4);
    margin-top: var(--sdc-space-8);
}
.sdc-message-actions .sdc-btn { font-size: 1.4rem; padding: 1.2rem 2.4rem; }
.sdc-message-actions .sdc-btn-ghost .fa-whatsapp { color: #25D366; font-size: 1.3em; }

@media (max-width: 600px) {
    .sdc-message-page { padding-top: var(--sdc-space-8); }
    .sdc-message-page section.sdc-form-section.sdc-message { padding: var(--sdc-space-8) var(--sdc-space-5); }
    .sdc-message-actions { flex-direction: column; }
    .sdc-message-actions .sdc-btn { width: 100%; }
}

/* ============================================================================
   Consulta de reserva (bookingSearch.ejs) — Wave 2.4
   Card angosta con código + e-mail y una ayuda debajo.
   ============================================================================ */
.sdc-lookup { padding-top: var(--sdc-space-5); }
.sdc-lookup section.sdc-form-section.sdc-form-section--card,
.sdc-lookup .sdc-lookup-alert,
.sdc-lookup .sdc-lookup-help {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}
.sdc-lookup section.sdc-form-section.sdc-form-section--card {
    margin-bottom: var(--sdc-space-5);
    padding: var(--sdc-space-8);
}
.sdc-lookup .sdc-lookup-alert {
    margin-top: 0;
    margin-bottom: var(--sdc-space-4);
    font-size: 1.5rem;
}
.sdc-lookup .sdc-lookup-alert .sdc-form-errors-head { margin-bottom: 0; }
.sdc-lookup-fields {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-space-6);
}
.sdc-lookup .sdc-label {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--sdc-brown);
}
/* 16px en los inputs: además de leerse mejor, evita el zoom automático de iOS al enfocar */
.sdc-lookup .sdc-input { height: 5.2rem; font-size: 1.6rem; }
.sdc-lookup .sdc-input-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.sdc-lookup .sdc-help { font-size: 1.3rem; color: var(--sdc-ink-soft); }
.sdc-lookup .sdc-error-msg { font-size: 1.3rem; }
.sdc-lookup-submit {
    margin-top: var(--sdc-space-8);
    height: 5.2rem;
    font-size: 1.5rem;
    border-radius: var(--sdc-radius);
}
.sdc-lookup-help {
    display: flex;
    align-items: flex-start;
    gap: var(--sdc-space-4);
    padding: var(--sdc-space-5) var(--sdc-space-6);
    border-radius: var(--sdc-radius-lg);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--sdc-white);
    font-size: 1.4rem;
    line-height: 1.5;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.sdc-lookup-help > i { font-size: 2.2rem; color: var(--sdc-sun); margin-top: 0.2rem; }
.sdc-lookup-help strong { display: block; font-size: 1.5rem; }
.sdc-lookup-help a { color: var(--sdc-sun); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================
   Estado de la reserva (bookingStatus.ejs) — Wave 2.4
   Reusa la columna .sdc-confirm y sus piezas (montos, datos bancarios,
   detalle, botón copiar). Acá solo lo propio: card de estado y arrepentimiento.
   ============================================================================ */
.sdc-confirm section.sdc-status { border-top: 4px solid var(--sdc-line); }
.sdc-confirm section.sdc-status--warn    { border-top-color: var(--sdc-sun); }
.sdc-confirm section.sdc-status--info    { border-top-color: var(--sdc-info); }
.sdc-confirm section.sdc-status--success { border-top-color: var(--sdc-success); }
.sdc-confirm section.sdc-status--error   { border-top-color: var(--sdc-error); }

.sdc-status-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sdc-space-4) var(--sdc-space-5);
}
.sdc-status-icon {
    display: grid;
    place-items: center;
    width: 5.6rem;
    height: 5.6rem;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 2.4rem;
    background: var(--sdc-cream-2);
    color: var(--sdc-ink-soft);
}
.sdc-status--warn .sdc-status-icon    { background: #fef3c7;                  color: var(--sdc-warn); }
.sdc-status--info .sdc-status-icon    { background: var(--sdc-info-soft);    color: var(--sdc-info); }
.sdc-status--success .sdc-status-icon { background: var(--sdc-success-soft); color: var(--sdc-success); }
.sdc-status--error .sdc-status-icon   { background: var(--sdc-error-soft);   color: var(--sdc-error); }

.sdc-status-titles { flex: 1; min-width: 16rem; }
.sdc-status-label {
    display: block;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sdc-ink-soft);
    margin: 0;
}
.sdc-status-titles h2 {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sdc-brown-deep);
    margin: 0;
}
.sdc-status--warn .sdc-status-titles h2    { color: var(--sdc-warn); }
.sdc-status--info .sdc-status-titles h2    { color: var(--sdc-info); }
.sdc-status--success .sdc-status-titles h2 { color: var(--sdc-success); }
.sdc-status--error .sdc-status-titles h2   { color: var(--sdc-error); }

.sdc-status-code-row {
    display: flex;
    align-items: center;
    gap: var(--sdc-space-3);
    margin-top: 0.2rem;
}
.sdc-status-code-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--sdc-brown-deep);
    user-select: all;
}
.sdc-status-text {
    margin-top: var(--sdc-space-5);
    padding-top: var(--sdc-space-5);
    border-top: 1px solid var(--sdc-line);
    font-size: 1.6rem;
    color: var(--sdc-ink);
}
.sdc-status-pay { margin-top: var(--sdc-space-4); }
.sdc-status-pay > p { color: var(--sdc-ink-soft); }
.sdc-status-pay .sdc-amounts { margin-top: var(--sdc-space-4); }
.sdc-status-cta {
    margin-top: var(--sdc-space-6);
    font-size: 1.4rem;
    padding: 1.2rem 2.4rem;
}

/* --- Botón de arrepentimiento (<details>) --- */
.sdc-regret {
    max-width: 760px;
    margin: 0 auto var(--sdc-space-5);
    border-radius: var(--sdc-radius-lg);
    background: var(--sdc-white);
    border: 1px solid var(--sdc-line);
    box-shadow: var(--sdc-shadow-sm);
    font-size: 1.5rem;
    line-height: 1.5;
}
.sdc-regret summary {
    display: flex;
    align-items: center;
    gap: var(--sdc-space-3);
    padding: var(--sdc-space-5) var(--sdc-space-6);
    cursor: pointer;
    font-weight: 700;
    color: var(--sdc-brown);
    list-style: none;
}
.sdc-regret summary::-webkit-details-marker { display: none; }
.sdc-regret summary::after {
    content: '';
    margin-left: auto;
    width: 0.9rem;
    height: 0.9rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--sdc-trans);
}
.sdc-regret[open] summary::after { transform: rotate(-135deg); }
.sdc-regret-body {
    padding: 0 var(--sdc-space-6) var(--sdc-space-6);
    color: var(--sdc-ink-soft);
}
.sdc-regret-body .sdc-btn {
    margin-top: var(--sdc-space-5);
    font-size: 1.4rem;
    padding: 1.2rem 2.4rem;
}
.sdc-btn-danger {
    background: var(--sdc-error);
    color: var(--sdc-white);
}
.sdc-btn-danger:hover { background: #991b1b; transform: translateY(-1px); }

.sdc-confirm-foot {
    max-width: 760px;
    margin: var(--sdc-space-6) auto 0;
    text-align: center;
    font-size: 1.5rem;
}
.sdc-confirm-foot a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--sdc-white);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

@media (max-width: 720px) {
    .sdc-regret, .sdc-confirm-foot { max-width: none; }
}
@media (max-width: 600px) {
    .sdc-lookup section.sdc-form-section.sdc-form-section--card { padding: var(--sdc-space-6) var(--sdc-space-5); }
    .sdc-status-code { width: 100%; }
    .sdc-status-cta, .sdc-regret-body .sdc-btn { width: 100%; }
}

/* ============================================================================
   Carga de comprobante (paymentUpload.ejs) — Wave 2.5
   Reusa la card angosta de .sdc-lookup. Acá solo la zona de carga y la lista
   de archivos elegidos.
   ============================================================================ */
.sdc-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: var(--sdc-space-8) var(--sdc-space-5);
    border: 2px dashed var(--sdc-sun);
    border-radius: var(--sdc-radius-lg);
    background: var(--sdc-cream);
    color: var(--sdc-ink-soft);
    text-align: center;
    cursor: pointer;
    transition: background var(--sdc-trans), border-color var(--sdc-trans);
}
.sdc-dropzone:hover,
.sdc-dropzone.is-dragover { background: #fffaf0; border-color: var(--sdc-orange); }
.sdc-dropzone.has-files { border-style: solid; }
.sdc-dropzone.is-error { border-color: var(--sdc-error); background: var(--sdc-error-soft); }
.sdc-dropzone:focus-within { box-shadow: var(--sdc-shadow-focus); border-color: var(--sdc-orange); }
.sdc-dropzone > i { font-size: 3.2rem; color: var(--sdc-sun-deep); }
.sdc-dropzone-title { font-size: 1.5rem; font-weight: 700; color: var(--sdc-brown-deep); }
.sdc-dropzone-hint { font-size: 1.3rem; }
/* El input sigue siendo el control real (teclado, lector de pantalla, envío
   sin JS): lo ocultamos a la vista pero no lo sacamos del flujo de foco. */
.sdc-dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.sdc-file-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sdc-space-2);
}
.sdc-file-list:empty { display: none; }
.sdc-file-list li {
    display: flex;
    align-items: center;
    gap: var(--sdc-space-3);
    padding: 0.8rem 1.2rem;
    border: 1px solid var(--sdc-line);
    border-radius: var(--sdc-radius);
    background: var(--sdc-white);
    font-size: 1.4rem;
}
.sdc-file-list li > i { color: var(--sdc-orange); font-size: 1.8rem; }
.sdc-file-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--sdc-ink); }
.sdc-file-size { flex-shrink: 0; color: var(--sdc-ink-mute); font-variant-numeric: tabular-nums; }

.sdc-btn.is-loading { cursor: progress; }

/* ============================================================================
   Ingreso al panel (admin/users: login, validationCode, newDevice) — Etapa 5.3
   Fondo liso como el panel, con la misma card angosta de .sdc-lookup.
   ============================================================================ */
.sdc-page.sdc-auth {
    background: var(--sdc-panel-bg);
    display: flex;
    align-items: center;
    min-height: 70vh;
    padding: var(--sdc-space-12) 0;
}
.sdc-auth .sdc-lookup { padding-top: 0; }
.sdc-auth section.sdc-form-section.sdc-form-section--card {
    max-width: 46rem;
    margin-bottom: 0;
    border-top: 4px solid var(--sdc-sun);
    box-shadow: var(--sdc-shadow);
    font-size: 1.5rem;
    line-height: 1.5;
}
.sdc-auth-head { text-align: center; margin-bottom: var(--sdc-space-8); }
.sdc-auth-icon {
    display: inline-grid;
    place-items: center;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    background: var(--sdc-cream-2);
    color: var(--sdc-brown);
    font-size: 2.2rem;
    margin-bottom: var(--sdc-space-4);
}
.sdc-auth-head h1 {
    font-family: var(--sdc-font-display);
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--sdc-brown);
    margin: 0 0 var(--sdc-space-2);
}
.sdc-auth-head p { color: var(--sdc-ink-soft); margin: 0; }
.sdc-lookup .sdc-auth-alert { margin-bottom: var(--sdc-space-6); }

/* Checkbox "No cerrar sesión" */
.sdc-check {
    display: inline-flex;
    align-items: center;
    gap: var(--sdc-space-3);
    cursor: pointer;
    color: var(--sdc-ink);
}
.sdc-check input {
    width: 2rem;
    height: 2rem;
    accent-color: var(--sdc-orange);
    cursor: pointer;
}

.sdc-auth-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: var(--sdc-space-6);
    padding: 1rem 1.4rem;
    border-radius: var(--sdc-radius);
    background: #fef3c7;
    color: var(--sdc-warn);
    font-weight: 600;
}
.sdc-auth-warning i { margin-top: 0.25em; }

.sdc-auth-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sdc-space-4);
}
.sdc-auth-actions .sdc-btn { width: 100%; }
.sdc-auth-foot {
    margin-top: var(--sdc-space-6);
    padding-top: var(--sdc-space-5);
    border-top: 1px solid var(--sdc-line);
    text-align: center;
    color: var(--sdc-ink-soft);
}
.sdc-auth-foot a { color: var(--sdc-orange); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
    .sdc-page.sdc-auth { padding: var(--sdc-space-8) 0; align-items: flex-start; }
    .sdc-auth-actions { grid-template-columns: 1fr; }
}

/* ============================================================================
   Galería de fotos de una habitación (guest/availability/roomPictures.ejs)
   Foto grande con flechas y contador, y tira de miniaturas debajo.
   ============================================================================ */
.sdc-gallery {
    max-width: 110rem;
    margin: 0 auto;
    padding: 1.2rem;
    background: var(--sdc-white);
    border: 1px solid var(--sdc-line);
    border-radius: var(--sdc-radius-lg);
    box-shadow: var(--sdc-shadow-md);
}
.sdc-gallery-stage {
    position: relative;
    aspect-ratio: 3 / 2;
    max-height: 72vh;
    width: 100%;
    overflow: hidden;
    border-radius: var(--sdc-radius);
    background: #1f1a15;
}
.sdc-gallery-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sdc-gallery-photo[hidden] { display: none; }

.sdc-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 4.8rem;
    height: 4.8rem;
    border: none;
    border-radius: 50%;
    background: rgba(45, 30, 15, 0.72);
    color: var(--sdc-white);
    font-size: 1.8rem;
    cursor: pointer;
    transition: background var(--sdc-trans);
}
.sdc-gallery-arrow:hover { background: var(--sdc-brown-deep); }
.sdc-gallery-arrow:focus-visible { outline: 3px solid var(--sdc-sun); outline-offset: 2px; }
.sdc-gallery-prev { left: 1.2rem; }
.sdc-gallery-next { right: 1.2rem; }

.sdc-gallery-counter {
    position: absolute;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%);
    padding: 0.5rem 1.4rem;
    border-radius: var(--sdc-radius-pill);
    background: rgba(45, 30, 15, 0.78);
    color: var(--sdc-white);
    font-size: 1.4rem;
    font-weight: 600;
    white-space: nowrap;
}

.sdc-gallery-thumbs {
    display: flex;
    gap: 0.8rem;
    margin: 1.2rem 0 0;
    padding: 0.3rem 0.3rem 0.6rem;
    list-style: none;
    overflow-x: auto;
}
.sdc-gallery-thumbs li { flex: 0 0 auto; }
.sdc-gallery-thumb {
    display: block;
    width: 9.6rem;
    height: 6.4rem;
    padding: 0;
    border: 3px solid transparent;
    border-radius: var(--sdc-radius-sm);
    overflow: hidden;
    background: var(--sdc-cream-2);
    cursor: pointer;
    opacity: 0.65;
    transition: opacity var(--sdc-trans), border-color var(--sdc-trans);
}
.sdc-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sdc-gallery-thumb:hover { opacity: 1; }
.sdc-gallery-thumb.is-current { opacity: 1; border-color: var(--sdc-sun); }
.sdc-gallery-thumb:focus-visible { outline: 3px solid var(--sdc-sun); outline-offset: 2px; }

@media (max-width: 600px) {
    .sdc-gallery { padding: 0.8rem; }
    .sdc-gallery-stage { aspect-ratio: 4 / 3; }
    .sdc-gallery-arrow { width: 4.4rem; height: 4.4rem; }
    .sdc-gallery-prev { left: 0.6rem; }
    .sdc-gallery-next { right: 0.6rem; }
    .sdc-gallery-thumb { width: 7.2rem; height: 4.8rem; }
}