/* ============================================================
   Paragraph · Sistema de diseño unificado · v12 TEMA CLARO/OSCURO
   ------------------------------------------------------------
   Alineado al look & feel real de paragraph.mx: acento rosa
   #ED1556. Se carga DESPUÉS del <style> de cada módulo: como
   todos estilizan con var(--token), redefinir los tokens re-pinta
   la suite completa. Los overrides de abajo cubren los pocos
   valores que los módulos tienen en duro.

   Tema activo: atributo data-theme="dark"|"light" en <html>,
   aplicado por shared/theme.js ANTES del primer render (evita
   destello). Oscuro es el default (sin atributo o data-theme
   ="dark"); ver PROJECT_MEMORY.md / DECISIONES.md.
   ============================================================ */

:root{
  /* Marca — no cambia entre temas */
  --brand:#ED1556; --brand-dark:#C50F45;
  --coral:#ED1556; --coral-soft:rgba(237,21,86,.16);
  --brand-soft:rgba(237,21,86,.16);

  /* Superficies "independientes del flip": estos componentes ya
     eran chips/franjas oscuras en el diseño ORIGINAL en claro
     (usaban var(--ink) como fondo, que entonces era casi-negro).
     Se mantienen oscuras en ambos temas a propósito. */
  --rail:#0D0A12;        /* aside, #login */
  --chip-dark:#2B2536;   /* .chan, .opttipo, .avatar-fallback */
  --chip-dark-ink:#F5F3F7; /* texto sobre --chip-dark: fijo, NO var(--ink) (--ink sí invierte con el tema) */
  --code-bg:#0F0C16;     /* .nom, .md pre */
  --toast-bg:#231E2D;    /* .toast */

  --disp:'Space Grotesk',sans-serif; --body:'Inter',sans-serif; --mono:'Space Mono',monospace;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
}

/* ---------- TEMA OSCURO (default) ---------- */
:root, :root[data-theme="dark"]{
  --paper:#14111A;          /* fondo general */
  --card:#1D1926;           /* tarjetas / modales */
  --ink:#F5F3F7;            /* texto principal */
  --ink-2:#E6E2EC;
  --muted:#A9A4B2; --muted-2:#787281;
  --line:#2E2939; --line-2:#251F2E;

  --ok:#3DBF85;   --ok-soft:rgba(61,191,133,.16);
  --warn:#E8B04B; --warn-soft:rgba(232,176,75,.16);
  --bad:#F06A5E;  --bad-soft:rgba(240,106,94,.16);
  --green:#3DBF85; --amber:#E8B04B; --red:#F06A5E;
  --lime:#3DBF85;  --lime-soft:rgba(61,191,133,.16);
  --amber-soft:rgba(232,176,75,.16); --red-soft:rgba(240,106,94,.16);

  --info:#5B9BE6; --info-soft:rgba(91,155,230,.16);
  --violet:#A78BFA; --violet-soft:rgba(167,139,250,.16);

  --input-bg:#231E2D;
  --hover-overlay:rgba(255,255,255,.02);
  --native-scheme:dark;

  /* ---------- Paleta de gráficas (Chart.js lee esto por getComputedStyle) ---------- */
  --chart-principal:var(--brand);
  --chart-secundaria:#B7B2C0;
  --chart-comparacion:var(--info);
  --chart-meta:var(--violet);
  --chart-inversion:var(--chart-secundaria);
  --chart-resultados:var(--chart-principal);
  --chart-positivo:var(--ok);
  --chart-advertencia:var(--warn);
  --chart-negativo:var(--bad);
  --chart-grid:var(--line);
  --chart-tick:var(--muted-2);
  --chart-label:var(--muted);
  --chart-legend:var(--muted);
  --chart-tooltip-bg:var(--card);
  --chart-tooltip-text:var(--ink);
  /* categórica (series por cuenta/campaña): 8 tonos bien diferenciados */
  --chart-cat-1:#ED1556; --chart-cat-2:#5B9BE6; --chart-cat-3:#3DBF85; --chart-cat-4:#E8B04B;
  --chart-cat-5:#A78BFA; --chart-cat-6:#2DD4BF; --chart-cat-7:#F2994A; --chart-cat-8:#B7B2C0;

  --shadow:0 1px 3px rgba(0,0,0,.4); --shadow-lg:0 18px 50px rgba(0,0,0,.5);
  --shadow-hover:0 6px 22px rgba(0,0,0,.45);
}

/* ---------- TEMA CLARO ----------
   Mismos valores que usaba la suite ANTES del rediseño oscuro de
   julio 2026 (cada módulo los traía en su propio :root de origen),
   con el acento actualizado a rosa de marca. */
:root[data-theme="light"]{
  --paper:#F6F5F3; --card:#FFFFFF;
  --ink:#16151A; --ink-2:#26242C;
  /* --muted-2 se oscureció frente al original (#9A98A1 daba ~2.8:1 en textos
     pequeños como etiquetas de métrica/contador — medido con el harness) */
  --muted:#6B6A72; --muted-2:#75727C;
  --line:#E8E6E1; --line-2:#F0EEEA;

  /* ok/warn/bad más oscuros que el original: el #5FA800/#E08600/#D33A2C de
     antes del rediseño no llegaba a 3:1 como texto sobre su propio -soft
     (medido con el harness); se oscurecen manteniendo el matiz. */
  --ok:#3F7A00;   --ok-soft:#EAF5D8;
  --warn:#9A6400; --warn-soft:#FBEFD6;
  --bad:#B8291D;  --bad-soft:#FBE3E0;
  --green:#3F7A00; --amber:#9A6400; --red:#B8291D;
  --lime:#3F7A00;  --lime-soft:#EAF5D8;
  --amber-soft:#FBEFD6; --red-soft:#FBE3E0;

  --info:#2B6CB0; --info-soft:rgba(43,108,176,.14);
  --violet:#7E3FB5; --violet-soft:rgba(126,63,181,.14);

  --input-bg:#FFFFFF;
  --hover-overlay:rgba(22,21,26,.035);
  --native-scheme:light;

  --chart-principal:var(--brand);
  --chart-secundaria:#6B6A72;
  --chart-comparacion:var(--info);
  --chart-meta:var(--violet);
  --chart-inversion:var(--chart-secundaria);
  --chart-resultados:var(--chart-principal);
  --chart-positivo:var(--ok);
  --chart-advertencia:var(--warn);
  --chart-negativo:var(--bad);
  --chart-grid:var(--line);
  --chart-tick:var(--muted-2);
  --chart-label:var(--muted);
  --chart-legend:var(--muted);
  --chart-tooltip-bg:var(--card);
  --chart-tooltip-text:var(--ink);
  --chart-cat-1:#ED1556; --chart-cat-2:#2B6CB0; --chart-cat-3:#5FA800; --chart-cat-4:#E08600;
  --chart-cat-5:#7E3FB5; --chart-cat-6:#0F9488; --chart-cat-7:#C2540A; --chart-cat-8:#6B6A72;

  --shadow:0 1px 3px rgba(22,21,26,.1); --shadow-lg:0 18px 50px rgba(22,21,26,.16);
  --shadow-hover:0 6px 22px rgba(22,21,26,.14);
}

/* ---------- Superficies profundas (independientes del flip) ---------- */
aside, #login { background:var(--rail) !important; }
.modal { background:var(--card); color:var(--ink); }

/* ---------- Controles de formulario (su blanco/oscuro venía del navegador) --- */
input, select, textarea {
  background:var(--input-bg); color:var(--ink);
  border-color:var(--line);
}
input::placeholder, textarea::placeholder { color:var(--muted-2); }
input[type=date]{ color-scheme:var(--native-scheme); }

/* ---------- Logo en blanco: solo en superficies SIEMPRE oscuras
   (rail lateral y pantalla de login). El logo del encabezado de
   página (.wordmark / .brand fuera de #login) vive sobre --paper,
   que sí cambia con el tema: en claro NO se invierte. ---------- */
.logo img, .logoimg, .klogo img, #login .brand img {
  filter:brightness(0) invert(1);
}
.wordmark img, .brand img {
  filter:brightness(0) invert(1);
}
:root[data-theme="light"] .wordmark img,
:root[data-theme="light"] .brand img {
  filter:none;
}

/* ---------- Ajustes puntuales de valores en duro ---------- */
.exit:hover { background:var(--card) !important; color:var(--ink) !important; }
.rte { background:var(--card) !important; }           /* editor Knowledge */
.bl-toolbar select, .bl-mini { background:var(--input-bg) !important; color:var(--ink) !important; }
.gbtn { box-shadow:0 4px 18px rgba(0,0,0,.35); }       /* botón Google se queda blanco a propósito */
tr:hover td { background:var(--hover-overlay); }

/* Encabezados con la voz de la marca */
h1,h2,h3,.sect-h,.e-title,.bl-title { letter-spacing:-.01em; }

/* ---------- v3 · legibilidad: campos con blanco en duro ---------- */
.bl-field input, .bl-field select, .bl-field textarea,
.bl-toolbar select, .fmini > input, .fmini > select {
  background:var(--input-bg) !important; color:var(--ink) !important;
  border-color:var(--line) !important;
}
.bl-mini { background:var(--card) !important; color:var(--muted) !important; border-color:var(--line) !important; }
select option { background:var(--input-bg); color:var(--ink); }

/* ---------- v4 · pulido del menú y filtros ---------- */
/* Item activo del nav: de píldora blanca (tema claro original) a acento de marca */
nav a.on, #nav a.on {
  background:rgba(237,21,86,.14) !important;
  color:#fff !important;
}
nav a.on .dot, #nav a.on .dot { background:var(--brand) !important; }
nav a:hover { color:#fff; }
/* Filtros: que fluyan sin huecos y con anchos consistentes */
.filters .fmini select, .filters .fmini input { min-width:130px; max-width:220px; text-overflow:ellipsis; }
.filters { row-gap:10px; }

/* ---------- v5 · chips y tabs legibles + topright sin cortes ---------- */
.chan { background:var(--chip-dark) !important; color:var(--chip-dark-ink) !important; border:1px solid var(--line); }
.pill.on { background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important; }
.top { flex-wrap:wrap; gap:10px; }
#topright { flex-wrap:wrap; }

/* ---------- v6 · Conexiones: contraste de tablas y campos de mapeo ---------- */
.maprow select, .maprow input { background:var(--input-bg) !important; color:var(--ink) !important; border-color:var(--line) !important; }
/* tablas internas de Conexiones (cuentas conectadas / mapeo) */
table th { color:var(--muted-2); border-bottom-color:var(--line) !important; }
table td { border-bottom-color:var(--line-2) !important; }
.okline { background:var(--ok-soft) !important; border:1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.card.warn { background:var(--warn-soft) !important; border:1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.pill-row .pill { background:var(--card); color:var(--muted); border:1px solid var(--line); }

/* ---------- v7 · FIX GLOBAL blanco-sobre-blanco / oscuro-sobre-oscuro (crítico) ---------- */
/* Las reglas por-módulo (.field input{background:#fff}) le ganaban al reset
   por especificidad; con !important el token --input-bg aplica en toda la app. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
textarea, select {
  background:var(--input-bg) !important; color:var(--ink) !important; border-color:var(--line) !important;
}
input::placeholder, textarea::placeholder { color:var(--muted-2) !important; }
option { background:var(--input-bg); color:var(--ink); }

/* Conexiones · chip de cuenta, nota delgada, header del stepper */
.cx-head{align-items:center}
.cx-acct{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:2px 8px;white-space:nowrap}
/* Bloque, no flex: el contenido es UN texto con <b> dentro. En flex cada <b>
   se volvía una columna y un aviso de dos renglones salía partido en seis. */
.cx-note{font-size:12.5px;color:var(--muted);margin:0 0 16px;display:block;line-height:1.55}
.cx-note.ok{color:var(--ok)} .cx-note.bad{color:var(--bad)}

/* ---------- v8 · texto legible: algunos módulos heredan un color que le
   gana a body{color:var(--ink)}. Se fuerza aquí. ---- */
body { color:var(--ink) !important; }

/* ---------- v9 · superficies que usaban var(--ink) como fondo ----------
   En el diseño original estas franjas eran oscuras a propósito (dark
   accent sobre página clara). Se les da el token fijo correspondiente
   para que no se inviertan al cambiar de tema. */
.nom { background:var(--code-bg) !important; color:var(--chip-dark-ink) !important; border:1px solid var(--line); }
.nom .seg { background:#241F2E !important; color:var(--chip-dark-ink) !important; }
.nom .seg.empty { background:transparent !important; }
.opttipo { background:var(--chip-dark) !important; color:var(--chip-dark-ink) !important; border:1px solid var(--line); }
.toast { background:var(--toast-bg) !important; color:var(--chip-dark-ink) !important; }
.btn { background:var(--input-bg); color:var(--ink); }   /* botón base sin modificador; .coral/.ghost siguen ganando */

/* ---------- v10 · Knowledge: superficies var(--ink) invertidas ---------- */
.avatar-fallback { background:var(--chip-dark) !important; color:var(--chip-dark-ink) !important; }
.chip.on { background:rgba(237,21,86,.16) !important; color:#fff !important; border-color:var(--brand) !important; }
:root[data-theme="light"] .chip.on { background:var(--brand) !important; color:#fff !important; }
.md pre { background:var(--code-bg) !important; color:#E6E2EC !important; }

/* ---------- v11 · texto de <button> ----------
   Los <button> NO heredan color del body (usan el color de sistema del
   navegador). Chips como .sview quedaban con texto ilegible. Se fuerza
   herencia; .coral/.ghost/.gbtn definen el suyo. */
button { color:var(--ink); }
.sview { color:var(--ink) !important; }
.sview.on { background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important; }

/* ---------- v12 · TOFU/MOFU con tokens (antes hex fijo tuneado solo para
   claro; con el tema oscuro quedaban como rectángulos pastel ilegibles) --- */
.b-tofu { background:var(--info-soft) !important; color:var(--info) !important; }
.b-mofu { background:var(--violet-soft) !important; color:var(--violet) !important; }

/* ---------- v13 · enlaces con href ----------
   Un <a href> SIN clase cae al azul del user-agent (#0000EE): sobre el fondo
   oscuro da 1.83:1, o sea invisible. Se encontró en la hoja de desglose
   midiendo contraste, pero es un hueco de TODA la suite: cualquier enlace
   externo que alguien agregue mañana nace roto.

   Solo se toca `a[href]`: los <a> sin href son los del nav y los botones-
   enlace de la app, que ya tienen su propio color y no deben teñirse de rosa.
   `.btn` y `.on` se excluyen por lo mismo. */
a[href]:not(.btn):not(.on):not([class*="nav"]) {
  color:var(--brand);
  text-decoration-color:color-mix(in srgb, var(--brand) 45%, transparent);
}
a[href]:not(.btn):not(.on):not([class*="nav"]):hover { text-decoration-color:var(--brand); }
