/* =====================================================================
   Kepubli UI · sistema visual único de la aplicación (v1 · 19/10/2026)
   Sale de las maquetas aprobadas: Configuración, Google Búsquedas y Menú.
   Regla: ninguna pantalla define colores, tamaños de letra, radios ni
   sombras propios. Todo sale de estos tokens y componentes.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* tipografía */
  --font:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-h1:22px;      /* título de pantalla */
  --fs-h3:14.5px;    /* título de tarjeta / sección desplegable */
  --fs-body:13.5px;  /* texto normal, menú, pestañas */
  --fs-table:13px;   /* celdas de tabla */
  --fs-sm:12.5px;    /* ayudas, descripciones, botones */
  --fs-xs:11.5px;    /* pills, encabezados de tabla, leyendas */
  --fs-label:10.5px; /* etiquetas en MAYÚSCULA (grupos del menú, sobre selectores) */
  --fs-code:11px;    /* concordancia de Google (monoespaciada) */
  /* NINGÚN otro tamaño. Ver kepubli-conceptos.md */
  --fs-kpi:22px;     /* número grande de un KPI */
  --fs-kpi-sm:18px;  /* número de la franja de resumen de una tabla */
  --fw-regular:400; --fw-semi:600; --fw-bold:700;
  --lh:1.5; --lh-tight:1.3;
  --track-label:.1em;

  /* espacio (múltiplos de 2) */
  --s1:2px; --s2:4px; --s3:6px; --s4:8px; --s5:10px; --s6:12px; --s7:14px; --s8:16px; --s10:20px; --s12:24px;
  --row-h:32px;  /* alto de fila de tabla: SIEMPRE compacto, sin opción para cambiarlo */
  --ctl-h:33px;                        /* alto de selector, buscador y botón */

  /* bordes */
  --r-card:11px; --r-ctl:9px; --r-input:8px; --r-pill:999px;

  /* color · claro */
  --bg:#F4F5F7; --surface:#FFFFFF; --surface2:#F6F7F9; --row-hover:#F9FAFB;
  --line:#E5E7EC; --line-soft:#EEF0F4;
  --ink:#2B3345; --head:#1B2234; --muted:#6A7383; --faint:#98A0AE;
  --accent:#2563EB; --accent-ink:#1D4ED8; --accent-2:#E8F0FE;
  --pos:#15A36B; --pos-2:rgba(21,163,107,.12);
  --neg:#E5484D; --neg-2:rgba(229,72,77,.10);
  --warn:#D97706; --warn-2:rgba(217,119,6,.12);
  --violet:#7C3AED; --violet-2:rgba(124,58,237,.10);   /* Cerebro / IA / personalizado */
  /* fuentes de datos (solo para identificar de dónde viene un dato) */
  --meta:#1877F2; --meta-2:rgba(24,119,242,.10);
  --goo:#1E8E3E;  --goo-2:rgba(30,142,62,.10);
  --tn:#2C3357;   --tn-2:rgba(44,51,87,.10);   --tn-solid:#2C3357;
  --accent-wash:rgba(37,99,235,.10); --accent-wash-2:rgba(37,99,235,.05);   /* fondos suaves del acento (los pisa la marca del cliente) */
  --bar:#CDD2DB;   /* barra neutra de gráficos */
  --proj:#93B4F5;  /* lo proyectado (rayado / punteado): Plan del mes y Proyecciones */
  --shadow:0 1px 2px rgba(27,34,52,.04),0 2px 8px rgba(27,34,52,.04);
  --shadow-pop:0 10px 30px rgba(0,0,0,.18);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0D131B; --surface:#141C27; --surface2:#111823; --row-hover:#18212D;
  --line:#243040; --line-soft:#1C2530;
  --ink:#E4E9F1; --head:#F0F3F8; --muted:#95A1B1; --faint:#6B7889;
  --accent:#5B93FF; --accent-ink:#A9C6FF; --accent-2:#17233A;
  --pos:#36C48A; --pos-2:rgba(54,196,138,.14); --neg:#F0655A; --neg-2:rgba(240,101,90,.14);
  --warn:#F0A64B; --warn-2:rgba(240,166,75,.14); --violet:#A78BFA; --violet-2:rgba(167,139,250,.14);
  --meta:#5B9BFF; --meta-2:rgba(91,155,255,.15); --goo:#4CC27A; --goo-2:rgba(76,194,122,.14); --tn:#A4ABD6; --tn-2:rgba(164,171,214,.14); --accent-wash:rgba(91,147,255,.16); --accent-wash-2:rgba(91,147,255,.08); --bar:#3A4658; --proj:#3D5A92;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.3); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D131B; --surface:#141C27; --surface2:#111823; --row-hover:#18212D;
  --line:#243040; --line-soft:#1C2530;
  --ink:#E4E9F1; --head:#F0F3F8; --muted:#95A1B1; --faint:#6B7889;
  --accent:#5B93FF; --accent-ink:#A9C6FF; --accent-2:#17233A;
  --pos:#36C48A; --pos-2:rgba(54,196,138,.14); --neg:#F0655A; --neg-2:rgba(240,101,90,.14);
  --warn:#F0A64B; --warn-2:rgba(240,166,75,.14); --violet:#A78BFA; --violet-2:rgba(167,139,250,.14);
  --meta:#5B9BFF; --meta-2:rgba(91,155,255,.15); --goo:#4CC27A; --goo-2:rgba(76,194,122,.14); --tn:#A4ABD6; --tn-2:rgba(164,171,214,.14); --accent-wash:rgba(91,147,255,.16); --accent-wash-2:rgba(91,147,255,.08); --bar:#3A4658; --proj:#3D5A92;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.3); color-scheme:dark}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}           /* TODO número que se compara: siempre */
h1,h2,h3{text-wrap:balance}
.k-page{padding-block:18px 90px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))} /* 100% del ancho */

/* ---------- 3. Texto ---------- */
.k-h1{margin:0;font-size:var(--fs-h1);font-weight:var(--fw-bold);color:var(--head);display:flex;align-items:center;gap:var(--s5)}
.k-sub{margin:2px 0 0;color:var(--muted)}
.k-h3{margin:0;font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--head)}
.k-label{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint);font-weight:var(--fw-semi)}
.k-help{font-size:var(--fs-sm);color:var(--muted)}
.k-example{font-size:var(--fs-xs);color:var(--faint)}   /* "Ej.: …" */

/* ---------- 4. Encabezado de pantalla + pestañas ---------- */
.k-head{margin-bottom:var(--s7)}
.k-head .k-h1{margin-bottom:var(--s5)}
.k-tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--line);overflow:visible;flex-wrap:nowrap;align-items:flex-end}   /* NUNCA scroll horizontal: las que no entran van a "Más ▾" */
.k-tabs button{border:0;background:none;padding:9px 13px;font-size:var(--fs-body);color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.k-tabs button[aria-selected="true"]{color:var(--head);border-bottom-color:var(--head);font-weight:var(--fw-semi)}
.k-tabs .k-tab-count{font-size:var(--fs-xs);color:var(--faint);margin-left:var(--s3)}
.k-tabs .k-spacer{flex:1}
.k-tabs .k-tab-uni{color:var(--violet)}                                  /* "✦ Universos", siempre la última, a la derecha */
.k-tabs .k-tab-uni[aria-selected="true"]{border-bottom-color:var(--violet);color:var(--violet)}

/* ---------- 5. Superficies ---------- */
.k-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.k-card-pad{padding:var(--s7)}
.k-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}   /* 50 / 50 */
@media (max-width:980px){.k-grid-2{grid-template-columns:minmax(0,1fr)}}

/* KPI sueltos (Resumen) */
.k-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.k-kpi{padding:var(--s6) var(--s7)}
.k-kpi small{display:block;color:var(--muted);font-size:var(--fs-sm)}
.k-kpi b{display:block;font-weight:var(--fw-regular);font-size:var(--fs-kpi);color:var(--head);margin:2px 0;font-variant-numeric:tabular-nums}  /* números SIN negrita */
.k-kpi .k-trend{font-size:var(--fs-sm);color:var(--muted)}
.k-up{color:var(--pos)} .k-down{color:var(--neg)}   /* ▲▼ coloreado según si es mejor o peor, no según si sube o baja */
@media (max-width:980px){.k-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* franja de resumen pegada (arriba de una tabla) */
.k-strip:not(:last-child),.k-grid-2:not(:last-child){margin-bottom:var(--s8)}   /* entre bloques, 16 px mínimo */
.k-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.k-strip>div{padding:var(--s5) var(--s7);border-right:1px solid var(--line-soft)}
.k-strip>div:last-child{border-right:0}
.k-strip small{display:block;color:var(--muted);font-size:var(--fs-xs)}
.k-strip b{font-weight:var(--fw-regular);font-size:var(--fs-kpi-sm);color:var(--head);font-variant-numeric:tabular-nums}
/* !important: las pantallas ponen las columnas en línea (style) y en el celular se enciman los números (tablas con aire) */
@media (max-width:900px){.k-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important}.k-strip>div:nth-child(3n){border-right:0}}
@media (max-width:560px){.k-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}.k-strip>div{border-right:1px solid var(--line-soft)}.k-strip>div:nth-child(2n){border-right:0}.k-strip>div:nth-child(n+3){border-top:1px solid var(--line-soft)}}

/* sección desplegable (Configuración y similares) */
.k-acc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.k-acc>summary{list-style:none;display:grid;grid-template-columns:36px minmax(0,1fr) auto 18px;gap:var(--s6);align-items:center;padding:var(--s7) var(--s8);cursor:pointer}
.k-acc>summary::-webkit-details-marker{display:none}
.k-acc>summary:hover{background:var(--surface2)}
.k-acc-body{border-top:1px solid var(--line-soft);padding:var(--s3) var(--s8) var(--s7)}

/* ---------- 6. Controles ---------- */
/* selector con etiqueta arriba: el control por defecto para filtrar, agrupar, elegir columnas */
.k-field{display:flex;flex-direction:column;gap:var(--s1)}
.k-field>span{font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding-left:var(--s2)}
.k-select{height:var(--ctl-h);border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);padding:0 28px 0 var(--s5);font-size:var(--fs-sm);min-width:140px}
.k-select.is-active{border-color:var(--accent);background:var(--accent-2);color:var(--accent-ink)}   /* filtro aplicado */
.k-input{height:var(--ctl-h);border:1px solid var(--line);border-radius:var(--r-input);background:var(--surface);padding:0 var(--s5)}
.k-search{position:relative;flex:1 1 240px;max-width:340px}
.k-search input{width:100%;height:var(--ctl-h);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);padding:0 var(--s6) 0 31px}
.k-toolbar{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:flex-end;margin-bottom:var(--s4)}
.k-toolbar .k-spacer{flex:1}

.k-btn{height:var(--ctl-h);border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:0 var(--s6);font-size:var(--fs-sm);display:inline-flex;gap:var(--s3);align-items:center;white-space:nowrap}
.k-btn:hover{border-color:var(--accent)}
.k-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.k-btn-danger{color:var(--neg)}
.k-link{border:0;background:none;padding:0;color:var(--accent-ink);font-size:var(--fs-sm)}

.k-switch{position:relative;width:38px;height:22px;border-radius:var(--r-pill);background:var(--line);border:0;padding:0}
.k-switch::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.k-switch[aria-checked="true"]{background:var(--accent)}.k-switch[aria-checked="true"]::after{left:19px}

/* filtros activos que vienen de otro lado (ej. tocar una campaña) */
.k-filtering{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--s5)}
.k-filtering .k-chip{display:inline-flex;gap:var(--s3);align-items:center;border-radius:var(--r-pill);background:var(--accent-2);color:var(--accent-ink);padding:3px 6px 3px 11px}

/* ---------- 7. Pills y chips ---------- */
.k-pill{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-pill);padding:2px 9px;font-size:var(--fs-xs);white-space:nowrap}
.k-pill-ok{background:var(--pos-2);color:var(--pos)}
.k-pill-warn{background:var(--warn-2);color:var(--warn)}
.k-pill-bad{background:var(--neg-2);color:var(--neg)}
.k-pill-off{background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
.k-pill-ia{background:var(--violet-2);color:var(--violet)}       /* personalizado, Cerebro */
.k-pill-info{background:var(--accent-2);color:var(--accent-ink)}
/* acción sugerida por el Cerebro: Pausar=bad · Ajustar=warn · Escalar=ok · Vigilar=off · Oportunidad=info */

/* chip de fuente: en cada dato que mezcla fuentes */
.k-src{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-pill);padding:1px 8px 1px 3px;font-size:var(--fs-xs);font-weight:var(--fw-semi);white-space:nowrap}
.k-src i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-size:10.5px;font-weight:var(--fw-bold)}
.k-src-meta{background:var(--meta-2);color:var(--meta)}.k-src-meta i{background:var(--meta)}
.k-src-google{background:var(--goo-2);color:var(--goo)}.k-src-google i{background:var(--goo)}
.k-src-tn{background:var(--tn-2);color:var(--tn)}.k-src-tn i{background:var(--tn-solid)}
.k-src-x{background:var(--violet-2);color:var(--violet)}.k-src-x i{background:var(--violet)}   /* cruce de fuentes */

/* concordancia de Google */
.k-match{display:inline-block;font-size:var(--fs-code);border-radius:5px;padding:1px 6px;font-family:var(--font-mono);border:1px solid var(--line);background:var(--surface2);color:var(--muted)}
.k-match-exact{border-color:var(--goo);color:var(--goo);background:var(--goo-2)}
.k-match-phrase{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-2)}
.k-match-broad{border-color:var(--warn);color:var(--warn);background:var(--warn-2)}
.k-match-pmax{border-color:var(--violet);color:var(--violet);background:var(--violet-2)}

/* ---------- 8. Tablas (todas las listas) ---------- */
.k-table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - 120px)}   /* sin scroll lateral: fitTables() oculta columnas */
.k-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--fs-table)}
.k-table th,.k-table td{padding:0 var(--s5);height:var(--row-h);line-height:1.3;border-bottom:1px solid var(--line-soft);white-space:nowrap;text-align:left;background:var(--surface)}
/* Tablas con aire (A): fila de 32 px con una línea; 40 px si alguna celda tiene dos (valor + texto chico debajo). Nada encimado. */
.k-table tbody tr:has(> td small, > td br) > td{height:40px;padding-top:3px;padding-bottom:3px}
.k-table td small{line-height:1.25}
/* Resultado en dos líneas (C): el número arriba y, debajo, chico (11) y gris, a qué corresponde; a la derecha. */
.k-res small{display:block;font-size:11px;color:var(--faint);font-weight:var(--fw-regular)}
.k-table th{position:sticky;top:0;z-index:3;font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--muted);border-bottom:1px solid var(--line);user-select:none}
.k-table th small{display:block;font-weight:var(--fw-regular);color:var(--faint);font-size:10.5px;line-height:1.1}
.k-table th[aria-sort]{cursor:pointer}
.k-table .is-num{text-align:right;font-variant-numeric:tabular-nums}
.k-table .k-col-check{position:sticky;left:0;z-index:2;width:36px;padding:0 0 0 var(--s6)}
.k-table .k-col-main{position:sticky;left:36px;z-index:2;min-width:240px;max-width:340px;white-space:normal;box-shadow:1px 0 0 var(--line-soft)}
.k-table th.k-col-check,.k-table th.k-col-main{z-index:4}
.k-table .k-col-main:first-child{left:0}
@media (max-width:600px){.k-table .k-col-main{min-width:140px;max-width:200px}}   /* celular: el nombre deja lugar a los números (con … y el nombre completo en el title) */   /* sin columna de selección: la columna fija va pegada al borde (no deja una columna vacía ni tapa la siguiente) */
.k-table .k-col-main small{display:block;color:var(--faint);font-size:var(--fs-xs)}   /* contexto debajo: campaña › grupo */
.k-table tbody tr:hover td{background:var(--row-hover)}
.k-table tr.is-selected td{background:var(--accent-2)}
.k-table tr.k-group td{background:var(--surface2);font-weight:var(--fw-semi);color:var(--head);cursor:pointer}
.k-table tr.k-total td{position:sticky;bottom:0;z-index:2;background:var(--surface2);font-weight:var(--fw-semi);border-top:1px solid var(--line)}
.k-better{color:var(--pos)} .k-worse{color:var(--neg)}   /* solo con significado: 30% mejor / 50% peor que la cuenta */
.k-zero{color:var(--faint)}
.k-spend{display:flex;align-items:center;gap:var(--s3);justify-content:flex-end}
.k-spend i{height:6px;border-radius:var(--r-pill);background:var(--goo);opacity:.5;display:inline-block}   /* barrita de peso del gasto */
.k-pager{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5);font-size:var(--fs-sm);color:var(--muted)}
.k-legend{margin:var(--s5) var(--s1) 0}
.k-table th .k-ar{color:var(--accent-ink);margin-left:3px}
.k-table .k-col-main{text-overflow:ellipsis}
.k-table .k-tg{display:inline-block;width:16px;border:0;background:none;padding:0;color:var(--faint);font-size:var(--fs-sm)}
.k-table tr.k-lvl1 td,.k-table tr.k-lvl2 td{color:var(--ink)}
.k-table tr.k-group .k-gc{display:inline-block;width:14px;color:var(--faint);transition:transform .2s}
/* Fila de grupo: una celda a todo el ancho (colspan), título + resumen completo a la derecha en gris 11,5 (A.3) */
.k-table td.k-grow{position:static;padding-left:var(--s6)}
.k-grow-in{display:flex;align-items:baseline;gap:var(--s3);white-space:normal}
.k-grow-in b{font-weight:var(--fw-semi)}
.k-grow-r{margin-left:var(--s8);font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--muted)}
.k-table tr.k-group.is-closed .k-gc{transform:rotate(-90deg)}
.k-table input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent)}
.k-cols{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);width:100%;padding:var(--s4) var(--s6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);font-size:var(--fs-sm)}
.k-cols[hidden]{display:none}
.k-cols label{display:flex;gap:6px;align-items:center}
.k-bar .k-select{background:transparent;color:var(--bg);border-color:rgba(255,255,255,.25);min-width:160px}
.k-bar .k-select option{color:var(--ink)}
.k-bar .k-btn{background:transparent;color:var(--bg);border-color:rgba(255,255,255,.25)}
.k-search svg{position:absolute;left:10px;top:9px;width:15px;height:15px;color:var(--faint)}
/* sin scroll lateral (E7.10): columnas que no entran y la línea que lo avisa */
.xh{display:none!important}
.xhn{margin:6px 2px 0;font-size:var(--fs-xs);color:var(--faint)}

/* estado activo / pausado */
.k-status{display:inline-flex;gap:6px;align-items:center;font-size:var(--fs-sm);color:var(--muted)}
.k-status i{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--faint)}
.k-status.is-on i{background:var(--pos)}
/* cargando */
.k-skel{background:linear-gradient(90deg,var(--line-soft),var(--surface2),var(--line-soft));background-size:200% 100%;animation:kskel 1.2s linear infinite;border-radius:6px;min-height:12px}
@keyframes kskel{to{background-position:-200% 0}}
/* aviso de error de lectura */
.k-alert{display:flex;gap:var(--s5);align-items:center;background:var(--warn-2);color:var(--ink);border-radius:var(--r-ctl);padding:var(--s4) var(--s6);font-size:var(--fs-sm)}

/* ---------- 9. Avisos flotantes ---------- */
.k-bar{position:fixed;left:50%;bottom:16px;transform:translate(-50%,130%);transition:transform .25s;z-index:30;display:flex;gap:var(--s4);align-items:center;background:var(--head);color:var(--bg);border-radius:14px;padding:var(--s4) var(--s4) var(--s4) var(--s8);box-shadow:var(--shadow-pop);font-size:var(--fs-body);max-width:calc(100% - 32px);flex-wrap:wrap}
.k-bar.is-on{transform:translate(-50%,0)}     /* "Tenés cambios sin guardar", "3 seleccionados" */
.k-toast{position:fixed;right:16px;top:16px;background:var(--head);color:var(--bg);border-radius:10px;padding:var(--s5) var(--s7);font-size:var(--fs-body);z-index:40;max-width:340px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Selector de período único (igual en toda la plataforma) */
.k-period{position:relative;display:inline-block;font-family:inherit}
.k-period>button{height:33px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:0 12px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap}
.k-period>button svg{width:15px;height:15px;color:var(--muted);flex:none}
.k-period>button small{font-size:12.5px;color:var(--faint)}
.k-period>button::after{content:"▾";font-size:11.5px;color:var(--faint)}
.k-period-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:50;width:264px;background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:0 8px 28px rgba(0,0,0,.14);padding:6px;display:none}
.k-period.open .k-period-pop{display:block}.k-period.r .k-period-pop{left:auto;right:0}
.k-period-pop button.o{display:flex;justify-content:space-between;width:100%;height:32px;align-items:center;border:0;background:none;border-radius:8px;padding:0 10px;font:inherit;font-size:13px;color:var(--ink);text-align:left;cursor:pointer}
.k-period-pop button.o:hover{background:var(--surface2)}
.k-period-pop button.o.on{color:var(--head);font-weight:600}
.k-period-pop button.o.on::after{content:"✓";color:var(--accent,#2563EB)}
.k-period-pop hr{border:0;border-top:1px solid var(--line-soft,var(--line));margin:6px 4px}
.k-period-cus{display:none;gap:6px;padding:4px 6px 6px;align-items:center}
.k-period.cus .k-period-cus[data-r=p],.k-period.ccus .k-period-cus[data-r=c]{display:grid;grid-template-columns:1fr 1fr}
html.kcmp-no .k-trend{display:none!important}
.k-period-cus input{height:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;padding:0 6px;min-width:0}
.k-period-cus button{grid-column:1/-1;height:32px;border:0;border-radius:8px;background:var(--accent,#2563EB);color:#fff;font:inherit;font-size:12.5px;cursor:pointer}
.k-period-cmp{display:grid;gap:4px;padding:4px 10px 6px;font-size:12.5px;color:var(--muted)}
.k-period-cmp select{height:30px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;padding:0 6px}
.k-updated{display:inline-flex;align-items:center;gap:6px;height:33px;border:0;background:none;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;padding:0 4px}
.k-updated:hover{color:var(--head)}
/* espacios entre bloques */
.mb-s{margin-bottom:var(--s4)}.mb-m{margin-bottom:var(--s8)}.mb-l{margin-bottom:var(--s8)}   /* entre bloques, 16 px mínimo (tablas con aire, A) */
.k-strip .k-trend{display:block;font-size:var(--fs-xs);color:var(--muted)}

/* ---------- 10. Universo (E5 + ajustes 19/10): pantalla completa, 65% espacio · 35% panel, siempre oscuro ---------- */
:root{--space:#0B1020;--space-ink:#E4E9F1;--space-muted:#95A1B1}
/* Al entrar a ✦ Universos se tapa todo: sin menú lateral, sin barra de arriba y sin pestañas. */
body.is-uni .app{grid-template-columns:1fr}
body.is-uni .side,body.is-uni .side-back,body.is-uni .topbar,body.is-uni #secHead,body.is-uni .notif-float{display:none!important}
body.is-uni .main{height:100vh}
body.is-uni .content{flex:1;min-height:0;padding:0;display:flex;flex-direction:column}
body.is-uni .content>.notes,body.is-uni .content>#stateBox{display:none}
body.is-uni .screen.active{flex:1;min-height:0;display:flex!important;flex-direction:column}
/* El universo es siempre oscuro y con los colores fijos del Cerebro: ni el tema ni la marca del cliente los pisan. */
.uv{flex:1;min-height:0;display:grid;grid-template-columns:65fr 35fr;margin-top:0;
  --accent:#5B93FF;--accent-ink:#A9C6FF;--accent-2:rgba(91,147,255,.16);--accent-wash:rgba(91,147,255,.12)}
.uv-space{position:relative;background:var(--space);overflow:hidden;min-height:0}
.uv-cv{position:absolute;inset:0;width:100%;height:100%;transition:filter .3s}
/* barra flotante: ← Volver · universos · período */
.uv-bar{position:absolute;left:18px;top:16px;right:18px;z-index:8;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.uv-chips{display:flex;gap:6px;flex-wrap:wrap}
.uv-bar .sp{flex:1}
.uv-bar button,.uv-chips button{border:1px solid rgba(165,180,252,.25);background:rgba(11,16,32,.6);backdrop-filter:blur(6px);color:var(--space-muted);border-radius:var(--r-pill);padding:5px 12px;font-size:var(--fs-sm)}
.uv-bar .uv-bk{background:rgba(255,255,255,.08);color:var(--space-ink);border-color:rgba(255,255,255,.18)}
.uv-chips button.on{background:rgba(167,139,250,.18);border-color:#A78BFA;color:#E9DDFF}
.uv-chips button.off{opacity:.45}
.uv-chips em{font-style:normal;margin-left:4px;opacity:.75}
/* el selector de período de la barra de arriba, mudado a la barra flotante (mismo componente) */
.uv-per .k-period>button{background:rgba(11,16,32,.6);backdrop-filter:blur(6px);border-color:rgba(165,180,252,.25);color:var(--space-ink);border-radius:var(--r-pill)}
.uv-per .k-period>button svg,.uv-per .k-period>button small,.uv-per .k-period>button::after{color:var(--space-muted)}
.uv-per .k-period-pop{z-index:60}
.uv-legend{position:absolute;left:18px;bottom:16px;right:18px;z-index:6;color:var(--space-muted);font-size:var(--fs-sm);display:flex;gap:16px;flex-wrap:wrap}
.uv-legend span{display:flex;gap:6px;align-items:center}.uv-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.uv-nodes{position:absolute;inset:0;z-index:4;pointer-events:none;transition:opacity .3s}
.uv-pl{position:absolute;left:0;top:0;pointer-events:auto;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--space-ink);transition:opacity .2s}
.uv-pl .o{position:relative;width:var(--sz);height:var(--sz);border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff 0,var(--c) 26%,color-mix(in srgb,var(--c) 55%,#000) 100%);box-shadow:0 0 18px color-mix(in srgb,var(--c) 70%,transparent);transition:box-shadow .2s}
/* nombre corto en una línea y la entidad en gris; sólo los 5 primeros siempre, el resto al pasar o resaltar */
.uv-pl .lb{font-size:var(--fs-sm);line-height:1.3;text-align:center;max-width:170px;color:var(--space-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s}
.uv-pl .lb small{display:block;color:var(--space-muted);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis}
.uv-pl.q .lb{opacity:0;pointer-events:none}.uv-pl.q:hover .lb,.uv-pl.q.hl .lb,.uv-pl.q.sel .lb{opacity:1}
/* en el mapa de Públicos el planeta sólo se toca en la esfera (los nombres ocultos no tapan a los de al lado) */
.uv-space.is-map .uv-pl{pointer-events:none}.uv-space.is-map .uv-pl .o{pointer-events:auto}
.uv-pl:hover .o,.uv-pl.hl .o{box-shadow:0 0 26px var(--c),0 0 0 4px color-mix(in srgb,var(--c) 35%,transparent)}
.uv-pl.sel .o{box-shadow:0 0 30px var(--c),0 0 0 6px color-mix(in srgb,var(--c) 45%,transparent)}
/* miniatura redonda de la foto principal, al pasar el mouse */
.uv-pl .ph{position:absolute;left:50%;bottom:calc(100% + 8px);width:54px;height:54px;border-radius:50%;overflow:hidden;transform:translateX(-50%) scale(.6);opacity:0;transition:opacity .18s,transform .18s;border:2px solid var(--c);background:#111827;pointer-events:none}
.uv-pl .ph img{width:100%;height:100%;object-fit:cover;display:block}
.uv-pl:hover .ph,.uv-pl.hl .ph{opacity:1;transform:translateX(-50%) scale(1)}
.uv-nodes.dim .uv-pl:not(.sel){opacity:.35}
/* entrada de los planetas (cambio de universo o fin del análisis) */
.uv-pl.warp .o{animation:uv-win .9s var(--wd) cubic-bezier(.2,.9,.3,1.35) both}.uv-pl.warp .lb{animation:uv-fi .5s calc(var(--wd) + .5s) both}
@keyframes uv-win{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
.uv-space.warping .uv-cv{filter:blur(1.5px) brightness(1.3)}
/* analizando: el cerebro gira más rápido, los planetas se apagan y los pasos se van tildando */
/* "Analizando…" en vivo (ajustes 2 · 3, mockups/kepubli-analizando.html): pasos con números reales, hallazgos y renglones */
.uv-think{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:7;display:none;width:min(460px,calc(100% - 32px));background:rgba(11,16,32,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(165,180,252,.22);border-radius:var(--r-card);padding:18px 20px;color:var(--space-ink);font-size:var(--fs-body)}
.uv-space.thinking .uv-think:not(:empty){display:block}.uv-space.thinking .uv-nodes{opacity:.15}
.uv-th-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.uv-th-hd b{font-size:var(--fs-h3);font-weight:var(--fw-semi)}.uv-th-hd span{font-size:var(--fs-sm);color:#6B7889;font-variant-numeric:tabular-nums}
.uv-th-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.08);margin:10px 0 14px;overflow:hidden}.uv-th-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#A78BFA,#60A5FA);transition:width .4s}
.uv-th-steps{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.uv-th-steps li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;color:#6B7889;transition:color .3s}
.uv-th-steps .ic{width:14px;height:14px;margin-top:3px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);position:relative}
.uv-th-steps li.run{color:var(--space-ink)}.uv-th-steps li.run .ic{border-color:#A78BFA;border-top-color:transparent;animation:uv-sp .8s linear infinite}
.uv-th-steps li.ok{color:var(--space-muted)}.uv-th-steps li.ok .ic{border:0}.uv-th-steps li.ok .ic::after{content:"✓";position:absolute;inset:-3px 0 0 1px;color:#34D399;font-size:var(--fs-table)}
@keyframes uv-sp{to{transform:rotate(360deg)}}
.uv-th-steps .det{display:block;font-size:var(--fs-sm);color:var(--space-muted);font-variant-numeric:tabular-nums;min-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.uv-th-steps li.ok .det{color:#6B7889}
.uv-th-found{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;min-height:24px}
.uv-th-found span{font-size:var(--fs-xs);border-radius:var(--r-pill);padding:2px 9px;animation:uv-pop .35s cubic-bezier(.3,1.5,.5,1)}@keyframes uv-pop{from{opacity:0;transform:scale(.6)}}
.uv-th-feed{margin-top:14px;padding-top:12px;border-top:1px solid rgba(165,180,252,.14);height:100px;overflow:hidden;font-size:var(--fs-xs);color:#6B7889;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;-webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%)}
.uv-th-feed div{flex:none;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:uv-in .3s ease}.uv-th-feed b{color:var(--space-muted);font-weight:var(--fw-semi)}.uv-th-feed em{font-style:normal;color:#A78BFA}@keyframes uv-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.uv-th-feed{display:none}.uv-th-steps li.run .ic,.uv-th-found span{animation:none}}
.uv-empty{position:absolute;inset:0;display:none;place-items:center;z-index:5;color:var(--space-muted);text-align:center;padding:20px}
.uv-empty b{display:block;color:var(--space-ink);font-size:var(--fs-h3);margin-bottom:4px}
.uv-space.is-off .uv-empty{display:grid}.uv-space.is-off .uv-nodes{display:none}.uv-space.thinking .uv-empty{display:none}
/* panel de datos con el mismo fondo de universo (tokens oscuros de la maqueta) */
.uv-data{--surface:#121a2b;--surface2:rgba(255,255,255,.05);--line:rgba(165,180,252,.16);--line-soft:rgba(165,180,252,.10);--ink:#D6DEEA;--head:#F0F3F8;--muted:#95A1B1;--faint:#6B7889;
  --pos:#36C48A;--pos-2:rgba(54,196,138,.16);--neg:#F0655A;--neg-2:rgba(240,101,90,.16);--warn:#F0A64B;--warn-2:rgba(240,166,75,.16);
  --meta:#5B9BFF;--meta-2:rgba(91,155,255,.16);--goo:#4CC27A;--goo-2:rgba(76,194,122,.16);--tn:#A4ABD6;--tn-2:rgba(164,171,214,.16);--violet:#A78BFA;--violet-2:rgba(167,139,250,.18);
  color-scheme:dark;background:linear-gradient(180deg,#0E1426,#0B1020);color:var(--ink);border-left:1px solid var(--line);overflow:auto;padding:18px 20px 40px;min-height:0}
.uv-k{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint);font-weight:var(--fw-semi);margin:0 0 6px}
.uv-data h2{margin:0 0 4px;font-size:var(--fs-h3);color:var(--head);font-weight:var(--fw-bold);line-height:1.4}
.uv-data p{margin:0 0 12px;color:var(--ink);font-size:var(--fs-body)}
.uv-data .uv-ent{color:var(--muted);font-size:var(--fs-sm);margin:0 0 12px}
.uv-how{color:var(--muted)!important;font-size:var(--fs-sm)!important}
.uv-li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:2px 10px;padding:11px 4px;border:0;border-top:1px solid var(--line-soft);cursor:pointer;width:100%;text-align:left;background:none;color:var(--ink)}
.uv-li:hover{background:var(--surface2)}.uv-li.is-done{opacity:.6}
.uv-li .k-pill{justify-self:start;align-self:start;grid-row:span 2}
.uv-li b{color:var(--head);font-weight:var(--fw-semi);font-size:var(--fs-body);line-height:1.35}
.uv-li .e{grid-column:2;color:var(--muted);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uv-li .m{grid-column:2;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted)}
/* Panel: jerarquía (maqueta 19/10 noche) · caja de resumen, filtros por tipo, tarjetas, Dónde está y ficha del público */
.uv-sumb{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:6px 0 12px;background:rgba(255,255,255,.03)}
.uv-hd3{margin:0 0 10px!important;color:var(--head)!important;font-size:var(--fs-h3)!important;font-weight:var(--fw-semi);line-height:1.4}
.uv-sumn{display:flex;justify-content:space-between;align-items:baseline}.uv-sumn small{color:var(--muted);font-size:var(--fs-sm)}.uv-sumn b{font-size:var(--fs-kpi);font-weight:var(--fw-regular);color:var(--head)}
.uv-segb{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden;margin:10px 0}.uv-segb i{display:block}
.uv-segl{display:flex;gap:6px;flex-wrap:wrap}
.uv-fch{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:none;color:var(--ink);border-radius:var(--r-pill);padding:3px 10px;font-size:var(--fs-xs);cursor:pointer}.uv-fch i{width:7px;height:7px;border-radius:50%}.uv-fch.on{border-color:var(--head);background:rgba(255,255,255,.06)}
.uv-lst{display:grid;gap:6px}
.uv-li2{display:grid;grid-template-columns:8px minmax(0,1fr) 92px;gap:10px;align-items:center;width:100%;text-align:left;border:1px solid var(--line-soft);border-left:3px solid var(--c);background:rgba(255,255,255,.02);border-radius:10px;padding:9px 12px;cursor:pointer;color:var(--ink);transition:background .15s,transform .15s}
.uv-li2:hover{background:rgba(255,255,255,.06);transform:translateX(2px)}.uv-li2.is-done{opacity:.6}
.uv-li2 .rk{width:8px;height:8px;border-radius:50%;background:var(--c)}
.uv-li2 .lt{min-width:0}.uv-li2 .lt b{display:block;font-weight:var(--fw-semi);font-size:var(--fs-body);color:var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.uv-li2 .lt small{display:block;color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uv-li2 .lv{display:grid;gap:1px;justify-items:end;min-width:0}.uv-li2 .jv{font-size:var(--fs-table);color:var(--head)}.uv-li2 .jl{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92px}
.uv-li2 .jb{width:80px;height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}.uv-li2 .jb i{display:block;height:100%;background:#F87171}
.uv-ah{display:flex;align-items:center;gap:8px}.uv-ah i{width:12px;height:12px;border-radius:50%;flex:none}
.uv-wh{border:1px solid rgba(165,180,252,.18);border-radius:10px;padding:10px 12px 4px;margin:4px 0 12px}
.uv-wk{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px}.uv-wk .k-link{font-size:var(--fs-sm);text-transform:none;letter-spacing:0}
.uv-wn{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;padding-bottom:10px}
.uv-wn:not(:last-child)::before{content:"";position:absolute;left:12.5px;top:26px;bottom:0;width:1px;background:rgba(165,180,252,.28)}
.uv-wn .wi{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(96,165,250,.14);color:#93C5FD}
.uv-wn-conj .wi{background:rgba(167,139,250,.16);color:#C4B5FD}.uv-wn-anu .wi{background:rgba(45,212,191,.14);color:#5EEAD4}.uv-wn-pub .wi{background:rgba(244,114,182,.14);color:#F9A8D4}.uv-wn-cta .wi{background:rgba(148,163,184,.14);color:#CBD5E1}
.uv-wn .wb{min-width:0}.uv-wn .wb small{display:block;font-size:11px;color:var(--muted);letter-spacing:.02em}.uv-wn .wb b{display:block;font-weight:var(--fw-semi);font-size:var(--fs-table);color:var(--head);line-height:1.35;overflow-wrap:anywhere}
.uv-wn .wsep{color:var(--muted);font-weight:var(--fw-regular);margin:0 6px}
.uv-wts{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}.uv-wts em{font-style:normal;font-size:var(--fs-sm);color:var(--muted);align-self:center}
.uv-wt{width:64px;display:grid;gap:3px;cursor:pointer}
.uv-wt i{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(140deg,rgba(165,180,252,.25),rgba(11,16,32,.8));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.uv-wt i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.uv-wt i b{position:relative;font-weight:var(--fw-regular);font-size:var(--fs-body);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.uv-pl.ft-off{opacity:.18}
.uv-simp .brn{display:inline-block;font-size:var(--fs-h3);line-height:1;animation:uv-brp 2.4s ease-in-out infinite}
@keyframes uv-brp{50%{transform:scale(1.12);filter:drop-shadow(0 0 4px #A78BFA)}}
@media (prefers-reduced-motion:reduce){.uv-simp .brn{animation:none}}
.uv-wt small{font-size:11px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* "✦ Explicámelo simple": pastilla violeta suave y 4 tarjetas que entran una tras otra */
.uv-simp{display:inline-flex;align-items:center;gap:6px;margin:4px 0 12px;border:1px solid rgba(167,139,250,.45);background:rgba(167,139,250,.12);color:#E9DDFF;border-radius:var(--r-pill);padding:5px 12px;font-size:var(--fs-sm);cursor:pointer}
.uv-simp:hover{background:rgba(167,139,250,.22)}.uv-simp.on{background:none}
.uv-sbox{display:grid;gap:10px;margin-bottom:14px}
.uv-sl{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(255,255,255,.03);opacity:0;animation:uv-sin .5s ease forwards}
.uv-sl:nth-child(2){animation-delay:.15s}.uv-sl:nth-child(3){animation-delay:.3s}.uv-sl:nth-child(4){animation-delay:.45s}
@keyframes uv-sin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.uv-sl .si{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(167,139,250,.14);color:#C4B5FD}
.uv-sl small{display:block;color:var(--muted);font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.uv-data .uv-sl p{margin:0;color:var(--head);font-size:var(--fs-h3);line-height:1.45}
.uv-shim{display:block;height:12px;border-radius:6px;margin:6px 0 4px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(167,139,250,.22),rgba(255,255,255,.06));background-size:200% 100%;animation:uv-shm 1.2s linear infinite}.uv-shim.s2{width:62%}
@keyframes uv-shm{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.uv-sl{animation:none;opacity:1}.uv-shim{animation:none}}
.uv-back{border:0;background:none;color:var(--accent-ink);font-size:var(--fs-sm);padding:0;margin-bottom:12px}
.uv-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.uv-jg{color:var(--muted);font-size:var(--fs-sm)}
.uv-nums{display:grid;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin:6px 0 14px}
.uv-nums div{padding:10px 8px 10px 0;min-width:0}
.uv-nums b{display:block;font-weight:var(--fw-regular);font-size:var(--fs-kpi);color:var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uv-nums small{color:var(--muted);font-size:var(--fs-xs)}
.uv-steps{margin:0 0 14px;padding-left:18px;font-size:var(--fs-body)}.uv-steps li{margin:4px 0;cursor:pointer}.uv-steps li.ok{color:var(--muted);text-decoration:line-through}
.uv-sum{background:var(--surface2);border-radius:var(--r-ctl);padding:10px 12px;font-size:var(--fs-sm);color:var(--ink);margin-bottom:14px}
.uv-acts{display:flex;gap:8px;flex-wrap:wrap}
.uv-disc{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:12px}.uv-disc .uv-k{width:100%;margin:0}
.uv-ok{padding:30px 0;color:var(--muted)!important;text-align:center}
.uv-err{border:1px solid var(--neg-2);background:var(--neg-2);border-radius:var(--r-ctl);padding:10px 12px;margin:8px 0 12px}
.uv-data .k-btn{background:var(--surface2);color:var(--ink)}
.uv-data .k-btn-primary,.uv-data a.k-btn-primary{background:var(--accent);border-color:var(--accent);color:#0B1020;text-decoration:none}
.uv-data a.k-btn{text-decoration:none}
/* ---------- 10b. Dibujos del Cerebro (mockups/kepubli-dibujos.html), dentro de la historia del planeta ---------- */
.uv-dib{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r-card);background:rgba(255,255,255,.03);padding:12px}
.uv-dib svg{display:block;width:100%;height:auto}
.uv-dib svg text{font-family:var(--font)}
.uv-dib .lb{font-size:12px;fill:#8A96A8}.uv-dib .sm{font-size:12px;fill:#8A96A8}.uv-dib .tk{font-size:10.5px;fill:#6B7889}
.uv-dib .bg{font-size:28px;font-weight:600;letter-spacing:-.01em;transform-box:fill-box;transform-origin:0 50%}
.uv-dib .n{fill:none;stroke:rgba(226,232,240,.28);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.uv-dib .h{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.uv-dib .dr{stroke-dasharray:1;stroke-dashoffset:1;animation:uv-dr 1.2s var(--d,.2s) cubic-bezier(.6,0,.3,1) forwards}@keyframes uv-dr{to{stroke-dashoffset:0}}
.uv-dib .fi{opacity:0;animation:uv-fi .6s var(--d,.2s) forwards}@keyframes uv-fi{to{opacity:1}}
.uv-dib .gy{transform-box:fill-box;transform-origin:50% 100%;animation:uv-gy 1s var(--d,.2s) cubic-bezier(.3,1.2,.5,1) both}@keyframes uv-gy{from{transform:scaleY(0)}}
.uv-dib .gx{transform-box:fill-box;transform-origin:0 50%;animation:uv-gx 1s var(--d,.2s) cubic-bezier(.3,1.1,.5,1) both}@keyframes uv-gx{from{transform:scaleX(0)}}
.uv-dib .po{transform-box:fill-box;transform-origin:center;opacity:0;animation:uv-po .4s var(--d,.2s) cubic-bezier(.3,1.5,.5,1) forwards}@keyframes uv-po{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.uv-dib .fall{opacity:0;animation:uv-fall 1.6s var(--d) ease-in forwards}@keyframes uv-fall{0%{opacity:0;transform:translateY(-6px)}20%{opacity:1}100%{opacity:0;transform:translateY(var(--dy,40px))}}
.uv-dib .mv{animation:uv-mv 1.6s var(--d,.2s) cubic-bezier(.5,0,.3,1) both}@keyframes uv-mv{from{transform:translateX(var(--fx))}}
.uv-dib .sc{transform-box:fill-box;transform-origin:center;animation:uv-sc 1.6s var(--d,.3s) ease-in-out both}@keyframes uv-sc{from{transform:scale(var(--fs))}}
.uv-dib .rot{transform-box:view-box;transform-origin:var(--o);animation:uv-rot 1.4s .3s cubic-bezier(.3,1.3,.5,1) both}@keyframes uv-rot{from{transform:rotate(var(--from))}}
.uv-dib .ping{transform-box:fill-box;transform-origin:center;opacity:0;animation:uv-ping 2.4s var(--d,1.6s) ease-out infinite}@keyframes uv-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(var(--ps,3.2))}}
.uv-dib .glow{animation:uv-glow 2.6s var(--d,1.6s) ease-in-out infinite}@keyframes uv-glow{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 6px var(--gc))}}
.uv-dib .flt{animation:uv-flt 2.6s var(--d,1.4s) ease-in-out infinite}@keyframes uv-flt{50%{transform:translateY(-5px)}}
.uv-dib .blk{animation:uv-blk 1.6s var(--d,2s) steps(1) infinite}@keyframes uv-blk{50%{opacity:.25}}
.uv-dib .sway{transform-box:view-box;transform-origin:var(--o);animation:uv-sway 4s var(--d,1.8s) ease-in-out infinite}@keyframes uv-sway{0%,100%{transform:rotate(var(--a0))}50%{transform:rotate(var(--a1))}}
.uv-dib .spin{transform-box:view-box;transform-origin:var(--o);animation:uv-spin var(--t,10s) linear infinite}@keyframes uv-spin{to{transform:rotate(360deg)}}
.uv-dib .brz{transform-box:fill-box;transform-origin:center;animation:uv-brz 3s var(--d,1.6s) ease-in-out infinite}@keyframes uv-brz{50%{transform:scale(1.05)}}
.uv-dib .wink{transform-box:fill-box;transform-origin:center;animation:uv-wink 3.6s 2s ease-in-out infinite}@keyframes uv-wink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.uv-dib .shim{animation:uv-shim 2.4s var(--d,1.6s) ease-in-out infinite}@keyframes uv-shim{0%{transform:translateX(-30px);opacity:0}30%{opacity:.9}100%{transform:translateX(var(--sx,60px));opacity:0}}
.uv-dib .loop{opacity:0;animation:uv-loop 2.2s var(--d) ease-in infinite}@keyframes uv-loop{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}85%{opacity:.9}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,40px))}}
.uv-dib .bg.pop{animation:uv-popn .5s cubic-bezier(.3,1.6,.5,1)}@keyframes uv-popn{40%{transform:scale(1.08)}}
.uv-dib .typ{clip-path:inset(0 100% 0 0);animation:uv-typ 1.2s .2s steps(16) forwards}@keyframes uv-typ{to{clip-path:inset(0 0 0 0)}}
.uv-dib .hit{animation:uv-hit 1.6s var(--d,.4s) cubic-bezier(.5,0,.3,1) both}@keyframes uv-hit{0%{transform:translateX(0);opacity:1}100%{transform:translateX(26px);opacity:0}}
@keyframes uv-drn{to{transform:scaleY(var(--to));fill:#F87171}}
@media (prefers-reduced-motion:reduce){.uv-dib *{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important}.uv-pl.warp .o,.uv-pl.warp .lb{animation:none}}
@media (max-width:980px){body.is-uni .main{height:auto}.uv{grid-template-columns:1fr}.uv-space{height:72vh}.uv-data{border-left:0;border-top:1px solid var(--line)}.uv-bar{left:12px;right:12px;top:12px}.uv-legend{display:none}
  .uv-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;order:2}.uv-chips::-webkit-scrollbar{display:none}.uv-chips button{flex:none}
  .uv-bar .sp{display:none}.uv-per{margin-left:auto}.uv-per .k-period>button small{display:none}}

/* ── "Cargando" con el cerebro (web/loader.js, maqueta mockups/kepubli-cargando.html): sobre el área de contenido ── */
.content{position:relative}
body.k-ld-on .content{min-height:calc(100vh - 120px)}
body.k-ld-on.loading .content{opacity:1}
.k-ld{position:absolute;inset:8px 12px;z-index:30;border-radius:14px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .35s;
  background:radial-gradient(55% 60% at 50% 40%,rgba(76,58,160,.55),transparent 70%),#0B1020}
.k-ld.on{opacity:1;pointer-events:auto}
.k-ld-in{position:sticky;top:0;height:min(100%,calc(100vh - 110px));min-height:380px}
.k-ld canvas{position:absolute;inset:0;width:100%;height:100%}
.k-ld-box{position:absolute;left:50%;top:64%;transform:translateX(-50%);width:min(440px,90%);text-align:center;color:#E4E9F1}
.k-ld-box .t{font-size:14.5px;font-weight:600;min-height:22px}
.k-ld-box .t span{background:linear-gradient(90deg,#C4B5FD,#fff,#93C5FD,#C4B5FD);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:k-ld-tx 2.4s linear infinite}
.k-ld-box .t span.bad{background:none;color:#FCA5A5;animation:none}
@keyframes k-ld-tx{to{background-position:-200% 0}}
.k-ld-box .s{font-size:12.5px;color:#95A1B1;margin-top:4px;min-height:18px;font-variant-numeric:tabular-nums}
.k-ld-dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.k-ld-dots i{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);transition:background .3s}
.k-ld-dots i.ok{background:#A78BFA}.k-ld-dots i.bad{background:#F87171}
.k-ld-dots i.run{background:linear-gradient(90deg,#A78BFA,rgba(255,255,255,.12));animation:k-ld-pl 1s ease-in-out infinite alternate}
@keyframes k-ld-pl{to{opacity:.4}}
.k-ld-ready{margin-top:10px;font-size:13px;color:#6EE7B7;opacity:0;transition:opacity .2s;font-variant-numeric:tabular-nums}.k-ld-ready.on{opacity:1}
.k-ld-err{margin-top:12px}.k-ld-err .k-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#E4E9F1}
/* el contenido que llega: fundido y filas escalonadas */
.k-in{animation:k-in .45s ease both}
@keyframes k-in{from{opacity:0}}
.k-row-in{animation:k-row-in .4s ease both}
@keyframes k-row-in{from{opacity:0;transform:translateY(6px)}}
@media (max-width:720px){.k-ld{inset:4px 0}.k-ld-in{min-height:340px}.k-ld-box{top:60%}}
@media (prefers-reduced-motion:reduce){.k-ld,.k-ld-dots i{transition:none}.k-ld-box .t span,.k-ld-dots i.run,.k-in,.k-row-in{animation:none}}