/* ===== sidebar.css ===== */
.sidebar{
    position:sticky;
    top:0;
    align-self:start;
    height:100vh;
    overflow-y:auto;
    padding:14px 14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:
        linear-gradient(180deg, rgba(7,9,14,.92), rgba(10,14,21,.95) 35%, rgba(7,9,14,.99)),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border-right:1px solid var(--stroke);
    backdrop-filter:blur(14px);
    z-index:90;
    box-shadow:inset -1px 0 0 rgba(255,255,255,.03);
}

.sidebar::after{
    content:"";
    position:absolute;
    inset:0 0 0 auto;
    width:1px;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,.10), transparent);
    pointer-events:none;
}

.sidebar-top,
.sidebar-tools,
.sidebar-nav,
.sidebar-footer{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    flex-shrink: 0;
}

.sidebar-footer{
    margin-top: auto;
    padding-top: 6px;
    width: 100%;
}


.brand{
    width:100%;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:44px minmax(0, 1fr);
    align-items:center;
    gap:12px;
    padding:12px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background:
        linear-gradient(135deg, rgba(26,111,191,.16), rgba(7,9,14,.20) 55%, rgba(91,170,224,.08)),
        rgba(255,255,255,.03);
    box-shadow:var(--shadow-1);
}

.brand-logo{
    width:44px;
    height:44px;
    border-radius:14px;
    background:url('../images/favicon.png') no-repeat center;
    background-size:contain;
}

.brand-copy,
.user-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.brand-copy strong,
.user-copy strong{
    font-size:14px;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.brand-copy span,
.user-copy span{
    font-size:14px;
    color:var(--text-soft);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-height:0;
    overflow-y:auto;
    scrollbar-gutter: stable;
    flex: 1 1 auto;
}

.sidebar-nav::-webkit-scrollbar{ width:6px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.10); border-radius:999px; }

.nav-link,
.collapse-btn,
.user-card{
    width:100%;
    min-width:0;
    margin:0;
    box-sizing:border-box;
}

.collapse-btn,
.nav-link{
    min-height:42px;
    padding:8px 12px;
    border-radius:14px;
}

.collapse-btn,
.nav-link{
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    align-items:center;
    gap:10px;
    color:var(--text-soft);
    border:1px solid transparent;
    transition:background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.collapse-btn:hover,
.nav-link:hover{
    color:var(--text);
    background:rgba(255,255,255,.055);
    border-color:rgba(255,255,255,.08);
}

.nav-link.active{
    color:#fff;
    background:linear-gradient(135deg, rgba(26,111,191,.26), rgba(7,9,14,.32) 48%, rgba(91,170,224,.18));
    border-color:rgba(26,111,191,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 24px rgba(7,9,14,.22);
}

.nav-icon,
.collapse-icon{
    width:22px;
    height:22px;
    font-size:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.nav-label,
.collapse-btn span{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.user-card{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    align-items:center;
    gap:12px;
    min-height:58px;
    padding:12px 14px;
    border-radius:18px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.04);
}

.user-avatar{
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    font-weight:800;
    color:#fff;
    background:linear-gradient(135deg, var(--brand-pink), var(--brand-purple));
}

.sidebar-login-btn{
    width:100%;
    min-height:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 16px;
    border-radius:16px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.05);
    color:var(--text);
    font-weight:700;
}


@media (min-width: 981px){
/* =========================
   COLLAPSED
========================= */

.app-shell.is-collapsed .sidebar{
    padding: 12px;
    align-items: stretch;
}

.app-shell.is-collapsed .sidebar-top,
.app-shell.is-collapsed .sidebar-tools,
.app-shell.is-collapsed .sidebar-nav,
.app-shell.is-collapsed .sidebar-footer{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* ancho completo, padding uniforme 4 lados, icono centrado */
.app-shell.is-collapsed .brand,
.app-shell.is-collapsed .collapse-btn,
.app-shell.is-collapsed .nav-link,
.app-shell.is-collapsed .user-card,
.app-shell.is-collapsed .sidebar-login-btn{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 10px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    grid-template-columns: 1fr;
}

.app-shell.is-collapsed .brand{
    min-height: 52px;
    padding: 8px;
}

.app-shell.is-collapsed .brand-copy,
.app-shell.is-collapsed .collapse-btn > span:not(.collapse-icon),
.app-shell.is-collapsed .nav-label,
.app-shell.is-collapsed .user-copy,
.app-shell.is-collapsed .sidebar-login-text{
    display: none;
}

.app-shell.is-collapsed .brand-logo{
    width: 36px;
    height: 36px;
}

.app-shell.is-collapsed .collapse-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-shell.is-collapsed .nav-icon{
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* user-card: padding uniforme 4 lados */
.app-shell.is-collapsed .user-card{
    min-height: 52px;
    padding: 10px;
    grid-template-columns: 1fr;
    place-items: center;
}

.app-shell.is-collapsed .user-avatar{
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.app-shell.is-collapsed .sidebar-login-btn{
    height: 52px;
    padding: 10px;
}

}

/* UI global: sidebar activo y footer de sesión */
.nav-link.active{
    color:#dde8f5;
    background:linear-gradient(135deg, rgba(91,170,224,.16), rgba(26,111,191,.12));
    border-color:rgba(91,170,224,.32);
    box-shadow:inset 4px 0 0 rgba(91,170,224,.70), 0 12px 22px rgba(7,9,14,.18);
}
.sidebar-logout-card{
    text-decoration:none;
    cursor:pointer;
    transition:background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.sidebar-logout-card:hover{
    background:rgba(91,170,224,.10);
    border-color:rgba(91,170,224,.36);
    transform:translateY(-1px);
    box-shadow:0 12px 22px rgba(26,111,191,.10);
}
.sidebar-logout-card .user-avatar{position:relative;}
.sidebar-logout-card:hover .user-avatar{
    color:transparent;
    background:linear-gradient(135deg, #5BAAE0, #1A6FBF);
}
.sidebar-logout-card:hover .user-avatar::after{
    content:"\efc4";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:20px;
    font-weight:900;
}

.collapse-btn .theme-ico{font-size:20px;}
.collapse-icon-colapsado{display:none;}
.app-shell.is-collapsed .collapse-icon-abierto{display:none;}
.app-shell.is-collapsed .collapse-icon-colapsado{display:inline-flex;}
.sidebar-logout-card .user-avatar:after{font-family:'IcoFont' !important;}


/* Ajustes sidebar: iconos de menú y estado hover de salida */
.nav-link .theme-ico{
    font-size:18px;
}
.sidebar-logout-card .user-copy span{
    position:relative;
    display:inline-block;
}
.sidebar-logout-card:hover .user-copy span{
    color:transparent;
}
.sidebar-logout-card:hover .user-copy span::after{
    content:"Cerrar sesión";
    position:absolute;
    inset:0 auto auto 0;
    color:var(--text-soft);
    white-space:nowrap;
}

/* =========================
   Sidebar submenus
========================= */
.nav-group{
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
    contain:layout paint;
}

.nav-group-label{
    display:block;
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-muted);
    padding:10px 14px 4px;
}

.nav-group-toggle{
    appearance:none;
    border:1px solid transparent;
    cursor:pointer;
    font:inherit;
    text-align:left;
    background:transparent;
    grid-template-columns:20px minmax(0,1fr) 18px;
}

.nav-group-toggle .nav-caret{
    width:18px;
    height:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--text-soft);
    transition:transform var(--transition), color var(--transition);
}

.nav-group-toggle .nav-caret .theme-ico{
    font-size:15px;
}

.nav-group.is-open > .nav-group-toggle .nav-caret{
    transform:rotate(90deg);
    color:var(--text);
}

.nav-group.has-active-child > .nav-group-toggle{
    color:#eaf7ff;
    border-color:rgba(91,170,224,.18);
    background:rgba(91,170,224,.07);
}

.nav-submenu{
    display:none;
    flex-direction:column;
    gap:4px;
    margin:0 0 2px 0;
    padding:2px 0 2px 18px;
    border-left:1px solid rgba(255,255,255,.08);
}

.nav-group.is-open > .nav-submenu,
html.theme-nav-group-seguimiento-open .nav-group[data-nav-group="seguimiento"] > .nav-submenu,
html.theme-nav-group-cultos-open .nav-group[data-nav-group="cultos"] > .nav-submenu,
html.theme-nav-group-censo-open .nav-group[data-nav-group="censo"] > .nav-submenu,
html.theme-nav-group-administracion-open .nav-group[data-nav-group="administracion"] > .nav-submenu{
    display:flex;
}

.nav-sublink{
    min-height:38px;
    padding:7px 10px;
    border-radius:12px;
    grid-template-columns:18px minmax(0,1fr);
}

.nav-sublink .nav-icon{
    width:18px;
    height:18px;
    font-size:18px;
    opacity:.9;
}

.nav-sublink .theme-ico{
    font-size:16px;
}

.nav-sublink .nav-label{
    font-size:14px;
}

@media (min-width: 981px){
    .app-shell.is-collapsed .nav-group{
        align-items: stretch;
        width: 100%;
    }

    .app-shell.is-collapsed .nav-group-toggle{
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        grid-template-columns: 1fr;
        place-items: center;
    }

    .app-shell.is-collapsed .nav-group-toggle .nav-label,
    .app-shell.is-collapsed .nav-group-toggle .nav-caret,
    .app-shell.is-collapsed .nav-group-label,
    .app-shell.is-collapsed .nav-submenu{
        display: none;
    }
}