:root {
    --bg-primary: #0F1115;
    --bg-secondary: #1A1D23;
    --card-bg: #232730;
    --surface-elevated: #2F3440;

    --text-primary: #FFFFFF;
    --text-secondary: #A0A6B1;
    --text-muted: #6B7280;

    --risk-critical: #FF1F1F;
    --risk-high: #FF8A00;
    --risk-medium: #FFD60A;
    --risk-low: #30D158;

    --accent-blue: #3B82F6;
    --accent-violet: #7C3AED;

    --border-subtle: rgba(160, 166, 177, 0.22);
    --border-strong: rgba(160, 166, 177, 0.34);
    --overlay-soft: rgba(160, 166, 177, 0.08);
    --overlay-strong: rgba(160, 166, 177, 0.16);
    --focus-ring: rgba(59, 130, 246, 0.28);

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --shadow-lg: 0 16px 30px rgba(0, 0, 0, 0.36);

    /* Compatibility aliases for legacy styles */
    --primary-color: var(--accent-blue);
    --primary-light: #60A5FA;
    --secondary-color: var(--accent-blue);
    --accent-color: var(--risk-critical);
    --success-color: var(--risk-low);
    --warning-color: var(--risk-medium);
    --danger-color: var(--risk-critical);
    --bg-dark: var(--bg-primary);
    --bg-card: var(--card-bg);
    --bg-card-hover: var(--surface-elevated);
    --bg-surface: var(--bg-secondary);
    --border-color: var(--border-subtle);
    --sidebar-gradient-start: #13161D;
    --sidebar-gradient-end: #171B23;
    --sidebar-link-hover-bg: rgba(59, 130, 246, 0.13);
    --sidebar-link-active-color: var(--text-primary);
    --heading-color: var(--text-primary);
    --strong-color: var(--text-primary);
    --input-bg: var(--bg-secondary);
    --input-focus-bg: rgba(47, 52, 64, 0.95);

    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-border-color: var(--border-subtle);
}

* {
    scrollbar-color: var(--surface-elevated) var(--bg-primary);
}

body {
    background:
        radial-gradient(ellipse at 10% -10%, rgba(59, 130, 246, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 95% 0%, rgba(124, 58, 237, 0.11) 0%, transparent 35%),
        linear-gradient(180deg, #11141A 0%, var(--bg-primary) 45%, #0D0F13 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    letter-spacing: 0.1px;
}

a {
    color: var(--accent-blue);
}

a:hover {
    color: #60A5FA;
}

.sidebar {
    background: linear-gradient(180deg, var(--sidebar-gradient-start) 0%, var(--sidebar-gradient-end) 100%);
    border-right: 1px solid var(--border-subtle);
}

.brand-logo {
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: initial;
    border-bottom: 1px solid var(--border-subtle);
}

.brand-logo i {
    color: var(--accent-blue);
}

.sidebar .sidebar-link {
    color: var(--text-secondary);
    border-left-color: transparent;
}

.sidebar .sidebar-link i {
    color: var(--text-muted);
}

.sidebar .sidebar-link:hover,
.sidebar .sidebar-link.active {
    background: var(--sidebar-link-hover-bg);
    border-left-color: var(--accent-blue);
    color: var(--text-primary);
}

.sidebar .sidebar-link:hover i,
.sidebar .sidebar-link.active i {
    color: var(--accent-blue);
}

body[data-demo-focus="true"] .sidebar .sidebar-link.opn-demo-secondary:not(.active) {
    opacity: 0.62;
}

body[data-demo-focus="true"] .sidebar .sidebar-link.opn-demo-secondary:not(.active):hover {
    opacity: 0.86;
}

.sidebar-footer {
    border-top: 1px solid var(--border-subtle);
}

.sidebar-user {
    color: var(--text-secondary);
}

.main-content {
    padding: 24px 26px 32px;
}

.page-title {
    color: var(--text-primary);
    font-size: 1.52rem;
    font-weight: 650;
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 0.91rem;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--text-muted);
    --bs-breadcrumb-item-active-color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: rgba(26, 29, 35, 0.72);
    padding: 0.38rem 0.72rem;
    width: fit-content;
    max-width: 100%;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.breadcrumb-item.active {
    color: var(--text-primary);
}

.stat-card,
.card,
.card-custom,
.modal-content {
    background: linear-gradient(180deg, rgba(41, 46, 56, 0.98) 0%, rgba(35, 39, 48, 0.98) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20);
}

.stat-card {
    display: block;
    padding: 18px;
    min-height: 124px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
}

.stat-card .stat-value {
    color: var(--text-primary);
    font-size: 2rem;
    line-height: 1.1;
}

.stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 36%);
}

.stat-card.kpi-critical {
    border-color: rgba(255, 31, 31, 0.38);
}

.stat-card.kpi-high {
    border-color: rgba(255, 138, 0, 0.35);
}

.stat-card.kpi-medium {
    border-color: rgba(255, 214, 10, 0.35);
}

.stat-card.kpi-low {
    border-color: rgba(48, 209, 88, 0.35);
}

.stat-card .stat-icon {
    border-radius: var(--radius-md);
}

.kpi-icon-critical {
    background: rgba(255, 31, 31, 0.16);
    color: var(--risk-critical);
}

.kpi-icon-high {
    background: rgba(255, 138, 0, 0.16);
    color: var(--risk-high);
}

.kpi-icon-tracking {
    background: rgba(124, 58, 237, 0.2);
    color: #B794F6;
}

.kpi-icon-total {
    background: rgba(59, 130, 246, 0.2);
    color: #93C5FD;
}

.card .card-header,
.card-custom .card-header,
.modal-header,
.modal-footer {
    border-color: var(--border-subtle);
}

.card .card-header,
.card-custom .card-header {
    color: var(--text-primary);
    font-weight: 610;
}

.card-body {
    color: var(--text-primary);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: rgba(160, 166, 177, 0.03);
    --bs-table-hover-bg: rgba(59, 130, 246, 0.08);
    --bs-table-hover-color: var(--text-primary);
    color: var(--text-primary);
}

.table-custom th,
.table th {
    background: rgba(26, 29, 35, 0.9) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-subtle) !important;
}

.table td {
    border-color: rgba(160, 166, 177, 0.14) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(59, 130, 246, 0.08);
    color: var(--text-primary);
}

.table tbody tr[data-href],
.table tbody tr[data-open-href] {
    cursor: pointer;
}

.sortable {
    cursor: pointer;
}

.score-cell,
.trend-score-cell {
    min-width: 130px;
}

.trend-score-cell {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
}

.trend-score-cell small {
    color: var(--text-secondary);
}

.form-control,
.form-select,
textarea {
    background-color: var(--input-bg);
    border-color: var(--border-subtle);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

.form-control:focus,
.form-select:focus,
textarea:focus {
    color: var(--text-primary);
    border-color: var(--accent-blue);
    background-color: var(--input-focus-bg);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.form-label {
    color: var(--text-secondary);
    font-size: 0.81rem;
    font-weight: 520;
}

.text-muted {
    color: var(--text-secondary) !important;
}

.btn {
    border-radius: var(--radius-sm);
    font-weight: 560;
    border-width: 1px;
}

.btn-primary {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #2563EB !important;
    border-color: #2563EB !important;
    color: #FFFFFF !important;
}

.btn-outline-info {
    color: var(--accent-blue);
    border-color: rgba(59, 130, 246, 0.52);
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    color: #FFFFFF !important;
    border-color: var(--accent-blue) !important;
    background: rgba(59, 130, 246, 0.22) !important;
}

.btn-outline-light,
.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-strong);
    background: rgba(26, 29, 35, 0.72);
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: var(--text-primary) !important;
    background: rgba(47, 52, 64, 0.88) !important;
    border-color: rgba(160, 166, 177, 0.46) !important;
}

.btn-danger {
    background: var(--risk-critical);
    border-color: var(--risk-critical);
    color: #FFFFFF;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background: #D80D0D !important;
    border-color: #D80D0D !important;
}

.btn-outline-danger {
    color: var(--risk-critical);
    border-color: rgba(255, 31, 31, 0.52);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    color: #FFFFFF !important;
    background: rgba(255, 31, 31, 0.22) !important;
    border-color: var(--risk-critical) !important;
}

.btn-outline-success {
    color: var(--risk-low);
    border-color: rgba(48, 209, 88, 0.5);
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    color: #FFFFFF !important;
    background: rgba(48, 209, 88, 0.22) !important;
    border-color: var(--risk-low) !important;
}

.badge {
    border-radius: 999px;
    padding: 5px 9px;
    font-weight: 650;
}

.badge.bg-secondary {
    background: rgba(107, 114, 128, 0.35) !important;
    color: #D1D5DB;
}

.badge-risk-low {
    background: rgba(48, 209, 88, 0.16);
    color: var(--risk-low);
}

.badge-risk-medium {
    background: rgba(255, 214, 10, 0.16);
    color: var(--risk-medium);
}

.badge-risk-high {
    background: rgba(255, 138, 0, 0.16);
    color: var(--risk-high);
}

.badge-risk-critical {
    background: rgba(255, 31, 31, 0.17);
    color: var(--risk-critical);
}

.badge-status {
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 630;
}

.badge-status.nueva,
.badge-status.new {
    background: rgba(59, 130, 246, 0.18);
    color: #93C5FD;
}

.badge-status.en-revision,
.badge-status.en_revision,
.badge-status.en-investigacion,
.badge-status.en_investigacion,
.badge-status.review,
.badge-status.active {
    background: rgba(255, 214, 10, 0.17);
    color: var(--risk-medium);
}

.badge-status.triage {
    background: rgba(59, 130, 246, 0.22);
    color: #BFDBFE;
}

.badge-status.escalada,
.badge-status.escalada-rrhh,
.badge-status.escalada_rrhh,
.badge-status.escalada-legal,
.badge-status.escalada_legal,
.badge-status.escalada-seguridad,
.badge-status.escalada_seguridad,
.badge-status.escalated,
.badge-status.critical {
    background: rgba(255, 31, 31, 0.17);
    color: var(--risk-critical);
}

.badge-status.mitigada,
.badge-status.completed,
.badge-status.cerrada,
.badge-status.closed {
    background: rgba(48, 209, 88, 0.17);
    color: var(--risk-low);
}

.badge-status.descartada,
.badge-status.dismissed,
.badge-status.falso-positivo,
.badge-status.falso_positivo,
.badge-status.false-positive {
    background: rgba(107, 114, 128, 0.33);
    color: #D1D5DB;
}

.score-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(160, 166, 177, 0.2);
    overflow: hidden;
}

.score-fill {
    border-radius: 999px;
}

.timeline-item {
    border-left: 2px solid rgba(160, 166, 177, 0.22);
}

.timeline-item::before {
    background: var(--accent-blue);
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.14);
}

.filter-grid {
    gap: 12px;
}

.empty-state {
    border: 1px dashed rgba(160, 166, 177, 0.35);
    color: var(--text-secondary);
    background: rgba(26, 29, 35, 0.55);
    border-radius: var(--radius-md);
}

.widget-list li {
    border-bottom: 1px solid rgba(160, 166, 177, 0.14);
}

.kpi-risk.low { color: var(--risk-low); }
.kpi-risk.medium { color: var(--risk-medium); }
.kpi-risk.high { color: var(--risk-high); }
.kpi-risk.critical { color: var(--risk-critical); }

.custom-toast {
    color: var(--text-primary);
    background: rgba(26, 29, 35, 0.94);
    border-color: var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.custom-toast.success { border-color: rgba(48, 209, 88, 0.55); }
.custom-toast.warning { border-color: rgba(255, 214, 10, 0.55); }
.custom-toast.danger { border-color: rgba(255, 31, 31, 0.55); }
.custom-toast.info { border-color: rgba(59, 130, 246, 0.55); }

@media (max-width: 991px) {
    .main-content {
        padding: 16px;
    }

    .topbar {
        margin-bottom: 14px;
    }

    .page-title {
        font-size: 1.3rem;
    }
}