/* ══════════════════════════════════════════════════════════════════════════════
 * includes/web/css/calendario.css
 * ══════════════════════════════════════════════════════════════════════════════
 *
 * Estilos del calendario inline (Flatpickr) y resumen de estancia.
 * Sobrescribe los estilos por defecto de Flatpickr para que encaje con la
 * paleta de marca (verde oliva + dorado + crema).
 *
 * Incluir después de flatpickr.min.css
 * ══════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
 * 1. CONTENEDOR DEL CALENDARIO
 * ══════════════════════════════════════════════════════════════════════════ */

.form-bloque--calendario {
    text-align: center;
}

.calendario-instrucciones {
    margin-bottom: var(--sp-3); /* jq3: era sp-5 */
    color: var(--color-texto-suave);
    font-size: var(--fs-body);
    font-style: italic;
}

.calendario-instrucciones strong {
    color: var(--color-primary);
    font-style: normal;
    font-weight: var(--fw-medium);
}

#calendario-reserva {
    display: flex;
    justify-content: center;
    margin: 0 auto var(--sp-3); /* jq3: era sp-5 */
}


/* ══════════════════════════════════════════════════════════════════════════
 * 2. FLATPICKR — paleta de marca
 * ══════════════════════════════════════════════════════════════════════════ */

.flatpickr-calendar.inline {
    background: var(--color-surface);
    border-radius: var(--br-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: var(--sp-4);
    font-family: var(--font-sans);
}

/* Cabecera del mes */
.flatpickr-calendar .flatpickr-months {
    color: var(--color-primary);
}

.flatpickr-calendar .flatpickr-month {
    height: 40px;
}

.flatpickr-calendar .flatpickr-current-month {
    font-family: var(--font-serif);
    font-size: var(--fs-subtitulo);
    color: var(--color-primary);
    font-weight: var(--fw-normal);
}

.flatpickr-calendar .flatpickr-monthDropdown-months,
.flatpickr-calendar .numInputWrapper input {
    font-family: var(--font-serif);
    color: var(--color-primary);
}

/* Flechas nav */
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
    color: var(--color-primary);
    fill: var(--color-primary);
    padding: 10px;
}

.flatpickr-calendar .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-next-month:hover {
    color: var(--color-accent);
    fill: var(--color-accent);
}

/* Días de la semana */
.flatpickr-calendar .flatpickr-weekday {
    color: var(--color-texto-suave);
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

/* Días normales */
.flatpickr-calendar .flatpickr-day {
    color: var(--color-texto);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    border-radius: var(--br-sm);
    border: 1px solid transparent;
    /* mg 15/05/2026: el max-width de 42px estaba cortando el domingo en
       la última columna porque Flatpickr internamente reserva ~39.5px
       por día. Lo quitamos y dejamos que el flex de Flatpickr reparta
       el ancho del dayContainer entre los 7 días (1/7 ≈ 14.286%). */
    max-width: none;
    height: 42px;
    line-height: 42px;
    transition: all var(--t-fast);
}

/* ──────────────────────────────────────────────────────────────────────
 * mj 17/05/2026: Fix responsivo del calendario.
 *
 * Reemplaza al bloque del paquete `mi` (que aplicaba reglas globales sin
 * media queries y rompía el layout en móvil).
 *
 * Problema en móvil: Flatpickr decide cuántos meses mostrar mirando
 * window.innerWidth >= 768 en el JS. Cuando es móvil vertical (<768)
 * pide 1 mes, pero el CSS del paquete `mi` forzaba .dayContainer a
 * width:294px fijo. 294px no cabe en un móvil de 380px (descontando
 * los paddings del contenedor, formulario y propio calendario), así que
 * el calendario se expandía más allá del padre arrastrando consigo el
 * texto "Haz click..." que se salía a la derecha. En horizontal pasaba
 * algo similar con el segundo mes (Junio) saliéndose del área visible.
 *
 * Solución: separar las reglas por ancho de pantalla.
 *   · Móvil (<768px) — 1 mes fluido que ocupa todo el ancho disponible
 *   · Tablet/escritorio (≥768px) — 2 meses con dayContainer fijo 294px
 *     y space-around entre ellos (como en el paquete `mi`, pero solo
 *     activado a partir de 768px)
 * ────────────────────────────────────────────────────────────────────── */

/* — Reglas base, válidas en cualquier ancho — */
.flatpickr-calendar.inline {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* — Móvil vertical: 1 mes que se adapta al ancho — */
@media (max-width: 767px) {
    .flatpickr-calendar.inline {
        padding: var(--sp-3) !important;        /* 12px en lugar de 16px,
                                                   gana 8px de ancho útil */
    }
    .flatpickr-calendar .dayContainer,
    .flatpickr-calendar .flatpickr-days,
    .flatpickr-calendar .flatpickr-weekdaycontainer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    /* Los días reparten el ancho disponible en 1/7 cada uno */
    .flatpickr-calendar .flatpickr-day,
    .flatpickr-calendar .flatpickr-weekday {
        max-width: none !important;
        flex-basis: 14.2857% !important;        /* 100% / 7 */
    }
}

/* — Tablet y escritorio: 2 meses lado a lado — */
@media (min-width: 768px) {
    .flatpickr-calendar .dayContainer {
        width: 294px !important;
        min-width: 294px !important;
        max-width: 294px !important;
    }
    .flatpickr-calendar.multiMonth .flatpickr-days {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        display: flex !important;
        justify-content: space-around !important;
    }
}

.flatpickr-calendar .flatpickr-day:hover {
    background: var(--color-crema-oscuro);
    border-color: var(--color-accent);
    color: var(--color-primary);
}

/* Hoy */
.flatpickr-calendar .flatpickr-day.today {
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: var(--fw-semibold);
}

.flatpickr-calendar .flatpickr-day.today:hover {
    background: var(--color-accent);
    color: var(--color-crema);
}

/* Día seleccionado (entrada o salida) */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-crema);
    font-weight: var(--fw-semibold);
}

.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.endRange:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Rango intermedio */
.flatpickr-calendar .flatpickr-day.inRange {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    border-color: transparent;
    color: var(--color-primary);
    box-shadow: none;
}

/* Días no disponibles OCUPADOS (con reserva o bloqueo) — ROJO tachado.
 * El estilo rojo "fuerte" solo aplica si tienen también la clase fp-ocupado
 * (que el JS solo añade a los días que vienen del endpoint de disponibilidad).
 * jp2 09/05/2026: añadido :not(.fp-ocupado) en la regla siguiente para que
 * los días "fuera de rango" (pasados o por antelación mínima) NO se vean
 * como ocupados — antes salían todos rojos por igual. */
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.fp-ocupado,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.fp-ocupado:hover {
    background: #fde5e5;
    color: #c33;
    border-color: transparent;
    text-decoration: line-through;
    cursor: not-allowed;
    font-weight: var(--fw-normal);
}

/* Días NO clicables por estar en el pasado o antes de la antelación mínima
 * (también lleva flatpickr-disabled, pero NO fp-ocupado) — GRIS suave. */
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:not(.fp-ocupado),
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:not(.fp-ocupado):hover {
    background: transparent;
    color: var(--color-texto-claro, #c0bcad);
    border-color: transparent;
    cursor: not-allowed;
    font-weight: var(--fw-light);
    text-decoration: none;
    opacity: 0.5;
}

/* Días fuera del mes visible */
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: var(--color-texto-claro);
}


/* ══════════════════════════════════════════════════════════════════════════
 * 3. RESUMEN DE ESTANCIA
 * ══════════════════════════════════════════════════════════════════════════ */

.form-estancia-info {
    margin-top: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: var(--color-crema-oscuro);
    border-radius: var(--br-md);
    text-align: center;
}

.estancia-placeholder {
    color: var(--color-texto-suave);
    font-style: italic;
    font-size: var(--fs-body);
}

.estancia-resumen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
}

.estancia-resumen > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.estancia-resumen__label {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    color: var(--color-texto-suave);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.estancia-resumen > div > strong {
    font-family: var(--font-serif);
    font-size: var(--fs-subtitulo);
    color: var(--color-primary);
    font-weight: var(--fw-normal);
}

.estancia-resumen__flecha {
    font-size: var(--fs-h3);
    color: var(--color-accent);
}

.estancia-resumen__noches {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding-left: var(--sp-5);
    border-left: 1px solid var(--color-border);
}

.estancia-resumen__noches strong {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    color: var(--color-accent);
    font-weight: var(--fw-normal);
}

.estancia-resumen__noches span {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    color: var(--color-texto-suave);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 4. PRECIO EN VIVO
 * ══════════════════════════════════════════════════════════════════════════ */

.form-bloque--precio .precio-resumen {
    background: var(--color-surface);
    padding: var(--sp-4);
    border-radius: var(--br-sm);
    border: 1px solid var(--color-border);
}

.precio-line {
    display: flex;
    justify-content: space-between;
    padding: var(--sp-2) 0;
    font-size: var(--fs-body);
    color: var(--color-texto);
    border-bottom: 1px dashed var(--color-border);
}

.precio-line:last-of-type { border-bottom: none; }

.precio-line--total {
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 2px solid var(--color-accent);
    border-bottom: none !important;
    font-size: var(--fs-subtitulo);
}

.precio-line--total strong {
    color: var(--color-accent);
    font-family: var(--font-serif);
    font-weight: var(--fw-normal);
}

.precio-nota {
    margin-top: var(--sp-3);
    font-size: var(--fs-caption);
    color: var(--color-texto-suave);
    font-style: italic;
    text-align: center;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 5. RESPONSIVE
 * ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .estancia-resumen__noches {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--color-border);
        padding-top: var(--sp-3);
        width: 100%;
        justify-content: center;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
 * 6. HUÉSPEDES — grid responsivo que se adapta al número de campos visibles
 * ══════════════════════════════════════════════════════════════════════════ */

.form-grid-huespedes {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    /* jq3 09/05/2026: alinear contadores al fondo para que los inputs
       queden todos a la misma altura sin necesidad de filas fijas. */
    align-items: end;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 7. jp 09/05/2026 — Compactación del formulario de reserva
 *    · Resumen estancia en una línea (entrada → salida · N noches)
 *    · Huéspedes 4 columnas en escritorio, 2x2 en móvil
 *    · Nota debajo de bebés ("No cuenta para aforo")
 * ══════════════════════════════════════════════════════════════════════════ */

/* — Resumen estancia compacto — */
.estancia-resumen--compacto {
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-4);
    justify-content: center;
}

.estancia-resumen--compacto .estancia-resumen__bloque {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
}

.estancia-resumen--compacto .estancia-resumen__bloque .estancia-resumen__label {
    font-size: var(--fs-caption);
}

.estancia-resumen--compacto .estancia-resumen__bloque > strong {
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    color: var(--color-primary);
    font-weight: var(--fw-normal);
}

.estancia-resumen--compacto .estancia-resumen__flecha {
    font-size: var(--fs-body);
    color: var(--color-accent);
}

.estancia-resumen--compacto .estancia-resumen__noches {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding-left: var(--sp-4);
    border-left: 1px solid var(--color-border);
}

.estancia-resumen--compacto .estancia-resumen__noches strong {
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    color: var(--color-accent);
    font-weight: var(--fw-normal);
}

.estancia-resumen--compacto .estancia-resumen__noches span {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    color: var(--color-texto-suave);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

/* En móvil estrecho, romper a 2 líneas y quitar el separador vertical */
@media (max-width: 500px) {
    .estancia-resumen--compacto .estancia-resumen__noches {
        padding-left: 0;
        border-left: none;
        flex-basis: 100%;
        justify-content: center;
    }
}

/* — Huéspedes: 4 columnas en escritorio, 2x2 en móvil — */
@media (max-width: 500px) {
    .form-grid-huespedes {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-3);
    }
}

/* — Override scoped a la página de reserva: reducir margen entre la
     cabecera "Consulta y reserva directamente" y el marco del calendario.
     No tocamos base.css para no afectar a otras páginas. — */
.pagina-reserva .bloque-cabecera {
    margin-bottom: var(--sp-4); /* en base.css es sp-7 */
}
.form-contador {
    /* jq3 09/05/2026: flex column natural. Los huecos arriba se eliminan
       alineando los .form-contador al fondo del grid padre (.form-grid-huespedes)
       con align-items: end. Asi todos los inputs caen a la misma altura
       y los labels se compactan justo encima sin huecos. */
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 4px;
}

.form-contador label {
    line-height: 1.2;
}

.form-contador input[type="number"] {
    font-size: var(--fs-h3);
    padding: var(--sp-2);
}

/* — Nota debajo del label en bebés — */
.form-contador__nota {
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-texto-suave);
    font-style: italic;
    line-height: 1.2;
}

/* Nota vacía (en los contadores que no son bebés): no se muestra */
.form-contador__nota--vacia {
    display: none;
}