/* =========================================
   1. Tokens y utilidades base
   ========================================= */
:root {
    --icon-size: 1.25rem;
    --icon-size-lg: 1.5rem;
    --footer-height: 60px; /* alto de footer por defecto */
    /* Tokens para el off-canvas (heredan del tema/variables de la navbar) */
    --oc-bg: var(--navbar-item-bg, #f8f9fa) !important;
    --oc-fg: var(--navbar-item-text-color, #212529) !important;
    --oc-border: var(--submenu-border-color, rgba(0,0,0,.12)) !important;
    --oc-radius: 12px !important;
    --oc-item-radius: .4rem !important;
    /* Hovers con fallback: prioriza hover del navbar */
    --oc-hover: var(--navbar-item-hover-bg, var(--menu-hover-bg, rgba(0,0,0,.06))) !important;
    --oc-sub-hover: var(--submenu-hover-bg, var(--oc-hover)) !important;
    --oc-sub-fg: var(--submenu-text-color, var(--oc-fg)) !important;
    --oc-sub-accent: rgba(0,0,0,.18) !important;
    /* Badges “globales” */
    --cm-badge-bg: var(--navbar-item-bg, #f8f9fa);
    --cm-badge-fg: #ffffff;
    /* ===== Tokens CM para “tarjetas” y pills (mismas vistas de Encuestas/Asistencias) ===== */
    --cm-radius: 16px;
    --cm-radius-lg: 24px;
    --cm-border-color: var(--bs-border-color, var(--bs-border-color-translucent, #dee2e6));
    --cm-primary: var(--bs-primary, #0d6efd);
    --cm-shadow: 0 6px 14px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);    
    
}

@supports (color: color-mix(in srgb, white 50%, black)) {
    :root {
        /* Afinamos el acento lateral si hay soporte para color-mix */
        --oc-sub-accent: color-mix(in srgb, var(--color-primary, #0d6efd) 42%, transparent) !important;
    }
}


@supports (color: color-mix(in srgb, white 50%, black)) {
    :root {
        /* Afinamos el acento lateral si hay soporte para color-mix */
        --oc-sub-accent: color-mix(in srgb, var(--color-primary, #0d6efd) 42%, transparent) !important;
    }
}

/* Iconos Bootstrap */
i.bi {
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Botón de icono reutilizable */
.btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .25rem !important;
    border: 0 !important;
    background: transparent !important;
    padding: .25rem !important;
}

    .btn-icon i.bi {
        font-size: var(--icon-size) !important;
    }

    .btn-icon:hover {
        background: var(--navbar-item-hover-bg, rgba(0,0,0,.05)) !important;
        color: var(--navbar-item-hover-text-color, inherit) !important;
        border-radius: var(--navbar-item-border-radius, .375rem) !important;
    }

/* =========================================
   2. Navbar: iconos, saludo, logo y fondo
   ========================================= */

/* Tamaños de iconos en navbar */
.navbar .nav-link i.bi,
.navbar .btn.nav-link i.bi {
    font-size: var(--icon-size) !important;
}

@media (max-width: 575.98px) {
    .navbar .nav-link i.bi,
    .navbar .btn.nav-link i.bi {
        font-size: var(--icon-size-lg) !important;
    }
}

/* Icono selector de perfil (móvil/desktop) */
.navbar .profile-switcher {
    color: var(--navbar-item-text-color, inherit) !important;
    border-radius: var(--navbar-item-border-radius, .375rem) !important;
    padding: .25rem .35rem !important;
}

    .navbar .profile-switcher:hover,
    .navbar .profile-switcher:focus {
        color: var(--navbar-item-hover-text-color, inherit) !important;
        background-color: var(--navbar-item-hover-bg, rgba(0,0,0,.05)) !important;
    }

    .navbar .profile-switcher i {
        color: inherit !important;
    }

/* Dropdown por encima de la navbar */
.navbar .dropdown-menu {
    z-index: 1080;
}

/* Mantener todo en UNA fila en la navbar */
.navbar .container-fluid {
    flex-wrap: nowrap;
}

/* Saludo largo: truncado */
.min-w-0 {
    min-width: 0 !important;
}

.brand-greeting {
    min-width: 0;
}

.greeting,
#perfilDropdown {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Evita hacks de posición que aumentaban altura */
#perfilDropdown {
    position: static !important;
    top: auto !important;
}

/* Fix móvil: logo siempre a la izquierda y tamaños */
@media (max-width: 991.98px) {
    header .navbar .container-fluid {
        justify-content: flex-start !important;
    }

    header .navbar .navbar-brand {
        margin-right: 0 !important;
        flex: 0 0 auto !important;
    }

    header .navbar .navbar-actions {
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }

    header .navbar .navbar-brand img.cm-logo {
        display: block !important;
    }
}

/* Logo */
.cm-logo {
    height: 50px;
}

@media (max-width: 575.98px) {
    .cm-logo {
        height: 56px;
    }

    .navbar-toggler {
        margin-left: .25rem;
    }

    :root {
        --navbar-height: 78px; /* para que el layout reserve más alto en XS */
    }
}

/* Navbar: fondo a todo el ancho scrolleable */
header .navbar {
    position: relative; /* ancla para el ::before */
    z-index: 1001; /* por encima del contenido */
}

    header .navbar::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--navbar-item-bg, #f8f9fa);
        box-shadow: 0 0 0 100vmax var(--navbar-item-bg, #f8f9fa);
        clip-path: inset(0 -100vmax);
        z-index: -1;
    }

/* Navbar sticky en móvil */
@media (max-width: 991.98px) {
    header .navbar {
        position: sticky;
        top: 0;
    }
}

/* Campanita (notificaciones) */
#btnPendingEmails {
    position: relative !important;
}

#badgePendingEmails {
    min-width: 1.1rem !important;
    height: 1.1rem !important;
    font-size: .65rem !important;
    line-height: 1.1rem !important;
    padding: 0 .2rem !important;
    left: 75% !important;
    top: .38rem !important;
    transform: translate(-60%, -30%) !important;
}

/* =========================================
   3. Offcanvas comunes (#helpOffcanvas, #pendingOffcanvas)
   ========================================= */

#helpOffcanvas.offcanvas,
#pendingOffcanvas.offcanvas {
    --bs-offcanvas-width: 400px !important;
    width: var(--bs-offcanvas-width) !important;
}

@media (min-width: 768px) {
    #helpOffcanvas.offcanvas,
    #pendingOffcanvas.offcanvas {
        --bs-offcanvas-width: 40vw !important;
    }
}

/* Offcanvas Acciones/Novedades: iconos de tarjetas */
#pendingOffcanvas .pending-card .status-icon,
#pendingOffcanvas .pending-card .news-status-icon,
#pendingOffcanvas .pending-card .pin-icon,
#pendingOffcanvas .pending-card .news-pin-icon,
#pendingOffcanvas .pending-card .trash-icon,
#pendingOffcanvas .pending-card .news-trash-icon {
    position: absolute !important;
    top: .5rem !important;
    opacity: .9 !important;
    cursor: pointer !important;
}

#pendingOffcanvas .pending-card .status-icon,
#pendingOffcanvas .pending-card .news-status-icon {
    right: 3.5rem !important;
}

#pendingOffcanvas .pending-card .pin-icon,
#pendingOffcanvas .pending-card .news-pin-icon {
    right: 2rem !important;
}

#pendingOffcanvas .pending-card .trash-icon,
#pendingOffcanvas .pending-card .news-trash-icon {
    right: .5rem !important;
}

    #pendingOffcanvas .pending-card .trash-icon:hover,
    #pendingOffcanvas .pending-card .news-trash-icon:hover {
        opacity: 1 !important;
    }

#pendingOffcanvas .pending-card.forum-unread .message a {
    color: inherit;
}

#pendingOffcanvas .pending-card.forum-unread:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.07);
}

/* Utilidades de color para iconos (con fallbacks de tema) */
.icon-success {
    color: var(--color-success, #198754) !important;
}

.icon-warning {
    color: var(--color-warning, #ffc107) !important;
}

.icon-danger {
    color: var(--color-danger, #dc3545) !important;
}

.icon-muted {
    color: rgba(0,0,0,.5) !important;
}

/* Espaciados rápidos para iconos */
.icon-left {
    margin-right: .25rem !important;
}

.icon-right {
    margin-left: .25rem !important;
}

/* Tabs “Acciones pendientes” compactas en XS/SM */
@media (max-width: 575.98px) {
    #pendingTabs {
        display: flex;
        flex-wrap: nowrap;
        gap: .25rem;
        padding-left: .75rem;
        padding-right: .75rem;
        overflow: hidden;
    }

        #pendingTabs .nav-item {
            flex: 1 1 0;
        }

        #pendingTabs .nav-link {
            width: 100%;
            text-align: center;
            padding: .4rem .5rem;
            font-size: .875rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #pendingTabs .badge {
            margin-left: .25rem;
        }
}

/* =========================================
   4. Layout general: body + footer fijo
   ========================================= */

body {
    margin: 0;
    padding-bottom: calc(var(--footer-height, 60px) + 12px) !important;
}

main[role="main"] {
    min-height: calc(100vh - var(--footer-height, 60px) - var(--navbar-height, 70px));
}

.footer {
    position: fixed !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    line-height: 60px !important;
    background-color: var(--footer-bg, #f8f9fa) !important;
}

/* Footer responsivo, una sola línea y escalado elegante */
footer.footer .container.footer-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* profesional: alineado a la izquierda */
    gap: .5rem !important;
    flex-wrap: nowrap !important; /* nunca salta de línea */
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* Bloque de marca: se trunca solo si hace falta */
footer.footer .footer-brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 65% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

footer.footer .brand-short {
    display: none;
}

/* Enlaces compactos y pegados al texto */
footer.footer .footer-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    flex: 0 0 auto !important;
    text-decoration: none !important;
}

footer.footer .footer-sep {
    opacity: .55;
}

/* LG+ (≥992px) */
@media (min-width: 992px) {
    footer.footer .footer-brand {
        max-width: none !important;
    }

    /* Opcional: footer centrado en escritorio */
    footer.footer .container.footer-bar {
        justify-content: center !important;
    }
}

/* MD (≥768 y <992): acorta cookies a “Cookies” si hace falta */
@media (max-width: 991.98px) {
    footer.footer .cookies .label-full {
        display: none;
    }

    footer.footer .cookies .label-medium {
        display: inline;
    }
}

/* SM (≥576 y <768): “Privacidad”→“Priv.” */
@media (max-width: 767.98px) {
    footer.footer .privacy .label-full {
        display: none;
    }

    footer.footer .privacy .label-short {
        display: inline;
    }
}

/* XS (<576): usa marca corta */
@media (max-width: 575.98px) {
    footer.footer .brand-full {
        display: none;
    }

    footer.footer .brand-short {
        display: inline;
    }
}

/* XXS (<380): iconos solo */
@media (max-width: 379.98px) {
    footer.footer .footer-link .label-full,
    footer.footer .footer-link .label-medium,
    footer.footer .footer-link .label-short {
        display: none !important;
    }

    footer.footer .footer-sep {
        display: none;
    }
}

/* =========================================
   5. Overlay de sesión
   ========================================= */

#session-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20000;
}

#session-dialog {
    background: var(--color-bg, #fff);
    color: var(--text-color, #333);
    border: 1px solid var(--color-primary, #A0522D);
    border-radius: 16px;
    padding: 20px 22px;
    max-width: 520px;
    width: calc(100% - 48px);
    box-shadow: 0 16px 50px rgba(0,0,0,.35);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

    #session-dialog .title {
        color: var(--color-primary, #A0522D);
        font-weight: 700;
        font-size: 1.15rem;
        margin-bottom: .25rem;
    }

    #session-dialog .subtitle {
        opacity: .85;
        margin-bottom: .75rem;
    }

    #session-dialog .time {
        font-variant-numeric: tabular-nums;
        font-weight: 800;
        color: var(--color-warning, #FF8C00);
    }

    #session-dialog .bar {
        margin-top: .75rem;
        height: 10px;
        width: 100%;
        background: var(--color-light, #F5F5DC);
        border: 1px solid var(--color-accent, #D2B48C);
        border-radius: 999px;
        overflow: hidden;
    }

        #session-dialog .bar > div {
            height: 100%;
            background: var(--color-warning, #FF8C00);
            width: 100%;
            transition: width .2s linear;
        }

    #session-dialog .actions {
        margin-top: 1rem;
        display: flex;
        gap: .5rem;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    #session-dialog .btn {
        border: 1px solid transparent;
        border-radius: 12px;
        padding: .5rem .85rem;
        cursor: pointer;
        font-weight: 600;
    }

    #session-dialog .btn-keep {
        background: var(--color-success, #228B22);
        color: #fff;
        border-color: var(--color-success, #228B22);
    }

        #session-dialog .btn-keep:hover {
            background: var(--color-success-hover, #1E7D1E);
        }

    #session-dialog .btn-dismiss {
        background: var(--color-accent, #D2B48C);
        color: #fff;
        border-color: var(--color-accent, #D2B48C);
    }

        #session-dialog .btn-dismiss:hover {
            background: var(--color-accent-hover, #C19A6B);
        }

/* =========================================
   6. Tarjetas pendientes + badges de categoría
   ========================================= */

#pendingOffcanvas .pending-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#pendingOffcanvas .pending-card {
    margin: 0;
}

.pending-container .ap-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    line-height: 1.4;
    white-space: nowrap;
}

.pending-container .ap-badge--foro,
.pending-container .ap-badge--info {
    background: #e0f2fe;
    color: #075985;
    border-color: #bae6fd;
}

.pending-container .ap-badge--danger {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.pending-container .ap-badge--warn {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.pending-container .ap-badge--success {
    background: #dcfce7;
    color: #14532d;
    border-color: #bbf7d0;
}

.pending-container .ap-badge--muted {
    background: #f3f4f6;
    color: #374151;
    border-color: #e5e7eb;
}

.pending-container .pending-card .topline {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
}

/* =========================================
   7. Offcanvas menú móvil (#mobileMenu)
   ========================================= */

/* Offcanvas siempre en flujo */
#mobileMenu .nav-item.dropdown {
    position: static !important;
    z-index: 2 !important;
}

#mobileMenu .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    margin: .25rem 0 .5rem !important;
    padding: .25rem 0 !important;
    display: none !important;
    overflow: visible !important;
}

    #mobileMenu .dropdown.show > .dropdown-menu,
    #mobileMenu .dropdown-menu.show {
        display: block !important;
    }

    #mobileMenu .dropdown-menu > li {
        display: block !important;
        list-style: none !important;
        padding: .5rem 1rem !important;
    }

        #mobileMenu .dropdown-menu > li form {
            margin: 0 !important;
        }

        #mobileMenu .dropdown-menu > li button {
            all: unset;
            display: block;
            width: 100%;
            padding: .5rem 0;
            cursor: pointer;
        }

/* Offcanvas mobile menu: fondo coherente con navbar */
#mobileMenu .offcanvas-header,
#mobileMenu .offcanvas-body {
    background: var(--oc-bg) !important;
    color: var(--oc-fg) !important;
}

    #mobileMenu .offcanvas-body > .navbar-nav {
        background: var(--oc-bg) !important;
        border: 1px solid var(--oc-border) !important;
        border-radius: var(--oc-radius) !important;
        box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
        padding: .35rem !important;
        gap: .15rem !important;
    }

#mobileMenu .nav-link {
    color: var(--oc-fg) !important;
    padding: .55rem .9rem !important;
    border-radius: var(--oc-item-radius) !important;
    line-height: 1.15 !important;
    font-size: .95rem !important;
}

    #mobileMenu .nav-link:hover,
    #mobileMenu .nav-link:focus {
        background: var(--oc-sub-hover) !important;
    }

/* Dropdowns internos del menú móvil */
#mobileMenu .dropdown-menu {
    margin: .2rem 0 .4rem !important;
    padding: .25rem 0 !important;
    background: var(--oc-bg) !important;
    color: var(--oc-fg) !important;
    border: 1px solid var(--oc-border) !important;
    border-radius: calc(var(--oc-radius) - 2px) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
}

    #mobileMenu .dropdown-menu .dropdown-item,
    #mobileMenu .dropdown-menu a.dropdown-item,
    #mobileMenu .dropdown-menu button.dropdown-item {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        color: var(--oc-fg) !important;
        padding: .45rem .9rem !important;
        font-size: .95rem !important;
        line-height: 1.15 !important;
        border-radius: .35rem !important;
    }

        #mobileMenu .dropdown-menu .dropdown-item:hover,
        #mobileMenu .dropdown-menu .dropdown-item:focus {
            background: var(--oc-sub-hover) !important;
        }

    #mobileMenu .dropdown-menu .dropdown-header {
        color: var(--oc-fg) !important;
        background: var(--oc-bg) !important;
        opacity: .75 !important;
        padding: .4rem .9rem .25rem !important;
        font-size: .85rem !important;
        font-weight: 600 !important;
    }

    #mobileMenu .dropdown-menu .dropdown-divider {
        margin: .25rem 0 !important;
        opacity: .15 !important;
    }

/* Submenús de segundo nivel en el offcanvas móvil */
#mobileMenu .subdropdown-menu {
    position: relative !important;
    display: none !important;
    background: var(--oc-bg) !important;
    color: var(--oc-sub-fg) !important;
    border: 1px solid var(--oc-border) !important;
    border-radius: .5rem !important;
    box-shadow: none !important;
    margin: .25rem 0 .5rem .75rem !important;
    padding: .2rem 0 !important;
}

    #mobileMenu .subdropdown-menu.show {
        display: block !important;
    }

    #mobileMenu .subdropdown-menu::before {
        content: "";
        position: absolute;
        left: .4rem;
        top: .35rem;
        bottom: .35rem;
        width: 3px;
        border-radius: 2px;
        background: var(--oc-sub-accent);
    }

    #mobileMenu .subdropdown-menu .dropdown-item {
        padding: .4rem .8rem !important;
        font-size: .92rem !important;
        border-radius: .35rem !important;
    }

        #mobileMenu .subdropdown-menu .dropdown-item:hover,
        #mobileMenu .subdropdown-menu .dropdown-item:focus,
        #mobileMenu .subdropdown-menu .dropdown-item:active {
            background: var(--oc-sub-hover) !important;
            color: var(--oc-sub-fg) !important;
        }

/* Contraste de texto en submenús del offcanvas */
#mobileMenu {
    --oc-fg: var(--submenu-text-color, #212529) !important;
    --oc-sub-fg: var(--submenu-text-color, #212529) !important;
}

    #mobileMenu .dropdown-menu .dropdown-item,
    #mobileMenu .subdropdown-menu .dropdown-item {
        color: var(--oc-sub-fg) !important;
    }

        #mobileMenu .dropdown-menu .dropdown-item i,
        #mobileMenu .subdropdown-menu .dropdown-item i {
            color: inherit !important;
        }

    #mobileMenu .subdropdown-menu {
        background: var(--oc-bg) !important;
    }

        #mobileMenu .subdropdown-menu .dropdown-item {
            background: var(--oc-bg) !important;
            color: var(--oc-sub-fg) !important;
        }

    /* Campanita en el offcanvas móvil */
    #mobileMenu #btnPendingEmailsOC {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        padding: .5rem 1rem;
        position: relative;
    }

        #mobileMenu #btnPendingEmailsOC i.bi-bell {
            line-height: 1;
            font-size: 1.2rem;
        }

    #mobileMenu #badgePendingEmailsOC {
        left: 75%;
        top: .38rem;
        transform: translate(-60%, -30%);
        position: absolute;
    }

    /* Oculta la campanita duplicada dentro del listado del offcanvas */
    #mobileMenu .navbar-nav #liBell {
        display: none !important;
    }

    /* Menú "Hola, XXXXX" dentro del offcanvas: evitar desbordes */
    #mobileMenu #liGreeting .dropdown-menu {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 220px) !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

        #mobileMenu #liGreeting .dropdown-menu,
        #mobileMenu #liGreeting .dropdown-menu * {
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

            #mobileMenu #liGreeting .dropdown-menu .dropdown-item,
            #mobileMenu #liGreeting .dropdown-menu a,
            #mobileMenu #liGreeting .dropdown-menu button,
            #mobileMenu #liGreeting .dropdown-menu label,
            #mobileMenu #liGreeting .dropdown-menu .form-check-label {
                display: block !important;
                white-space: normal !important;
                overflow-wrap: anywhere !important;
                word-break: break-word !important;
                line-height: 1.25 !important;
                font-size: .95rem !important;
            }

            #mobileMenu #liGreeting .dropdown-menu .form-check,
            #mobileMenu #liGreeting .dropdown-menu form {
                width: 100% !important;
                margin: 0 !important;
            }

            #mobileMenu #liGreeting .dropdown-menu .d-flex > * {
                min-width: 0 !important;
            }

            #mobileMenu #liGreeting .dropdown-menu li {
                padding: .35rem .75rem !important;
            }

/* =========================================
   8. Multinivel en escritorio (≥992px)
   ========================================= */

/* Submenú (2º nivel) */
.subdropdown-menu.show {
    display: block !important; /* base necesaria también en escritorio */
}

@media (min-width: 992px) {
    .navbar .dropdown-menu > .dropdown {
        position: relative !important;
    }

        .navbar .dropdown-menu > .dropdown > .subdropdown-menu {
            display: none;
            position: absolute !important;
            top: 0 !important;
            left: 100% !important;
            margin-left: .25rem !important;
            min-width: 220px;
            z-index: 1080;
        }

            .navbar .dropdown-menu > .dropdown > .subdropdown-menu.show {
                display: block !important;
            }

    /* Panel de submenú con esquinas redondeadas */
    .navbar.app-navbar .subdropdown-menu {
        border-radius: 12px !important;
        border: 1px solid var(--bs-border-color) !important;
        box-shadow: 0 12px 28px rgba(0,0,0,.12) !important;
        overflow: visible !important;
    }
}

/* Submenú (3er nivel) */
@media (min-width: 992px) {
    .navbar .subdropdown-menu > .dropdown {
        position: relative !important;
    }

        .navbar .subdropdown-menu > .dropdown > .subdropdown-menu {
            display: none;
            position: absolute !important;
            top: 0 !important;
            left: 100% !important;
            margin-left: .25rem !important;
            min-width: 220px;
            z-index: 1080;
        }

            .navbar .subdropdown-menu > .dropdown > .subdropdown-menu.show {
                display: block !important;
            }

            .navbar .subdropdown-menu > .dropdown > .subdropdown-menu.submenu-flip-x {
                left: auto !important;
                right: 100% !important;
                margin-left: 0 !important;
                margin-right: .25rem !important;
            }
}

/* =========================================
   9. Badges de rol en el saludo
   ========================================= */

.greeting-badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .85em;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    background: var(--navbar-item-hover-bg, rgba(0,0,0,.06));
    color: var(--navbar-item-hover-text-color, var(--navbar-text-color, inherit));
    border: 1px solid var(--submenu-border-color, rgba(0,0,0,.12));
    vertical-align: baseline;
}

.badge-role {
    border: 1px solid transparent;
}

.badge-role-alumno {
    background: #e0f2fe;
    color: #075985;
    border-color: #bae6fd;
}

.badge-role-profesor {
    background: #ede9fe;
    color: #5b21b6;
    border-color: #ddd6fe;
}

.badge-role-coordinador {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fed7aa;
}

.badge-role-administrador {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

/* =========================================
   10. NAVBAR “PRO” (layout app)
   ========================================= */

.navbar.app-navbar {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 14px !important;
    background: var(--bs-body-bg) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04) !important;
    padding-block: .35rem !important;
    margin-block: 0 .75rem; /* sin margen superior para pegar al pseudo-fondo */
}

.app-navbar-container {
    padding-inline: .75rem;
}

/* Todo el texto de la navbar usa el color de los items del navbar */
.navbar.app-navbar,
.navbar.app-navbar .navbar-brand,
.navbar.app-navbar .nav-link,
.navbar.app-navbar .navbar-actions .btn,
.navbar.app-navbar .navbar-actions .nav-link {
    color: var(--navbar-item-text-color, #ffffff) !important;
}

    /* Iconos dentro del navbar: heredan el mismo color */
    .navbar.app-navbar i.bi,
    .navbar.app-navbar .btn-icon i.bi {
        color: inherit !important;
    }

    /* Links de navegación */
    .navbar.app-navbar .navbar-brand {
        font-weight: 700;
        letter-spacing: .2px;
    }

    .navbar.app-navbar .nav-link {
        position: relative;
        border-radius: 999px !important;
        padding: .45rem .75rem !important;
        transition: background-color .15s ease, color .15s ease, transform .08s ease;
    }

        .navbar.app-navbar .nav-link:hover,
        .navbar.app-navbar .nav-link:focus {
            background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
            text-decoration: none;
        }

        .navbar.app-navbar .nav-link:active {
            transform: translateY(1px);
        }

        .navbar.app-navbar .nav-link.active,
        .navbar.app-navbar .nav-link[aria-current="page"] {
            background: color-mix(in srgb, var(--bs-primary) 18%, transparent);
            color: var(--navbar-item-text-color, #ffffff) !important;
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary) 24%, transparent);
        }

        .navbar.app-navbar .nav-link .bi {
            margin-right: .35rem;
            opacity: .9;
        }

    /* Botones y acciones en navbar */
    .navbar.app-navbar .navbar-actions .btn,
    .navbar.app-navbar .navbar-actions .nav-link {
        margin-left: .25rem;
    }

    .navbar.app-navbar .btn {
        border-radius: 999px !important;
    }

    /* Botones tipo .btn-light (“Contacto / Salir”) transparentes pero con texto de navbar */
    .navbar.app-navbar .navbar-actions .btn.btn-light,
    .navbar.app-navbar .navbar-actions .btn.btn-outline-light {
        background-color: transparent !important;
        border-color: transparent !important;
        color: var(--navbar-item-text-color, #ffffff) !important;
    }

    /* Dropdowns en la navbar pro */
    .navbar.app-navbar .dropdown-menu {
        border: 1px solid var(--bs-border-color);
        border-radius: 12px !important;
        box-shadow: 0 12px 28px rgba(0,0,0,.12);
        padding: .35rem;
        background: var(--bs-body-bg);
    }

    .navbar.app-navbar .dropdown-item {
        border-radius: 10px !important;
        padding: .45rem .65rem;
    }

        .navbar.app-navbar .dropdown-item:hover,
        .navbar.app-navbar .dropdown-item:focus {
            background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
        }

    /* Bordes de los paneles de menú en el navbar (escritorio) */
    .navbar.app-navbar .dropdown-menu,
    .navbar.app-navbar .subdropdown-menu {
        border: 1px solid var(--color-primary) !important;
    }

    /* Inputs de búsqueda en navbar */
    .navbar.app-navbar .form-control {
        border-radius: 999px !important;
        border-color: var(--bs-border-color);
    }

        .navbar.app-navbar .form-control:focus {
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary) 28%, transparent);
        }

    /* Avatar en navbar */
    .navbar.app-navbar .avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 0 0 1px var(--bs-border-color);
    }

    /* Navbar sticky (dentro de layout pro) */
    .navbar.app-navbar.is-sticky {
        position: sticky;
        top: .75rem;
        z-index: 1030;
    }

@media (max-width: 575.98px) {
    .navbar.app-navbar {
        border-radius: 12px !important;
    }

        .navbar.app-navbar .nav-link {
            padding: .4rem .6rem !important;
        }
}

/* CTA del navbar (botón destacado) */
.cta-enter {
    letter-spacing: .2px;
    padding: .35rem .9rem;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

    .cta-enter:hover {
        transform: translateY(-1px);
    }

    .cta-enter:focus {
        outline: none;
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
    }

.btn-light.cta-enter {
    background: #fff;
    border-color: #E0E3E7;
}

    .btn-light.cta-enter:hover {
        background: #fff;
        box-shadow: 0 6px 18px rgba(0,0,0,.08);
    }

@keyframes breathe {
    0% {
        box-shadow: 0 0 0 0 rgba(66,133,244,.28);
    }

    100% {
        box-shadow: 0 0 0 .85rem rgba(66,133,244,0);
    }
}

.cta-enter.breathe {
    animation: breathe 1.8s ease-out infinite;
}

/* Versión invertida del logo solo en la navbar (para fondo oscuro/morado) */
header .navbar .navbar-brand img.cm-logo {
    filter: brightness(0) invert(1);
}

/* =========================================
   11. Footer con color del fondo de la navbar
   ========================================= */

/* Fondo del footer y color base del texto (mismo tono que fondo de navbar) */
footer.footer {
    background: var(--footer-bg, #f8f8f8);
    color: var(--navbar-item-bg, #4B0082) !important;
}

    /* Texto de marca, enlaces, separadores, estado e iconos */
    footer.footer .footer-brand,
    footer.footer .footer-brand span,
    footer.footer .footer-link,
    footer.footer .footer-link span,
    footer.footer .footer-sep,
    footer.footer .footer-status,
    footer.footer .footer-status *:not(.badge), /* excluimos badge para tratarlo aparte */
    footer.footer i.bi {
        color: var(--navbar-item-bg, #4B0082) !important;
    }

    /* Enlaces del footer (normal y hover) */
    footer.footer a,
    footer.footer a:link,
    footer.footer a:visited {
        color: var(--navbar-item-bg, #4B0082) !important;
        text-decoration: none;
    }

        footer.footer a:hover,
        footer.footer a:focus {
            color: var(--navbar-item-bg, #4B0082) !important;
            text-decoration: underline;
        }

/* Tipografía y separadores del footer */
.footer-bar {
    font-size: .95rem;
}

.footer-sep {
    opacity: .5;
}

.footer-link {
    text-decoration: none;
}

/* Marcas responsivas (texto largo / corto) */
.brand-full {
    display: inline;
}

.brand-short {
    display: none;
}

.label-full {
    display: inline;
}

.label-medium {
    display: none;
}

.label-short {
    display: none;
}

@media (max-width: 575.98px) {
    .brand-full {
        display: none;
    }

    .brand-short {
        display: inline;
    }

    .label-full {
        display: none;
    }

    .label-medium {
        display: inline;
    }
}

@media (max-width: 400px) {
    .label-medium {
        display: none;
    }

    .label-short {
        display: inline;
    }
}

/* Punto “vibrante” (estado en línea) con color de la navbar */
.footer-status {
    white-space: nowrap;
}

.live-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--navbar-item-bg, #4B0082);
    box-shadow: 0 0 0 0 rgba(75, 0, 130, .6);
    display: inline-block;
    animation: cm-ping 1.8s infinite;
}

@keyframes cm-ping {
    0% {
        box-shadow: 0 0 0 0 rgba(75, 0, 130, .6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(75, 0, 130, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(75, 0, 130, 0);
    }
}











/* =========================================
   12. Botones “pill” y solapas redondeadas CM
   ========================================= */

/* Botones tipo pastilla reutilizables */
.btn-pill,
.btn.cm-pill,
.cm-pill .btn {
    border-radius: 999px !important;
    padding: .4rem .9rem !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
}

    /* Versión pequeña coherente (por si usas .btn-sm) */
    .btn-pill.btn-sm,
    .btn.cm-pill.btn-sm,
    .cm-pill .btn.btn-sm {
        padding: .3rem .7rem !important;
        font-size: .85rem !important;
    }

/* Grupo de botones “elegantes” (como en Asistencias) */
.btn-elegant-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

    .btn-elegant-group .btn {
        border-radius: 999px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        font-weight: 500;
    }

/* Tabs tipo pill, mismas que usas para cursos / filtros
   (añade la clase .cm-tabs al <ul class="nav nav-tabs">) */
.nav-tabs.cm-tabs {
    border: 0 !important;
    background: var(--bs-body-bg, #fff) !important;
    padding: .25rem !important;
    border-radius: 999px !important;
    box-shadow: var(--cm-shadow) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .25rem !important;
}

    .nav-tabs.cm-tabs .nav-link {
        border-radius: 999px !important;
        border: 1px solid transparent !important;
        padding: .35rem .9rem !important;
        font-weight: 500 !important;
        color: var(--bs-body-color, #212529) !important;
        background: transparent !important;
        margin-bottom: 0 !important;
    }

        .nav-tabs.cm-tabs .nav-link:hover,
        .nav-tabs.cm-tabs .nav-link:focus {
            background: var(--navbar-item-hover-bg, rgba(0,0,0,.04)) !important;
            border-color: rgba(0,0,0,.04) !important;
            text-decoration: none !important;
        }

        /* Estado activo: pill rellena con el color del tema */
        .nav-tabs.cm-tabs .nav-link.active,
        .nav-tabs.cm-tabs .nav-link[aria-current="page"] {
            background: var(--cm-primary, #0d6efd) !important;
            color: #fff !important;
            border-color: var(--cm-primary, #0d6efd) !important;
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--cm-primary, #0d6efd) 28%, transparent);
        }

/* Si las tabs van pegadas a la derecha (como cursos en Asistencias) */
.promos-actions .nav-tabs.cm-tabs {
    margin-left: auto;
}

/* Tabs estrechas tipo “Acciones pendientes” (manteniendo pill) */
#pendingTabs.nav-tabs,
#pendingTabs .nav-link {
    border-bottom: 0 !important;
}

#pendingTabs .nav-link {
    border-radius: 999px !important;
    border: 1px solid transparent !important;
}

/* Badges pequeños dentro de las tabs  */
.nav-tabs.cm-tabs .badge,
#pendingTabs .badge {
    border-radius: 999px !important;
    font-size: .75rem !important;
    padding: .15rem .5rem !important;
}

/* Botones pill “claros” en headers */
.cm-header .btn-pill-header,
.cm-header .btn.btn-outline-light {
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .3rem .8rem;
}

/* En móviles, los grupos de pills se apilan en columna */
/* @media (max-width: 576.98px) {
    .btn-elegant-group {
        flex-direction: column;
        align-items: stretch;
    }

        .btn-elegant-group .btn {
            width: 100%;
        }

    .nav-tabs.cm-tabs {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-inline: .3rem;
    }
} */

/* Modal esquinas redondeadas */

.modal-content {
    border-radius: 1rem !important;
    overflow: hidden;
    border: none !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.25) !important; /* opcional, más flotante */
}




.admision-chat {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 320px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    font-size: 0.85rem;
    z-index: 1040;
}

.admision-chat-header {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
    background-color: #f8f9fa;
    border-radius: 1rem 1rem 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.admision-chat-title {
    font-weight: 600;
}

.admision-chat-body {
    padding: 0.5rem 0.75rem;
    overflow-y: auto;
    flex: 1;
    background-color: #ffffff;
}

.admision-chat-footer {
    padding: 0.5rem 0.75rem 0.6rem;
    border-top: 1px solid rgba(0,0,0,.05);
    background-color: #f8f9fa;
    border-radius: 0 0 1rem 1rem;
}

    .admision-chat-footer textarea {
        resize: none;
    }

.admision-chat-message {
    margin-bottom: 0.35rem;
    display: flex;
}

    .admision-chat-message .bubble {
        padding: 0.35rem 0.6rem;
        border-radius: 0.75rem;
        max-width: 100%;
        display: inline-block;
    }

    /* Mensaje del coordinador */
    .admision-chat-message.coordinador {
        justify-content: flex-start;
    }

        .admision-chat-message.coordinador .bubble {
            background-color: #e9f3ff;
            color: #0c3c78;
        }

    /* Mensaje del alumno */
    .admision-chat-message.alumno {
        justify-content: flex-end;
    }

        .admision-chat-message.alumno .bubble {
            background-color: #0d6efd;
            color: #ffffff;
        }

/* Estado reducido (colapsado) */
.admision-chat.collapsed .admision-chat-body,
.admision-chat.collapsed .admision-chat-footer {
    display: none;
}

.admision-chat.collapsed {
    width: 220px;
}

@media (max-width: 767.98px) {
    .admision-chat {
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
    }
}