/*
 * Tema visual compartido
 * Basado en el panel de Auditor Kratos, con densidad compacta.
 * Se carga desde menu.php para mantener todas las pantallas autenticadas
 * alineadas sin cambiar su estructura ni su comportamiento.
 */
:root {
    --bg-main: #f3f6fa;
    --bg-card: #ffffff;
    --border-main: #dce5ef;
    --text-main: #14202b;
    --text-soft: #425466;
    --accent: #21527f;
    --accent-hover: #17395f;
    --accent-soft: #eaf2fb;
    --danger: #b42318;
    --warning: #9a6700;
    --success: #1b6d40;
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --ui-radius: 10px;
    --ui-radius-lg: 14px;
    --ui-shadow: 0 5px 18px rgba(16, 37, 63, .06);
    --ui-shadow-hover: 0 8px 24px rgba(16, 37, 63, .10);
}

html { background: var(--bg-main); }

body.has-cerberus-menu {
    background: var(--bg-main) !important;
    color: var(--text-main) !important;
    font-family: var(--font-main) !important;
}

body.has-cerberus-menu main,
body.has-cerberus-menu .container,
body.has-cerberus-menu .container-fluid {
    color: var(--text-main);
}

body.has-cerberus-menu h1,
body.has-cerberus-menu h2,
body.has-cerberus-menu h3,
body.has-cerberus-menu h4,
body.has-cerberus-menu h5,
body.has-cerberus-menu h6 {
    color: var(--text-main) !important;
    letter-spacing: -.015em;
}

body.has-cerberus-menu p,
body.has-cerberus-menu .text-muted,
body.has-cerberus-menu .muted {
    color: var(--text-soft) !important;
}

body.has-cerberus-menu a { color: var(--accent); }
body.has-cerberus-menu a:hover { color: var(--accent-hover); }

/* Superficies: clases propias y componentes Bootstrap usados por los modulos. */
body.has-cerberus-menu .card,
body.has-cerberus-menu .form-card,
body.has-cerberus-menu .table-card,
body.has-cerberus-menu .content,
body.has-cerberus-menu .panel,
body.has-cerberus-menu .box,
body.has-cerberus-menu .stat-card,
body.has-cerberus-menu .stats-card,
body.has-cerberus-menu .summary-card,
body.has-cerberus-menu .metric,
body.has-cerberus-menu .glass-card,
body.has-cerberus-menu .surface-card {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow) !important;
}

body.has-cerberus-menu .card:hover,
body.has-cerberus-menu .stat-card:hover,
body.has-cerberus-menu .summary-card:hover {
    box-shadow: var(--ui-shadow-hover) !important;
}

body.has-cerberus-menu .card-header,
body.has-cerberus-menu .card-footer,
body.has-cerberus-menu .modal-header,
body.has-cerberus-menu .modal-footer {
    background: #fafbfc !important;
    color: var(--text-main) !important;
    border-color: var(--border-main) !important;
}

/* Formularios */
body.has-cerberus-menu input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.has-cerberus-menu select,
body.has-cerberus-menu textarea,
body.has-cerberus-menu .form-control,
body.has-cerberus-menu .form-select {
    background-color: #fff !important;
    color: var(--text-main) !important;
    border: 1px solid #cbd3df !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.has-cerberus-menu input:focus,
body.has-cerberus-menu select:focus,
body.has-cerberus-menu textarea:focus,
body.has-cerberus-menu .form-control:focus,
body.has-cerberus-menu .form-select:focus {
    border-color: #3f7fb4 !important;
    box-shadow: 0 0 0 3px rgba(63, 127, 180, .14) !important;
    outline: none;
}

body.has-cerberus-menu input::placeholder,
body.has-cerberus-menu textarea::placeholder { color: #8994a6 !important; }

body.has-cerberus-menu label,
body.has-cerberus-menu .form-label {
    color: #33435b !important;
    font-weight: 600;
}

body.has-cerberus-menu input[type="checkbox"],
body.has-cerberus-menu input[type="radio"],
body.has-cerberus-menu .form-check-input { accent-color: var(--accent); }

/* Botones: conserva los colores semanticos, unifica forma y jerarquia. */
body.has-cerberus-menu .btn,
body.has-cerberus-menu button,
body.has-cerberus-menu .btn-main,
body.has-cerberus-menu .modal-btn {
    border-radius: 8px;
    font-family: var(--font-main);
    font-weight: 600;
}

body.has-cerberus-menu .btn-primary,
body.has-cerberus-menu .btn-main,
body.has-cerberus-menu button.btn-main {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

body.has-cerberus-menu .btn-primary:hover,
body.has-cerberus-menu .btn-main:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

body.has-cerberus-menu .btn-secondary,
body.has-cerberus-menu .btn-light,
body.has-cerberus-menu .btn-outline-light {
    background: #edf0f6 !important;
    border-color: #d9dfe8 !important;
    color: #33435b !important;
}

body.has-cerberus-menu .btn-outline-primary {
    background: #fff !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

body.has-cerberus-menu .btn-danger,
body.has-cerberus-menu .btn-outline-danger:hover {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
}

/* Tablas */
body.has-cerberus-menu .table-responsive,
body.has-cerberus-menu .dataTables_wrapper {
    border-radius: var(--ui-radius);
}

body.has-cerberus-menu table,
body.has-cerberus-menu .table,
body.has-cerberus-menu .table-dark {
    --bs-table-bg: #fff;
    --bs-table-color: var(--text-main);
    --bs-table-border-color: #e6eaf0;
    --bs-table-hover-bg: #f8f9fc;
    --bs-table-hover-color: var(--text-main);
    color: var(--text-main) !important;
    border-color: #e6eaf0 !important;
}

body.has-cerberus-menu table th,
body.has-cerberus-menu .table th,
body.has-cerberus-menu .table-dark th,
body.has-cerberus-menu .table-light th {
    background: #f6f7fa !important;
    color: #33435b !important;
    border-color: #e1e6ed !important;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .025em;
}

body.has-cerberus-menu table td,
body.has-cerberus-menu .table td,
body.has-cerberus-menu .table-dark td {
    background: #fff !important;
    color: var(--text-main) !important;
    border-color: #e6eaf0 !important;
}

body.has-cerberus-menu table tbody tr:hover td,
body.has-cerberus-menu .table tbody tr:hover td { background: #f8f9fc !important; }

/* Dialogos, listas, paginacion y avisos */
body.has-cerberus-menu .modal-content,
body.has-cerberus-menu .modal-content.bg-dark {
    background: #fff !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: 0 24px 70px rgba(34, 50, 74, .20) !important;
}

body.has-cerberus-menu .btn-close-white { filter: none !important; }

body.has-cerberus-menu .list-group-item,
body.has-cerberus-menu .dropdown-menu:not(.menu-dropdown):not(.user-dropdown) {
    background: #fff !important;
    color: var(--text-main) !important;
    border-color: var(--border-main) !important;
}

body.has-cerberus-menu .page-link {
    background: #fff;
    border-color: #dfe5ed;
    color: var(--accent);
}

body.has-cerberus-menu .active > .page-link,
body.has-cerberus-menu .page-link.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

body.has-cerberus-menu .alert-success,
body.has-cerberus-menu .alert.success {
    background: #e4f5ec !important;
    border-color: #b9dfca !important;
    color: #155c36 !important;
}

body.has-cerberus-menu .alert-danger,
body.has-cerberus-menu .alert.danger {
    background: #fdebea !important;
    border-color: #f2c4c0 !important;
    color: #8d1c13 !important;
}

body.has-cerberus-menu .badge.bg-primary,
body.has-cerberus-menu .badge.bg-success { background: var(--accent) !important; }

body.has-cerberus-menu .progress { background: #e8ebf1 !important; }
body.has-cerberus-menu .progress-bar { background: var(--accent) !important; }

/* Los mapas y sus controles deben conservar el contraste esperado por Leaflet. */
body.has-cerberus-menu .leaflet-container { font-family: var(--font-main); }
body.has-cerberus-menu .leaflet-control,
body.has-cerberus-menu .leaflet-popup-content-wrapper,
body.has-cerberus-menu .leaflet-popup-tip {
    color: #24324a;
}

body.has-cerberus-menu ::-webkit-scrollbar { width: 10px; height: 10px; background: #eef1f5; }
body.has-cerberus-menu ::-webkit-scrollbar-thumb { background: #b7c0ce; border-radius: 999px; }
body.has-cerberus-menu ::-webkit-scrollbar-thumb:hover { background: #3f7fb4; }

@media (max-width: 767px) {
    body.has-cerberus-menu .card,
    body.has-cerberus-menu .form-card,
    body.has-cerberus-menu .content { border-radius: 12px !important; }

    body.has-cerberus-menu .container,
    body.has-cerberus-menu .container-fluid { padding-left: 12px; padding-right: 12px; }
}

/* Las variables en body evitan que los temas locales vuelvan a introducir
   fondos oscuros. La especificidad cubre tambien los estilos inline de pagina. */
body.has-cerberus-menu.has-cerberus-menu {
    --bg-main: #f3f6fa;
    --bg-card: #fff;
    --bg-panel: #fff;
    --border-main: #dce5ef;
    --text-main: #14202b;
    --text-soft: #425466;
    --text-dim: #6d7b88;
    --accent: #21527f;
    --accent-hover: #17395f;
    --accent-soft: #eaf2fb;
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --shadow-main: 0 5px 18px rgba(16, 37, 63, .08);
    background: radial-gradient(circle at top right, rgba(63,127,180,.10), transparent 30%),
                linear-gradient(180deg, #f3f6fa, #e9eef4) !important;
    font-size: .8125rem !important;
    line-height: 1.5;
    color-scheme: light;
}

body.has-cerberus-menu :is(h1, h2, h3, h4, h5, h6, .modal-title) {
    font-family: var(--font-main) !important;
    text-transform: none;
    letter-spacing: -.015em !important;
    font-weight: 600;
}
body.has-cerberus-menu h1 { font-size: 1.5rem !important; }
body.has-cerberus-menu h2 { font-size: 1.25rem !important; }
body.has-cerberus-menu h3 { font-size: 1.0625rem !important; }
body.has-cerberus-menu :is(h4, h5, h6, .modal-title) { font-size: .9375rem !important; }

body.has-cerberus-menu :is(.btn, button, input, select, textarea, .form-control, .form-select, .page-link) {
    font-family: var(--font-main);
    font-size: .8125rem !important;
}
body.has-cerberus-menu :is(.form-control, .form-select) {
    min-height: 34px;
    padding-top: .375rem;
    padding-bottom: .375rem;
}
body.has-cerberus-menu :is(label, .form-label, .dataTables_info, .dataTables_length, .dataTables_filter) {
    font-size: .75rem;
    color: var(--text-soft) !important;
}
body.has-cerberus-menu select option {
    background: #fff !important;
    color: var(--text-main) !important;
}
body.has-cerberus-menu :is(input, select, textarea) { color-scheme: light !important; }
body.has-cerberus-menu input[type="date"]::-webkit-calendar-picker-indicator { filter: none !important; }
body.has-cerberus-menu :is(table th, table td, .table th, .table td) {
    font-size: .75rem !important;
    padding: .5rem .625rem;
    vertical-align: middle;
}
body.has-cerberus-menu :is(table th, .table th) {
    text-transform: none;
    letter-spacing: .015em !important;
}
body.has-cerberus-menu table.table thead th {
    background: #eef4fa !important;
    color: #33435b !important;
    border-color: var(--border-main) !important;
    text-transform: none !important;
}
body.has-cerberus-menu table { font-family: var(--font-main); }

/* Superficies especificas de Usuarios, Auditoria y el mapa territorial. */
body.has-cerberus-menu :is(.users-card, .kpi-card, .kpi-mini, .insight-box, .overlay-card,
    .permissions-card, .permission-group, .accordion-item, .accordion-body,
    .kpi-soft, .weekly-card-soft, .tabla-mensual-wrap) {
    background: #fff !important;
    color: var(--text-main) !important;
    border-color: var(--border-main) !important;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
}
body.has-cerberus-menu :is(.card-body, .surface-card .card-body, .kpi-card .card-body) {
    background: #fff !important;
    color: var(--text-main) !important;
}
body.has-cerberus-menu :is(.auditor-shell, .usuarios-shell, .auditor-productividad-shell,
    .auditor-productividad-global-shell, .auditor-productividad-mensual-shell) { background: transparent !important; }
body.has-cerberus-menu :is(.header-territorial, .accordion-button, .layer-option) {
    background: #f5f8fc !important;
    color: var(--text-main) !important;
    border-color: var(--border-main) !important;
}
body.has-cerberus-menu :is(.accordion-button:not(.collapsed), .kpi-accent) {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}
body.has-cerberus-menu :is(.panel-toggle-title strong, .section-head strong,
    .permission-group-title, .permissions-heading, .kpi-value, .kpi-mini-value,
    .kpi-mini strong, .kpi-soft .value, .valor-dia, .text-primary) {
    color: var(--accent) !important;
    letter-spacing: 0;
}
body.has-cerberus-menu :is(.auditor-title, .kpi-topline, .card-header strong,
    .accordion-button strong, .insight-box strong, .text-dark) { color: var(--text-main) !important; }
body.has-cerberus-menu .auditor-title { font-size: 1.25rem; letter-spacing: 0; text-transform: none; }
body.has-cerberus-menu .kpi-value { font-size: 1.75rem; }
body.has-cerberus-menu .kpi-soft .value { font-size: 1.375rem; }
body.has-cerberus-menu .kpi-soft { background: linear-gradient(135deg, #f8fbff, #eef4fb) !important; }
body.has-cerberus-menu :is(.text-secondary, .small.text-muted, .text-muted.small,
    .kpi-soft .label, .valor-vacio) { color: var(--text-soft) !important; }
body.has-cerberus-menu :is(.auditor-productividad-shell, .auditor-productividad-global-shell,
    .auditor-productividad-mensual-shell) :is(.fw-bold, .fs-5) { color: var(--text-main) !important; }
body.has-cerberus-menu :is(.header-copy small, .permissions-help, .permissions-count,
    .panel-toggle-title span, .section-head span, .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter) {
    color: var(--text-soft) !important;
}
body.has-cerberus-menu :is(.btn-cerberus, .btn-radar) {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: #fff !important;
    min-height: 34px;
    border-radius: 8px;
}
body.has-cerberus-menu :is(.btn-cerberus, .btn-radar):hover { background: var(--accent-hover) !important; }
body.has-cerberus-menu :is(.btn-radar-outline, .panel-toggle-btn, .panel-restore-btn,
    .permission-tabs .nav-link) {
    background: #fff !important;
    color: var(--accent) !important;
    border: 1px solid #ccdbea !important;
    border-radius: 8px;
    min-height: 34px;
}
body.has-cerberus-menu .permission-tabs .nav-link.active {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    box-shadow: none;
}
body.has-cerberus-menu .btn-outline-danger {
    background: #fff !important;
    color: var(--danger) !important;
    border-color: #dfb0ad !important;
}
body.has-cerberus-menu .btn-outline-danger:hover { background: #fdebea !important; }
body.has-cerberus-menu .btn-outline-warning {
    background: #fffaf0 !important;
    color: var(--warning) !important;
    border-color: #e6d1a0 !important;
}
body.has-cerberus-menu .badge.bg-success {
    background: #e4f5ec !important;
    color: #155c36 !important;
    border-color: #b9dfca !important;
}
body.has-cerberus-menu .badge.bg-secondary {
    background: #edf1f6 !important;
    color: #425466 !important;
}
body.has-cerberus-menu .badge.text-bg-primary { background: var(--accent) !important; color: #fff !important; }
body.has-cerberus-menu :is(.badge.bg-info, .badge.bg-light) { background: #eaf2fb !important; color: #17395f !important; }
body.has-cerberus-menu .badge.bg-warning { background: #fff3cd !important; color: #785600 !important; }
body.has-cerberus-menu .badge.bg-danger { background: #fdebea !important; color: #8d1c13 !important; }
body.has-cerberus-menu :is(.alert-light, .alert-warning) {
    background: #fff8e7 !important;
    color: #785600 !important;
    border: 1px solid #e6d1a0 !important;
}
body.has-cerberus-menu .btn-outline-secondary {
    background: #fff !important; color: #425466 !important; border-color: #ccdbea !important;
}
body.has-cerberus-menu :is(.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-control-attribution) {
    background: #fff !important;
    color: var(--text-main) !important;
    border-color: var(--border-main) !important;
}
body.has-cerberus-menu .form-check-input { background-color: #fff; border-color: #aebed0; }
body.has-cerberus-menu .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* Estados y controles compartidos, con contraste sobre superficies claras. */
body.has-cerberus-menu .btn-close { filter: none !important; }
body.has-cerberus-menu .btn-success {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: #fff !important;
}
body.has-cerberus-menu .btn-success:hover { background: #155c36 !important; }
body.has-cerberus-menu .btn-outline-success {
    background: #fff; border-color: var(--success); color: var(--success);
}
body.has-cerberus-menu .btn-outline-success:hover { background: #e4f5ec; color: #155c36; }
body.has-cerberus-menu .badge-active { background: #e4f5ec; color: #155c36; border: 1px solid #b9dfca; }
body.has-cerberus-menu .badge-inactive { background: #edf1f6; color: #425466; border: 1px solid #dce5ef; }
body.has-cerberus-menu .badge-period { background: var(--accent-soft); color: var(--accent); }
body.has-cerberus-menu #overlayLoader { color: var(--text-main); }
body.has-cerberus-menu #overlayLoader .spinner-border { color: var(--accent) !important; }

/* Navegacion azul marino: se conserva la altura para los mapas de pantalla completa. */
body.has-cerberus-menu .cerberus-navbar {
    background: #10253f !important;
    border-bottom: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 5px 18px rgba(16,37,63,.16);
    font-family: var(--font-main);
}
body.has-cerberus-menu .cerberus-navbar.navbar-scrolled { background: rgba(16,37,63,.96) !important; }
body.has-cerberus-menu .navbar-menu { gap: 2px; }
body.has-cerberus-menu :is(.navbar-item > a, .dropdown-link, .user-btn) {
    color: #edf4fb !important;
    font-size: .78125rem !important;
    font-weight: 500;
    gap: 7px;
    padding-left: 12px;
    padding-right: 12px;
}
body.has-cerberus-menu :is(.navbar-item > a, .user-btn):hover,
body.has-cerberus-menu :is(.navbar-item > a, .user-btn):focus-visible {
    color: #fff !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: none;
}
body.has-cerberus-menu :is(.menu-dropdown, .user-dropdown) {
    background: #fff;
    border: 1px solid var(--border-main);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 14px 32px rgba(16,37,63,.16);
}
body.has-cerberus-menu :is(.menu-dropdown a, .user-dropdown a) {
    color: var(--text-main);
    font-size: .78125rem;
    padding: 9px 14px;
    line-height: 1.45;
}
body.has-cerberus-menu :is(.menu-dropdown a, .user-dropdown a):hover {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-left-color: var(--accent);
    box-shadow: none;
}
body.has-cerberus-menu .user-dropdown .logout-link { color: var(--danger); border-left-color: var(--danger); }
body.has-cerberus-menu .menu-toggle { color: #edf4fb; font-size: 1.5rem !important; }
body.has-cerberus-menu :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid #3f7fb4;
    outline-offset: 3px;
}

@media (max-width: 990px) {
    body.has-cerberus-menu .navbar-menu { background: #10253f; padding-bottom: 10px; }
    body.has-cerberus-menu .navbar-item { width: 100%; }
    body.has-cerberus-menu .navbar-item > a { min-height: 44px; }
    body.has-cerberus-menu :is(.menu-dropdown a, .user-dropdown a) { min-height: 44px; }
    body.has-cerberus-menu .user-btn { overflow-wrap: anywhere; }
}
@media (max-width: 767px) {
    body.has-cerberus-menu :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        font-size: 1rem !important;
    }
    body.has-cerberus-menu .usuarios-shell { padding: 16px 12px; }
}