/* ============================================================
   Drive Idiomas — Theme tokens & overrides
   ------------------------------------------------------------
   Phase 1: design tokens + sidebar + typography.
   Phases 2–4 will add: dashboard cards · buttons · forms ·
   tables · modals · per-screen polish.
   ============================================================ */

:root {
    /* Neutros */
    --bg-app:        #FAFBFC;
    --bg-card:       #FFFFFF;
    --bg-subtle:     #F3F4F6;
    --bg-hover:      #F9FAFB;
    --border:        #E5E7EB;
    --border-strong: #D1D5DB;

    --text-strong:   #111827;
    --text-body:     #374151;
    --text-muted:    #6B7280;
    --text-subtle:   #9CA3AF;

    /* Acento (azul) */
    --accent:        #1565C0;
    --accent-hover:  #0D47A1;
    --accent-soft:   #E3F2FD;
    --accent-softer: #F0F7FE;

    /* Status (uso pontual) */
    --success:       #16A34A;
    --success-soft:  #DCFCE7;
    --warning:       #D97706;
    --warning-soft:  #FEF3C7;
    --danger:        #DC2626;
    --danger-soft:   #FEE2E2;

    /* Sidebar */
    --sidebar-bg:           #1F2937;
    --sidebar-text:         #D1D5DB;
    --sidebar-muted:        #9CA3AF;
    --sidebar-active-bg:    rgba(21, 101, 192, 0.18);
    --sidebar-active-text:  #FFFFFF;
    --sidebar-border:       #374151;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow:    0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);

    /* Radii */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;

    /* Type */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================
   Typography (global)
============================================================ */
body,
.brand-text,
.nav-link,
.nav-link p,
.navbar-nav,
.navbar-nav span,
.name_user,
.user-rank,
button,
input,
select,
textarea {
    font-family: var(--font-sans) !important;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    letter-spacing: -0.005em;
}

/* ============================================================
   Top bar (main-header) — refinements only
============================================================ */
.main-header.navbar {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}

/* ============================================================
   Sidebar — overrides AdminLTE 3 (.main-sidebar)
============================================================ */
.main-sidebar,
.main-sidebar.sidebar-dark-primary {
    background-color: var(--sidebar-bg) !important;
    box-shadow: none !important;
}

/* --- Brand area (top of sidebar) --- */
.main-sidebar .brand-link {
    background-color: var(--sidebar-bg) !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    text-align: left !important;
    height: auto !important;
    line-height: 1.2 !important;
}

.main-sidebar .brand-link::before {
    content: 'DI';
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: var(--accent);
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    letter-spacing: 0;
}

.main-sidebar .brand-text {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: -0.01em;
}

/* --- User panel (logged-in user card) --- */
/* Only the real user card has .d-flex — empty divider divs (legacy)
   should NOT inherit the card styling. */
.main-sidebar .user-panel.d-flex {
    margin: 14px 12px 8px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--r-md);
    align-items: center !important;
}

.main-sidebar .user-panel .image {
    margin: 0 !important;
}

.main-sidebar .user-panel .image img {
    width: 38px !important;
    height: 38px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none !important;
    object-fit: cover;
}

.main-sidebar .user-panel .info {
    text-align: left !important;
    padding-left: 10px !important;
    line-height: 1.25;
}

.main-sidebar .user-panel .info > a {
    padding: 0 !important;
}

.main-sidebar .name_user {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.main-sidebar .icon-user {
    color: var(--sidebar-muted) !important;
    margin-left: 6px;
    font-size: 11px;
}

.main-sidebar .user-panel .user-rank {
    color: var(--sidebar-muted) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-top: 2px !important;
    font-weight: 600 !important;
    line-height: 1.2;
}

/* --- Section headers (Overview / Academic / Activity) --- */
.main-sidebar .nav-sidebar .nav-header {
    color: var(--sidebar-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 16px 12px 8px !important;
    background: transparent !important;
    margin: 0 !important;
}

/* First section header sits flush — no extra top padding */
.main-sidebar .nav-sidebar > .nav-header:first-child {
    padding-top: 4px !important;
}

/* --- Nav items --- */
.main-sidebar .sidebar {
    padding-bottom: 16px !important;
}

.main-sidebar .nav-sidebar {
    padding: 8px 12px !important;
}

.main-sidebar .nav-sidebar .nav-item {
    margin: 0 0 2px 0 !important;
}

.main-sidebar .nav-sidebar .nav-link {
    color: var(--sidebar-text) !important;
    border-radius: var(--r-sm) !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    padding: 9px 12px !important;
    background: transparent !important;
    position: relative;
    transition: background 0.12s ease, color 0.12s ease;
}

.main-sidebar .nav-sidebar .nav-link p {
    font-weight: 500 !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.main-sidebar .nav-sidebar .nav-link .nav-icon {
    color: var(--sidebar-muted) !important;
    font-size: 14px !important;
    width: 18px !important;
    margin-right: 10px;
    text-align: center;
}

.main-sidebar .nav-sidebar .nav-link .right {
    color: var(--sidebar-muted) !important;
    font-size: 11px !important;
}

.main-sidebar .nav-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #fff !important;
}

.main-sidebar .nav-sidebar .nav-link.active,
.main-sidebar .nav-sidebar .nav-link.menu-active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    box-shadow: none !important;
}

.main-sidebar .nav-sidebar .nav-link.active::before,
.main-sidebar .nav-sidebar .nav-link.menu-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
}

.main-sidebar .nav-sidebar .nav-link.active .nav-icon,
.main-sidebar .nav-sidebar .nav-link.menu-active .nav-icon {
    color: #fff !important;
}

/* --- Treeview submenu (nested items) --- */
.main-sidebar .nav-treeview {
    padding-top: 2px !important;
}

.main-sidebar .nav-treeview .nav-link {
    font-size: 12.5px !important;
    padding: 7px 12px 7px 38px !important;
    color: var(--sidebar-muted) !important;
}

.main-sidebar .nav-treeview .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.main-sidebar .nav-treeview .nav-icon {
    font-size: 10px !important;
    margin-right: 6px !important;
}

/* --- Chat unread badge inside the menu --- */
#chat-unread-badge {
    background: var(--accent) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 10px !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    line-height: 1.4 !important;
}

/* --- "Hello!" greeting in the topbar --- */
.main-header .navbar-nav .nav-link {
    color: var(--text-strong) !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
}

/* ============================================================
   Collapsed (mini) sidebar tweaks
   ------------------------------------------------------------
   When the user clicks the hamburger to shrink the sidebar to
   icons only, AdminLTE adds .sidebar-collapse to <body>. While
   not hovering the sidebar, we hide the chunky user card and
   center the brand logo. On hover the sidebar expands again
   and everything reappears as normal.
============================================================ */
.sidebar-collapse .main-sidebar:not(:hover) .brand-link {
    padding: 16px 8px !important;
    justify-content: center !important;
}

.sidebar-collapse .main-sidebar:not(:hover) .brand-link::before {
    margin: 0 auto;
}

/* Hide the user card while collapsed (avoids the orphan border/avatar look). */
.sidebar-collapse .main-sidebar:not(:hover) .user-panel.d-flex {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

/* Tighten nav padding while in mini mode so icons sit centered nicely. */
.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar {
    padding: 8px 6px !important;
}

.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link {
    padding: 9px 8px !important;
    justify-content: center;
}

.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link .nav-icon {
    margin-right: 0 !important;
}

/* Hide the active-state left border in mini mode — it would clash
   with the centered icon. */
.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link.active::before,
.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link.menu-active::before {
    display: none;
}

/* Treeview submenus must stay hidden in mini mode; AdminLTE handles it,
   but ensure no rogue padding leaks. */
.sidebar-collapse .main-sidebar:not(:hover) .nav-treeview {
    display: none !important;
}

/* Section headers are pure label text — meaningless when there's no room
   for the items to sit under them. Hide them in mini mode. */
.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-header {
    display: none !important;
}