/* ============================================================================
Kiun UI Kit — tokens de marca (fuente única de verdad).
Cualquier página: 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;
/* 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;
/* texto */
--text:#E8EAED; --txt:#E8EAED;
--dim:#94A3B8; --muted:#94A3B8; --text-dim:#94A3B8;
--dimmer:#64748B; --text-dimmer:#64748B;
/* 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;
/* 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;
}
/* ── 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)}
/* ── logo Kiun (web component ) ── */
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{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{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}
.k-btn:active{transform:scale(.985)}
.k-btn[disabled]{opacity:.45;pointer-events:none}
.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:38px;height:38px;padding:0;border-radius:9px;background:transparent;
color:var(--muted);border:1px solid var(--bd)}
.k-btn--icon:hover{color:var(--teal);border-color:var(--teal-dim)}
.k-btn--icon .material-symbols-outlined{font-size:18px}
/* ── 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:5}
.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}
}
/* ── 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;
--bg:#F7F8FB; /* fondo crema-blanco suave */
--bg-2:#F1F3F8; /* legacy: loops/estrategia usan --bg-2 */
--bg-elevated:#FFFFFF; /* legacy: landing/demo */
--elev:#FFFFFF; --input:#FFFFFF;
--card:#FFFFFF; --surface:#FFFFFF;
--card-hi:#F1F3F8; /* legacy: loops */
--surface-2:#F1F3F8; --surface-3:#E7EBF2;
--bd:#DEE3EC; --border:#DEE3EC; /* borde gris claro definido */
--bd-hi:#C5CDDA;
--text:#0F172A; --txt:#0F172A; /* texto oscuro alto contraste */
--dim:#475569; --muted:#475569; --text-dim:#475569;
--dimmer:#94A3B8; --text-dimmer:#94A3B8;
/* el teal se queda igual — es la marca. ajustes finos: */
--teal:#0FB89F; --accent:#0FB89F; /* teal un punto más oscuro p/contraste */
--accent-hover:#0EA68F; /* 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(15,23,42,.07);
/* 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 */
/* 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). */
}
/* 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)}
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;
}
/* 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;
}
/* 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 }
}