/**
 * Tema Ociokart para Flatpickr (Fase 11.10 — 2026-05-18).
 *
 * Override del CSS por defecto de flatpickr@4.6.x para que el selector de
 * fechas combine con la línea visual del plugin (naranja primario, bordes
 * suaves, sombras discretas).
 *
 * Se carga DESPUÉS de flatpickr.min.css en:
 *   - Admin: pages kart_reservas, kart_eventos, kart_festivos
 *   - Frontend: shortcode [reservas_kart] (encolado por kart_reservations_enqueue_assets)
 *
 * Variables del wizard (--kart-*) NO se usan aquí porque flatpickr puede
 * cargarse en contextos donde kart-wizard.css no esté presente (admin).
 * Usamos los hex directamente.
 */

/* ===========================================================
   CONTENEDOR PRINCIPAL
   =========================================================== */
.flatpickr-calendar {
    border: 1px solid #e0e6ee !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    overflow: hidden;
    /* Quitamos los bordes raros que mete por defecto */
    background: #ffffff;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
    display: none !important; /* quitar la flechita superior que apunta al input */
}

/* ===========================================================
   CABECERA: mes + año + flechas (gradiente naranja Ociokart)
   ===========================================================
   Fix 1.37 (2026-05-28): altura minima de 52px en .flatpickr-months
   y position: relative para que los botones absolute (34x34) quepan
   y se centren verticalmente. El .flatpickr-calendar tiene
   overflow: hidden (para los bordes redondeados), asi que cualquier
   cosa que sobrepase la cabecera por arriba se recorta — antes los
   botones miraban con `top: 7px` y un .flatpickr-months sin altura
   minima, dependiendo del ancho de fuente del mes; si el contenido
   no daba 41px, las flechas se recortaban por la parte superior.
   ----------------------------------------------------------- */
.flatpickr-months {
    background: linear-gradient(135deg, #ff5722 0%, #d94315 100%);
    color: #ffffff;
    padding: 0 8px !important;
    min-height: 52px !important;
    height: 52px !important;
    box-sizing: border-box;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important; /* por si el theme lo pone hidden */
}
.flatpickr-month {
    background: transparent !important;
    color: #ffffff !important;
    height: auto !important;
    line-height: 1 !important;
    border-radius: 0 !important;
}
.flatpickr-current-month {
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    height: auto !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #ffffff !important;
    font-weight: 700 !important;
    background: transparent !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    appearance: none;
    border: none;
    text-transform: capitalize;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
    color: #2c3e50; /* opciones desplegadas vuelven a fondo blanco */
    background: #ffffff;
}
.flatpickr-current-month .numInputWrapper:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: #ffffff !important; }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: #ffffff !important; }

/* Flechas de mes anterior / siguiente
   ----------------------------------------
   Fix 1.36 (2026-05-28): las flechas no se veian porque flatpickr
   incrusta el SVG con `fill` hardcoded en negro en el `path`. Aplicar
   `fill: white` al <svg> no propaga al <path>, hay que apuntarlo
   directamente. Ademas subimos el contraste del fondo y agrandamos el
   area clickeable a 34x34 para que sea inconfundible donde pinchar. */
.flatpickr-prev-month,
.flatpickr-next-month {
    fill: #ffffff !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    padding: 8px !important;
    /* Fix 1.37: centrar VERTICALMENTE en la banda naranja con
       top:50% + translateY(-50%) en lugar de top:7px fijo. Asi el
       boton siempre queda centrado, aunque cambie la altura del
       header (locale es vs en, etc.) y no se recorta por arriba. */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.15s ease, transform 0.15s ease;
    z-index: 5;  /* por encima del header naranja */
}
.flatpickr-prev-month {
    left: 8px !important;
}
.flatpickr-next-month {
    right: 8px !important;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: rgba(255, 255, 255, 0.38) !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    /* mantener translateY(-50%) en hover y solo escalar */
    transform: translateY(-50%) scale(1.05);
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: #ffffff !important;
    width: 16px !important;
    height: 16px !important;
}
/* CRITICAL: flatpickr define `fill="rgba(0,0,0,.9)"` inline en el <path>.
   Para sobrescribirlo hay que apuntar al path directamente. */
.flatpickr-prev-month svg path,
.flatpickr-next-month svg path,
.flatpickr-prev-month svg polyline,
.flatpickr-next-month svg polyline {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* ===========================================================
   DÍAS DE LA SEMANA (Lu Ma Mi ...)
   ===========================================================
   Fix 1.35 (2026-05-28): forzamos tambien grid 7 col en las
   cabeceras para que LUN MAR ... DOM queden ALINEADAS con la
   grilla de dias. Si solo forzaramos el day container, las
   cabeceras del default flatpickr (flex) podrian quedar
   desalineadas respecto a las celdas y dar de nuevo la
   sensacion de "un dia desfasado".
   ----------------------------------------------------------- */
.flatpickr-weekdays {
    background: #f7f9fc;
    border-bottom: 1px solid #e0e6ee;
    padding: 6px 0;
}
.flatpickr-calendar .flatpickr-weekdaycontainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
    padding: 0 6px !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.flatpickr-weekday {
    color: #777 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent !important;
    /* Anular el flex/width del default para que respete el grid. */
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    text-align: center;
}

/* ===========================================================
   DÍAS DEL CALENDARIO
   ===========================================================
   Fix 1.35 (2026-05-28): forzamos CSS Grid de 7 columnas en
   .dayContainer para garantizar que SIEMPRE caben los 7 dias de
   la semana en una fila. Antes el `padding: 6px` + `gap: 2px`
   reducia el ancho util y flatpickr solo cabia 6 dias por fila;
   el dia 7 (domingo) se "rompia" a la siguiente fila y aparecia
   visualmente en columna LUN, dando la falsa impresion de que
   los dias estaban desfasados un dia.
   ----------------------------------------------------------- */
.flatpickr-calendar .dayContainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
    padding: 6px !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.flatpickr-day {
    border-radius: 6px !important;
    border: none !important;
    color: #2c3e50;
    font-weight: 500;
    font-size: 13px;
    transition: background-color 0.12s ease, color 0.12s ease;
    /* En CSS Grid, los days deben rellenar la celda. NO usar
       max-width/min-width que puedan empujar a la siguiente fila. */
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;  /* anula el flex de flatpickr base */
}
.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.today) {
    background: rgba(255, 87, 34, 0.10) !important;
    color: #d94315 !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #bbb !important;
}
.flatpickr-day.today {
    border: 2px solid #ff5722 !important;
    color: #ff5722 !important;
    font-weight: 700;
    background: #ffffff !important;
}
.flatpickr-day.today:hover {
    background: rgba(255, 87, 34, 0.08) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #ff5722 !important;
    color: #ffffff !important;
    border: 2px solid #ff5722 !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(255, 87, 34, 0.35);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #ccc !important;
    text-decoration: line-through;
    cursor: not-allowed;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(0, 0, 0, 0.025) 4px,
        rgba(0, 0, 0, 0.025) 8px
    ) !important;
}

/* ===========================================================
   SELECTOR DE HORA (al ser timepicker o datetimepicker)
   =========================================================== */
.flatpickr-time {
    border-top: 1px solid #e0e6ee !important;
    background: #f7f9fc !important;
    padding: 10px 14px !important;
    height: auto !important;
    color: #2c3e50;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    color: #555 !important;
    font-weight: 700;
}
.flatpickr-time input {
    background: #ffffff !important;
    color: #2c3e50 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    border: 1px solid #cfd6e0 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: #ffffff !important;
    border-color: #ff5722 !important;
    box-shadow: 0 0 0 2px rgba(255, 87, 34, 0.15);
}
.flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: #ff5722 !important; }
.flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: #ff5722 !important; }

/* ===========================================================
   RESPONSIVE — móvil
   =========================================================== */
@media (max-width: 480px) {
    .flatpickr-calendar { width: 100% !important; }
    .flatpickr-days { width: 100% !important; }
    .dayContainer { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
}