/* =============================================================
   CABEZOTE — vistas/modulos/cabezote.php
   Barra superior delgada al estilo de MaterialPro 10 sobre la
   plantilla 3.5. Toda la altura sale de --pos-topbar-h: style.css
   la tenia fija en 70px en el topbar, el logo, los enlaces, el
   padding del sidebar y el del contenido; aqui se sobreescriben
   esos cinco sitios. Los colores (skins) siguen saliendo de
   style.css y, en oscuro, de dark-mode.css.
   ============================================================= */

:root { --pos-topbar-h: 54px; }

/* ---- Altura ---- */
.topbar { height: var(--pos-topbar-h); box-shadow: 0 1px 6px rgba(0, 0, 0, .10); }
.topbar .top-navbar { min-height: var(--pos-topbar-h); }
.topbar .top-navbar .navbar-header { line-height: var(--pos-topbar-h); height: var(--pos-topbar-h); }
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link {
    line-height: var(--pos-topbar-h);
    height: var(--pos-topbar-h);
}
#main-wrapper[data-layout="vertical"][data-header-position="fixed"] .page-wrapper { padding-top: var(--pos-topbar-h); }
.left-sidebar { padding-top: var(--pos-topbar-h); }
@media (max-width: 767.98px) {
    #main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"] .topbar .top-navbar .navbar-collapse,
    #main-wrapper[data-layout="vertical"][data-header-position="fixed"][data-sidebar-position="fixed"] .topbar .top-navbar .navbar-collapse {
        top: var(--pos-topbar-h);
    }
    .topbar .top-navbar .navbar-header { width: 100%; }
}

/* ---- Marca ---- */
.topbar .top-navbar .navbar-header .navbar-brand {
    height: var(--pos-topbar-h);
    padding: 0 12px;
    justify-content: flex-start;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1;
}
.topbar .top-navbar .navbar-header .navbar-brand .logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
    font-size: 15px;
}
/* Con el menu plegado solo queda el icono, centrado en sus 65px */
#main-wrapper[data-sidebartype="mini-sidebar"] .topbar .top-navbar .navbar-header:not(.expand-logo) .navbar-brand {
    justify-content: center;
    padding: 0;
}
#main-wrapper[data-sidebartype="mini-sidebar"] .topbar .top-navbar .navbar-header:not(.expand-logo) .navbar-brand .logo-icon { margin-right: 0; }
/* El logo claro (skin6) lleva texto oscuro */
.topbar .top-navbar .navbar-header[data-logobg="skin6"] .navbar-brand { color: #2b2b2b; }
.topbar .top-navbar .navbar-header[data-logobg="skin6"] .navbar-brand .logo-icon { background: rgba(0, 0, 0, .08); }

/* ---- Iconos: planos, con aureola redonda al pasar el raton ---- */
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-size: 17px;
    background: transparent !important;   /* sin la sombra/ripple de waves */
}
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    transition: background-color .15s ease, transform .15s ease;
}
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link:hover > i { background: rgba(255, 255, 255, .16); }
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link:active > i { transform: scale(.94); }
.topbar .top-navbar .navbar-collapse[data-navbarbg="skin6"] .navbar-nav > .nav-item > .nav-link:hover > i { background: rgba(0, 0, 0, .06); }
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link .profile-pic {
    width: 32px;
    height: 32px;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
    transition: box-shadow .15s ease;
}
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link:hover .profile-pic { box-shadow: 0 0 0 2px #fff; }
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link.dropdown-toggle { padding: 0 8px 0 6px; }
.topbar .navbar-header .nav-toggler,
.topbar .navbar-header .topbartoggler { color: #fff; padding: 0 12px; font-size: 18px; line-height: var(--pos-topbar-h); }

/* ---- Campana de notificaciones ---- */
.topbar .noti-btn { position: relative; }
.noti-badge {
    position: absolute;
    top: 4px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #fc4b6c;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .18);
}
/* Un latido MUY sutil mientras haya algo sin leer. Si no se nota, la campana no sirve. */
.topbar .noti-btn.tiene-avisos > i { animation: noti-latido 2.6s ease-in-out infinite; }
@keyframes noti-latido {
    0%, 88%, 100% { transform: none; }
    92%           { transform: rotate(-12deg); }
    96%           { transform: rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
    .topbar .noti-btn.tiene-avisos > i { animation: none; }
}

.noti-dd {
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 0;
    margin-top: 6px;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.noti-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.noti-cab .noti-titulo { font-size: 14px; font-weight: 600; }
.noti-cab a { font-size: 12px; }

.noti-lista { max-height: 380px; overflow-y: auto; }
.noti-estado { padding: 26px 16px; text-align: center; font-size: 13px; color: #8a8f98; }
.noti-vacio i { font-size: 26px; opacity: .5; margin-bottom: 8px; display: inline-block; }

.noti-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    color: inherit;
    text-decoration: none;
}
.noti-item:hover { background: rgba(0, 0, 0, .035); color: inherit; text-decoration: none; }
.noti-item:last-child { border-bottom: 0; }
/* Lo no leido se marca con una barra a la izquierda y el titulo en negrita:
   el color solo no basta para quien no lo distingue. */
.noti-item.sin-leer { box-shadow: inset 3px 0 0 #1e88e5; background: rgba(30, 136, 229, .045); }
.noti-item.sin-leer .noti-t { font-weight: 700; }

.noti-ico { flex: none; width: 22px; text-align: center; padding-top: 2px; font-size: 15px; }
.noti-i-rojo  { color: #fc4b6c; }
.noti-i-azul  { color: #1e88e5; }
.noti-i-ambar { color: #d29922; }
.noti-i-verde { color: #2f7d5b; }
.noti-i-gris  { color: #8a8f98; }

.noti-txt { display: flex; flex-direction: column; min-width: 0; }
.noti-t { font-size: 13.5px; line-height: 1.35; }
.noti-c { font-size: 12.5px; color: #6c757d; line-height: 1.45; margin-top: 2px; }
.noti-f { font-size: 11px; color: #a0a6b0; margin-top: 3px; }

/* ---- Menu del usuario ---- */
.topbar .user-dd {
    min-width: 260px;
    padding: 0;
    margin-top: 6px;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.topbar .user-dd .user-dd-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.topbar .user-dd .user-dd-cabecera img { width: 56px; height: 56px; object-fit: cover; flex-shrink: 0; }
.topbar .user-dd .user-dd-cabecera h5 { font-size: 15px; font-weight: 600; }
.topbar .user-dd .user-dd-cabecera span { font-size: 12px; }
.topbar .user-dd .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
}
.topbar .user-dd .dropdown-item i { width: 18px; text-align: center; font-size: 15px; opacity: .8; }
.topbar .user-dd .dropdown-item:hover { background: rgba(0, 0, 0, .04); }

/* ---- Modo oscuro (dark-mode.css ya pinta el fondo del topbar) ---- */
[data-theme="dark"] .topbar { box-shadow: none; }
[data-theme="dark"] .topbar .top-navbar .navbar-header .navbar-brand { color: var(--text-primary); }
[data-theme="dark"] .topbar .top-navbar .navbar-header .navbar-brand .logo-icon { background: rgba(255, 255, 255, .10); }
[data-theme="dark"] .topbar .top-navbar .navbar-nav > .nav-item > .nav-link:hover > i { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .topbar .top-navbar .navbar-nav > .nav-item > .nav-link .profile-pic { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
[data-theme="dark"] .topbar .navbar-header .nav-toggler,
[data-theme="dark"] .topbar .navbar-header .topbartoggler { color: var(--text-secondary); }
[data-theme="dark"] .topbar .user-dd { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
[data-theme="dark"] .topbar .user-dd .user-dd-cabecera { border-color: var(--border-color); }
[data-theme="dark"] .topbar .user-dd .user-dd-cabecera h5 { color: var(--text-primary); }
[data-theme="dark"] .topbar .user-dd .dropdown-item { color: var(--text-primary); }
[data-theme="dark"] .topbar .user-dd .dropdown-item:hover { background: rgba(255, 255, 255, .06); }

[data-theme="dark"] .noti-dd { background: var(--bg-card); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
[data-theme="dark"] .noti-cab { border-color: var(--border-color); }
[data-theme="dark"] .noti-cab .noti-titulo { color: var(--text-primary); }
[data-theme="dark"] .noti-estado { color: var(--text-muted); }
[data-theme="dark"] .noti-item { border-color: var(--border-color); color: var(--text-primary); }
[data-theme="dark"] .noti-item:hover { background: rgba(255, 255, 255, .05); color: var(--text-primary); }
[data-theme="dark"] .noti-item.sin-leer {
    box-shadow: inset 3px 0 0 var(--accent, #1e88e5);
    background: rgba(255, 255, 255, .04);
}
[data-theme="dark"] .noti-c { color: var(--text-secondary); }
[data-theme="dark"] .noti-f { color: var(--text-muted); }
[data-theme="dark"] .noti-badge { box-shadow: 0 0 0 2px var(--bg-card); }