/* =========================================
   XP Drop — Dark Theme Overrides (depurado)
   Paleta:
   Fondo: #0E1116 | Texto: #E5E7EB | Secundario: #9CA3AF
   Primario: #22C55E | Hover: #16A34A | Divisor: #1F2937
   (Pegar después del CSS del tema)
   ========================================= */

/* ---------- Tokens base ---------- */
:root {
  --xp-bg: #0E1116;
  --xp-fg: #E5E7EB;
  --xp-fg-muted: #9CA3AF;
  --xp-primary: #22C55E;
  --xp-primary-rgb: 34, 197, 94;
  --xp-hover: #16A34A;
  --xp-border: #1F2937;
}

/* ---------- Base: aplica a dark y light ---------- */
:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
  /* Texto y fondo */
  --bs-body-bg: var(--xp-bg);
  --bs-body-bg-rgb: 14, 17, 22;
  --bs-body-color: var(--xp-fg);
  --bs-body-color-rgb: 229, 231, 235;
  --bs-heading-color: var(--xp-fg);

  /* Enlaces y bordes */
  --bs-link-color: var(--xp-primary);
  --bs-link-hover-color: var(--xp-hover);
  --bs-border-color: var(--xp-border);
  --bs-border-color-translucent: rgba(31, 41, 55, 0.7);

  /* Marca */
  --bs-primary: var(--xp-primary);
  --bs-primary-rgb: var(--xp-primary-rgb);
  --bs-primary-text: #0E1116;
  --bs-primary-bg-subtle: rgba(var(--xp-primary-rgb), 0.1);
  --bs-primary-border-subtle: rgba(var(--xp-primary-rgb), 0.3);

  /* Superficies sutiles */
  --bs-secondary-bg: #11141a;
  --bs-tertiary-bg: #0f1318;
  --bs-light-bg-subtle: #11141a;
  --bs-dark-bg-subtle: #101318;

  /* App (Metronic) */
  --bs-app-bg-color: var(--xp-bg);
  --bs-app-blank-bg-color: var(--xp-bg);
  --bs-app-header-base-bg-color: #0f141a;
  --bs-app-toolbar-base-bg-color: #0f141a;
  --bs-app-footer-bg-color: #0f141a;
  --bs-app-sidebar-light-bg-color: #0f141a;
  --bs-app-sidebar-base-toggle-btn-bg-color: #11151b;
  --bs-app-sidebar-light-separator-color: var(--xp-border);

  /* Código y resaltado */
  --bs-code-color: #c084fc;
  --bs-highlight-bg: rgba(var(--xp-primary-rgb), 0.12);

  /* Scrollbar (vars usadas por el tema) */
  --bs-scrollbar-color: var(--xp-primary);
  --bs-scrollbar-hover-color: var(--xp-hover);

  /* “Dark” semántico Bootstrap */
  --bs-dark: #0E1116;
  --bs-dark-rgb: 14, 17, 22;
  --bs-dark-text: #E5E7EB;
  --bs-dark-bg-subtle: #1F2937;
  --bs-dark-border-subtle: #1F2937;

  /* Colores de texto utilitarios principales */
  --bs-secondary-color: var(--xp-fg-muted);
  --bs-tertiary-color: var(--xp-fg-muted);
}

/* ---------- Neutraliza el tema "light" (solo lo que el tema pinta en azul/grises) ---------- */
[data-bs-theme="light"] {
  /* Grises (evitar azules del tema) */

  --bs-gray-100: #11141a;
  --bs-gray-200: #141922;
  --bs-gray-300: #1A1F2A;
  --bs-gray-400: #232a36;
  --bs-gray-500: #2b3442;
  --bs-gray-600: #374151;
  --bs-gray-700: #1F2937;
  --bs-gray-800: #111827;
  --bs-gray-900: #0B0F15;



  /* Textos utilitarios */
  --bs-text-white: #ffffff;
  --bs-text-muted: var(--xp-fg-muted);
  --bs-text-primary: var(--xp-primary);
  --bs-text-secondary: var(--xp-fg-muted);
  --bs-text-light: #cbd5e1;
  --bs-text-success: #22C55E;
  --bs-text-info: #93c5fd;
  --bs-text-warning: #fde68a;
  --bs-text-danger: #fca5a5;
  --bs-text-dark: var(--xp-fg);

  --bs-text-gray-100: #ffffff;
  --bs-text-gray-200: #ffffff;
  --bs-text-gray-300: #ffffff;
  --bs-text-gray-400: #ffffff;
  --bs-text-gray-500: #ffffff;
  --bs-text-gray-600: #ffffff;
  --bs-text-gray-700: #ffffff;
  --bs-text-gray-800: #ffffff;

  /* Marca/estados */
  --bs-primary: var(--xp-primary);
  --bs-primary-rgb: var(--xp-primary-rgb);
  --bs-primary-active: var(--xp-hover);
  --bs-primary-light: rgba(var(--xp-primary-rgb), .12);
  --bs-success: #22C55E;
  --bs-info: #38bdf8;
  --bs-warning: #eab308;
  --bs-danger: #ef4444;
  --bs-dark: #0E1116;
  --bs-dark-rgb: 14,17,22;
  --bs-dark-active: #101318;
  --bs-dark-light: #1F2937;

  /* Inversos */
  --bs-primary-inverse: #0E1116;
  --bs-secondary-inverse: #E5E7EB;
  --bs-dark-inverse: #E5E7EB;

  /* Componentes */
  --bs-dropdown-bg: var(--xp-bg);
  --bs-code-bg: #101318;
  --bs-table-striped-bg: rgba(31, 41, 55, 0.35);
  --bs-input-bg: #11151b;
  --bs-input-solid-bg: #11151b;
  --bs-input-solid-bg-focus: #141922;
  --bs-input-color: var(--xp-fg);
  --bs-input-solid-color: var(--xp-fg);
  --bs-input-solid-placeholder-color: var(--xp-fg-muted);

  /* Menu/links del tema */
  --bs-menu-heading-color: var(--xp-fg-muted);
  --bs-menu-link-color-hover: var(--xp-primary);
  --bs-menu-link-color-show: var(--xp-primary);
  --bs-menu-link-color-here: var(--xp-primary);
  --bs-menu-link-color-active: var(--xp-primary);
  --bs-menu-link-bg-color-hover: #11141a;
  --bs-menu-link-bg-color-show: #11141a;
  --bs-menu-link-bg-color-here: #11141a;
  --bs-menu-link-bg-color-active: #11141a;

  /* Scrollbar tema-light heredado */
  --bs-scrollbar-color: var(--xp-primary);
  --bs-scrollbar-hover-color: var(--xp-hover);
}

/* ---------- Utilidades y helpers ---------- */
.text-muted { color: var(--xp-fg-muted) !important; }
.text-dark  { color: var(--bs-dark-text) !important; }
.border, .border-top, .border-end, .border-bottom, .border-start { border-color: var(--xp-border) !important; }
.bg-dark, .card.bg-dark { background-color: var(--bs-dark-bg-subtle) !important; }

/* ---------- Botones ---------- */
.btn-primary {
  color: var(--bs-primary-text);
  background-color: var(--xp-primary);
  border-color: var(--xp-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--xp-hover);
  border-color: var(--xp-hover);
  color: #0B0E13;
}
.btn-outline-primary {
  color: var(--xp-primary);
  border-color: var(--xp-primary);
  background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--xp-primary);
  color: var(--bs-primary-text);
  border-color: var(--xp-primary);
}
/* Botón neutral */
.btn-dark, .btn-secondary {
  background-color: #141922;
  border-color: var(--xp-border);
  color: var(--xp-fg);
}
.btn-dark:hover, .btn-secondary:hover {
  background-color: #19202b;
  border-color: var(--xp-border);
}

/* ---------- Cards, tablas ---------- */
.card {
  background-color: var(--bs-dark-bg-subtle);
  color: var(--xp-fg);
  border-color: var(--xp-border);
}
.table {
  --bs-table-color: var(--xp-fg);
  --bs-table-bg: var(--bs-dark-bg-subtle);
  --bs-table-border-color: var(--xp-border);
  --bs-table-striped-bg: rgba(31, 41, 55, 0.35);
  --bs-table-hover-bg: rgba(31, 41, 55, 0.55);
}
.table thead th { color: var(--xp-fg-muted); }

/* ---------- Formularios ---------- */
.form-label,.col-form-label { color: var(--xp-fg); }
.form-text { color: var(--xp-fg-muted); }
.form-control,.form-select,.input-group-text,.form-check-input {
  color: var(--xp-fg);
  background-color: #11151b;
  border-color: var(--xp-border);
}
.form-control::placeholder { color: var(--xp-fg-muted); }
.form-control:focus,.form-select:focus {
  border-color: var(--xp-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--xp-primary-rgb), 0.25);
}

/* ---------- Navbars / dropdowns / offcanvas ---------- */
.navbar,.offcanvas,.dropdown-menu {
  background-color: #0f141a;
  color: var(--xp-fg);
  border-color: var(--xp-border);
}
.navbar .nav-link,.dropdown-item { color: var(--xp-fg); }
.navbar .nav-link:hover,.dropdown-item:hover {
  color: var(--xp-primary);
  background-color: rgba(31,41,55,0.45);
}

/* ---------- Modals / tooltips / popovers ---------- */
.modal-content {
  background-color: var(--xp-bg);
  color: var(--xp-fg);
  border-color: var(--xp-border);
}
.popover,.tooltip .tooltip-inner {
  background-color: #121821;
  color: var(--xp-fg);
  border: 1px solid var(--xp-border);
}

/* ---------- Links / estados / varios ---------- */
a { color: var(--xp-primary); }
a:hover, a:focus { color: var(--xp-hover); }
.hr, hr { border-color: var(--xp-border); }
.badge.bg-primary { background-color: var(--xp-primary) !important; color: var(--bs-primary-text) !important; }
.progress { background-color: #12161d; }
.progress-bar { background-color: var(--xp-primary); }
.alert-primary {
  color: #0E1116;
  background-color: rgba(var(--xp-primary-rgb), 0.15);
  border-color: rgba(var(--xp-primary-rgb), 0.35);
}

/* ---------- Scrollbars (global + sidebar) ---------- */
/* Global (Firefox) */
* { scrollbar-color: var(--bs-scrollbar-color) var(--bs-body-bg); scrollbar-width: thin; }
/* Global (WebKit) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bs-body-bg); }
*::-webkit-scrollbar-thumb { background-color: var(--bs-scrollbar-color); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--bs-scrollbar-hover-color); }

/* Sidebar del tema que forzaba azul */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .hover-scroll-overlay-y {
  scrollbar-color: var(--bs-scrollbar-color) transparent !important; /* Firefox */
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .hover-scroll-overlay-y:hover {
  scrollbar-color: var(--bs-scrollbar-hover-color) transparent !important;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .hover-scroll-overlay-y::-webkit-scrollbar-thumb {
  background-color: var(--bs-scrollbar-color) !important;            /* WebKit */
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .hover-scroll-overlay-y::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-scrollbar-hover-color) !important;
}

/* ---------- “Superficies app” por si el tema fuerza claros ---------- */
.app-content,.app-wrapper,.app-main,.app-blank,.app-blank .app-content {
  background-color: var(--bs-app-blank-bg-color) !important;
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.app-header,.app-toolbar,.app-footer {
  background-color: var(--bs-app-header-base-bg-color) !important;
  color: var(--bs-body-color) !important;
  box-shadow: none !important;
  border-color: var(--bs-border-color) !important;
}

.app-sidebar {
  background-color: var(--bs-app-sidebar-light-bg-color) !important;
  color: var(--bs-body-color) !important;
  border-right: 1px solid var(--bs-app-sidebar-light-separator-color);
}

.menu-title
{
    color: white !important;
}
.menu-title:hover
{
    color: var(--xp-hover) !important;
}

.svg-icon
{
    color: white !important;
}
.svg-icon:hover
{
    color: var(--xp-hover) !important;
}

.menu-link
{
    color: white !important;
}
.menu-link:hover
{
    color: var(--xp-hover) !important;
}

i.bi{
    color: white !important;
}

.apexcharts-text,
  .apexcharts-datalabel-label,
  .apexcharts-datalabel-value,
  .apexcharts-legend-text {
    fill: var(--bs-body-color) !important;   /* afecta <text> SVG */
    color: var(--bs-body-color) !important;  /* fallback */
  }

.menu-arrow:after{
    color: white !important;
}

/* ===== FIX inputs en modo dark ===== */
.form-control,
.form-control-solid,
.form-select {
    color: #E5E7EB !important;          /* texto claro */
    background-color: #0E1116 !important;
    border-color: #1F2937 !important;
}

.form-control::placeholder {
    color: #9CA3AF !important;
}

.form-control:focus,
.form-select:focus {
    color: #E5E7EB !important;
    background-color: #0E1116 !important;
    border-color: #22C55E !important;   /* verde XP */
}





/* ================================
   XP DARK - NORMALIZACIÓN GLOBAL
   Pegar al FINAL de styles.css
================================ */

/* Base text */
:root{
  --xp-bg: #0E1116;
  --xp-fg: #E5E7EB;
  --xp-muted: #9CA3AF;
  --xp-border: #1F2937;
  --xp-primary: #22C55E;
  --xp-primary-hover: #16A34A;
}

/* 1) Botones "claros" (Metronic usa mucho btn-light) */
.btn.btn-light,
.btn.btn-light-primary,
.btn.btn-light-success,
.btn.btn-light-info,
.btn.btn-light-warning,
.btn.btn-light-danger{
  background-color: rgba(255,255,255,.06) !important;
  color: var(--xp-fg) !important;
  border: 1px solid var(--xp-border) !important;
}

.btn.btn-light:hover,
.btn.btn-light-primary:hover,
.btn.btn-light-success:hover,
.btn.btn-light-info:hover,
.btn.btn-light-warning:hover,
.btn.btn-light-danger:hover{
  background-color: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* 2) Outline buttons (a veces quedan grises y sin contraste) */
.btn.btn-outline,
.btn.btn-outline-primary,
.btn.btn-outline-secondary{
  background-color: transparent !important;
  border-color: var(--xp-border) !important;
  color: var(--xp-fg) !important;
}

.btn.btn-outline-primary{
  border-color: rgba(34,197,94,.45) !important;
  color: var(--xp-primary) !important;
}

.btn.btn-outline-primary:hover{
  background-color: rgba(34,197,94,.12) !important;
  border-color: rgba(34,197,94,.70) !important;
  color: var(--xp-fg) !important;
}

/* 3) Botón primary: asegurar contraste */
.btn.btn-primary{
  background-color: var(--xp-primary) !important;
  border-color: var(--xp-primary) !important;
  color: #07110A !important; /* texto oscuro para que “reviente” */
}

.btn.btn-primary:hover{
  background-color: var(--xp-primary-hover) !important;
  border-color: var(--xp-primary-hover) !important;
}



/* Inputs y selects: texto claro + fondo dark + borde correcto */
.form-control,
.form-select,
.form-control.form-control-solid,
.form-select.form-select-solid{
  background-color: rgba(255,255,255,.04) !important;
  border-color: var(--xp-border) !important;
  color: var(--xp-fg) !important;
}

/* Placeholder (esto es lo que normalmente “se pierde”) */
.form-control::placeholder{
  color: rgba(229,231,235,.45) !important;
}

/* Focus (borde verde XP) */
.form-control:focus,
.form-select:focus{
  border-color: rgba(34,197,94,.70) !important;
  box-shadow: 0 0 0 .2rem rgba(34,197,94,.18) !important;
}

/* Labels y textos de formularios */
label, .form-label{
  color: var(--xp-fg) !important;
}
.text-gray-500, .text-muted{
  color: var(--xp-muted) !important;
}


/* File input en dark: botón y texto legibles */
input[type="file"].form-control,
input[type="file"].form-control.form-control-solid{
  padding: .55rem .75rem !important;
  color: var(--xp-fg) !important;
  background-color: rgba(255,255,255,.04) !important;
  border: 1px solid var(--xp-border) !important;
}

/* Botón interno (Chrome/Edge) */
input[type="file"]::file-selector-button{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--xp-border) !important;
  color: var(--xp-fg) !important;
  padding: .45rem .75rem !important;
  margin-right: .75rem !important;
  border-radius: .475rem !important;
}

input[type="file"]::file-selector-button:hover{
  background: rgba(255,255,255,.12) !important;
}


/* Bootstrap Icons dentro de botones: heredan color correcto */
.btn i.bi{
  color: currentColor !important;
}

/* Metronic svg-icon: forzar fill/stroke a currentColor */
.svg-icon svg [fill],
.svg-icon svg path{
  fill: currentColor !important;
}
.svg-icon svg [stroke]{
  stroke: currentColor !important;
}

/* En btn-light que antes quedaba gris apagado */
.btn.btn-light .svg-icon,
.btn.btn-light i{
  color: var(--xp-fg) !important;
}


.badge.badge-light,
.badge.badge-light-primary,
.badge.badge-light-success,
.badge.badge-light-info,
.badge.badge-light-warning,
.badge.badge-light-danger{
  background-color: rgba(255,255,255,.08) !important;
  color: var(--xp-fg) !important;
  border: 1px solid var(--xp-border) !important;
}


/* Fix selects dark mode */
select.form-select,
select.form-control {
    background-color: #11151b !important;
    color: #E5E7EB !important;
    border-color: #1F2937 !important;
}

/* Opciones del dropdown */
select.form-select option,
select.form-control option {
    background-color: #11151b !important;
    color: #E5E7EB !important;
}