/* ===== CALENDARIO DE EVENTOS - ESTILOS PRINCIPALES ===== */

/* Variables CSS para fácil personalización */

:root {
    --calendario-primary-color: #1a365d;
    --calendario-primary-dark: #2d3748;
    --calendario-success-color: #38a169;
    --calendario-warning-color: #d69e2e;
    --calendario-danger-color: #e53e3e;
    --calendario-info-color: #3182ce;
    --calendario-border-radius: 10px;

    /* ── Paleta del calendario del IRE ────────────────────────────────────
       El calendario va sobre fondo oscuro: la tarjeta es siempre del mismo
       gris y lo que cambia por tipo de evento es el color de acento (la
       banda de la izquierda, el nombre del tutor y la sala). Ese acento lo
       pone cada clase con --cal-acento, que genera el editor visual de
       estilos a partir del color que se le elija. */
    --cal-fondo:        #0e1013;   /* fondo de la zona del calendario     */
    --cal-tarjeta:      #15181c;   /* fondo de cada tarjeta de evento     */
    --cal-tarjeta-hover:#1b1f24;
    --cal-linea:        #e8eaed;   /* regla bajo la tira de días          */
    --cal-borde:        #2a2f36;
    --cal-texto:        #ffffff;
    --cal-texto-suave:  #c9ced4;
    --cal-texto-tenue:  #8b9199;
    --cal-acento-base:  #4dd0e1;   /* acento cuando la clase no trae color */

    /* Compatibilidad con el resto de la hoja, que usa estos nombres */
    --calendario-background: var(--cal-tarjeta);
    --calendario-border: var(--cal-borde);
    --calendario-text: var(--cal-texto);
    --calendario-text-light: var(--cal-texto-suave);
    --calendario-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* Acento por defecto: cada clase de evento lo sobrescribe con su color */
.cal-ev {
    --cal-acento: var(--cal-acento-base);
}

/* Tema oscuro */
.calendario-eventos.tema-oscuro {
    --calendario-background: #1a1a1a;
    --calendario-border: #444;
    --calendario-text: #ffffff;
    --calendario-text-light: #cccccc;
    --calendario-shadow: rgba(255,255,255,0.1);
}

/* ===== ICONOS SVG DEL PLUGIN (sustituyen a los emojis) =====
   Se generan con calendario_icono() en PHP y window.calIcono() en JS.
   Miden 1em y usan currentColor, así que siguen el tamaño y el color del
   texto que los acompaña, tanto en tarjetas claras como oscuras. */
.cal-ico {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.135em;
    flex-shrink: 0;
}

/* Icono grande de cabecera en modales y estados vacíos (sustituye a los
   emojis que iban con font-size en línea) */
.cal-modal-icono {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 10px;
    color: inherit;
}

.cal-modal-icono .cal-ico {
    stroke-width: 1.3;
    vertical-align: middle;
}

/* ==========================================================================
   BLINDAJE FRENTE AL RESET DE BOTONES DEL TEMA
   --------------------------------------------------------------------------
   Muchos temas resetean los botones con un selector de atributo, por ejemplo
   Hello Elementor en su reset.css:

       [type=button], [type=submit], button { border: 1px solid #c36; color: #c36; … }

   Ese selector pesa lo mismo (una clase) que las reglas del plugin, así que el
   empate lo decidía el orden de carga y ganaba el tema: los botones de las
   tarjetas salían con borde y texto rosa.

   Aquí se devuelven a un estado neutro los botones que hay dentro del plugin,
   y encima de eso pintan las reglas de más abajo. Las claves:

     · :where() no suma especificidad, así que este bloque pesa una sola clase
       (la del contenedor). Empata con el reset del tema y gana porque la hoja
       del plugin se encola después (prioridad 99 en frontend_scripts()).
     · Va al principio del archivo a propósito: las reglas propias de cada botón
       vienen después y, al pesar lo mismo, mandan sobre este bloque.
     · Sin !important, para que «Mi propio CSS» de Personalización siga pudiendo
       corregir cualquier cosa.
   ========================================================================== */
.calendario-eventos :where(button, [type="button"], [type="submit"], [type="reset"]),
.mis-eventos-contenedor :where(button, [type="button"], [type="submit"], [type="reset"]) {
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    min-height: 0;
    min-width: 0;
    padding: 0;
    text-align: inherit;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    transition: none;
    white-space: normal;
    -webkit-user-select: auto;
    user-select: auto;
}

/* Contenedor principal */
/* El relleno de las tarjetas lo elige el usuario en Personalización → «Ajustes
   generales de las tarjetas». En pantallas pequeñas se encoge con este factor,
   en vez de con un relleno fijo por tramo: así su ajuste sigue mandando y el
   móvil no se queda con las medidas del escritorio. */
:root {
    --cal-relleno-escala: 1;
}

@media (max-width: 1024px) {
    :root { --cal-relleno-escala: 0.88; }
}

@media (max-width: 768px) {
    :root { --cal-relleno-escala: 0.75; }
}

@media (max-width: 480px) {
    :root { --cal-relleno-escala: 0.62; }
}

.calendario-eventos {
    max-width: 100%;
    /* margin: 20px 0; */
    font-family: 'Be Vietnam Pro', sans-serif;
    background: var(--cal-fondo);
    color: var(--cal-texto);
    overflow: visible;
}

/* ===== NAVEGACIÓN DEL CALENDARIO ===== */
.calendario-navegacion {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    gap: 15px;
    padding: 20px;
    background: linear-gradient(135deg, var(--calendario-primary-color), var(--calendario-primary-dark));
    color: white;
}

.calendario-prev,
.calendario-next,
.calendario-mes-prev,
.calendario-mes-next {
    border: 0px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.nav-icon.material-symbols-outlined {
    font-size: 40px;
}

.calendario-prev:hover:not(:disabled):not(.disabled),
.calendario-next:hover:not(:disabled):not(.disabled),
.calendario-mes-prev:hover:not(:disabled):not(.disabled),
.calendario-mes-next:hover:not(:disabled):not(.disabled) {
    background: transparent;
    border-color: rgba(255,255,255,0.0);
    transform: scale(1.1);
}

.calendario-prev:active:not(:disabled):not(.disabled),
.calendario-next:active:not(:disabled):not(.disabled),
.calendario-mes-prev:active:not(:disabled):not(.disabled),
.calendario-mes-next:active:not(:disabled):not(.disabled) {
    transform: scale(0.95);
}


.calendario-prev:disabled,
.calendario-next:disabled,
.calendario-mes-prev:disabled,
.calendario-mes-next:disabled,
.calendario-prev.disabled,
.calendario-next.disabled,
.calendario-mes-prev.disabled,
.calendario-mes-next.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* ===== CONTENEDOR DE FECHAS ===== */
.calendario-fechas {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.fecha-header {
    text-align: center;
    min-width: 100px;
    padding: 15px 10px;
    background: rgba(255,255,255,0.15);
    border-radius: var(--calendario-border-radius);
    border: 2px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.fecha-header.hoy {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 4px 15px rgba(255,255,255,0.2);
    transform: scale(1.05);
}

.fecha-header .dia-numero {
    font-size: 28px;
    font-weight: 700;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
}

.fecha-header .dia-nombre {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
    text-transform: capitalize;
    opacity: 0.9;
}

.fecha-header .mes-nombre {
    font-size: 12px;
    opacity: 0.8;
    text-transform: capitalize;
    font-weight: 500;
}

/* ===== CONTENIDO DEL CALENDARIO ===== */
.calendario-contenido {
    position: relative;
    height: fit-content;
    /* Reserva para navegadores sin «overflow: clip» */
    overflow: hidden;
    background: transparent;
    margin-top: 20px;
}

/* El recorte hace falta a lo ancho: al cambiar de semana las columnas se
   desplazan de lado y no deben verse las de al lado. A lo alto, en cambio, no
   hay nada que esconder, y recortando ahí se cortaban las sombras de las
   tarjetas por muy grandes que fueran.

   «hidden» en un eje y «visible» en el otro no se puede: el visible se
   convertiría en «auto» y saldría una barra de desplazamiento. Con «clip» sí,
   que es justo para lo que existe. */
@supports (overflow: clip) {
    .calendario-contenido {
        overflow-x: clip;
        overflow-y: visible;

        /* Y a lo ancho se deja un margen para que la sombra de la primera y de la
           última columna asome, en vez de cortarse justo en el borde.

           No se hace con padding a propósito: ajustarAnchoColumnas() reparte el
           ancho de contenido entre los cinco días, así que el padding estrecharía
           las tarjetas. Este margen no toca la maquetación.

           Es seguro porque fuera de las columnas no hay nada que esconder: al
           cambiar de semana se recargan los días, no se desplaza una tira larga
           (currentOffset se queda siempre en 0). */
        overflow-clip-margin: 60px;
    }
}

/* Sin backdrop-filter a propósito: un elemento que lo lleva recorta a sus
   descendientes a su propia caja, y eso cortaba las sombras de las tarjetas por
   arriba y por abajo. Además aquí no desenfocaba nada, porque la tira es
   transparente y detrás solo está el fondo del calendario. */
.calendario-dias-container {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    height: fit-content;
    border-radius: 15px;
}

.calendario-contenido::-webkit-scrollbar {
    height: 8px;
}

.calendario-contenido::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.calendario-contenido::-webkit-scrollbar-thumb {
    background: var(--calendario-primary-color);
    border-radius: 4px;
}

/* ===== COLUMNAS DE DÍAS ===== */
.dia-columna {
    flex: 0 0 280px;
    background: transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* En escritorio se pintan todos los días del rango y el carrusel desplaza el
   contenedor, así que las columnas necesitan un ancho fijo. Ese ancho lo calcula
   ajustarAnchoColumnas() en calendario.js para que quepan justo 5 en el hueco
   disponible. Va en su propia media query (el mismo corte que esDesktop() en el
   JS) para no tocar los anchos al 100% de tablet, portátil y móvil, que usan
   CSS Grid. */
@media (min-width: 1441px) {
    .dia-columna {
        flex: 0 0 var(--cal-col-ancho, 280px);
        max-width: var(--cal-col-ancho, 280px);
    }
}

.dia-columna:last-child {
    border-right: none;
}

.dia-columna.hoy {
    position: relative;
}

.dia-columna.hoy::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 5;
}

/* ===== ANIMACIONES DE DESLIZAMIENTO ===== */
.calendario-contenido.deslizando {
    pointer-events: none;
}

.calendario-contenido.deslizando .calendario-dias-container {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== HEADER DE CADA DÍA ===== */
/* ===== TIRA DE DÍAS (pestañas) =====
   Cada columna del calendario aporta su propia pestaña, así que puestas una al
   lado de la otra forman la tira de arriba. La del día de hoy va recuadrada en
   el color de acento y con la etiqueta "HOY" en la esquina, como una pestaña de
   navegador que se apoya en la regla inferior. */
.dia-header {
    position: relative;
    background: transparent;
    padding: 14px 10px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    min-height: 92px;
    color: var(--cal-texto);
    /* Todas las pestañas reservan el marco de 2px que solo pinta la de hoy: en
       transparente aquí y con color en .dia-columna.hoy. Antes ese recuadro se
       sacaba fuera con un margen negativo y .calendario-contenido, que lleva
       overflow:hidden, le cortaba el borde de arriba y el del lado. Con
       border-box el marco va por dentro, así que no ensancha la columna ni
       desplaza el contenido respecto a las demás pestañas. */
    box-sizing: border-box;
    border: 2px solid transparent;
    border-bottom: 2px solid var(--cal-linea);
}

.dia-columna.hoy .dia-header {
    background: rgba(77, 208, 225, 0.07);
    /* Solo se le da color al marco que .dia-header ya tiene reservado */
    border-color: var(--cal-acento-base);
    border-bottom-color: transparent;
    border-radius: 10px 10px 0 0;
}

.dia-fecha {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.dia-numero {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cal-acento-base);
}

.dia-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.dia-nombre {
    font-size: 15px;
    font-weight: 600;
    color: var(--cal-texto);
    text-transform: capitalize;
    line-height: 1.2;
}

.mes-nombre {
    font-size: 12px;
    color: var(--cal-texto-tenue);
    text-transform: capitalize;
    font-weight: 500;
    line-height: 1.2;
}

/* Etiqueta "HOY", pegada a la esquina superior izquierda de su pestaña */
.dia-badge {
    position: absolute;
    top: -2px;
    left: -2px;
    background: var(--cal-acento-base);
    color: #06232a;
    padding: 2px 12px;
    border-radius: 10px 0 10px 0;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.5;
}

.dia-badge-pasado {
    background: #4a5058;
    color: var(--cal-texto-suave);
}

/* ===== CONTENEDOR DE EVENTOS ===== */
.eventos-container {
    display: flex;
    flex-direction: column;
    background: transparent;
    min-height: fit-content;
    padding: 22px 12px;
    position: relative;
    gap: 20px;
}

/* ===== EVENTOS INDIVIDUALES =====
   Tarjeta oscura con una banda del color de la clase a la izquierda. El texto
   va alineado a la izquierda y la altura la marca el contenido, porque los
   títulos van de una a tres líneas. */
/* El relleno y el alto mínimo de aquí son solo el valor de partida: los pisa
   lo que se elija en Personalización → «Ajustes generales de las tarjetas». */
.evento-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    background: var(--cal-tarjeta);
    /* Lo elige Personalización → Ajustes generales de las tarjetas; el valor de
       la hoja queda como reserva */
    border-radius: var(--calp-tarjeta-sem-radio, var(--calendario-border-radius));
    padding: 14px 16px 16px 20px;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    min-height: 150px;
}

/* Banda de color de la izquierda */
.evento-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    /* El grosor lo puede cambiar cada estilo de evento desde el editor visual */
    width: var(--cal-acento-grosor, 6px);
    background: var(--cal-acento);
    /* Al pasar el ratón la banda no cambia: la transición es para cuando se
       arrastra el deslizador del grosor en el editor de estilos. */
    transition: width 0.25s ease;
}

/* Permitir que el tooltip se muestre sin cortarse */
.evento-item:has(.admin-info-ediciones:hover),
.evento-item:has(.admin-info-ediciones.tooltip-activo) {
    overflow: visible;
    z-index: 1000;
}

.evento-item:hover {
    background: var(--cal-tarjeta-hover);
    transform: translateY(-2px);
    box-shadow: var(--calendario-shadow);
}

/* ── Datos de administración: la sala en la esquina de arriba a la izquierda y
   el contador de inscritos en la de la derecha. Van en absoluto sobre la
   tarjeta, así que no le quitan sitio al contenido, y solo los ve quien
   administra. Las medidas se ajustan en Personalización → Datos de
   administración en las tarjetas. ── */
.cal-ev-top {
    position: absolute;
    top: 0;
    left: var(--cal-acento-grosor, 6px);
    right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    /* Es información, no un control: los clics pasan a la tarjeta */
    pointer-events: none;
    z-index: 5;
}

.cal-ev-sala {
    font-size: 12px;
    font-weight: 600;
    color: var(--cal-acento);
    line-height: 1.4;
    padding: 3px 8px;
    border-bottom-right-radius: 10px;
}

.badge-inscritos-contador {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 2px 8px 2px 6px;
    background: rgba(4, 23, 45, 0.82);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    border-bottom-left-radius: 10px;
    backdrop-filter: blur(4px);
}

.badge-inscritos-icono {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.badge-inscritos-numero {
    line-height: 1;
}

/* ── Ediciones con acceso ("TODOS" cuando no hay restricción) ── */
.cal-ev-acceso {
    font-size: 13px;
    font-weight: 400;
    color: var(--cal-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
}

/* ── Título + flecha ── */
.cal-ev-fila-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}

/* El diámetro y el icono se eligen en Personalización → Ajustes generales de
   las tarjetas; los valores de aquí son el reserva por si no llega el CSS
   generado (previsualizaciones del admin, por ejemplo). */
.cal-ev-flecha {
    flex-shrink: 0;
    width: var(--calp-tarjeta-flecha-caja, 28px);
    height: var(--calp-tarjeta-flecha-caja, 28px);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #15181c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.cal-ev-flecha svg {
    width: var(--calp-tarjeta-flecha-icono, 15px);
    height: var(--calp-tarjeta-flecha-icono, 15px);
}

.evento-item:hover .cal-ev-flecha {
    transform: scale(1.08);
}

.cal-ev-flecha:focus-visible {
    outline: 2px solid var(--cal-acento);
    outline-offset: 2px;
}

/* En el diseño del IRE la acción se lanza desde la flecha, así que la fila de
   botones de texto no se muestra. La de "ya estás inscrito" sí, porque es donde
   están el aviso de inscripción y la papelera para anularla. */
.evento-item > .evento-acciones:not(.evento-acciones-inscrito) {
    display: none;
}

/* Pero el botón de acceso de esa fila tampoco: la flecha de la tarjeta ya da
   acceso al evento, así que verlo también aquí duplicaba el icono. Se esconde
   en vez de quitarlo del marcado porque es justo el botón al que pulsa la
   flecha por debajo. */
.evento-item .evento-acciones-inscrito .btn-acceder-inscrito {
    display: none;
}

/* ===== LOADING MEJORADO ===== */
.calendario-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

.calendario-loading::before {
    content: '';
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--calendario-primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* .calendario-loading::after {
    content: 'Cargando eventos...';
    font-size: 14px;
    font-weight: 600;
    color: var(--calendario-text);
    margin-top: 10px;
} */

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading overlay para mejor visibilidad */
.calendario-contenido {
    position: relative;
    min-height: 200px;
}

/* .calendario-contenido.cargando::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    z-index: 50;
    pointer-events: none;
} */

/* Responsive loading */
@media (max-width: 768px) {
    .calendario-loading {
        width: 60%;
        padding: 20px;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .calendario-loading::before {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }

    .calendario-loading::after {
        font-size: 13px;
    }
}


/* ==================================================================
   CLASES CSS DE EVENTOS (campo clase_css)
   ==================================================================
   Aqui no hay ninguna clase escrita a mano: los estilos de cada tipo de
   evento se crean desde el admin (Calendario > Herramientas > Clases CSS,
   o el editor visual del Panel Tutor Admin) y el plugin los inyecta en
   wp_head con inyectar_css_personalizado(). Si añades una clase a mano
   aqui, no aparecera en los selectores del admin ni podras editarla desde
   la interfaz, asi que usa siempre el editor grafico.
   ================================================================== */


/* ===== CONTENIDO DE EVENTOS ===== */
.evento-categoria {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    color: var(--calendario-text-light);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    border: 1px solid var(--calendario-border);
}

.evento-titulo {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--cal-texto);
    line-height: 1.25;
    text-align: left;
}

/* El nombre del tutor va en el color de acento de la clase */
.evento-tutor {
    color: var(--cal-acento);
    font-size: 16px;
    font-weight: 500;
    display: block;
    text-align: left;
    text-transform: none;
    line-height: 1.3;
    margin-top: 4px;
}

.evento-descripcion {
    color: var(--cal-texto-suave);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    margin: 2px 0;
    display: block;
    text-align: left;
}

.evento-horario {
    color: var(--cal-texto-suave);
    font-size: 15px;
    display: block;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 6px;
    letter-spacing: 0.2px;
}

.admin-badge {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    padding: 1px 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 0;
    left: 0;
}

/* ===== ESTADOS ESPECIALES DE EVENTOS ===== */
.evento-item.finalizado {
    opacity: 0.7;
}

/* .evento-item.finalizado .evento-titulo {
    text-decoration: line-through;
    color: var(--calendario-text-light);
} */

/* .evento-item.finalizado::before {
    background: var(--calendario-gray-color);
} */


/* ===== EVENTOS EN DIRECTO ===== */
.evento-item.en-directo {
    animation: pulso 2s infinite;
    border-color: var(--calendario-danger-color);
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.4);
}

/* El rótulo del aviso. Texto, esquina, colores y animación se eligen en
   Personalización → Aviso de «En directo»; lo de aquí es el valor de partida por
   si no llega el CSS generado (previsualizaciones del admin, por ejemplo). */
.evento-item.en-directo .evento-titulo::after {
    content: var(--calp-directo-texto, 'EN DIRECTO');
    font-size: var(--calp-directo-tamano, 10px);
    color: var(--calp-directo-texto-color, #F0F0F0);
    font-weight: var(--calp-directo-peso, 700);
    animation: parpadeo var(--calp-directo-anim-duracion, 1000ms) infinite;
    position: absolute;
    top: 0px;
    left: 0px;
    border-bottom-right-radius: var(--calp-directo-radio, 10px);
    /* El hueco de la izquierda es para el punto: el padding va después del
       background-position para que la sombra del atajo "padding" no lo pise */
    padding: 5px 7px 5px 16px;
    background-color: var(--calp-directo-fondo, #e53e3e);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23F0F0F0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 6px center;
    background-size: 6px 6px;
}

@keyframes pulso {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes parpadeo {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.5; }
}

/* Las otras dos animaciones que se pueden elegir para el rótulo del aviso */
@keyframes calDirectoLatido {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

@keyframes calDirectoBrillo {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.45); }
}

/* ===== MENSAJE CUANDO NO HAY EVENTOS ===== */
.no-eventos {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--cal-borde);
    padding: 60px 20px;
    border-radius: var(--calendario-border-radius);
    position: relative;
    overflow: hidden;
    min-height: 150px;
    color: var(--cal-texto-tenue);
    font-size: 13px;
    letter-spacing: 0.5px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* .no-eventos::before {
    content: '';
    font-size: 48px;
    display: block;
    margin-bottom: 15px;
    opacity: 0.5;
} */

/* .no-eventos::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.1) 10px,
        rgba(255,255,255,0.1) 20px
    );
    animation: mover-patron 20s linear infinite;
} */

@keyframes mover-patron {
    0% { transform: translateX(-50px) translateY(-50px); }
    100% { transform: translateX(50px) translateY(50px); }
}

/* ===== ESTADOS DE TRANSICIÓN ===== */
.calendario-contenido.cargando,
.calendario-mes-contenido.cargando {
    pointer-events: none;
    position: relative;
}

.calendario-contenido.cargando::before,
.calendario-mes-contenido.cargando::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    backdrop-filter: blur(5px);
    z-index: 10;
}

/* ===== ANIMACIONES DE ENTRADA ===== */
.evento-item {
    animation: deslizar-entrada 0.5s ease-out;
}

@keyframes deslizar-entrada {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dia-columna {
    animation: desvanecerse-entrada 0.6s ease-out;
}

@keyframes desvanecerse-entrada {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== BOTONES Y ACCIONES DE EVENTOS ===== */
.evento-acciones {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.btn-inscribirse-evento {
    background: transparent;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.8vw;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.btn-inscribirse-evento:hover {
    background-color: transparent;
    transform: translateY(-1px);
    text-decoration: underline;
}

.btn-inscribirse-evento:active {
    transform: translateY(0);
}

.btn-inscribirse-evento {
    position: relative;
    overflow: hidden;
}

.btn-inscribirse-evento::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-inscribirse-evento:hover::after {
    width: 300px;
    height: 300px;
}

.btn-inscrito-evento {
    background: linear-gradient(135deg, #28a745, #218838);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: not-allowed;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.9;
}

.btn-inscrito-evento:disabled {
    opacity: 0.9;
}

.btn-cancelar-inscripcion {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: currentColor;
    text-decoration: none;
    opacity: 0.5;
    transition: color 0.2s, background 0.2s, opacity 0.2s;
    z-index: 2;
}
.btn-cancelar-inscripcion:hover {
    color: #1a73e8;
    background: rgba(26, 115, 232, 0.08);
    opacity: 1;
}
.btn-cancelar-inscripcion svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* El color de este boton sobre fondo oscuro lo genera el editor visual de
   estilos para cada clase (generar_css_estilo_visual en el PHP), asi que
   aqui solo queda el aspecto por defecto. */

@media (max-width: 768px) {
    .btn-cancelar-inscripcion {
        width: 24px;
        height: 24px;
        bottom: 6px;
        left: 6px;
    }
    .btn-cancelar-inscripcion svg {
        width: 14px;
        height: 14px;
    }
}

/* Acciones apiladas cuando el usuario ya está inscrito.
   Sobre el fondo oscuro de la tarjeta van en fila, compactas y con el texto
   claro; el resto de la hoja las declara en negro para el tema claro. */
.evento-acciones-inscrito {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.evento-item .evento-acciones-inscrito .btn-inscrito-evento,
.evento-item .evento-acciones-inscrito .btn-acceder-inscrito,
.evento-item .evento-acciones-inscrito .btn-cancelar-inscrito {
    width: auto;
    padding: 0;
    font-size: 12px;
    color: var(--cal-texto-suave);
    background: transparent;
    border: none;
}

.evento-item .evento-acciones-inscrito .btn-inscrito-evento {
    color: var(--cal-acento);
    text-decoration: none;
    cursor: default;
}

.evento-item .evento-acciones-inscrito .btn-acceder-inscrito:hover,
.evento-item .evento-acciones-inscrito .btn-cancelar-inscrito:hover {
    color: var(--cal-texto);
}

.btn-acceder-inscrito {
    background: transparent;
    color: #030408;
    border: none;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.8vw;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    width: 100%;
    font-family: 'Be Vietnam Pro', sans-serif;
    justify-content: center;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.btn-acceder-inscrito:focus {
    background: transparent;
    color: #030408;
    border: none;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.8vw;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    width: 100%;
    font-family: 'Be Vietnam Pro', sans-serif;
    justify-content: center;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.btn-acceder-inscrito:active {
    background: transparent;
    color: #030408;
    border: none;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.8vw;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    width: 100%;
    font-family: 'Be Vietnam Pro', sans-serif;
    justify-content: center;
    text-decoration: underline;
    text-underline-offset: 4px;
}


.icono-inscripcion {
    font-size: 11px;
}

.evento-completo,
.evento-finalizado,
.evento-inscripcion-cerrada {
    background: rgba(0,0,0,0.1);
    color: #FFFFFF;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
}

.evento-completo {
    background: rgba(231, 76, 60, 0.1);
    color: var(--calendario-danger-color);
}

.evento-finalizado {
    background: rgba(149, 165, 166, 0.2);
    color: var(--calendario-gray-color);
}

/* ===== MODAL DE INSCRIPCIÓN ===== */
.modal-inscripcion-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    padding: 20px;
    backdrop-filter: blur(5px);
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(5px);
    }
}

/* ===== VUELO DE LA TARJETA AL INSCRIBIRSE =====
   Con «la tarjeta gira hasta el centro» activado (Personalización → Ajustes
   generales de las tarjetas), al pulsar para inscribirse se clona la tarjeta y
   el clon viaja girando hasta donde sale el formulario. El movimiento lo calcula
   calVueloInscripcion() en calendario.js; aquí solo está el envoltorio del clon.

   El envoltorio copia las clases del contenedor original (.calendario-eventos o
   .mis-eventos-contenedor) para que al clon le siga aplicando su estilo aunque
   cuelgue de <body>. */
.cal-vuelo-insc {
    position: fixed;
    /* Por encima del overlay del formulario, que va a 999999 */
    z-index: 1000000;
    margin: 0;
    padding: 0;
    pointer-events: none;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Sin el fondo del calendario detrás del clon: solo se ve la tarjeta */
.cal-vuelo-insc.calendario-eventos,
.cal-vuelo-insc.mis-eventos-contenedor {
    background: transparent;
    max-width: none;
    overflow: visible;
}

/* El clon lleva la escala inversa a la del envoltorio (la pone el JS), así que
   su origen de transformación tiene que ser la esquina de arriba a la izquierda:
   desde el centro, el contenido se descolocaría al crecer la tarjeta. */
.cal-vuelo-insc > .cal-vuelo-insc-clon {
    transform-origin: 0 0;
}

/* El clon ocupa exactamente el hueco que medía la tarjeta original. El
   border-box es necesario porque el relleno va dentro de esa medida. */
.cal-vuelo-insc > .evento-item,
.cal-vuelo-insc > .mes-evento-item,
.cal-vuelo-insc > .mi-evento-item {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    /* Las animaciones de entrada no se repiten sobre el clon */
    animation: none;
    transition: none;
}

/* Mientras la tarjeta vuela, el formulario espera escondido: se ve solo el
   fondo oscurecido, y al aterrizar entra completando el giro. */
body.cal-insc-volando .modal-inscripcion-contenido {
    visibility: hidden;
}

/* ===== TARJETA DE INSCRIPCIÓN =====
   Misma tarjeta que en la página de la sesión, aquí como popup: banda del color
   del evento a la izquierda, cabecera con el cuándo y el qué, y debajo un panel
   con el texto de venta y el hueco para la duda. */
.modal-inscripcion-contenido {
    --cal-acento: var(--cal-acento-base);

    /* La banda de color de la izquierda va aquí, como fondo, y no como un
       ::before en absoluto: esta caja tiene scroll propio (max-height + overflow)
       y dentro de una caja con scroll un elemento absoluto se desplaza con el
       contenido, así que la banda se quedaba a media altura en cuanto el
       formulario era más alto que la pantalla. Un fondo no se mueve al hacer
       scroll, así que cubre siempre todo el alto, y el redondeo de la caja se lo
       recorta solo. */
    --insc-banda: 34px;
    background: linear-gradient(to right,
                var(--cal-acento) var(--insc-banda),
                var(--cal-fondo) var(--insc-banda));
    border-radius: 12px;
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    animation: modalSlideIn 0.3s ease-out;
    position: relative;
    font-family: 'Be Vietnam Pro', sans-serif;
    color: var(--cal-texto);
    padding-left: var(--insc-banda);
}

/* ── Cabecera: el cuándo a la izquierda, el qué a la derecha ── */
.insc-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 20px 30px;
    padding: 26px 30px 4px;
}

.insc-tipo {
    font-size: 17px;
    color: var(--cal-texto);
    line-height: 1.3;
}

.insc-dia {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--cal-acento);
}

.insc-mes {
    font-size: 17px;
    font-weight: 700;
    color: var(--cal-texto);
    line-height: 1.3;
}

.insc-horario {
    font-size: 15px;
    color: var(--cal-texto-suave);
    line-height: 1.5;
}

.insc-tutor {
    font-size: 17px;
    color: var(--cal-texto);
    line-height: 1.4;
    margin-top: 14px;
}

.insc-titulo-evento {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--cal-acento);
}

/* ── Panel con el texto y la duda ── */
.modal-inscripcion-body {
    padding: 18px 30px 30px;
}

.insc-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 24px 30px;
    align-items: start;
    background: var(--cal-tarjeta);
    border-radius: 10px;
    padding: 26px 30px 30px;
}

.insc-col-texto {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.insc-reclamo {
    margin: 0;
    font-size: 17px;
    color: var(--cal-texto);
    line-height: 1.4;
}

.insc-cuerpo {
    font-size: 16px;
    line-height: 1.5;
    color: var(--cal-texto);
}

.insc-cuerpo p {
    margin: 0 0 15px;
}

.insc-cuerpo p:last-child {
    margin-bottom: 0;
}

.insc-cuerpo strong,
.insc-cuerpo b {
    font-weight: 700;
    color: var(--cal-texto);
}

/* Botón de inscripción, en el color del evento */
.modal-inscripcion-contenido .form-actions {
    display: flex;
    margin-top: 8px;
    padding: 0;
    border: none;
}

.modal-inscripcion-contenido .btn-inscribirse {
    background: var(--cal-acento);
    color: #06232a;
    border: none;
    border-radius: 6px;
    padding: 13px 22px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
    width: auto;
}

.modal-inscripcion-contenido .btn-inscribirse:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.modal-inscripcion-contenido .btn-inscribirse:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Columna de la duda ── */
.insc-col-duda {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.insc-label-oculta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.modal-inscripcion-contenido .insc-col-duda textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 400px;
    resize: vertical;
    background: var(--cal-fondo);
    border: 1px solid var(--cal-borde);
    border-radius: 10px;
    padding: 16px 18px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--cal-texto);
}

.modal-inscripcion-contenido .insc-col-duda textarea::placeholder {
    color: var(--cal-texto-tenue);
}

.modal-inscripcion-contenido .insc-col-duda textarea:focus {
    outline: none;
    border-color: var(--cal-acento);
}

.insc-campo-imagen {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: var(--cal-texto-tenue);
}

.modal-inscripcion-contenido .insc-campo-imagen label {
    font-size: 13px;
    color: var(--cal-texto-suave);
}

.modal-inscripcion-contenido .insc-campo-imagen input[type="file"] {
    font-size: 12px;
    color: var(--cal-texto-suave);
}

/* Email: solo se ve si no se sabe quién es quien entra */
.modal-inscripcion-contenido .insc-campo-email label {
    display: block;
    font-size: 13px;
    color: var(--cal-texto-suave);
    margin-bottom: 5px;
}

.modal-inscripcion-contenido .insc-campo-email input {
    width: 100%;
    box-sizing: border-box;
    background: var(--cal-fondo);
    border: 1px solid var(--cal-borde);
    border-radius: 6px;
    padding: 11px 14px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 15px;
    color: var(--cal-texto);
}

/* Aviso de resultado tras inscribirse */
.modal-inscripcion-contenido .inscripcion-mensaje {
    margin-top: 18px;
    border-radius: 10px;
    padding: 18px 20px;
    background: var(--cal-tarjeta);
    color: var(--cal-texto);
    font-size: 15px;
    line-height: 1.5;
}

/* En pantallas estrechas, una columna encima de la otra */
@media (max-width: 860px) {
    .insc-cabecera,
    .insc-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .insc-titulo-evento {
        font-size: 24px;
    }

    .insc-col-duda textarea {
        min-height: 180px;
    }

    /* En pantallas pequeñas la banda se estrecha: un solo número, que mueve el
       fondo y el relleno a la vez */
    .modal-inscripcion-contenido {
        --insc-banda: 20px;
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-inscripcion-contenido::-webkit-scrollbar {
    width: 4px;
}

.modal-inscripcion-contenido::-webkit-scrollbar-track {
    background: transparent;
}

.modal-inscripcion-contenido::-webkit-scrollbar-thumb {
    background: #030408;
    border-radius: 2px;
}

.modal-inscripcion-contenido::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.4);
}

/* Cerrar: flotando en la esquina, ya que la cabecera es de dos columnas */
.modal-cerrar {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 2;
    background: none;
    border: none;
    font-size: 34px;
    line-height: 1;
    color: var(--cal-texto-tenue);
    cursor: pointer;
    padding: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.modal-cerrar:hover {
    background-color: transparent;
    color: var(--cal-texto);
}

/* Body del modal */
.modal-inscripcion-body {
    padding: 0 30px 30px;
}

/* Iconos de línea del modal de inscripción (tutor, fecha y hora) */
.evento-info-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #030408;
}

.evento-info-icono svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* Formulario de inscripción */
.form-inscripcion {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.calendario-form-group {
    display: flex;
    flex-direction: column;
}

.calendario-form-group label {
    font-weight: 600;
    color: var(--calendario-text);
    margin-bottom: 8px;
    font-size: 14px;
}

.calendario-form-group input,
.calendario-form-group textarea {
    border: 2px white;
    border-radius: 6px;
    padding: 12px 15px;
    font-size: 14px;
    font-family: inherit;
    background: white;
    color: #030408;
    transition: all 0.3s ease;
}

.calendario-form-group input:focus,
.calendario-form-group textarea:focus {
    outline: none;
    border-color: #030408;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
}

.calendario-form-group textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

.calendario-form-group textarea::placeholder {
    color: #030408a9;
    font-style: italic;
}

.form-help {
    font-size: 12px;
    color: var(--calendario-text-light);
    margin-top: 5px;
    font-style: italic;
}

/* Acciones del formulario */
.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.btn-inscribirse {
    background: #030408;
    color: white;
    border: 1px solid #030408;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    flex: 1;
    justify-content: center;
    min-height: 45px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-inscribirse:hover:not(:disabled) {
    background: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    color: #030408;
    border: 1px solid #030408;
}

.btn-inscribirse:active {
    transform: translateY(0);
}

.btn-inscribirse:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-cancelar {
    background: transparent;
    color: #030408;
    border: 1px solid #030408;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
}

.btn-cancelar:hover {
    background: #030408;
    border: 1px solid #030408;
    color: #FFFFFF;
}

/* Spinner de carga */
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* Mensajes de respuesta */
.inscripcion-mensaje {
    margin-top: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: 500;
    animation: mensajeSlideIn 0.3s ease-out;
}

@keyframes mensajeSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.inscripcion-mensaje.mensaje-success {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
}

.inscripcion-mensaje.mensaje-error {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: #721c24;
}

.inscripcion-mensaje p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inscripcion-mensaje.mensaje-success p::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.75 12.5l4.75 4.75L19.25 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.75 12.5l4.75 4.75L19.25 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.inscripcion-mensaje.mensaje-error p::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.25 6.25l11.5 11.5M17.75 6.25L6.25 17.75'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.25 6.25l11.5 11.5M17.75 6.25L6.25 17.75'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Prevenir scroll del body cuando el modal está abierto */
body.modal-inscripcion-abierto {
    overflow: hidden;
}

/* Eventos sin acceso */
.evento-item.sin-acceso {
    opacity: 0.6;
    border-style: dashed;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    position: relative;
}

.evento-item.sin-acceso::before {
    background: #6c757d;
}

.evento-item.sin-acceso::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.75' y='10.25' width='14.5' height='9.75' rx='2.4'/%3E%3Cpath d='M8.25 10.25V7.6a3.75 3.75 0 0 1 7.5 0v2.65'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.75' y='10.25' width='14.5' height='9.75' rx='2.4'/%3E%3Cpath d='M8.25 10.25V7.6a3.75 3.75 0 0 1 7.5 0v2.65'/%3E%3C/svg%3E") center / contain no-repeat;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
    opacity: 0.7;
}

.evento-sin-acceso {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    color: #856404;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #ffeaa7;
    display: flex;
    align-items: center;
    gap: 6px;
}

.evento-item.sin-acceso .evento-titulo {
    color: #6c757d;
}

.evento-item.sin-acceso .evento-tutor {
    color: #6c757d;
}

/* Eventos de libre acceso */
.evento-item.libre-acceso::before {
    background: linear-gradient(45deg, #007bff, #0056b3);
}

.btn-acceso-libre {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.btn-acceso-libre:hover {
    background: linear-gradient(135deg, #20c997, #17a2b8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.mensaje-libre-acceso {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(0, 123, 255, 0.1);
    border-radius: 4px;
}

.mensaje-libre-acceso small {
    color: #0056b3;
    font-style: italic;
    line-height: 1.3;
}

/* Estilos para admin */
.inscripcion-requerida,
.inscripcion-libre {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.inscripcion-requerida {
    background: linear-gradient(135deg, #007cba, #005a87);
    color: white;
}

.inscripcion-libre {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

/* Botón de acceder directamente */
.btn-acceder-evento {
    background: transparent;
    color: #030408;
    border: none;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.8vw;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    width: 100%;
    font-family: 'Be Vietnam Pro', sans-serif;
    justify-content: center;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.btn-acceder-evento:hover {
    background-color: transparent;
    transform: translateY(-1px);
    color: #030408;
    text-decoration: underline;
}

/* Estado cuando no hay enlace disponible */
.evento-sin-enlace {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.8;
}

.evento-item.libre-acceso .evento-categoria {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1565c0;
    border: 1px solid #90caf9;
}

/* Accesibilidad */
.btn-acceder-evento:focus {
    background-color: transparent;
    outline: none;
    box-shadow: 0 0 0 transparent;
}

/* Animación sutil para el botón */
.btn-acceder-evento {
    position: relative;
    overflow: hidden;
}

.btn-acceder-evento::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-acceder-evento:hover::after {
    width: 300px;
    height: 300px;
}

/* ===== NUEVA ESTRUCTURA DEL HEADER ===== */
.calendario-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #e8e8e88c;
    border-radius: 5px;
    backdrop-filter: blur(10px);
}

.calendario-nav {
    background: transparent;
    color: #030408;
    padding: 5px 10px;
    /* border-radius: 5px; */
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.calendario-nav.calendario-prev:hover:not(:disabled):not(.disabled) {
    background: transparent;
    border-color: transparent;
    transform: translateX(-3px);
}

.calendario-nav.calendario-next:hover:not(:disabled):not(.disabled) {
    background: transparent;
    border-color: transparent;
    transform: translateX(3px);
}

.calendario-nav.calendario-mes-prev:hover:not(:disabled):not(.disabled) {
    background: transparent;
    border-color: transparent;
    transform: translateX(-3px);
}

.calendario-nav.calendario-mes-next:hover:not(:disabled):not(.disabled) {
    background: transparent;
    border-color: transparent;
    transform: translateX(3px);
}

.calendario-nav:active:not(:disabled):not(.disabled) {
    transform: translateY(0);
    background-color: transparent !important;
    border-color: transparent !important;
}

.calendario-nav:focus:not(:disabled):not(.disabled) {
    transform: translateY(0);
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.calendario-nav:disabled,
.calendario-nav.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* .nav-icon {
    font-size: 30px;
    font-weight: 300;
    color: #030408;
} */

.nav-text {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Info central */
.calendario-info {
    flex: 1;
    text-align: center;
    padding: 0 30px;
}

.calendario-titulo {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.calendario-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.dias-selector {
    background: rgba(255,255,255,0.9);
    color: var(--calendario-text);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 15px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

.dias-selector:hover {
    background: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.calendario-fecha-actual, .calendario-mes-actual {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 1.4vw;
    font-weight: 700;
    margin: auto;
}

/* ===== BOTÓN HOY ===== */
.calendario-btn-hoy {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.calendario-btn-hoy:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.calendario-btn-hoy:active {
    transform: translateY(0);
}

.calendario-btn-hoy .icono-hoy {
    font-size: 16px;
}

.calendario-btn-hoy .texto-hoy {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Animación de entrada del botón */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.calendario-btn-hoy[style*="display: inline-flex"] {
    animation: slideDown 0.3s ease-out;
}

/* ===== EVENTOS PASADOS ===== */
/* .dia-columna.pasado {
    opacity: 0.7;
} */

/* .dia-columna.pasado .dia-header {
    background: linear-gradient(135deg, #e9ecef, #dee2e6);
} */

/* .dia-columna.pasado .dia-numero {
    color: #6c757d;
} */

.dia-columna.pasado .dia-badge {
    display: none;
}

/* .dia-columna.pasado .evento-item {
    opacity: 0.8;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
} */

.dia-columna.pasado .evento-item::before {
    background: #adb5bd;
}

.dia-columna.pasado .evento-item .btn-inscribirse-evento,
.dia-columna.pasado .evento-item .btn-acceder-evento {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Badge para eventos pasados */
.evento-pasado-badge {
    background: #6c757d;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 8px;
    display: inline-block;
}

/* ===== EVENTOS MULTI-DÍA ===== */
.evento-item.evento-multidia {
    background: linear-gradient(135deg, #faf5ff, #ffffff);
}

.evento-item.evento-multidia::before {
    background: linear-gradient(45deg, #8b5cf6, #6d28d9);
}

.evento-item.evento-multidia .evento-horario {
    color: #030408;
    font-size: 0.8vw;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.evento-nota-dia {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Reducir animaciones para usuarios con preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .evento-item,
    .dia-columna,
    .calendario-prev,
    .calendario-next,
    .evento-item.en-directo {
        animation: none;
        transition: none;
    }
    
    .evento-item:hover,
    .dia-columna:hover {
        transform: none;
    }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .calendario-contenido {
        gap: 12px;
        padding: 15px;
    }
    
    .dia-columna {
        min-width: 260px;
    }
    
    .evento-item {
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .calendario-eventos {
        margin: 10px 0;
    }
    
    .calendario-navegacion {
        flex-wrap: wrap;
        padding: 15px;
        gap: 10px;
    }
    
    .calendario-contenido {
        flex-direction: column;
        padding: 10px;
        gap: 15px;
        height: 450px;
    }
    
    .dia-columna {
        min-width: 100%;
        margin-bottom: 10px;
        flex: 0 0 250px;
    }
    
    .calendario-fechas {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .fecha-header {
        min-width: 80px;
        padding: 12px 8px;
    }
    
    .fecha-header .dia-numero {
        font-size: 24px;
    }
    
    .fecha-header .dia-nombre {
        font-size: 13px;
    }
    
    .fecha-header .mes-nombre {
        font-size: 11px;
    }
    
    .evento-titulo {
        font-size: 15px;
    }
    
    .evento-tutor {
        font-size: 13px;
    }
    
    .evento-horario {
        font-size: 12px;
    }
    
    .calendario-header {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .calendario-info {
        padding: 0;
        order: -1;
    }
    
    .calendario-titulo {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .calendario-nav {
        min-width: 100px;
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .dia-header {
        padding: 12px;
        gap: 2px;
    }
    
    .dia-numero {
        font-size: 28px;
        min-width: 40px;
    }
    
    .eventos-container {
        padding: 12px;
        min-height: 250px;
    }

    .evento-inscripcion-cerrada {
        font-size: 2.5vw;
        line-height: 1.5;
    }
    
    .btn-acceder-evento,
    .evento-sin-enlace {
        padding: 10px 14px;
        font-size: 13px;
        width: 100%;
        justify-content: center;
    }
    
    .modal-inscripcion-overlay {
        padding: 10px;
        align-items: flex-start;
        padding-top: 5vh;
    }
    
    .modal-inscripcion-contenido {
        max-height: 95vh;
    }
    
    .insc-cabecera {
        padding: 20px 20px 0;
    }

    .modal-inscripcion-body {
        padding: 14px 20px 20px;
    }

    .insc-panel {
        padding: 20px;
    }
    
    .calendario-btn-hoy {
        padding: 6px 16px;
        font-size: 13px;
    }
    
    .calendario-info {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .calendario-prev,
    .calendario-next {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .calendario-prev,
    .calendario-next {
        -webkit-tap-highlight-color: transparent;
    }
    
    .fecha-header {
        min-width: 70px;
        padding: 10px 6px;
    }
    
    .fecha-header .dia-numero {
        font-size: 20px;
    }
    
    .eventos-container {
        min-height: 300px;
        padding: 10px;
    }
    
    .dia-columna {
        flex: 0 0 100vw;
    }
    
    .calendario-contenido {
        height: 400px;
        margin-top: 15px;
    }
    
    .calendario-header {
        padding: 10px 15px;
    }
    
    .calendario-nav {
        min-width: 80px;
        padding: 8px 12px;
    }
    
    .nav-text {
        display: none;
    }
    
    .calendario-controles {
        flex-direction: column;
        gap: 8px;
    }
    
    .dias-selector {
        width: 100%;
        padding: 8px 12px;
    }
    
    .modal-inscripcion-overlay {
        padding: 5px;
        padding-top: 2vh;
    }
    
    .insc-cabecera {
        padding: 16px 15px 0;
    }

    .modal-inscripcion-body {
        padding: 12px 15px 15px;
    }

    .insc-panel {
        padding: 16px;
    }
    
    .calendario-btn-hoy {
        width: 100%;
        justify-content: center;
    }
}

/* ===== MODO DE ALTO CONTRASTE ===== */
@media (prefers-contrast: high) {
    :root {
        --calendario-border: #000;
        --calendario-text: #000;
        --calendario-text-light: #333;
        --calendario-background: #fff;
    }
    
    .calendario-eventos.tema-oscuro {
        --calendario-border: #fff;
        --calendario-text: #fff;
        --calendario-text-light: #ccc;
        --calendario-background: #000;
    }
    
    .evento-item {
        border-width: 3px;
    }
    
    .evento-item::before {
        width: 6px;
    }
}

/* ===== ERROR HANDLING ===== */
.calendario-error {
    text-align: center;
    padding: 40px;
    background-color: #FFFFFF1c;
    backdrop-filter: blur(10px);
    border: 1px solid #030408;
    border-radius: 5px;
    color: #856404;
    margin: 20px 0;
}

.calendario-error::before {
    content: '';
    display: inline-block;
    width: 48px;
    height: 48px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.25 2.9 20.25h18.2L12 4.25Z'/%3E%3Cpath d='M12 10v4.25'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.25 2.9 20.25h18.2L12 4.25Z'/%3E%3Cpath d='M12 10v4.25'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E") center / contain no-repeat;
    display: block;
    margin-bottom: 15px;
}

/* Estructura de los textos del aviso. Antes iban con style="" desde
   calendario.js, así que no había manera de ajustarlos desde el admin: aquí
   solo se coloca cada pieza y los colores y tamaños los pone
   generar_css_personalizacion(). */
.calendario-error .cal-error-titulo {
    margin: 0 0 6px;
}

.calendario-error .cal-error-mensaje {
    margin: 0 0 4px;
}

.calendario-error .cal-error-acciones {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.calendario-error .cal-error-nota {
    display: block;
    margin-top: 10px;
}

.calendario-error button {
    background: var(--calendario-primary-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.calendario-error button:hover {
    background: var(--calendario-primary-dark);
    transform: translateY(-1px);
}

.calendario-error .recargar-eventos {
    border-radius: 5px;
}

/* ===== TOOLTIPS (si se implementan en el futuro) ===== */
.calendario-tooltip {
    position: absolute;
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.calendario-tooltip.visible {
    opacity: 1;
}

.calendario-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0,0,0,0.9);
}

/* ===== PRINT STYLES ===== */
@media print {
    .calendario-eventos {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    .calendario-navegacion {
        display: none !important;
    }
    
    .calendario-contenido {
        display: block !important;
        overflow: visible !important;
    }
    
    .dia-columna {
        break-inside: avoid;
        margin-bottom: 20px;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    
    .evento-item {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    
    .evento-item::before {
        display: none !important;
    }
}



/* ===== AGREGAR AL FINAL DE calendario.css ===== */
/* ===== RESPONSIVE: PC + TABLET + MÓVIL ===== */

/* =====================================================
   TABLET - 1024px (769px - 1024px)
   3 columnas en grid
   ===================================================== */
@media (max-width: 1024px) and (min-width: 769px) {
    .calendario-eventos {
        margin: 15px 0;
    }
    
    /* Header horizontal con flechas */
    .calendario-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 15px 20px;
        gap: 15px;
    }
    
    .calendario-nav {
        width: 55px;
        height: 55px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        flex-shrink: 0;
    }
    
    .calendario-nav .nav-icon {
        font-size: 30px;
    }
    
    .calendario-nav .nav-text {
        display: none;
    }
    
    .calendario-info {
        flex: 1;
        padding: 0 15px;
        text-align: center;
    }
    
    .calendario-titulo {
        font-size: 20px;
    }
    
    .calendario-fecha-actual, .calendario-mes-actual {
        font-size: 20px;
        margin-bottom: 0;
    }
    
    /* ✅ GRID DE 3 COLUMNAS PARA TABLET */
    .calendario-contenido {
        padding: 15px;
        gap: 12px;
        height: auto;
        /* El recorte lo pone la regla general, que solo recorta a lo ancho */
    }
    
    .calendario-dias-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en tablet */
        grid-template-rows: 1fr;
        gap: 12px;
        width: 100%;
        transform: none !important;
    }
    
    /* Ocultar día 4 en adelante */
    .dia-columna:nth-child(n+4) {
        display: none !important;
    }
    
    .dia-columna {
        min-width: 100%;
        width: 100%;
    }
    
    .dia-header {
        padding: 15px;
    }
    
    .dia-numero {
        font-size: 26px;
    }
    
    .dia-nombre {
        font-size: 15px;
    }
    
    .mes-nombre {
        font-size: 12px;
    }
    
    .eventos-container {
        padding: 15px;
        min-height: 160px;
        gap: 20px;
    }

    .evento-titulo {
        font-size: 17px !important;
    }
    
    .evento-tutor {
        font-size: 15px !important;
    }
    
    .evento-horario {
        font-size: 14px !important;
    }
    
    .btn-acceder-evento,
    .btn-inscribirse-evento {
        font-size: 14px !important;
        padding: 10px 14px;
    }
}

/* =====================================================
   MÓVIL - 768px (≤768px)
   1 columna en grid
   ===================================================== */
@media (max-width: 768px) {
    .calendario-eventos {
        margin: 10px 0;
        /* Solo el eje ancho: el alto lo deja libre la regla general, para no
           cortar las sombras. El !important venía de fábrica, para ganarle al
           tema; sin soporte de «clip» se queda el recorte de la regla base. */
        overflow-x: clip !important;
        touch-action: pan-y;
        max-width: 100vw;
        position: relative;
    }
    
    /* Header horizontal con flechas */
    .calendario-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        gap: 5px;
    }
    
    .calendario-nav {
        min-width: auto;
        width: 50px;
        height: 50px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        flex-shrink: 0;
    }
    
    .calendario-nav .nav-icon {
        font-size: 28px;
    }
    
    .calendario-nav .nav-text {
        display: none;
    }
    
    .calendario-info {
        flex: 1;
        padding: 0 10px;
        order: 0;
        text-align: center;
        gap: 0;
    }
    
    .calendario-titulo {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .calendario-fecha-actual, .calendario-mes-actual {
        font-size: 20px;
        margin-bottom: 0;
    }
    
    .calendario-btn-hoy {
        padding: 6px 16px;
        font-size: 13px;
        margin-top: 5px;
    }

    .nav-icon.material-symbols-outlined {
        font-size: 22px;
    }
    
    /* ✅ GRID DE 1 COLUMNA PARA MÓVIL */
    .calendario-contenido {
        padding: 0px;
        gap: 0px;
        height: auto;
        /* Solo el eje ancho, para no cortar las sombras de las tarjetas */
        overflow-x: clip !important;
        touch-action: pan-y;
        max-width: 100%;
        position: relative;
    }

    .calendario-dias-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        /* «clip» y no «hidden»: con hidden, el eje alto se convierte en «auto» y
           volvería a cortar las sombras de las tarjetas */
        overflow-x: clip !important;
    }

    /* Ocultar día 2 en adelante (por si acaso) */
    .dia-columna:nth-child(n+2) {
        display: none !important;
    }

    .dia-columna {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 0;
    }
    
    .dia-header {
        padding: 12px;
    }
    
    .dia-fecha {
        gap: 8px;
    }
    
    .dia-numero {
        font-size: 24px;
    }
    
    .dia-nombre {
        font-size: 14px;
    }
    
    .mes-nombre {
        font-size: 11px;
    }
    
    .dia-badge {
        font-size: 10px;
        padding: 2px 6px;
    }
    
    .eventos-container {
        padding: 12px;
        min-height: 175px;
        gap: 20px;
    }

    .evento-item {
        height: auto;
    }
    
    .evento-titulo {
        font-size: 17px !important;
        line-height: 1.3;
    }
    
    .evento-tutor {
        font-size: 15px !important;
        line-height: 1.3;
        /* margin: 6px 0; */
    }
    
    .evento-horario {
        font-size: 14px !important;
        /* margin: 6px 0; */
    }
    
    .btn-acceder-evento,
    .btn-inscribirse-evento {
        padding: 8px 12px;
        font-size: 14px !important;
        width: 100%;
    }
    
    .no-eventos {
        min-height: 160px;
        padding: 20px 10px;
        font-size: 14px;
    }

    .evento-pasado-badge {
        font-size: 2.5vw;
    }
    
    /* Modal */
    .modal-inscripcion-overlay {
        padding: 10px;
        align-items: flex-start;
        padding-top: 5vh;
    }
    
    .modal-inscripcion-contenido {
        max-height: 95vh;
    }
    
    .insc-cabecera {
        padding: 20px 20px 0;
    }

    .modal-inscripcion-body {
        padding: 14px 20px 20px;
    }

    .insc-panel {
        padding: 20px;
    }
}

/* =====================================================
   MÓVIL PEQUEÑO - 480px
   ===================================================== */
@media (max-width: 480px) {
    .calendario-nav {
        width: 45px;
        height: 45px;
    }
    
    .calendario-nav .nav-icon {
        font-size: 24px;
    }
    
    .calendario-info {
        padding: 0 5px;
    }
    
    .calendario-fecha-actual, .calendario-mes-actual {
        font-size: 18px;
    }
    
    /* Mantener 2 columnas */
    .calendario-dias-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .dia-header {
        padding: 10px 8px;
        height: 60px;
    }
    
    .dia-numero {
        font-size: 25px;
    }
    
    .dia-nombre {
        font-size: 15px;
    }
    
    .mes-nombre {
        font-size: 10px;
    }
    
    .eventos-container {
        padding: 10px;
        min-height: 130px;
        gap: 15px;
    }
    
    .evento-titulo {
        font-size: 17px !important;
    }
    
    .evento-tutor {
        font-size: 15px !important;
    }
    
    .evento-horario {
        font-size: 14px !important;
    }
    
    .btn-acceder-evento,
    .btn-inscribirse-evento {
        font-size: 14px !important;
        padding: 6px 10px;
    }
    
    .modal-inscripcion-overlay {
        padding: 5px;
        padding-top: 2vh;
    }
    
    .insc-cabecera {
        padding: 16px 15px 0;
    }

    .modal-inscripcion-body {
        padding: 12px 15px 15px;
    }

    .insc-panel {
        padding: 16px;
    }
    
    .calendario-btn-hoy {
        width: fit-content;
        justify-content: center;
        padding: 8px 12px;
    }
}

/* =====================================================
   PANTALLAS MUY PEQUEÑAS - 360px (opcional)
   1 columna - DESACTIVADO: Se fuerzan 2 columnas en todos los móviles
   ===================================================== */
/* @media (max-width: 360px) {
    .calendario-dias-container {
        grid-template-columns: 1fr;
    }

    .dia-columna:nth-child(2) {
        display: block !important;
    }
} */

/* =====================================================
   LANDSCAPE MÓVIL/TABLET
   ===================================================== */
@media (max-width: 1024px) and (orientation: landscape) {
    .calendario-dias-container {
        min-height: auto;
    }
    
    .eventos-container {
        min-height: 120px;
    }
}

/* Tablet landscape específico */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .calendario-dias-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =====================================================
   TIPOGRAFIA DE LAS TARJETAS EN TABLET/MOVIL
   =====================================================
   Antes esto enumeraba una por una las clases de evento. Ahora va sobre
   .evento-item, que esta presente en todas las tarjetas, asi que sirve
   para cualquier clase que se cree desde el admin.
   ===================================================== */
@media (max-width: 1024px) {
    .evento-item .evento-titulo,
    .evento-item .cal-ev-titulo {
        font-size: 17px !important;
    }

    .evento-item .evento-tutor,
    .evento-item .cal-ev-tutor {
        font-size: 15px !important;
    }
}

@media (max-width: 768px) {
    .evento-item .evento-titulo,
    .evento-item .cal-ev-titulo {
        font-size: 17px !important;
    }

    .evento-item .evento-tutor,
    .evento-item .cal-ev-tutor {
        font-size: 15px !important;
    }
}

/* =====================================================
   BADGES ADMIN
   ===================================================== */
@media (max-width: 1024px) {
    .admin-badge {
        font-size: 10px;
        padding: 3px 6px;
    }
}

/* =====================================================
   ANIMACIONES SUAVES
   ===================================================== */
@media (max-width: 1024px) {
    .calendario-eventos * {
        transition-duration: 0.2s !important;
    }
}

/* =====================================================
   BOTÓN EDITAR - SOLO ADMINISTRADORES (VISTA SEMANAL)
   ===================================================== */

.btn-editar-evento {
    position: absolute;
    bottom: 0;
    right: 0;
    /* display: inline-flex; */
    padding: 1px 10px;
    background: linear-gradient(135deg, #ff9800, #f57c00) !important;
    color: white;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    z-index: 10;
    pointer-events: none;
    border-top-left-radius: 16px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

/* Mostrar botón al hacer hover en el evento */
.evento-item:hover .btn-editar-evento {
    /* opacity: 1;
    transform: translateY(0); */
    pointer-events: auto;
}

/* Hover del botón editar */
/* .btn-editar-evento:hover {
    background: rgba(37, 99, 235, 1);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.4);
} */

/* Active state */
/* .btn-editar-evento:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
} */

/* Icono del botón */
.btn-editar-evento .icono-editar {
    font-size: 12px;
    line-height: 1;
}

/* Texto del botón */
.btn-editar-evento .texto-editar {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.btn-editar-evento:hover {
    color: #030408;
}


/* Asegurar que el evento tenga position relative */
/* .evento-item {
    position: relative;
} */

/* En eventos en curso, ajustar color del botón */
/* .evento-item.en-directo .btn-editar-evento {
    background: rgba(34, 197, 94, 0.9);
} */

/* .evento-item.en-directo .btn-editar-evento:hover {
    background: rgba(22, 163, 74, 1);
    box-shadow: 0 3px 8px rgba(34, 197, 94, 0.4);
} */

/* En eventos finalizados, color gris */
/* .evento-item.finalizado .btn-editar-evento {
    background: rgba(107, 114, 128, 0.9);
} */

/* .evento-item.finalizado .btn-editar-evento:hover {
    background: rgba(75, 85, 99, 1);
    box-shadow: 0 3px 8px rgba(107, 114, 128, 0.4);
} */

/* =====================================================
   RESPONSIVE: BOTÓN EDITAR
   ===================================================== */

@media (max-width: 1024px) {
    .btn-editar-evento {
        padding: 3px 6px;
        font-size: 10px;
    }
    
    .btn-editar-evento .icono-editar {
        font-size: 11px;
    }
    
    .btn-editar-evento .texto-editar {
        font-size: 9px;
    }
}

@media (max-width: 768px) {
    /* En móvil, mostrar siempre el botón (sin hover) */
    .evento-item .btn-editar-evento {
        transform: translateY(0);
        pointer-events: auto;
    }
    
    .evento-item:hover .btn-editar-evento,
    .btn-editar-evento:hover {
        opacity: 1;
    }
    
    .btn-editar-evento {
        padding: 3px 6px;
        font-size: 9px;
    }
    
    .btn-editar-evento .icono-editar {
        font-size: 10px;
    }
    
    .btn-editar-evento .texto-editar {
        font-size: 8px;
    }
}

@media (max-width: 480px) {
    /* En móviles pequeños, solo mostrar icono */
    .btn-editar-evento .texto-editar {

    }
    
    .btn-editar-evento {
        gap: 0;
        width: 45px;
        height: 30px;
        justify-content: center;
    }
    
    .btn-editar-evento .icono-editar {
        font-size: 12px;
    }
}

/* =====================================================
   AJUSTES PARA EVENTOS CON BOTÓN EDITAR
   ===================================================== */

/* Ajustar acciones del evento para no solapar con botón editar */
.evento-acciones {
    /* margin-bottom: 4px; */
}

/* Prevenir que el botón interfiera con clics en el evento */
.btn-editar-evento {
    cursor: pointer;
}

/* Focus state para accesibilidad */
.btn-editar-evento:focus {
    outline: 0px;
    outline-offset: 0px;
}

/* Resetear estilos propios de <button> para que el tutor vea igual que el admin */
button.btn-editar-evento {
    border: none;
    font-family: inherit;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

/* Animación suave de aparición */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* .evento-item:hover .btn-editar-evento {
    animation: fadeInUp 0.2s ease-out;
} */

/* Optimización de rendimiento */
/* .btn-editar-evento {
    will-change: transform, opacity;
} */

/* Para eventos con clases CSS personalizadas, asegurar visibilidad */
.evento-item[class*="evento_"] .btn-editar-evento,
.evento-item[class*="club_"] .btn-editar-evento,
.evento-item[class*="pmf_"] .btn-editar-evento,
.evento-item[class*="mef2_"] .btn-editar-evento,
.evento-item[class*="sesiones_"] .btn-editar-evento {
    background: rgba(59, 130, 246, 0.95);
}

/* Reducir animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .btn-editar-evento,
    .evento-item:hover .btn-editar-evento {
        animation: none;
        transition: none;
    }
}

/* =====================================================
   BOTONES DE ACCIÓN (EDITAR Y BORRAR CON ICONOS)
   ===================================================== */

.evento-botones-admin {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    gap: 4px;
    pointer-events: none;
    z-index: 10;
}

.evento-item:hover .evento-botones-admin {
    pointer-events: auto;
}

.btn-icono-editar,
.btn-icono-borrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-icono-editar {
    border-top-left-radius: 16px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-icono-borrar {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-icono-editar:hover {
    background: linear-gradient(135deg, #f57c00, #e65100);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(255, 152, 0, 0.4);
}

.btn-icono-borrar:hover {
    background: linear-gradient(135deg, #f57c00, #e65100);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(255, 152, 0, 0.4);
}

.btn-icono-editar:active,
.btn-icono-borrar:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-icono-editar svg,
.btn-icono-borrar svg {
    display: block;
}

/* Responsive para botones de acción */
@media (max-width: 768px) {
    .evento-botones-admin {
        pointer-events: auto;
    }

    .btn-icono-editar,
    .btn-icono-borrar {
        padding: 5px;
    }

    .btn-icono-editar svg,
    .btn-icono-borrar svg {
        width: 16px;
        height: 16px;
    }
}

/* =====================================================
   ICONO DE INFORMACIÓN DE EDICIONES
   ===================================================== */

.admin-badge.admin-info-ediciones {
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(135deg, #10b981, #059669);
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-top-left-radius: 0;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    z-index: 100;
    transition: all 0.2s ease;
}

.admin-badge.admin-info-ediciones:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

.admin-badge.admin-info-ediciones svg {
    display: block;
    color: white;
}

.tooltip-ediciones {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background: linear-gradient(135deg, #1f2937, #111827);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10000;
    margin-bottom: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    min-width: 180px;
}

.admin-badge.admin-info-ediciones:hover .tooltip-ediciones,
.admin-badge.admin-info-ediciones.tooltip-activo .tooltip-ediciones {
    display: block;
    animation: fadeInTooltip 0.2s ease-out;
}

.tooltip-titulo {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #10b981;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(16, 185, 129, 0.3);
}

.tooltip-item {
    padding: 4px 0;
    font-size: 12px;
    font-weight: 500;
    color: #f3f4f6;
    display: flex;
    align-items: center;
}

.tooltip-item::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: #10b981;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.75 12.5l4.75 4.75L19.25 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.75 12.5l4.75 4.75L19.25 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
    margin-right: 8px;
    vertical-align: -0.1em;
}

.tooltip-ediciones::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 16px;
    border: 8px solid transparent;
    border-top-color: #111827;
}

@keyframes fadeInTooltip {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive para icono de información */
@media (max-width: 768px) {
    .admin-badge.admin-info-ediciones {
        /* padding: 3px 6px; */
    }

    .admin-badge.admin-info-ediciones svg {
        width: 14px;
        height: 14px;
    }

    .tooltip-ediciones {
        font-size: 12px;
        padding: 8px 10px;
        min-width: 150px;
        white-space: normal;
        max-width: 70vw;
        left: 0;
        right: auto;
    }

    .tooltip-titulo {
        font-size: 10px;
        margin-bottom: 6px;
        padding-bottom: 4px;
        line-height: 1.2;
    }

    .tooltip-item {
        font-size: 12px;
        padding: 0px 0;
    }

    .tooltip-ediciones::after {
        left: 16px;
        right: auto;
    }
}






/* =====================================================
   VISTA MENSUAL - ESTRUCTURA TABLA
   ===================================================== */

/* Contenedor de vista mensual */
.calendario-vista-mensual {
    display: none;
}

.calendario-vista-mensual.activa {
    display: block;
}

/* Contenedor independiente de zona horaria */
.calendario-zona-horaria-contenedor {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
}

.calendario-zona-horaria {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    background: #f8f9fa8c;
    backdrop-filter: blur(10px);
    border: 1px solid #030408;
    border-radius: 5px;
    font-size: 14px;
    color: #030408;
    font-weight: 500;
    width: fit-content;
}

.zona-horaria-icono {
    font-size: 14px;
}

.zona-horaria-texto {
    font-family: 'Be Vietnam Pro', sans-serif;
}

.zona-horaria-usuario {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 14px;
}

/* Zona horaria inline dentro de controles superiores */
.calendario-zona-horaria-contenedor.calendario-zona-horaria-inline {
    width: auto;
    margin-bottom: 0;
    margin-left: auto;
}

/* Selector de vista */
.calendario-selector-vista {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    margin-top: 15px;
}

.btn-vista {
    background: transparent;
    color: #030408;
    border: 1px solid #030408;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-vista:hover {
    background: transparent;
    transform: translateY(-1px);
    color: #030408;
    border-color: #030408;
}

.btn-vista.activo {
    background: #030408;
    color: white;
    border-color: #030408;
}

.btn-vista.activo:hover {
    background: #030408;
    color: white;
    border-color: #030408;
}

/* Ocultar botón mensual en móvil */
@media (max-width: 768px) {
    .btn-vista-mensual {
        display: none !important;
    }

    .calendario-selector-vista {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .calendario-zona-horaria {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}

/* Wrapper general */
.calendario-mes-wrapper {
    background: transparent;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    margin-top: 20px;
}

/* Headers de días FUERA de la tabla */
.mes-grid-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: 0;
}

.mes-grid-header {
    background: transparent;
    color: #030408;
    padding: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Be Vietnam Pro', sans-serif;
}

/* Tabla del calendario */
.calendario-mes-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.calendario-mes-grid tbody {
    display: table-row-group;
}

.calendario-mes-grid tr {
    display: table-row;
}

/* Celda de día */
.mes-grid-dia {
    background: transparent;
    height: 130px;
    padding: 8px;
    position: relative;
    transition: all 0.3s ease;
    overflow-y: auto;
    border: 2px solid #c5c5c5;
    border-right: none;
    border-bottom: none;
    vertical-align: top;
    width: calc(100% / 7);
}

/* Bordes derechos para última columna */
.mes-grid-dia:nth-child(7n) {
    border-right: 2px solid #c5c5c5;
}

/* Bordes inferiores para última fila */
.calendario-mes-grid tr:last-child .mes-grid-dia {
    border-bottom: 2px solid #c5c5c5;
}

/* Scroll discreto */
.mes-grid-dia::-webkit-scrollbar {
    width: 4px;
}

.mes-grid-dia::-webkit-scrollbar-track {
    background: transparent;
}

.mes-grid-dia::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
}

.mes-grid-dia::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.4);
}

.mes-grid-dia.otro-mes {
    opacity: 0.3;
    background: #c5c5c5;
}

.mes-grid-dia.hoy {
    background: #E4F227;
}

.mes-grid-dia.hoy .dia-numero-mensual {
    background: #030408;
    color: #E4F227;
}

/* Número del día */
.dia-numero-mensual {
    display: inline-block;
    width: 30px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    border-radius: 50%;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
    color: #030408;
    padding-right: 2px;
}

/* Eventos en vista mensual */
.mes-eventos-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: none;
}

.mes-evento-item {
    background: #E0E0E0;
    padding: 6px 8px;
    border-radius: var(--calp-tarjeta-mes-radio, 6px);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5em;
    /* La tarjeta entera responde al clic, igual que en la semanal. Los estilos
       configurados como «solo el botón» lo devuelven a default con su propia
       regla (más específica), que escribe generar_css_estilo_visual(). */
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    min-height: fit-content;
}

/* Botones admin (editar/borrar) e info: ocultos por defecto, visibles al pasar el cursor */
.mes-evento-item .evento-botones-admin,
.mes-evento-item .admin-badge.admin-info-ediciones {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.mes-evento-item:hover .evento-botones-admin {
    opacity: 1;
    pointer-events: auto;
}
.mes-evento-item:hover .admin-badge.admin-info-ediciones {
    opacity: 1;
    pointer-events: auto;
}
/* Permitir que el tooltip de info no quede cortado */
.mes-evento-item:has(.admin-info-ediciones:hover),
.mes-evento-item:has(.admin-info-ediciones.tooltip-activo) {
    overflow: visible;
    z-index: 1000;
}

/* Efecto hover eliminado - solo los badges individuales tienen interacción */

/* Contenedor del evento con flexbox */
.mes-evento-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.mes-evento-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 0.6vw;
    text-transform: uppercase;
}

.mes-evento-tutor {
    font-size: 0.55vw;
    /* opacity: 0.8; */
    margin-top: 2px;
}

.mes-evento-descripcion {
    font-size: 0.5vw;
    /* opacity: 0.7; */
    margin-top: 2px;
    line-height: 1.3;
}

.mes-evento-hora {
    font-size: 0.55vw;
    /* opacity: 0.75; */
    margin-top: 2px;
}

/* Flecha de ángulo - individualmente clicable */
.mes-evento-flecha {
    flex-shrink: 0;
    height: 20px;
    display: flex;
    justify-content: center;
    font-size: 24px;
    /* opacity: 0.6; */
    transition: all 0.2s ease;
    cursor: pointer;
}

.mes-evento-flecha:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Estado clicable - DESHABILITADO: ahora solo los badges son clicables */
.mes-evento-clicable {
    cursor: default;
}

.mes-evento-clicable:hover .mes-evento-flecha {
    opacity: 1;
}

/* Estado inscribirse - DESHABILITADO: ahora solo el badge es clicable */
.mes-evento-inscribirse {
    cursor: default;
}

/* Badge "Inscribirse" - individualmente clicable */
.mes-evento-badge-accion {
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    padding: 2px 5px;
    white-space: nowrap;
    align-self: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mes-evento-badge-accion:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

/* El contraste del badge segun el fondo de cada clase lo genera el editor
   visual de estilos (generar_css_estilo_visual en el PHP). */

/* Ocultar badge en eventos finalizados */
.mes-evento-item.finalizado .mes-evento-badge-accion {
    display: none;
}

/* Badge "✓ Inscrito" - verde */
.mes-evento-inscrito-badge {
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #28a745, #218838);
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
    align-self: center;
}

.mes-evento-item.finalizado .mes-evento-inscrito-badge {
    opacity: 0.6;
}

/* Botón "Acceder" — mismo estilo que la vista semanal (.btn-acceder-evento):
   sin fondo, texto en mayúsculas subrayado. El color se hereda de la caja, que
   ya lo define por clase de evento (.mes-evento-item.{clase} { color: … }),
   así que contrasta igual sobre fondos claros y oscuros. */
.mes-evento-acceder-badge {
    flex-shrink: 0;
    align-self: center;
    max-width: 100%;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 2px 0 0;
    color: inherit;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: max(9px, 0.6vw);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mes-evento-acceder-badge:hover {
    background: none;
    box-shadow: none;
    transform: translateY(-1px);
    text-decoration: underline;
    opacity: 0.85;
}

.mes-evento-item.finalizado .mes-evento-acceder-badge {
    opacity: 0.6;
}

/* Eventos NO clicables ni inscribibles */
.mes-evento-item:not(.mes-evento-clicable):not(.mes-evento-inscribirse) {
    cursor: default;
}

/* Los fondos, el color del texto y el color de la flecha de cada clase en
   la vista mensual los genera el editor visual de estilos por clase
   (generar_css_estilo_visual en el PHP); aqui no hay nada fijo. */

/* ---------------------------------------------------------------
   Halo heredado de la vista semanal: las clases de evento creadas desde el
   admin pueden llevar un box-shadow pensado para la tarjeta grande de la
   semana.
   Como esas clases van sin prefijo, también caen sobre la caja del mes, que es
   mucho más pequeña: el halo la rodea de gris oscuro y parece que el color
   está sucio. Lo mismo pasa con la sombra de los estilos del editor visual
   (.cal-ev.{clase}). Aquí se sustituye por una sombra discreta.
   Se respetan el resplandor rojo de "en curso" y la sombra del arrastre.
   --------------------------------------------------------------- */
.mes-eventos-lista .mes-evento-item:not(.mes-evento-en-curso):not(.dnd-arrastrando) {
    box-shadow: 0 1px 3px rgba(3, 4, 8, 0.10) !important;
}

/* Eventos en curso */
.mes-evento-en-curso {
    animation: latidoMensualSuave 2s ease-in-out infinite;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.7) !important;
}

@keyframes latidoMensualSuave {
    0%, 100% {
        box-shadow: 0 0 8px rgba(220, 38, 38, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 16px rgba(220, 38, 38, 0.6);
        transform: scale(1.02);
    }
}

.mes-evento-en-curso:hover {
    animation: latidoMensualSuave 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.7) !important;
}

.mes-evento-clicable.mes-evento-en-curso:hover {
    transform: translateX(2px) scale(1.02);
}

/* Eventos borrador */
/* El hueco del cartel de BORRADOR va aparte del relleno general, y el
   contenedor le da el peso necesario para no perder contra él. */
.calendario-eventos .mes-evento-item.evento-borrador {
    position: relative;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* .mes-evento-item.evento-borrador::before {
    content: '📝';
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 10px;
    opacity: 0.8;
    z-index: 2;
} */

/* Modal de día completo */
.modal-dia-completo {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    padding: 20px;
    backdrop-filter: blur(5px);
}

.modal-dia-completo.activo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-dia-contenido {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 30px;
}

.modal-dia-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #E8E8E8;
}

.modal-dia-titulo {
    font-size: 24px;
    font-weight: 700;
    color: #030408;
}

.modal-dia-cerrar {
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
}

.modal-dia-cerrar:hover {
    color: #030408;
    transform: scale(1.1);
}

.modal-dia-eventos {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-evento-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #030408;
    transition: all 0.2s ease;
}

.modal-evento-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateX(4px);
}

.modal-evento-titulo {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #030408;
}

.modal-evento-info {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}

/* =====================================================
   EVENTOS FINALIZADOS EN VISTA MENSUAL - VERSIÓN SUTIL
   ===================================================== */

/* Evento finalizado en vista mensual - más sutil */
.mes-evento-item.finalizado {
    opacity: 0.6;
    cursor: default;
}

.mes-evento-item.finalizado:hover {
    transform: none;
    opacity: 0.7;
}

/* No mostrar flecha en eventos finalizados */
.mes-evento-item.finalizado .mes-evento-flecha {
    display: none;
}

/* Eventos finalizados en días de otro mes */
.mes-grid-dia.otro-mes .mes-evento-item.finalizado {
    opacity: 0.4;
}

/* Eventos finalizados no deben tener animación de "en curso" */
.mes-evento-item.finalizado.mes-evento-en-curso {
    animation: none;
}

/* Transición suave */
.mes-evento-item {
    transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* =====================================================
   RESPONSIVE - EVENTOS FINALIZADOS MENSUAL
   ===================================================== */

@media (max-width: 768px) {
    .mes-evento-item.finalizado {
        opacity: 0.5;
    }
    
    .mes-evento-item.finalizado:hover {
        opacity: 0.6;
    }
}

@media (max-width: 480px) {
    .mes-evento-item.finalizado {
        opacity: 0.4;
    }
    
    /* En móvil, ocultar completamente eventos muy antiguos */
    .mes-grid-dia.otro-mes .mes-evento-item.finalizado {
        opacity: 0.2;
    }
}

/* =====================================================
   RESPONSIVE VISTA MENSUAL
   ===================================================== */

@media (max-width: 1024px) {
    .mes-grid-dia {
        min-height: 100px;
        padding: 6px;
    }

    .mes-evento-item {
        font-size: 10px;
    }

    .mes-evento-titulo {
        font-size: 1.1vw;
    }


    .mes-evento-texto {
        font-size: 1.1vw;
    }

    .mes-evento-tutor {
        font-size: 1.2vw;
        text-align: center
    }

    .mes-evento-hora {
        font-size: 1.2vw;
    }

    .mes-evento-descripcion {
        font-size: 0.9vw;
    }

    .mes-evento-flecha {
        font-size: 20px;
        width: 18px;
        height: 18px;
    }
}

/* Tablet horizontal - vista mensual */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .mes-evento-titulo {
        font-size: 1.1vw;
    }


    .mes-evento-texto {
        font-size: 1.1vw;
    }

    .mes-evento-tutor {
        font-size: 1.2vw;
        text-align: center;
    }

    .mes-evento-hora {
        font-size: 1.2vw;
    }

    .mes-evento-descripcion {
        font-size: 0.9vw;
    }
}

@media (max-width: 768px) {
    .mes-grid-headers {
        gap: 0;
    }
    
    .mes-grid-header {
        padding: 8px 4px;
        font-size: 11px;
    }
    
    .mes-grid-dia {
        min-height: 80px;
        padding: 4px;
        max-height: 150px;
    }
    
    .dia-numero-mensual {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
    }
    
    .mes-evento-item {
        font-size: 9px;
    }
    
    .mes-evento-contenido {
        gap: 4px;
    }
    
    .mes-evento-flecha {
        font-size: 18px;
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .mes-grid-header {
        font-size: 10px;
        padding: 6px 2px;
    }
    
    .mes-grid-dia {
        min-height: 70px;
        padding: 3px;
    }
    
    .mes-evento-item {
        font-size: 8px;
    }
    
    .mes-evento-flecha {
        font-size: 16px;
        width: 14px;
        height: 14px;
    }
}

/* Reducir animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .mes-evento-en-curso {
        animation: none;
        box-shadow: 0 0 12px rgba(220, 38, 38, 0.5) !important;
    }
    
    .mes-evento-en-curso:hover {
        box-shadow: 0 0 16px rgba(220, 38, 38, 0.7) !important;
    }
}

/* =====================================================
   ESTILOS PARA EVENTOS CLICABLES EN VISTA MENSUAL
   ===================================================== */

/* Contenedor del evento con flexbox */
.mes-evento-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.mes-evento-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 0.6vw;
    text-transform: uppercase;
    align-content: center;
    align-items: center;
    justify-content: center;
}

/* Todos los titulos del mes van centrados, sin depender de la clase. */
.mes-evento-titulo {
    text-align: center;
}

/* Eventos NO clicables ni inscribibles */
.mes-evento-item:not(.mes-evento-clicable):not(.mes-evento-inscribirse) {
    cursor: default;
}

/* El color de la flecha en cada clase lo genera el editor visual de
   estilos (generar_css_estilo_visual en el PHP). */

/* Responsive */
@media (max-width: 1024px) {
    .mes-evento-flecha {
        font-size: 20px;
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 768px) {
    .mes-evento-contenido {
        gap: 4px;
    }
    
    .mes-evento-flecha {
        font-size: 18px;
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .mes-evento-flecha {
        font-size: 16px;
        width: 14px;
        height: 14px;
    }
}

/* =====================================================
   EVENTOS EN CURSO - VISTA MENSUAL
   ===================================================== */

/* Evento en curso con latido suave */
.mes-evento-en-curso {
    animation: latidoMensualSuave 2s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.4) !important;
    position: relative;
    z-index: 2;
}

/* Si es clicable Y está en curso */
.mes-evento-clicable.mes-evento-en-curso:hover {
    transform: translateX(2px) scale(1.02);
}

/* Ajustar z-index para que el latido no se corte */
.mes-eventos-lista {
    position: relative;
    z-index: 1;
}

.mes-grid-dia {
    position: relative;
    overflow: visible; /* Permitir que la sombra se vea fuera */
}

/* =====================================================
   RESPONSIVE: EVENTOS EN CURSO MENSUAL
   ===================================================== */

@media (max-width: 768px) {
    @keyframes latidoMensualSuave {
        0%, 100% {
            box-shadow: 0 0 6px rgba(220, 38, 38, 0.3);
            transform: scale(1);
        }
        50% {
            box-shadow: 0 0 12px rgba(220, 38, 38, 0.6);
            transform: scale(1.015);
        }
    }
    
    .mes-evento-en-curso {
        box-shadow: 0 0 8px rgba(220, 38, 38, 0.4) !important;
    }
}

@media (max-width: 480px) {
    @keyframes latidoMensualSuave {
        0%, 100% {
            box-shadow: 0 0 4px rgba(220, 38, 38, 0.3);
            transform: scale(1);
        }
        50% {
            box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
            transform: scale(1.01);
        }
    }
}

/* Prevenir que el scroll se vea afectado por el latido */
.calendario-mes-contenido {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Optimización de rendimiento */
.mes-evento-en-curso {
    will-change: transform, box-shadow;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.7) !important;
}

/* Reducir animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .mes-evento-en-curso {
        animation: none;
        box-shadow: 0 0 12px rgba(220, 38, 38, 0.5) !important;
    }
    
    .mes-evento-en-curso:hover {
        box-shadow: 0 0 16px rgba(220, 38, 38, 0.7) !important;
    }
}

/* ===== ESTADO DE PUBLICACIÓN ===== */
.estado-publicacion {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.estado-publicacion.estado-publicado {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
    border: 1px solid #c3e6cb;
}

.estado-publicacion.estado-borrador {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    color: #856404;
    border: 1px solid #ffeaa7;
    animation: pulso-borrador 2s infinite;
}

@keyframes pulso-borrador {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===== ESTADO TEMPORAL (ya existente, mantener) ===== */
.estado-evento {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.estado-pendiente { background: #fff3cd; color: #856404; }
.estado-en-curso { background: #d4edda; color: #155724; }
.estado-finalizado { background: #f8d7da; color: #721c24; }


/* =====================================================
   EVENTOS EN BORRADOR - SOLO VISIBLE PARA ADMINS
   ===================================================== */

/* Clase base para evento borrador */
.evento-item.evento-borrador {
    position: relative;
    overflow: hidden;
}

/* Animación de pulso suave */
@keyframes pulsoBorrador {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Badge de administrador para borrador — vista semanal */
.evento-item .admin-badge.admin-borrador {
    background: linear-gradient(135deg, #ff9800, #f57c00) !important;
    color: #F0F0F0;
    font-weight: 700;
    position: absolute;
    top: 0%;
    bottom: 85%;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 0;
}

/* Badge de administrador para borrador — vista mensual */
.mes-evento-item .admin-badge.admin-borrador {
    background: linear-gradient(135deg, #ff9800, #f57c00) !important;
    color: #F0F0F0;
    font-weight: 700;
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    height: auto;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 0;
}

/* @keyframes pulsoBadgeBorrador {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
    }
    50% {
        box-shadow: 0 4px 16px rgba(255, 193, 7, 0.6);
    }
} */

/* Asegurar que el contenido del evento tenga z-index menor */
.evento-item.evento-borrador .evento-titulo,
.evento-item.evento-borrador .evento-tutor,
.evento-item.evento-borrador .evento-horario,
.evento-item.evento-borrador .evento-acciones {
    position: relative;
    z-index: 1;
}

/* Efecto hover especial para borradores */
.evento-item.evento-borrador:hover {
    border-color: #ffc107;
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.3);
}

.evento-item.evento-borrador:hover .evento-borrador-overlay {
    background: 
        repeating-linear-gradient(
            45deg,
            rgba(255, 193, 7, 0.15),
            rgba(255, 193, 7, 0.15) 10px,
            rgba(255, 193, 7, 0.25) 10px,
            rgba(255, 193, 7, 0.25) 20px
        ),
        linear-gradient(
            to bottom,
            rgba(255, 193, 7, 0.4),
            rgba(255, 193, 7, 0.15)
        );
}

/* =====================================================
   VISTA MENSUAL - EVENTOS BORRADOR
   ===================================================== */

/* =====================================================
   RESPONSIVE - BORRADORES
   ===================================================== */

@media (max-width: 768px) {
    .evento-borrador-texto {
        font-size: 10px;
        padding: 6px 12px;
    }
    
    .evento-borrador-overlay {
        border-width: 1px;
    }
}

@media (max-width: 480px) {
    .evento-borrador-texto {
        font-size: 9px;
        padding: 4px 10px;
        letter-spacing: 0.5px;
    }
}

/* =====================================================
   REDUCIR MOVIMIENTO SI EL USUARIO LO PREFIERE
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
    .evento-borrador-texto,
    .admin-badge.admin-borrador {
        animation: none;
    }
}


/* =====================================================
   AVISO DE ZONA HORARIA
   ===================================================== */

.timezone-notice {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-left: 4px solid #2196f3;
    padding: 12px 16px;
    margin: 15px 0;
    border-radius: 6px;
    font-size: 13px;
    color: #0d47a1;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideInDown 0.5s ease-out;
}

.timezone-notice strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.timezone-notice small {
    opacity: 0.8;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .timezone-notice {
        font-size: 12px;
        padding: 10px 12px;
    }
}



/* =====================================================
   CONTROLES SUPERIORES - FILTRO + VISTA
   ===================================================== */

.calendario-controles-superiores {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

/* =====================================================
   FILTRO DE ETIQUETAS - SOLO ADMINS EN FRONTEND
   ===================================================== */

.calendario-filtro-tags {
    position: relative;
}

.filtro-tags-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #f8f9fa8c;
    backdrop-filter: blur(10px);
    border: 1px solid #030408;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s;
    color: #030408;
}
.filtro-tags-toggle:hover {
    border-color: #030408;
    color: #030408;
    background: #f8f9fa;
}
.filtro-tags-toggle:active {
    border-color: #030408;
    background: #f8f9fa;
}
.filtro-tags-toggle:focus {
    border-color: #030408;
    background: #f8f9fa;
}
.filtro-tags-toggle.activo {
    border-color: #030408;
    background: #030408;
    color: white;
}
.filtro-tags-toggle.activo:hover {
    background: #1a1d21;
    border-color: #1a1d21;
}
.filtro-tags-arrow {
    transition: transform .2s;
    color: #030408;
}
.filtro-tags-toggle.abierto .filtro-tags-arrow {
    transform: rotate(180deg);
}

.filtro-tags-titulo {
    font-size: 12px;
    font-weight: 700;
    color: #030408;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.filtro-tags-toggle.activo .filtro-tags-titulo {
    color: white;
}

.filtro-tags-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    padding: 16px;
    min-width: 280px;
    max-width: 500px;
    animation: filtroDropdownIn .2s ease-out;
}
.filtro-tags-dropdown.abierto {
    display: block;
}
@keyframes filtroDropdownIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.filtro-tags-opciones {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filtro-tags-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.filtro-tags-cerrar {
    padding: 6px 14px;
    background: #f3f4f6;
    color: #030408;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.filtro-tags-cerrar:hover {
    background: #e5e7eb;
    color: #030408;
    border: 1px solid #030408;
}

.btn-limpiar-filtros {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-limpiar-filtros:hover {
    background: #c82333;
}

.filtro-tag-opcion {
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    margin-bottom: 0;
}

.filtro-tag-opcion:hover {
    border-color: #030408;
    background: #ffffff;
    transform: translateY(-1px);
}

.filtro-tag-opcion input[type="checkbox"] {
    margin: 0;
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.filtro-tag-opcion input[type="checkbox"]:checked + .filtro-tag-texto {
    font-weight: 700;
    color: #667eea;
}

.filtro-tag-opcion:has(input[type="checkbox"]:checked) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
}

.filtro-tag-opcion:has(input[type="checkbox"]:checked) .filtro-tag-texto {
    color: white;
}

.filtro-tag-texto {
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
    color: #030408;
}

/* =====================================================
   CELDAS SIN EVENTOS FILTRADOS - VISTA MENSUAL
   ===================================================== */

.mes-grid-dia.sin-eventos-filtrados {
    opacity: 0.5;
    position: relative;
}

.mes-grid-dia.sin-eventos-filtrados::after {
    content: 'NO HAY EVENTOS';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    color: #030408;
    text-align: center;
    pointer-events: none;
    font-family: 'Be Vietnam Pro', sans-serif;
}

.mes-grid-dia.sin-eventos-filtrados .dia-numero-mensual {
    opacity: 0.6;
}

/* No mostrar el mensaje en días de otro mes */
.mes-grid-dia.otro-mes.sin-eventos-filtrados::after {
    display: none;
}

/* Contenedor que agrupa filtro de etiquetas + botón crear evento */
.calendario-filtros-acciones {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.calendario-btn-crear-wrap {
    flex-shrink: 0;
}

/* =====================================================
   RESPONSIVE - FILTRO + CONTROLES
   ===================================================== */

@media (max-width: 1024px) {
    .calendario-controles-superiores {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .calendario-filtros-acciones {
        flex-direction: column;
        align-items: flex-start;
    }

    .calendario-btn-crear-wrap {
        width: 100%;
    }

    .calendario-btn-crear-wrap .tutor-form-open-btn,
    .calendario-btn-crear-wrap .tutor-admin-open-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .filtro-tags-dropdown {
        min-width: unset;
        left: 0;
        right: 0;
        max-width: none;
    }

    .filtro-tag-opcion {
        padding: 6px 12px;
    }

    .filtro-tag-texto {
        font-size: 12px;
    }

    .filtro-tag-opcion input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-right: 6px;
    }
}

@media (max-width: 480px) {
    .filtro-tags-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .btn-limpiar-filtros {
        width: 100%;
    }

    .filtro-tags-opciones {
        gap: 5px;
    }

    .filtro-tag-opcion {
        padding: 5px 10px;
    }

    .filtro-tag-texto {
        font-size: 11px;
    }

    .filtro-tag-opcion input[type="checkbox"] {
        width: 14px;
        height: 14px;
    }
}

/* =====================================================
   OCULTAR VISTA MENSUAL EN MÓVIL
   ===================================================== */
/* Mensaje de vista mensual no disponible en móvil */
.vista-mensual-no-disponible {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.vista-mensual-no-disponible.mostrar {
    display: flex;
}

.vista-mensual-mensaje {
    background: white;
    padding: 30px;
    border-radius: 12px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease-out;
}

.vista-mensual-mensaje h3 {
    margin: 0 0 15px 0;
    font-size: 20px;
    color: #2d3748;
}

.vista-mensual-mensaje p {
    margin: 0 0 20px 0;
    font-size: 16px;
    color: #4a5568;
    line-height: 1.5;
}

.vista-mensual-mensaje button {
    background: #3182ce;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.vista-mensual-mensaje button:hover {
    background: #2c5aa0;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================================
   PORTÁTIL PEQUEÑO (1025px - 1440px)
   MacBook 13" y pantallas similares
   4 columnas en grid (sin transform, igual que tablet)
   ===================================================== */
@media (max-width: 1440px) and (min-width: 1025px) {

    /* Grid de 4 columnas — idéntico al enfoque tablet/móvil */
    .calendario-contenido {
        padding: 15px;
        gap: 12px;
        height: auto;
        /* El recorte lo pone la regla general, que solo recorta a lo ancho: si
           aquí se volviera a recortar el alto, las sombras saldrían cortadas */
    }

    .calendario-dias-container {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        gap: 12px;
        width: 100%;
        transform: none !important;
    }

    /* Ocultar columna 5 en adelante (seguridad) */
    .dia-columna:nth-child(n+5) {
        display: none !important;
    }

    .dia-columna {
        min-width: 0;
        width: 100%;
    }

    /* Cabeceras de día */
    .dia-header {
        padding: 14px 10px;
    }

    .dia-numero {
        font-size: 24px;
    }

    /* Tarjetas de evento (el relleno lo pone el ajuste, con su factor de escala) */
    .evento-item {
        height: 155px;
    }

    .eventos-container {
        padding: 14px;
        gap: 20px;
    }

    .evento-horario {
        font-size: 0.8vw;
    }

    .no-eventos {
        min-height: 155px;
    }

    /* Título del rango de fechas */
    .calendario-fecha-actual,
    .calendario-mes-actual {
        font-size: 18px;
    }

    /* ── Fuentes de la tarjeta en px fijos, sin depender de la clase ── */
    .evento-item .evento-titulo,
    .evento-item .cal-ev-titulo {
        font-size: 14px !important;
    }

    .evento-item .evento-tutor,
    .evento-item .cal-ev-tutor {
        font-size: 11px !important;
    }

    /* Botones de acción */
    .btn-acceder-evento,
    .btn-inscribirse-evento {
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Navegación */
    .calendario-nav .nav-icon.material-symbols-outlined {
        font-size: 32px;
    }

    .calendario-header {
        padding: 12px 18px;
    }

    .evento-completo,
    .evento-finalizado,
    .evento-inscripcion-cerrada {
        background: rgba(0,0,0,0.1);
        color: #FFFFFF;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        line-height: 1.1rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        text-align: center;
    }

    .calendario-selector-vista {
        display: flex;
        gap: 10px;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    .calendario-filtros-acciones {
        margin-bottom: 10px;
    }
}

/* Botón mensual ahora visible en móvil - al hacer clic muestra un mensaje informativo */

/* ===== BOTÓN GOOGLE CALENDAR EN TARJETAS ===== */
.btn-gcal-evento {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    color: #030408;
    background: transparent;
    /* Sin transición de transform en el enlace: así el botón no se desplaza */
    transition: opacity 0.2s ease;
    z-index: 5;
    text-decoration: none;
    opacity: 0.55;
}

.btn-gcal-evento:hover,
.btn-gcal-evento:focus-visible {
    background: transparent;
    opacity: 1;
    transform: none;
}

/* El aumento se aplica al SVG, no al enlace: el icono crece desde su centro
   dentro de una caja de tamaño fijo, así que nada cambia de sitio. */
.btn-gcal-evento svg {
    display: block;
    width: 16px;
    height: 16px;
    transform-origin: center;
    transition: transform 0.18s ease;
}

.btn-gcal-evento:hover svg,
.btn-gcal-evento:focus-visible svg {
    transform: scale(1.18);
}

/* El color del icono en cada clase lo genera el editor visual de estilos
   (generar_css_estilo_visual en el PHP); aqui solo queda el hover generico. */
.btn-gcal-evento:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .btn-gcal-evento {
        width: 24px;
        height: 24px;
        bottom: 6px;
        right: 6px;
    }
    .btn-gcal-evento svg {
        width: 14px;
        height: 14px;
    }
}

/* ── Descripción del evento en móvil ──────────────────────────────────
   Una clase puede fijar la descripción en vw, que en un teléfono de 390px se
   queda en unos 3px.
   Aquí se impone un tamaño legible sea cual sea la clase del evento.
   El selector lleva .evento-item (presente siempre en la tarjeta) para
   ganar por especificidad a los line-height que van con !important.
   -------------------------------------------------------------------- */
@media (max-width: 768px) {
    .evento-item .evento-descripcion,
    .evento-item .cal-ev-desc {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
}

/*REGLA CSS PARA QUITAR UN AJUSTE DEL TEMA*/
.form-item, form {
    margin-bottom: 0px !important;
}

/* ===== MODAL GOOGLE CALENDAR / CONFIRMACIONES ===== */
.mi-evento-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}
.mi-evento-modal-overlay.activo { display: flex; }

.mi-evento-modal-box {
    background: #fff;
    border-radius: 12px;
    padding: 28px 32px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    text-align: center;
}
.mi-evento-modal-box p {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 15px;
    color: #1a1a2e;
    margin: 0 0 20px;
    line-height: 1.5;
}
.mi-evento-modal-acciones {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.mi-evento-modal-confirmar {
    padding: 9px 22px;
    background: #e53935;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}
.mi-evento-modal-confirmar:hover { background: #c62828; }
.mi-evento-modal-cerrar {
    padding: 9px 22px;
    background: #f0f0f0;
    color: #333;
    border: none;
    border-radius: 6px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.mi-evento-modal-cerrar:hover { background: #ddd; }

/* ===== POPUP PERSONALIZADO (reemplazo de alert/confirm nativos) ===== */
.cal-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 200000;
    justify-content: center;
    align-items: center;
    animation: calPopupFadeIn .2s ease-out;
}
.cal-popup-overlay.visible { display: flex; }

@keyframes calPopupFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cal-popup-box {
    background: #fff;
    border-radius: 14px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    overflow: hidden;
    animation: calPopupSlideIn .25s ease-out;
    font-family: 'Be Vietnam Pro', sans-serif;
}

@keyframes calPopupSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cal-popup-header {
    padding: 20px 24px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cal-popup-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.cal-popup-icon.info    { background: #dbeafe; color: #2563eb; }
.cal-popup-icon.success { background: #dcfce7; color: #16a34a; }
.cal-popup-icon.error   { background: #fee2e2; color: #dc2626; }
.cal-popup-icon.warning { background: #fef3c7; color: #d97706; }
.cal-popup-icon.danger  { background: #fee2e2; color: #dc2626; }

.cal-popup-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
}

.cal-popup-body {
    padding: 14px 24px 20px;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

.cal-popup-footer {
    display: flex;
    gap: 10px;
    padding: 0 24px 20px;
    justify-content: flex-end;
}

.cal-popup-btn {
    padding: 10px 22px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    font-family: inherit;
}

.cal-popup-btn.primary {
    background: #04172D;
    color: #fff;
}
.cal-popup-btn.primary:hover {
    background: #0a2d57;
}

.cal-popup-btn.danger {
    background: #dc2626;
    color: #fff;
}
.cal-popup-btn.danger:hover {
    background: #b91c1c;
}

.cal-popup-btn.secondary {
    background: #f3f4f6;
    color: #374151;
}
.cal-popup-btn.secondary:hover {
    background: #e5e7eb;
    color: #030408;
}

@media (max-width: 480px) {
    .cal-popup-box { max-width: 95%; }
    .cal-popup-footer { flex-direction: column-reverse; }
    .cal-popup-btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   CABECERA Y FLECHAS CONFIGURABLES  (Calendario → Personalización)
   --------------------------------------------------------------------------
   Las clases las pone el shortcode en el contenedor, a partir de los ajustes
   guardados (personalizacion_clases_contenedor()):

     Posición de las flechas — una de estas cuatro:
       .cal-nav-lateral       a los lados de la rejilla, a la altura del
                              número del día
       .cal-nav-pos-cabecera  en fila con el título; es el flex de siempre, así
                              que no necesita ninguna regla propia
       .cal-nav-pos-agrupadas las dos juntas, en la fila del título
       .cal-nav-pos-flotantes superpuestas sobre los bordes de la rejilla

     Forma — una de estas cuatro:
       .cal-nav-forma-plana | -circulo | -cuadrado | -pastilla

     Cabecera:
       .cal-header-tarjeta    recupera la tarjeta gris de fondo
       .cal-titulo-semanal    muestra el mes también en la vista semanal
       .cal-titulo-izq|centro|der  alineación del título y de «Ir a hoy»

   Las medidas y los colores salen de las variables --calp-*, que publica
   generar_css_personalizacion(). Los selectores llevan dos clases a propósito,
   para ganar a las reglas de una sola clase de más arriba (incluidas las de
   los media queries) sin recurrir a !important.
   ========================================================================== */

/* Altura a la que queda el centro del número del día, contando desde el borde
   de arriba de la rejilla: el marco de 2px de .dia-header más su padding de
   14px, más media caja del número (su line-height es 1.1, así que la mitad es
   el tamaño por 0,55). Las flechas se centran con esto, así que siguen
   cuadrando aunque se cambie el tamaño del número o del icono; el ajuste fino
   del panel solo suma o resta encima. */
.calendario-eventos {
    --calp-nav-centro: calc(16px + var(--calp-dia-numero-tamano, 30px) * 0.55);
}

/* Sin el ajuste de tarjeta, la cabecera es solo una línea de texto */
.calendario-eventos:not(.cal-header-tarjeta) .calendario-header {
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    padding: 0 0 8px;
}

.calendario-eventos.cal-header-tarjeta .calendario-header {
    background: var(--calp-header-tarjeta-fondo, #e8e8e88c);
}

/* El mes de la vista semanal es opcional; el de la mensual nunca se oculta */
.calendario-eventos:not(.cal-titulo-semanal) .calendario-vista-semanal .calendario-fecha-actual {
    display: none;
}

/* ── Posición: a los lados de la rejilla ── */
.calendario-eventos.cal-nav-lateral .calendario-cuerpo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "info info info"
        "prev contenido next";
    align-items: start;
    column-gap: 2px;
}

/* display:contents disuelve la cabecera para que sus tres hijos sean celdas
   del grid del cuerpo, sin tocar el HTML ni lo que busca el JS. */
.calendario-eventos.cal-nav-lateral .calendario-cuerpo > .calendario-header {
    display: contents;
}

.calendario-eventos.cal-nav-lateral .calendario-prev,
.calendario-eventos.cal-nav-lateral .calendario-mes-prev {
    grid-area: prev;
}

.calendario-eventos.cal-nav-lateral .calendario-next,
.calendario-eventos.cal-nav-lateral .calendario-mes-next {
    grid-area: next;
}

.calendario-eventos.cal-nav-lateral .calendario-contenido,
.calendario-eventos.cal-nav-lateral .calendario-mes-contenido {
    grid-area: contenido;
    margin-top: 0;
}

.calendario-eventos.cal-nav-lateral .calendario-loading {
    grid-column: 1 / -1;
}

/* ── Posición: flotando sobre la rejilla ──
   Mismo grid, pero las flechas comparten celda con el contenido: así se
   superponen a los bordes sin quitarle ancho a las columnas, y se centran con
   la misma cuenta que en «a los lados». */
.calendario-eventos.cal-nav-pos-flotantes .calendario-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "info"
        "contenido";
    align-items: start;
}

.calendario-eventos.cal-nav-pos-flotantes .calendario-cuerpo > .calendario-header {
    display: contents;
}

.calendario-eventos.cal-nav-pos-flotantes .calendario-contenido,
.calendario-eventos.cal-nav-pos-flotantes .calendario-mes-contenido {
    grid-area: contenido;
    margin-top: 0;
}

.calendario-eventos.cal-nav-pos-flotantes .calendario-nav {
    grid-area: contenido;
    z-index: 5;
}

.calendario-eventos.cal-nav-pos-flotantes .calendario-prev,
.calendario-eventos.cal-nav-pos-flotantes .calendario-mes-prev {
    justify-self: start;
    margin-left: 4px;
}

.calendario-eventos.cal-nav-pos-flotantes .calendario-next,
.calendario-eventos.cal-nav-pos-flotantes .calendario-mes-next {
    justify-self: end;
    margin-right: 4px;
}

.calendario-eventos.cal-nav-pos-flotantes .calendario-loading {
    grid-column: 1 / -1;
}

/* ── Centrado vertical de las flechas (a los lados y flotantes) ──
   Se resta media altura del botón, que según la forma es el icono, la caja o
   el icono más el relleno de la pastilla. */
.calendario-eventos.cal-nav-lateral .calendario-nav,
.calendario-eventos.cal-nav-pos-flotantes .calendario-nav {
    align-self: start;
    min-width: 0;
    padding: 0;
    margin-top: calc(var(--calp-nav-centro)
                     - var(--calp-nav-flecha-tamano, 34px) / 2
                     + var(--calp-nav-offset, 0px));
}

.calendario-eventos.cal-nav-lateral.cal-nav-forma-circulo .calendario-nav,
.calendario-eventos.cal-nav-lateral.cal-nav-forma-cuadrado .calendario-nav,
.calendario-eventos.cal-nav-pos-flotantes.cal-nav-forma-circulo .calendario-nav,
.calendario-eventos.cal-nav-pos-flotantes.cal-nav-forma-cuadrado .calendario-nav {
    margin-top: calc(var(--calp-nav-centro)
                     - var(--calp-nav-caja, 44px) / 2
                     + var(--calp-nav-offset, 0px));
}

.calendario-eventos.cal-nav-lateral.cal-nav-forma-pastilla .calendario-nav,
.calendario-eventos.cal-nav-pos-flotantes.cal-nav-forma-pastilla .calendario-nav {
    margin-top: calc(var(--calp-nav-centro)
                     - (var(--calp-nav-flecha-tamano, 34px) + 16px) / 2
                     + var(--calp-nav-offset, 0px));
}

/* ── Posición: las dos juntas, en la fila del título ── */
.calendario-eventos.cal-nav-pos-agrupadas .calendario-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "info prev next"
        "contenido contenido contenido";
    align-items: center;
    column-gap: 6px;
}

.calendario-eventos.cal-nav-pos-agrupadas .calendario-cuerpo > .calendario-header {
    display: contents;
}

.calendario-eventos.cal-nav-pos-agrupadas .calendario-prev,
.calendario-eventos.cal-nav-pos-agrupadas .calendario-mes-prev {
    grid-area: prev;
}

.calendario-eventos.cal-nav-pos-agrupadas .calendario-next,
.calendario-eventos.cal-nav-pos-agrupadas .calendario-mes-next {
    grid-area: next;
}

.calendario-eventos.cal-nav-pos-agrupadas .calendario-nav {
    align-self: center;
    min-width: 0;
    padding: 0;
}

.calendario-eventos.cal-nav-pos-agrupadas .calendario-contenido,
.calendario-eventos.cal-nav-pos-agrupadas .calendario-mes-contenido {
    grid-area: contenido;
    margin-top: 0;
}

.calendario-eventos.cal-nav-pos-agrupadas .calendario-loading {
    grid-column: 1 / -1;
}

/* ── El bloque del título + «Ir a hoy» en los tres modos de grid ── */
.calendario-eventos.cal-nav-lateral .calendario-info,
.calendario-eventos.cal-nav-pos-agrupadas .calendario-info,
.calendario-eventos.cal-nav-pos-flotantes .calendario-info {
    grid-area: info;
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
    padding: 0 0 6px;
    text-align: left;
}

.calendario-eventos.cal-nav-lateral .calendario-info .calendario-btn-hoy,
.calendario-eventos.cal-nav-pos-agrupadas .calendario-info .calendario-btn-hoy,
.calendario-eventos.cal-nav-pos-flotantes .calendario-info .calendario-btn-hoy {
    margin-top: 0;
}

.calendario-eventos.cal-titulo-izq .calendario-info {
    justify-content: flex-start;
}

/* Con el título a la izquierda, «Ir a hoy» se va al extremo opuesto */
.calendario-eventos.cal-titulo-izq .calendario-info .calendario-btn-hoy {
    margin-left: auto;
}

.calendario-eventos.cal-titulo-centro .calendario-info {
    justify-content: center;
}

.calendario-eventos.cal-titulo-der .calendario-info {
    justify-content: flex-end;
}

/* ── Formas del botón de la flecha ── */
.calendario-eventos.cal-nav-forma-plana .calendario-nav {
    background: transparent;
    border: none;
    padding: 0;
    min-width: 0;
}

.calendario-eventos.cal-nav-forma-circulo .calendario-nav,
.calendario-eventos.cal-nav-forma-cuadrado .calendario-nav {
    width: var(--calp-nav-caja, 44px);
    height: var(--calp-nav-caja, 44px);
    min-width: 0;
    padding: 0;
    justify-content: center;
    background: var(--calp-nav-fondo);
    border: var(--calp-nav-borde-grosor, 0) solid var(--calp-nav-borde);
    box-sizing: border-box;
}

.calendario-eventos.cal-nav-forma-circulo .calendario-nav {
    border-radius: 50%;
}

.calendario-eventos.cal-nav-forma-cuadrado .calendario-nav {
    border-radius: var(--calp-nav-radio, 8px);
}

.calendario-eventos.cal-nav-forma-pastilla .calendario-nav {
    min-width: 0;
    padding: 8px 16px;
    justify-content: center;
    background: var(--calp-nav-fondo);
    border: var(--calp-nav-borde-grosor, 0) solid var(--calp-nav-borde);
    border-radius: var(--calp-nav-radio, 999px);
    box-sizing: border-box;
}

/* El hover y el foco de las flechas ya venían escritos arriba con mucha
   especificidad (y con !important en :focus y :active, para matar el resaltado
   que les pone el tema), así que estas reglas tienen que igualarles el tono. */
.calendario-eventos.cal-nav-forma-circulo .calendario-nav:hover:not(:disabled):not(.disabled),
.calendario-eventos.cal-nav-forma-cuadrado .calendario-nav:hover:not(:disabled):not(.disabled),
.calendario-eventos.cal-nav-forma-pastilla .calendario-nav:hover:not(:disabled):not(.disabled) {
    background: var(--calp-nav-hover-fondo);
    border-color: var(--calp-nav-hover-borde);
    color: var(--calp-nav-hover-icono);
}

.calendario-eventos.cal-nav-forma-circulo .calendario-nav:focus:not(:disabled):not(.disabled),
.calendario-eventos.cal-nav-forma-circulo .calendario-nav:active:not(:disabled):not(.disabled),
.calendario-eventos.cal-nav-forma-cuadrado .calendario-nav:focus:not(:disabled):not(.disabled),
.calendario-eventos.cal-nav-forma-cuadrado .calendario-nav:active:not(:disabled):not(.disabled),
.calendario-eventos.cal-nav-forma-pastilla .calendario-nav:focus:not(:disabled):not(.disabled),
.calendario-eventos.cal-nav-forma-pastilla .calendario-nav:active:not(:disabled):not(.disabled) {
    background-color: var(--calp-nav-fondo) !important;
    border-color: var(--calp-nav-borde) !important;
}

/* ── Móvil ──
   Las columnas ocupan todo el ancho, así que las flechas dejan el grid y
   vuelven a la fila de la cabecera: si no, o le comen sitio a la columna («a
   los lados») o se le montan encima («flotantes»). */
@media (max-width: 768px) {
    .calendario-eventos.cal-nav-lateral .calendario-cuerpo,
    .calendario-eventos.cal-nav-pos-flotantes .calendario-cuerpo {
        display: block;
    }

    .calendario-eventos.cal-nav-lateral .calendario-cuerpo > .calendario-header,
    .calendario-eventos.cal-nav-pos-flotantes .calendario-cuerpo > .calendario-header {
        display: flex;
    }

    .calendario-eventos.cal-nav-lateral .calendario-nav,
    .calendario-eventos.cal-nav-pos-flotantes .calendario-nav {
        margin-top: 0;
    }

    .calendario-eventos.cal-nav-lateral .calendario-info,
    .calendario-eventos.cal-nav-pos-agrupadas .calendario-info,
    .calendario-eventos.cal-nav-pos-flotantes .calendario-info {
        justify-content: center;
        padding: 0;
    }
}

/* ==========================================================================
   PANEL DE ARRASTRE DE EVENTOS
   --------------------------------------------------------------------------
   Estas reglas estaban en un <style> dentro del shortcode, que solo se imprime
   en el frontend: la previsualización de Calendario → Personalización se
   quedaba sin ellas y pintaba los chips como barras sin forma. Aquí las ve
   todo el mundo, y los colores los sigue poniendo generar_css_personalizacion()
   (o el JS del arrastre, para el color propio de cada clase de evento).
   ========================================================================== */
.cal-arrastre-wrap {
    position: relative;
}

.cal-arrastre-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    min-width: 220px;
    max-width: 280px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.cal-arrastre-panel.abierto {
    display: block;
}

.cal-arrastre-hint {
    margin: 0 0 10px;
    font-size: 12px;
    color: #030408;
    font-style: italic;
    line-height: 1.5em;
}

.cal-arrastre-chips {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cal-arrastre-chip {
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: grab;
    user-select: none;
    background-image: none !important;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    transition: transform .1s, box-shadow .1s;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.cal-arrastre-chip::after {
    content: "⠿";
    font-size: 15px;
    opacity: .45;
    flex-shrink: 0;
    margin-left: 8px;
}

.cal-arrastre-chip:active {
    cursor: grabbing;
    transform: scale(.97);
}

.cal-arrastre-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .22);
}

/* ==========================================================================
   ANIMACIONES AL PASAR EL RATÓN  (Calendario → Personalización)
   --------------------------------------------------------------------------
   Las clases las pone el shortcode en el contenedor:

     .cal-anim-btn-*   botones (vista, filtros, arrastre, panel tutor,
                       «Ir a hoy», «Cerrar», «Limpiar filtros» y los del aviso)
     .cal-anim-nav-*   flechas de navegación
     .cal-anim-chip-*  chips de arrastre

   Los sufijos son: ninguna | elevar | escalar | brillo | elevar-brillo |
   pulso (y deslizar en las flechas).

   Estos selectores llevan la clase del contenedor por delante a propósito: el
   CSS de más arriba ya trae transform en el hover de varios de estos botones
   (y las flechas lo tienen con :not(:disabled):not(.disabled), que suma mucha
   especificidad), así que hay que superarlos para poder cambiarlos o quitarlos
   sin recurrir a !important.
   ========================================================================== */

@keyframes calp-pulso {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(calc(var(--calp-anim-escala, 104) / 100)); }
}

/* La duración del cambio de color y de la transformación */
.calendario-eventos .btn-vista,
.calendario-eventos .filtro-tags-toggle,
.calendario-eventos .tutor-admin-open-btn,
.calendario-eventos .calendario-btn-hoy,
.calendario-eventos .filtro-tags-cerrar,
.calendario-eventos .btn-limpiar-filtros,
.calendario-eventos .calendario-error button,
.calendario-eventos .calendario-nav,
.calendario-eventos .cal-arrastre-chip {
    transition-duration: var(--calp-anim-duracion, 300ms);
    transition-property: background-color, background, color, border-color, transform, box-shadow, filter;
    transition-timing-function: ease;
}

/* ── Botones ── */
.calendario-eventos.cal-anim-btn-ninguna .btn-vista:hover,
.calendario-eventos.cal-anim-btn-ninguna .filtro-tags-toggle:hover,
.calendario-eventos.cal-anim-btn-ninguna .tutor-admin-open-btn:hover,
.calendario-eventos.cal-anim-btn-ninguna .calendario-btn-hoy:hover,
.calendario-eventos.cal-anim-btn-ninguna .filtro-tags-cerrar:hover,
.calendario-eventos.cal-anim-btn-ninguna .btn-limpiar-filtros:hover,
.calendario-eventos.cal-anim-btn-ninguna .calendario-error button:hover {
    transform: none;
    box-shadow: none;
}

.calendario-eventos.cal-anim-btn-elevar .btn-vista:hover,
.calendario-eventos.cal-anim-btn-elevar .filtro-tags-toggle:hover,
.calendario-eventos.cal-anim-btn-elevar .tutor-admin-open-btn:hover,
.calendario-eventos.cal-anim-btn-elevar .calendario-btn-hoy:hover,
.calendario-eventos.cal-anim-btn-elevar .filtro-tags-cerrar:hover,
.calendario-eventos.cal-anim-btn-elevar .btn-limpiar-filtros:hover,
.calendario-eventos.cal-anim-btn-elevar .calendario-error button:hover {
    transform: translateY(calc(-1 * var(--calp-anim-elevacion, 2px)));
    box-shadow: none;
}

.calendario-eventos.cal-anim-btn-escalar .btn-vista:hover,
.calendario-eventos.cal-anim-btn-escalar .filtro-tags-toggle:hover,
.calendario-eventos.cal-anim-btn-escalar .tutor-admin-open-btn:hover,
.calendario-eventos.cal-anim-btn-escalar .calendario-btn-hoy:hover,
.calendario-eventos.cal-anim-btn-escalar .filtro-tags-cerrar:hover,
.calendario-eventos.cal-anim-btn-escalar .btn-limpiar-filtros:hover,
.calendario-eventos.cal-anim-btn-escalar .calendario-error button:hover {
    transform: scale(calc(var(--calp-anim-escala, 104) / 100));
    box-shadow: none;
}

.calendario-eventos.cal-anim-btn-brillo .btn-vista:hover,
.calendario-eventos.cal-anim-btn-brillo .filtro-tags-toggle:hover,
.calendario-eventos.cal-anim-btn-brillo .tutor-admin-open-btn:hover,
.calendario-eventos.cal-anim-btn-brillo .calendario-btn-hoy:hover,
.calendario-eventos.cal-anim-btn-brillo .filtro-tags-cerrar:hover,
.calendario-eventos.cal-anim-btn-brillo .btn-limpiar-filtros:hover,
.calendario-eventos.cal-anim-btn-brillo .calendario-error button:hover {
    transform: none;
    box-shadow: 0 0 var(--calp-anim-brillo-radio, 14px) var(--calp-anim-brillo-color);
}

.calendario-eventos.cal-anim-btn-elevar-brillo .btn-vista:hover,
.calendario-eventos.cal-anim-btn-elevar-brillo .filtro-tags-toggle:hover,
.calendario-eventos.cal-anim-btn-elevar-brillo .tutor-admin-open-btn:hover,
.calendario-eventos.cal-anim-btn-elevar-brillo .calendario-btn-hoy:hover,
.calendario-eventos.cal-anim-btn-elevar-brillo .filtro-tags-cerrar:hover,
.calendario-eventos.cal-anim-btn-elevar-brillo .btn-limpiar-filtros:hover,
.calendario-eventos.cal-anim-btn-elevar-brillo .calendario-error button:hover {
    transform: translateY(calc(-1 * var(--calp-anim-elevacion, 2px)));
    box-shadow: 0 calc(var(--calp-anim-elevacion, 2px) + 2px) var(--calp-anim-brillo-radio, 14px) var(--calp-anim-brillo-color);
}

.calendario-eventos.cal-anim-btn-pulso .btn-vista:hover,
.calendario-eventos.cal-anim-btn-pulso .filtro-tags-toggle:hover,
.calendario-eventos.cal-anim-btn-pulso .tutor-admin-open-btn:hover,
.calendario-eventos.cal-anim-btn-pulso .calendario-btn-hoy:hover,
.calendario-eventos.cal-anim-btn-pulso .filtro-tags-cerrar:hover,
.calendario-eventos.cal-anim-btn-pulso .btn-limpiar-filtros:hover,
.calendario-eventos.cal-anim-btn-pulso .calendario-error button:hover {
    transform: none;
    box-shadow: none;
    animation: calp-pulso var(--calp-anim-duracion, 900ms) ease-in-out infinite;
}

/* ── Flechas de navegación ──
   El :not(:disabled):not(.disabled) es el mismo que usan las reglas de arriba:
   sin él estas no ganarían, y además así una flecha deshabilitada no se anima. */
.calendario-eventos.cal-anim-nav-ninguna .calendario-nav:hover:not(:disabled):not(.disabled) {
    transform: none;
    box-shadow: none;
}

.calendario-eventos.cal-anim-nav-deslizar .calendario-prev:hover:not(:disabled):not(.disabled),
.calendario-eventos.cal-anim-nav-deslizar .calendario-mes-prev:hover:not(:disabled):not(.disabled) {
    transform: translateX(calc(-1 * var(--calp-anim-elevacion, 3px)));
}

.calendario-eventos.cal-anim-nav-deslizar .calendario-next:hover:not(:disabled):not(.disabled),
.calendario-eventos.cal-anim-nav-deslizar .calendario-mes-next:hover:not(:disabled):not(.disabled) {
    transform: translateX(var(--calp-anim-elevacion, 3px));
}

.calendario-eventos.cal-anim-nav-escalar .calendario-nav:hover:not(:disabled):not(.disabled) {
    transform: scale(calc(var(--calp-anim-escala, 104) / 100));
}

.calendario-eventos.cal-anim-nav-brillo .calendario-nav:hover:not(:disabled):not(.disabled) {
    transform: none;
    box-shadow: 0 0 var(--calp-anim-brillo-radio, 14px) var(--calp-anim-brillo-color);
}

.calendario-eventos.cal-anim-nav-pulso .calendario-nav:hover:not(:disabled):not(.disabled) {
    transform: none;
    animation: calp-pulso var(--calp-anim-duracion, 900ms) ease-in-out infinite;
}

/* ── Chips de arrastre ── */
.calendario-eventos.cal-anim-chip-ninguna .cal-arrastre-chip:hover {
    transform: none;
    box-shadow: none;
}

.calendario-eventos.cal-anim-chip-elevar .cal-arrastre-chip:hover {
    transform: translateY(calc(-1 * var(--calp-anim-elevacion, 2px)));
    box-shadow: none;
}

.calendario-eventos.cal-anim-chip-escalar .cal-arrastre-chip:hover {
    transform: scale(calc(var(--calp-anim-escala, 104) / 100));
    box-shadow: none;
}

.calendario-eventos.cal-anim-chip-brillo .cal-arrastre-chip:hover {
    transform: none;
    box-shadow: 0 0 var(--calp-anim-brillo-radio, 14px) var(--calp-anim-brillo-color);
}

.calendario-eventos.cal-anim-chip-elevar-brillo .cal-arrastre-chip:hover {
    transform: translateY(calc(-1 * var(--calp-anim-elevacion, 2px)));
    box-shadow: 0 calc(var(--calp-anim-elevacion, 2px) + 3px) var(--calp-anim-brillo-radio, 14px) var(--calp-anim-brillo-color);
}

/* Quien haya pedido menos movimiento en su sistema, no lo recibe */
@media (prefers-reduced-motion: reduce) {
    .calendario-eventos .btn-vista,
    .calendario-eventos .filtro-tags-toggle,
    .calendario-eventos .tutor-admin-open-btn,
    .calendario-eventos .calendario-btn-hoy,
    .calendario-eventos .filtro-tags-cerrar,
    .calendario-eventos .btn-limpiar-filtros,
    .calendario-eventos .calendario-error button,
    .calendario-eventos .calendario-nav,
    .calendario-eventos .cal-arrastre-chip {
        transition-duration: 0ms;
    }

    .calendario-eventos [class*="cal-anim-"] :hover {
        animation: none;
    }
}

/* ==========================================================================
   ANIMACIÓN DEL CARTEL «HOY» AL CARGAR  (Calendario → Personalización)
   --------------------------------------------------------------------------
   La clase la pone el shortcode en el contenedor: .cal-hoy-anim-parpadeo,
   -pulso, -rebote, -entrada, -vibracion, -resplandor, -destello o -ninguna.

   No hace falta disparar nada desde el JS: el cartel se crea de cero cada vez
   que se pinta la rejilla (al abrir, al cambiar de semana o al refrescarse),
   y una animación CSS arranca sola cuando el elemento entra en el DOM.

   Solo se anima el cartel del día de hoy, nunca el de «Pasado».
   ========================================================================== */

@keyframes calp-hoy-parpadeo {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

@keyframes calp-hoy-pulso {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(calc(var(--calp-hoy-escala, 115) / 100)); }
}

@keyframes calp-hoy-rebote {
    0%, 100% { transform: translateY(0); }
    30%      { transform: translateY(calc(-1 * var(--calp-hoy-amplitud, 8px))); }
    60%      { transform: translateY(calc(-0.4 * var(--calp-hoy-amplitud, 8px))); }
}

@keyframes calp-hoy-entrada {
    from { opacity: 0; transform: translateY(calc(-1 * var(--calp-hoy-amplitud, 8px))); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes calp-hoy-vibracion {
    0%, 100%  { transform: translateX(0); }
    20%, 60%  { transform: translateX(calc(-0.5 * var(--calp-hoy-amplitud, 8px))); }
    40%, 80%  { transform: translateX(calc(0.5 * var(--calp-hoy-amplitud, 8px))); }
}

@keyframes calp-hoy-resplandor {
    0%, 100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
    50%      { box-shadow: 0 0 var(--calp-anim-brillo-radio, 14px) var(--calp-anim-brillo-color); }
}

@keyframes calp-hoy-destello {
    from { transform: translateX(-130%); }
    to   { transform: translateX(130%); }
}

/* Explícito a propósito: así, si el contenedor arrastrase otra clase de
   animación, «sin animación» sigue mandando. */
.calendario-eventos.cal-hoy-anim-ninguna .dia-columna.hoy .dia-badge,
.calendario-eventos.cal-hoy-anim-ninguna .dia-columna.hoy .dia-badge::after {
    animation: none;
}

/* Los ajustes del bloque, en el mismo orden que la propiedad animation:
   nombre, duración, curva, retraso, repeticiones y fill-mode.
   El «both» deja el cartel en su estado final y, con retraso, lo mantiene en el
   inicial mientras espera (que es lo que hace que «entrada» no parpadee). */
.calendario-eventos.cal-hoy-anim-parpadeo .dia-columna.hoy .dia-badge:not(.dia-badge-pasado) {
    animation: calp-hoy-parpadeo var(--calp-hoy-duracion, 700ms) ease-in-out var(--calp-hoy-retraso, 0ms) var(--calp-hoy-repeticiones, 1) both;
}

.calendario-eventos.cal-hoy-anim-pulso .dia-columna.hoy .dia-badge:not(.dia-badge-pasado) {
    animation: calp-hoy-pulso var(--calp-hoy-duracion, 700ms) ease-in-out var(--calp-hoy-retraso, 0ms) var(--calp-hoy-repeticiones, 1) both;
}

.calendario-eventos.cal-hoy-anim-rebote .dia-columna.hoy .dia-badge:not(.dia-badge-pasado) {
    animation: calp-hoy-rebote var(--calp-hoy-duracion, 700ms) cubic-bezier(.28, .84, .42, 1) var(--calp-hoy-retraso, 0ms) var(--calp-hoy-repeticiones, 1) both;
}

.calendario-eventos.cal-hoy-anim-entrada .dia-columna.hoy .dia-badge:not(.dia-badge-pasado) {
    animation: calp-hoy-entrada var(--calp-hoy-duracion, 700ms) ease-out var(--calp-hoy-retraso, 0ms) var(--calp-hoy-repeticiones, 1) both;
}

.calendario-eventos.cal-hoy-anim-vibracion .dia-columna.hoy .dia-badge:not(.dia-badge-pasado) {
    animation: calp-hoy-vibracion var(--calp-hoy-duracion, 700ms) ease-in-out var(--calp-hoy-retraso, 0ms) var(--calp-hoy-repeticiones, 1) both;
}

.calendario-eventos.cal-hoy-anim-resplandor .dia-columna.hoy .dia-badge:not(.dia-badge-pasado) {
    animation: calp-hoy-resplandor var(--calp-hoy-duracion, 700ms) ease-in-out var(--calp-hoy-retraso, 0ms) var(--calp-hoy-repeticiones, 1) both;
}

/* El destello es lo único que necesita una capa aparte: una banda clara que
   cruza el cartel. Va en un ::after para no tocar su color de fondo. */
.calendario-eventos.cal-hoy-anim-destello .dia-columna.hoy .dia-badge:not(.dia-badge-pasado) {
    overflow: hidden;
}

.calendario-eventos.cal-hoy-anim-destello .dia-columna.hoy .dia-badge:not(.dia-badge-pasado)::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg,
        transparent 30%,
        rgba(255, 255, 255, .75) 50%,
        transparent 70%);
    transform: translateX(-130%);
    animation: calp-hoy-destello var(--calp-hoy-duracion, 700ms) ease-in-out var(--calp-hoy-retraso, 0ms) var(--calp-hoy-repeticiones, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .calendario-eventos[class*="cal-hoy-anim-"] .dia-columna.hoy .dia-badge,
    .calendario-eventos[class*="cal-hoy-anim-"] .dia-columna.hoy .dia-badge::after {
        animation: none;
    }
}

/* ==========================================================================
   TIPO DE BORDE DE LA TARJETA «NO HAY EVENTOS»
   --------------------------------------------------------------------------
   El color, el grosor y el redondeo salen de variables, pero el estilo del
   borde (discontinuo, continuo…) no cabe en una: va por clase del contenedor.
   ========================================================================== */
.calendario-eventos.cal-vacio-borde-discontinuo .no-eventos { border-style: dashed; }
.calendario-eventos.cal-vacio-borde-continuo    .no-eventos { border-style: solid; }
.calendario-eventos.cal-vacio-borde-punteado    .no-eventos { border-style: dotted; }
.calendario-eventos.cal-vacio-borde-ninguno     .no-eventos { border-style: none; }