/* ====== Tema oscuro = KBL «carbón» ======
   El claro («mundo de fieltro») queda como está. El oscuro toma la identidad
   de la web de KBL (1-web / tokens de 4-branding):
     · Colores por ROL, valores de tokens/tokens.css, tema carbón.
     · KBL no tiene color de acento: la marca es papel sobre carbón. El color
       aparece sólo cuando significa un estado (ok / alerta / error / info).
     · Archivo como única familia; la jerarquía la hacen peso y ancho.
     · Radio de la web (decisión del 24/09): 12 px contenedores, 8 px controles.
     · Sin cielo, sin pasto, sin vidrio decorativo: bloques sólidos con línea.
   Este archivo se carga DESPUÉS de app.css y sólo actúa con
   body[data-theme="dark"]. */

@font-face { font-family: "Archivo"; src: url("../assets/fuentes/Archivo/Archivo-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../assets/fuentes/Archivo/Archivo-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../assets/fuentes/Archivo/Archivo-SemiBold.otf") format("opentype"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Archivo Expanded"; src: url("../assets/fuentes/Archivo/ArchivoExpanded-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }

body[data-theme="dark"] {
  /* --- tokens KBL, tema carbón --- */
  --kbl-fondo: #15171A;
  --kbl-superficie: #1E2024;
  --kbl-superficie-2: #272A30;
  --kbl-linea: #32353C;
  --kbl-linea-fuerte: #6F737D;
  --kbl-tinta: #ECEBE6;
  --kbl-texto-2: #B3B2AD;
  --kbl-texto-3: #93928C;
  --kbl-desactivado: #4B4E55;
  --kbl-ok: #8FB587;
  --kbl-alerta: #D6AA51;
  --kbl-error: #D28D7F;
  --kbl-info: #8DACC4;
  --kbl-radio: 12px;
  --kbl-radio-control: 8px;

  /* --- variables de la app, mapeadas a los roles --- */
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sky: var(--kbl-fondo);
  --ink: var(--kbl-tinta);
  --ink-soft: var(--kbl-texto-2);
  --card: var(--kbl-superficie);
  --grass: var(--kbl-ok);
  --grass-deep: var(--kbl-ok);
  --accent: var(--kbl-tinta);
  --accent-deep: var(--kbl-tinta);
  --accent-txt: var(--kbl-tinta);
  --accent-fondo: var(--kbl-tinta);
  --tab-off: var(--kbl-texto-3);
  --tab-on: var(--kbl-tinta);
  --tab-on-bg: var(--kbl-superficie-2);
  --radius-xl: var(--kbl-radio);
  --radius-lg: var(--kbl-radio);
  --shadow-soft: none;

  /* Finanzas: categorías = estados de la marca + dos neutros. Sin arcoíris. */
  --fin-fijo: var(--kbl-info);
  --fin-sub: #A9A3C4;
  --fin-cuota: var(--kbl-alerta);
  --fin-tarjeta: var(--kbl-error);
  --fin-var: var(--kbl-ok);
  --fin-ahorro: #87B5AE;
  --fin-ok: var(--kbl-ok);
  --fin-mal: var(--kbl-error);
  --fin-cuota-txt: var(--kbl-alerta);
  --fin-ahorro-txt: #87B5AE;
  --fin-surf: var(--kbl-superficie);
  --fin-borde: var(--kbl-linea);
  --fin-rule: var(--kbl-linea);

  background: var(--kbl-fondo);
  color: var(--kbl-tinta);
  color-scheme: dark;
  font-family: var(--font);
  font-feature-settings: "tnum" 1;
}

/* Todo hereda Archivo: los controles no heredan la fuente por defecto. */
body[data-theme="dark"] button,
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea { font-family: var(--font); }

/* Pesos: el sistema llega a 600. Lo que en la app era 800/900 baja a 600. */
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] b,
body[data-theme="dark"] strong { font-weight: 600; }
body[data-theme="dark"] .view-header h1 { letter-spacing: -0.01em; }

/* Etiquetas: MAYÚSCULAS en Archivo Expanded con tracking, como en la web. */
body[data-theme="dark"] .gasto-dia,
body[data-theme="dark"] .fin-card h2,
body[data-theme="dark"] .fin-card h3,
body[data-theme="dark"] .cuotas-proy-wrap h2,
body[data-theme="dark"] .cuotas-resumen-wrap h2 {
  font-family: "Archivo Expanded", var(--font);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kbl-texto-3);
}

/* --- Sin decorado de «mundo»: nubes, sol, pasto --- */
body[data-theme="dark"] .cloud,
body[data-theme="dark"] .sun,
body[data-theme="dark"] .moon,
body[data-theme="dark"] .stars { display: none !important; }

/* --- Superficies: bloque sólido + línea, sin sombra ni vidrio --- */
body[data-theme="dark"] .panel,
body[data-theme="dark"] .gasto-hero,
body[data-theme="dark"] .gasto-form,
body[data-theme="dark"] .gasto-item,
body[data-theme="dark"] .cuotas-proy-wrap,
body[data-theme="dark"] .cuotas-resumen-wrap,
body[data-theme="dark"] .cuota-form-wrap,
body[data-theme="dark"] .cuota-card,
body[data-theme="dark"] .fin-hero,
body[data-theme="dark"] .fin-card,
body[data-theme="dark"] .fin-form-wrap,
body[data-theme="dark"] .auth-card,
body[data-theme="dark"] .sheet {
  background: var(--kbl-superficie) !important;
  border: 1px solid var(--kbl-linea) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: var(--kbl-radio);
}

/* Los héroes numéricos (el monto grande) van en la superficie hundida. */
body[data-theme="dark"] .gasto-hero,
body[data-theme="dark"] .fin-hero { background: var(--kbl-superficie-2) !important; }

/* Navegación: fondo de página, separada por línea. */
body[data-theme="dark"] .tabbar,
body[data-theme="dark"] .sidebar {
  background: var(--kbl-fondo) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-theme="dark"] .tabbar { border-top: 1px solid var(--kbl-linea) !important; }
body[data-theme="dark"] .sidebar { border-right: 1px solid var(--kbl-linea); border-radius: 0; }
body[data-theme="dark"] .sb-top { border-bottom-color: var(--kbl-linea); }
body[data-theme="dark"] .sb-marca { color: var(--kbl-tinta); font-weight: 600; letter-spacing: -0.01em; }
body[data-theme="dark"] .sb-toggle { background: var(--kbl-superficie-2); color: var(--kbl-tinta); }
body[data-theme="dark"] .sb-toggle:hover { background: var(--kbl-linea); }

/* Sub-pestañas de Plata: control segmentado sobrio. */
body[data-theme="dark"] .subtabs,
body[data-theme="dark"] .sb-sub .subtabs {
  background: var(--kbl-superficie) !important;
  border: 1px solid var(--kbl-linea);
  border-radius: var(--kbl-radio-control);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-theme="dark"] .subtab { color: var(--kbl-texto-2); border-radius: 6px; font-weight: 500; }
body[data-theme="dark"] .subtab.active { background: var(--kbl-superficie-2); color: var(--kbl-tinta); box-shadow: inset 0 0 0 1px var(--kbl-linea-fuerte); }

/* --- Controles --- */
body[data-theme="dark"] .chip,
body[data-theme="dark"] .seg-btn,
body[data-theme="dark"] .fin-btn,
body[data-theme="dark"] .gasto-borrar,
body[data-theme="dark"] .cuota-form-toggle {
  background: var(--kbl-superficie) !important;
  color: var(--kbl-texto-2) !important;
  border: 1px solid var(--kbl-linea-fuerte) !important;
  border-radius: var(--kbl-radio-control);
  box-shadow: none !important;
}
body[data-theme="dark"] .chip.selected,
body[data-theme="dark"] .seg-btn.selected {
  background: var(--kbl-tinta) !important;
  color: var(--kbl-fondo) !important;
  border-color: var(--kbl-tinta) !important;
}

/* Botón primario de la marca: tinta clara, texto carbón. Sin gradiente. */
body[data-theme="dark"] .btn-primary,
body[data-theme="dark"] .btn-circular,
body[data-theme="dark"] .fab,
body[data-theme="dark"] .cuota-pagar {
  background: var(--kbl-tinta) !important;
  color: var(--kbl-fondo) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--kbl-radio-control);
}

body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .gasto-form input,
body[data-theme="dark"] .cuota-form-inner input,
body[data-theme="dark"] .fin-edit-input,
body[data-theme="dark"] .fin-medio-dia input,
body[data-theme="dark"] .auth-form input {
  background: var(--kbl-fondo) !important;
  color: var(--kbl-tinta) !important;
  border: 1px solid var(--kbl-linea-fuerte) !important;
  border-radius: var(--kbl-radio-control);
}
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder { color: var(--kbl-texto-3) !important; }
body[data-theme="dark"] :focus-visible { outline: 2px solid var(--kbl-tinta); outline-offset: 2px; }

body[data-theme="dark"] .theme-toggle {
  background: var(--kbl-superficie);
  border: 1px solid var(--kbl-linea-fuerte);
  box-shadow: none;
}

/* --- Listas y cifras --- */
body[data-theme="dark"] .gasto-tarjeta-row,
body[data-theme="dark"] .periodo-fila,
body[data-theme="dark"] .resumen-total { border-color: var(--kbl-linea) !important; }
body[data-theme="dark"] .resumen-total-monto { color: var(--kbl-tinta); }

/* Barras: tinta sobre superficie hundida; el estado lo marca el color de estado. */
body[data-theme="dark"] .proy-barra,
body[data-theme="dark"] .cuota-progress-bar { background: var(--kbl-texto-2) !important; }
body[data-theme="dark"] .proy-row--next .proy-barra { background: var(--kbl-tinta) !important; }
body[data-theme="dark"] .proy-row--pago .proy-barra { background: var(--kbl-ok) !important; }
body[data-theme="dark"] .proy-barra-wrap,
body[data-theme="dark"] .cuota-progress-wrap { background: var(--kbl-superficie-2) !important; }

body[data-theme="dark"] .cuota-ok { background: transparent; color: var(--kbl-ok); border: 1px solid var(--kbl-ok); }
body[data-theme="dark"] .cuota-del { background: transparent; color: var(--kbl-error); border: 1px solid var(--kbl-error); }

body[data-theme="dark"] .btn-logout { background: transparent; color: var(--kbl-texto-2); border: 1px solid var(--kbl-linea-fuerte); }

/* --- Detalles que en app.css tenían el color escrito a mano --- */
body[data-theme="dark"] .cat-mini {
  background: var(--kbl-superficie);
  color: var(--kbl-texto-2);
  border: 1px solid var(--kbl-linea);
}
/* Los dólares se distinguen por el signo, no por un verde: el verde en KBL
   quiere decir «confirmado». */
body[data-theme="dark"] .gasto-monto.es-usd { color: var(--kbl-tinta); }
body[data-theme="dark"] .resumen-ahorro { color: var(--kbl-ok); }
body[data-theme="dark"] .monto-usd { color: var(--kbl-texto-2); }
body[data-theme="dark"] .seg-op.selected {
  background: var(--kbl-tinta) !important;
  color: var(--kbl-fondo) !important;
}
/* Barra de scroll del contenedor de la app: la del sistema salía blanca. */
body[data-theme="dark"] * { scrollbar-color: var(--kbl-linea-fuerte) var(--kbl-fondo); }

/* --- Escena de Foco --- */
/* El brillo de vidrio del panel y la viñeta violeta son del «mundo»: fuera. */
body[data-theme="dark"] .panel::before,
body[data-theme="dark"] .panel::after,
body[data-theme="dark"] .scene::after { display: none; }

/* --- Resto de superficies «vidrio claro» del tema de fieltro --- */
body[data-theme="dark"] .stat-card,
body[data-theme="dark"] .species-card,
body[data-theme="dark"] .forest-cell,
body[data-theme="dark"] .nota-card,
body[data-theme="dark"] .viewer360 {
  background: var(--kbl-superficie) !important;
  border: 1px solid var(--kbl-linea) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: var(--kbl-radio);
  color: var(--kbl-tinta);
}
/* Árbol muerto / sin plantar: más hundido, para que se lea el estado. */
body[data-theme="dark"] .forest-cell.dead { background: var(--kbl-fondo) !important; }
body[data-theme="dark"] .stat-key {
  font-family: "Archivo Expanded", var(--font);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--kbl-texto-3);
}
body[data-theme="dark"] .cat-chip,
body[data-theme="dark"] .btn-ghost,
body[data-theme="dark"] .btn-foto,
body[data-theme="dark"] .editor-borrar {
  background: var(--kbl-superficie) !important;
  color: var(--kbl-texto-2) !important;
  border: 1px solid var(--kbl-linea-fuerte) !important;
  box-shadow: none !important;
  border-radius: var(--kbl-radio-control);
}
body[data-theme="dark"] .cat-chip.selected {
  background: var(--kbl-tinta) !important;
  color: var(--kbl-fondo) !important;
  border-color: var(--kbl-tinta) !important;
}

/* Acción destructiva: color de error de la marca, sin relleno naranja. */
body[data-theme="dark"] .aj-btn--peligro {
  background: transparent !important;
  color: var(--kbl-error) !important;
  border: 1px solid var(--kbl-error) !important;
  border-radius: var(--kbl-radio-control);
}

/* Marco de la app en pantallas anchas: bloque con línea, radio de la web. */
@media (min-width: 768px) {
  body[data-theme="dark"] #app {
    border-radius: var(--kbl-radio);
    border: 1px solid var(--kbl-linea);
    box-shadow: none;
  }
}