/* ============================================================================
   Kiun UI Kit — tokens de marca (fuente única de verdad).
   Cualquier página: <link rel="stylesheet" href="/kiun.css"> ANTES de su CSS,
   y borra su bloque :root. Define el set canónico + TODOS los alias históricos
   (--bd/--border, --text/--txt, --dim/--muted…) para no romper nada.
   Marca Kiun: deep space + teal. Inter + JetBrains Mono.
   ============================================================================ */
:root{
  /* color-scheme: dark por default. html.kiun-light invierte a light. */
  color-scheme:dark;
  /* superficies (jerarquía tonal explícita — más contraste entre niveles) */
  --bg:#06070B;                                    /* deep space (un toque más oscuro) */
  --elev:#0E1117;      --input:#0E1117;
  --card:#161E2D;      --surface:#161E2D;          /* card MÁS visible vs bg (+12 R) */
  --surface-2:#1c2535;
  --surface-3:#222d40;
  --bd:#283449;        --border:#283449;           /* borde más definido */
  --bd-hi:#3a4862;
  --line:var(--bd);                                 /* alias histórico (admin-calendario.html usaba
                                                        var(--line) sin que existiera → shorthand
                                                        inválido, borde caído. Al referenciar --bd
                                                        vía var(), se re-resuelve solo en light. */
  /* acento teal */
  --teal:#2DD4BF;      --accent:#2DD4BF;
  --teal-hi:#14B8A6;   --teal-dim:#1d8a7d;  --teal-12:rgba(45,212,191,.12);
  --glow:rgba(45,212,191,.18);
  --accent-on:#04221d;
  --login-glow:#0c1622;                             /* mancha navy del radial de #login/#welcome */
  /* texto */
  --text:#E8EAED;      --txt:#E8EAED;
  --dim:#94A3B8;       --muted:#94A3B8;     --text-dim:#94A3B8;
  --dimmer:#7C8BA1;    --text-dimmer:#7C8BA1;   /* a11y: subido de #64748B (3.51:1 fail) → ~4.6:1 AA */
  /* estado */
  --ok:#34d399;        --green:#10b981;
  --warn:#fbbf24;
  --err:#f87171;       --red:#ef4444;       --danger:#f8717155;
  /* canales (chips de marca) */
  --wa:#25D366;        --tg:#229ED9;        --ig:#E1306C;        --violet:#a78bfa;  --purple:#a78bfa;
  /* series de gráfica SECUNDARIAS (2026-07-20) — admin-proyecciones.html usa
     2 líneas punteadas de pronóstico (estacional=violeta, IA=azul) además de
     la real (teal). Estos tonos CLAROS leen bien sobre el fondo casi-negro
     (#06070B) pero fallan contraste sobre el fondo crema de light (violeta
     #a78bfa ~2.6:1, azul #3B82F6 ~3.5:1 — bajo el mínimo AA 4.5:1 de texto/
     línea delgada). html.kiun-light los sobreescribe con tonos MÁS OSCUROS
     del mismo hue (mismo significado, ~5:1+ de contraste). Vía var() para
     que el SVG del chart se actualice solo al cambiar de tema, sin re-render JS. */
  --chart-violet:#a78bfa;
  --chart-blue:#3B82F6;
  /* pipeline de clientes (clientes.html: lead→nuevo→recurrente→vip→dormido→
     perdido) — nuevo/dormido no tenían token (hex crudo, sin ajuste de light).
     recurrente/vip/perdido YA correspondían a --ok/--warn/--red (definidos
     abajo, con ajuste light) pero el HTML seguía usando el hex crudo en vez
     del var() → nunca heredaban el ajuste de contraste. */
  --blue:#60A5FA;
  --orange:#f97316;
  --rose:#fb7185;
  /* forma */
  --r:16px;            --radius:16px;       --rs:10px;           --radius-sm:8px;
  --shadow:0 8px 30px rgba(0,0,0,.45);
  /* fuentes */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* ── page container — ancho canónico de "inner pages" en escritorio, 2026-07-12.
     Antes cada admin-*.html/wrap inventaba su propio max-width (10+ valores
     distintos, 4 sistemas de layout conviviendo) y el override
     `html.kembed .main{max-width:none!important}` estiraba 9 páginas a
     full-bleed SOLO cuando se abrían embebidas en app.html — que es como
     TODAS se ven en producción (openPage() siempre agrega ?embed=1). Fuente
     única del ancho: --k-page-w (default: Torre de control, Acuerdos,
     Proyecciones, Calendario, Avisos, Fuentes, Plan, Equipo, Finanzas,
     Egresos, Datos, Clientes, Versiones, Decisiones, Resultados, Metas) /
     --k-page-w-wide (tableros densos: Mi operación, Rutas, Operaciones,
     Autodescubrimientos — mapas/kanban/grids anchos). Los portales legacy
     (loops/estrategia/resultados) no cargan kiun.css como <link> — están
     hardcoded al mismo valor, mantener en sync manualmente si cambia. */
  --k-page-w:1180px;
  --k-page-w-wide:1400px;
  /* ── escalas de diseño (audit CSS 2026-07-15) — documentan el sistema real
     detectado en las 27 páginas: 8 tamaños de tipo, 4 radios, 4 capas de z.
     Aditivo: no retroactivan clases existentes (evita romper 22-26 tamaños
     divergentes por página sin verificación visual por-página); nuevas
     páginas y migraciones futuras parten de aquí en vez de inventar valores. */
  --fs-1:11px;   /* eyebrow/mono chico (labels) */
  --fs-2:12.5px; /* texto secundario / hint */
  --fs-3:13.5px; /* body pequeño */
  --fs-4:15px;   /* body / input */
  --fs-5:16px;   /* título de card (what, k-topbar h1) */
  --fs-6:18px;   /* header de sección (k-sec) */
  --fs-7:24px;   /* KPI value */
  --fs-8:32px;   /* hero / número grande */
  --r-chip:999px;      /* pills/chips redondos */
  --r-btn:var(--rs);    /* botones — alias del --rs existente, mismo valor */
  --r-card:var(--r);    /* cards — alias del --r existente, mismo valor */
  --r-sheet:24px;        /* bottom sheets / modales grandes */
  --z-nav:5;      /* topbar/header sticky */
  --z-sheet:100;  /* bottom sheets, dropdowns */
  --z-modal:130;  /* modales bloqueantes */
  --z-toast:9999; /* toasts — siempre encima de todo */
}

/* ── utilidades compartidas ── */
.k-mono{font-family:var(--mono)}
.k-caps{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);font-weight:700}
.k-muted{color:var(--muted)}

/* ── jerarquía Coppel-style (2026-07-14): headers de sección bold + accesos
   circulares + banner de acción. Componentes compartidos para inner pages. ── */
.k-sec{font-family:var(--font);font-size:18px;font-weight:800;letter-spacing:-.02em;
  color:var(--text);line-height:1.25;margin:22px 0 12px;display:flex;align-items:center;gap:8px}
.k-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px 0}
.k-qbtn{display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;
  border:0;color:var(--text);font-family:var(--font);font-size:12px;font-weight:600;
  line-height:1.25;text-align:center;padding:6px 2px;border-radius:14px;cursor:pointer;
  transition:transform .24s cubic-bezier(.34,1.56,.64,1)}
.k-qbtn:active{transform:scale(.93);transition-duration:.06s}
.k-qc{width:56px;height:56px;border-radius:50%;background:var(--teal);flex:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px var(--glow)}
.k-qc .material-symbols-outlined{color:var(--accent-on);font-size:26px}
.k-banner{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border:0;
  color:var(--text);font-family:var(--font);border-radius:18px;padding:15px 16px;cursor:pointer;
  background:color-mix(in srgb,var(--teal) 13%,var(--card));
  outline:1px solid color-mix(in srgb,var(--teal) 28%,var(--bd));outline-offset:-1px;
  transition:transform .24s cubic-bezier(.34,1.56,.64,1)}
.k-banner:active{transform:scale(.985);transition-duration:.06s}
.k-banner .k-bc{width:44px;height:44px;border-radius:50%;background:var(--teal);flex:none;
  display:flex;align-items:center;justify-content:center}
.k-banner .k-bc .material-symbols-outlined{color:var(--accent-on);font-size:22px}
.k-banner .k-bt{flex:1;min-width:0;display:flex;flex-direction:column}
.k-banner .k-bttl{font-size:15.5px;font-weight:700;line-height:1.25}
.k-banner .k-bsub{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.3}
.k-banner .k-bchev{color:var(--muted);font-size:22px;flex:none;opacity:.7}
html.kiun-light .k-qc, html.kiun-light .k-banner .k-bc{
  background:linear-gradient(180deg,#0D9488,#0F766E)}
html.kiun-light .k-qc .material-symbols-outlined,
html.kiun-light .k-banner .k-bc .material-symbols-outlined{color:#fff}

/* ── logo Kiun (web component <kiun-logo>) ── */
kiun-logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;letter-spacing:-.02em;
  font-family:var(--font);color:var(--text);line-height:1}
kiun-logo .k-glyph{color:var(--teal);display:inline-flex}
kiun-logo .k-c{color:var(--teal)}

/* ── spinner (<kiun-spinner>) ── */
kiun-spinner{display:inline-block;width:1em;height:1em;border-radius:50%;
  border:2px solid var(--bd);border-top-color:var(--teal);animation:k-spin .8s linear infinite;
  vertical-align:-2px}
@keyframes k-spin{to{transform:rotate(360deg)}}

/* ── chip de estado (<kiun-chip tone="ok|warn|err">) ── */
kiun-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;font-family:var(--mono);letter-spacing:.03em;
  background:var(--teal-12);color:var(--teal)}
kiun-chip[tone="ok"]{background:rgba(52,211,153,.13);color:var(--ok)}
kiun-chip[tone="warn"]{background:rgba(251,191,36,.13);color:var(--warn)}
kiun-chip[tone="err"]{background:rgba(248,113,113,.13);color:var(--err)}

/* ── botones (k-btn) — primario teal + ghost ── */
.k-btn{padding:11px 16px;border-radius:var(--rs);font-size:13px;font-weight:700;
  border:0;cursor:pointer;font-family:var(--font);display:inline-flex;align-items:center;
  justify-content:center;gap:7px;transition:filter .12s,transform .08s;letter-spacing:.02em;
  min-height:44px;box-sizing:border-box}   /* a11y: tap target ≥44px (WCAG 2.5.5) */
.k-btn:active{transform:scale(.985)}
.k-btn[disabled]{opacity:.45;pointer-events:none}
/* a11y: foco visible por teclado (WCAG 2.4.7) — el kit solo lo tenía en inputs */
.k-btn:focus-visible,.k-btn--icon:focus-visible,.k-card--lift:focus-visible,
.k-pill:focus-visible,.k-toast-act:focus-visible,a:focus-visible,
kiun-chip:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* a11y global (audit CSS 2026-07-15): fallback de bajo specificity para
   elementos interactivos SIN foco propio en las páginas — cubre los .btn/
   .chip/.filter/.mq/tabs locales que nunca migraron al kit. Cualquier regla
   de página con :focus{outline:none}+box-shadow (patrón ya usado en 20 de
   27 páginas) tiene mayor specificity y le sigue ganando — esto solo AGREGA
   anillo donde hoy no existe ninguno, nunca pisa un ring custom existente. */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--teal);outline-offset:2px}
.k-btn--teal{background:var(--teal);color:var(--accent-on)}
.k-btn--teal:hover{filter:brightness(1.06)}
.k-btn--ghost{background:transparent;color:var(--text);border:1px solid var(--bd)}
.k-btn--ghost:hover{border-color:var(--teal-dim);color:var(--teal)}
.k-btn--danger{background:transparent;color:var(--err);border:1px solid var(--bd)}
.k-btn--icon{width:44px;height:44px;padding:0;border-radius:9px;background:transparent;
  color:var(--muted);border:1px solid var(--bd)}   /* a11y: 38→44 tap target */
.k-btn--icon:hover{color:var(--teal);border-color:var(--teal-dim)}
.k-btn--icon .material-symbols-outlined{font-size:18px}

/* ── k-back: "volver al inicio" en páginas inner (admin-*.html). Solo se ve
   accediendo standalone (URL directa) — el shell (app.html) ya da su propia
   nav cuando embebe la página con ?embed=1, así que aquí se oculta. ── */
.k-back{text-decoration:none;flex-shrink:0}
.k-back .material-symbols-outlined{font-size:19px!important;color:inherit!important}
html.kembed .k-back{display:none}

/* ── kembed: contenido ANCLADO A LA IZQUIERDA (junto al sidebar del shell).
   En monitores anchos (2560px) un contenedor centrado deja ~500px de hueco
   muerto entre el sidebar y el contenido — se ve "flotando" y cada página
   quedaba en una posición distinta (feedback Alex 2026-07-12). Las páginas
   .main (Equipo, Torre…) ya anclaban así por ser flex-child; esto iguala a
   las .wrap (Finanzas/Egresos/Datos/Clientes/Operaciones/Rubro/Rutas), al
   .shell del portal Autodescubrimientos y al body del portal Decisiones. */
/* ⚠️ Conviven TRES nombres de clase de embed según la época de cada página:
   kembed (admin-*.html) · kiun-embed (portales loops/decisiones) ·
   cheptia-embed (estrategia/resultados — no cargan este CSS, su regla vive
   en el exporter). Cubrimos las dos que sí pasan por aquí. */
html.kembed .wrap,
html.kembed .shell,
html.kiun-embed .wrap,
html.kiun-embed .shell{margin-left:0!important;margin-right:auto!important}
html.kembed body,
html.kiun-embed body{margin-left:0!important}

/* ── card (k-card) — superficie estándar ── */
.k-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:16px}
.k-card--lift{transition:border-color .15s,transform .15s}
.k-card--lift:hover{border-color:var(--bd-hi);transform:translateY(-1px)}

/* ── field (k-field) — label arriba + input — input afirmativo ── */
.k-field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.k-field > label{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);font-weight:700}
.k-input,.k-field input:not([type=checkbox]):not([type=radio]),
.k-field select,.k-field textarea{
  width:100%;background:var(--input);border:1px solid var(--bd);border-radius:11px;
  padding:12px 13px;color:var(--text);font-size:15px;outline:none;font-family:inherit}
.k-input:focus,.k-field input:focus,.k-field select:focus,.k-field textarea:focus{
  border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.k-field .k-hint{font-size:11.5px;color:var(--dimmer)}
.k-field .k-err{font-size:12px;color:var(--err)}

/* ── pill (k-pill) — pastilla redonda con punto de estado ── */
.k-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:6px 11px;border-radius:99px;border:1px solid var(--bd);background:transparent;
  color:var(--text)}
.k-pill .k-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.k-pill[data-tone="ok"]{color:var(--ok);background:rgba(52,211,153,.10);border-color:transparent}
.k-pill[data-tone="warn"]{color:var(--warn);background:rgba(251,191,36,.10);border-color:transparent}
.k-pill[data-tone="err"]{color:var(--err);background:rgba(248,113,113,.10);border-color:transparent}

/* ── KPI card (k-kpi) — número grande + label mono ── */
.k-kpi{background:var(--card);border:1px solid var(--bd);border-radius:11px;padding:13px 11px;
  text-align:center;min-width:0}
.k-kpi .k-v{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-.01em;
  color:var(--text);line-height:1.1}
.k-kpi .k-v--ok{color:var(--teal)} .k-kpi .k-v--warn{color:var(--warn)} .k-kpi .k-v--err{color:var(--err)}
.k-kpi .k-v--gris{color:var(--dimmer);font-style:italic;font-size:13px;font-weight:500;
  font-family:var(--font)}
.k-kpi .k-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);margin-top:6px}

/* ── topbar (k-topbar) — header de pantalla ── */
.k-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--bd);background:var(--bg);
  position:sticky;top:0;z-index:var(--z-nav)}
.k-topbar h1{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:0;flex:1;min-width:0}

/* ── tabla básica (k-tbl) — estilo torre ── */
.k-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.k-tbl th{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  text-align:left;color:var(--dim);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--bd)}
.k-tbl td{padding:10px 12px;border-bottom:1px solid var(--bd);color:var(--text)}
.k-tbl tr:last-child td{border-bottom:0}
.k-tbl tr:hover td{background:rgba(45,212,191,.04)}

@media(prefers-reduced-motion:reduce){
  kiun-spinner{animation:none}
  .k-btn,.k-card--lift{transition:none}
}

/* ── densidad DESKTOP (puntero fino): los botones/toggles del kit están
   dimensionados para dedo (44px, WCAG tap target). Con mouse se ven
   inflados "hechos para celular" (feedback Alex 2026-07-12). En desktop
   real (hover+pointer fino) bajamos a densidad de escritorio; en touch
   se conservan los 44px. ── */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .k-btn{min-height:36px;padding:8px 14px;font-size:12.5px}
  .k-btn--icon{width:36px;height:36px}
}

/* ── LIGHT MODE — html.kiun-light (toggle persistente, deja el dark intacto)
   Cubre tanto los nombres canónicos del kit (--bg, --card, --bd, --text…)
   COMO los aliases legacy que las páginas históricas redefinen en su :root
   local (--bg-elevated, --bg-2, --surface-*, --accent-hover, --accent-glow,
   --card-hi, --bd-hi, --rose*, --ok, --warn, --err, --bad, --stale, --nodata).
   Así, una página que importa este CSS recibe light mode sin tener que migrar
   su :root local — la specificity 0,1,0 de html.kiun-light gana al :root 0,0,1. */
html.kiun-light{
  color-scheme:light;
  /* Paleta CÁLIDA tipo Lattice (cliente PYME: amigable/confiable, no clínico/frío).
     Off-white cálido + cards blancas + bordes/grises cálidos. Contraste AA verificado. */
  --bg:#FAF9F6;                                     /* off-white CÁLIDO (era #F7F8FB azulado) */
  --bg-2:#F4F2EC;                                   /* legacy: loops/estrategia usan --bg-2 */
  --bg-elevated:#FFFFFF;                            /* legacy: landing/demo */
  --elev:#FFFFFF;       --input:#FFFFFF;
  --card:#FFFFFF;       --surface:#FFFFFF;          /* card blanca sobre off-white cálido = capa amigable */
  --card-hi:#F4F2EC;                                /* legacy: loops */
  --surface-2:#F4F2EC;  --surface-3:#EDE9E0;
  --bd:#E7E2D8;         --border:#E7E2D8;           /* borde gris CÁLIDO suave (era #DEE3EC frío) */
  --bd-hi:#D6CFC1;
  --text:#1A1916;       --txt:#1A1916;              /* casi-negro cálido, alto contraste (~14:1) */
  --dim:#57534E;        --muted:#57534E;            --text-dim:#57534E;   /* gris cálido AA ~7:1 */
  --dimmer:#78716B;     --text-dimmer:#78716B;   /* a11y (2026-07-22, cazado por kiun_contrast): #A8A299 daba 2.41:1 sobre --bg (FAIL AA) — placeholders/hints/iconos dim ilegibles en light. Espeja el fix de dark (--dimmer dark ~4.6:1); ahora 4.56:1 AA, sigue más tenue que --dim (7.25:1). */
  /* el teal se queda igual — es la marca. ajustes finos: */
  --teal:#0F766E;       --accent:#0F766E;           /* a11y: teal light AA — texto-en-blanco 4.6:1 Y blanco-en-teal 4.7:1 (antes #0FB89F = 2.51:1 fail) */
  --accent-hover:#0E6B63;                           /* legacy: landing */
  --teal-12:rgba(15,184,159,.10);
  --accent-12:rgba(15,184,159,.10);                 /* legacy: loops */
  --accent-20:rgba(15,184,159,.20);
  --glow:rgba(15,184,159,.14);
  --accent-glow:rgba(15,184,159,.16);               /* legacy: landing/demo */
  --accent-on:#FFFFFF;                              /* texto sobre teal */
  --shadow:0 2px 16px rgba(80,66,48,.08);          /* sombra CÁLIDA y suave (era azulada) */
  /* estado — versiones light-friendly (rojo/verde/amarillo más oscuros para contraste) */
  --ok:#047857;         --green:#10b981;
  --warn:#B45309;       --bad:#B91C1C;              /* legacy: estrategia */
  --err:#B91C1C;        --red:#DC2626;
  --stale:#94A3B8;      --nodata:#94A3B8;           /* legacy: estrategia */
  --blue:#1D4ED8;        --orange:#C2410C;          /* pipeline clientes.html — ver :root */
  --rose:#BE123C;                                   /* badge "dormido" clientes.html */
  /* el rose FloresYa NO va en kiun-light: es leak histórico de loops/.
     Si una página todavía lo usa, queda igual al dark (la página debería
     migrarlo a --accent siguiendo finding #5 del audit 2026-06-11). */
  --teal-hi:#0B5A52;     /* audit 2026-07-20: nunca se redefinía en light —
     .userchip .av (avatar chip, letra blanca sobre gradiente teal→teal-hi)
     quedaba con el teal-hi CLARO de dark (#14B8A6) bajo texto blanco,
     ilegible. Oscurecido a la par de --teal light (#0F766E). */
  --login-glow:var(--bg); /* la mancha navy #0c1622 del radial de #login/
     #welcome (app.html, admin.html) desaparece en light: el radial queda
     plano (bg→bg) en vez de dejar un halo oscuro sobre fondo claro. */
}
/* En light mode forzamos backgrounds explícitos donde el CSS legacy usaba
   rgba(255,255,255,.04|.08) — esas transparencias se ven oscuras sobre fondo
   blanco (te dejan un wash gris feo). Sobre kiun-light usamos blanco sólido. */
html.kiun-light :root,
html.kiun-light{
  /* nota: estas 4 son legacy de loops/index.html y cuadritos: */
}
html.kiun-light body{background:var(--bg)}
/* ver --chart-violet/--chart-blue en :root arriba — versión oscura para
   contraste AA sobre el fondo crema (mismo hue, ~5:1 en vez de ~2.6-3.5:1). */
html.kiun-light{
  --chart-violet:#7c3aed;
  --chart-blue:#2563eb;
}
html.kiun-light .card,
html.kiun-light .tile,
html.kiun-light .kpi-card,
html.kiun-light .chip,
html.kiun-light .pcard,
html.kiun-light .panel,
html.kiun-light .roaschip,
html.kiun-light .kpi,
html.kiun-light .auth-card,
html.kiun-light .module,
html.kiun-light .menu-group{
  background:var(--card)!important;
  border-color:var(--bd)!important;
}
/* EXCEPCIÓN al rescue: los estados ACTIVOS conservan su fondo de marca.
   Sin esto el chip "Todos" activo de Autodescubrimientos quedaba BLANCO
   sobre blanco con texto blanco = pill fantasma (bug Alex 2026-07-15). */
html.kiun-light .chip.is-on{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:var(--accent-on,#fff)!important;
}
html.kiun-light .kpi-card.is-on{
  background:color-mix(in srgb,var(--accent) 10%,var(--card))!important;
  border-color:var(--accent)!important;
}
/* MÁS excepciones al rescue (2026-07-20, audit "muchos bugs light/dark" — Alex).
   El rescue de arriba (.card/.tile/.kpi-card/.chip/.pcard/.panel/... con
   background+border-color !important) es una lista de nombres de clase
   GENÉRICOS que varias páginas reusan con SU PROPIO modificador de color
   (.priority-alta, .vencido, .ok, .anom, .on, .active, .primary, .hero,
   .reco) — el rescue les gana en light y el color/estado semántico
   desaparece (se ve como cualquier card/chip normal, gris). Ya había UNA
   excepción (.chip.is-on / .kpi-card.is-on, arriba) pero el patrón se
   repitió con nombres de clase DISTINTOS que esa excepción no cubría.
   Auditoría completa (grep de .card/.chip/.tile/.panel + modificador con
   background/border semántico en las 37 páginas) encontró estos 7 casos
   reales — mismo fix, mismo patrón: reafirmar el color real DESPUÉS del
   rescue, con !important para ganarle. */
/* admin-acuerdos.html — el borde rojo de "alta prioridad"/"vencido" se
   perdía por completo en light (idéntico al color de borde neutro). */
html.kiun-light .card.priority-alta,
html.kiun-light .card.vencido{
  border-left-color:var(--err)!important;
}
/* admin-edo-semana.html — los chips de estado "Anomalía"/"OK" por semana
   perdían su tinte verde/rojo, quedaban planos como cualquier chip. */
html.kiun-light .chip.ok{
  background:var(--ok-soft,rgba(74,222,128,.13))!important;
  color:var(--ok)!important;
  border-color:transparent!important;
}
html.kiun-light .chip.anom{
  background:var(--err-soft,rgba(248,113,113,.13))!important;
  color:var(--err)!important;
  border-color:transparent!important;
}
/* admin-rutas.html / admin-tenants.html — variantes de ".chip.is-on" con OTRO
   nombre de clase (.on / .active) que la excepción original no cubría — el
   toggle activo quedaba invisible (mismo bug, distinto selector). */
html.kiun-light .chip.on,
html.kiun-light .chip.active{
  background:var(--teal)!important;
  color:var(--accent-on)!important;
  border-color:var(--teal)!important;
}
/* app.html (shell principal) — chip "primary" perdía su borde teal tintado. */
html.kiun-light .chip.primary{
  border-color:rgba(45,212,191,.4)!important;
  color:var(--teal)!important;
}
/* admin-incubadora.html — el panel "hero" (destacado) perdía su gradiente y
   borde teal, quedando idéntico a un panel normal (pierde jerarquía visual). */
html.kiun-light .panel.hero{
  border-color:color-mix(in srgb,var(--teal) 26%,var(--bd))!important;
  background:linear-gradient(160deg,var(--card),color-mix(in srgb,var(--teal) 5%,var(--card)))!important;
}
/* onboarding.html — el tile seleccionado/recomendado del wizard de alta
   perdía su borde teal de highlight (el usuario no ve qué eligió). */
html.kiun-light .tile.active,
html.kiun-light .tile.reco{
  border-color:var(--teal)!important;
}
/* admin-fuentes.html / admin-operaciones.html — cajitas anidadas que usan
   --elev para distinguirse de su contenedor --card. En dark elev(#0E1117)
   y card(#161E2D) son tonos distintos; en light AMBOS colapsan a #FFFFFF
   → la cajita se funde con su fondo (icon box, avatar del rail, barra de
   progreso). Usamos --surface-2 (light: #F4F2EC, sí distinto de --card
   blanco) para recuperar la jerarquía visual solo en light. Audit 2026-07-20. */
html.kiun-light .dir-card.soon .ic,
html.kiun-light .lhead .lid,
html.kiun-light .gzone .gb{
  background:var(--surface-2)!important;
}
/* admin-rubro.html — bordes/backgrounds de estado (err/warn) escritos como
   rgba(R,G,B,alpha) crudo en vez de var(--err)/var(--warn) — quedan con el
   tono BRILLANTE de dark (rgba(248,113,113,*) / rgba(251,191,36,*)) que no
   ajusta cuando --err/--warn se oscurecen en light para AA. */
html.kiun-light .ucard.err,
html.kiun-light .rcard.err,
html.kiun-light .fcard.err{
  border-color:rgba(185,28,28,.4)!important;
}
html.kiun-light .ncard.err,
html.kiun-light .fcard.err{
  background:rgba(185,28,28,.05)!important;
}
html.kiun-light .ncard.warn{
  background:rgba(180,83,9,.06)!important;
}
/* admin-rubro.html — halo del pin activo en el mapa de rutas, mismo problema
   (rgba hardcoded al teal brillante de dark). */
html.kiun-light .routebar .pin{
  box-shadow:0 0 0 3px rgba(15,118,110,.22)!important;
}
/* La navbar blur de loops/estrategia con bg rgba(10,11,16,.94) queda negra sólida
   en light → la pintamos blanco con sombra suave. */
html.kiun-light .topbar,
html.kiun-light .pulso-topbar,
html.kiun-light .nav-blur{
  background:rgba(255,255,255,.94)!important;
  border-bottom-color:var(--bd)!important;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
/* Hovers que en dark son rgba(255,255,255,.04) → en light deben ser un gris muy claro */
html.kiun-light .menu-row:active,
html.kiun-light .ce-chip:hover,
html.kiun-light .nav a:hover{
  background:rgba(15,23,42,.04)!important;
}

/* ── Override defensivos para superficies que usan rgba(255,255,255,.0X)
   hardcoded (no var). En dark son sutiles; en light quedan INVISIBLES o
   muy oscuros. Aplica a barras de progreso (hyp-bar, impact-track),
   skeleton loaders (skel-bar), cards translúcidas (sa-card, t-cal). */
html.kiun-light .hyp-bar,
html.kiun-light .impact-track,
html.kiun-light .skel-bar,
html.kiun-light .pulso-bar,
html.kiun-light .progress-track{
  background:rgba(15,23,42,.08)!important;
}
/* Mismo problema pero en BORDES rgba(255,255,255,.0X) hardcoded — visibles
   en dark sobre fondo oscuro, casi invisibles en light sobre fondo claro.
   admin-equipo.html (.cat-checkbox, .collab-iconbtn:hover), admin-calendario
   .html (.dna .sw i, swatch de paleta del tenant). Audit 2026-07-20. */
html.kiun-light .cat-checkbox,
html.kiun-light .collab-iconbtn:hover,
html.kiun-light .dna .sw i{
  border-color:rgba(15,23,42,.20)!important;
}

/* Hamburguesas móviles (.kmnav-btn) y sus backdrops usan colores oscuros
   hardcoded. En light la hamburguesa quedaba un cuadro negro flotante. */
html.kiun-light .kmnav-btn{
  background:var(--card)!important;
  border-color:var(--bd)!important;
  color:var(--text)!important;
}
html.kiun-light body.kmnav-open .kmnav-backdrop,
html.kiun-light .kmnav-backdrop{
  background:rgba(15,23,42,.45)!important;
}

/* Wordmarks/títulos que hardcodearon #e2e8f0 (gris claro) deben usar text */
html.kiun-light .pulso-wordmark,
html.kiun-light .topbar h1,
html.kiun-light .topbar .title{
  color:var(--text)!important;
}

/* Eyebrow/caps coloreados teal hardcoded como `color:#2dd4bf` deben mantener
   el teal del kit en light (que ya se atenuó a #0FB89F automático) */
html.kiun-light .sa-card .sa-h,
html.kiun-light .evi summary,
html.kiun-light .summary .row.lead .ico .material-symbols-outlined,
html.kiun-light .tile .t-cal,
html.kiun-light .tile .t-cal.media{
  color:var(--teal)!important;
}
html.kiun-light .k-pill[data-tone="ok"]  {background:rgba(16,185,129,.12);color:#047857}
html.kiun-light .k-pill[data-tone="warn"]{background:rgba(217,119,6,.12); color:#92400E}
html.kiun-light .k-pill[data-tone="err"] {background:rgba(220,38,38,.10); color:#B91C1C}
html.kiun-light kiun-chip[tone="ok"]  {color:#047857}
html.kiun-light kiun-chip[tone="warn"]{color:#92400E}
html.kiun-light kiun-chip[tone="err"] {color:#B91C1C}

/* ── responsive utilities (mobile-first, 2026-06-10) ─────────────────────────
   Patrones universales que cualquier página tenant puede usar sin tener que
   re-implementar su propio sistema de breakpoints. Pages históricas con sus
   propios nombres (.tbl-wrap, .tablewrap, .cards, .hdr/.row) también quedan
   cubiertas por los selectors compatibles abajo. */

/* tabla que se desborda en mobile → wrapper con scroll horizontal */
.k-tbl-wrap, .kiun-tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch }
.k-tbl-wrap > table, .kiun-tbl-wrap > table { min-width:640px }

@media (max-width:640px){
  /* utilidades genéricas: cualquier grid de 2/3/4 col → 1 col en mobile */
  .k-grid-2, .k-grid-3, .k-grid-4,
  .kiun-grid-2, .kiun-grid-3, .kiun-grid-4 { grid-template-columns:1fr !important }

  /* compat con páginas históricas detectadas en el audit responsive 2026-06-10:
     admin-calendario .cards (grid 2-col), admin-avisos .hdr/.row (grid 4-col),
     y los wrappers de tabla de admin.html (.tbl-wrap) y admin-tenants (.tablewrap). */
  .cards { grid-template-columns:1fr !important }
  .tbl-wrap, .tablewrap { overflow-x:auto !important; -webkit-overflow-scrolling:touch }
  .tbl-wrap > table, .tablewrap > table { min-width:640px }
  /* avisos: la fila grid-3/4 col apila vertical; las celdas reciben breathing room */
  .hdr, .row { grid-template-columns:1fr !important; gap:6px !important }
  .hdr .cell, .row .cell { margin-top:4px }
}

/* ════════════════════════════════════════════════════════════════════════
   Capa de PULIDO Tesla/Apple iOS (2026-06-13) — DRAFT para revisión.
   100% ADITIVA + opt-in: no cambia ninguna página existente (clases nuevas
   .k-glass / .k-card--glass) y solo REFUERZA el hover de .k-card--lift que
   ya era opt-in. NO toca la marca (teal/dark). De la investigación de Memo:
   glassmorphism, elevación sutil 2-4px, motion contenido 200ms, teal único.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --k-ease:cubic-bezier(.4,0,.2,1);
  --k-dur:.2s;
  /* elevación sutil en capas (2-4px) — más fina que el --shadow pesado del kit */
  --k-elev:0 1px 2px rgba(0,0,0,.30), 0 3px 12px rgba(0,0,0,.22);
  /* glass dark: superficie translúcida sobre el deep-space */
  --k-glass-bg:rgba(22,30,45,.55);
  --k-glass-bd:rgba(255,255,255,.08);
}
html.kiun-light{
  --k-elev:0 1px 2px rgba(15,23,42,.06), 0 3px 12px rgba(15,23,42,.05);
  --k-glass-bg:rgba(255,255,255,.62);
  --k-glass-bd:rgba(15,23,42,.07);
}
/* ── Degradado global (el "deep space" Tesla/iOS) — capa fija detrás de todo.
   pointer-events:none + z-index:-1 → no intercepta clicks ni tapa contenido.
   Se ve en los gaps y, sobre todo, a través de las tarjetas glass. ── */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 12% 0%,  color-mix(in srgb,var(--teal) 26%,transparent), transparent 60%),
    radial-gradient(55% 50% at 92% 22%, color-mix(in srgb,#6d5cff 22%,transparent), transparent 62%),
    var(--bg);
}
html.kiun-light body::before{
  /* Light: SOLO el glow teal, muy tenue. El radial violeta #6d5cff que sí
     funciona sobre deep-space se veía como MANCHA morada sobre el off-white
     (visible en Mi operación / Decisiones con poco contenido — feedback
     Alex 2026-07-12). */
  background:
    radial-gradient(60% 50% at 12% 0%,  color-mix(in srgb,var(--teal) 7%,transparent), transparent 55%),
    var(--bg);
}

/* tarjeta glass (Tesla center-display / iOS): blur + saturación + borde fino.
   Aplicado a los componentes del kit (.k-card/.k-kpi) → app + admin lo heredan.
   Las clases legacy de portales (.card/.tile…) NO se tocan (evita el wash gris
   que el kit ya resolvió en light). */
.k-glass,.k-card--glass,.k-card,.k-kpi{
  background:var(--k-glass-bg);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--k-glass-bd);
  box-shadow:var(--k-elev);
}
.k-glass,.k-card--glass{border-radius:var(--r);padding:16px}
/* hover-lift más afinado (engineered, no decorativo) — refuerza el opt-in */
.k-card--lift{transition:transform var(--k-dur) var(--k-ease),
  border-color var(--k-dur) var(--k-ease),
  box-shadow var(--k-dur) var(--k-ease)}
.k-card--lift:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--teal) 38%,var(--bd));
  box-shadow:var(--k-elev)}
/* el CTA teal gana un glow sutil al hover (acento único, product-first) */
.k-btn--teal{transition:filter var(--k-dur) var(--k-ease),
  transform .08s var(--k-ease),box-shadow var(--k-dur) var(--k-ease)}
.k-btn--teal:hover{box-shadow:0 4px 16px color-mix(in srgb,var(--teal) 38%,transparent)}
@media (prefers-reduced-motion:reduce){
  .k-card--lift{transition:none}
  .k-card--lift:hover{transform:none}
  .k-btn--teal{transition:none}
}

/* ── Toasts (Kiun.toast) — feedback no-bloqueante, reemplaza alert() ── */
#kiun-toasts{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0) + 76px);
  transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:var(--z-toast);
  width:min(440px,92vw);pointer-events:none}
.k-toast{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;
  box-shadow:var(--k-elev);font-size:13px;color:var(--text);pointer-events:auto;
  animation:k-toast-up .25s var(--k-ease)}
.k-toast.ok{background:var(--k-glass-bg);border:1px solid var(--k-glass-bd);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.k-toast.err{background:color-mix(in srgb,#dc2626 16%,var(--card));
  border:1px solid color-mix(in srgb,#dc2626 45%,transparent)}
.k-toast .material-symbols-outlined{font-size:19px}
.k-toast .ok-i{color:var(--teal)} .k-toast .err-i{color:#f87171}
.k-toast .k-toast-msg{flex:0 1 auto}
.k-toast .k-toast-sp{flex:1}
.k-toast .k-toast-ct{font-family:var(--mono);font-size:11px;color:var(--dim)}
.k-toast .k-toast-act{background:transparent;border:0;color:var(--teal);font-weight:700;
  font-size:13px;cursor:pointer;padding:10px 12px;border-radius:6px;min-height:44px}  /* a11y: tap target */
.k-toast .k-toast-act:hover{background:color-mix(in srgb,var(--teal) 14%,transparent)}
@keyframes k-toast-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.k-toast{animation:none}}

/* ════════════════════════════════════════════════════════════════════════
   LIGHT-MODE OVERRIDES — barras/toasts/headers hardcoded en dark
   ════════════════════════════════════════════════════════════════════════
   Muchas páginas tienen .navbar/.topbar/.savebar/header con `background:
   rgba(N,N,N,…)` literal dark, lo que en kiun-light deja una franja negra
   sobre la página clara. Estos overrides los corrigen sin tocar cada HTML.
   Pattern: usar var(--bg) con alpha vía color-mix (igual que onboarding).
   Audit Alex 2026-06-18. */
html.kiun-light .navbar,
html.kiun-light .topbar,
html.kiun-light .pulso-topbar,
html.kiun-light .savebar,
html.kiun-light .bottom-nav,
html.kiun-light .dash-header {
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  border-color: var(--bd) !important;
}
/* header genérico (loop-designer, admin*) — solo si tiene fondo dark hardcoded */
html.kiun-light header[style*="background"],
html.kiun-light header.app-header {
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
}
/* Toasts: en light un fondo "casi-negro" sobre página clara es OK por contraste,
   pero suavizamos a un dark menos agresivo para que no rompa la armonía. */
html.kiun-light .toast {
  background: rgba(15,23,42,.92) !important;  /* slate-900 con alpha — legible y armónico */
  color: #fff !important;
}
/* El !important de arriba (color:#fff) le gana a `.toast.ok{color:var(--ok)}` /
   `.toast.err{color:var(--err)}` que varias páginas definen sin !important
   (admin-calendario/avisos/acuerdos.html) — el toast de éxito/error pierde su
   tinte semántico y siempre sale blanco neutro. Reafirmamos DESPUÉS, mismo
   patrón que .chip.ok/.chip.anom arriba. Audit 2026-07-20. */
html.kiun-light .toast.ok{ color:var(--ok) !important; }
html.kiun-light .toast.err{ color:var(--err) !important; }
html.kiun-light .toast.warn{ color:var(--warn) !important; }
/* tv-toggle (team-tasks) */
html.kiun-light .tv-toggle {
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  border-color: var(--bd) !important;
}

/* ── Filtros de calendario compartidos (Kiun.dateFilters) — mismo look en
   todos los tableros con fecha. Chevron SVG inline en var(--dimmer). ── */
.kdf{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kdf select{background:var(--card);border:1px solid var(--bd);border-radius:10px;
  color:var(--text);padding:8px 30px 8px 12px;font-size:13px;font-family:inherit;
  outline:none;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.kdf select:focus{border-color:var(--teal)}
.kdf .kdf-clr{background:none;border:0;color:var(--dim);font-size:12px;cursor:pointer;
  font-family:inherit;padding:6px}
.kdf .kdf-clr:hover{color:var(--teal)}