/* Tema Dark Mode de Zero.Wallet (UI-001).
   Estética Binance con el amarillo característico (#fcd535) reemplazado por verde esmeralda como
   color de acento, según la especificación funcional §6.

   Se carga entre bootstrap.min.css y site.css. La estrategia es no reescribir reglas de Bootstrap
   sino reasignar sus custom properties: Bootstrap 5.3 expone --bs-* a nivel global y por componente,
   así que el tema se define una sola vez acá y ninguna vista necesita clases propias.

   Estructura del archivo:
     1. Tokens --zw-* (la paleta, independiente de Bootstrap)
     2. Mapeo de los tokens a las variables globales --bs-*
     3. Componentes donde Bootstrap deja el azul #0d6efd compilado literal
     4. Anillo de foco
     5. Select2 (librería externa, no participa del sistema de variables de Bootstrap) */

/* ============================================================================
   1. TOKENS
   ============================================================================ */

:root {
  /* Superficies. Tres niveles: la página, lo que se apoya sobre ella (cards, navbar) y lo que se
     apoya sobre eso (inputs, filas resaltadas, dropdowns). */
  --zw-bg: #0b0e11;
  --zw-surface: #181a20;
  --zw-elevated: #1e2329;
  --zw-overlay: #252930;

  /* Overlay translúcido para hover y filas alternadas: al no ser un color opaco funciona igual
     sobre la página que dentro de una card, sin necesidad de una variante por contenedor. */
  --zw-hover: rgba(255, 255, 255, 0.04);

  /* Bordes */
  --zw-border: #2b3139;
  --zw-border-md: #363c45;
  --zw-border-lg: #474d57;

  /* Texto */
  --zw-text: #eaecef;
  --zw-text-muted: #848e9c;
  --zw-text-dim: #707a8a;

  /* Acento. Ocupa el lugar del amarillo de Binance. --zw-on-accent es el color de texto que va
     ENCIMA del esmeralda: el blanco sobre #10b981 da 2.5:1 y no llega a AA, el fondo oscuro da
     7.5:1. */
  --zw-accent: #10b981;
  --zw-accent-hover: #34d399;
  --zw-accent-active: #059669;
  --zw-accent-rgb: 16, 185, 129;
  --zw-accent-bg: rgba(16, 185, 129, 0.1);
  --zw-accent-border: rgba(16, 185, 129, 0.25);
  --zw-on-accent: #0b0e11;

  /* Semánticos. En una aplicación de cartera el verde ya significa "ganancia", así que --zw-success
     comparte tono con el acento a propósito en vez de introducir un segundo verde. */
  --zw-success: #10b981;
  --zw-success-rgb: 16, 185, 129;
  --zw-success-bg: rgba(16, 185, 129, 0.12);
  --zw-success-border: rgba(16, 185, 129, 0.3);

  --zw-danger: #f6465d;
  --zw-danger-rgb: 246, 70, 93;
  --zw-danger-bg: rgba(246, 70, 93, 0.12);
  --zw-danger-border: rgba(246, 70, 93, 0.3);

  --zw-warning: #f59e0b;
  --zw-warning-rgb: 245, 158, 11;
  --zw-warning-bg: rgba(245, 158, 11, 0.12);
  --zw-warning-border: rgba(245, 158, 11, 0.3);

  --zw-info: #38bdf8;
  --zw-info-rgb: 56, 189, 248;
  --zw-info-bg: rgba(56, 189, 248, 0.1);
  --zw-info-border: rgba(56, 189, 248, 0.3);

  /* Paleta del gráfico de distribución (DASH-003). Vive en variables y no en el JS para que el tema
     pueda redefinirla sin tocar el código del gráfico; dashboard-distribucion.js las busca por
     nombre con getComputedStyle. El esmeralda va primero porque es el color de acento; el resto
     sigue un orden de contraste decreciente entre porciones vecinas. */
  --zw-chart-1: #10b981;
  --zw-chart-2: #38bdf8;
  --zw-chart-3: #a78bfa;
  --zw-chart-4: #f59e0b;
  --zw-chart-5: #fb923c;
  --zw-chart-6: #f87171;
  --zw-chart-7: #64748b;
  --zw-chart-8: #34d399;
}

/* ============================================================================
   2. VARIABLES GLOBALES DE BOOTSTRAP
   ============================================================================
   Bootstrap 5.3 ya trae su propio bloque [data-bs-theme=dark]; acá se lo pisa con los tokens del
   tema. Misma especificidad que el original, pero este archivo se carga después. */

[data-bs-theme="dark"] {
  color-scheme: dark;

  /* Superficies y texto */
  --bs-body-bg: var(--zw-bg);
  --bs-body-bg-rgb: 11, 14, 17;
  --bs-body-color: var(--zw-text);
  --bs-body-color-rgb: 234, 236, 239;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-bg: var(--zw-surface);
  --bs-secondary-bg-rgb: 24, 26, 32;
  --bs-secondary-color: var(--zw-text-muted);
  --bs-secondary-color-rgb: 132, 142, 156;
  --bs-tertiary-bg: var(--zw-elevated);
  --bs-tertiary-bg-rgb: 30, 35, 41;
  --bs-tertiary-color: var(--zw-text-dim);
  --bs-tertiary-color-rgb: 112, 122, 138;
  --bs-heading-color: var(--zw-text);
  --bs-border-color: var(--zw-border);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);

  /* Acento. --bs-primary-rgb alimenta a .text-primary y .bg-primary. */
  --bs-primary: var(--zw-accent);
  --bs-primary-rgb: var(--zw-accent-rgb);
  --bs-primary-text-emphasis: var(--zw-accent-hover);
  --bs-primary-bg-subtle: var(--zw-accent-bg);
  --bs-primary-border-subtle: var(--zw-accent-border);

  --bs-link-color: var(--zw-accent);
  --bs-link-color-rgb: var(--zw-accent-rgb);
  --bs-link-hover-color: var(--zw-accent-hover);
  --bs-link-hover-color-rgb: 52, 211, 153;

  /* Semánticos. Los *-text-emphasis / *-bg-subtle / *-border-subtle son los que consumen las alerts
     y los utilitarios .text-*-emphasis, así que redefinirlos acá alcanza para las 17 alerts de la
     aplicación sin escribir una regla por variante. */
  --bs-success: var(--zw-success);
  --bs-success-rgb: var(--zw-success-rgb);
  --bs-success-text-emphasis: var(--zw-accent-hover);
  --bs-success-bg-subtle: var(--zw-success-bg);
  --bs-success-border-subtle: var(--zw-success-border);

  --bs-danger: var(--zw-danger);
  --bs-danger-rgb: var(--zw-danger-rgb);
  --bs-danger-text-emphasis: var(--zw-danger);
  --bs-danger-bg-subtle: var(--zw-danger-bg);
  --bs-danger-border-subtle: var(--zw-danger-border);

  --bs-warning: var(--zw-warning);
  --bs-warning-rgb: var(--zw-warning-rgb);
  --bs-warning-text-emphasis: var(--zw-warning);
  --bs-warning-bg-subtle: var(--zw-warning-bg);
  --bs-warning-border-subtle: var(--zw-warning-border);

  --bs-info: var(--zw-info);
  --bs-info-rgb: var(--zw-info-rgb);
  --bs-info-text-emphasis: var(--zw-info);
  --bs-info-bg-subtle: var(--zw-info-bg);
  --bs-info-border-subtle: var(--zw-info-border);

  --bs-code-color: var(--zw-accent-hover);
  --bs-highlight-bg: var(--zw-warning-bg);
  --bs-highlight-color: var(--zw-text);

  /* Validación de formularios (asp-validation-for). */
  --bs-form-valid-color: var(--zw-accent-hover);
  --bs-form-valid-border-color: var(--zw-accent);
  --bs-form-invalid-color: var(--zw-danger);
  --bs-form-invalid-border-color: var(--zw-danger);
}

/* ============================================================================
   3. COMPONENTES
   ============================================================================
   Bootstrap compila el azul #0d6efd literal dentro de cada componente, así que redefinir
   --bs-primary no alcanza: hay que reasignar las variables locales del componente. Solo están los
   componentes que la aplicación usa hoy. */

/* --- Botones --- */

.btn-primary {
  --bs-btn-color: var(--zw-on-accent);
  --bs-btn-bg: var(--zw-accent);
  --bs-btn-border-color: var(--zw-accent);
  --bs-btn-hover-color: var(--zw-on-accent);
  --bs-btn-hover-bg: var(--zw-accent-hover);
  --bs-btn-hover-border-color: var(--zw-accent-hover);
  --bs-btn-focus-shadow-rgb: var(--zw-accent-rgb);
  --bs-btn-active-color: var(--zw-on-accent);
  --bs-btn-active-bg: var(--zw-accent-active);
  --bs-btn-active-border-color: var(--zw-accent-active);
  --bs-btn-disabled-color: var(--zw-on-accent);
  --bs-btn-disabled-bg: var(--zw-accent);
  --bs-btn-disabled-border-color: var(--zw-accent);
}

/* .btn-outline-primary es además el estado no seleccionado de los btn-check del dashboard
   (agrupación y moneda del gráfico de distribución). */
.btn-outline-primary {
  --bs-btn-color: var(--zw-accent);
  --bs-btn-border-color: var(--zw-accent-border);
  --bs-btn-hover-color: var(--zw-on-accent);
  --bs-btn-hover-bg: var(--zw-accent);
  --bs-btn-hover-border-color: var(--zw-accent);
  --bs-btn-focus-shadow-rgb: var(--zw-accent-rgb);
  --bs-btn-active-color: var(--zw-on-accent);
  --bs-btn-active-bg: var(--zw-accent);
  --bs-btn-active-border-color: var(--zw-accent);
  --bs-btn-disabled-color: var(--zw-text-dim);
  --bs-btn-disabled-border-color: var(--zw-border);
}

/* Los botones de exportación a Excel usan la variante success, que comparte tono con el acento. */
.btn-outline-success {
  --bs-btn-color: var(--zw-success);
  --bs-btn-border-color: var(--zw-success-border);
  --bs-btn-hover-color: var(--zw-on-accent);
  --bs-btn-hover-bg: var(--zw-success);
  --bs-btn-hover-border-color: var(--zw-success);
  --bs-btn-focus-shadow-rgb: var(--zw-success-rgb);
  --bs-btn-active-color: var(--zw-on-accent);
  --bs-btn-active-bg: var(--zw-success);
  --bs-btn-active-border-color: var(--zw-success);
  --bs-btn-disabled-color: var(--zw-text-dim);
  --bs-btn-disabled-border-color: var(--zw-border);
}

.btn-outline-danger {
  --bs-btn-color: var(--zw-danger);
  --bs-btn-border-color: var(--zw-danger-border);
  --bs-btn-hover-color: var(--zw-on-accent);
  --bs-btn-hover-bg: var(--zw-danger);
  --bs-btn-hover-border-color: var(--zw-danger);
  --bs-btn-focus-shadow-rgb: var(--zw-danger-rgb);
  --bs-btn-active-color: var(--zw-on-accent);
  --bs-btn-active-bg: var(--zw-danger);
  --bs-btn-active-border-color: var(--zw-danger);
  --bs-btn-disabled-color: var(--zw-text-dim);
  --bs-btn-disabled-border-color: var(--zw-border);
}

.btn-outline-secondary {
  --bs-btn-color: var(--zw-text-muted);
  --bs-btn-border-color: var(--zw-border-md);
  --bs-btn-hover-color: var(--zw-text);
  --bs-btn-hover-bg: var(--zw-elevated);
  --bs-btn-hover-border-color: var(--zw-border-lg);
  --bs-btn-focus-shadow-rgb: 132, 142, 156;
  --bs-btn-active-color: var(--zw-text);
  --bs-btn-active-bg: var(--zw-elevated);
  --bs-btn-active-border-color: var(--zw-border-lg);
  --bs-btn-disabled-color: var(--zw-text-dim);
  --bs-btn-disabled-border-color: var(--zw-border);
}

.btn-link {
  --bs-btn-disabled-color: var(--zw-text-dim);
  --bs-btn-focus-shadow-rgb: var(--zw-accent-rgb);
}

/* --- Cards --- */

.card {
  --bs-card-bg: var(--zw-surface);
  --bs-card-border-color: var(--zw-border);
  --bs-card-cap-bg: var(--zw-elevated);
  --bs-card-color: var(--zw-text);
}

/* --- Formularios ---
   Los inputs van sobre --zw-elevated y no sobre el fondo de página (que es lo que hace Bootstrap
   por defecto vía --bs-body-bg): sobre #0b0e11 el campo se confunde con la página y solo lo delata
   el borde. */

.form-control,
.form-select {
  background-color: var(--zw-elevated);
  border-color: var(--zw-border-md);
  color: var(--zw-text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--zw-elevated);
  border-color: var(--zw-accent);
  box-shadow: 0 0 0 0.25rem var(--zw-accent-bg);
  color: var(--zw-text);
}

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

.form-control:disabled,
.form-select:disabled {
  background-color: var(--zw-surface);
  color: var(--zw-text-dim);
}

/* El botón de "elegir archivo" del input de comprobante (MOVEMENT-002 / DRIVE-004). */
.form-control::file-selector-button {
  background-color: var(--zw-surface);
  color: var(--zw-text);
  border-color: var(--zw-border-md);
}

/* La etiqueta flotante (form-floating, usada en el login) se apoya sobre un rectángulo que Bootstrap
   pinta del color del fondo de página. Como acá el input NO usa ese color, sin esto la etiqueta
   queda como un recuadro más oscuro flotando dentro del campo. */
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after {
  background-color: var(--zw-elevated);
}

.form-floating > label {
  color: var(--zw-text-muted);
}

.form-check-input {
  background-color: var(--zw-elevated);
  border-color: var(--zw-border-lg);
}

.form-check-input:checked {
  background-color: var(--zw-accent);
  border-color: var(--zw-accent);
}

.form-check-input:focus {
  border-color: var(--zw-accent);
  box-shadow: 0 0 0 0.25rem var(--zw-accent-bg);
}

/* El tilde y el punto del radio vienen blancos en Bootstrap; sobre esmeralda quedan en 2.5:1.
   Se redibujan con el mismo color oscuro que el texto de los botones (%230b0e11 = --zw-on-accent). */
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b0e11' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230b0e11'/%3e%3c/svg%3e");
}

/* --- Tablas ---
   --bs-table-bg transparente en vez de un color propio: la misma tabla aparece suelta sobre la
   página y dentro de una card, y así hereda el fondo del contenedor en ambos casos. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--zw-text);
  --bs-table-border-color: var(--zw-border);
  --bs-table-striped-color: var(--zw-text);
  --bs-table-striped-bg: var(--zw-hover);
  --bs-table-hover-color: var(--zw-text);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.07);
}

/* --- Badges ---
   Las variantes de color llevan texto oscuro por la misma razón que los botones: el blanco de
   Bootstrap sobre esmeralda o sobre el rojo del tema no llega a AA. */
.badge.bg-success,
.badge.bg-danger,
.badge.bg-warning,
.badge.bg-info,
.badge.bg-primary {
  --bs-badge-color: var(--zw-on-accent);
}

/* --- Alertas ---
   Borde izquierdo grueso en vez del borde completo tenue de Bootstrap: sobre fondo oscuro un contorno
   translúcido de 1px alrededor de un relleno también translúcido casi no se ve, y las alertas de las
   distintas variantes terminaban leyéndose todas igual. El borde de color es el que las diferencia. */

.alert {
  border-left-width: 3px;
}

.alert-success {
  border-left-color: var(--zw-success);
}

.alert-danger {
  border-left-color: var(--zw-danger);
}

.alert-warning {
  border-left-color: var(--zw-warning);
}

.alert-info {
  border-left-color: var(--zw-info);
}

/* --- Texto de detalle ---
   Bootstrap deja <kbd> con "background:#212529; color:#fff" compilado literal, así que en el tema
   queda como un rectángulo negro. Se usa en la clave manual del setup de 2FA. */

kbd {
  background-color: var(--zw-elevated);
  color: var(--zw-accent-hover);
}

/* En un <dl> ambos lados heredan el color de cuerpo y no se distingue la etiqueta del valor. */
dt {
  color: var(--zw-text-muted);
}

/* --- Navbar y dropdowns ---
   La estructura del navbar (y el sidebar) se rehace en UI-002; acá solo se define su color para que
   el layout actual no quede con texto oscuro sobre fondo oscuro. */
.navbar {
  --bs-navbar-color: var(--zw-text-muted);
  --bs-navbar-hover-color: var(--zw-text);
  --bs-navbar-active-color: var(--zw-accent);
  --bs-navbar-disabled-color: var(--zw-text-dim);
  --bs-navbar-brand-color: var(--zw-text);
  --bs-navbar-brand-hover-color: var(--zw-accent);
  background-color: var(--zw-surface);
  border-bottom: 1px solid var(--zw-border);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--zw-surface);
  --bs-dropdown-border-color: var(--zw-border);
  --bs-dropdown-color: var(--zw-text);
  --bs-dropdown-link-color: var(--zw-text);
  --bs-dropdown-link-hover-bg: var(--zw-elevated);
  --bs-dropdown-link-active-bg: var(--zw-accent);
  --bs-dropdown-link-active-color: var(--zw-on-accent);
}

/* ============================================================================
   4. FOCO
   ============================================================================
   Un solo anillo esmeralda para todo lo interactivo, en lugar del blanco + azul del scaffold.
   :focus-visible y no :focus para que no aparezca al hacer click con el mouse. */

:focus-visible {
  outline: 2px solid var(--zw-accent);
  outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem var(--zw-accent-bg);
}

/* Los btn-check del dashboard ocultan el input real, así que el foco tiene que dibujarse sobre la
   etiqueta que hace de botón. */
.btn-check:focus-visible + .btn {
  box-shadow: 0 0 0 0.25rem var(--zw-accent-bg);
}

/* ============================================================================
   5. SELECT2
   ============================================================================
   Select2 no usa custom properties, así que sus colores se escriben acá directamente. Los ajustes
   de alto y radio existen porque el tema default de Select2 fue diseñado para Bootstrap 3: sin
   ellos el control queda más bajo y con otro radio que un .form-select vecino. Se resuelve así en
   vez de sumar el paquete select2-bootstrap-5-theme, que traería otra dependencia solo por estilos. */

.select2-container--default .select2-selection--single {
  height: calc(1.5em + 0.75rem + 2px);
  border: var(--bs-border-width) solid var(--zw-border-md);
  border-radius: var(--bs-border-radius);
  background-color: var(--zw-elevated);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(1.5em + 0.75rem);
  padding-left: 0.75rem;
  color: var(--zw-text);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--zw-text-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 0.75rem);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--zw-accent);
  box-shadow: 0 0 0 0.25rem var(--zw-accent-bg);
}

.select2-container--default .select2-dropdown {
  background-color: var(--zw-surface);
  border-color: var(--zw-border-md);
  color: var(--zw-text);
}

.select2-container--default .select2-results__option {
  color: var(--zw-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: var(--zw-accent);
  color: var(--zw-on-accent);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background-color: var(--zw-elevated);
  color: var(--zw-text);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: var(--bs-border-width) solid var(--zw-border-md);
  border-radius: var(--bs-border-radius);
  padding: 0.375rem 0.75rem;
  background-color: var(--zw-elevated);
  color: var(--zw-text);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--zw-accent);
  outline: none;
}

/* Área táctil bajo 768px (UI-004): mismo mínimo de 44px que se aplica a .form-select en
   components.css §13, para que el select de activo o broker no quede más bajo que el campo de
   moneda que tiene al lado. Los tres valores tienen que moverse juntos —caja, línea de texto y
   flecha— porque el tema default de Select2 los define por separado. */
@media (max-width: 767.98px) {
  .select2-container--default .select2-selection--single {
    height: 44px;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
  }

  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
  }

  /* El campo de búsqueda del desplegable también se toca con el dedo. */
  .select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 44px;
  }
}