/* ============================================================================
   INBTEL RRHH · nav-iconos.css
   Lo ÚNICO de CSS que este turno añade — en archivo propio, porque main.css
   se devuelve intacto. Cárgalo después de main.css en todas las páginas.
   ========================================================================== */

/* Iconos de la barra: heredan el color del ítem (activo azul, salir rojo) */
.sidebar .nav-icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.sidebar .nav-icon .icon { width: 16px; height: 16px; color: currentColor; }

/* Cuenta junto a un módulo: solo lo que espera decisión */
.sidebar .nav-cuenta {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: rgba(245, 158, 11, .16); color: var(--warning-color);
    font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

/* La tarjeta del pie como enlace (Turno 23) */
.sidebar .user-link { text-decoration: none; border-radius: 8px; margin: 0 8px; }
.sidebar .user-link:hover, .sidebar .user-link:focus-visible { background: var(--bg-hover); }
.sidebar .user-link .icon { margin-left: auto; color: var(--text-tertiary); }

/* Campana y tema por sprite */
#notifBell .bell-icon .icon, .theme-toggle .icon { width: 18px; height: 18px; color: currentColor; }
#notifList .notification-icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex;
    align-items: center; justify-content: center; background: rgba(59, 130, 246, .14); color: var(--primary-color); flex-shrink: 0; }
#notifList .notification-item.unread .notification-icon { background: rgba(59, 130, 246, .14); }
#notifList .notification-item:not(.unread) { opacity: .72; }

/* La hoja móvil: bajo la cabecera, a todo el ancho, con fondo oscurecido */
.notif-fondo { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 1090; }
@media (max-width: 768px) {
    .notif-fondo.open { display: block; }
    /* ADAPTADO: el token de INBTEL se llama --topbar-height (56px), no
       --topbar-h. Con el nombre equivocado caia al respaldo de 52 px y dejaba
       una rendija de 4 px entre la cabecera y la hoja. */
    .notification-panel.active {
        position: fixed !important; top: var(--topbar-height, 56px) !important; left: 0 !important; right: 0 !important;
        width: auto !important; max-width: none !important; border-radius: 0 0 12px 12px !important;
        max-height: calc(100vh - var(--topbar-height, 56px)); overflow-y: auto; z-index: 1100;
    }
    .topbar .btn-icon, .topbar .notification-bell, .topbar .theme-toggle { width: 40px; height: 40px; }
    .topbar .page-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* La tarjeta del pie, cuando estas en una de «mis» paginas. Hereda el estado
   activo de las filas del menu, pero es mas alta: la barra izquierda se
   estira para no quedar como un tacon. */
.sidebar .user-link.active { font-weight: 600; }
.sidebar .user-link.active::before { top: 8px; bottom: 8px; }
.sidebar .user-link.active .sidebar-user-name,
.sidebar .user-link.active .user-name { color: var(--primary-color); }


/* --- El filo de la fila activa -------------------------------------------
   La propuesta dibuja la pastilla recortada del fondo: relleno azul MAS un
   filo fino del mismo azul. Solo con el relleno se confunde con el hover.
   Va como sombra interior para no mover el contenido: un border de 1 px
   desplazaria el texto 2 px y la fila activa quedaria descuadrada frente a
   las demas. */
:root { --sidebar-activo-borde: rgba(59, 130, 246, .34); }
[data-theme="light"] { --sidebar-activo-borde: rgba(37, 99, 235, .26); }

.sidebar .sidebar-link.active {
    box-shadow: inset 0 0 0 1px var(--sidebar-activo-borde);
}
/* La barra izquierda se pinta ENCIMA del filo: si no, el filo le cruza por
   delante y la barra se ve partida en la esquina. */
.sidebar .sidebar-link.active::before { z-index: 1; }