/* ── Variables Superhero ─────────────────────── */
:root {
    --sidebar-width: 255px;
    --sidebar-bg: #1a2a38;
    --sidebar-brand-bg: #DF691A;
    --sidebar-text: #c8d3dc;
    --sidebar-active-bg: rgba(223, 105, 26, 0.18);
    --sidebar-active-text: #DF691A;
    --sidebar-hover-bg: rgba(255,255,255,0.06);
    --topbar-bg: #4e5d6c;
    --transition: 0.25s ease;
}

/* ── Reset base ──────────────────────────────── */
body {
    min-height: 100vh;
    font-size: 0.9rem;
}

/* ── Wrapper principal ───────────────────────── */
#wrapper {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────── */
#sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    min-height: 100vh;
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: margin-left var(--transition);
    z-index: 100;
    box-shadow: 2px 0 8px rgba(0,0,0,0.3);
}

#wrapper.sidebar-collapsed #sidebar {
    margin-left: calc(-1 * var(--sidebar-width));
}

/* Brand */
.sidebar-brand {
    background-color: var(--sidebar-brand-bg);
    padding: 1.1rem 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.sidebar-brand small {
    display: block;
    font-size: 0.65rem;
    font-weight: 400;
    opacity: 0.85;
    letter-spacing: 0.03em;
    margin-top: 1px;
}
.sidebar-brand:hover { color: #fff; background-color: #c85d16; }

/* Divider label */
.sidebar-label {
    padding: 0.85rem 1rem 0.3rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(200,211,220,0.45);
    font-weight: 600;
}

/* Nav links */
#sidebar .nav-link {
    color: var(--sidebar-text);
    padding: 0.6rem 1.25rem;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: background var(--transition), color var(--transition);
    font-size: 0.875rem;
}
#sidebar .nav-link:hover {
    background: var(--sidebar-hover-bg);
    color: #fff;
}
#sidebar .nav-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
    border-left: 3px solid var(--sidebar-active-text);
}

/* Submenu toggle chevron */
#sidebar .nav-link .chevron {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform var(--transition);
    opacity: 0.6;
}
#sidebar .nav-link[aria-expanded="true"] .chevron {
    transform: rotate(90deg);
}

/* Submenu */
.sidebar-submenu {
    background-color: rgba(0,0,0,0.15);
}
.sidebar-submenu .nav-link {
    padding-left: 2.5rem;
    font-size: 0.83rem;
}

/* ── Content wrapper ─────────────────────────── */
#content-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Topbar ──────────────────────────────────── */
#topbar {
    background-color: var(--topbar-bg);
    padding: 0 1.25rem;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    position: sticky;
    top: 0;
    z-index: 99;
}
#sidebar-toggle {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    line-height: 1;
    transition: color var(--transition);
}
#sidebar-toggle:hover { color: #fff; }

.topbar-user {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
}

/* ── Main content ────────────────────────────── */
#main-content {
    flex: 1;
    padding: 1.75rem 1.75rem 2rem;
}

/* ── Page header ─────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.page-header h4 {
    margin: 0;
    font-weight: 700;
    color: #ebebeb;
}

/* ── Cards ───────────────────────────────────── */
.card {
    border: 1px solid rgba(255,255,255,0.08);
}

/* ── Tables ──────────────────────────────────── */
.table thead th {
    background-color: rgba(0,0,0,0.25);
    border-bottom: none;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ── btn-secondary / btn-outline-secondary: visibles sobre fondo oscuro ── */
.btn-secondary {
    --bs-btn-bg:             #6c8091;
    --bs-btn-border-color:   #6c8091;
    --bs-btn-color:          #fff;
    --bs-btn-hover-bg:       #5a6e7d;
    --bs-btn-hover-border-color: #5a6e7d;
    --bs-btn-hover-color:    #fff;
    --bs-btn-active-bg:      #4e6070;
    --bs-btn-active-border-color: #4e6070;
    --bs-btn-active-color:   #fff;
    --bs-btn-disabled-bg:    #6c8091;
    --bs-btn-disabled-border-color: #6c8091;
}

.btn-outline-secondary {
    --bs-btn-color:          #c8d3dc;
    --bs-btn-border-color:   #c8d3dc;
    --bs-btn-hover-color:    #fff;
    --bs-btn-hover-bg:       rgba(200,211,220,0.15);
    --bs-btn-hover-border-color: #c8d3dc;
    --bs-btn-active-color:   #fff;
    --bs-btn-active-bg:      rgba(200,211,220,0.25);
    --bs-btn-active-border-color: #c8d3dc;
    --bs-btn-disabled-color: rgba(200,211,220,0.4);
    --bs-btn-disabled-border-color: rgba(200,211,220,0.25);
}

/* ── Focus rings ─────────────────────────────── */
.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(223,105,26,0.35);
}

/* ── Responsive sidebar ──────────────────────── */
@media (max-width: 767.98px) {
    #sidebar {
        position: fixed;
        left: 0;
        top: 0;
    }
    #wrapper.sidebar-collapsed #sidebar {
        margin-left: calc(-1 * var(--sidebar-width));
    }
    #wrapper:not(.sidebar-collapsed) #content-wrapper {
        margin-left: 0;
    }
}

/* ── Tom Select — ajuste de colores (tema Superhero) ──────────── */
.ts-wrapper .ts-control {
    background-color: #2b3e50 !important;
    color: #d0dce8 !important;
    border-color: rgba(255,255,255,0.18) !important;
}
.ts-wrapper .ts-control input {
    color: #d0dce8 !important;
}
.ts-wrapper .ts-control input::placeholder {
    color: rgba(208,220,232,0.45) !important;
}
.ts-wrapper .ts-control .item {
    color: #d0dce8 !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
}
.ts-dropdown {
    background-color: #2b3e50 !important;
    color: #d0dce8 !important;
    border-color: rgba(255,255,255,0.18) !important;
}
.ts-dropdown .option {
    color: #d0dce8 !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: #3d6b8c !important;
    color: #fff !important;
}
.ts-dropdown .optgroup-header {
    color: rgba(208,220,232,0.55) !important;
    background-color: #253647 !important;
}
/* Dropdown anclado a body (dentro de modal) — debe quedar sobre z-index 1055 del modal */
body > .ts-dropdown { z-index: 1070 !important; }
/* Chips de filtro (jurisdicción, etc.) */
.chip-filter {
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    padding: .18rem .7rem;
    font-size: .75rem;
    cursor: pointer;
    background: transparent;
    color: rgba(208,220,232,0.65);
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
    line-height: 1.5;
}
.chip-filter:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
    border-color: rgba(255,255,255,0.35);
}
.chip-filter.active {
    color: #fff;
    border-color: transparent;
}

/* Sub-text en opciones de afiliado */
.ts-option-sub {
    font-size: .72rem;
    color: rgba(208,220,232,0.55);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Asignación de marca duplicada (ABM usuarios) */
.asignacion-duplicada {
    outline: 1px solid #dc3545;
    border-radius: .375rem;
    background: rgba(220,53,69,0.08);
}