/* SystemScool ERP — estilos base */
:root {
    --sidebar-width: 240px;
    --sidebar-width-collapsed: 64px;
    --topbar-height: 56px;
}

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.topbar { min-height: var(--topbar-height); }

.sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    min-height: calc(100vh - var(--topbar-height));
    transition: width .2s ease, flex-basis .2s ease;
    position: sticky;
    top: var(--topbar-height);
    align-self: flex-start;
    overflow-y: auto;
    max-height: calc(100vh - var(--topbar-height));
    z-index: 1030;
}
.sidebar .nav-link {
    border-radius: .375rem;
    margin: 2px 0;
    padding: .5rem .75rem;
    color: var(--bs-body-color);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.sidebar .nav-link:hover { background: var(--bs-tertiary-bg); }
.sidebar .nav-link.active { background: var(--bs-primary); color: #fff; }
.sidebar .nav-link.disabled-stub { opacity: .55; cursor: not-allowed; }
.sidebar .sidebar-section {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 1rem .75rem .25rem;
    letter-spacing: .04em;
}
.sidebar .sidebar-group-toggle { font-weight: 600; }
.sidebar .sidebar-group-toggle .chevron { transition: transform .15s ease; }
.sidebar .sidebar-group-toggle.collapsed .chevron { transform: rotate(-90deg); }
.sidebar .sidebar-subitem { padding-left: .5rem !important; font-size: .92rem; }
.sidebar .sidebar-subitem.active { background: var(--erp-primario, var(--bs-primary)); color: #fff; }

/* Select2 a Bootstrap 5 */
.select2-container--bootstrap-5 .select2-selection { min-height: calc(1.5em + .75rem + 2px); }
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

body.sidebar-collapsed .sidebar {
    width: var(--sidebar-width-collapsed);
    flex: 0 0 var(--sidebar-width-collapsed);
}
body.sidebar-collapsed .sidebar .nav-link span,
body.sidebar-collapsed .sidebar .sidebar-section { display: none; }
/* Colapsado: mostrar SOLO el icono de cada grupo (nunca el chevron) */
body.sidebar-collapsed .sidebar .sidebar-group-toggle { justify-content: center; }
body.sidebar-collapsed .sidebar .sidebar-group-toggle .chevron { display: none; }
body.sidebar-collapsed .sidebar .nav-link .nav-ico,
body.sidebar-collapsed .sidebar .nav-link > i.bi { font-size: 1.15rem; }
/* Subitems colapsados: ocultar (al expandir el sidebar se ven de nuevo) */
body.sidebar-collapsed .sidebar .collapse { display: none; }

.main-content {
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
}

@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        z-index: 1040;
        height: calc(100vh - var(--topbar-height));
        transform: translateX(-100%);
        transition: transform .2s ease;
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
}

/* Skeleton loaders */
.skeleton {
    background: linear-gradient(90deg, var(--bs-tertiary-bg) 25%, var(--bs-secondary-bg) 50%, var(--bs-tertiary-bg) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.2s infinite;
    border-radius: .375rem;
}
@keyframes skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Toasts container */
#erpToasts {
    position: fixed;
    top: 70px;
    right: 16px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* ============================================================
   TEMA PLASMA (KDE-like) — glass + gradientes + glow · global
   ============================================================ */
:root {
    --pl-a: #3b82f6; --pl-a2: #06b6d4;
    --pl-s: #10b981; --pl-w: #f59e0b; --pl-d: #ef4444; --pl-i: #8b5cf6;
}

/* Fondo "aurora" detrás de todo el contenido */
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(55vw 55vw at 10% -10%, rgba(59,130,246,.13), transparent 60%),
        radial-gradient(45vw 45vw at 100% 0%, rgba(139,92,246,.11), transparent 55%),
        radial-gradient(50vw 50vw at 50% 120%, rgba(6,182,212,.10), transparent 60%);
}
[data-bs-theme="dark"] body::before {
    background:
        radial-gradient(55vw 55vw at 10% -10%, rgba(59,130,246,.22), transparent 60%),
        radial-gradient(45vw 45vw at 100% 0%, rgba(139,92,246,.20), transparent 55%),
        radial-gradient(50vw 50vw at 50% 120%, rgba(6,182,212,.16), transparent 60%);
}

/* Topbar y sidebar translúcidos (glass) */
.topbar {
    background: color-mix(in srgb, var(--bs-body-bg) 72%, transparent) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.sidebar {
    background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Cards del sistema: vidrio sutil + esquinas suaves */
.card {
    background: color-mix(in srgb, var(--bs-body-bg) 86%, transparent);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border-radius: 16px;
}

/* Bloque Plasma para dashboards */
.plasma-card {
    background: color-mix(in srgb, var(--bs-body-bg) 78%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--bs-body-color) 12%, transparent);
    border-radius: 18px; padding: 1.1rem 1.25rem;
    box-shadow: 0 8px 30px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.plasma-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.plasma-head { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--bs-secondary-color); margin-bottom: 1rem; font-weight:700; }

/* KPI (incluye variante clickeable) */
.plasma-kpi { position: relative; overflow: hidden; display:block; text-decoration:none; color: inherit; }
a.plasma-kpi { cursor: pointer; }
a.plasma-kpi:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,.18); }
a.plasma-kpi:hover .plasma-kpi-go { opacity:1; transform: translateX(0); }
.plasma-kpi-ico { position:absolute; top:.7rem; right:.9rem; font-size:1.5rem; opacity:.25; color: var(--bs-body-color); }
.plasma-kpi-label { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--bs-secondary-color); font-weight:700; }
.plasma-kpi-value { font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 800; line-height:1.1; margin:.15rem 0; -webkit-background-clip:text; background-clip:text; color:transparent; }
.plasma-kpi-sub { font-size:.72rem; color: var(--bs-secondary-color); }
.plasma-kpi-go { position:absolute; bottom:.7rem; right:.9rem; font-size:.8rem; color: var(--bs-secondary-color); opacity:0; transform: translateX(-4px); transition: all .18s ease; }
.plasma-kpi::after { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:18px 0 0 18px; }
.plasma-kpi.tone-a .plasma-kpi-value { background-image: linear-gradient(135deg, var(--pl-a), var(--pl-a2)); }
.plasma-kpi.tone-s .plasma-kpi-value { background-image: linear-gradient(135deg, var(--pl-s), #34d399); }
.plasma-kpi.tone-w .plasma-kpi-value { background-image: linear-gradient(135deg, var(--pl-w), #fbbf24); }
.plasma-kpi.tone-d .plasma-kpi-value { background-image: linear-gradient(135deg, var(--pl-d), #fb7185); }
.plasma-kpi.tone-i .plasma-kpi-value { background-image: linear-gradient(135deg, var(--pl-i), #a78bfa); }
.plasma-kpi.tone-a::after { background: var(--pl-a); } .plasma-kpi.tone-s::after { background: var(--pl-s); }
.plasma-kpi.tone-w::after { background: var(--pl-w); } .plasma-kpi.tone-d::after { background: var(--pl-d); }
.plasma-kpi.tone-i::after { background: var(--pl-i); }

/* Barras (sin solapamiento: ancho mínimo + scroll) */
.plasma-bars { display:flex; align-items:flex-end; gap:1rem; height: 200px; padding-top:.5rem; overflow-x:auto; }
.plasma-bar-col { flex:1 1 0; min-width: 70px; display:flex; flex-direction:column; align-items:center; height:100%; }
.plasma-bar-val { font-size:.72rem; font-weight:700; color: var(--bs-body-color); margin-bottom:.35rem; white-space:nowrap; }
.plasma-bar-track { flex:1; width: 60%; max-width:48px; display:flex; align-items:flex-end; }
.plasma-bar-fill { width:100%; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--pl-a2), var(--pl-a)); box-shadow: 0 0 14px rgba(59,130,246,.5); transition: height .5s cubic-bezier(.2,.8,.2,1); }
.plasma-bar-label { font-size:.7rem; color: var(--bs-secondary-color); margin-top:.5rem; white-space:nowrap; text-transform:capitalize; }

/* Medidores */
.plasma-meter { margin-bottom: .9rem; }
.plasma-meter-top { display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:.3rem; }
.plasma-meter-track { height:.55rem; border-radius:1rem; background: color-mix(in srgb, var(--bs-body-color) 10%, transparent); overflow:hidden; }
.plasma-meter-fill { height:100%; border-radius:1rem; transition: width .6s ease; }
.plasma-meter-fill.tone-a { background: linear-gradient(90deg, var(--pl-a), var(--pl-a2)); box-shadow:0 0 10px rgba(59,130,246,.5); }
.plasma-meter-fill.tone-s { background: linear-gradient(90deg, var(--pl-s), #34d399); box-shadow:0 0 10px rgba(16,185,129,.5); }
.plasma-meter-fill.tone-w { background: linear-gradient(90deg, var(--pl-w), #fbbf24); box-shadow:0 0 10px rgba(245,158,11,.5); }
.plasma-meter-fill.tone-d { background: linear-gradient(90deg, var(--pl-d), #fb7185); box-shadow:0 0 10px rgba(239,68,68,.5); }
.plasma-meter-fill.tone-i { background: linear-gradient(90deg, var(--pl-i), #a78bfa); box-shadow:0 0 10px rgba(139,92,246,.5); }

/* ── Accesos directos (atajos del dashboard, estilo Plasma) ── */
.plasma-shortcut { position: relative; }
.plasma-shortcut-link {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.4rem; width: 116px; min-height: 92px; padding:.7rem .5rem;
    text-decoration:none; color: var(--bs-body-color);
    border:1px solid color-mix(in srgb, var(--bs-body-color) 12%, transparent);
    border-radius:14px; text-align:center;
    background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.plasma-shortcut-link:hover {
    transform: translateY(-3px);
    border-color: var(--erp-primario, var(--bs-primary));
    box-shadow: 0 12px 30px rgba(0,0,0,.16);
    color: var(--erp-primario, var(--bs-primary));
}
.plasma-shortcut-link i { font-size:1.5rem; }
.plasma-shortcut-link span { font-size:.74rem; line-height:1.05; font-weight:600; }
.plasma-shortcut-del { position:absolute; top:-6px; right:-6px; }
.plasma-shortcut-del .btn { color:#ef4444; background:transparent; line-height:1; }
.plasma-shortcut-del .btn:hover { color:#b91c1c; }