/* ========================= estilos nuevos =========================
 *
 * Framework ligero reutilizable (convive con Bootstrap y estilos.css).
 * Nombres cortos y genéricos para reusar en cualquier vista.
 *
 * BOTONES  →  class="btn btn-1" | class="btn btn-2" | class="btn btn-3"
 * TEXTOS   →  class="txt-1" | class="txt-2" | class="txt-lime"
 *           (NO usar text-1: ya existe en estilos.css como color)
 * BANNERS  →  class="banner-1" | class="banner-2" + class="banner-body"
 * CARDS    →  class="card-nav card-nav-1" … card-nav-4
 * ASIDE    →  class="aside-1" (+ lvl-1, day-1, challenge-1, challenge-2)
 * ALERTAS  →  class="alert-1" (aviso compacto llamativo + CTA)
 * TABS     →  class="nav nav-1" + class="nav-link" (Bootstrap)
 * MODALES  →  class="modal modal-pea" (+ modal-lg en PC / tira en móvil)
 * AGENDA   →  class="agenda-1" | class="agenda-2" (agenda destacada + próximas)
 * UTILS    →  class="u-gap-1" | class="u-scroll-x" | class="bar-1" | class="bar-2" | class="ico-1"
 * LOGIN    →  class="login-card" (tarjeta del acceso en page-login)
 *
 * Ejemplo de uso:
 * <div class="banner-1">
 *   <div class="banner-body">
 *     <h2 class="txt-1">Título</h2>
 *     <p class="txt-2">Subtexto</p>
 *     <div class="d-flex flex-wrap u-gap-1">
 *       <button type="button" class="btn btn-1">Acción</button>
 *       <button type="button" class="btn btn-2">Secundaria</button>
 *     </div>
 *   </div>
 * </div>
 * ================================================================== */


/* ------------------------------------------------------------------
 * BOTONES
 * Usar siempre con .btn de Bootstrap → class="btn btn-1"
 *
 * btn-1 = sólido blanco (acción principal sobre fondos oscuros)
 * btn-2 = outline blanco (acción secundaria sobre fondos oscuros)
 * btn-3 = sólido lima (CTA sobre fondos oscuros / banner-2)
 * ---------------------------------------------------------------- */
.btn-1 {
    background: #fff;
    color: #1a1a72;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    padding: 0.55rem 1.15rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-1:hover,
.btn-1:focus {
    background: #f3f6ff;
    color: #1a1a72;
}

.btn-2 {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    font-weight: 600;
    padding: 0.55rem 1.15rem;
}

.btn-2:hover,
.btn-2:focus {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.btn-3 {
    background: #c0ff00;
    color: #15215a;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    padding: 0.65rem 1.25rem;
    box-shadow: 0 6px 16px rgba(192, 255, 0, 0.28);
}

.btn-3:hover,
.btn-3:focus {
    background: #d4ff4d;
    color: #15215a;
}

.btn-4 {
    background: #7d33ff;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 6px 16px rgba(125, 51, 255, 0.28);
    transition: all 0.2s ease-in-out;
}

.btn-4:hover,
.btn-4:focus {
    background: #6a24eb;
    color: #fff;
    box-shadow: 0 8px 20px rgba(125, 51, 255, 0.4);
}


/* ------------------------------------------------------------------
 * TEXTOS
 * Tipografía reutilizable (jerarquía).
 *
 * txt-1 = título grande / saludo
 * txt-2 = párrafo de apoyo
 * txt-lime = acento lima (sobre fondos oscuros)
 *
 * Color pensado para fondos oscuros (banner).
 * En fondo claro combinar con utilidades Bootstrap (text-dark, etc.).
 * ---------------------------------------------------------------- */
.txt-1 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.7rem, 2.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

.txt-2 {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
}

.txt-lime {
    color: #c0ff00;
}


/* ------------------------------------------------------------------
 * BANNERS
 * Contenedores visuales reutilizables.
 *
 * banner-1   = banner con imagen de fondo (bg-panel.webp)
 * banner-2   = banner educación continuada (bg-continuada.webp)
 * banner-body = bloque interno de contenido (texto + botones)
 * ---------------------------------------------------------------- */
.banner-1 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 200px;
    padding: 2rem 2.25rem;
    border-radius: 20px;
    overflow: hidden;
    color: #fff;
    background-color: #15215a;
    background-image: url("../img/bg-panel.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    box-shadow: 0 10px 28px rgba(21, 33, 90, 0.18);
}

.banner-2 {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 220px;
    padding: 1.75rem 2rem;
    border-radius: 20px;
    overflow: hidden;
    color: #fff;
    background-color: #0f1a45;
    background-image: url("../img/bg-continuada.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    box-shadow: 0 10px 28px rgba(15, 26, 69, 0.2);
}

.banner-body {
    position: relative;
    z-index: 2;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-2 .banner-body {
    max-width: 100%;
    width: 100%;
}

.banner-2 .banner-split {
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    padding-left: 1.5rem;
}


/* ------------------------------------------------------------------
 * CARDS DE NAVEGACIÓN (card-nav)
 * Tarjetas con gradiente + icono + título + flecha.
 * Usar: class="card-nav card-nav-1"
 * ---------------------------------------------------------------- */
.card-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 92px;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(21, 33, 90, 0.12);
}

.card-nav-icon {
    flex: 0 0 auto;
    width: 36px;
    font-size: 1.45rem;
    line-height: 1;
    opacity: 0.95;
}

.card-nav-body {
    flex: 1 1 auto;
    min-width: 0;
}

.card-nav-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.card-nav-sub {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.88);
}

.card-nav-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: inherit;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.card-nav-1 {
    background: linear-gradient(135deg, #4f7cff 0%, #6b5cff 100%);
}

.card-nav-1 .card-nav-go {
    color: #4f7cff;
}

.card-nav-2 {
    background: linear-gradient(135deg, #8b5cf6 0%, #c084fc 100%);
}

.card-nav-2 .card-nav-go {
    color: #8b5cf6;
}

.card-nav-3 {
    background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
}

.card-nav-3 .card-nav-go {
    color: #0f766e;
}

.card-nav-4 {
    background: linear-gradient(135deg, #fb923c 0%, #ef4444 100%);
}

.card-nav-4 .card-nav-go {
    color: #ef4444;
}

/* Los gradientes se mantienen en light y dark */
[tema="dark"] .card-nav {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}


/* ------------------------------------------------------------------
 * ALERTA LLAMATIVA (alert-1)
 * Aviso compacto con CTA. No ocupa tanto como un banner.
 * ---------------------------------------------------------------- */
.alert-1 {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding: 0.85rem 2.4rem 0.85rem 1rem;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(120deg, #15215a 0%, #5b4bcc 55%, #2aa0e8 100%);
    box-shadow: 0 8px 22px rgba(91, 75, 204, 0.28);
    overflow: hidden;
}

.alert-1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #c0ff00;
}

.alert-1-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(192, 255, 0, 0.18);
    color: #c0ff00;
    font-size: 1.05rem;
}

.alert-1-body {
    flex: 1 1 180px;
    min-width: 0;
}

.alert-1-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.alert-1-text {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.3;
}

.alert-1-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.alert-1-close {
    position: absolute;
    top: 0.35rem;
    right: 0.55rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    cursor: pointer;
}

.alert-1-close:hover {
    color: #fff;
}

@media(max-width: 575.98px) {
    .alert-1 {
        padding-right: 2rem;
    }

    .alert-1-btn {
        width: 100%;
    }
}


/* ------------------------------------------------------------------
 * UTILIDADES
 * Piezas pequeñas reutilizables.
 *
 * u-gap-1 = separación entre hijos flex/grid
 * bar-1   = barra de progreso lima (sobre fondos oscuros)
 * ---------------------------------------------------------------- */
.u-gap-1 {
    gap: 0.65rem;
}

/* Scroll horizontal táctil / arrastre (oculta barra nativa) */
.u-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-x;
}
.u-scroll-x::-webkit-scrollbar {
    display: none;
}
.u-scroll-x.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.u-scroll-x.is-dragging * {
    pointer-events: none;
}

/* Tema activo en mapa PEA */
.pea-tema-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    position: relative;
}
.pea-tema-card:hover {
    transform: translateY(-3px);
}
.pea-tema-card.tema-activo,
.pea-tema-card.tema-activo:hover {
    z-index: 2;
    transform: translateY(-6px);
    color: #15215a;
    background: #c0ff00 !important;
    box-shadow: 0 10px 24px rgba(192, 255, 0, 0.35);
}
.pea-tema-card.tema-activo .text-muted,
.pea-tema-card.tema-activo .text-primary,
.pea-tema-card.tema-activo .text-secondary,
.pea-tema-card.tema-activo .text-dark,
.pea-tema-card.tema-activo .text-warning,
.pea-tema-card.tema-activo .font-weight-bold,
.pea-tema-card.tema-activo .small {
    color: #15215a !important;
}
.pea-tema-card.tema-activo .tono-5 {
    background: #15215a !important;
    color: #c0ff00;
}
.pea-tema-card.tema-activo::after {
    content: "En vista";
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #15215a;
    color: #c0ff00;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
[tema="dark"] .pea-tema-card.tema-activo,
[tema="dark"] .pea-tema-card.tema-activo:hover {
    background: #c0ff00 !important;
    color: #15215a;
    box-shadow: 0 10px 24px rgba(192, 255, 0, 0.22);
}

/* Tarjeta calendario con PEA activo */
.cal-tarjeta-pea:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(21, 33, 90, 0.16);
}

/* ------------------------------------------------------------------
 * CALENDARIO SEMANAL ESTUDIANTE (cal-semana)
 * Compatible con [tema="light"] y [tema="dark"].
 * ---------------------------------------------------------------- */
.cal-semana-nav {
    padding: 0.65rem 0.85rem;
    border-radius: 14px;
    background: rgba(21, 33, 90, 0.04);
    border: 1px solid rgba(21, 33, 90, 0.08);
}

.cal-semana-rango {
    color: var(--tono-6, #15215a);
    font-size: 1rem;
    text-transform: capitalize;
}

.cal-semana-btn {
    border-radius: 999px !important;
    border: 1px solid rgba(91, 75, 204, 0.35) !important;
    color: #5b4bcc !important;
    background: #fff !important;
    font-weight: 600;
    padding: 0.4rem 0.9rem !important;
}

.cal-semana-btn:hover,
.cal-semana-btn:focus {
    background: rgba(91, 75, 204, 0.1) !important;
    color: #4527a0 !important;
}

.cal-semana {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
}

.cal-dia {
    flex: 1 1 170px;
    min-width: 170px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.cal-dia-fusion {
    flex: 2 1 380px;
    min-width: 380px;
}

.cal-dia-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.35rem 0.15rem 0.55rem;
    background: transparent;
    color: var(--tono-6, #15215a);
    border-bottom: 2px solid rgba(91, 75, 204, 0.25);
    margin-bottom: 0.55rem;
}

.cal-dia-name {
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.cal-dia-chip {
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(91, 75, 204, 0.12);
    color: #5b4bcc;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}

.cal-dia-hoy .cal-dia-head {
    border-bottom-color: #5b4bcc;
}

.cal-dia-hoy .cal-dia-name {
    color: #5b4bcc;
}

.cal-dia-body {
    padding: 0;
    flex: 1;
}

.cal-empty {
    text-align: center;
    color: var(--color-parrafo, #78909c);
    font-size: 0.78rem;
    padding: 1rem 0.4rem;
    opacity: 0.9;
    border: 1px dashed rgba(21, 33, 90, 0.15);
    border-radius: 12px;
}

.cal-card {
    position: relative;
    border-radius: 14px;
    padding: 0.85rem 0.8rem 0.9rem;
    margin-bottom: 0.65rem;
    background: var(--color-fondo-card, #fff);
    border: 1px solid rgba(21, 33, 90, 0.1);
    box-shadow: 0 6px 16px rgba(21, 33, 90, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cal-card:last-child {
    margin-bottom: 0;
}

.cal-tarjeta-pea {
    cursor: pointer;
}

.cal-tarjeta-pea:hover {
    border-color: rgba(91, 75, 204, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(21, 33, 90, 0.12);
}

.cal-card-time {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #5b4bcc;
    background: rgba(91, 75, 204, 0.1);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.65rem;
    white-space: nowrap;
}

.cal-card-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.cal-card-photo {
    position: relative;
    flex: 0 0 auto;
    line-height: 0;
}

.cal-card-photo img,
.cal-card-photo .img-circle,
.cal-card-photo .rounded-circle {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover;
    border-radius: 50% !important;
    border: 2px solid rgba(91, 75, 204, 0.2);
    display: block;
}

/* Evita que HTML legado (estrella/corazón absolutos) tape la foto */
.cal-card-photo i,
.cal-card-photo span {
    display: none !important;
}

.cal-card-recog {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cal-recog {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.cal-recog-star {
    background: #fff8e1;
    color: #f9a825;
}

.cal-recog-heart {
    background: #fdecea;
    color: #e53935;
}

.cal-card-docente {
    font-size: 0.78rem;
    color: var(--color-parrafo, #607d8b);
    text-align: center;
    margin-bottom: 0.25rem;
}

.cal-card-materia {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--tono-6, #15215a);
    text-align: center;
    margin-bottom: 0.35rem;
}

.cal-card-range {
    font-size: 0.72rem;
    color: var(--color-parrafo, #78909c);
    text-align: center;
    margin-bottom: 0.25rem;
}

.cal-card-salon {
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    color: var(--tono-6, #15215a);
    margin-bottom: 0.55rem;
}

.cal-card-faltas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0d47a1;
    background: rgba(42, 160, 232, 0.12);
    border: 1px solid rgba(42, 160, 232, 0.28);
    border-radius: 10px;
    padding: 0.35rem 0.5rem;
}

.cal-card-faltas strong {
    font-weight: 800;
}

.cal-card-activar {
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Calendario docente (docentegrupos) */
.cal-proxima {
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: rgba(91, 75, 204, 0.08);
    border: 1px solid rgba(91, 75, 204, 0.18);
}

.cal-proxima-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #5b4bcc;
    color: #fff;
}

.cal-proxima-label {
    color: var(--color-parrafo, #78909c);
}

.cal-proxima #kpi_proxima_clase {
    color: var(--tono-6, #15215a);
}

.cal-proxima-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0d47a1;
    background: rgba(42, 160, 232, 0.12);
    border: 1px solid rgba(42, 160, 232, 0.28);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
}

.cal-card-doc .cal-card-materia,
.cal-card-doc .cal-card-range {
    text-align: left;
    margin-bottom: 0.2rem;
}

.cal-card-jornada {
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #5b4bcc;
    background: rgba(91, 75, 204, 0.1);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}

.cal-card-pts {
    font-size: 0.72rem;
    font-weight: 700;
    color: #c2410c;
    background: rgba(251, 146, 60, 0.16);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

.cal-card-pts img {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

.cal-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--tono-6, #15215a);
    margin: 0.35rem 0 0.45rem;
}

.cal-card-actions {
    display: block;
}

.cal-card-actions .btn {
    border-radius: 10px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 0.32rem 0.35rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* FullCalendar (vista Ver calendario) */
#calendar .fc {
    --fc-border-color: rgba(21, 33, 90, 0.1);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: rgba(21, 33, 90, 0.03);
    --fc-list-event-hover-bg-color: rgba(91, 75, 204, 0.08);
    --fc-today-bg-color: rgba(91, 75, 204, 0.08);
    --fc-now-indicator-color: #5b4bcc;
    font-family: inherit;
}

#calendar .fc .fc-scrollgrid,
#calendar .fc .fc-timegrid-slot,
#calendar .fc th {
    border-color: rgba(21, 33, 90, 0.08) !important;
}

#calendar .fc .fc-col-header-cell-cushion,
#calendar .fc .fc-timegrid-slot-label-cushion {
    color: var(--tono-6, #15215a);
    font-weight: 600;
}

#calendar .fc .fc-event {
    border-radius: 8px !important;
    border: 0 !important;
    box-shadow: 0 4px 12px rgba(21, 33, 90, 0.12);
}

@media(max-width: 991.98px) {
    .cal-semana {
        flex-wrap: wrap;
    }
    .cal-dia {
        flex: 1 1 calc(50% - 0.4rem);
        min-width: 160px;
    }
    .cal-dia-fusion {
        flex: 1 1 100%;
        min-width: 320px;
    }
}

@media(max-width: 575.98px) {
    .cal-dia,
    .cal-dia-fusion {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Dark theme */
[tema="dark"] .cal-semana-nav {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

[tema="dark"] .cal-semana-rango {
    color: #fff;
}

[tema="dark"] .cal-semana-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(196, 181, 255, 0.35) !important;
    color: #c4b5ff !important;
}

[tema="dark"] .cal-semana-btn:hover,
[tema="dark"] .cal-semana-btn:focus {
    background: rgba(196, 181, 255, 0.16) !important;
    color: #fff !important;
}

[tema="dark"] .cal-dia {
    background: transparent;
    border: 0;
    box-shadow: none;
}

[tema="dark"] .cal-dia-head {
    color: #fff;
    border-bottom-color: rgba(196, 181, 255, 0.35);
}

[tema="dark"] .cal-dia-chip {
    background: rgba(196, 181, 255, 0.18);
    color: #c4b5ff;
}

[tema="dark"] .cal-dia-hoy .cal-dia-head {
    border-bottom-color: #c4b5ff;
}

[tema="dark"] .cal-dia-hoy .cal-dia-name {
    color: #c4b5ff;
}

[tema="dark"] .cal-empty {
    color: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.15);
}

[tema="dark"] .cal-card {
    background: var(--color-fondo-card, #1e2433);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

[tema="dark"] .cal-tarjeta-pea:hover {
    border-color: rgba(196, 181, 255, 0.45);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

[tema="dark"] .cal-card-time {
    color: #c4b5ff;
    background: rgba(196, 181, 255, 0.14);
}

[tema="dark"] .cal-card-photo img,
[tema="dark"] .cal-card-photo .img-circle,
[tema="dark"] .cal-card-photo .rounded-circle {
    border-color: rgba(196, 181, 255, 0.35);
}

[tema="dark"] .cal-card-docente,
[tema="dark"] .cal-card-range {
    color: rgba(255, 255, 255, 0.6);
}

[tema="dark"] .cal-card-materia,
[tema="dark"] .cal-card-salon {
    color: #fff;
}

[tema="dark"] .cal-card-faltas {
    color: #90caf9;
    background: rgba(42, 160, 232, 0.18);
    border-color: rgba(42, 160, 232, 0.4);
}

[tema="dark"] .cal-recog-star {
    background: rgba(249, 168, 37, 0.2);
}

[tema="dark"] .cal-recog-heart {
    background: rgba(229, 57, 53, 0.22);
}

[tema="dark"] .cal-proxima {
    background: rgba(196, 181, 255, 0.1);
    border-color: rgba(196, 181, 255, 0.25);
}

[tema="dark"] .cal-proxima-label {
    color: rgba(255, 255, 255, 0.55);
}

[tema="dark"] .cal-proxima #kpi_proxima_clase {
    color: #fff;
}

[tema="dark"] .cal-proxima-badge {
    color: #90caf9;
    background: rgba(42, 160, 232, 0.18);
    border-color: rgba(42, 160, 232, 0.4);
}

[tema="dark"] .cal-card-jornada {
    color: #c4b5ff;
    background: rgba(196, 181, 255, 0.14);
}

[tema="dark"] .cal-card-meta {
    color: rgba(255, 255, 255, 0.75);
}

[tema="dark"] #calendar .fc {
    --fc-border-color: rgba(255, 255, 255, 0.1);
    --fc-neutral-bg-color: rgba(255, 255, 255, 0.03);
    --fc-list-event-hover-bg-color: rgba(196, 181, 255, 0.1);
    --fc-today-bg-color: rgba(196, 181, 255, 0.1);
    --fc-now-indicator-color: #c4b5ff;
}

[tema="dark"] #calendar .fc .fc-scrollgrid,
[tema="dark"] #calendar .fc .fc-timegrid-slot,
[tema="dark"] #calendar .fc th {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[tema="dark"] #calendar .fc .fc-col-header-cell-cushion,
[tema="dark"] #calendar .fc .fc-timegrid-slot-label-cushion {
    color: rgba(255, 255, 255, 0.85);
}

[tema="dark"] #calendar .fc .fc-event {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Sortable experiencias (docente) */
#tbodyExperienciasTema .pea-exp-handle {
    cursor: grab;
}
#tbodyExperienciasTema .ui-sortable-helper {
    background: #fff;
    box-shadow: 0 8px 24px rgba(21, 33, 90, 0.18);
}
#tbodyExperienciasTema tr.ui-state-highlight {
    height: 52px;
    background: #eef1f8;
}

/* ------------------------------------------------------------------
 * MODALES PEA (modal-pea)
 * PC: anchos y alegres. Móvil: tira a pantalla completa.
 * ---------------------------------------------------------------- */
.modal-pea .modal-dialog {
    max-width: 860px;
    width: calc(100% - 2rem);
}

.modal-pea .modal-content {
    border: 0 !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(21, 33, 90, 0.22);

}

.modal-pea .modal-header.modal-pea-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 0;
    padding: 1.1rem 1.35rem;
    background: linear-gradient(120deg, #15215a 0%, #5b4bcc 55%, #2aa0e8 100%);
    color: #fff;
}

.modal-pea .modal-header.modal-pea-header .modal-title {
    color: #fff !important;
    font-weight: 700;
    font-size: 1.15rem;
}

.modal-pea .modal-pea-sub {
    display: block;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.modal-pea .modal-pea-ico {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.25rem;
    margin-right: 0.85rem;
}

.modal-pea .modal-header .close {
    color: #fff !important;
    opacity: 0.9;
    text-shadow: none;
    font-size: 1.6rem;
}

.modal-pea .modal-body {
    padding: 1.25rem 1.35rem 0.5rem;

}

.modal-pea .modal-body .form-control,
.modal-pea .modal-body .form-control-file,
.modal-pea .modal-body select.form-control,
.modal-pea .modal-body textarea.form-control {
    border-radius: 10px;
    border-color: #dce3f0;
    background: #fff;
}

.modal-pea .modal-footer {

    padding: 0.85rem 1.35rem 1.1rem;
}

.modal-pea .modal-pea-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.75rem;
    font-weight: 600;
}

.modal-pea .modal-pea-card {
    border-radius: 14px;
    padding: 1rem;
    height: 100%;
    box-shadow: 0 4px 14px rgba(21, 33, 90, 0.04);
}

.modal-pea .modal-pea-card-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #5b4bcc;
    margin-bottom: 0.75rem;
}

.modal-pea .modal-pea-card-title i {
    margin-right: 0.35rem;
}

@media(max-width: 767.98px) {
    .modal-pea .modal-dialog {
        max-width: 100%;
        width: 100%;
        margin: 0;
        height: 100%;
    }

    .modal-pea .modal-content {
        border-radius: 0 !important;
        min-height: 100vh;
    }

    .modal-pea .modal-dialog-centered {
        align-items: stretch;
    }
}

/* Modal editar programas: header + tabs fijos, contenido con scroll */
#ModalEditarProgramas .modal-dialog {
    max-height: calc(100vh - 2rem);
}

#ModalEditarProgramas .modal-content {
    max-height: calc(100vh - 2rem);
    height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#ModalEditarProgramas #contenidoEditarPrograma {
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

@media(max-width: 767.98px) {
    #ModalEditarProgramas .modal-dialog {
        max-height: 100%;
        height: 100%;
        margin: 0;
        max-width: 100%;
        width: 100%;
    }

    #ModalEditarProgramas .modal-content {
        max-height: 100%;
        height: 100%;
        min-height: 0;
        border-radius: 0 !important;
    }
}

.bar-1 {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.bar-1 > span {
    display: block;
    height: 100%;
    width: 35%;
    border-radius: inherit;
    background: #c0ff00;
}

.ico-1 {
    color: #5b4bcc;
}

[tema="dark"] .ico-1 {
    color: #c4b5ff;
}

.bar-2 {
    height: 8px;
    border-radius: 999px;
    background: #edf0f5;
    overflow: hidden;
}

.bar-2 > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: #5b4bcc;
    transition: width 0.35s ease;
}

[tema="dark"] .bar-2 {
    background: rgba(255, 255, 255, 0.12);
}


/* ------------------------------------------------------------------
 * ASIDE / PANEL LATERAL (aside-1)
 * Contenedor de nivel + racha + desafíos.
 * ---------------------------------------------------------------- */
.aside-1 {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(21, 33, 90, 0.08);
    padding: 1.15rem 1.2rem;
}

.aside-1-block {
    padding-bottom: 1.15rem;
    margin-bottom: 1.15rem;
    border-bottom: 1px solid #edf0f5;
}

.aside-1-block-last {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.aside-1-title {
    font-size: 1rem;
    font-weight: 700;
    color: #15215a;
}

.aside-1-muted {
    font-size: 0.8rem;
    color: #8a97a8;
    line-height: 1.3;
}

.aside-1-soon {
    font-size: 0.9rem;
    font-weight: 700;
    color: #f0a202;
}

.pts-1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f0a202;
    color: #fff;
    font-size: 0.65rem;
}

/* Hexágono de nivel */
.lvl-1 {
    position: relative;
    flex: 0 0 auto;
    width: 68px;
    height: 76px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #15215a;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.lvl-1 i {
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
    opacity: 0.95;
}

.lvl-1 span {
    font-size: 1.55rem;
    font-weight: 800;
}

/* Días de racha */
.day-1 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #7b8794;
    background: #eef1f5;
}

.day-1-on {
    background: #5b4bcc;
    color: #fff;
}

/* Desafío activo (trofeo bg-racha.webp) */
.challenge-1 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #ece8ff 0%, #e7f0ff 100%);
    overflow: hidden;
}

.challenge-1-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(91, 75, 204, 0.15);
    color: #5b4bcc;
    font-size: 1rem;
}

.challenge-1-text {
    flex: 1 1 auto;
    font-size: 0.88rem;
    line-height: 1.3;
    color: #15215a;
}

.challenge-1-img {
    flex: 0 0 auto;
    width: 58px;
    height: auto;
    object-fit: contain;
}

/* Desafío bloqueado */
.challenge-2 {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: #f4f6f8;
}

.challenge-2-icon {
    flex: 0 0 auto;
    color: #15215a;
    font-size: 1.15rem;
    line-height: 1.2;
    padding-top: 0.1rem;
}

.challenge-2-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #15215a;
    line-height: 1.25;
}

/* Dark mode — aside */
[tema="dark"] .aside-1 {
    background: var(--color-fondo-card, #1e2433);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[tema="dark"] .aside-1-block {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[tema="dark"] .aside-1-title,
[tema="dark"] .challenge-1-text,
[tema="dark"] .challenge-2-title {
    color: #fff;
}

[tema="dark"] .aside-1-muted {
    color: rgba(255, 255, 255, 0.55);
}

[tema="dark"] .day-1 {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
}

[tema="dark"] .day-1-on {
    background: #5b4bcc;
    color: #fff;
}

[tema="dark"] .challenge-1 {
    background: linear-gradient(135deg, rgba(91, 75, 204, 0.35) 0%, rgba(60, 90, 160, 0.35) 100%);
}

[tema="dark"] .challenge-2 {
    background: rgba(255, 255, 255, 0.06);
}

[tema="dark"] .challenge-2-icon {
    color: #c4b5ff;
}


/* ------------------------------------------------------------------
 * RESPONSIVE — banner-1
 * ---------------------------------------------------------------- */
@media(max-width: 991.98px) {
    .banner-1 {
        min-height: 180px;
        background-position: 70% center;
        padding: 1.5rem;
    }

    .banner-body {
        max-width: 70%;
    }
}

@media(max-width: 767.98px) {
    .banner-1 {
        min-height: 210px;
        padding: 1.35rem 1.2rem;
        background-position: center right;
    }

    .banner-body {
        max-width: 100%;
        background: linear-gradient(90deg, rgba(15, 23, 60, 0.72) 0%, rgba(15, 23, 60, 0.35) 70%, transparent 100%);
        border-radius: 12px;
        padding: 0.75rem 0.5rem;
    }

    .banner-1 .btn:not(.btn-sm) {
        width: 100%;
    }

    .pea-tema-card {
        width: 128px !important;
        min-height: 148px !important;
        padding: 0.7rem !important;
    }

    .pea-tema-card.tema-activo::after {
        font-size: 8px;
        padding: 2px 7px;
    }

    .banner-2 {
        min-height: 240px;
        padding: 1.35rem 1.2rem;
        background-position: 70% center;
    }

    .banner-2 .banner-body {
        background: linear-gradient(90deg, rgba(15, 23, 60, 0.78) 0%, rgba(15, 23, 60, 0.4) 75%, transparent 100%);
    }

    .banner-2 .banner-split {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        padding-left: 0;
        padding-top: 1rem;
        margin-top: 1rem;
    }

    .banner-2 .btn-3 {
        width: 100%;
    }

    .card-nav {
        min-height: 84px;
    }
}


/* ------------------------------------------------------------------
 * TABS (nav-1)
 * Usar con Bootstrap: <ul class="nav nav-1"> ... <a class="nav-link">
 * Activo = texto + borde inferior en acento.
 * Usa variables del tema para verse bien en light y dark.
 * ---------------------------------------------------------------- */
.nav-1 {
    border-bottom: 1px solid var(--color-borde, #edf4f8);
}

.nav-1 .nav-link {
    color: var(--color-parrafo, #607d8b) !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    font-weight: 600;
    padding: 0.55rem 0.9rem;
    background: transparent !important;
    opacity: 1 !important;
}

.nav-1 .nav-link:hover {
    color: var(--tono-6, #15215a) !important;
    border-color: transparent !important;
    background: transparent !important;
}

.nav-1 .nav-link.active {
    color: #5b4bcc !important;
    background: rgba(105, 92, 179, 0.12) !important;
    border-bottom-color: #5b4bcc !important;
}

/* Dark: más contraste sobre cards oscuras */
[tema="dark"] .nav-1 .nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
}

[tema="dark"] .nav-1 .nav-link:hover {
    color: #fff !important;
}

[tema="dark"] .nav-1 .nav-link.active {
    color: #c4b5ff !important;
    background: rgba(105, 92, 179, 0.25) !important;
    border-bottom-color: #c4b5ff !important;
}


/* ------------------------------------------------------------------
 * AGENDA (agenda-1)
 * Contenedor de agenda unificada.
 * Solo redefine el estado activo de .button-calendario dentro de agenda-1
 * (en estilos.css el activo usa borde lateral; aquí va subrayado).
 * ---------------------------------------------------------------- */
.agenda-1 .button-calendario {
    border-right: 0 !important;
    border-bottom: 2px solid transparent;
    color: var(--color-parrafo, #607d8b) !important;
    font-weight: 500;
}

.agenda-1 .button-calendario.button-active {
    color: #5b4bcc !important;
    border-bottom-color: #5b4bcc;
    font-weight: 700;
}

.agenda-1 .button-calendario.button-active::before {
    display: none;
}

[tema="dark"] .agenda-1 .button-calendario {
    color: rgba(255, 255, 255, 0.7) !important;
}

[tema="dark"] .agenda-1 .button-calendario.button-active {
    color: #c4b5ff !important;
    border-bottom-color: #c4b5ff;
}


/* ------------------------------------------------------------------
 * AGENDA DESTACADA (agenda-2)
 * Layout: featured card + listado "Próximas fechas".
 * ---------------------------------------------------------------- */
.agenda-2 {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(21, 33, 90, 0.08);
    padding: 1.25rem 1.35rem 1.4rem;
}

.agenda-2-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.agenda-2-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: 0.75rem;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #5b4bcc 0%, #2aa0e8 100%);
    box-shadow: 0 6px 14px rgba(91, 75, 204, 0.28);
}

.agenda-2-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #15215a;
}

.agenda-2-sub {
    font-size: 0.86rem;
    color: #8a97a8;
}

.agenda-2-link {
    font-size: 0.9rem;
    font-weight: 700;
    color: #5b4bcc;
    white-space: nowrap;
}

.agenda-2-link:hover {
    color: #3f3299;
    text-decoration: none;
}

.agenda-2-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 1.15rem;
}

.agenda-2-month {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: #f4f6fb;
    border: 1px solid #e8ecf4;
}

.agenda-2-nav {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #5b4bcc;
    box-shadow: 0 2px 8px rgba(21, 33, 90, 0.08);
    cursor: pointer;
}

.agenda-2-month-label {
    min-width: 120px;
    text-align: center;
    font-weight: 700;
    color: #15215a;
    font-size: 0.95rem;
}

.agenda-2-toggle {
    display: inline-flex;
    gap: 0.4rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: #f4f6fb;
    border: 1px solid #e8ecf4;
}

.agenda-2-toggle-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #7b8794;
    text-decoration: none !important;
}

.agenda-2-toggle-btn.active,
.agenda-2-toggle-btn.active:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #5b4bcc 0%, #2aa0e8 100%);
    box-shadow: 0 4px 12px rgba(91, 75, 204, 0.28);
}

.agenda-2-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 1rem;
}

.agenda-featured {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.agenda-featured-card {
    position: relative;
    min-height: 260px;
    padding: 1.2rem 1.25rem 1rem;
    border-radius: 18px;
    color: #fff;
    overflow: hidden;
    background: radial-gradient(circle at 85% 30%, rgba(192, 255, 0, 0.12), transparent 35%), linear-gradient(135deg, #15215a 0%, #2a1f6e 45%, #5b4bcc 100%);
    box-shadow: 0 12px 28px rgba(21, 33, 90, 0.22);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.agenda-featured-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.14);
    margin-bottom: 1rem;
}

.agenda-featured-main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
    z-index: 1;
    flex-grow: 1;
}

.agenda-featured-date {
    flex: 0 0 auto;
    line-height: 1;
    text-align: center;
    min-width: 58px;
}

.agenda-featured-day {
    display: block;
    font-size: 2.6rem;
    font-weight: 800;
}

.agenda-featured-mon {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.92;
}

.agenda-featured-info {
    flex: 1 1 auto;
    min-width: 0;
}

.agenda-featured-title {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.agenda-featured-detail {
    margin: 0 0 0.7rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
}

.agenda-featured-btn {
    padding: 0.45rem 0.95rem !important;
    font-size: 0.88rem !important;
}

.agenda-featured-art {
    position: absolute;
    right: 0.2rem;
    bottom: 1.8rem;
    font-size: 4.2rem;
    opacity: 0.18;
    color: #fff;
    pointer-events: none;
}

.agenda-featured-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.1rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

.agenda-dots {
    display: inline-flex;
    gap: 0.35rem;
}

.agenda-dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    padding: 0;
    cursor: pointer;
}

.agenda-dot.active {
    background: #fff;
}

.agenda-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.agenda-pill-ok {
    background: #c0ff00;
    color: #15215a;
}

.agenda-pill-warn {
    background: #ffe0b8;
    color: #b35b00;
}

.agenda-soon-head {
    display: flex;
    align-items: center;
    font-weight: 800;
    color: #15215a;
    margin-bottom: 0.75rem;
}

.agenda-soon-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.agenda-soon-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    border: 1px solid #e8ecf4;
    background: #fff;
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.agenda-soon-item:hover {
    border-color: #cfc7f7;
    box-shadow: 0 6px 16px rgba(91, 75, 204, 0.1);
}

.agenda-soon-date {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #eef1f8;
    color: #15215a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
}

.agenda-soon-day {
    font-size: 1.15rem;
    font-weight: 800;
}

.agenda-soon-mon {
    font-size: 0.7rem;
    font-weight: 700;
}

.agenda-soon-body {
    flex: 1 1 auto;
    min-width: 0;
}

.agenda-soon-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #15215a;
    line-height: 1.25;
}

.agenda-soon-go {
    color: #a0aab8;
    font-size: 0.85rem;
}

.agenda-empty {
    text-align: center;
    padding: 2.2rem 1rem;
    color: #8a97a8;
    border: 1px dashed #d9e0ea;
    border-radius: 16px;
}

.agenda-empty i {
    font-size: 1.6rem;
    color: #5b4bcc;
}

@media(max-width: 991.98px) {
    .agenda-2-grid {
        grid-template-columns: 1fr;
    }
}

[tema="dark"] .agenda-2 {
    background: var(--color-fondo-card, #1e2433);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

[tema="dark"] .agenda-2-title,
[tema="dark"] .agenda-soon-head,
[tema="dark"] .agenda-soon-title,
[tema="dark"] .agenda-2-month-label {
    color: #fff;
}

[tema="dark"] .agenda-2-sub {
    color: rgba(255, 255, 255, 0.55);
}

[tema="dark"] .agenda-2-month,
[tema="dark"] .agenda-2-toggle {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

[tema="dark"] .agenda-2-nav {
    background: rgba(255, 255, 255, 0.1);
    color: #c4b5ff;
}

[tema="dark"] .agenda-soon-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

[tema="dark"] .agenda-soon-date {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* ------------------------------------------------------------------
 * MÓDULO RENOVACIÓN (renova-*)
 * Ajustes visuales reutilizables sobre banner/card-nav/agenda-2/aside-1.
 * ---------------------------------------------------------------- */
.renova-hero .badge-light {
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a72;
    font-weight: 600;
}

.renova-kpi {
    min-height: 116px;
}

.renova-kpi .card-nav-title {
    font-size: 1.5rem;
    line-height: 1.1;
}

.renova-kpi .kpi-sub {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.renova-stat {
    position: relative;
    padding: 1rem 1rem 0.95rem;
    overflow: hidden;
}

.renova-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
}

.renova-stat-ok::before {
    background: #22c55e;
}

.renova-stat-info::before {
    background: #0ea5e9;
}

.renova-stat-cash::before {
    background: #6b7280;
}

.renova-stat-credit::before {
    background: #f59e0b;
}

.renova-panel .table thead th {
    border-top: 0;
}

.renova-panel .btn-group .btn.active {
    background: linear-gradient(135deg, #5b4bcc 0%, #2aa0e8 100%);
    color: #fff;
    border-color: transparent;
}

@media(max-width: 767.98px) {
    .renova-kpi .card-nav-title {
        font-size: 1.2rem;
    }
}


/* ------------------------------------------------------------------
 * LOGIN CARD (page-login)
 * Tarjeta de acceso: campos cápsula, botón degradado y CTA inferior.
 * Usar: class="formulario-login login-card"
 * ---------------------------------------------------------------- */
.login-card {
    background: #fff;
    border-radius: 32px;
    padding: 2.1rem 2rem 1.35rem;
    box-shadow: 0 22px 50px rgba(21, 33, 90, 0.08);
}

.login-card-logo {
    display: block;
    margin: 0 0 1.15rem;
    line-height: 0;
}

.login-card-logo img {
    width: 88px;
    height: auto;
}

.login-card-title {
    margin: 0 0 0.35rem;
    font-family: "fuente4", sans-serif;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 800;
    line-height: 1.2;
    color: #15215a;
}

.login-card-sub {
    margin: 0 0 1.45rem;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.4;
    color: #8a94a6;
}

.login-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 54px;
    margin-bottom: 0.85rem;
    padding: 0 1.15rem;
    border: 1.5px solid #e4e9f0;
    border-radius: 999px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-field:focus-within {
    border-color: #8ec9e8;
    box-shadow: 0 0 0 3px rgba(62, 195, 234, 0.12);
}

.login-field-ico,
.login-field-chevron {
    flex: 0 0 auto;
    color: #c0c7d4;
    font-size: 0.95rem;
    pointer-events: none;
}

.login-field-chevron {
    font-size: 0.75rem;
}

.login-card .login-field .form-control,
.login-card .login-field input,
.login-card .login-field select {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0;
    padding: 0.85rem 0;
    margin: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    color: #15215a;
}

.login-card .login-field .form-control::placeholder,
.login-card .login-field input::placeholder {
    color: #b0b8c6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    opacity: 1;
}

.login-card .login-field input:-webkit-autofill,
.login-card .login-field input:-webkit-autofill:hover,
.login-card .login-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px #fff inset;
    -webkit-text-fill-color: #15215a;
    transition: background-color 9999s ease-out;
}

.login-field-pass .form-control,
.login-field-pass input {
    padding-right: 0.25rem;
}

.login-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #c0c7d4;
    cursor: pointer;
}

.login-toggle:hover,
.login-toggle:focus {
    color: #6d7d92;
    outline: none;
}

.login-field-perfil {
    margin-top: 0.45rem;
}

.login-field-hint {
    position: absolute;
    top: -0.55rem;
    left: 1.25rem;
    z-index: 10;
    padding: 0 0.35rem;
    background: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9aa3b5;
    line-height: 1;
}

.login-dropdown-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 0.85rem 0;
    margin: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    font-size: 0.98rem;
    font-weight: 700;
    color: #15215a;
    text-align: left;
    cursor: pointer;
}

.login-dropdown-btn:focus {
    outline: none;
}

.login-dropdown-menu {
    border: 1px solid #e4e9f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(21, 33, 90, 0.1) !important;
    padding: 0.5rem 0 !important;
    margin-top: 8px !important;
    width: 100% !important;
    min-width: 100% !important;
    background-color: #fff !important;
    z-index: 1050;
}

.login-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.7rem 1.25rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.login-dropdown-item:hover,
.login-dropdown-item:focus {
    background-color: #f3f6ff !important;
    color: #15215a !important;
    text-decoration: none !important;
}

.login-dropdown-item.active,
.login-dropdown-item:active {
    background-color: #5b4bcc !important;
    color: #fff !important;
    text-decoration: none !important;
}

@keyframes gradient-pan {
    0% {
        background-position: 0 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

.login-btn {
    --navy-deep: oklch(24.6% 0.099 264.1);
    --blue-mid: oklch(34.1% 0.134 264.7);
    --blue-bright: oklch(66.5% 0.121 243.9);
    --green-ciaf: oklch(56.3% 0.122 146.5);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 54px;
    margin: 1.1rem 0 0.9rem;
    padding: 0.75rem 1.25rem;
    border: 0;
    border-radius: 16px; /* rounded-2xl */
    background-image: linear-gradient(110deg, var(--navy-deep), var(--blue-mid), var(--blue-bright), var(--green-ciaf), var(--navy-deep));
    background-size: 220% 100%;
    animation: gradient-pan 7s linear infinite;
    color: #fff;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(21, 33, 90, 0.15);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.32, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.32, 1), opacity 0.4s ease, filter 0.4s ease;
    will-change: transform, box-shadow;
}

.login-btn:hover {
    color: #fff;
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 18px 40px -16px var(--blue-bright);
    filter: brightness(1.05);
    text-decoration: none;
}

.login-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 12px rgba(21, 33, 90, 0.15);
}

.login-btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(62, 196, 234, 0.3);
}

.login-btn i {
    font-size: 0.85rem;
}

.login-recover {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 0 1.1rem;
    color: #6d7d92;
    font-size: 0.92rem;
    text-decoration: none;
    cursor: pointer;
}

.login-recover:hover,
.login-recover:focus {
    color: #15215a;
    text-decoration: none;
}

.login-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.login-help a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #6d7d92;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}

.login-help a:hover,
.login-help a:focus {
    color: #15215a;
    text-decoration: none;
}

.login-explore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.35rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
}

.login-explore-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #15215a;
    line-height: 1.3;
}

.login-explore-text i {
    color: #3aa8dc;
}

.login-explore-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #3aa8dc;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.login-explore-go:hover,
.login-explore-go:focus {
    color: #1e88c8;
    text-decoration: none;
}

.login-copy {
    margin: 1.1rem 0 0;
    width: 100%;
    color: #a0aab8;
    font-size: 0.78rem;
    text-align: center;
}

@media(max-width: 991.98px) {
    .login-card {
        padding: 0.35rem 0.15rem 0.5rem;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .page-login .login-lado-b {
        background-color: #fff;
    }
}

@media(max-width: 767.98px) {
    .login-card-title {
        font-size: 1.35rem;
    }

    .login-help {
        flex-wrap: wrap;
        justify-content: center;
    }

    .login-explore {
        flex-wrap: wrap;
    }
}


/* ------------------------------------------------------------------
 * BANNER ADAPTATIVO (Blured Background)
 * Evita que las imágenes se recorten y las adapta a cualquier pantalla.
 * ---------------------------------------------------------------- */
.banner-container-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #132252;
}

.banner-blur-bg {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.45);
    z-index: 1;
    pointer-events: none;
    transform: scale(1.1);
}

.lado-a-banner-fit {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 5s ease-out;
}

/* Efecto de zoom suave (Ken Burns) para la imagen activa */
.carousel-item.active .lado-a-banner-fit {
    animation: imageZoomKenBurns 5s ease-out forwards;
}

/* Pausa el zoom si el usuario pasa el mouse sobre el carrusel */
#carouselBanner:hover .carousel-item.active .lado-a-banner-fit {
    animation-play-state: paused;
}

@keyframes imageZoomKenBurns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}

/* ------------------------------------------------------------------
 * CAROUSEL PROGRESS BAR
 * Barra de progreso que indica cuándo va a cambiar el slide.
 * ---------------------------------------------------------------- */
.carousel-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.15);
    z-index: 10;
    overflow: hidden;
}

.carousel-progress-bar {
    width: 0;
    height: 100%;
    background-color: oklch(56.3% 0.122 146.5); /* --green-ciaf */
    box-shadow: 0 0 10px oklch(56.3% 0.122 146.5);
    transition: none;
}

.carousel-item.active .carousel-progress-bar {
    animation: carouselProgress 5s linear forwards;
}

/* Pausa la animación si el usuario pasa el mouse (hover) sobre el carousel */
#carouselBanner:hover .carousel-item.active .carousel-progress-bar {
    animation-play-state: paused;
}

@keyframes carouselProgress {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

/* ======================= fin estilos nuevos ======================= */

/* ------------------------------------------------------------------
 * MEJORAS PARA EL FORMULARIO DE CARGA DE BANNER (vistas/banner_campus.php)
 * ---------------------------------------------------------------- */
.banner-upload-zone {
    border: 2px dashed #007bff;
    border-radius: 16px;
    background-color: #f8f9fa;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
}

.banner-upload-zone:hover {
    border-color: #28a745;
    background-color: #f1fcf4;
}

.banner-upload-icon {
    font-size: 42px;
    color: #007bff;
    transition: color 0.3s ease;
}

.banner-upload-zone:hover .banner-upload-icon {
    color: #28a745;
}

.banner-upload-text {
    font-size: 15px;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.banner-upload-subtext {
    font-size: 12px;
    color: #6c757d;
    margin: 0;
}

.banner-preview-container {
    position: relative;
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: none; /* Se muestra cuando hay una imagen seleccionada */
}

.banner-preview-img {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    background-color: #132252;
    display: block;
}

.banner-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.banner-preview-container:hover .banner-preview-overlay {
    opacity: 1;
}

.banner-preview-overlay span {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 16px;
    border: 2px solid #fff;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.3);
}

/* Mensaje por defecto cuando no hay imagen seleccionada */
.banner-no-image-message {
    font-size: 13px;
    color: #dc3545;
    font-weight: 600;
    background-color: #fdf3f4;
    border: 1px solid #f5c6cb;
    padding: 10px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
}

/* ------------------------------------------------------------------
 * EFECTO DE TRANSICIÓN DE INGRESO SEGURO (MODERNO / IA)
 * ---------------------------------------------------------------- */
.login-success-modal {
    background: rgba(10, 15, 30, 0.92) !important; /* Fondo ultra oscuro translúcido con tinte azul */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 28px !important;
    /* Sombra con doble brillo de color (Cyan y Esmeralda) */
    box-shadow: 0 0 40px rgba(6, 182, 212, 0.15), 0 0 80px rgba(16, 185, 129, 0.1), 0 20px 50px rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    max-width: 480px !important;
    padding: 2.5rem 2rem !important;
    overflow: hidden;
    position: relative;
}

/* Efecto de rejilla cibernética de fondo */
.login-success-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
}

/* Luces de neón difusas en las esquinas */
.login-success-modal::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0) 70%);
    top: -50px;
    right: -50px;
    pointer-events: none;
    z-index: 0;
}

.login-success-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

/* Contenedor de Avatar con Anillo de Carga de Neón */
.login-success-avatar-container {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-success-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    z-index: 2;
}

/* Anillo de neón giratorio */
.login-success-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #06b6d4; /* Cyan */
    border-bottom-color: #10b981; /* Emerald */
    animation: spinRing 2s linear infinite;
    z-index: 1;
}

.login-success-ring::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-left-color: rgba(168, 85, 247, 0.4); /* Purple */
    animation: spinRingOpposite 3s linear infinite;
}

.login-success-welcome {
    font-size: 26px;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 30%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    letter-spacing: -0.75px;
    text-align: center;
}

.login-success-email {
    font-size: 13px;
    color: #06b6d4; /* Color Cyan de alta tecnología */
    margin: -4px 0 0;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(6, 182, 212, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

/* Contenedor de Pasos con Estilo de Vidrio Esmerilado */
.login-success-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    margin: 24px 0;
    background: rgba(255, 255, 255, 0.02);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
    z-index: 1;
}

.login-success-step {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: #475569; /* Slate 600 */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.32, 1);
    transform: translateX(-5px);
    opacity: 0.7;
}

.login-success-step.active {
    color: #38bdf8; /* Sky 400 */
    font-weight: 600;
    transform: translateX(0) scale(1.02);
    opacity: 1;
    text-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
}

.login-success-step.completed {
    color: #10b981; /* Emerald 500 */
    transform: translateX(0);
    opacity: 1;
}

.login-success-step-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
}

.login-success-step.active .login-success-step-icon {
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.login-success-step.completed .login-success-step-icon {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.login-success-step-icon .fa-spinner {
    animation: spin 1s linear infinite;
    color: #38bdf8;
}

/* Contenedor de Barra de Progreso de Neón */
.login-success-progress-container {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 14px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.login-success-progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #06b6d4, #10b981, #a855f7);
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.32, 1);
    position: relative;
}

/* Efecto de destello de luz que viaja por la barra de progreso */
.login-success-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: progressShine 1.5s infinite;
}

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

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

@keyframes progressShine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

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

/* Analítica PEA — selector de estudiantes con foto */
.analitica-est-picker {
    position: relative;
}

.analitica-est-picker-toggle {
    cursor: pointer;
    background: #fff;
    border: 1px solid rgba(21, 33, 90, 0.15);
    border-radius: 10px !important;
    min-height: 38px;
}

.analitica-est-picker-menu {
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid rgba(21, 33, 90, 0.12);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(21, 33, 90, 0.14);
    overflow: hidden;
}

.analitica-est-picker-list {
    max-height: 260px;
    overflow-y: auto;
}

.analitica-est-picker-item {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.analitica-est-picker-item:hover,
.analitica-est-picker-item:focus {
    background: rgba(91, 75, 204, 0.08);
    outline: none;
}

.analitica-est-picker-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(21, 33, 90, 0.1);
    background: #f4f5f8;
}

.analitica-est-picker-av-ph {
    opacity: 0.45;
}

.analitica-est-picker-nombre {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tono-6, #15215a);
    line-height: 1.25;
}

.analitica-alerta-est {
    text-decoration: none !important;
    color: inherit;
}

.analitica-alerta-est:hover {
    color: var(--tono-1, #5b4bcc);
}

[tema="dark"] .analitica-est-picker-toggle,
[tema="dark"] .analitica-est-picker-menu {
    background: var(--tono-2, #1e2746);
    border-color: rgba(255, 255, 255, 0.12);
}

[tema="dark"] .analitica-est-picker-item:hover,
[tema="dark"] .analitica-est-picker-item:focus {
    background: rgba(255, 255, 255, 0.06);
}

[tema="dark"] .analitica-est-picker-nombre {
    color: #e8ecff;
}

.pea-seg-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
}

.pea-seg-badges .badge {
    font-size: 11px;
    font-weight: 600;
}

.pea-seg-badges:hover .badge {
    border-color: #6c757d !important;
}

.pea-seg-list {
    max-height: 220px;
    overflow-y: auto;
}

.pea-seg-item .small {
    line-height: 1.2;
}