/* Estilos del calendario anual CDJ.
   Font Awesome NO se carga aquí: lo encola el plugin desde PHP
   (wp_enqueue_style 'cdj-calendario-fontawesome'). */

.cdj-calendario-anual {
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #2B2B2B;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.cdj-calendario-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.cdj-calendario-titulo {
    font-family: 'Bubblegum Sans', cursive;
    color: #1B2A6B;
    font-size: 2rem;
    margin: 0;
}

/* Pista de uso, entre el selector de curso y los filtros. Tono apagado: informa
   sin competir con el título ni con los botones. */
.cdj-calendario-ayuda {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #6B6B6B;
}

/* Con el header en columna (móvil) la pista quedaría pegada al bloque de
   filtros; se le da un respiro y se alinea a la izquierda como el resto. */
@media (max-width: 640px) {
    .cdj-calendario-ayuda {
        width: 100%;
        margin: -4px 0 4px;
    }
}

.cdj-calendario-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cdj-calendario-anual .cdj-filtro {
    border: 1px solid #1B2A6B !important;
    background: #fff !important;
    color: #1B2A6B !important;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.cdj-calendario-anual .cdj-filtro:hover {
    background: #F5F6F8 !important;
}

.cdj-calendario-anual .cdj-filtro--activo {
    background: #1B2A6B !important;
    color: #fff !important;
}

.cdj-calendario-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
}

.cdj-nav-icono {
    font-size: 0.85rem;
}

.cdj-nav-fallback {
    display: none;
}

/* Si Font Awesome no cargó, el JS añade esta clase al body para mostrar el fallback de texto */
.cdj-fa-no-disponible .cdj-nav-icono,
.cdj-fa-no-disponible .cdj-tooltip-icono {
    display: none;
}
.cdj-fa-no-disponible .cdj-nav-fallback {
    display: inline;
}

.cdj-nav-btn {
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.cdj-nav-btn:hover {
    background: #1B2A6B !important;
    color: #fff !important;
}

.cdj-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.cdj-calendario-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    transition: opacity 0.15s ease;
}

.cdj-calendario-grid--cargando {
    opacity: 0.4;
    pointer-events: none;
}

@media (max-width: 900px) {
    .cdj-calendario-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .cdj-calendario-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   NAVEGACIÓN MES A MES (solo móvil)
   ==========================================================
   En pantallas anchas esta barra no existe y se ven los 12 meses: todo lo de
   aquí vive dentro de la media query. La clase --mes-a-mes la añade el JS, de
   modo que sin JS se siguen viendo los 12 meses apilados. */

.cdj-mes-nav { display: none; }

@media (max-width: 560px) {
    .cdj-mes-nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 16px;
    }

    .cdj-mes-nav-titulo {
        flex: 1;
        text-align: center;
        font-family: 'Bubblegum Sans', cursive;
        font-size: 1.25rem;
        color: #1B2A6B;
    }

    /* El !important replica lo que ya hacen los botones de curso: el tema del
       sitio estiliza <button> de forma agresiva y sin esto los repinta. */
    .cdj-calendario-anual .cdj-mes-nav-btn {
        flex-shrink: 0;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid #1B2A6B !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: #1B2A6B !important;
        font-size: 1.1rem !important;
        line-height: 1 !important;
        box-shadow: none !important;
        cursor: pointer;
    }

    .cdj-calendario-anual .cdj-mes-nav-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    /* El enlace de escape ocupa toda la fila siguiente: es una acción
       secundaria y no debe competir con las flechas de mes. */
    .cdj-calendario-anual .cdj-mes-nav-todos {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: none !important;
        color: #6B6B6B !important;
        font-size: 0.8rem !important;
        box-shadow: none !important;
        text-decoration: underline;
        cursor: pointer;
    }

    /* Con los 12 meses desplegados, las flechas y el nombre del mes no pintan
       nada: solo queda el botón para volver a la vista mes a mes. */
    .cdj-mes-nav--todos .cdj-mes-nav-btn,
    .cdj-mes-nav--todos .cdj-mes-nav-titulo {
        display: none;
    }

    .cdj-calendario-anual--mes-a-mes .cdj-mes { display: none; }
    .cdj-calendario-anual--mes-a-mes .cdj-mes--visible { display: block; }

    /* "Ver todo el curso" devuelve el apilado de los 12 meses. */
    .cdj-calendario-anual--todos-los-meses .cdj-mes { display: block; }

    /* Ya hay un título de mes en la barra de navegación. */
    .cdj-calendario-anual--mes-a-mes:not(.cdj-calendario-anual--todos-los-meses) .cdj-mes-nombre {
        display: none;
    }
}

.cdj-mes {
    background: #F5F6F8;
    border-radius: 12px;
    padding: 14px;
}

.cdj-mes-nombre {
    font-family: 'Bubblegum Sans', cursive;
    color: #1B2A6B;
    font-size: 1.1rem;
    margin-bottom: 8px;
    text-align: center;
}

.cdj-mes-semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 0.7rem;
    color: #6B6B6B;
    text-align: center;
    margin-bottom: 4px;
}

.cdj-mes-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cdj-dia {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #2B2B2B;
    border-radius: 6px;
}

.cdj-dia--vacio { visibility: hidden; }

/* Fondo base de cualquier día con evento: verde claro (tinte del #1E8F5F de la
   paleta). Es solo la base — festivo y vacaciones lo sobrescriben más abajo con
   su propio color, porque también llevan la clase --evento. */
.cdj-dia--evento {
    cursor: pointer;
    font-weight: 600;
    background: #E4F4EA;
}

.cdj-dia--evento:hover {
    background: #D2EBDD;
}

.cdj-dia--hoy {
    font-weight: 700;
    background: #1B2A6B !important;
    color: #fff !important;
    border-radius: 6px;
}

.cdj-dia-puntos {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
}

.cdj-punto {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
}

.cdj-punto--ei { background: #1B2A6B; }
.cdj-punto--ep { background: #E63946; }
.cdj-punto--eso { background: #1E8F5F; }
.cdj-punto--general { background: #6B6B6B; }

/* Cuando el día es "hoy" y además tiene evento(s): fondo azul sólido +
   contorno blanco en los puntos para que el punto EI (también azul) no
   se funda con el fondo, y el resto ganen contraste. */
.cdj-dia--hoy .cdj-punto {
    box-shadow: 0 0 0 1px #fff;
}

/* Periodo de vacaciones: fondo ámbar en todos los días del rango, para que el
   tramo se lea como un bloque y no como días sueltos. Si un día es además
   festivo, el PHP no llega a poner esta clase y el día se pinta solo como
   festivo. */
.cdj-dia--vacaciones {
    background: #FDF0DC;
    color: #B87514;
    font-weight: 700;
}

/* El :not() excluye el día con el tooltip abierto: si no, esta regla (tres
   clases) ganaría a .cdj-dia--evento.cdj-dia--activo (dos) y le quitaría el
   fondo azul al pasar el ratón por encima. */
.cdj-dia--evento.cdj-dia--vacaciones:not(.cdj-dia--activo):hover {
    background: #F8E4C4;
}

/* Festivo: fondo rojo claro (tinte de #E63946) con el número en gris muy
   oscuro. Sin !important en el color, para que "hoy" y el día con el tooltip
   abierto —ambos con fondo azul— puedan seguir imponiendo su texto blanco. */
.cdj-dia--festivo {
    background: #FBDCDE;
    color: #2B2B2B;
    font-weight: 700;
}

/* El hover genérico de los días con evento repintaría el fondo en gris azulado:
   aquí se sustituye por un rojo un punto más saturado. */
.cdj-dia--evento.cdj-dia--festivo:not(.cdj-dia--activo):hover {
    background: #F6C9CD;
}

/* Sobre el rojo claro, los puntos de etapa en sus colores fuertes ensucian la
   casilla: se unifican en un gris casi blanco, que los deja como una marca
   discreta de "aquí hay evento". */
.cdj-dia--festivo .cdj-punto {
    background: #F2F2F4;
}

/* Si el día es "hoy" y además festivo, prima el fondo azul de "hoy";
   el texto pasa a blanco (ya definido en .cdj-dia--hoy) para mantener contraste. */
.cdj-dia--hoy.cdj-dia--festivo {
    color: #fff !important;
    box-shadow: inset 0 0 0 2px #E63946;
}

/* Estado atenuado cuando el filtro de etapa está activo y el día no aplica */
.cdj-dia--atenuado {
    opacity: 0.25;
}

/* Día cuyo tooltip está abierto: se marca para que se vea de dónde sale el
   detalle, ya que el tooltip solo se abre con clic (nunca al pasar el ratón). */
.cdj-dia--evento.cdj-dia--activo {
    background: #1B2A6B;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(27, 42, 107, 0.35);
}

.cdj-dia--evento.cdj-dia--activo.cdj-dia--festivo {
    color: #fff !important;
    box-shadow: inset 0 0 0 2px #E63946;
}

/* Evita que el navegador deje el resaltado azul de tap en móvil al pulsar */
.cdj-dia--evento {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ==========================================================
   TOOLTIP DE DETALLE
   ========================================================== */

.cdj-tooltip {
    position: fixed;
    z-index: 9999;
    background: #1B2A6B;
    color: #fff;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.45;
    max-width: 300px;
    /* Dos sombras: una difusa que da profundidad y otra corta y densa
       que asienta la tarjeta sobre el gris del calendario. */
    box-shadow: 0 10px 28px rgba(27, 42, 107, 0.28), 0 2px 6px rgba(0, 0, 0, 0.16);
    display: none;
}

/* La visibilidad se controla con esta clase, no con style.display inline: el
   !important gana a cualquier `display:none` inline que pueda meter otro
   script de la página (p. ej. una copia antigua del calendario pegada en un
   widget HTML de Elementor), que si no cerraría el tooltip al mover el ratón. */
.cdj-tooltip.cdj-tooltip--abierto {
    display: block !important;
    animation: cdj-tooltip-entrada 0.15s ease-out;
}

/* En pantallas estrechas el límite fijo deja las descripciones largas muy
   altas y estrechas: se permite ocupar el ancho útil menos los márgenes. */
@media (max-width: 560px) {
    .cdj-tooltip { max-width: calc(100vw - 24px); }
}

/* --- Flecha que apunta al día -------------------------------------------
   Es un pseudo-elemento, no un nodo del contenido, porque el innerHTML del
   tooltip se reescribe entero en cada apertura. El JS sitúa la punta con
   --cdj-flecha-x (centro del día, ya acotado a los bordes del tooltip) y
   decide el lado con las clases --abajo / --arriba. */
.cdj-tooltip::after {
    content: '';
    position: absolute;
    left: var(--cdj-flecha-x, 50%);
    transform: translateX(-50%);
    border: 7px solid transparent;
}

/* Tooltip debajo del día: la punta sale por arriba. */
.cdj-tooltip--abajo::after {
    bottom: 100%;
    border-bottom-color: #1B2A6B;
}

/* Tooltip encima del día: la punta sale por abajo. */
.cdj-tooltip--arriba::after {
    top: 100%;
    border-top-color: #1B2A6B;
}

/* Si no cabe ni arriba ni abajo y el tooltip queda anclado al borde de la
   ventana, la flecha ya no apuntaría a nada: se oculta. */
.cdj-tooltip--sin-flecha::after {
    display: none;
}

@keyframes cdj-tooltip-entrada {
    from { opacity: 0; transform: translateY(var(--cdj-entrada-y, 4px)); }
    to   { opacity: 1; transform: none; }
}

.cdj-tooltip--abajo  { --cdj-entrada-y: -4px; }
.cdj-tooltip--arriba { --cdj-entrada-y: 4px; }

/* Quien haya pedido menos movimiento en su sistema no recibe el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    .cdj-tooltip.cdj-tooltip--abierto { animation: none; }
}

/* --- Contenido ---------------------------------------------------------- */

.cdj-tooltip-titulo {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

/* Etiqueta de tipo bajo el título (festivo / vacaciones). Los tonos son las
   versiones claras de #E63946 y #B87514, que sobre el azul del tooltip
   mantienen contraste suficiente. */
.cdj-tooltip-tipo {
    margin: 4px 0 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cdj-tooltip-tipo--festivo    { color: #FFB3B8; }
.cdj-tooltip-tipo--vacaciones { color: #FFD9A0; }

.cdj-tooltip-descripcion {
    margin: 6px 0 0;
    /* Baja el peso visual respecto al título sin perder legibilidad. */
    color: rgba(255, 255, 255, 0.85);
}

.cdj-tooltip-etapas {
    margin: 8px 0 0;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.cdj-tooltip-enlace {
    display: inline-block;
    margin-top: 10px;
    padding-bottom: 1px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    transition: border-color 0.15s;
}

/* Icono de "abrir en nueva pestaña" del enlace del tooltip. */
.cdj-tooltip-icono {
    margin-left: 2px;
    font-size: 0.68rem;
}

.cdj-tooltip-enlace:hover,
.cdj-tooltip-enlace:focus {
    border-bottom-color: #fff;
}

/* Separador entre varios eventos del mismo día. */
.cdj-tooltip-separador {
    height: 0;
    margin: 12px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}