/* ============================================================
   UFEmuch — Ajustes propios sobre el tema Mazer
   Se carga después de app.css / app-dark.css para poder sobrescribir.
   ============================================================ */

/* ============================================================
   Color primario unificado con el sidebar (índigo), en vez del
   azul por defecto de Mazer (#435ebe). Bootstrap 5.3 usa variables
   CSS para casi todo, pero algunos componentes (botones, foco de
   formularios, paginación) traen el color fijo en la propia regla,
   así que hay que pisarlos explícitamente además de la variable.
   ============================================================ */
:root {
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
}

.btn-primary {
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1d4ed8;
    --bs-btn-active-bg: #1d4ed8;
    --bs-btn-active-border-color: #1d4ed8;
    --bs-btn-disabled-bg: #2563eb;
    --bs-btn-disabled-border-color: #2563eb;
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
    /* Mismo degradado del sidebar, para que se sientan de la misma paleta */
    background-image: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-image: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: #1d4ed8 !important;
}

.btn-outline-primary {
    --bs-btn-color: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #2563eb;
    --bs-btn-hover-border-color: #2563eb;
    --bs-btn-active-bg: #2563eb;
    --bs-btn-active-border-color: #2563eb;
    --bs-btn-disabled-color: #2563eb;
    --bs-btn-disabled-border-color: #2563eb;
}

.form-control:focus,
.form-select:focus {
    border-color: #a5a0f0;
    box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .25);
}

.form-check-input:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

.page-item.active .page-link {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: 0 2px 5px rgba(37, 99, 235, .3) !important;
}

.page-link {
    color: #2563eb;
}

/*
 * Bug de Mazer: la regla ".bi{width:1rem;height:1rem}" (pensada para
 * <svg class="bi">) también se aplica a los íconos de fuente
 * (<i class="bi bi-*">), aplastándolos siempre a 16x16px sin importar
 * el tamaño de fuente (fs-1, fs-2, fs-3...). Esto los recorta y
 * desalinea. Como en este proyecto solo usamos íconos de fuente
 * (nunca <svg class="bi">), es seguro anular el tamaño fijo aquí.
 */
i.bi {
    width: auto;
    height: auto;
}

/* Logo del sidebar: ícono + texto bien alineados verticalmente */
.sidebar-header .logo a {
    line-height: 1;
}
.sidebar-header .logo i.bi {
    line-height: 1;
}

/* Avatar de perfil sin foto: círculo con ícono centrado.
   El wrapper .avatar ya es circular, pero .avatar-content (donde
   está el color de fondo) no traía border-radius propio, por eso
   se veía como un cuadrado en vez de un círculo. */
.avatar .avatar-content {
    border-radius: 50%;
}
.avatar-content i.bi {
    font-size: 1rem;
    line-height: 1;
}

/* ============================================================
   Sidebar con color: el tema por defecto de Mazer es blanco con
   acentos azules muy sutiles. Le damos un fondo degradado para que
   tenga más presencia visual, manteniendo el resto del panel claro.
   ============================================================ */
#sidebar .sidebar-wrapper {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
}

/* Sidebar más angosto que el ancho por defecto de Mazer (300px). El texto de
   los ítems no tiene white-space:nowrap en el CSS base, así que si algún
   label no cabe simplemente pasa a una segunda línea en vez de cortarse; por
   eso también se recorta el padding lateral del menú, para recuperar el
   espacio de texto que se pierde al angostar el sidebar. */
.sidebar-wrapper {
    width: 260px;
}

.sidebar-wrapper .menu {
    padding-left: 1rem;
    padding-right: 1rem;
}

.sidebar-wrapper .menu .sidebar-link {
    padding-left: .6rem;
    padding-right: .6rem;
    font-size: .93rem;
}

.sidebar-wrapper .menu .sidebar-link span {
    margin-left: .6rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

@media screen and (min-width: 1200px) {
    #sidebar ~ #main {
        margin-left: 260px;
    }
}

.sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.sidebar-title {
    color: rgba(255, 255, 255, .6) !important;
    font-weight: 700;
    letter-spacing: .06em;
}

.sidebar-link {
    color: rgba(255, 255, 255, .85) !important;
}

.sidebar-link i {
    color: rgba(255, 255, 255, .65) !important;
    /* Mazer alinea el glifo del ícono con "vertical-align:top" en su
       ::before, lo que lo deja un poco más arriba que el texto del span.
       Centrando el propio <i> como flex container, el glifo se centra
       dentro de su caja sin depender de ese vertical-align. */
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.sidebar-item:not(.active) > .sidebar-link:hover {
    background-color: rgba(255, 255, 255, .1);
}

.sidebar-item.active > .sidebar-link {
    background-color: #ffffff !important;
}

.sidebar-item.active > .sidebar-link,
.sidebar-item.active > .sidebar-link span {
    color: #2563eb !important;
}

.sidebar-item.active > .sidebar-link i {
    color: #2563eb !important;
}

.sidebar-toggler a i {
    color: rgba(255, 255, 255, .8);
}

/* Logo más grande y en blanco sobre el fondo degradado */
.sidebar-header .logo span {
    color: #ffffff !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
}

.sidebar-header .logo i.bi {
    color: #ffffff !important;
    font-size: 2rem !important;
}

/* ============================================================
   Submenú desplegable del sidebar (ej. "Publicaciones" > Noticias /
   Convenios). Usa el collapse de Bootstrap; el chevron rota según
   aria-expanded, sin JS propio.
   ============================================================ */
.submenu-chevron {
    font-size: .75rem !important;
    transition: transform .2s ease;
}

.sidebar-link[aria-expanded="true"] .submenu-chevron {
    transform: rotate(180deg);
}

.sidebar-dropdown.active > .sidebar-link .submenu-chevron {
    color: #2563eb !important;
}

.sidebar-submenu {
    list-style: none;
    margin: .1rem 0 .4rem;
    padding: 0;
}

.sidebar-submenu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1.25rem .5rem 3rem;
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    font-size: .88rem;
    border-radius: 8px;
    margin: 0 .5rem;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar-submenu a i {
    font-size: .85rem;
    color: rgba(255, 255, 255, .6);
}

.sidebar-submenu a:hover {
    background-color: rgba(255, 255, 255, .1);
    color: #ffffff;
}

.sidebar-submenu a:hover i {
    color: #ffffff;
}

.sidebar-submenu a.active {
    background-color: rgba(255, 255, 255, .16);
    color: #ffffff;
    font-weight: 600;
}

.sidebar-submenu a.active i {
    color: #ffffff;
}

/* Tarjetas de KPI del panel principal (Encuestas Pendientes, Convenios por
   Vencer): un ícono de acento + número + link, en una sola fila compacta.
   No usan .stats-icon de Mazer (pensado para tarjetas mucho más grandes,
   con icono de 3rem y padding de 2rem) porque quedaba demasiado grande
   para el poco contenido real de cada tarjeta. */
.kpi-card .card-body {
    padding: .85rem 1rem;
}
.kpi-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    color: #ffffff;
}
.kpi-icon.blue {
    background-color: #57caeb;
}
.kpi-icon.orange {
    background-color: #f59e0b;
}
.kpi-icon.red {
    background-color: #ff7976;
}
.kpi-icon.purple {
    background-color: #9694ff;
}
.kpi-icon.green {
    background-color: #5ddab4;
}
.kpi-label {
    font-size: .78rem;
}

/* ============================================================
   EXPERIMENTAL (2026-08-20): tarjeta rotativa de Últimas Noticias del panel
   principal (reemplaza la lista estática destacada+secundarias que había
   antes). Auto-rota cada 10s (ver <script> en index.php), se pausa con el
   mouse encima, y tiene flechas + puntos para navegar a mano.
   Respaldo antes de este cambio: index.php.backup / custom.css.backup.
   El padding de cada diapositiva lo pone su propio contenido interno
   (.card-body py-3 px-3 en el caso de las noticias), por eso .rotador-slide
   no trae padding propio — evita doble padding si se reutiliza esta clase
   para otro tipo de contenido más adelante.
   ============================================================ */
.rotador-viewport {
    position: relative;
}
.rotador-viewport-noticias {
    min-height: 11rem;
}
.rotador-slide {
    display: none;
    animation: rotador-fade .25s ease;
}
.rotador-slide.active {
    display: block;
}
@keyframes rotador-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.rotador-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 0 .5rem .6rem;
}
.rotador-flecha {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: .9rem;
    line-height: 1;
    padding: .2rem .4rem;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color .15s ease, color .15s ease;
}
.rotador-flecha:hover {
    background-color: rgba(37, 99, 235, .1);
    color: #2563eb;
}
.rotador-dots {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.rotador-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #d1d5db;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
.rotador-dot.active {
    background-color: #2563eb;
    transform: scale(1.3);
}

/* Accesos rápidos del panel principal: antes era un btn-outline-primary
   plano (mismo azul para los 9 destinos posibles); ahora es una tarjeta con
   un círculo de color propio por destino (ver 'color' en
   catalogoAccesosRapidos()), para que se reconozcan de un vistazo en vez de
   tener que leer la etiqueta. */
.acceso-rapido-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.1rem .5rem;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background-color: #fff;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.acceso-rapido-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .08);
    border-color: rgba(37, 99, 235, .25);
}

.acceso-rapido-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #ffffff;
    flex-shrink: 0;
}

.acceso-rapido-label {
    font-size: .8rem;
    font-weight: 600;
    color: #25396f;
    text-align: center;
    line-height: 1.2;
}

/* Tarjetas de Noticias y Convenios: fondo celeste translúcido para que se
   sientan parte de la misma paleta azul del resto del panel, sin perder el
   acento de color del borde izquierdo que distingue noticia de convenio. */
.card-publicacion {
    background-color: rgba(59, 130, 246, .07);
    border-color: rgba(59, 130, 246, .12);
    transition: background-color .15s ease;
}

.card-publicacion:hover {
    background-color: rgba(59, 130, 246, .12);
}

/* Formularios dentro de SweetAlert2, con el look de Mazer */
.ufe-swal-form .form-label {
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .25rem;
}
.ufe-swal-form .form-control,
.ufe-swal-form .form-select {
    margin-bottom: 1rem;
}
.swal2-popup.ufe-swal-wide {
    width: 32rem;
}

/* ============ Sidebar colapsable (solo íconos) ============ */
/* Solo aplica desde el breakpoint xl de Bootstrap (1200px) hacia arriba:
   en mobile/tablet el sidebar ya usa su propio comportamiento (off-canvas
   con .sidebar-hide), así que el modo colapsado no debe interferir ahí. */
.sidebar-toggle-desktop {
    color: #25396f;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}
#app.sidebar-collapsed .sidebar-toggle-desktop {
    transform: rotate(180deg);
}

@media (min-width: 1200px) {
    #app.sidebar-collapsed .sidebar-wrapper {
        width: 78px;
    }
    #app.sidebar-collapsed #main {
        margin-left: 78px;
    }
    #app.sidebar-collapsed .sidebar-header {
        padding: 1.5rem 0.5rem 1rem;
        justify-content: center;
    }
    #app.sidebar-collapsed .logo span,
    #app.sidebar-collapsed .sidebar-title,
    #app.sidebar-collapsed .sidebar-link > span,
    #app.sidebar-collapsed .submenu-chevron {
        display: none;
    }
    #app.sidebar-collapsed .sidebar-link {
        justify-content: center;
        padding: 0.7rem;
    }

    /* El submenú expandido (Bootstrap collapse .show) queda forzado oculto
       mientras está colapsado. */
    #app.sidebar-collapsed .sidebar-submenu {
        display: none;
    }
    #app.sidebar-collapsed .sidebar-dropdown {
        position: relative;
    }
}

/* El flotante (.flyout-activo) lo muestra sidebar.php moviéndolo a <body>
   con position:fixed calculado por JS — por eso esta regla NO va dentro de
   #app.sidebar-collapsed: cuando está visible, ya no vive dentro del
   sidebar, así que ese ancestro no aplicaría. Solo define la apariencia;
   la posición (left/top) la pone el JS en el estilo en línea. */
.sidebar-submenu.flyout-activo {
    width: 220px;
    background: #fff;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin: 0;
    z-index: 1050;
}
.sidebar-submenu.flyout-activo li a {
    justify-content: flex-start;
    /* .sidebar-submenu a trae padding-left:3rem pensado para indentar bajo
       el ícono del padre cuando el submenú va anidado dentro del sidebar
       normal; acá el flotante es una lista independiente, así que ese
       padding gigante solo deja un hueco vacío antes del texto. */
    padding: .6rem 1rem !important;
    margin: 0 !important;
    border-radius: .5rem;
    /* Los links del submenú normalmente son texto blanco (pensados para el
       fondo oscuro del sidebar); acá el flotante tiene fondo blanco, así
       que sin esto el texto (y el ícono) quedan blancos sobre blanco,
       invisibles. Mismos colores que usa el resto del sidebar: gris clarito
       de hover (#f0f1f5) y azul de acento (#2563eb) para hover/activo. */
    color: #25396f !important;
}
.sidebar-submenu.flyout-activo li a i {
    color: #25396f !important;
}
.sidebar-submenu.flyout-activo li a:hover {
    background-color: #f0f1f5;
    color: #2563eb !important;
}
.sidebar-submenu.flyout-activo li a:hover i {
    color: #2563eb !important;
}
.sidebar-submenu.flyout-activo li a.active {
    background-color: #2563eb;
    color: #fff !important;
}
.sidebar-submenu.flyout-activo li a.active i {
    color: #fff !important;
}
.sidebar-submenu.flyout-activo li a > span {
    display: inline;
}