/* ============================================================
   HOME DARK — Unifica la home con el tema oscuro del informe.
   Estrategia: invertir los tokens base a oscuro (cascada a casi
   todo lo token-based) + override puntual de los componentes con
   colores literales. Cargado AL FINAL: quitando su <link> se
   revierte la home a tema claro sin tocar nada más.
   Paleta tomada de informe.css (--ink-*, --text-*, --hairline).
   ============================================================ */

/* ── 1) Tokens base → OSCURO (scopeado en la home) ──
   Pisa tanto los --color-* de tokens.css como los tokens legacy
   del <style> inline de index.html (mayor especificidad que :root). */
body.ui-shell {
  /* superficies / texto / bordes (sistema --color-*) */
  --color-bg:           #0A0A0A;
  --color-surface:      #141414;
  --color-surface-2:    #111111;
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-text:         #FFFFFF;
  --color-text-muted:   rgba(255, 255, 255, 0.66);
  --color-text-subtle:  rgba(255, 255, 255, 0.45);

  /* IMPORTANTE: los --ui-* aliasan a --color-* PERO se resuelven en :root y se
     heredan ya "horneados" en claro. Por eso hay que pisarlos directamente acá,
     que es lo que realmente consumen los componentes (recientes, ui_components…). */
  --ui-bg:        #0A0A0A;
  --ui-surface:   #141414;
  --ui-surface-2: #111111;
  --ui-border:    rgba(255, 255, 255, 0.08);
  --ui-text:      #FFFFFF;
  --ui-muted:     rgba(255, 255, 255, 0.66);
  --ui-muted-2:   rgba(255, 255, 255, 0.45);

  /* accent único = el "epical" del informe (#6D4AFF), no el #5b5cff de la home */
  --ui-accent:       #6D4AFF;
  --ui-accent-hover: #5A3DE0;
  --ui-focus:        rgba(109, 74, 255, 0.35);

  /* sombras suaves (en oscuro casi no se ven, pero evitamos el azul claro) */
  --ui-sh-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --ui-sh-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --ui-sh-lg: 0 18px 60px rgba(0, 0, 0, 0.55);

  /* tokens legacy del <style> inline (index.html :root 245-344) */
  --bg-main:        #0A0A0A;
  --bg-secondary:   #0A0A0A;
  --bg-tertiary:    #141414;
  --bg-card:        #141414;
  --bg-primary:     #0A0A0A;   /* el wizard usa var(--bg-primary,#FFFFFF) y hoy no existía */
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.66);
  --text-tertiary:  rgba(255, 255, 255, 0.45);
  --border:         rgba(255, 255, 255, 0.08);
  --border-light:   rgba(255, 255, 255, 0.06);
  --border-medium:  rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.14);
  --glass-bg:       rgba(20, 20, 20, 0.82);

  background: #0A0A0A;
  color: #FFFFFF;
}

/* ── 2) Wizard "Nuevo Análisis" — pasada DARK ──
   El wizard (wizard-v3 / wizard-layout / *-v2) fue convertido a tokens dark.
   Re-afirmamos los tokens OSCUROS dentro del wizard para que tanto los
   var(--ui-*) como los legacy (--bg-primary, --text-primary, …) resuelvan
   oscuro, igual que el resto de la app. */
body.ui-shell #wizardContainer {
  --color-bg:           #0A0A0A;
  --color-surface:      #141414;
  --color-surface-2:    #111111;
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-text:         #FFFFFF;
  --color-text-muted:   rgba(255, 255, 255, 0.66);
  --color-text-subtle:  rgba(255, 255, 255, 0.45);
  --ui-bg:        #0A0A0A;
  --ui-surface:   #141414;
  --ui-surface-2: #111111;
  --ui-border:    rgba(255, 255, 255, 0.08);
  --ui-text:      #FFFFFF;
  --ui-muted:     rgba(255, 255, 255, 0.66);
  --ui-muted-2:   rgba(255, 255, 255, 0.45);
  --ui-sh-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --ui-sh-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --bg-main:        #0A0A0A;
  --bg-secondary:   #0A0A0A;
  --bg-tertiary:    #141414;
  --bg-card:        #141414;
  --bg-primary:     #0A0A0A;
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.66);
  --text-tertiary:  rgba(255, 255, 255, 0.45);
  --border:         rgba(255, 255, 255, 0.08);
  --border-light:   rgba(255, 255, 255, 0.08);
  --border-medium:  rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.14);
  /* tokens semánticos legacy usados por wizard-layout (--accent, --success, …) */
  --accent:   #6D4AFF;
  --primary:  #6D4AFF;
  --success:  #34D399;
  --warning:  #F2B65A;
  --danger:   #F8716A;
  --error:    #F8716A;
  background: transparent;
  color: #FFFFFF;
}

/* ── 3) Topbar → oscura, replicando inf-top del informe ── */
body.ui-shell .topbar {
  background: linear-gradient(180deg, rgba(109, 74, 255, 0.05) 0%, #0A0A0A 100%) !important;
  border-bottom: none !important;
  position: sticky;
}
body.ui-shell .topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(109, 74, 255, 0.8) 0%, rgba(216, 76, 255, 0.5) 30%, rgba(255, 122, 89, 0.2) 60%, transparent 100%);
  pointer-events: none;
}
/* Estilos inline del markup de la topbar (index.html 3879-3894): sólo
   se pueden pisar con !important porque van en el atributo style. */
body.ui-shell #topbar-client-name { color: #FFFFFF !important; }
body.ui-shell #topbar-separator   { color: rgba(255, 255, 255, 0.30) !important; }
body.ui-shell #topbar-project-name{ color: rgba(255, 255, 255, 0.60) !important; }
body.ui-shell #audit-indicator    { background: rgba(52, 211, 153, 0.08) !important; border-color: rgba(52, 211, 153, 0.25) !important; }
body.ui-shell #audit-status-text  { color: #34D399 !important; }

/* ── 4) Recientes/Historial: overrides de literales claros ──
   (el resto es token-based y ya quedó oscuro) */
body.ui-shell .rv2-status--listo      { background: rgba(52, 211, 153, 0.12); color: #34D399; }
body.ui-shell .rv2-status--procesando { background: rgba(242, 182, 90, 0.14);  color: #F2B65A; }
body.ui-shell .rv2-status--error      { background: rgba(248, 113, 106, 0.12); color: #F8716A; }
body.ui-shell .rv2-bar                { background: rgba(255, 255, 255, 0.08); }
body.ui-shell .rv2-kebab__btn:hover,
body.ui-shell .rv2-kebab__item:hover  { background: rgba(255, 255, 255, 0.06); }

/* ── 5) Componentes compartidos con literales claros (ui_components.css) ──
   Badges con fondo+borde+texto del MISMO color (paleta del informe). */
body.ui-shell .ui-badge          { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.10); }
body.ui-shell .ui-badge--ok      { background: rgba(52, 211, 153, 0.12);  border-color: rgba(52, 211, 153, 0.22);  color: #34D399; }
body.ui-shell .ui-badge--warn    { background: rgba(242, 182, 90, 0.12);  border-color: rgba(242, 182, 90, 0.22);  color: #F2B65A; }
body.ui-shell .ui-badge--danger  { background: rgba(248, 113, 106, 0.12); border-color: rgba(248, 113, 106, 0.22); color: #F8716A; }
body.ui-shell .ui-badge--accent  { background: rgba(109, 74, 255, 0.14);  border-color: rgba(109, 74, 255, 0.28);  color: #9B8CFF; }
body.ui-shell .ui-btn--secondary,
body.ui-shell .ui-btn--ghost         { background: rgba(255, 255, 255, 0.05); }
body.ui-shell .ui-btn--secondary:hover,
body.ui-shell .ui-btn--ghost:hover   { background: rgba(255, 255, 255, 0.08); }
/* primary CTA: sombra con el accent correcto (no el #5b5cff viejo) */
body.ui-shell .ui-btn--primary       { box-shadow: 0 10px 26px rgba(109, 74, 255, 0.22); }
/* (el wizard ya es dark: hereda badges/botones oscuros, sin re-aclarado) */