/* NAVIGATION
   -------------------------------------------
   Estilos visuales para icon_sidebar y topbar
   ------------------------------------------- */
:root {
    /* Variables para navegacion - Dimensiones */
    --icon-sidebar-width: 56px;
    --icon-sidebar-expanded: 210px;
    --topbar-height: 64px;
    --footer-height: 50px;
    --navigation-transition: .15s ease-in-out;
    --icon-sidebar-z-index: 99;
    --footer-z-index: 120;
    --floating-components-z-index: 121;

    /* Variables para navegacion - Sidebar Principal (basado en color plataforma) */
    --icon-sidebar-bg: var(--variable-color-plataforma);
    --icon-sidebar-text: var(--variable-color-plataforma-contraste);
    --icon-sidebar-hover-bg: var(--variable-color-plataforma-gamma2);
    --icon-sidebar-selected-bg: var(--variable-color-plataforma-gamma3);

    /* Variables para navegacion - Sidebar Secundaria Front (basado en color curso/aula) */
    --content-sidebar-bg: color-mix(in srgb, var(--variable-color-curso) 3%, #ffffff);
    --content-sidebar-text: #333333;
    --content-sidebar-hover-bg: color-mix(in srgb, var(--variable-color-curso) 12%, #ffffff);
    --content-sidebar-active-bg: color-mix(in srgb, var(--variable-color-curso) 18%, #ffffff);
    --content-sidebar-border: color-mix(in srgb, var(--variable-color-curso) 10%, #ffffff);

    /* Variables para navegacion - Topbar */
    --topbar-bg: var(--variable-color-plataforma);
    --topbar-text: var(--variable-color-plataforma-contraste);
    --topbar-border: var(--variable-color-plataforma-gamma2);
}

/* ---------------------------------
   #Icon SIDEBAR (Navegacion Global)
   --------------------------------- */
.icon-sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    width: var(--icon-sidebar-width);
    height: calc(100% - var(--topbar-height));
    background-color: var(--icon-sidebar-bg);
    transition: width var(--navigation-transition);
    overflow: hidden;
    z-index: var(--icon-sidebar-z-index);
}
/* Expansion on hover: solo se dispara al pasar sobre el glifo del icono (.icon),
   no sobre toda el area del item ni la columna vacia del sidebar. Evita
   expansiones accidentales al rozar el borde izquierdo o los margenes del item.
   Aplica a frontend y administracion en todos los viewports desktop.
   El hover es transitorio (overlay); el pin permanente queda restringido a >=1660px. */
.icon-sidebar:has(.icon-nav-item .icon:hover) { width: var(--icon-sidebar-expanded); }

/* Header con boton cerrar (solo visible en movil) */
.icon-sidebar-header { display: none; }

/* Sidebar fijada: mantiene ancho expandido */
.icon-sidebar.pinned { width: var(--icon-sidebar-expanded); }

.icon-sidebar.pinned .icon-nav-item .icon-label { opacity: 1; }

.icon-sidebar.pinned .icon-nav-item .icon-external-link {
    display: inline;
    opacity: .6;
}
/* Pin button (oculto por defecto, visible solo en desktop via media query) */
.icon-sidebar-pin { display: none; }

/* Ocultar pin button en backend */
body.backend .icon-sidebar-pin { display: none; }

/* Ocultar boton toggle y overlay cuando no hay sidebar (usuario no logueado) */
body:not(:has(.icon-sidebar)) .sidebar-toggle-float,
body:not(:has(.icon-sidebar)) .sidebar-overlay { display: none; }

/* --- Navigation container (con iconos) --- */
.icon-nav {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    user-select: none;
}
/* Separar el item de administracion al final */
.icon-nav-item[data-section="admin"] { margin-top: auto; }

/* Solo aplicar margen cuando footer es visible */
.icon-sidebar.footer-visible .icon-nav-item[data-section="admin"] { margin-bottom: var(--footer-height); }

/* --- Navigation items --- */
.icon-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 12px 12px;
    text-decoration: none;
    white-space: nowrap;
    border-left: 3px solid transparent;
    color: var(--icon-sidebar-text);
}
.icon-nav-item:hover { background-color: var(--icon-sidebar-hover-bg); }

.icon-nav-item:active {
    border-left-color: transparent;
    background-color: transparent;
}
/* Estado selected - Cuando estamos en esa seccion */
.icon-nav-item.selected {
    font-weight: 700;
    border-left-color: var(--variable-color-plataforma-contraste);
    background-color: var(--icon-sidebar-selected-bg);
}
.icon-nav-item.selected:hover { background-color: var(--icon-sidebar-hover-bg); }

.icon-nav-item .icon {
    flex-shrink: 0;
    min-width: 20px;
    font-size: 1.25rem;
    text-align: center;
}
/* Label - oculto por defecto, visible en hover del sidebar */
.icon-nav-item .icon-label {
    font-size: .875rem;
    font-weight: 400;
    opacity: 0;
    transition: opacity var(--navigation-transition);
}
.icon-sidebar:has(.icon-nav-item .icon:hover) .icon-nav-item .icon-label { opacity: 1; }

/* Badge (indicador visual - punto rojo) */
.icon-nav-item .badge {
    position: absolute;
    top: 8px;
    left: 28px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    font-size: 0;
    background-color: #e74c3c;
}
/* External link icon (para links que abren en nueva ventana) */
.icon-nav-item .icon-external-link {
    display: none;
    margin-left: auto;
    font-size: .75rem;
    color: var(--icon-sidebar-text);
    opacity: 0;
    transition: opacity var(--navigation-transition);
}
/* Mostrar icono cuando el sidebar esta expandido */
.icon-sidebar:has(.icon-nav-item .icon:hover) .icon-nav-item .icon-external-link {
    display: inline;
    opacity: .6;
}
/* Aumentar opacidad en hover del item */
.icon-sidebar:has(.icon-nav-item .icon:hover) .icon-nav-item:hover .icon-external-link { opacity: 1; }

/* --- Badge "NOVEDAD" para nuevas caracteristicas --- */
.new-feature-container { position: relative; }

.new-feature-badge {
    position: absolute;
    left: 10px;
    bottom: 8px;
    width: 8px;
    height: 8px;
    color: #1bec29;
    border: 2px solid var(--icon-sidebar-bg);
    border-radius: 50%;
    transition: opacity .4s ease;
    animation-name: badge-alert;
    animation-duration: 1.5s;
    animation-iteration-count: 2;
    animation-timing-function: ease-in-out;
    animation-delay: 1.3s;
}
/* Animacion de badge (mensajes no leidos y nueva caracteristica) */
/* Se repite solo 2 veces y luego para */
@keyframes badge-alert {
    0%,
    25%,
    50%,
    75%,
    100% { transform: scale(1); }

    12.5%,
    37.5%,
    62.5%,
    87.5% { transform: scale(1.2); }
}

/* -----------------------
   TOPBAR (Barra Superior)
   ----------------------- */
.topbar {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: calc(var(--topbar-height) + 1px);
    padding: 0 8px 0 14px;
    border-bottom: 1px solid var(--topbar-border);
    background-color: var(--topbar-bg);
    overflow-x: clip;
    overflow-y: visible;
    z-index: 100;
}
.topbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    color: var(--topbar-text);
}

/* --- Left section --- */
.topbar-left {
    display: flex;
    flex-shrink: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}
/* Logo */
.topbar-logo {
    display: block;
    height: calc(var(--topbar-height) - 14px);
    width: auto;
    border-radius: 4px;
}
.topbar-logo-link,
.topbar-logo-wrapper {
    display: flex;
    align-items: center;
}
.topbar-logo-link:hover { opacity: .8; }

/* Nombre instalacion */
.topbar-nombre-instalacion {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 8px;
    max-width: 276px;
    font-size: .938rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    user-select: none;
    border-radius: 4px;
    color: var(--topbar-text);
    transition: background-color .2s ease;
    overflow: hidden;
}
.topbar-nombre-instalacion:hover { background-color: rgba(255, 255, 255, .1); }

/* --- Center section (contiene al Breadcrumb) --- */
.topbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
    padding: 0 16px;
    overflow: visible;
}
/* --- Breadcrumb --- */
/* Contenedor */
.topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    font-size: .875rem;
    color: var(--topbar-text);
    overflow: visible;
    user-select: none;
}
.topbar-breadcrumb .breadcrumb-item {
    white-space: nowrap;
    text-decoration: none;
    color: var(--topbar-text);
}
.topbar-breadcrumb .breadcrumb_curso_name {
    min-width: 80px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}
.topbar-breadcrumb .breadcrumb-item:hover {
    cursor: pointer;
    text-decoration: underline;
}
.topbar-breadcrumb .breadcrumb-item.breadcrumb_curso_name:hover {
    text-decoration: none;
    cursor: default;
}
.topbar-breadcrumb .breadcrumb-separator {
    flex-shrink: 0;
    font-size: .625rem;
    opacity: .6;
}
.topbar-breadcrumb .breadcrumb-current,
.topbar-breadcrumb span.breadcrumb-item:last-child {
    min-width: 50px;
    font-weight: 700;
    text-overflow: ellipsis;
    opacity: 1;
    cursor: default;
    overflow: hidden;
}
.topbar-breadcrumb .breadcrumb-current:hover,
.topbar-breadcrumb span.breadcrumb-item:last-child:hover {
    text-decoration: none;
    cursor: default;
}

/* Nombre de aula en breadcrumb de administracion (sin selector desplegable).
   display:contents en el wrapper hace que sus hijos sean flex items directos del nav. */
.topbar-breadcrumb [data-breadcrumb-aula-context] { display: contents; }
.topbar-breadcrumb .breadcrumb_item_aula {
    min-width: 80px;
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--topbar-text);
}

/* Breadcrumb colapsable: ellipsis + dropdown overrides */
.topbar-breadcrumb .edu-breadcrumb-ellipsis-btn { padding: 2px 6px; }

.topbar-breadcrumb .edu-breadcrumb-ellipsis-btn:hover { background: rgba(255, 255, 255, .1); }

.topbar-breadcrumb .edu-breadcrumb-dot { background: var(--topbar-text); }

.topbar-breadcrumb .edu-dropdown-wrapper { min-width: 0; }

.topbar-breadcrumb .edu-dropdown-wrapper::after { display: none; }

.topbar-breadcrumb .edu-dropdown-toggle { width: auto; }

.topbar-breadcrumb .edu-dropdown-menu {
    min-width: 180px;
    max-width: min(400px, 100vw - 20px);
    padding: 6px 0;
    margin-top: 10px;
}
.topbar-breadcrumb .edu-dropdown-item { margin: 2px 6px; }
.topbar-breadcrumb .edu-dropdown-link {
    height: auto;
    padding: 8px 10px;
    overflow: visible;
    font-size: .938rem;
    white-space: normal;
    border: 1px solid transparent;
    border-radius: 4px;
}
.topbar-breadcrumb .edu-dropdown-link:hover {
    border-color: #dadada;
    background-color: #fdfdfd;
}
.topbar-breadcrumb .edu-dropdown-current {
    font-weight: 600;
    color: #333333;
    cursor: default;
}

/* Selector nativo del aula (oculto, reemplazado por Choices.js) */
.topbar-breadcrumb .breadcrumb-selector-aula { display: none; }

/* Oculta el nav del breadcrumb mientras Choices.js inicializa (removida por callbackOnInit) */
.breadcrumb-loading { opacity: 0; }

/* Oculta el topbar-right mientras cargan las fuentes (removida por document.fonts.ready) */
.topbar-right-loading { opacity: 0; }

/* Selector de administracion (campus/sitio web) en breadcrumb */
.topbar-breadcrumb-selector-wrapper {
    position: relative;
    display: inline-block;
}
.breadcrumb-selector-admin {
    padding: 4px 24px 4px 8px;
    font-size: .875rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: var(--topbar-text);
    background-color: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.breadcrumb-selector-icon {
    position: absolute;
    top: 50%;
    right: 8px;
    font-size: .625rem;
    color: var(--topbar-text);
    transform: translateY(-50%);
    pointer-events: none;
}
.breadcrumb-selector-admin:hover {
    border-color: rgba(255, 255, 255, .3);
    background-color: rgba(255, 255, 255, .15);
}
.breadcrumb-selector-admin:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .4);
    background-color: rgba(255, 255, 255, .15);
}
.breadcrumb-selector-admin option {
    color: #333333;
    background-color: #ffffff;
}

/* --- Select CHOICES --- */
/* Estilos del selector de aulas en el breadcrumb (clases propias con aula_sel_*) */

/* Contenedor externo del widget Choices (wrapper general) */
.topbar-breadcrumb .aula_sel_container {
    position: relative;
    display: inline-block;
    flex-shrink: 1;
    min-width: 80px;
    max-width: 300px;
    margin: 0;
}
/* Caja visible clickeable que muestra el aula seleccionada */
.topbar-breadcrumb .aula_sel_inner {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    height: 40px;
    padding: 0 22px 0 8px;
    overflow: hidden;
    box-sizing: border-box;
    font-size: .875rem;
    color: var(--topbar-text);
    border: none;
    border-radius: 4px;
    background-color: transparent;
}
/* Hover sobre la caja visible */
.topbar-breadcrumb .aula_sel_inner:hover { background-color: rgba(255, 255, 255, .1); }

/* Icono mobile: oculto en desktop, visible en pantallas reducidas */
.topbar-breadcrumb .aula_sel_icon_mobile { display: none; }

/* Texto del item seleccionado dentro de la caja visible (modo single) */
.topbar-breadcrumb .aula_sel_list_single {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Oculta el triangulo nativo de Choices.js (choices.css) reemplazado por .aula_sel_arrow (FA icon) */
.topbar-breadcrumb .aula_sel_container::after { display: none; }

/* Icono FontAwesome fa-chevron-down inyectado via callbackOnCreateTemplates */
.topbar-breadcrumb .aula_sel_arrow {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-size: .625rem;
    color: var(--topbar-text);
    pointer-events: none;
    transition: transform .02s ease;
}
/* Rotacion del icono flecha cuando el dropdown esta abierto (aula_sel_open via evento showDropdown) */
.topbar-breadcrumb .aula_sel_container.aula_sel_open .aula_sel_arrow { transform: translateY(-50%) rotate(180deg); }

/* Color del texto del item seleccionado en la caja visible (aula_sel_item via callbackOnCreateTemplates) */
.topbar-breadcrumb .aula_sel_inner .aula_sel_item { color: var(--topbar-text); }

/* Panel desplegable con la lista de aulas */
.topbar-breadcrumb .aula_sel_dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    min-width: 280px;
    max-width: min(600px, 100vw - 20px);
    margin-top: 8px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    z-index: 200;
}
/* Contenedor scrollable de la lista de opciones dentro del dropdown */
.topbar-breadcrumb .aula_sel_dropdown .aula_sel_list {
    max-height: 300px;
    padding: 6px 0;
    overflow-y: auto;
}
/* Cada opcion de aula dentro del dropdown (aula_sel_item via callbackOnCreateTemplates) */
.topbar-breadcrumb .aula_sel_dropdown .aula_sel_item {
    margin: 2px 6px;
    padding: 8px 10px;
    white-space: normal;
    word-break: break-word;
    color: #333333;
    border-radius: 4px;
}
/* Opcion resaltada al hacer hover dentro del dropdown (is-highlighted: clase nativa de estado) */
.topbar-breadcrumb .aula_sel_dropdown .aula_sel_item.is-highlighted {
    border: 1px solid #dadada;
    background-color: #fdfdfd;
}
/* Opcion seleccionada/activa */
.topbar-breadcrumb .aula_sel_dropdown .aula_sel_item.is-selected {
    border: 1px solid var(--variable-color-plataforma);
    background-color: var(--variable-color-plataforma);
    color: var(--variable-color-plataforma-contraste);
}

/* Input de busqueda y lupa dentro del dropdown */
.topbar-breadcrumb .aula_sel_dropdown .aula_sel_search_icon {
    position: absolute;
    left: 10px;
    top: 16px;
    color: #626262;
    font-size: .938rem;
    pointer-events: none;
}
.topbar-breadcrumb .aula_sel_container .aula_sel_dropdown .aula_sel_input {
    width: 100% !important;
    padding: 12px 12px 12px 34px;
    border: none;
    border-bottom: 1px solid #c4c4c4;
    background: #ffffff none !important;
    box-sizing: border-box;
}


/* --- Right section - User --- */
.topbar-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
/* User info */
.topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .2s ease;
}
.topbar-user:hover { background-color: rgba(255, 255, 255, .1); }

.topbar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.topbar-user-icon { font-size: 2rem; }

.topbar-user-name {
    font-size: .875rem;
    font-weight: 400;
    color: var(--topbar-text);
    user-select: none;
}
.topbar-user-arrow {
    font-size: .625rem;
    opacity: .7;
    transition: transform .02s ease;
}
/* Login button (usuario no logueado) */
.topbar-btn-catalogo,
.topbar-btn-login {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: .875rem;
    font-weight: 400;
    text-decoration: none;
    color: var(--topbar-text);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, .1);
    transition: background-color .2s ease;
}
.topbar-btn-catalogo:hover,
.topbar-btn-login:hover { background-color: rgba(255, 255, 255, .2); }

.topbar-btn-catalogo { margin-right: 8px; }

/* User dropdown menu */
.topbar-user-dropdown {
    position: absolute;
    top: calc(var(--topbar-height) - 5px);
    right: 16px;
    min-width: 220px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    user-select: none;
    z-index: 1000;
}
.topbar-user-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.topbar-user-menu-item {
    margin: 0;
    padding: 0;
}
.topbar-user-menu-link {
    display: block;
    padding: 10px 16px;
    font-size: .875rem;
    text-decoration: none;
    color: #333;
    transition: background-color .2s ease;
}
.topbar-user-menu-link:hover {
    color: #333333;
    background-color: #f5f5f5;
}
.topbar-user-menu-item-logout {
    border-top: 1px solid #e4e4e4;
    background-color: #f6fafd;
}

/* Estado activo del trigger */
.topbar-user.active .topbar-user-arrow { transform: rotate(180deg); }

/* ---------------------------
   MENSAJES NO LEIDOS (Topbar)
   --------------------------- */

/* Estilos del paginador SOLO para mensajes no leidos (evitar conflictos con webmail) */
.mensajes_function .paginador {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0 4px;
    padding: 0 6px;
    text-align: center;
}
.mensajes_function .paginador .flecha {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 23px;
    padding: 0px 8px;
    border-radius: 3px;
    color: #949494;
    cursor: pointer;
}
.mensajes_function .paginador .flecha:hover {
    color: #dbdbdb;
    background-color: #878787;
}
.mensajes_function .paginador .flecha.disable { display: none; }

.mensajes_function .paginador .total_registros {
    padding-right: 24px;
    font-family: "Roboto", sans-serif;
    font-size: .813rem;
    color: #6c6c6c;
}
.mensajes_function .paginador .selector {
    position: relative;
    width: auto;
    margin: 2px 13px;
    font-size: .813rem;
    font-family: "Roboto", sans-serif;
}
.mensajes_function .paginador .ubicacion {
    display: block;
    border-radius: 3px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: inherit;
    text-transform: lowercase;
    color: #ffffff;
    background-color: #2766be;
}
.mensajes_function .paginador .ubicacion:hover {
    background-color: #2a6ece;
    cursor: pointer;
}
.mensajes_function .paginador .control {
    position: absolute;
    top: 22px;
    left: 0;
    list-style: none;
    width: fit-content;
    min-width: 100%;
    max-height: 80px;
    margin: 0;
    padding: 0;
    border: 1px solid #dddddd;
    border-radius: 3px;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    overflow: auto;
    z-index: 1000;
}
.mensajes_function .paginador .control li {
    padding: 6px 12px;
    font-size: .813rem;
    color: #333333;
    background-color: #e0e0e0;
    cursor: pointer;
}
.mensajes_function .paginador .control li:hover { background-color: #f5f5f5; }

.mensajes_function .paginador .control li.actual {
    background-color: #ffffff;
    cursor: default;
}
.mensajes_link { position: relative; }
.topbar-novedades-link { position: relative; }
.topbar-novedades-link .topbar-mensajes-btn { position: relative; }

/* Badge del icono de novedades en el topbar (solo webmasters) */
.edu-topbar__novedades-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #e23b3b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
}
.edu-topbar__novedades-badge[hidden] { display: none; }

.topbar-mensajes-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    text-decoration: none;
    color: var(--topbar-text);
    border-radius: 4px;
    transition: background-color .2s ease;
}
.topbar-mensajes-btn:hover { background-color: rgba(255, 255, 255, .1); }

.topbar-mensajes-btn i { font-size: 1.125rem; }

/* Badge - indicador de mensajes no leidos */
.topbar-mensajes-btn .badge {
    box-sizing: initial;
    position: absolute;
    left: 2px;
    bottom: 8px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--topbar-bg);
    border-radius: 50%;
    background-color: #e23b3b;
    animation-name: badge-alert;
    animation-duration: 1.5s;
    animation-iteration-count: 2;
    animation-timing-function: ease-in-out;
    animation-delay: 1.3s;
}
/* Popup de mensajes no leidos - Container para MensajesNoLeidos */
.mensajes_popup {
    display: none;
    position: absolute;
    top: calc(var(--topbar-height) - 16px);
    right: 0;
    width: 500px;
    min-height: 0;
    /* header(~35px) + 5 mensajes(~86px c/u) + paginador(~40px) = ~505px; 560 da margen */
    max-height: 560px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    user-select: none;
    overflow: visible;
    transition: min-height .15s ease;
    z-index: 1000;
}
.mensajes_popup.mensajes_popup_visible { display: block; }

/* Estado de carga: flex para centrar el spinner FA; declarado despues para ganar a display:block */
.mensajes_popup:has(.mensajes_spinner) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}
.mensajes_spinner {
    font-size: 2rem;
    color: #999;
}
/* Estilos para el contenido interno .mensajes_function
   Flex column para que header y footer sean fijos y solo el body scrollee */
.mensajes_function {
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: inherit;
    overflow: visible;
}
.mensajes_function > .body {
    overflow-y: auto;
    min-height: 0;
}

.mensajes_function > .mensajes_header {
    display: flex;
    align-items: center;
    padding: 6px 6px 6px 10px;
    border-bottom: 1px solid #c3c3c3;
}
.mensajes_function .mensajes_titulo {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: .938rem;
    font-weight: 400;
    color: #484848;
}
.mensajes_function .cerrar_bt {
    margin-left: auto;
    border: none;
    background-color: transparent;
    transition-duration: .3s;
}
.mensajes_function .cerrar_bt:hover {
    border: none;
    background: none;
    cursor: pointer;
}
.mensajes_function .cerrar {
    width: 12px;
    height: 12px;
    padding: 4px;
    color: var(--topbar-text);
    border-radius: 50%;
    background-color: var(--topbar-bg);
    opacity: .7;
    transition-duration: .4s;
}
.mensajes_function .cerrar:hover {
    color: #ffffff;
    background-color: #666666;
    opacity: 1;
}
.mensajes_function .seccion_vacia {
    margin: 10px 10px;
    padding: 20px;
    text-align: center;
    color: #666;
    background-color: #f5f5f5;
}
.mensajes_function .lista_mensajes {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mensajes_function .lista_mensajes li {
    margin-bottom: 1px;
    border-bottom: 1px dotted #a0a0a0;
}
.mensajes_function .lista_mensajes li > a {
    display: block;
    padding: 12px 10px;
    text-decoration: none;
    color: #6f6f6f;
    background-color: #f5f5f5;
    transition-duration: .2s;
}
.mensajes_function .lista_mensajes li > a:hover { background-color: #ffffff; }

.mensajes_function .lista_mensajes .adjunto {
    display: inline-block;
    width: .875rem;
    padding-right: 4px;
}
.mensajes_function .lista_mensajes .subject {
    padding: 3px 0;
    font-size: .938rem;
    font-weight: 700;
    color: #000000;
}
.mensajes_function .lista_mensajes .from {
    font-size: .875rem;
    color: #000000;
}
.mensajes_function .lista_mensajes .aula { font-size: .875rem; }

.mensajes_function .lista_mensajes .date {
    padding-top: 3px;
    font-size: .75rem;
    font-weight: 300;
}

/* -----------------------
   MODAL (para QR y otros)
   ----------------------- */
.modal_overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, .7);
    z-index: 999;
}
.modal_overlay.oculto { display: none; }

.modal_container {
    position: relative;
    padding: 10px;
    background-color: #FFF;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .8);
}
.modal_container .modal_close_btn {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: #000000;
    transition-duration: .4s;
    cursor: pointer;
}
.modal_container .modal_close_btn .icon {
    width: 30px;
    height: 30px;
    color: #fff;
    transition-duration: .4s;
}
.modal_container .modal_close_btn:hover { background-color: #ffffff; }

.modal_container .modal_close_btn:hover .icon { color: #000000; }

body.noscroll { overflow: hidden; }

/* Ajustar altura del modal de perfil de navegacion */
.modal_window .modal_wrapper.perfil_nav {
    height: 100%;
    max-height: 90vh;
}

/* Modal QR especifico */
.modal_container.qr { width: 300px; box-sizing: content-box; }

.modal_container.qr .desc {
    padding: 10px 0;
    font-size: .875rem;
}
.qr_data { position: relative; }

.qr_data .qr_overlay {
    position: absolute;
    top: 145px;
    left: 145px;
    width: 75px;
    height: 89px;
    margin-top: -3px;
    margin-left: -3px;
    outline: none;
    background-image: url(../img/comunes/qr_overlay.png);
    transform: translate(-50%, -50%);
}
.qr_update {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(50, 50, 50, .95);
    transition-duration: .4s;
    cursor: pointer;
}
.qr_update .icon {
    width: 175px;
    height: 175px;
    color: rgba(100, 100, 100, .9);
    transition-duration: .4;
}
.qr_update:hover { background-color: rgba(0, 0, 0, .95); }

.qr_update:hover .icon { color: rgba(255, 255, 255, .8); }


/* -------------------
   RESPONSIVE - Mobile
   ------------------- */
@media (max-width: 960px) {
    /* Topbar ajustes mobile */
    .topbar {
        padding: 0 8px;
        z-index: 200;
    }
    .topbar-nombre-instalacion { display: none; }

    .topbar-logo { height: calc(var(--topbar-height) - 20px); }

    .topbar-right { gap: 2px; }

    .topbar-center { padding: 0 12px; }

    /* Selector aula: reemplazar texto por icono en mobile */
    .topbar-breadcrumb .aula_sel_container { min-width: 0; }

    .topbar-breadcrumb .aula_sel_inner {
        justify-content: center;
        width: 36px;
        padding: 0;
    }

    .topbar-breadcrumb .aula_sel_list_single,
    .topbar-breadcrumb .aula_sel_arrow { display: none; }

    .topbar-breadcrumb .aula_sel_icon_mobile {
        display: block;
        font-size: 1.125rem;
        color: var(--topbar-text);
        pointer-events: none;
    }

    .topbar-user-name,
    .topbar-user-arrow { display: none; }

    .topbar-breadcrumb .breadcrumb-current {
        display: inline-block;
        vertical-align: middle;
        max-width: 120px;
    }

    /* Sidebar colapsada por defecto en movil */
    .icon-sidebar {
        left: -100%;
        width: 78%;
        max-width: 300px;
        box-shadow: 5px 0 150px 0 rgba(0, 0, 0, .6);
        transition: left .3s ease;
    }
    /* Sidebar visible cuando tiene clase 'show' */
    .icon-sidebar.show { left: 0; }

    /* Boton toggle para sidebar en movil */
    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: 12px;
        font-size: 1.25rem;
        color: var(--theme-secondary-contrast);
        border: 2px solid var(--theme-secondary-contrast);
        border-radius: 4px;
        background-color: var(--theme-secondary);
        cursor: pointer;
    }
    /* Boton flotante para sidebar en movil */
    .sidebar-toggle-float {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 34px;
        height: 34px;
        z-index: 98;
    }
    /* Cuando el footer esta visible, mover el boton toggle para no solaparse */
    body:has(.icon-sidebar.footer-visible) .sidebar-toggle-float { bottom: calc(var(--footer-height) + 10px); }

    .sidebar-toggle-float .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        font-size: 1.125rem;
        color: #fff;
        border: none;
        border-radius: 30px;
        background-color: var(--theme-secondary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        opacity: .7;
        transition: all .4s;
    }
    .sidebar-toggle-float .sidebar-toggle:hover { background-color: var(--theme-secondary-hover); }

    /* Overlay oscuro */
    .sidebar-overlay {
        position: fixed;
        top: var(--topbar-height);
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .4);
        pointer-events: none;
        opacity: 0;
        transition: opacity .3s ease;
        z-index: 50;
    }
    .sidebar-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }
    /* Boton cerrar sidebar en movil */
    .icon-sidebar.show .icon-sidebar-header {
        display: flex;
        justify-content: flex-end;
    }
    .icon-sidebar-close {
        padding: 12px 14px;
        font-size: .875rem;
        color: #fff;
        background: none;
        border: none;
        cursor: pointer;
        opacity: .75;
        transition: opacity .2s;
    }
    .icon-sidebar-close:hover { opacity: 1; }

    /* Mostrar labels cuando la sidebar esta desplegada en movil */
    .icon-sidebar.show .icon-nav-item .icon-label {
        display: block;
        opacity: 1;
    }
    /* Expandir sidebar cuando esta desplegada */
    /* Flex column para que header y nav compartan el alto correctamente */
    .icon-sidebar.show {
        display: flex;
        flex-direction: column;
        width: 78%;
        max-width: 300px;
        z-index: var(--icon-sidebar-z-index);
    }
    /* El nav toma el espacio restante despues del header de cierre */
    .icon-sidebar.show .icon-nav {
        flex: 1;
        height: auto;
        min-height: 0;
    }
    /* Mostrar iconos de external link siempre visibles en movil */
    .icon-sidebar .icon-nav-item .icon-external-link {
        display: inline;
        opacity: 1;
    }

    /* Ocultar pin button en movil */
    .icon-sidebar-pin { display: none !important; }
}

/* Ocultar boton toggle y overlay en desktop */
@media (min-width: 961px) {
    .sidebar-toggle-float { display: none; }

    .sidebar-overlay { display: none; }

    /* Pin button: pseudo-item dentro del nav, antes del admin */
    /* Usar flex order para posicionarlo sin alterar el DOM del loop */
    .icon-nav-item[data-section="admin"] {
        order: 2;
        margin-top: 0;
    }

    /* En backend el pin no existe: restaurar margin-top para mantener admin al fondo */
    body.backend .icon-nav-item[data-section="admin"] { margin-top: auto; }

    /* Sin admin: el pin es el ultimo elemento; moverlo cuando el footer es visible */
    .icon-sidebar.footer-visible:not(:has(.icon-nav-item[data-section="admin"])) .icon-sidebar-pin {
        margin-bottom: var(--footer-height);
    }

    .icon-sidebar-pin {
        order: 1;
        margin-top: auto;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 14px 12px 12px;
        white-space: nowrap;
        border: none;
        border-left: 3px solid transparent;
        color: var(--icon-sidebar-text);
        background: none;
        cursor: pointer;
        opacity: .45;
        transition: opacity .2s;
    }
    .icon-sidebar-pin:hover { opacity: .75; }
    .icon-sidebar.pinned .icon-sidebar-pin { opacity: 1; }

    /* Icono: rotado = libre, derecho = pinned */
    .icon-sidebar-pin .fa-thumbtack {
        flex-shrink: 0;
        min-width: 20px;
        font-size: 1.25rem;
        text-align: center;
        transform: rotate(45deg);
        transition: transform .3s ease;
    }
    .icon-sidebar.pinned .icon-sidebar-pin .fa-thumbtack {
        transform: rotate(0deg);
    }

}

/* Pin button: oculto en viewports donde el pin no aplica (961-1659px).
   El hover sigue disponible (transitorio); solo el pin permanente queda deshabilitado.
   Al ocultar el pin, el admin item recupera margin-top:auto para mantenerse al fondo
   (el pin era el que aportaba ese margin via flex order). */
@media (min-width: 961px) and (max-width: 1659px) {
    .icon-sidebar-pin { display: none; }
    .icon-nav-item[data-section="admin"] { margin-top: auto; }
}

/* --- |Dropdowns topbar en pantallas muy reducidas --- */
@media (max-width: 648px) {
    .mensajes_popup {
        position: fixed;
        top: calc(var(--topbar-height) - 5px);
        left: 10px;
        right: 10px;
        width: auto;
    }
}

/* --- |Dropdown selector de aulas: centrado full-width en pantallas medianas --- */
@media (max-width: 1030px) {
    .topbar-breadcrumb .aula_sel_dropdown {
        position: fixed;
        top: calc(var(--topbar-height) - 12px);
        left: 10px;
        right: 10px;
        width: auto;
        min-width: 0;
        max-width: 600px;
        margin: 8px auto 0;
    }
}

/* --- |Dropdown menu usuario: centrado full-width en movil --- */
@media (max-width: 768px) {
    .topbar-breadcrumb .edu-dropdown-menu {
        position: fixed;
        top: calc(var(--topbar-height) - 5px);
        left: 10px;
        right: 10px;
        width: auto;
        min-width: 0;
        max-width: none;
        margin-top: 0;
    }
}

/* Deshabilita transiciones durante resize para evitar flash al cruzar breakpoints */
.resize-in-progress .icon-sidebar { transition: none; }