/* ================================
   SAGA CLASS – SITE (GLOBAL BASE)
   Core layout + sidebar + content
   ================================ */

/* -------------------- TOKENS -------------------- */
:root {
    --sc-bg-0: #070b16;
    --sc-bg-1: #050814;
    --sc-bg-2: #030615;
    --sc-text: rgba(241,245,249,.92);
    --sc-muted: rgba(226,232,240,.68);
    --sc-border: rgba(148,163,184,.14);
    --sc-border-2: rgba(148,163,184,.18);
    --sc-glass: rgba(2,6,23,.40);
    --sc-glass-2: rgba(2,6,23,.28);
    --sc-blue: rgba(59,130,246,.95);
    --sc-cyan: rgba(56,189,248,.95);
    --radius-xl: 22px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --shadow-lg: 0 18px 45px rgba(0,0,0,.40);
    --shadow-md: 0 12px 28px rgba(0,0,0,.35);
    --sidebar-w: 262px;
}

/* -------------------- BASE -------------------- */
html, body {
    height: 100%;
    margin: 0;
}

html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

@media (max-width: 767.98px) {
    html {
        font-size: 15px;
    }
}

body.layout-SagaClass {
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--sc-text);
    min-height: 100vh;
    background: radial-gradient(1200px 650px at 18% 12%, rgba(37,99,235,.18), transparent 60%), radial-gradient(950px 600px at 85% 30%, rgba(56,189,248,.12), transparent 60%), radial-gradient(900px 700px at 55% 92%, rgba(30,58,138,.18), transparent 62%), linear-gradient(180deg, var(--sc-bg-0) 0%, var(--sc-bg-1) 55%, var(--sc-bg-2) 100%);
}

/* Links */
a {
    color: rgba(147,197,253,.95);
}

    a:hover {
        color: rgba(186,230,253,.95);
    }

/* Focus */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .1rem rgba(255,255,255,.85), 0 0 0 .25rem rgba(37,99,235,.35);
}

/* -------------------- LAYOUT ROOT -------------------- */
.layout-root {
    min-height: 100vh;
    padding: 14px;
}

@media (min-width: 992px) {
    .layout-root {
        padding: 18px;
    }
}

/* -------------------- SIDEBAR -------------------- */
.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: linear-gradient(180deg, rgba(11,42,106,.95) 0%, rgba(11,59,143,.95) 45%, rgba(6,32,79,.95) 100%);
    border: 1px solid rgba(148,163,184,.15);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 14px 12px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.25) transparent;
}

    .sidebar::-webkit-scrollbar {
        width: 10px;
    }

    .sidebar::-webkit-scrollbar-thumb {
        background: rgba(148,163,184,.22);
        border-radius: 99px;
        border: 2px solid rgba(0,0,0,0);
        background-clip: padding-box;
    }

    .sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

.sidebar-logo {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(0,0,0,.30);
    border: 1px solid rgba(255,255,255,.10);
}

.sidebar hr {
    border-color: rgba(255,255,255,.10);
    opacity: 1;
}

.sidebar-nav {
    margin-top: 6px;
}

    .sidebar-nav .nav-item {
        margin: 0;
    }

    .sidebar-nav .text-muted {
        color: rgba(226,232,240,.55) !important;
        letter-spacing: .08em;
        font-size: .68rem;
        margin-top: 12px !important;
    }

    /* Nav link */
    .sidebar-nav .nav-link {
        padding: 9px 10px;
        font-size: .92rem;
        border-radius: 14px;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: rgba(255,255,255,.92) !important;
        transition: background-color .18s ease, transform .10s ease, box-shadow .18s ease;
    }

        .sidebar-nav .nav-link i {
            opacity: .92;
        }

        .sidebar-nav .nav-link:hover {
            background: rgba(255,255,255,.10);
            box-shadow: 0 10px 20px rgba(0,0,0,.18);
            transform: translateY(-1px);
        }

        .sidebar-nav .nav-link.active {
            background: rgba(59,130,246,.22);
            border: 1px solid rgba(59,130,246,.30);
            box-shadow: 0 10px 22px rgba(59,130,246,.14);
        }

/* dropdown inside flow */
.sidebar,
.sidebar .container-fluid,
.sidebar .sidebar-nav {
    overflow: visible !important;
}

.sidebar-nav .dropdown-toggle::after {
    margin-left: auto;
    opacity: .65;
}

.sidebar-nav .dropdown-menu.sidebar-sub {
    position: static !important;
    float: none !important;
    transform: none !important;
    inset: auto !important;
    width: 100%;
    margin: 8px 0 10px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.12);
    background: linear-gradient(180deg, rgba(14,165,233,.14) 0%, rgba(29,78,216,.10) 100%);
    box-shadow: none;
}

    .sidebar-nav .dropdown-menu.sidebar-sub .dropdown-item {
        color: rgba(255,255,255,.92) !important;
        font-size: .90rem;
        padding: 10px 12px !important;
        margin: 4px 0;
        border-radius: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        white-space: normal;
    }

        .sidebar-nav .dropdown-menu.sidebar-sub .dropdown-item:hover,
        .sidebar-nav .dropdown-menu.sidebar-sub .dropdown-item:focus {
            background: rgba(255,255,255,.10);
            color: #fff !important;
        }

/* user bottom card */
.sidebar-user {
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 16px;
    padding: 10px;
    line-height: 1.25;
}

    .sidebar-user .text-white-50 {
        color: rgba(226,232,240,.55) !important;
    }

/* -------------------- CONTENT -------------------- */
.content {
    flex: 1;
    width: 100%;
    padding-left: 14px;
}

@media (max-width: 991.98px) {
    .content {
        padding-left: 0;
        margin-top: 10px;
    }
}

/* main glass card */
.content-card {
    border-radius: var(--radius-xl);
    border: 1px solid var(--sc-border);
    background: var(--sc-glass) !important;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(14px);
    padding: 18px;
    min-height: calc(100vh - 36px);
    color: rgba(226,232,240,.92);
}

    .content-card footer {
        color: rgba(226,232,240,.55);
    }

/* -------------------- BUTTONS (base) -------------------- */
.btn-SagaPrimary {
    background: rgba(59,130,246,.95);
    border: 1px solid rgba(59,130,246,.55);
    color: #fff;
    border-radius: 999px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 12px 22px rgba(59,130,246,.18);
    text-decoration: none;
}

    .btn-SagaPrimary:hover {
        filter: brightness(1.03);
        color: #fff;
    }

.btn-SagaGhost {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(241,245,249,.92);
    border-radius: 999px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .btn-SagaGhost:hover {
        background: rgba(255,255,255,.08);
        color: rgba(241,245,249,.95);
    }

}

.dash-h1 {
    margin: 2px 0 4px;
    font-weight: 750;
    font-size: 2rem;
}

.dash-sub {
    color: rgba(226,232,240,.70);
    font-size: .92rem;
}

.dash-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dash-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(226,232,240,.82);
    font-size: .86rem;
}

.dash-actionsbar {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* KPI row */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

@media (max-width: 1100px) {
    .dash-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .dash-kpis {
        grid-template-columns: 1fr;
    }
}

.kpi-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(148,163,184,.14);
    border-radius: 18px;
    padding: 12px 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

.kpi-ic {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}

.kpi-ic-blue {
    box-shadow: 0 10px 22px rgba(59,130,246,.18);
}

.kpi-ic-green {
    box-shadow: 0 10px 22px rgba(34,197,94,.14);
}

.kpi-ic-amber {
    box-shadow: 0 10px 22px rgba(251,146,60,.14);
}

.kpi-ic-violet {
    box-shadow: 0 10px 22px rgba(168,85,247,.14);
}

.kpi-label {
    color: rgba(226,232,240,.65);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.kpi-value {
    font-weight: 780;
    font-size: 1.15rem;
    margin-top: 1px;
}

.kpi-hint {
    color: rgba(226,232,240,.55);
    font-size: .82rem;
}

.kpi-go {
    margin-left: auto;
    color: rgba(226,232,240,.60);
}
/* Hero strip */
.hero {
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
    border: 1px solid rgba(148,163,184,.14);
    border-radius: 18px;
    padding: 14px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.hero-title {
    margin: 0;
    font-weight: 760;
    font-size: 1.1rem;
}

.hero-sub {
    color: rgba(226,232,240,.62);
    font-size: .90rem;
    margin-top: 2px;
}

.hero-actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Grid cards */
.dash-grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
}

.dash-card,
.progress-card,
.rail .mini {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(148,163,184,.14);
    border-radius: 18px;
    padding: 12px 12px;
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

/* Card titles */
.dash-card-title,
.progress-title {
    margin: 0 0 10px;
    font-weight: 760;
    font-size: 1rem;
}

/* Quick list */
.quick-grid {
    display: grid;
    gap: 8px;
}

.quick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.12);
    text-decoration: none;
    color: rgba(241,245,249,.92);
}

    .quick i {
        opacity: .9;
    }

    .quick:hover {
        background: rgba(255,255,255,.06);
        border-color: rgba(255,255,255,.12);
        transform: translateY(-1px);
    }

/* Continue */
.continue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border-radius: 16px;
    border: 1px dashed rgba(148,163,184,.22);
    background: rgba(0,0,0,.12);
}

.continue-title {
    font-weight: 750;
}

.continue-sub {
    color: rgba(226,232,240,.60);
    font-size: .86rem;
    margin-top: 2px;
}

.empty-illus {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px dashed rgba(148,163,184,.22);
    background: rgba(0,0,0,.10);
    color: rgba(226,232,240,.70);
}

/* Progress */
.progress-bar-wrap {
    margin-top: 10px;
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    color: rgba(226,232,240,.70);
    font-size: .86rem;
    margin-bottom: 6px;
}

.progress-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    overflow: hidden;
}

    .progress-bar > span {
        display: block;
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, rgba(59,130,246,.95), rgba(56,189,248,.90));
    }

/* Activity list */
.activity {
    margin: 0;
    padding-left: 18px;
    color: rgba(226,232,240,.78);
}

.empty-mini {
    color: rgba(226,232,240,.60);
}

/* Rail */
.rail {
    display: grid;
    gap: 12px;
}

/* Responsive grid spans */
@media (max-width: 1100px) {
    .dash-card[style*="span 4"],
    .progress-card[style*="span 5"],
    .rail[style*="span 3"] {
        grid-column: span 12 !important;
    }
}

/* -------------------- TABLES (kept from your version) -------------------- */
.content-card .table-wrap {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(2, 10, 24, 0.18);
}

.content-card table.table,
.content-card .table {
    color: rgba(226, 232, 240, 0.95) !important;
    margin-bottom: 0;
}

    .content-card .table thead th {
        background: rgba(210, 245, 255, 0.95) !important;
        color: #0b1b2a !important;
        font-weight: 700;
        border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
        letter-spacing: .2px;
    }

.content-card .table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

.content-card .table tbody td {
    color: rgba(226, 232, 240, 0.95) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
    background: rgba(8, 18, 34, 0.25);
}

.content-card .table tbody tr:nth-child(even) td {
    background: rgba(8, 18, 34, 0.35);
}

.content-card .table-hover tbody tr:hover td {
    background: rgba(14, 165, 233, 0.16) !important;
}

.content-card .table-bordered > :not(caption) > * > * {
    border-width: 1px;
}

.content-card .col-action {
    width: 140px;
}

.content-card .col-date {
    width: 160px;
}

.content-card .btn-atender {
    background: linear-gradient(135deg, #0ea5e9 0%, #1d4ed8 100%);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 14px;
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.18);
}

    .content-card .btn-atender:hover {
        filter: brightness(0.95);
    }

.content-card .text-truncate-520 {
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* =========================================================
   PATCH UI/UX – SAGA CLASS (LMS Focus)
   No cambia lógica / no cambia opciones
   ========================================================= */

/* Header móvil coherente */
.sc-mobile-header {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(0,0,0,.30);
}

/* Tokens del patch */
:root {
    --sc-sidebar-top: rgba(14, 72, 168, .98);
    --sc-sidebar-mid: rgba(10, 58, 145, .98);
    --sc-sidebar-bot: rgba(6, 36, 90, .98);
    --sc-hover: rgba(255,255,255,.08);
    --sc-active: rgba(59,130,246,.26);
    --sc-active-border: rgba(59,130,246,.35);
    --sc-chip: rgba(255,255,255,.06);
    --sc-chip-b: rgba(255,255,255,.10);
    --sc-divider: rgba(255,255,255,.10);
    --sc-focus: 0 0 0 .12rem rgba(255,255,255,.82), 0 0 0 .30rem rgba(59,130,246,.35);
}

/* Sidebar: look LMS premium */
.sidebar {
    background: linear-gradient(180deg, var(--sc-sidebar-top) 0%, var(--sc-sidebar-mid) 45%, var(--sc-sidebar-bot) 100%);
    position: relative;
}

    .sidebar::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: var(--radius-xl);
        pointer-events: none;
        background: radial-gradient(700px 420px at 25% 15%, rgba(56,189,248,.18), transparent 60%), radial-gradient(900px 520px at 70% 25%, rgba(59,130,246,.16), transparent 62%);
        opacity: .9;
    }

/* Logo un poco más pro */
.sidebar-logo {
    border-radius: 16px;
    outline: 1px solid rgba(255,255,255,.10);
}

/* Dividers */
.sidebar hr {
    border-color: var(--sc-divider);
}

/* Labels */
.sidebar-nav .text-muted {
    color: rgba(226,232,240,.62) !important;
    font-size: .70rem;
    letter-spacing: .12em;
}

/* Links: tacto + enfoque */
.sidebar-nav .nav-link {
    position: relative;
    background: transparent;
    border: 1px solid transparent;
    backdrop-filter: blur(8px);
}

    .sidebar-nav .nav-link:hover {
        background: var(--sc-hover);
        border-color: rgba(255,255,255,.08);
        box-shadow: 0 12px 24px rgba(0,0,0,.20);
    }

    .sidebar-nav .nav-link:focus {
        outline: none;
        box-shadow: var(--sc-focus);
    }

    .sidebar-nav .nav-link.active {
        background: var(--sc-active);
        border-color: var(--sc-active-border);
        box-shadow: 0 14px 26px rgba(59,130,246,.18);
    }

    /* Icon alignment */
    .sidebar-nav .nav-link i {
        width: 20px;
        display: inline-grid;
        place-items: center;
        opacity: .95;
    }

/* Dropdown caret */
.sidebar-nav .dropdown-toggle::after {
    margin-left: auto;
    opacity: .70;
    transform: translateY(1px);
}

/* Submenu: panel interno LMS */
.sidebar-nav .dropdown-menu.sidebar-sub {
    border: 1px solid rgba(148,163,184,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

    .sidebar-nav .dropdown-menu.sidebar-sub .dropdown-item {
        border: 1px solid transparent;
        background: rgba(0,0,0,.10);
    }

        .sidebar-nav .dropdown-menu.sidebar-sub .dropdown-item:hover,
        .sidebar-nav .dropdown-menu.sidebar-sub .dropdown-item:focus {
            background: rgba(255,255,255,.08);
            border-color: rgba(255,255,255,.10);
        }

        .sidebar-nav .dropdown-menu.sidebar-sub .dropdown-item.active {
            background: rgba(59,130,246,.18);
            border-color: rgba(59,130,246,.22);
        }

/* User card */
.sidebar-user {
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* Content: mejor profundidad */
.content-card {
    box-shadow: 0 18px 50px rgba(0,0,0,.42);
    border: 1px solid rgba(148,163,184,.16);
}

/* Dashboard: jerarquía */
.dash-h1 {
    letter-spacing: .2px;
}

.dash-pill {
    background: var(--sc-chip);
    border-color: var(--sc-chip-b);
}

/* KPI cards */
.kpi-card {
    background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.03) 100%);
    border-color: rgba(148,163,184,.16);
}

.kpi-ic {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.kpi-ic-blue {
    background: rgba(59,130,246,.10);
}

.kpi-ic-green {
    background: rgba(34,197,94,.10);
}

.kpi-ic-amber {
    background: rgba(251,146,60,.10);
}

.kpi-ic-violet {
    background: rgba(168,85,247,.10);
}

/* Quick */
.quick {
    border-color: rgba(255,255,255,.10);
}

    .quick:hover {
        background: rgba(255,255,255,.07);
        border-color: rgba(255,255,255,.14);
    }

/* Progress */
.progress-bar {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.10);
}

    .progress-bar > span {
        box-shadow: 0 10px 24px rgba(56,189,248,.16);
    }

/* Mini rail */
.rail .mini {
    background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.03) 100%);
    border-color: rgba(148,163,184,.16);
}

/* Selection */
::selection {
    background: rgba(59,130,246,.35);
    color: rgba(241,245,249,.95);
}
/* =========================================================
   SAGA CLASS – VISUAL UPGRADE (FORCED)
   Pegar AL FINAL de site.css
   ========================================================= */

body.layout-SagaClass .layout-root {
    gap: 14px !important;
}

/* ===== Sidebar (más notorio) ===== */
body.layout-SagaClass nav.sidebar {
    background: linear-gradient(180deg, rgba(14,72,168,.98) 0%, rgba(10,58,145,.98) 45%, rgba(6,36,90,.98) 100%) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.55) !important;
    position: relative;
}

    body.layout-SagaClass nav.sidebar::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: var(--radius-xl);
        pointer-events: none;
        background: radial-gradient(700px 420px at 25% 15%, rgba(56,189,248,.18), transparent 60%), radial-gradient(900px 520px at 70% 25%, rgba(59,130,246,.16), transparent 62%);
        opacity: 1;
    }

/* Labels y separadores */
body.layout-SagaClass .sidebar-nav .text-muted {
    color: rgba(226,232,240,.70) !important;
    letter-spacing: .14em !important;
    font-size: .70rem !important;
}

body.layout-SagaClass .sidebar hr {
    border-color: rgba(255,255,255,.12) !important;
}

/* Links */
body.layout-SagaClass .sidebar-nav .nav-link {
    border: 1px solid transparent !important;
    background: rgba(0,0,0,.08) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
    transition: all .18s ease !important;
}

    body.layout-SagaClass .sidebar-nav .nav-link:hover {
        background: rgba(255,255,255,.10) !important;
        border-color: rgba(255,255,255,.10) !important;
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(0,0,0,.25) !important;
    }

    body.layout-SagaClass .sidebar-nav .nav-link.active {
        background: rgba(59,130,246,.30) !important;
        border-color: rgba(59,130,246,.40) !important;
        box-shadow: 0 16px 30px rgba(59,130,246,.18) !important;
    }

/* Dropdown submenu “panel interno” */
body.layout-SagaClass .sidebar-nav .dropdown-menu.sidebar-sub {
    background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 16px !important;
    padding: 8px !important;
}

    body.layout-SagaClass .sidebar-nav .dropdown-menu.sidebar-sub .dropdown-item {
        background: rgba(0,0,0,.12) !important;
        border: 1px solid transparent !important;
        border-radius: 12px !important;
        padding: 10px 12px !important;
    }

        body.layout-SagaClass .sidebar-nav .dropdown-menu.sidebar-sub .dropdown-item:hover {
            background: rgba(255,255,255,.08) !important;
            border-color: rgba(255,255,255,.10) !important;
        }

/* Usuario bottom */
body.layout-SagaClass .sidebar-user {
    background: rgba(0,0,0,.25) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.25) !important;
}

/* ===== Contenido (más profundo como la imagen) ===== */
body.layout-SagaClass .content-card {
    background: rgba(2, 6, 23, .40) !important;
    border: 1px solid rgba(148,163,184,.16) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.55) !important;
}

/* ===== Dashboard (más “LMS” visual) ===== */
body.layout-SagaClass .kpi-card {
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%) !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.30) !important;
}

/* Íconos KPI con color más notorio */
body.layout-SagaClass .kpi-ic {
    border: 1px solid rgba(255,255,255,.12) !important;
}

body.layout-SagaClass .kpi-ic-blue {
    background: rgba(59,130,246,.16) !important;
}

body.layout-SagaClass .kpi-ic-green {
    background: rgba(34,197,94,.16) !important;
}

body.layout-SagaClass .kpi-ic-amber {
    background: rgba(251,146,60,.16) !important;
}

body.layout-SagaClass .kpi-ic-violet {
    background: rgba(168,85,247,.16) !important;
}

/* HERO más marcado */
body.layout-SagaClass .hero {
    background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.30) !important;
}

/* Botones */
body.layout-SagaClass .btn-SagaPrimary {
    box-shadow: 0 16px 32px rgba(59,130,246,.22) !important;
}

body.layout-SagaClass .btn-SagaGhost {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.12) !important;
}
/* ==========================================================
   SAGA CLASS – PRO UPLIFT (ADD AT END OF site.css)
   Inter + Segmented chips + Stronger cards + Better tables
   ========================================================== */

/* Font token */
:root{
  --font-ui: "Inter", "Segoe UI", Arial, sans-serif;

  --sc-surface: rgba(255,255,255,.045);
  --sc-surface-2: rgba(255,255,255,.065);
  --sc-surface-3: rgba(255,255,255,.085);

  --sc-card: rgba(3, 10, 25, .42);
  --sc-card-2: rgba(3, 10, 25, .58);

  --sc-outline: rgba(148,163,184,.16);
  --sc-outline-2: rgba(148,163,184,.22);

  --sc-glow: 0 24px 70px rgba(0,0,0,.55);
  --sc-soft: 0 14px 30px rgba(0,0,0,.35);

  --sc-accent: rgba(59,130,246,.95);
  --sc-accent-2: rgba(56,189,248,.92);

  --sc-ok: rgba(34,197,94,.95);
  --sc-warn: rgba(251,146,60,.95);
  --sc-bad: rgba(239,68,68,.95);

  --sc-r-xl: 26px;
  --sc-r-lg: 20px;
  --sc-r-md: 16px;

  --sc-pad: 22px;
}

/* Apply Inter everywhere */
body.layout-SagaClass{
  font-family: var(--font-ui);
  letter-spacing: .1px;
}

/* Make layout a bit roomier */
.layout-root{ padding: 18px; }
@media(min-width: 992px){ .layout-root{ padding: 22px; } }

/* CONTENT CARD = more "product" */
.content-card{
  background: linear-gradient(180deg, rgba(2,6,23,.52) 0%, rgba(2,6,23,.40) 100%) !important;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: var(--sc-r-xl);
  box-shadow: var(--sc-glow);
  padding: var(--sc-pad);
  position: relative;
  overflow: hidden;
}
.content-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(700px 520px at 85% 20%, rgba(56,189,248,.12), transparent 62%),
    radial-gradient(900px 640px at 55% 95%, rgba(30,58,138,.18), transparent 64%);
  pointer-events:none;
  opacity:.95;
}
.content-card > *{ position: relative; z-index: 1; }

/* SIDEBAR = more premium */
.sidebar{
  border-radius: var(--sc-r-xl);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: var(--sc-glow);
}
.sidebar-nav .nav-link{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.sidebar-nav .nav-link:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 14px 28px rgba(0,0,0,.28);
}
.sidebar-nav .nav-link.active{
  background: linear-gradient(135deg, rgba(59,130,246,.28), rgba(56,189,248,.16));
  border: 1px solid rgba(59,130,246,.38);
}

/* Dropdown panels inside sidebar */
.sidebar-nav .dropdown-menu.sidebar-sub{
  border-radius: var(--sc-r-lg);
  border: 1px solid rgba(148,163,184,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  padding: 10px;
}
.sidebar-nav .dropdown-menu.sidebar-sub .dropdown-item{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
}
.sidebar-nav .dropdown-menu.sidebar-sub .dropdown-item:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
}

/* =========================
   DASHBOARD: bigger, clearer
   ========================= */
.dash{ max-width: 1280px; padding: 8px 8px 20px; }
.dash-kicker{ font-size: .72rem; }
.dash-h1{ font-size: 2.35rem; letter-spacing: -.02em; }
.dash-sub{ font-size: 1.0rem; color: rgba(226,232,240,.74); }

/* Pills / segmented chips look */
.dash-pill{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: var(--sc-soft);
}
.dash-actionsbar{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 6px;
  gap: 6px;
  box-shadow: var(--sc-soft);
}
.dash-actionsbar .btn{
  border-radius: 999px !important;
  padding: 9px 14px !important;
  font-weight: 650;
}

/* KPIs: stronger cards + hover */
.dash-kpis{ gap: 14px; }
.kpi-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: var(--sc-r-lg);
  padding: 14px 14px;
  box-shadow: var(--sc-soft);
  position: relative;
  overflow:hidden;
}
.kpi-card::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background: rgba(59,130,246,.95);
  opacity:.55;
}
.kpi-card:hover{
  transform: translateY(-2px);
  border-color: rgba(148,163,184,.24);
  box-shadow: 0 22px 44px rgba(0,0,0,.42);
}
.kpi-card:hover::after{ opacity: .9; }

/* Make each KPI use its own accent via existing classes */
.kpi-ic{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.kpi-ic-blue{ box-shadow: 0 12px 26px rgba(59,130,246,.22); }
.kpi-ic-green{ box-shadow: 0 12px 26px rgba(34,197,94,.18); }
.kpi-ic-amber{ box-shadow: 0 12px 26px rgba(251,146,60,.18); }
.kpi-ic-violet{ box-shadow: 0 12px 26px rgba(168,85,247,.18); }

/* Hero: stripe-like */
.hero{
  border-radius: var(--sc-r-lg);
  background: linear-gradient(135deg, rgba(59,130,246,.10) 0%, rgba(2,6,23,.30) 40%, rgba(56,189,248,.08) 100%);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: var(--sc-soft);
}
.hero-title{ font-size: 1.15rem; }
.hero-sub{ font-size: .98rem; }

/* Cards in dashboard grid */
.dash-card, .progress-card, .rail .mini{
  border-radius: var(--sc-r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: var(--sc-soft);
  position: relative;
}
.dash-card::after,
.progress-card::after,
.rail .mini::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background: rgba(56,189,248,.95);
  opacity:.45;
  border-top-left-radius: var(--sc-r-lg);
  border-bottom-left-radius: var(--sc-r-lg);
}
.dash-card:hover, .progress-card:hover, .rail .mini:hover{
  border-color: rgba(148,163,184,.24);
  box-shadow: 0 22px 44px rgba(0,0,0,.42);
}
.dash-card:hover::after,
.progress-card:hover::after,
.rail .mini:hover::after{ opacity:.85; }

/* Quick items more "app-like" */
.quick{
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px 12px;
}
.quick:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* Progress bar stronger */
.progress-bar{
  height: 12px;
  border-radius: 999px;
}
.progress-bar > span{
  background: linear-gradient(90deg, rgba(59,130,246,.95), rgba(56,189,248,.95));
}

/* Buttons: unify (keep your class names) */
.btn-SagaPrimary, .btn-atender{
  font-weight: 700;
  letter-spacing: .2px;
}
.btn-SagaPrimary{
  box-shadow: 0 18px 34px rgba(59,130,246,.20);
}
.btn-SagaGhost{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

/* =========================
   TABLES: more premium
   ========================= */
.content-card .table-wrap{
  border-radius: var(--sc-r-lg);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: var(--sc-soft);
  background: rgba(0,0,0,.12);
}
.content-card .table-titlebar{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
}
.content-card .table thead th{
  background: rgba(220, 245, 255, 0.95) !important;
  border-bottom: 1px solid rgba(148,163,184,.25) !important;
}
.content-card .table tbody td{
  background: rgba(8, 18, 34, 0.22);
}
.content-card .table tbody tr:hover td{
  background: rgba(59,130,246,.10) !important;
}

/* DataTables wrapper (if used) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background: rgba(15,23,42,.55) !important;
  color: rgba(241,245,249,.92) !important;
  border: 1px solid rgba(148,163,184,.20) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
  color: rgba(226,232,240,.70) !important;
}
.dataTables_wrapper .paginate_button{
  border-radius: 10px !important;
}

/* Dropdown menu in tables */
.dropdown-menu{
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.dropdown-item{
  color: rgba(241,245,249,.92);
}
.dropdown-item:hover{
  background: rgba(255,255,255,.08);
}
.dropdown-item.text-danger,
.dropdown-item.danger{
  color: rgba(248,113,113,.95) !important;
}
.dropdown-item.danger:hover{
  background: rgba(239,68,68,.12);
}

/* Small utility */
.sc-trunc{
  display:inline-block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:bottom;
}
/* =========================================================
   ADMIN TABLE (Index Capacitaciones) – PRO LOOK
   ========================================================= */

/* evita que el content-card obligue a ocupar toda la altura en páginas de tabla */
.page-admin-table .content-card {
    min-height: auto !important;
}

/* contenedor centrado */
.page-admin-table .sc-adminpage {
    max-width: 1400px;
    margin: 0 auto;
}

/* Header tipo hero */
.page-admin-table .sc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.page-admin-table .sc-kicker {
    font-size: .75rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(226,232,240,.65);
}

.page-admin-table .sc-title {
    margin: 6px 0 4px;
    font-weight: 900;
    font-size: 2.0rem;
    line-height: 1.05;
    text-shadow: 0 22px 60px rgba(0,0,0,.65);
}

.page-admin-table .sc-sub {
    color: rgba(226,232,240,.78);
    font-size: 1.02rem;
}

.page-admin-table .sc-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* pill contador */
.page-admin-table .sc-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 44px rgba(0,0,0,.28);
    color: rgba(226,232,240,.90);
    font-weight: 700;
}

/* panel tabla */
.page-admin-table .sc-panel {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
    overflow: hidden;
}

/* barra superior de la tabla */
.page-admin-table .sc-panelcap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(2,6,23,.78), rgba(2,6,23,.52));
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.page-admin-table .sc-panelcap .left {
    font-weight: 850;
    color: rgba(244,247,255,.92);
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-admin-table .sc-panelcap .right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* buscador */
.page-admin-table .sc-searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(255,255,255,.10);
    min-width: 320px;
}

.page-admin-table .sc-searchbar input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(244,247,255,.95) !important;
    padding: 0 !important;
}

.page-admin-table .sc-searchbar input::placeholder {
    color: rgba(226,232,240,.55) !important;
}

/* tabla scroll */
.page-admin-table .sc-tablewrap {
    max-height: 520px;
    overflow: auto;
}

/* thead oscuro (adiós celeste) */
.page-admin-table table.dataTable thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: rgba(2,6,23,.92) !important;
    color: rgba(244,247,255,.92) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
    font-weight: 850 !important;
    padding: 14px 12px !important;
    backdrop-filter: blur(10px);
}

/* filas */
.page-admin-table table.dataTable tbody td {
    background: rgba(0,0,0,.14) !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    border-right: 1px solid rgba(255,255,255,.05) !important;
    color: rgba(244,247,255,.90) !important;
    padding: 14px 12px !important;
    vertical-align: middle !important;
}

.page-admin-table table.dataTable tbody tr:nth-child(even) td {
    background: rgba(0,0,0,.20) !important;
}

.page-admin-table table.dataTable tbody tr:hover td {
    background: rgba(59,130,246,.10) !important;
}

/* badges */
.page-admin-table .sc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 850;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(244,247,255,.92);
    min-width: 78px;
}

/* acciones */
.page-admin-table .sc-actionsbtn {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(244,247,255,.92);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 850;
}

.page-admin-table .sc-actionsbtn:hover {
    background: rgba(255,255,255,.09);
    color: #fff;
}

.page-admin-table .sc-ddmenu {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(2,6,23,.94);
    box-shadow: 0 26px 80px rgba(0,0,0,.55);
    padding: 8px;
}

.page-admin-table .sc-ddmenu .dropdown-item {
    border-radius: 12px;
    color: rgba(244,247,255,.92);
    padding: 10px 12px;
    font-weight: 750;
}

.page-admin-table .sc-ddmenu .dropdown-item:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.page-admin-table .sc-ddmenu .dropdown-item.danger {
    color: rgba(255,228,230,.95);
}

.page-admin-table .sc-ddmenu .dropdown-item.danger:hover {
    background: rgba(239,68,68,.14);
}
/* =========================================================
   ADMIN TABLE (Index Capacitaciones) – PRO LOOK
   ========================================================= */

/* evita que el content-card obligue a ocupar toda la altura en páginas de tabla */
.page-admin-table .content-card {
    min-height: auto !important;
}

/* contenedor centrado */
.page-admin-table .sc-adminpage {
    max-width: 1400px;
    margin: 0 auto;
}

/* Header tipo hero */
.page-admin-table .sc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.page-admin-table .sc-kicker {
    font-size: .75rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(226,232,240,.65);
}

.page-admin-table .sc-title {
    margin: 6px 0 4px;
    font-weight: 900;
    font-size: 2.0rem;
    line-height: 1.05;
    text-shadow: 0 22px 60px rgba(0,0,0,.65);
}

.page-admin-table .sc-sub {
    color: rgba(226,232,240,.78);
    font-size: 1.02rem;
}

.page-admin-table .sc-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* pill contador */
.page-admin-table .sc-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 44px rgba(0,0,0,.28);
    color: rgba(226,232,240,.90);
    font-weight: 700;
}

/* panel tabla */
.page-admin-table .sc-panel {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
    overflow: hidden;
}

/* barra superior de la tabla */
.page-admin-table .sc-panelcap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(2,6,23,.78), rgba(2,6,23,.52));
    border-bottom: 1px solid rgba(255,255,255,.10);
}

    .page-admin-table .sc-panelcap .left {
        font-weight: 850;
        color: rgba(244,247,255,.92);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .page-admin-table .sc-panelcap .right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

/* buscador */
.page-admin-table .sc-searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(255,255,255,.10);
    min-width: 320px;
}

    .page-admin-table .sc-searchbar input {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: rgba(244,247,255,.95) !important;
        padding: 0 !important;
    }

        .page-admin-table .sc-searchbar input::placeholder {
            color: rgba(226,232,240,.55) !important;
        }

/* tabla scroll */
.page-admin-table .sc-tablewrap {
    max-height: 520px;
    overflow: auto;
}

/* thead oscuro (adiós celeste) */
.page-admin-table table.dataTable thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: rgba(2,6,23,.92) !important;
    color: rgba(244,247,255,.92) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
    font-weight: 850 !important;
    padding: 14px 12px !important;
    backdrop-filter: blur(10px);
}

/* filas */
.page-admin-table table.dataTable tbody td {
    background: rgba(0,0,0,.14) !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    border-right: 1px solid rgba(255,255,255,.05) !important;
    color: rgba(244,247,255,.90) !important;
    padding: 14px 12px !important;
    vertical-align: middle !important;
}

.page-admin-table table.dataTable tbody tr:nth-child(even) td {
    background: rgba(0,0,0,.20) !important;
}

.page-admin-table table.dataTable tbody tr:hover td {
    background: rgba(59,130,246,.10) !important;
}

/* badges */
.page-admin-table .sc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 850;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(244,247,255,.92);
    min-width: 78px;
}

/* acciones */
.page-admin-table .sc-actionsbtn {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(244,247,255,.92);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 850;
}

    .page-admin-table .sc-actionsbtn:hover {
        background: rgba(255,255,255,.09);
        color: #fff;
    }

.page-admin-table .sc-ddmenu {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(2,6,23,.94);
    box-shadow: 0 26px 80px rgba(0,0,0,.55);
    padding: 8px;
}

    .page-admin-table .sc-ddmenu .dropdown-item {
        border-radius: 12px;
        color: rgba(244,247,255,.92);
        padding: 10px 12px;
        font-weight: 750;
    }

        .page-admin-table .sc-ddmenu .dropdown-item:hover {
            background: rgba(255,255,255,.08);
            color: #fff;
        }

        .page-admin-table .sc-ddmenu .dropdown-item.danger {
            color: rgba(255,228,230,.95);
        }

            .page-admin-table .sc-ddmenu .dropdown-item.danger:hover {
                background: rgba(239,68,68,.14);
            }
/* =========================================================
   ADMIN TABLE (Index Capacitaciones) – PRO LOOK (SagaClass)
   ========================================================= */

.page-admin-table .content-card {
    min-height: auto !important;
}

.page-admin-table .sc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 2px 0 16px;
}

.page-admin-table .sc-titlewrap {
    min-width: 0;
}

.page-admin-table .sc-kicker {
    font-size: .75rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(226,232,240,.68);
}

.page-admin-table .sc-h1 {
    margin: 6px 0 4px;
    font-weight: 880;
    font-size: 2.10rem;
    line-height: 1.05;
}

.page-admin-table .sc-sub {
    color: rgba(226,232,240,.78);
    font-size: 1.02rem;
}

.page-admin-table .sc-head-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Pill total */
.page-admin-table .sc-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 44px rgba(0,0,0,.28);
    color: rgba(226,232,240,.90);
    font-weight: 650;
}

    .page-admin-table .sc-pill i {
        opacity: .9;
    }

/* Botón Nuevo PRO (usa tu clase existente) */
.page-admin-table .btn-saga-primary {
    background: linear-gradient(135deg, rgba(59,130,246,.98) 0%, rgba(56,189,248,.92) 55%, rgba(29,78,216,.98) 100%);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 850;
    box-shadow: 0 18px 46px rgba(59,130,246,.22);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .page-admin-table .btn-saga-primary:hover {
        filter: brightness(1.03);
        color: #fff;
    }

/* Panel tabla */
.page-admin-table .sc-panel {
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
    overflow: hidden;
}

.page-admin-table .sc-panelcap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(2,6,23,.78), rgba(2,6,23,.52));
    border-bottom: 1px solid rgba(255,255,255,.10);
}

    .page-admin-table .sc-panelcap .left {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 850;
        color: rgba(244,247,255,.92);
    }

    .page-admin-table .sc-panelcap .right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

/* Search bonito */
.page-admin-table .sc-searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(255,255,255,.10);
    min-width: 320px;
}

    .page-admin-table .sc-searchbar i {
        opacity: .85;
    }

.page-admin-table .dt-host {
    width: 100%;
}

.page-admin-table .sc-dt-search.form-control {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(244,247,255,.95) !important;
    padding: 0 !important;
}

.page-admin-table .sc-dt-search::placeholder {
    color: rgba(226,232,240,.55) !important;
}

/* Count pill */
.page-admin-table .sc-countpill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(226,232,240,.86);
}

/* Table wrap height */
.page-admin-table .sc-tablewrap {
    max-height: 560px;
}

/* Table header oscuro (quita thead blanco) */
.page-admin-table table.table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: rgba(2,6,23,.92) !important;
    color: rgba(244,247,255,.92) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    font-weight: 850 !important;
    letter-spacing: .01em;
    padding: 14px 12px !important;
    backdrop-filter: blur(10px);
}

/* Body */
.page-admin-table table.table tbody td {
    background: rgba(0,0,0,.14) !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    border-right: 1px solid rgba(255,255,255,.05) !important;
    color: rgba(244,247,255,.90) !important;
    padding: 14px 12px !important;
    vertical-align: middle !important;
}

.page-admin-table table.table tbody tr:nth-child(even) td {
    background: rgba(0,0,0,.20) !important;
}

.page-admin-table table.table-hover tbody tr:hover td {
    background: rgba(59,130,246,.12) !important;
}

/* Truncate */
.page-admin-table .sc-trunc {
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Badges pro */
.page-admin-table .sc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 800;
    border: 1px solid transparent;
    min-width: 78px;
}

    .page-admin-table .sc-badge.ok {
        background: rgba(34,197,94,.14);
        border-color: rgba(34,197,94,.32);
        color: rgba(220,252,231,.95);
    }

    .page-admin-table .sc-badge.warn {
        background: rgba(251,146,60,.14);
        border-color: rgba(251,146,60,.32);
        color: rgba(255,237,213,.95);
    }

/* Chips (fechas) */
.page-admin-table .sc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(226,232,240,.86);
    font-size: .90rem;
}

.page-admin-table .sc-chip-k {
    color: rgba(226,232,240,.62);
    font-weight: 650;
    letter-spacing: .02em;
}

.page-admin-table .sc-chip-v {
    font-weight: 650;
    color: rgba(244,247,255,.92);
}

/* Col acciones */
.page-admin-table .sc-col-action {
    width: 190px;
    min-width: 190px;
}

/* Botón Acciones */
.page-admin-table .sc-actionsbtn {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(244,247,255,.92);
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 800;
}

    .page-admin-table .sc-actionsbtn:hover {
        background: rgba(255,255,255,.09);
        color: #fff;
    }

/* Dropdown menu pro */
.page-admin-table .sc-ddmenu {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(2,6,23,.94);
    box-shadow: 0 26px 80px rgba(0,0,0,.55);
    padding: 8px;
    min-width: 240px;
}

    .page-admin-table .sc-ddmenu .dropdown-item {
        border-radius: 12px;
        color: rgba(244,247,255,.92);
        padding: 10px 12px;
        font-weight: 750;
    }

        .page-admin-table .sc-ddmenu .dropdown-item:hover {
            background: rgba(255,255,255,.08);
            color: #fff;
        }

        .page-admin-table .sc-ddmenu .dropdown-item.danger {
            color: rgba(255,228,230,.95);
        }

            .page-admin-table .sc-ddmenu .dropdown-item.danger:hover {
                background: rgba(239,68,68,.14);
            }

/* DataTables top/bottom rows */
.page-admin-table .dt-row-top,
.page-admin-table .dt-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
}

.page-admin-table .dt-left,
.page-admin-table .dt-right,
.page-admin-table .dt-info,
.page-admin-table .dt-paging {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-admin-table .dataTables_info {
    color: rgba(226,232,240,.70) !important;
}

.page-admin-table .dataTables_paginate .paginate_button {
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.85) !important;
    margin: 0 3px !important;
}

    .page-admin-table .dataTables_paginate .paginate_button.current {
        background: rgba(37,99,235,.22) !important;
        border-color: rgba(37,99,235,.35) !important;
    }

/* Responsive */
@media (max-width: 900px) {
    .page-admin-table .sc-searchbar {
        min-width: 220px;
    }

    .page-admin-table .sc-h1 {
        font-size: 1.70rem;
    }
}
/* =========================================================
   ADMIN FORM (Create/Edit) – PRO LOOK (SagaClass)
   ========================================================= */

.page-admin-form .content-card {
    min-height: auto !important;
}

.page-admin-form .sc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 2px 0 16px;
}

.page-admin-form .sc-titlewrap {
    min-width: 0;
}

.page-admin-form .sc-kicker {
    font-size: .75rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(226,232,240,.68);
}

.page-admin-form .sc-h1 {
    margin: 6px 0 4px;
    font-weight: 880;
    font-size: 2.05rem;
    line-height: 1.05;
}

.page-admin-form .sc-sub {
    color: rgba(226,232,240,.78);
    font-size: 1.02rem;
}

.page-admin-form .sc-head-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Panel base (usa tu sc-panel si ya existe, esto solo refuerza) */
.page-admin-form .sc-panel {
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
    overflow: hidden;
}

.page-admin-form .sc-panelcap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(2,6,23,.78), rgba(2,6,23,.52));
    border-bottom: 1px solid rgba(255,255,255,.10);
}

    .page-admin-form .sc-panelcap .left {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 850;
        color: rgba(244,247,255,.92);
    }

    .page-admin-form .sc-panelcap .right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

.page-admin-form .sc-hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(226,232,240,.78);
    font-size: .92rem;
}

    .page-admin-form .sc-hint i {
        opacity: .85;
    }

.page-admin-form .sc-formbody {
    padding: 16px;
}

/* Labels */
.page-admin-form .sc-label {
    font-weight: 750;
    color: rgba(226,232,240,.86) !important;
    margin-bottom: 6px;
}

/* Input wrapper con icono */
.page-admin-form .sc-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 42px rgba(0,0,0,.22);
}

    .page-admin-form .sc-input > i {
        opacity: .85;
        font-size: 1.0rem;
    }

/* Controls */
.page-admin-form .sc-control.form-control {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(244,247,255,.95) !important;
    padding: 0 !important;
}

.page-admin-form .sc-control::placeholder {
    color: rgba(226,232,240,.55) !important;
}

/* Focus */
.page-admin-form .sc-input:focus-within {
    border-color: rgba(59,130,246,.35);
    box-shadow: 0 0 0 0.1rem rgba(255,255,255,.65), 0 0 0 0.25rem rgba(37,99,235,.25);
}

/* Validation */
.page-admin-form .sc-val-summary {
    color: rgba(255,228,230,.95);
    background: rgba(239,68,68,.10);
    border: 1px solid rgba(239,68,68,.22);
    padding: 10px 12px;
    border-radius: 16px;
    margin-bottom: 6px;
}

.page-admin-form .sc-val {
    display: block;
    margin-top: 6px;
    color: rgba(255,228,230,.95);
    font-size: .92rem;
}

/* Actions */
.page-admin-form .sc-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 6px;
}

/* Reusa tus botones PRO si ya existen */
.page-admin-form .btn-saga-primary {
    background: linear-gradient(135deg, rgba(59,130,246,.98) 0%, rgba(56,189,248,.92) 55%, rgba(29,78,216,.98) 100%);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 850;
    box-shadow: 0 18px 46px rgba(59,130,246,.22);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .page-admin-form .btn-saga-primary:hover {
        filter: brightness(1.03);
        color: #fff;
    }

.page-admin-form .btn-saga-ghost {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(244,247,255,.92);
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 750;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .page-admin-form .btn-saga-ghost:hover {
        background: rgba(255,255,255,.09);
        color: #fff;
    }
/* =========================================================
   SagaClass – ADMIN FORM (Create/Edit) – SaaS Cards
   ========================================================= */

.sc-formpage {
    min-height: auto !important;
}

.sc-form-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 2px 0 16px;
}

    .sc-form-head .sc-kicker {
        font-size: .75rem;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: rgba(226,232,240,.68);
    }

    .sc-form-head .sc-title {
        margin: 6px 0 4px;
        font-weight: 900;
        font-size: 2.0rem;
        line-height: 1.05;
    }

    .sc-form-head .sc-subtitle {
        color: rgba(226,232,240,.78);
        font-size: 1.02rem;
    }

/* shell centrado y no full width */
.sc-form-shell {
    max-width: 1100px;
    margin: 0 auto;
}

/* GRID de cards */
.sc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.sc-card-wide {
    grid-column: 1 / -1;
}

@media (max-width: 1050px) {
    .sc-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Card look */
.sc-card {
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    box-shadow: 0 30px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) inset;
    overflow: hidden;
}

.sc-card-h {
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(2,6,23,.78), rgba(2,6,23,.52));
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.sc-card-ttl {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    color: rgba(244,247,255,.92);
}

    .sc-card-ttl i {
        opacity: .9;
    }

.sc-card-sub {
    margin-top: 6px;
    color: rgba(226,232,240,.72);
    font-size: .95rem;
}

.sc-card-b {
    padding: 14px 16px 16px;
}

/* Labels */
.sc-label {
    font-weight: 800;
    color: rgba(226,232,240,.86);
    margin-bottom: 6px;
}

/* Input “glass” con icono (evita look blanco) */
.sc-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 18px;
    background: rgba(0,0,0,.26);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 42px rgba(0,0,0,.22);
}

.sc-ic {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}

    .sc-ic i {
        opacity: .9;
    }

.sc-input {
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: rgba(244,247,255,.95) !important;
    padding: 0 !important;
    font-size: 1.02rem;
}

    .sc-input::placeholder {
        color: rgba(226,232,240,.55) !important;
    }

/* Focus */
.sc-field:focus-within {
    border-color: rgba(59,130,246,.35);
    box-shadow: 0 0 0 .1rem rgba(255,255,255,.65), 0 0 0 .25rem rgba(37,99,235,.25);
}

/* Date input: quita estilo “blanco nativo” */
.sc-date {
    color-scheme: dark; /* ayuda en navegadores modernos */
}

    .sc-date::-webkit-calendar-picker-indicator {
        filter: invert(1) opacity(.85);
        cursor: pointer;
    }

/* Helpers */
.sc-helper {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: rgba(226,232,240,.72);
    font-size: .92rem;
}

    .sc-helper i {
        opacity: .85;
        margin-top: 2px;
    }

.sc-note {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(59,130,246,.10);
    border: 1px solid rgba(59,130,246,.18);
    color: rgba(226,232,240,.82);
    font-size: .92rem;
}

/* layout cols dentro */
.sc-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 720px) {
    .sc-2col {
        grid-template-columns: 1fr;
    }
}

.sc-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

@media (max-width: 980px) {
    .sc-3col {
        grid-template-columns: 1fr;
    }
}

/* Chips */
.sc-split {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sc-chip {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(226,232,240,.82);
    font-size: .92rem;
}

    .sc-chip .k {
        color: rgba(226,232,240,.62);
        font-weight: 800;
    }

    .sc-chip .v {
        color: rgba(244,247,255,.92);
        font-weight: 800;
    }

/* Validaciones */
.sc-val {
    display: block;
    margin-top: 6px;
    color: rgba(255,228,230,.95);
    font-size: .92rem;
}

.sc-alert {
    border-radius: 18px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.sc-alert-danger {
    background: rgba(239,68,68,.10);
    border: 1px solid rgba(239,68,68,.22);
    color: rgba(255,228,230,.95);
}

/* Footer sticky acciones (SaaS) */
.sc-form-footer {
    position: sticky;
    bottom: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(2,6,23,.82), rgba(2,6,23,.62));
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 10;
}

.sc-mini {
    color: rgba(226,232,240,.66);
    font-size: .90rem;
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

.sc-footer-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Botones SagaClass */
.sc-btn {
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 850;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sc-btn-primary {
    background: linear-gradient(135deg, rgba(59,130,246,.98) 0%, rgba(56,189,248,.92) 55%, rgba(29,78,216,.98) 100%);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    box-shadow: 0 18px 46px rgba(59,130,246,.22);
}

    .sc-btn-primary:hover {
        filter: brightness(1.03);
        color: #fff;
    }

.sc-btn-ghost {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(244,247,255,.92);
}

    .sc-btn-ghost:hover {
        background: rgba(255,255,255,.09);
        color: #fff;
    }
/* =========================================================
   SAGA CLASS – ADMIN TABLE + FORMS (Capacitaciones)
   Fix dropdown in overflow + header pro + search pro
   ========================================================= */

/* ---------- Page wrapper ---------- */
.sc-adminpage {
    max-width: 1400px;
    margin: 0 auto;
}

    /* No obligues a ocupar toda la altura en estas páginas */
    .sc-adminpage .content-card {
        min-height: auto !important;
    }

/* ---------- Hero/Header pro ---------- */
.sc-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

    .sc-kicker {
        font-size: .78rem;
        color: rgba(226,232,240,.72);
        letter-spacing: .06em;
        text-transform: uppercase;
        color: rgba(226,232,240,.62);
    }

    .sc-h1 {
        font-size: 1.55rem;
        font-weight: 900;
        font-size: 2.10rem;
        line-height: 1.05;
    }

    .sc-hero .sub {
        color: rgba(226,232,240,.78);
        font-size: 1.02rem;
        margin: 0;
    }

.sc-hero-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Pills (Total / info) */
.sc-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 44px rgba(0,0,0,.28);
    color: rgba(226,232,240,.92);
    font-weight: 750;
}

    .sc-pill i {
        opacity: .9;
    }

/* Button nuevo (Saga primary) */
.sc-btn-primary {
    background: linear-gradient(135deg, rgba(59,130,246,.98) 0%, rgba(56,189,248,.92) 55%, rgba(29,78,216,.98) 100%);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff !important;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 18px 46px rgba(59,130,246,.22);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .sc-btn-primary:hover {
        filter: brightness(1.03);
    }

.sc-btn-ghost {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(244,247,255,.92) !important;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 750;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .sc-btn-ghost:hover {
        background: rgba(255,255,255,.09);
        color: #fff !important;
    }

/* ---------- Panel (table container) ---------- */
.sc-panel {
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
    overflow: hidden;
}

.sc-panelcap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(2,6,23,.78), rgba(2,6,23,.52));
    border-bottom: 1px solid rgba(255,255,255,.10);
}

    .sc-panelcap .left {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-weight: 850;
        color: rgba(244,247,255,.92);
    }

    .sc-panelcap .right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

/* Search pro (topbar) */
.sc-searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(255,255,255,.10);
    min-width: 320px;
    box-shadow: 0 18px 42px rgba(0,0,0,.22);
}

    .sc-searchbar i {
        opacity: .85;
    }

    .sc-searchbar input.form-control {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: rgba(244,247,255,.95) !important;
        padding: 0 !important;
    }

    .sc-searchbar input::placeholder {
        color: rgba(226,232,240,.55) !important;
    }

/* Length select pro (DataTables) */
.sc-length {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 16px;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(226,232,240,.82);
}

    .sc-length select {
        background: rgba(255,255,255,.06) !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        color: rgba(244,247,255,.95) !important;
        border-radius: 12px !important;
        padding: 6px 10px !important;
    }

/* ---------- Table overrides (dark header + stripes) ---------- */
.sc-tablewrap {
    max-height: 520px;
    overflow: auto;
}

/* Importante: para que el dropdown NO se corte, el wrapper NO debe ocultar */
.sc-tablewrap {
    position: relative;
}

/* thead sticky */
.sc-panel table.dataTable thead th,
.sc-panel table.table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: rgba(2,6,23,.92) !important;
    color: rgba(244,247,255,.92) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    font-weight: 850 !important;
    letter-spacing: .01em;
}

.sc-panel table.dataTable tbody td,
.sc-panel table.table tbody td {
    background: rgba(0,0,0,.14) !important;
    border-color: rgba(255,255,255,.08) !important;
    color: rgba(244,247,255,.90) !important;
    vertical-align: middle;
}

.sc-panel table.dataTable tbody tr:nth-child(even) td,
.sc-panel table.table tbody tr:nth-child(even) td {
    background: rgba(0,0,0,.20) !important;
}

.sc-panel table.dataTable tbody tr:hover td,
.sc-panel table.table-hover tbody tr:hover td {
    background: rgba(59,130,246,.12) !important;
}

/* Badges */
.sc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 850;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
    color: rgba(226,232,240,.90);
}

    .sc-badge.blue {
        background: rgba(59,130,246,.14);
        border-color: rgba(59,130,246,.32);
        color: rgba(219,234,254,.95);
    }

    .sc-badge.cyan {
        background: rgba(14,165,233,.14);
        border-color: rgba(14,165,233,.32);
        color: rgba(207,250,254,.95);
    }

/* ---------- Acciones dropdown (no oculto) ---------- */
.sc-actionsbtn {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(244,247,255,.92);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 850;
    width: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .sc-actionsbtn:hover {
        background: rgba(255,255,255,.09);
        color: #fff;
    }

.sc-ddmenu {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(2,6,23,.96);
    box-shadow: 0 26px 80px rgba(0,0,0,.55);
    padding: 8px;
    min-width: 220px;
    z-index: 5000;
}

    .sc-ddmenu .dropdown-item {
        border-radius: 12px;
        color: rgba(244,247,255,.92);
        padding: 10px 12px;
        font-weight: 750;
    }

        .sc-ddmenu .dropdown-item:hover {
            background: rgba(255,255,255,.08);
            color: #fff;
        }

        .sc-ddmenu .dropdown-item.danger {
            color: rgba(255,228,230,.95);
        }

            .sc-ddmenu .dropdown-item.danger:hover {
                background: rgba(239,68,68,.14);
            }

/* ---------- Pagination/info (DataTables) ---------- */
.dataTables_wrapper .dataTables_info {
    color: rgba(226,232,240,.70) !important;
    padding: 10px 12px;
}

.dataTables_wrapper .dataTables_paginate {
    padding: 10px 12px;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border-radius: 10px !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        background: rgba(255,255,255,.06) !important;
        color: rgba(255,255,255,.85) !important;
        margin: 0 3px !important;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: rgba(37,99,235,.22) !important;
            border-color: rgba(37,99,235,.35) !important;
        }

/* ---------- Forms pro (Create/Edit) ---------- */
.sc-formgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 1100px) {
    .sc-formgrid {
        grid-template-columns: 1fr;
    }
}

.sc-card {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
    box-shadow: 0 26px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.035) inset;
    overflow: hidden;
}

    .sc-card .cap {
        padding: 12px 14px;
        background: linear-gradient(180deg, rgba(2,6,23,.70), rgba(2,6,23,.44));
        border-bottom: 1px solid rgba(255,255,255,.10);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

        .sc-card .cap .t {
            font-weight: 850;
            color: rgba(244,247,255,.94);
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .sc-card .cap .s {
            color: rgba(226,232,240,.72);
            font-size: .92rem;
        }

    .sc-card .body {
        padding: 14px;
    }

.sc-field {
    margin-bottom: 12px;
}

.sc-label {
    font-weight: 750;
    color: rgba(226,232,240,.86);
    margin-bottom: 6px;
    font-size: .92rem;
}

.sc-help {
    margin-top: 6px;
    color: rgba(226,232,240,.62);
    font-size: .90rem;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

    .sc-help i {
        opacity: .85;
        margin-top: 2px;
    }

.sc-input {
    background: rgba(0,0,0,.22) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(244,247,255,.95) !important;
    border-radius: 16px !important;
    padding: 12px 12px !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.18);
}

    .sc-input:focus {
        border-color: rgba(59,130,246,.45) !important;
        box-shadow: 0 0 0 .15rem rgba(59,130,246,.20) !important;
        outline: none !important;
    }

/* input with icon */
.sc-inputgroup {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 42px rgba(0,0,0,.18);
}

    .sc-inputgroup i {
        opacity: .85;
    }

    .sc-inputgroup input {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: rgba(244,247,255,.95) !important;
        padding: 0 !important;
        width: 100%;
    }

        /* Make native calendar icon visible (Chrome) */
        .sc-inputgroup input[type="date"] {
            color-scheme: dark;
        }

/* Footer actions bar */
.sc-formfooter {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sc-secure {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(226,232,240,.78);
    font-weight: 650;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
}

    .sc-secure i {
        opacity: .9;
    }
/* =========================================================
   SAGA CLASS – ADMIN UI (Tables + Forms) – ADDON
   ========================================================= */

/* --- Generic pills/buttons --- */
.sc-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(226,232,240,.88);
    font-weight: 750;
}

    .sc-pill strong {
        color: rgba(244,247,255,.95);
    }

.btn-saga-primary {
    background: linear-gradient(135deg, rgba(59,130,246,.98) 0%, rgba(56,189,248,.92) 55%, rgba(29,78,216,.98) 100%);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff !important;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 18px 46px rgba(59,130,246,.22);
}

    .btn-saga-primary:hover {
        filter: brightness(1.03);
    }

.btn-saga-ghost {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(244,247,255,.92) !important;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 800;
}

    .btn-saga-ghost:hover {
        background: rgba(255,255,255,.09);
    }

/* =========================================================
   ADMIN TABLE (Index Capacitaciones)
   ========================================================= */

.page-admin-table .content-card {
    min-height: auto !important;
}

.page-admin-table .sc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.page-admin-table .sc-kicker {
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(226,232,240,.62);
}

.page-admin-table .sc-title {
    margin: 6px 0 4px;
    font-weight: 900;
    font-size: 2.05rem;
    line-height: 1.05;
    text-shadow: 0 22px 60px rgba(0,0,0,.65);
}

.page-admin-table .sc-sub {
    color: rgba(226,232,240,.76);
    font-size: 1.02rem;
}

/* Panel */
.page-admin-table .sc-panel {
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
    overflow: hidden;
}

/* Panel header (controls) */
.page-admin-table .sc-panelcap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(2,6,23,.78), rgba(2,6,23,.52));
    border-bottom: 1px solid rgba(255,255,255,.10);
}

    .page-admin-table .sc-panelcap .left {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 900;
        color: rgba(244,247,255,.92);
    }

    .page-admin-table .sc-panelcap .right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

/* Search bar */
.page-admin-table .sc-searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(255,255,255,.10);
    min-width: 320px;
}

    .page-admin-table .sc-searchbar i {
        opacity: .85;
    }

    .page-admin-table .sc-searchbar input {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: rgba(244,247,255,.95) !important;
        padding: 0 !important;
        outline: none !important;
    }

        .page-admin-table .sc-searchbar input::placeholder {
            color: rgba(226,232,240,.55) !important;
        }

/* Table wrap */
.page-admin-table .sc-tablewrap {
    max-height: 520px;
    overflow: auto;
}

/* Table theme (quita head blanco) */
.page-admin-table table.dataTable thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: rgba(2,6,23,.92) !important;
    color: rgba(244,247,255,.92) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    font-weight: 900 !important;
    letter-spacing: .01em;
    padding: 14px 12px !important;
}

.page-admin-table table.dataTable tbody td {
    background: rgba(0,0,0,.14) !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    border-right: 1px solid rgba(255,255,255,.05) !important;
    color: rgba(244,247,255,.90) !important;
    padding: 14px 12px !important;
    vertical-align: middle !important;
}

.page-admin-table table.dataTable tbody tr:nth-child(even) td {
    background: rgba(0,0,0,.20) !important;
}

.page-admin-table table.dataTable tbody tr:hover td {
    background: rgba(59,130,246,.10) !important;
}

/* Small badges used in cells */
.page-admin-table .sc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
    color: rgba(244,247,255,.92);
    min-width: 56px;
}

/* Actions button + dropdown menu */
.page-admin-table .sc-actionsbtn {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(244,247,255,.92);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
}

    .page-admin-table .sc-actionsbtn:hover {
        background: rgba(255,255,255,.09);
    }

.page-admin-table .sc-ddmenu {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(2,6,23,.96);
    box-shadow: 0 26px 80px rgba(0,0,0,.60);
    padding: 8px;
    min-width: 220px;
}

    .page-admin-table .sc-ddmenu .dropdown-item {
        border-radius: 12px;
        color: rgba(244,247,255,.92);
        padding: 10px 12px;
        font-weight: 800;
    }

        .page-admin-table .sc-ddmenu .dropdown-item:hover {
            background: rgba(255,255,255,.08);
            color: #fff;
        }

        .page-admin-table .sc-ddmenu .dropdown-item.danger {
            color: rgba(255,228,230,.95);
        }

            .page-admin-table .sc-ddmenu .dropdown-item.danger:hover {
                background: rgba(239,68,68,.14);
            }

/* DataTables bottom line */
.page-admin-table .dataTables_info,
.page-admin-table .dataTables_paginate {
    color: rgba(226,232,240,.70) !important;
}

/* =========================================================
   ADMIN FORM (Create Capacitaciones)
   ========================================================= */

.page-admin-form .content-card {
    min-height: auto !important;
}

.page-admin-form .form-shell {
    max-width: 1100px;
    margin: 0 auto;
}

.page-admin-form .form-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.page-admin-form .form-kicker {
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(226,232,240,.62);
}

.page-admin-form .form-title {
    margin: 6px 0 4px;
    font-weight: 900;
    font-size: 2.05rem;
    line-height: 1.05;
}

.page-admin-form .form-sub {
    color: rgba(226,232,240,.76);
    font-size: 1.02rem;
}

/* Cards */
.page-admin-form .sc-card {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
    box-shadow: 0 26px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.035) inset;
    overflow: hidden;
}

    .page-admin-form .sc-card .cap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        background: linear-gradient(180deg, rgba(2,6,23,.70), rgba(2,6,23,.44));
        border-bottom: 1px solid rgba(255,255,255,.10);
        font-weight: 900;
        color: rgba(244,247,255,.92);
    }

    .page-admin-form .sc-card .body {
        padding: 14px;
    }

.page-admin-form .sc-fieldlabel {
    font-weight: 850;
    color: rgba(244,247,255,.92);
    margin-bottom: 6px;
}

.page-admin-form .sc-help {
    color: rgba(226,232,240,.70);
    font-size: .92rem;
    margin-top: 8px;
}

/* Inputs (más “app”, menos Excel) */
.page-admin-form .form-control {
    border-radius: 16px !important;
    background: rgba(0,0,0,.22) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(244,247,255,.92) !important;
    padding: 12px 14px !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.18);
}

    .page-admin-form .form-control:focus {
        border-color: rgba(56,189,248,.40) !important;
        box-shadow: 0 0 0 0.18rem rgba(59,130,246,.22) !important;
        background: rgba(0,0,0,.28) !important;
    }

/* Input groups for date w/ icon */
.page-admin-form .input-group .input-group-text {
    border-radius: 16px 0 0 16px !important;
    background: rgba(0,0,0,.22) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(244,247,255,.82);
}

.page-admin-form .input-group .form-control {
    border-radius: 0 16px 16px 0 !important;
}

/* Footer actions */
.page-admin-form .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 0 0;
}
/* =========================================================
   SAGA CLASS – DETAILS VIEW (AdmCapa/Details)
   ========================================================= */
.page-admin-details .details-shell {
    max-width: 1100px;
    margin: 0 auto;
}

.page-admin-details .details-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.page-admin-details .details-kicker {
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(226,232,240,.62);
}

.page-admin-details .details-title {
    margin: 6px 0 4px;
    font-weight: 900;
    font-size: 2.05rem;
    line-height: 1.05;
}

.page-admin-details .details-sub {
    color: rgba(226,232,240,.76);
    font-size: 1.02rem;
}

.page-admin-details .details-card {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
    box-shadow: 0 26px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.035) inset;
    overflow: hidden;
}

    .page-admin-details .details-card .cap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        background: linear-gradient(180deg, rgba(2,6,23,.70), rgba(2,6,23,.44));
        border-bottom: 1px solid rgba(255,255,255,.10);
        font-weight: 900;
        color: rgba(244,247,255,.92);
    }

    .page-admin-details .details-card .body {
        padding: 14px;
    }

.page-admin-details .kv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 992px) {
    .page-admin-details .kv-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.page-admin-details .kv {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .page-admin-details .kv .k {
        color: rgba(226,232,240,.70);
        font-weight: 850;
    }

    .page-admin-details .kv .v {
        color: rgba(244,247,255,.92);
        font-weight: 900;
        text-align: right;
        word-break: break-word;
    }

        .page-admin-details .kv .v .badge {
            border-radius: 999px;
            background: rgba(0,0,0,.22);
            border: 1px solid rgba(255,255,255,.12);
            color: rgba(244,247,255,.92);
            padding: 7px 10px;
            font-weight: 900;
        }

.page-admin-details .details-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

/* Si no los tienes ya (por el index/create) */
.btn-saga-primary {
    background: linear-gradient(135deg, rgba(59,130,246,.98) 0%, rgba(56,189,248,.92) 55%, rgba(29,78,216,.98) 100%);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff !important;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 18px 46px rgba(59,130,246,.22);
}

    .btn-saga-primary:hover {
        filter: brightness(1.03);
    }

.btn-saga-ghost {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(244,247,255,.92) !important;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 800;
}

    .btn-saga-ghost:hover {
        background: rgba(255,255,255,.09);
    }
/* =========================================================
   SAGA CLASS – FORMS (Create/Edit)
   ========================================================= */
.page-admin-form .form-shell {
    max-width: 1200px;
    margin: 0 auto;
}

.page-admin-form .form-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 14px;
}

.page-admin-form .form-kicker {
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(226,232,240,.62);
}

.page-admin-form .form-title {
    margin: 6px 0 4px;
    font-weight: 900;
    font-size: 2.05rem;
    line-height: 1.05;
}

.page-admin-form .form-sub {
    color: rgba(226,232,240,.76);
    font-size: 1.02rem;
}

.page-admin-form .form-card {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
    box-shadow: 0 26px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.035) inset;
    padding: 14px;
}

.page-admin-form .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 992px) {
    .page-admin-form .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .page-admin-form .sc-panel-wide {
        grid-column: 1 / -1;
    }
}

.page-admin-form .sc-panel {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.16);
    overflow: hidden;
}

.page-admin-form .sc-panel-head {
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(2,6,23,.68), rgba(2,6,23,.44));
    border-bottom: 1px solid rgba(255,255,255,.10);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.page-admin-form .sc-panel-title {
    font-weight: 900;
    color: rgba(244,247,255,.92);
}

.page-admin-form .sc-panel-sub {
    color: rgba(226,232,240,.68);
    font-size: .92rem;
}

.page-admin-form .sc-panel-body {
    padding: 12px;
}

.page-admin-form .sc-label {
    color: rgba(226,232,240,.78);
    font-weight: 850;
    margin-bottom: 6px;
}

.page-admin-form .sc-input {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.20);
    padding: 10px 12px;
}

.page-admin-form .sc-ico {
    opacity: .85;
    color: rgba(226,232,240,.72);
}

.page-admin-form .sc-ico-right {
    margin-left: auto;
    opacity: .55;
    color: rgba(226,232,240,.72);
}

.page-admin-form .sc-control {
    background: transparent !important;
    border: 0 !important;
    color: rgba(244,247,255,.92) !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
}

    .page-admin-form .sc-control::placeholder {
        color: rgba(226,232,240,.44);
    }

.page-admin-form .sc-hint {
    margin-top: 8px;
    color: rgba(226,232,240,.62);
    font-size: .92rem;
}

.page-admin-form .sc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    margin-right: 8px;
}

.page-admin-form .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

/* Flatpickr theme quick match */
.flatpickr-calendar {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(8,14,28,.98) !important;
    color: rgba(244,247,255,.92) !important;
    box-shadow: 0 26px 70px rgba(0,0,0,.55) !important;
}

.flatpickr-day {
    border-radius: 10px !important;
}

    .flatpickr-day:hover {
        background: rgba(59,130,246,.22) !important;
    }

    .flatpickr-day.selected {
        background: rgba(59,130,246,.85) !important;
        border-color: rgba(59,130,246,.85) !important;
    }

.flatpickr-weekday, .flatpickr-current-month, .flatpickr-monthDropdown-months {
    color: rgba(244,247,255,.92) !important;
}
/* ==============================
   SAGA CLASS – LISTAS
============================== */

.page-admin-list {
    padding: 12px;
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 14px;
}

.list-kicker {
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(226,232,240,.6);
}

.list-title {
    font-size: 1.8rem;
    font-weight: 900;
    margin: 2px 0;
}

.list-sub {
    color: rgba(226,232,240,.7);
}

/* BOTONES */
.btn-saga-primary {
    background: linear-gradient(135deg,#2563eb,#3b82f6);
    color: #fff;
    border-radius: 10px;
    padding: 8px 14px;
    border: none;
    font-weight: 600;
}

    .btn-saga-primary:hover {
        opacity: .9;
    }

.btn-saga-action {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    border-radius: 10px;
}

/* TABLA */
.table-saga-wrapper {
    border-radius: 18px;
    overflow: hidden;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.12);
}

.table-saga {
    margin: 0;
    color: #e5e7eb;
}

    .table-saga thead {
        background: rgba(255,255,255,.07);
    }

    .table-saga th {
        font-size: .82rem;
        font-weight: 700;
        color: #cbd5f5;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .table-saga td {
        border-bottom: 1px solid rgba(255,255,255,.06);
        vertical-align: middle;
    }

    .table-saga tr:hover {
        background: rgba(255,255,255,.03);
    }

/* ELEMENTOS */
.badge-saga {
    background: rgba(59,130,246,.15);
    color: #93c5fd;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.link-doc {
    color: #93c5fd;
    text-decoration: none;
}

    .link-doc:hover {
        text-decoration: underline;
    }

.pill-ok {
    background: rgba(34,197,94,.15);
    color: #86efac;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

/* DROPDOWN */
.dropdown-menu {
    background: #0b1220;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
}

.dropdown-item {
    color: #e5e7eb;
}

    .dropdown-item:hover {
        background: rgba(59,130,246,.15);
    }
/* =========================================================
   FIX: LISTAS (page-admin-list) debe GANAR al legacy table
   Pegar al FINAL del site.css
   ========================================================= */

/* Botón ghost faltante (porque en tu base solo está btn-SagaGhost, no btn-saga-ghost) */
.btn-saga-ghost {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(244,247,255,.92) !important;
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .btn-saga-ghost:hover {
        background: rgba(255,255,255,.09);
        color: #fff !important;
    }

/* OVERRIDE fuerte del THEAD blanco legacy SOLO en page-admin-list */
.page-admin-list .table-saga thead th {
    background: rgba(2,6,23,.92) !important;
    color: rgba(244,247,255,.92) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    font-weight: 850 !important;
}

/* Body rows (para que no use el background legacy) */
.page-admin-list .table-saga tbody td {
    background: rgba(0,0,0,.14) !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    color: rgba(244,247,255,.90) !important;
}

.page-admin-list .table-saga tbody tr:nth-child(even) td {
    background: rgba(0,0,0,.20) !important;
}

.page-admin-list .table-saga tbody tr:hover td {
    background: rgba(59,130,246,.12) !important;
}

/* Dropdown menú pro (ya lo tienes, pero aseguro que gane aquí también) */
.page-admin-list .dropdown-menu {
    background: rgba(2,6,23,.94) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 26px 80px rgba(0,0,0,.55) !important;
}

.page-admin-list .dropdown-item.danger {
    color: rgba(255,228,230,.95) !important;
}

    .page-admin-list .dropdown-item.danger:hover {
        background: rgba(239,68,68,.14) !important;
    }
    /* =========================================================
   FIX: Dropdown recortado dentro de tabla / wrapper
   ========================================================= */

.page-admin-list .table-saga-wrapper{
  overflow-x: auto;     /* permite scroll horizontal si hace falta */
  overflow-y: visible;  /* IMPORTANTÍSIMO: deja salir el dropdown */
  position: relative;
}

/* Si tu .content-card tiene overflow hidden, esto también es clave */
.page-admin-list.content-card{
  overflow: visible !important;
}

/* Asegura que el menú esté por encima */
.page-admin-list .dropdown-menu{
  z-index: 9999 !important;
}
/* Toolbar mejor distribuida */
.sc-toolbar-2 {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sc-tools {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sc-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.sc-search {
    position: relative;
    min-width: 320px;
    flex: 1;
}

.sc-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-sort-select {
    min-width: 210px;
}

.sc-pill-soft {
    opacity: .92;
}
/* ===============================
   Temas pendientes - estética PRO
   =============================== */

.sc-panel {
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid rgba(148,163,184,.16);
    box-shadow: 0 18px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
}

.sc-toolbar-pro {
    display: grid;
    grid-template-columns: 1fr 260px auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: rgba(2,6,23,.28);
    border: 1px solid rgba(148,163,184,.14);
}

@media (max-width: 1100px) {
    .sc-toolbar-pro {
        grid-template-columns: 1fr;
    }
}

/* --- Search pro --- */
.sc-search-pro {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(2,6,23,.35);
    border: 1px solid rgba(148,163,184,.14);
}

    .sc-search-pro .bi-search {
        opacity: .85;
        font-size: 1.05rem;
    }

    .sc-search-pro .sc-search-input {
        border: 0 !important;
        background: transparent !important;
        color: rgba(241,245,249,.92) !important;
        padding: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }

        .sc-search-pro .sc-search-input::placeholder {
            color: rgba(226,232,240,.55);
        }

/* Botón X elegante dentro del input */
.sc-iconbtn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(15,23,42,.30);
    color: rgba(241,245,249,.9);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

    .sc-iconbtn:hover {
        transform: translateY(-1px);
        background: rgba(15,23,42,.45);
        border-color: rgba(148,163,184,.26);
    }

/* --- Sort pro --- */
.sc-sort-pro {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(2,6,23,.35);
    border: 1px solid rgba(148,163,184,.14);
}

    .sc-sort-pro .bi-arrow-down-up {
        opacity: .85;
    }

.sc-sort-select {
    border: 0 !important;
    background: transparent !important;
    color: rgba(241,245,249,.92) !important;
    box-shadow: none !important;
    padding-left: 0 !important;
}

/* --- Hint pro --- */
.sc-hint-pro {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(59,130,246,.10);
    border: 1px solid rgba(59,130,246,.18);
    color: rgba(241,245,249,.88);
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .sc-hint-pro {
        white-space: normal;
        border-radius: 14px;
    }
}

/* Pills más “premium” */
.sc-pill {
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(2,6,23,.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Empty state más elegante */
.sc-empty {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 16px;
    background: rgba(2,6,23,.28);
    border: 1px dashed rgba(148,163,184,.22);
}

.sc-empty-ico {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.22);
}

.sc-empty-title {
    font-weight: 700;
}

.sc-empty-sub {
    color: rgba(226,232,240,.68);
}
/* ===== Input búsqueda dark glass ===== */

.sc-search input,
.sc-search-input {
    background: rgba(15, 23, 42, 0.55) !important;
    color: rgba(241, 245, 249, 0.95) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.25);
    transition: all .18s ease;
}

    /* Placeholder */
    .sc-search input::placeholder,
    .sc-search-input::placeholder {
        color: rgba(226, 232, 240, 0.55);
    }

    /* Hover */
    .sc-search input:hover {
        background: rgba(15, 23, 42, 0.65) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
    }

    /* Focus elegante (no blanco, no azul chillón) */
    .sc-search input:focus {
        background: rgba(15, 23, 42, 0.75) !important;
        border-color: rgba(56, 189, 248, 0.65) !important;
        box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35), 0 10px 30px rgba(0,0,0,.35);
        outline: none !important;
    }
/* ===== Tabla dark glass ===== */

.sc-table {
    color: rgba(241,245,249,.92);
}

    .sc-table thead th {
        font-size: .75rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: rgba(226,232,240,.7);
        border-bottom: 1px solid rgba(148,163,184,.2);
    }

    .sc-table tbody tr {
        transition: background .15s ease;
    }

        .sc-table tbody tr:hover {
            background: rgba(255,255,255,.03);
        }

/* Badge valor */
.sc-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .8rem;
    background: rgba(56,189,248,.15);
    border: 1px solid rgba(56,189,248,.35);
}

/* Botón ghost */
.btn-saga-ghost {
    background: transparent;
    border: 1px solid rgba(148,163,184,.2);
    color: rgba(241,245,249,.9);
}

    .btn-saga-ghost:hover {
        background: rgba(255,255,255,.06);
    }

/* Dropdown dark */
.dropdown-menu-dark {
    background: rgba(2,6,23,.95);
    border: 1px solid rgba(148,163,184,.2);
}
/* ===== Details card ===== */

.sc-detail-card {
    padding: 18px;
}

.sc-detail-top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.sc-detail-ico {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59,130,246,.14);
    border: 1px solid rgba(59,130,246,.28);
    color: rgba(241,245,249,.92);
    flex: 0 0 auto;
}

.sc-detail-title {
    flex: 1 1 auto;
    min-width: 240px;
}

.sc-detail-label {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(226,232,240,.62);
}

.sc-detail-question {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(241,245,249,.92);
    margin-top: 2px;
}

.sc-detail-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.sc-hr {
    border: 0;
    height: 1px;
    background: rgba(148,163,184,.18);
    margin: 14px 0;
}

.sc-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .sc-details-grid {
        grid-template-columns: 1fr;
    }

    .sc-detail-top {
        flex-direction: column;
    }

    .sc-detail-badges {
        justify-content: flex-start;
    }
}

.sc-field {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(2,6,23,.28);
    border: 1px solid rgba(148,163,184,.14);
}

.sc-field-span {
    grid-column: 1 / -1;
}

.sc-field-k {
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(226,232,240,.62);
}

.sc-field-v {
    margin-top: 4px;
    color: rgba(241,245,249,.92);
}

.sc-actions-bottom {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

/* Reusa tus botones/badges si ya existen */
.btn-saga-primary {
    background: rgba(59,130,246,.95);
    border: 1px solid rgba(59,130,246,.35);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

    .btn-saga-primary:hover {
        background: rgba(59,130,246,1);
    }

.btn-saga-ghost {
    background: transparent;
    border: 1px solid rgba(148,163,184,.25);
    color: rgba(241,245,249,.9);
}

    .btn-saga-ghost:hover {
        background: rgba(255,255,255,.08);
    }

.sc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    background: rgba(56,189,248,.14);
    border: 1px solid rgba(56,189,248,.35);
    color: #e0f2fe;
}

.sc-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(15,23,42,.35);
    border: 1px solid rgba(148,163,184,.18);
    color: rgba(241,245,249,.9);
}

.sc-pill-soft {
    opacity: .92;
}

.sc-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
/* ===== Form card ===== */
.sc-form-card {
    padding: 18px;
}

.sc-form-top {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.sc-spacer {
    flex: 1 1 auto;
}

.sc-label {
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(226,232,240,.7);
    margin-bottom: 6px;
}

.sc-help {
    margin-top: 6px;
    font-size: .85rem;
    color: rgba(226,232,240,.55);
}

/* ===== Dark glass input wrapper ===== */
.sc-inputwrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(15,23,42,.55);
    border: 1px solid rgba(148,163,184,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 28px rgba(0,0,0,.25);
    transition: all .18s ease;
}

    .sc-inputwrap:hover {
        background: rgba(15,23,42,.65);
        border-color: rgba(148,163,184,.26);
    }

.sc-inputico {
    opacity: .85;
    font-size: 1.05rem;
    color: rgba(241,245,249,.85);
}

.sc-input {
    border: 0 !important;
    background: transparent !important;
    color: rgba(241,245,249,.95) !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100%;
}

    .sc-input::placeholder {
        color: rgba(226,232,240,.5);
    }

.sc-inputwrap:focus-within {
    background: rgba(15,23,42,.78);
    border-color: rgba(56,189,248,.65);
    box-shadow: 0 0 0 1px rgba(56,189,248,.35), 0 14px 38px rgba(0,0,0,.35);
}

/* suffix pts */
.sc-suffix {
    font-size: .85rem;
    color: rgba(226,232,240,.7);
    padding-left: 10px;
    border-left: 1px solid rgba(148,163,184,.18);
    white-space: nowrap;
}

/* Reusa estilos si ya existen */
.btn-saga-primary {
    background: rgba(59,130,246,.95);
    border: 1px solid rgba(59,130,246,.35);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

    .btn-saga-primary:hover {
        background: rgba(59,130,246,1);
    }

.btn-saga-ghost {
    background: transparent;
    border: 1px solid rgba(148,163,184,.25);
    color: rgba(241,245,249,.9);
}

    .btn-saga-ghost:hover {
        background: rgba(255,255,255,.08);
    }

.sc-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(15,23,42,.35);
    border: 1px solid rgba(148,163,184,.18);
    color: rgba(241,245,249,.9);
}

.sc-pill-soft {
    opacity: .92;
}

.sc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    background: rgba(56,189,248,.14);
    border: 1px solid rgba(56,189,248,.35);
    color: #e0f2fe;
}

.sc-hr {
    border: 0;
    height: 1px;
    background: rgba(148,163,184,.18);
    margin: 14px 0;
}

.sc-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
/* ===== Delete / Danger UI ===== */

.sc-danger-card {
    padding: 18px;
}

.sc-danger-callout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 18px;
    background: rgba(220,38,38,.10);
    border: 1px solid rgba(220,38,38,.22);
}

.sc-danger-ico {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220,38,38,.16);
    border: 1px solid rgba(220,38,38,.28);
    color: rgba(254,226,226,.95);
    flex: 0 0 auto;
    font-size: 1.1rem;
}

.sc-danger-text {
    flex: 1 1 auto;
    min-width: 240px;
}

.sc-danger-title {
    font-weight: 800;
    color: rgba(254,226,226,.95);
    margin-top: 2px;
}

.sc-danger-sub {
    margin-top: 4px;
    color: rgba(254,226,226,.75);
    font-size: .92rem;
}

.sc-danger-pillwrap {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.sc-pill-danger {
    background: rgba(220,38,38,.14);
    border-color: rgba(220,38,38,.30);
    color: rgba(254,226,226,.95);
}

/* Botón peligro */
.btn-saga-danger {
    background: rgba(220,38,38,.92);
    border: 1px solid rgba(220,38,38,.35);
    color: #fff;
    box-shadow: 0 10px 26px rgba(0,0,0,.30);
}

    .btn-saga-danger:hover {
        background: rgba(220,38,38,1);
    }

/* Badge valor en delete */
.sc-badge-warn {
    background: rgba(251,146,60,.12);
    border-color: rgba(251,146,60,.28);
    color: rgba(255,237,213,.95);
}
/* Botón peligro - más visible */
.btn-saga-danger {
    background: rgba(220,38,38,.96) !important;
    border: 1px solid rgba(220,38,38,.45) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(220,38,38,.18) inset;
}

    .btn-saga-danger:hover {
        background: rgba(220,38,38,1) !important;
        border-color: rgba(252,165,165,.55) !important;
        transform: translateY(-1px);
    }

    .btn-saga-danger:active {
        transform: translateY(0);
    }

    /* Si por accidente quedó con opacity o disabled */
    .btn-saga-danger,
    .btn-saga-danger * {
        opacity: 1 !important;
    }
/* ===== DataTables integrado a SagaClass ===== */

.sc-tablebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 16px;
    background: rgba(2,6,23,.28);
    border: 1px solid rgba(148,163,184,.14);
    margin-bottom: 10px;
}

.sc-tablebar-title {
    font-weight: 800;
    color: rgba(241,245,249,.92);
}

.sc-tablebar-meta {
    font-size: .9rem;
    color: rgba(226,232,240,.62);
}

.sc-tablebar-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.sc-tablebar-right {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Oculta contenedores internos del dom personalizado */
.dt-hidden-top, .dt-hidden-bottom {
    display: none;
}

/* Length select */
.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(226,232,240,.65);
    margin: 0;
}

.dataTables_length select {
    border-radius: 12px;
    padding: 6px 10px;
    background: rgba(15,23,42,.55);
    border: 1px solid rgba(148,163,184,.18);
    color: rgba(241,245,249,.92);
    outline: none;
}

/* Search */
.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(226,232,240,.65);
    margin: 0;
}

.dataTables_filter input {
    border-radius: 12px;
    padding: 7px 12px;
    background: rgba(15,23,42,.55);
    border: 1px solid rgba(148,163,184,.18);
    color: rgba(241,245,249,.92);
    outline: none;
}

    .dataTables_filter input:focus {
        border-color: rgba(56,189,248,.65);
        box-shadow: 0 0 0 1px rgba(56,189,248,.35);
    }

/* Table look */
.sc-tablewrap {
    border-radius: 18px;
    overflow: auto;
    border: 1px solid rgba(148,163,184,.14);
}

.sc-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(2,6,23,.55);
    border-bottom: 1px solid rgba(148,163,184,.16);
    color: rgba(241,245,249,.85);
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sc-table tbody td {
    border-top: 1px solid rgba(148,163,184,.10);
    color: rgba(241,245,249,.90);
}

.sc-table tbody tr:hover {
    background: rgba(56,189,248,.06);
}

/* Paginación */
.dataTables_info {
    color: rgba(226,232,240,.62) !important;
    padding-top: 10px;
}

.dataTables_paginate {
    padding-top: 10px;
}

    .dataTables_paginate .paginate_button {
        border-radius: 10px !important;
        border: 1px solid rgba(148,163,184,.18) !important;
        background: rgba(15,23,42,.45) !important;
        color: rgba(241,245,249,.88) !important;
        margin-left: 6px !important;
    }

        .dataTables_paginate .paginate_button.current {
            background: rgba(59,130,246,.40) !important;
            border-color: rgba(59,130,246,.45) !important;
        }

        .dataTables_paginate .paginate_button:hover {
            background: rgba(255,255,255,.08) !important;
        }

/* Chip simple para dependencia */
.sc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(15,23,42,.35);
    border: 1px solid rgba(148,163,184,.14);
    color: rgba(241,245,249,.85);
}
/* ===== SAGA CLASS: Create User (UI upgrade) ===== */

.sc-page {
    max-width: 980px;
    margin: 18px auto;
    padding: 0 14px;
}

.sc-header {
    padding: 10px 6px 14px;
    border-bottom: 1px solid rgba(148,163,184,.14);
    margin-bottom: 14px;
}

.sc-title {
    margin: 0;
    font-weight: 700;
    letter-spacing: .3px;
    color: rgba(241,245,249,.92);
}

.sc-subtitle {
    margin: 6px 0 0;
    color: rgba(226,232,240,.68);
    font-size: .95rem;
}

.sc-card {
    background: rgba(2,6,23,.40);
    border: 1px solid rgba(148,163,184,.14);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
}

.sc-label {
    color: rgba(226,232,240,.72);
    font-size: .90rem;
    margin-bottom: 6px;
}

.sc-input, .sc-select {
    background: rgba(15,23,42,.55) !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    color: rgba(241,245,249,.92) !important;
    border-radius: 14px !important;
    padding: .70rem .85rem !important;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

    .sc-input::placeholder {
        color: rgba(226,232,240,.45);
    }

    .sc-input:focus, .sc-select:focus {
        transform: translateY(-1px);
        border-color: rgba(56,189,248,.55) !important;
        box-shadow: 0 0 0 .22rem rgba(56,189,248,.12) !important;
    }

.sc-btn-primary {
    border: 1px solid rgba(59,130,246,.55);
    background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(37,99,235,.92));
    color: #fff;
    border-radius: 14px;
    padding: .70rem 1.05rem;
    font-weight: 700;
}

    .sc-btn-primary:hover {
        filter: brightness(1.05);
    }

.sc-btn-secondary {
    border: 1px solid rgba(148,163,184,.20);
    background: rgba(15,23,42,.35);
    color: rgba(241,245,249,.92);
    border-radius: 14px;
    padding: .70rem 1.05rem;
    font-weight: 600;
}

.sc-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(56,189,248,.95);
    margin-right: 8px;
    box-shadow: 0 0 0 4px rgba(56,189,248,.10);
}

/* Validación Bootstrap (solo cuando ya intentó enviar) */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: rgba(248,113,113,.75) !important;
    box-shadow: 0 0 0 .22rem rgba(248,113,113,.10) !important;
}

.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: rgba(34,197,94,.55) !important;
    box-shadow: 0 0 0 .22rem rgba(34,197,94,.10) !important;
}
/* ===== SAGA CLASS – Users Table (UI upgrade) ===== */

.sc-page {
    max-width: 1280px;
    margin: 18px auto;
    padding: 0 14px;
}

.sc-header {
    padding: 10px 6px 14px;
    border-bottom: 1px solid rgba(148,163,184,.14);
    margin-bottom: 14px;
}

.sc-title {
    margin: 0;
    font-weight: 800;
    letter-spacing: .3px;
    color: rgba(241,245,249,.92);
}

.sc-subtitle {
    margin: 6px 0 0;
    color: rgba(226,232,240,.68);
    font-size: .95rem;
}

.sc-card {
    background: rgba(2,6,23,.40);
    border: 1px solid rgba(148,163,184,.14);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
}

.sc-table-wrap {
    padding: 10px;
}

.sc-table {
    color: rgba(241,245,249,.92);
    border-color: rgba(148,163,184,.12);
}

    .sc-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: rgba(15,23,42,.72);
        border-bottom: 1px solid rgba(148,163,184,.16) !important;
        color: rgba(226,232,240,.85);
        font-weight: 700;
        font-size: .90rem;
        letter-spacing: .2px;
        white-space: nowrap;
    }

.sc-th, .sc-td {
    border-color: rgba(148,163,184,.10) !important;
    white-space: nowrap;
}

.sc-tr:hover {
    background: rgba(56,189,248,.06);
}

.sc-col-action {
    width: 120px;
}

.sc-btn-warning {
    background: linear-gradient(180deg, rgba(245,158,11,.95), rgba(217,119,6,.92));
    border: 1px solid rgba(245,158,11,.55);
    color: rgba(2,6,23,.92);
    border-radius: 12px;
    font-weight: 800;
    padding: .38rem .65rem;
}

    .sc-btn-warning:hover {
        filter: brightness(1.05);
    }

.sc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .28rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(15,23,42,.45);
    font-size: .82rem;
    font-weight: 800;
}

.sc-badge-role {
    border-color: rgba(59,130,246,.35);
    background: rgba(59,130,246,.14);
}

.sc-badge-neutral {
    border-color: rgba(148,163,184,.22);
    background: rgba(148,163,184,.10);
}

.sc-badge-success {
    border-color: rgba(34,197,94,.35);
    background: rgba(34,197,94,.12);
}

.sc-badge-danger {
    border-color: rgba(248,113,113,.40);
    background: rgba(248,113,113,.12);
}

.sc-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid rgba(148,163,184,.12);
    background: rgba(2,6,23,.22);
}

.sc-muted {
    color: rgba(226,232,240,.60);
    font-size: .90rem;
}
/* Header tabla oscuro (en lugar de table-danger) */
.sc-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(15,23,42,.72);
    border-bottom: 1px solid rgba(148,163,184,.16) !important;
    color: rgba(226,232,240,.85);
    font-weight: 700;
    font-size: .90rem;
    white-space: nowrap;
}

/* Botón peligro (Inhabilitar) acorde SagaClass */
.sc-btn-danger {
    background: linear-gradient(180deg, rgba(239,68,68,.95), rgba(220,38,38,.92));
    border: 1px solid rgba(239,68,68,.55);
    color: #fff;
    border-radius: 12px;
    font-weight: 800;
    padding: .38rem .65rem;
}

    .sc-btn-danger:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

/* Hover fila suave */
.sc-tr:hover {
    background: rgba(239,68,68,.06);
}
/* Botón INFO (Desbloquear) en cian, acorde al tema */
.sc-btn-info {
    background: linear-gradient(180deg, rgba(56,189,248,.95), rgba(14,165,233,.92));
    border: 1px solid rgba(56,189,248,.55);
    color: rgba(2,6,23,.92);
    border-radius: 12px;
    font-weight: 900;
    padding: .38rem .65rem;
}

    .sc-btn-info:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

/* Hover fila sutil (tono cian) */
.sc-tr:hover {
    background: rgba(56,189,248,.06);
}