/* ==========================================================================
   Mapp MX · tema global (claro y oscuro) sobre Phoenix

   - Se carga en _Layout DESPUÉS de theme.min.css / user.min.css.
   - Redefine las variables de Phoenix con la identidad "señalética
     carretera": azul del logo (#395AA5), concreto y asfalto, Overpass.
   - El tema lo cambia Phoenix con data-bs-theme en <html> (botón luna/sol).
   - Los estilos propios de los mapas viven en mapa-tema.css.
   ========================================================================== */

:root,
[data-bs-theme=light] {
    --phoenix-primary: #395AA5;
    --phoenix-primary-rgb: 57, 90, 165;
    --phoenix-primary-light: #8FAEEA;
    --phoenix-primary-light-rgb: 143, 174, 234;
    --phoenix-primary-dark: #2D4886;
    --phoenix-primary-dark-rgb: 45, 72, 134;
    --phoenix-primary-darker: #233967;
    --phoenix-primary-darker-rgb: 35, 57, 103;
    --phoenix-primary-text-emphasis: #233967;
    --phoenix-primary-text-emphasis-rgb: 35, 57, 103;
    --phoenix-primary-bg-subtle: #E6ECF7;
    --phoenix-primary-bg-subtle-rgb: 230, 236, 247;
    --phoenix-primary-border-subtle: #B5C5E6;
    --phoenix-primary-border-subtle-rgb: 181, 197, 230;
    --phoenix-link-color: #395AA5;
    --phoenix-link-color-rgb: 57, 90, 165;
    --phoenix-link-hover-color: #2D4886;
    --phoenix-link-hover-color-rgb: 45, 72, 134;
    --phoenix-body-bg: #F1F2EF;
    --phoenix-body-bg-rgb: 241, 242, 239;
    --phoenix-body-color: #2C3236;
    --phoenix-body-color-rgb: 44, 50, 54;
    --phoenix-emphasis-color: #15191C;
    --phoenix-emphasis-color-rgb: 21, 25, 28;
    --phoenix-emphasis-bg: #FFFFFF;
    --phoenix-emphasis-bg-rgb: 255, 255, 255;
    --phoenix-body-highlight-bg: #E7EAE5;
    --phoenix-body-highlight-bg-rgb: 231, 234, 229;
    --phoenix-secondary-color: #3E4440;
    --phoenix-secondary-color-rgb: 62, 68, 64;
    --phoenix-secondary-bg: #DFE3DD;
    --phoenix-secondary-bg-rgb: 223, 227, 221;
    --phoenix-tertiary-color: #545B56;
    --phoenix-tertiary-color-rgb: 84, 91, 86;
    --phoenix-tertiary-bg: #D3D7D0;
    --phoenix-tertiary-bg-rgb: 211, 215, 208;
    --phoenix-border-color: #D3D7D0;
    --phoenix-border-color-rgb: 211, 215, 208;
    --phoenix-highlight-color: #2C3236;
    --phoenix-highlight-color-rgb: 44, 50, 54;
    --phoenix-navbar-vertical-link-color: #545B56;
    --phoenix-navbar-vertical-link-color-rgb: 84, 91, 86;
    --phoenix-navbar-vertical-link-active-color: #395AA5;
    --phoenix-navbar-vertical-link-active-color-rgb: 57, 90, 165;
    --phoenix-navbar-vertical-link-hover-bg: #E7EAE5;
    --phoenix-navbar-vertical-link-hover-bg-rgb: 231, 234, 229;
    --phoenix-navbar-vertical-border-color: #D3D7D0;
    --phoenix-navbar-vertical-border-color-rgb: 211, 215, 208;
    --phoenix-font-sans-serif: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --phoenix-border-color-translucent: rgba(211, 215, 208, .6);
    --phoenix-focus-ring-color: rgba(57, 90, 165, .25);
    --phoenix-navbar-top-bg-color: var(--phoenix-emphasis-bg);
    --phoenix-navbar-vertical-bg-color: var(--phoenix-emphasis-bg);
    --mapp-azul: #395AA5; --mapp-azul-hover: #2D4886; --mapp-azul-activo: #233967;
    --mapp-amarillo: #E8B10B;
}

[data-bs-theme=dark] {
    --phoenix-primary: #8FAEEA;
    --phoenix-primary-rgb: 143, 174, 234;
    --phoenix-primary-light: #B5C8F0;
    --phoenix-primary-light-rgb: 181, 200, 240;
    --phoenix-primary-dark: #A9C0EE;
    --phoenix-primary-dark-rgb: 169, 192, 238;
    --phoenix-primary-darker: #A9C0EE;
    --phoenix-primary-darker-rgb: 169, 192, 238;
    --phoenix-primary-text-emphasis: #A9C0EE;
    --phoenix-primary-text-emphasis-rgb: 169, 192, 238;
    --phoenix-primary-bg-subtle: #1E2A3F;
    --phoenix-primary-bg-subtle-rgb: 30, 42, 63;
    --phoenix-primary-border-subtle: #344A73;
    --phoenix-primary-border-subtle-rgb: 52, 74, 115;
    --phoenix-link-color: #8FAEEA;
    --phoenix-link-color-rgb: 143, 174, 234;
    --phoenix-link-hover-color: #B5C8F0;
    --phoenix-link-hover-color-rgb: 181, 200, 240;
    --phoenix-body-bg: #14181A;
    --phoenix-body-bg-rgb: 20, 24, 26;
    --phoenix-body-color: #B8BFB9;
    --phoenix-body-color-rgb: 184, 191, 185;
    --phoenix-emphasis-color: #EEF0EC;
    --phoenix-emphasis-color-rgb: 238, 240, 236;
    --phoenix-emphasis-bg: #1B2023;
    --phoenix-emphasis-bg-rgb: 27, 32, 35;
    --phoenix-body-highlight-bg: #232A2E;
    --phoenix-body-highlight-bg-rgb: 35, 42, 46;
    --phoenix-secondary-color: #A3ABA5;
    --phoenix-secondary-color-rgb: 163, 171, 165;
    --phoenix-secondary-bg: #2C3337;
    --phoenix-secondary-bg-rgb: 44, 51, 55;
    --phoenix-tertiary-color: #8E968F;
    --phoenix-tertiary-color-rgb: 142, 150, 143;
    --phoenix-tertiary-bg: #353E43;
    --phoenix-tertiary-bg-rgb: 53, 62, 67;
    --phoenix-border-color: #30383D;
    --phoenix-border-color-rgb: 48, 56, 61;
    --phoenix-highlight-color: #B8BFB9;
    --phoenix-highlight-color-rgb: 184, 191, 185;
    --phoenix-navbar-vertical-link-color: #A3ABA5;
    --phoenix-navbar-vertical-link-color-rgb: 163, 171, 165;
    --phoenix-navbar-vertical-link-active-color: #FFFFFF;
    --phoenix-navbar-vertical-link-active-color-rgb: 255, 255, 255;
    --phoenix-navbar-vertical-link-hover-bg: #2C3337;
    --phoenix-navbar-vertical-link-hover-bg-rgb: 44, 51, 55;
    --phoenix-navbar-vertical-border-color: #30383D;
    --phoenix-navbar-vertical-border-color-rgb: 48, 56, 61;
    --phoenix-border-color-translucent: rgba(53, 62, 67, .8);
    --phoenix-focus-ring-color: rgba(143, 174, 234, .3);
    --mapp-amarillo: #F2C230;
    color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
/* ":root body" gana a "html, body { font-family: 'Jost' }" de mapV3.css. */
:root body {
    font-family: var(--phoenix-font-sans-serif);
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -.01em;
}

::selection { background: rgba(232, 177, 11, .35); }

/* ── Botones (Phoenix trae el azul #3874ff fijo en cada variante) ──────── */
.btn-primary {
    --phoenix-btn-color: #fff;
    --phoenix-btn-bg: var(--mapp-azul, #395AA5);
    --phoenix-btn-border-color: var(--mapp-azul, #395AA5);
    --phoenix-btn-hover-color: #fff;
    --phoenix-btn-hover-bg: #2D4886;
    --phoenix-btn-hover-border-color: #2D4886;
    --phoenix-btn-active-color: #fff;
    --phoenix-btn-active-bg: #233967;
    --phoenix-btn-active-border-color: #233967;
    --phoenix-btn-disabled-bg: #395AA5;
    --phoenix-btn-disabled-border-color: #395AA5;
    --phoenix-btn-focus-shadow-rgb: 57, 90, 165;
}

[data-bs-theme=dark] .btn-primary {
    --phoenix-btn-bg: #395AA5;
    --phoenix-btn-border-color: #395AA5;
}

.btn-outline-primary {
    --phoenix-btn-color: var(--phoenix-primary);
    --phoenix-btn-border-color: var(--phoenix-primary);
    --phoenix-btn-hover-color: #fff;
    --phoenix-btn-hover-bg: #395AA5;
    --phoenix-btn-hover-border-color: #395AA5;
    --phoenix-btn-active-color: #fff;
    --phoenix-btn-active-bg: #2D4886;
    --phoenix-btn-active-border-color: #2D4886;
    --phoenix-btn-disabled-color: var(--phoenix-primary);
    --phoenix-btn-disabled-border-color: var(--phoenix-primary);
    --phoenix-btn-focus-shadow-rgb: 57, 90, 165;
}

.btn-phoenix-primary {
    --phoenix-btn-color: var(--phoenix-primary);
    --phoenix-btn-hover-color: var(--phoenix-primary-dark);
    --phoenix-btn-active-color: var(--phoenix-primary);
}

/* Botones "phoenix": Phoenix les pone fondos con tinte azul fijos. */
[class*="btn-phoenix-"] {
    --phoenix-btn-bg: var(--phoenix-body-bg);
    --phoenix-btn-border-color: var(--phoenix-border-color);
    --phoenix-btn-hover-bg: var(--phoenix-body-highlight-bg);
    --phoenix-btn-active-bg: var(--phoenix-body-highlight-bg);
}

[data-bs-theme=dark] [class*="btn-phoenix-"] {
    --phoenix-btn-bg: var(--phoenix-emphasis-bg);
    --phoenix-btn-border-color: var(--phoenix-border-color);
    --phoenix-btn-hover-bg: var(--phoenix-body-highlight-bg);
    --phoenix-btn-active-bg: var(--phoenix-body-highlight-bg);
    --phoenix-btn-hover-border-color: var(--phoenix-tertiary-bg);
    --phoenix-btn-active-border-color: var(--phoenix-tertiary-bg);
}

.btn-subtle-primary,
[data-bs-theme=dark] .btn-subtle-primary {
    --phoenix-btn-color: var(--phoenix-primary);
    --phoenix-btn-bg: rgba(57, 90, 165, .14);
    --phoenix-btn-border-color: transparent;
    --phoenix-btn-hover-color: var(--phoenix-primary);
    --phoenix-btn-hover-bg: rgba(57, 90, 165, .22);
    --phoenix-btn-disabled-bg: rgba(57, 90, 165, .14);
    --phoenix-btn-disabled-border-color: transparent;
}

.btn:focus-visible,
.btn:active:focus,
.btn-link.nav-link:focus-visible {
    box-shadow: 0 0 0 .2rem var(--phoenix-emphasis-bg), 0 0 0 .35rem var(--mapp-amarillo);
}

/* ── Formularios ────────────────────────────────────────────────────────── */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: #395AA5;
    border-color: #395AA5;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--phoenix-primary);
}

.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(57, 90, 165, .25);
}

.form-range::-webkit-slider-thumb { background-color: #395AA5; }
.form-range::-moz-range-thumb { background-color: #395AA5; }

/* ── Navegación y listas ────────────────────────────────────────────────── */
.nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(57, 90, 165, .25); }

.pagination {
    --phoenix-pagination-focus-box-shadow: 0 0 0 .25rem rgba(57, 90, 165, .25);
    --phoenix-pagination-active-bg: #395AA5;
    --phoenix-pagination-active-border-color: #395AA5;
}

.dropdown-menu { --phoenix-dropdown-link-active-bg: #395AA5; }

.list-group {
    --phoenix-list-group-active-bg: #395AA5;
    --phoenix-list-group-active-border-color: #395AA5;
}

.progress, .progress-stacked { --phoenix-progress-bar-bg: #395AA5; }

/* Menú lateral: el enlace activo resaltado con el azul suave. */
.navbar-vertical .navbar-nav .nav-link.active {
    color: var(--phoenix-navbar-vertical-link-active-color);
    background-color: var(--phoenix-primary-bg-subtle);
    font-weight: 700;
}

.navbar-vertical .nav-link-text { font-weight: 600; }

.badge-nuevo {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    background: #395AA5;
    vertical-align: middle;
}

/* Enlace de contacto en el navbar superior */
.navbar-contacto {
    font-size: .8rem;
    color: var(--phoenix-tertiary-color);
    white-space: nowrap;
}

.navbar-contacto a { font-weight: 600; }

/* Footer */
.footer {
    color: var(--phoenix-tertiary-color);
    font-size: .8rem;
}

/* ── Cargador global (#loader-overlay del layout) ───────────────────────── */
#loader-overlay { background: rgba(var(--phoenix-body-bg-rgb), .78); }

.loader {
    border-color: var(--phoenix-border-color);
    border-top-color: var(--phoenix-primary);
}

#loader-text { color: var(--phoenix-emphasis-color); }

/* ── DataTables (CSS de CDN, no conoce el modo oscuro) ──────────────────── */
.dataTables_wrapper {
    color: var(--phoenix-body-color);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--phoenix-emphasis-bg);
    color: var(--phoenix-body-color);
    border: 1px solid var(--phoenix-border-color);
    border-radius: 5px;
    padding: 3px 6px;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
    color: var(--phoenix-tertiary-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--phoenix-body-color) !important;
    border-radius: 5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #395AA5 !important;
    border-color: #395AA5 !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--phoenix-body-highlight-bg) !important;
    border-color: var(--phoenix-border-color) !important;
    color: var(--phoenix-emphasis-color) !important;
}

table.dataTable thead th,
table.dataTable thead td,
table.dataTable.no-footer {
    border-bottom-color: var(--phoenix-border-color) !important;
}

table.dataTable tbody tr { background-color: transparent; }

table.dataTable.stripe > tbody > tr.odd > *,
table.dataTable.display > tbody > tr.odd > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--phoenix-emphasis-color-rgb), .03) !important;
}

table.dataTable.hover > tbody > tr:hover > *,
table.dataTable.display > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(57, 90, 165, .08) !important;
}

/* ── SweetAlert2 (complementa lo que ya hay en site.css) ────────────────── */
.swal2-popup { font-family: var(--phoenix-font-sans-serif); border-radius: 8px; }
.swal2-styled.swal2-confirm { background-color: #395AA5 !important; }
.swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(57, 90, 165, .4) !important; }

/* ── Logo en modo oscuro ────────────────────────────────────────────────
   El azul del logo (#395AA5) casi no contrasta sobre fondo oscuro (2.5:1).
   En oscuro se usa la versión en azul claro #8FAEEA (7.4:1), misma forma. */
[data-bs-theme=dark] img[src*="LogoMapp.png"] {
    content: url("../assets/img/icons/LogoMapp-oscuro.png");
}

/* ── Movimiento reducido ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
}