/**
 * Tema Ociokart para FullCalendar (Fase 11.10 — 2026-05-18).
 *
 * Aplica el lenguaje visual del wizard al shortcode [calendario_eventos_kart]:
 *   - Wrap con card blanca y border-radius coherente con el wizard.
 *   - Cabecera negra estilo paddock con título + bandera a cuadros decorativa.
 *   - Leyenda como pills (mismo patrón que .kart-roster-stock-pill).
 *   - Toolbar de FullCalendar con look limpio y botones naranja.
 *   - Días con hover suave, hoy destacado en naranja claro.
 *   - Eventos como pills con border-radius y sombra suave.
 *
 * Se carga después de fullcalendar/index.global.min.css. NO uso variables
 * --kart-* (la página pública no carga kart-wizard.css por defecto) — uso
 * hex directos para máxima portabilidad.
 */

/* ===========================================================
   WRAP exterior + cabecera paddock
   =========================================================== */
.kart-calendario-wrap {
    width: 100%;
    max-width: var(--wpex-container-width, 1250px);
    margin: 24px auto;
    padding: 0 16px;
    box-sizing: border-box;
    color: #2c3e50;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.kart-cal-header {
    position: relative;
    background: #1a1a1a;
    color: #ffffff;
    border-radius: 10px 10px 0 0;
    padding: 18px 24px;
    overflow: hidden;
}
.kart-cal-header::before {
    /* Bandera a cuadros decorativa a la derecha (CSS puro). */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 100%;
    background-image:
        linear-gradient(45deg,  #1a1a1a 25%, transparent 25%),
        linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
        linear-gradient(45deg,  transparent 75%, #1a1a1a 75%),
        linear-gradient(-45deg, transparent 75%, #1a1a1a 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-color: #ffffff;
    opacity: 0.18;
    pointer-events: none;
}
.kart-cal-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}
.kart-cal-header-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ff5722;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.25);
}
.kart-cal-header-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
}
.kart-cal-header-subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: #9aa0a6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===========================================================
   CARD principal (leyenda + calendario)
   =========================================================== */
.kart-cal-card {
    background: #ffffff;
    border: 1px solid #e0e6ee;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* ===========================================================
   LEYENDA — pills coherentes con el resto del plugin
   =========================================================== */
.kart-cal-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e0e6ee;
}
.kart-cal-leyenda-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: #f7f9fc;
    border: 1px solid #e0e6ee;
    border-radius: 999px;
    font-size: 12px;
    color: #555;
    font-weight: 600;
}
.kart-cal-leyenda-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ===========================================================
   OVERRIDES FULLCALENDAR
   =========================================================== */

/* Toolbar superior */
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 14px !important;
    align-items: center;
}
.fc .fc-toolbar-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2c3e50;
    text-transform: capitalize;
}
/* Botones del toolbar (prev/next/today/vistas) */
.fc .fc-button,
.fc .fc-button-primary {
    background: #ffffff !important;
    border: 1px solid #cfd6e0 !important;
    color: #2c3e50 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-transform: capitalize;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fc .fc-button:hover,
.fc .fc-button-primary:hover {
    background: #f7f9fc !important;
    border-color: #ff5722 !important;
    color: #ff5722 !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: #ff5722 !important;
    border-color: #ff5722 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(255, 87, 34, 0.28) !important;
}
.fc .fc-button-primary:disabled {
    background: #f0f0f0 !important;
    border-color: #e0e0e0 !important;
    color: #999 !important;
    opacity: 1 !important;
}
/* Iconos < y > de las flechas */
.fc .fc-icon { font-size: 16px !important; }

/* Cabecera de los días de la semana (Lu Ma Mi...) */
.fc .fc-col-header {
    background: #f7f9fc;
}
.fc .fc-col-header-cell {
    border-color: #e0e6ee !important;
    padding: 10px 0 !important;
}
.fc .fc-col-header-cell-cushion {
    color: #777 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    padding: 0 !important;
}

/* Celdas de día */
.fc .fc-daygrid-day-frame {
    padding: 4px !important;
    min-height: 80px;
}
.fc .fc-daygrid-day-number {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    font-size: 13px;
    padding: 4px 6px !important;
    text-decoration: none !important;
    border-radius: 4px;
    transition: background-color 0.12s ease;
}
.fc .fc-daygrid-day:hover .fc-daygrid-day-number {
    background: rgba(255, 87, 34, 0.10);
    color: #d94315 !important;
}
.fc .fc-day-other .fc-daygrid-day-number { color: #bbb !important; }

/* HOY destacado */
.fc .fc-day-today {
    background: rgba(255, 87, 34, 0.06) !important;
}
.fc .fc-day-today .fc-daygrid-day-number {
    background: #ff5722;
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* Bordes del grid */
.fc .fc-scrollgrid,
.fc .fc-scrollgrid td,
.fc .fc-scrollgrid th {
    border-color: #e0e6ee !important;
}
.fc .fc-scrollgrid {
    border-radius: 8px;
    overflow: hidden;
}

/* Eventos */
.fc .fc-event,
.fc .fc-daygrid-event {
    border: none !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    cursor: default;
    margin: 1px 2px !important;
}
.fc .fc-event:hover,
.fc .fc-daygrid-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.fc .fc-event-title,
.fc .fc-event-time {
    color: inherit !important;
    font-weight: 600 !important;
}

/* Vista semanal: las reservas duran pocos minutos y FullCalendar intenta
   compactarlas demasiado. Damos alto mínimo y permitimos texto multilínea. */
.fc .fc-timeGridWeek-view .fc-timegrid-slot {
    height: 3.1em !important;
}
.fc .fc-timegrid-event {
    min-height: 42px !important;
}
.fc .fc-timegrid-event .fc-event-main {
    padding: 5px 6px !important;
    overflow: visible !important;
}
.fc .fc-timegrid-event .fc-event-time,
.fc .fc-timegrid-event .fc-event-title {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.15 !important;
}
.fc .fc-timegrid-event .fc-event-time {
    margin-bottom: 1px;
}
.kart-cal-week-event {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 32px;
    line-height: 1.2;
}
.kart-cal-week-event-time,
.kart-cal-week-event-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kart-cal-week-event-time {
    font-weight: 800;
}
.kart-cal-week-event-title {
    font-weight: 700;
}

/* Findes/festivos como background events: dejar opacidad pero más suave */
.fc .fc-bg-event { opacity: 0.18 !important; }

/* ===========================================================
   Fix 1.38 (2026-05-28): eventos de día completo (background)
   ===========================================================
   Para los eventos de la tabla kart_eventos con todo_el_dia=1 el feed
   emite una entrada con display:background (clase .kart-evento-bg) que
   pinta toda la celda/columna del día con el color del tipo de evento.
   Le subimos la opacidad respecto a findes/festivos (más vistosos), y
   activamos pointer-events para que el tooltip nativo (atributo title
   añadido en eventDidMount) funcione al pasar el ratón por encima.
   Sin esto, FullCalendar bloquea pointer-events en background events. */
.fc .fc-bg-event.kart-evento-bg {
    opacity: 0.42 !important;
    pointer-events: auto !important;
    cursor: help;
    transition: opacity 0.15s ease;
}
.fc .fc-bg-event.kart-evento-bg:hover {
    opacity: 0.62 !important;
}
/* Festivos: también activamos pointer-events para que el title del
   nombre del festivo aparezca al pasar el ratón. Mantenemos la
   opacidad baja porque son fondo informativo, no eventos primarios. */
.fc .fc-bg-event.kart-festivo {
    pointer-events: auto !important;
    cursor: help;
}

/* Tooltip / popover de "+N más" */
.fc .fc-more-link {
    color: #ff5722 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase;
}
.fc .fc-popover {
    border: 1px solid #e0e6ee !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}
.fc .fc-popover-header {
    background: #f7f9fc !important;
    color: #2c3e50 !important;
    padding: 10px 14px !important;
    font-weight: 700 !important;
}

/* ===========================================================
   Popup móvil de detalle de evento
   =========================================================== */
.kart-cal-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.kart-cal-modal.is-open {
    display: flex;
}
.kart-cal-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
}
.kart-cal-modal-dialog {
    position: relative;
    width: min(100% - 24px, 420px);
    margin: 0 12px 14px;
    background: #ffffff;
    border: 1px solid #e0e6ee;
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    padding: 18px 18px 16px;
    color: #2c3e50;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.kart-cal-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 1px solid #d9e0ea;
    border-radius: 50%;
    background: #f7f9fc;
    color: #2c3e50;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.kart-cal-modal-title {
    margin: 0 44px 14px 0;
    color: #1a1a1a;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
}
.kart-cal-modal-details {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 9px 12px;
    margin: 0;
}
.kart-cal-modal-details dt {
    margin: 0;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.kart-cal-modal-details dd {
    margin: 0;
    color: #2c3e50;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.35;
}
.kart-cal-modal-open {
    overflow: hidden;
}

/* ===========================================================
   RESPONSIVE móvil
   =========================================================== */
@media (max-width: 600px) {
    .kart-cal-header { padding: 14px 18px; }
    .kart-cal-header-title { font-size: 16px; }
    .kart-cal-header-icon { width: 38px; height: 38px; flex-basis: 38px; }
    .kart-cal-header-icon svg { width: 20px; height: 20px; }
    .kart-cal-card { padding: 12px; }
    .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; gap: 10px; }
    .fc .fc-toolbar-title { font-size: 17px !important; }
    .fc .fc-daygrid-day-frame { min-height: 60px; }
    .kart-cal-modal-dialog {
        width: calc(100% - 20px);
        margin: 0 10px 10px;
    }
    .kart-cal-modal-details {
        grid-template-columns: 82px 1fr;
    }
}