/* =====================================================================
   TEMA OSCURO (ligero) · parte del cliente
   Archivo: public/frontend/css/mexico-gsm-oscuro.css
   Solo cambia fondos blancos -> oscuros y texto oscuro -> claro.
   Respeta el color principal elegido en el admin (header, botones).
   Tu diseño del Header Code se carga después y puede cambiar todo esto.
   ===================================================================== */

/* ---------- 1. Colores base (cámbialos aquí si quieres otro tono) ---------- */
:root,
html[data-bs-theme] {
    --mxd-bg: #0e1116;          /* fondo de la página */
    --mxd-surface: #161b22;     /* tarjetas, ventanas, menús */
    --mxd-surface-2: #1c222b;   /* campos, filas, cajas internas */
    --mxd-surface-3: #242c37;   /* al pasar el mouse */
    --mxd-border: #2b3340;      /* bordes */
    --mxd-text: #e6edf3;        /* texto */
    --mxd-text-2: #a3adbb;      /* texto secundario */
    --mxd-head: #f5f7fa;        /* títulos */

    --bs-body-bg: #0e1116 !important;
    --bs-body-bg-rgb: 14, 17, 22 !important;
    --bs-body-color: #e6edf3 !important;
    --bs-body-color-rgb: 230, 237, 243 !important;
    --bs-emphasis-color: #f5f7fa !important;
    --bs-emphasis-color-rgb: 245, 247, 250 !important;
    --bs-heading-color: #f5f7fa !important;
    --bs-secondary-color: rgba(230, 237, 243, .7) !important;
    --bs-secondary-color-rgb: 230, 237, 243 !important;
    --bs-secondary-bg: #1c222b !important;
    --bs-secondary-bg-rgb: 28, 34, 43 !important;
    --bs-tertiary-color: rgba(230, 237, 243, .5) !important;
    --bs-tertiary-color-rgb: 230, 237, 243 !important;
    --bs-tertiary-bg: #161b22 !important;
    --bs-tertiary-bg-rgb: 22, 27, 34 !important;
    --bs-border-color: #2b3340 !important;
    --bs-border-color-translucent: rgba(255, 255, 255, .1) !important;
    --bs-light-bg-subtle: #1c222b !important;
    --bs-light-border-subtle: #2b3340 !important;
    --bs-light-text-emphasis: #e6edf3 !important;
    --bs-light-primary: rgba(var(--bs-primary-rgb), .14) !important;

    /* variables propias del tema GSM */
    --tl: #13232a;
    --ink: #e6edf3;
    --sub: #a3adbb;
    --dim: #7d8794;
    --rule: #2b3340;
    --off: #1c222b;
    --w: #161b22;
    --muted: #a3adbb;
    --border: #2b3340;
    --white: #161b22;

    color-scheme: dark;
}

html,
body {
    background-color: var(--mxd-bg) !important;
    color: var(--mxd-text);
}
::placeholder { color: #6f7a88 !important; opacity: 1; }

/* ---------- 2. Fondos blancos y claros ---------- */
body:not(#mxd) .bg-white,
body:not(#mxd) .bg-light,
body:not(#mxd) .bg-body,
body:not(#mxd) .bg-body-tertiary,
body:not(#mxd) .card:not([class*="bg-"]):not(.balance-card),
body:not(#mxd) .modal-content:not([class*="bg-"]),
body:not(#mxd) .dropdown-menu,
body:not(#mxd) .offcanvas,
body:not(#mxd) .list-group-item,
body:not(#mxd) .toast,
body:not(#mxd) .popover,
body:not(#mxd) .accordion-item,
body:not(#mxd) .accordion-button,
body:not(#mxd) .page-link,
body:not(#mxd) .gsm-dropdown,
body:not(#mxd) .nav-arrow,
body:not(#mxd) .product,
body:not(#mxd) .service-group,
body:not(#mxd) .group-search,
body:not(#mxd) .quick-card,
body:not(#mxd) .tp,
body:not(#mxd) .invoice-container,
body:not(#mxd) .checkbox-wrapper-16 .checkbox-tile,
body:not(#mxd) .amt-group,
body:not(#mxd) .gw-item,
body:not(#mxd) .btn-imei {
    background-color: var(--mxd-surface) !important;
    color: var(--mxd-text);
    border-color: var(--mxd-border) !important;
}
body:not(#mxd) .card-header,
body:not(#mxd) .card-footer,
body:not(#mxd) .modal-header,
body:not(#mxd) .modal-footer,
body:not(#mxd) .table-header,
body:not(#mxd) .order-comments-section,
body:not(#mxd) .qi-tag,
body:not(#mxd) .saprator span,
body:not(#mxd) #gsmAuthModal .auth-illus-panel,
body:not(#mxd) .api-copy-btn,
body:not(#mxd) .api-copy-btn:hover,
body:not(#mxd) .api-copy-btn:focus,
body:not(#mxd) .api-copy-btn:active,
body:not(#mxd) .api-copy-btn:focus-visible {
    background-color: var(--mxd-surface-2) !important;
    color: var(--mxd-text) !important;
    border-color: var(--mxd-border) !important;
}
body:not(#mxd) .border,
body:not(#mxd) .border-top,
body:not(#mxd) .border-bottom,
body:not(#mxd) .border-start,
body:not(#mxd) .border-end,
body:not(#mxd) hr {
    border-color: var(--mxd-border) !important;
}

/* textos que venían en negro / gris oscuro */
body:not(#mxd) .text-dark,
body:not(#mxd) .text-black,
body:not(#mxd) .text-body,
body:not(#mxd) .text-body-emphasis,
body:not(#mxd) .amt-field,
body:not(#mxd) .info-text,
body:not(#mxd) .totals-value,
body:not(#mxd) .form-check-label,
body:not(#mxd) .desc-line,
body:not(#mxd) .page-title,
body:not(#mxd) .customer-m-menu-content label {
    color: var(--mxd-text) !important;
}
body:not(#mxd) .text-muted,
body:not(#mxd) .text-secondary,
body:not(#mxd) .text-body-secondary {
    color: var(--mxd-text-2) !important;
}
body:not(#mxd) h1,
body:not(#mxd) h2,
body:not(#mxd) h3,
body:not(#mxd) h4,
body:not(#mxd) h5,
body:not(#mxd) h6,
body:not(#mxd) .h1,
body:not(#mxd) .h2,
body:not(#mxd) .h3,
body:not(#mxd) .h4,
body:not(#mxd) .h5,
body:not(#mxd) .h6 {
    color: var(--mxd-head);
}

/* ---------- 3. Formularios ---------- */
body:not(#mxd) .form-control,
body:not(#mxd) .form-select,
body:not(#mxd) .input-group-text,
body:not(#mxd) .select2-container--default .select2-selection--single,
body:not(#mxd) .select2-container--bootstrap-5 .select2-selection,
body:not(#mxd) .select2-dropdown,
body:not(#mxd) .select2-search__field {
    background-color: var(--mxd-surface-2) !important;
    color: var(--mxd-text) !important;
    border-color: var(--mxd-border) !important;
}
body:not(#mxd) .form-control:focus,
body:not(#mxd) .form-select:focus {
    background-color: var(--mxd-surface-2) !important;
    color: var(--mxd-text) !important;
}
body:not(#mxd) .form-control:disabled,
body:not(#mxd) .form-control[readonly] {
    background-color: #191e26 !important;
    color: var(--mxd-text-2) !important;
}
body:not(#mxd) .select2-container--default .select2-selection--single .select2-selection__rendered,
body:not(#mxd) .select2-container--bootstrap-5 .select2-selection__rendered,
body:not(#mxd) .select2-results__option {
    color: var(--mxd-text) !important;
}
body:not(#mxd) .select2-results__option--highlighted,
body:not(#mxd) .select2-results__option[aria-selected="true"] {
    background-color: var(--mxd-surface-3) !important;
}
body:not(#mxd) .form-check-input:not(:checked) {
    background-color: var(--mxd-surface-2);
    border-color: #4a5566;
}
body:not(#mxd) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
body:not(#mxd) .btn-light,
body:not(#mxd) .btn-outline-light,
body:not(#mxd) .btn-outline-secondary {
    background-color: var(--mxd-surface-2) !important;
    color: var(--mxd-text) !important;
    border-color: var(--mxd-border) !important;
}

/* ---------- 4. Tablas ---------- */
body:not(#mxd) .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mxd-text);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-bg: rgba(255, 255, 255, .05);
    --bs-table-hover-color: var(--mxd-text);
    --bs-table-border-color: var(--mxd-border);
    color: var(--mxd-text);
}
body:not(#mxd) table.dataTable,
body:not(#mxd) table.dataTable tbody tr,
body:not(#mxd) table.dataTable tbody td,
body:not(#mxd) table.dataTable thead th {
    background-color: transparent !important;
    color: var(--mxd-text) !important;
    border-color: var(--mxd-border) !important;
}
body:not(#mxd) table.dataTable tbody tr:hover > * { background-color: rgba(255, 255, 255, .04) !important; }
body:not(#mxd) table.dataTable.no-footer,
body:not(#mxd) table.dataTable thead th,
body:not(#mxd) table.dataTable thead td { border-bottom-color: var(--mxd-border) !important; }
body:not(#mxd) .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body:not(#mxd) .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
body:not(#mxd) .dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background: var(--mxd-surface-3) !important;
    color: var(--mxd-text) !important;
}

/* ---------- 5. Menús desplegables y lista lateral ---------- */
body:not(#mxd) .dropdown-item { color: var(--mxd-text); }
body:not(#mxd) .dropdown-item:hover,
body:not(#mxd) .dropdown-item:focus,
body:not(#mxd) .gsm-dropdown a:hover {
    background-color: var(--mxd-surface-3) !important;
    color: #fff !important;
}
body:not(#mxd) .gsm-dropdown a { color: var(--mxd-text) !important; }
body:not(#mxd) .dropdown-divider { border-color: var(--mxd-border) !important; }

/* panel del cliente: menú de la izquierda */
body:not(#mxd) #menu button { border-color: transparent !important; color: var(--mxd-text) !important; }
body:not(#mxd) #menu button:hover { background: var(--mxd-surface-2) !important; }
body:not(#mxd) #menu .active,
body:not(#mxd) #menu button.active {
    background: rgba(var(--bs-primary-rgb), .18) !important;
    color: #fff !important;
}
body:not(#mxd) .customer-m-menu { border-color: var(--mxd-border) !important; }

/* ---------- 6. Etiquetas claras (precio, estados) ---------- */
body:not(#mxd) .bg-light-primary {
    background: rgba(var(--bs-primary-rgb), .2) !important;
    color: color-mix(in srgb, var(--bs-primary) 45%, #ffffff) !important;
}
body:not(#mxd) .bg-light-secondary { background: rgba(148, 163, 184, .16) !important; color: #cbd5e1 !important; }
body:not(#mxd) .bg-light-success { background: rgba(34, 197, 94, .16) !important; color: #4ade80 !important; }
body:not(#mxd) .bg-light-warning { background: rgba(245, 158, 11, .16) !important; color: #fbbf24 !important; }
body:not(#mxd) .bg-light-danger { background: rgba(239, 68, 68, .16) !important; color: #f87171 !important; }
body:not(#mxd) .bg-light-info { background: rgba(56, 189, 248, .16) !important; color: #7dd3fc !important; }
body:not(#mxd) .alert-warning { background: rgba(245, 158, 11, .12) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, .35) !important; }
body:not(#mxd) .alert-info { background: rgba(56, 189, 248, .12) !important; color: #bae6fd !important; border-color: rgba(56, 189, 248, .35) !important; }
body:not(#mxd) .alert-success { background: rgba(34, 197, 94, .12) !important; color: #bbf7d0 !important; border-color: rgba(34, 197, 94, .35) !important; }
body:not(#mxd) .alert-danger { background: rgba(239, 68, 68, .12) !important; color: #fecaca !important; border-color: rgba(239, 68, 68, .35) !important; }

/* ---------- 7. Otros detalles ---------- */
body:not(#mxd) .owl-nav button.owl-next:hover,
body:not(#mxd) .owl-nav button.owl-prev:hover { background: var(--mxd-surface-3) !important; color: #fff !important; }
body:not(#mxd) #regPasswordRulesPanel .progress,
body:not(#mxd) .progress { background-color: var(--mxd-surface-3) !important; }
body:not(#mxd) .modal-backdrop.show { opacity: .7; }
body:not(#mxd) code { color: #f0abfc; }
body:not(#mxd) ::selection { background: rgba(var(--bs-primary-rgb), .55); color: #fff; }

/* textos de formularios y migas de pan */
body:not(#mxd) label,
body:not(#mxd) .form-label,
body:not(#mxd) .col-form-label {
    color: var(--mxd-text);
}
body:not(#mxd) .breadcrumb-item,
body:not(#mxd) .breadcrumb-item a,
body:not(#mxd) .breadcrumb-item.active,
body:not(#mxd) .breadcrumb-item + .breadcrumb-item::before {
    color: var(--mxd-text-2) !important;
}
body:not(#mxd) .breadcrumb-item a:hover { color: #fff !important; }

/* iconos de las tarjetas de colores del panel */
body:not(#mxd) .avtar[class*="-subtle"] {
    background: rgba(255, 255, 255, .2) !important;
    color: #fff !important;
}

body:not(#mxd) #gsmAuthModal .auth-illus-panel {
    background: var(--mxd-surface-2) !important;
}

/* ---------- 8. Selector de idioma (colores oscuros) ---------- */
:root {
    --mxl-line: rgba(255, 255, 255, .35);
    --mxl-bg: rgba(0, 0, 0, .18);
    --mxl-text: #ffffff;
    --mxl-menu: #161b22;
    --mxl-menu-line: #2b3340;
    --mxl-menu-text: #e6edf3;
    --mxl-hover: #242c37;
    --mxl-active: color-mix(in srgb, var(--bs-primary) 45%, #ffffff);
}