/* ═══════════════════════════════════════════════════════════════════════
   EKO UI · "Vitro"  —  sistema visual compartido de las apps de Eko Varmo
   v1.4 · 2026-09-27 (neutros Sand de Radix, sombras Open Props, cápsulas, 44 px táctil, reduced-transparency/contrast)
   ───────────────────────────────────────────────────────────────────────
   Tesis: VIDRIO PARA NAVEGAR, PAPEL PARA LEER.
   · El vidrio (translúcido, con blur y un filo de luz arriba) es solo para
     la capa de navegación: barra superior, bandejas de filtros, chips,
     tarjetas del portal y hojas modales.
   · Los datos (tablas, cifras, KPIs) van siempre sobre superficies opacas:
     la legibilidad no se negocia.
   · Un sistema, una variable: cada app declara su color de identidad en
     --app (el mismo de su ícono). Todo lo demás es idéntico entre apps.
   · La luz de fondo cambia con la hora (mañana fría, noche con brasa),
     igual que el saludo del portal. Es ambiente, no decoración: chroma bajo.

   Uso mínimo en cada app (en <head>, antes del <style> propio):
     <link rel="stylesheet" href="/ui/eko.css?v=1">
     <script src="/ui/eko.js?v=1"></script>
     <style>:root{--app:#0E7C66;--app-ink:#0E7C66;--app-ink-dark:#3FB596}</style>
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Tipografía: Archivo (variable: peso 100–900, ancho 62–125 %) ----------
   Una sola familia con dos voces: expandida (marca, etiquetas de sección)
   y normal (texto y números tabulares). Autoalojada en /ui/fonts/. */
@font-face{
  font-family:"Archivo";
  font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url("fonts/archivo-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  color-scheme:light;

  /* Identidad de la app (la pisa cada app). --app: color del ícono (halos,
     puntos, marcas). --app-ink: variante con contraste AA para texto y
     rellenos con texto blanco. Portal = brasa. */
  --app:#E1531C;
  --app-ink:#B83E12;
  --app-ink-dark:#F07A4A;

  /* Marca (brasa): constante en todas las apps, para acentos de marca. */
  --accent:#E1531C;
  --accent-ink:#B83E12;
  --accent-soft:rgba(225,83,28,.10);

  /* Fondo (ceniza) + superficies opacas de lectura.
     Neutros = escala Sand de Radix Colors (cálida, par natural del naranja):
     bg = sand 4, superficies = blanco / sand 2 / sand 3, tinta = sand 12 / 11. */
  --bg:#E9E8E6;
  --surface:#FFFFFF;
  --surface-2:#F9F9F8;
  --surface-3:#F1F0EF;

  /* Tinta (sand 12 · mezcla · sand 11: 16:1 · 9:1 · 6:1 sobre blanco) */
  --ink:#21201C;
  --ink-2:#494844;
  --ink-3:#63635E;

  /* Líneas (sand alpha 6 · 7 · 4: funcionan también sobre vidrio) */
  --line:rgba(25,19,0,.16);
  --line-strong:rgba(25,20,0,.21);
  --line-soft:rgba(31,21,0,.10);

  /* Semántica (igual en todas las apps; ok = grass 11 para no confundirse con el verde de Caja) */
  --ok:#2A7E3B;    --ok-soft:rgba(42,126,59,.12);
  --warn:#9A6208;  --warn-soft:rgba(196,131,26,.14);
  --bad:#B4271A;   --bad-soft:rgba(180,39,26,.10);
  --info:#3F6B8A;  --info-soft:rgba(63,107,138,.11);

  /* Vidrio (material "regular": compone ≈ #f7f7f7 sobre el fondo, 1,15:1) */
  --glass:rgba(255,255,255,.66);
  --glass-strong:rgba(255,255,255,.84);
  --glass-edge:rgba(255,255,255,.80);      /* filo de luz (inset arriba) */
  --glass-line:rgba(25,19,0,.10);
  --glass-blur:20px;
  --glass-sat:1.5;
  --tint:rgba(32,16,0,.063);               /* sand alpha 3: relleno translúcido sobre vidrio */
  --tint-2:rgba(31,21,0,.098);             /* sand alpha 4 */

  /* Luz de fondo (la hora del día ajusta la intensidad, ver eko.js) */
  --glow-warm-a:.13;
  --glow-cool-a:.12;
  --glow-warm:rgba(225,83,28,var(--glow-warm-a));
  --glow-cool:rgba(63,107,138,var(--glow-cool-a));

  /* Sombras (Open Props, multicapa; color de sombra = tono de la tinta) */
  --shadow-color:48 8% 12%;
  --shadow-1:0 1px 2px -1px hsl(var(--shadow-color) / .11);
  --shadow-2:0 3px 5px -2px hsl(var(--shadow-color) / .05),0 7px 14px -5px hsl(var(--shadow-color) / .07);
  --shadow-glass:0 -2px 5px 0 hsl(var(--shadow-color) / .04),0 1px 1px -2px hsl(var(--shadow-color) / .05),0 2px 2px -2px hsl(var(--shadow-color) / .05),0 5px 5px -2px hsl(var(--shadow-color) / .06),0 9px 9px -2px hsl(var(--shadow-color) / .07),0 16px 16px -2px hsl(var(--shadow-color) / .08);
  --shadow-3:0 -1px 2px 0 hsl(var(--shadow-color) / .04),0 3px 2px -2px hsl(var(--shadow-color) / .05),0 7px 5px -2px hsl(var(--shadow-color) / .05),0 12px 10px -2px hsl(var(--shadow-color) / .06),0 22px 18px -2px hsl(var(--shadow-color) / .07),0 41px 33px -2px hsl(var(--shadow-color) / .08),0 100px 80px -2px hsl(var(--shadow-color) / .09);
  --ease:cubic-bezier(.25,0,.3,1);

  /* Foco */
  --ring:color-mix(in srgb,var(--app) 32%,transparent);

  /* Radios (concéntricos: interior = exterior − padding) */
  --r-xl:22px; --r-lg:16px; --r-md:12px; --r-sm:8px; --r-pill:999px;

  /* Tipografía */
  --font:"Archivo",-apple-system,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --narrow:88%;                            /* voz angosta: títulos y cifras (cartel de taller) */

  /* Layout */
  --wrap:1180px;
  --gutter:20px;
  --topbar-h:56px;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --app-ink:var(--app-ink-dark);
  --accent-ink:#F07A4A;
  --accent-soft:rgba(225,83,28,.16);

  /* Sand dark: capas base → elevadas cada vez más claras (la profundidad se
     comunica con luz, no con sombras). Tinta sand 12 / mezcla / sand 11 (15:1 · 11:1 · 8:1). */
  --bg:#111110;
  --surface:#191918;
  --surface-2:#222221;
  --surface-3:#2A2A28;

  --ink:#EEEEEC;
  --ink-2:#D2D0CC;
  --ink-3:#B5B3AD;

  --line:rgba(255,250,237,.18);
  --line-strong:rgba(255,251,237,.24);
  --line-soft:rgba(254,254,243,.11);

  /* Semánticos: paso 11 oscuro de Radix (más claros, no desaturados) */
  --ok:#71D083;    --ok-soft:rgba(113,208,131,.14);
  --warn:#F2C445;  --warn-soft:rgba(242,196,69,.14);
  --bad:#FF9592;   --bad-soft:rgba(255,149,146,.14);
  --info:#70B8FF;  --info-soft:rgba(112,184,255,.14);

  --glass:rgba(34,34,33,.68);
  --glass-strong:rgba(34,34,33,.86);
  --glass-edge:rgba(255,255,255,.10);
  --glass-line:rgba(255,250,237,.18);
  --tint:rgba(246,246,245,.075);
  --tint-2:rgba(251,251,235,.137);

  --glow-warm-a:.20;
  --glow-cool-a:.14;
  --glow-warm:rgba(225,83,28,var(--glow-warm-a));
  --glow-cool:rgba(80,130,170,var(--glow-cool-a));

  --shadow-color:48 10% 3%;
  --shadow-1:0 1px 2px -1px hsl(var(--shadow-color) / .35);
  --shadow-2:0 3px 5px -2px hsl(var(--shadow-color) / .28),0 7px 14px -5px hsl(var(--shadow-color) / .30);
  --shadow-glass:0 -2px 5px 0 hsl(var(--shadow-color) / .27),0 1px 1px -2px hsl(var(--shadow-color) / .28),0 2px 2px -2px hsl(var(--shadow-color) / .28),0 5px 5px -2px hsl(var(--shadow-color) / .29),0 9px 9px -2px hsl(var(--shadow-color) / .30),0 16px 16px -2px hsl(var(--shadow-color) / .31);
  --shadow-3:0 -1px 2px 0 hsl(var(--shadow-color) / .27),0 3px 2px -2px hsl(var(--shadow-color) / .28),0 7px 5px -2px hsl(var(--shadow-color) / .28),0 12px 10px -2px hsl(var(--shadow-color) / .29),0 22px 18px -2px hsl(var(--shadow-color) / .30),0 41px 33px -2px hsl(var(--shadow-color) / .31),0 100px 80px -2px hsl(var(--shadow-color) / .32);
}

/* La luz sigue la hora (eko.js pone data-daypart en <html>) */
:root[data-daypart="morning"]{--glow-warm-a:.07;--glow-cool-a:.16}
:root[data-daypart="afternoon"]{--glow-warm-a:.12;--glow-cool-a:.11}
:root[data-daypart="night"]{--glow-warm-a:.19;--glow-cool-a:.07}
:root[data-theme="dark"][data-daypart="morning"]{--glow-warm-a:.10;--glow-cool-a:.18}
:root[data-theme="dark"][data-daypart="afternoon"]{--glow-warm-a:.17;--glow-cool-a:.13}
:root[data-theme="dark"][data-daypart="night"]{--glow-warm-a:.26;--glow-cool-a:.08}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  margin:0;background:transparent;color:var(--ink);
  font-family:var(--font);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums lining-nums;
  min-height:100vh;padding:0 0 64px;
}
/* Luz de fondo: entra desde arriba, como por una claraboya del taller — cálida
   de noche (brasa), fría de mañana (ceniza). Fija, así el vidrio la difumina. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,var(--glow-warm) 0%,transparent 42%),
    linear-gradient(180deg,transparent 55%,var(--glow-cool) 100%);
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
[hidden]{display:none!important}   /* gana a los display:flex de los componentes (píldoras, chips) */
button{cursor:pointer}
a{color:var(--app-ink)}
:focus-visible{outline:2px solid var(--app-ink);outline-offset:2px;border-radius:4px}
.num,.mono{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.mono{font-family:var(--font-mono)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
main,main.wrap{padding-top:24px}
.stack{display:flex;flex-direction:column;gap:26px}

/* ---------- Vidrio (mixin) ---------- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-edge),var(--shadow-glass);
}
.glass-strong{
  background:var(--glass-strong);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(28px);
  backdrop-filter:saturate(var(--glass-sat)) blur(28px);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-edge),var(--shadow-3);
}

/* ---------- Barra superior (de vidrio; se queda arriba, no acompaña el scroll) ---------- */
.topbar{
  position:relative;z-index:30;
  max-width:calc(var(--wrap) + 2*var(--gutter));margin:max(10px,env(safe-area-inset-top)) auto 0;padding:0 10px;
}
.topbar>.wrap,.topbar>.bar{
  background:var(--glass);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  border:1px solid color-mix(in srgb,var(--glass-line) 55%,transparent);
  box-shadow:inset 0 1px 0 var(--glass-edge),var(--shadow-glass);
  border-radius:var(--r-xl);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  min-height:var(--topbar-h);padding:6px 10px 6px 14px;max-width:none;
}
.topbar .spacer,.topbar .grow{flex:1}
/* Marca: tile + wordmark expandido + subtítulo de la app */
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:inherit}
.brand .tile{width:28px;height:28px;flex:none;border-radius:8px;display:block;overflow:hidden}
.brand .tile svg,.brand .tile img{width:100%;height:100%;display:block}
.brand .txt{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand .mark{
  font-weight:600;font-size:14.5px;letter-spacing:.01em;
  color:var(--ink);white-space:nowrap;
}
.brand .sub{font-size:12.5px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .updated{font-size:12px;color:var(--ink-3);white-space:nowrap}

/* ---------- Botones ---------- */
.btn{
  appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:36px;padding:0 15px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-size:13px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;
  box-shadow:var(--shadow-1);cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease),transform .06s;
}
.btn:hover{background:var(--surface-2);border-color:var(--line-strong)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.primary{background:var(--app-ink);border-color:transparent;color:#fff;font-weight:600}
/* En oscuro el color de la app es claro (--app-ink-dark): el texto del primario va oscuro. */
:root[data-theme="dark"] .btn.primary,:root[data-theme="dark"] .glass .btn.primary,:root[data-theme="dark"] .topbar .btn.primary{color:#0F1114}
.btn.primary:hover{filter:brightness(1.08)}
.btn.quiet{background:transparent;border-color:transparent;box-shadow:none}
.btn.quiet:hover{background:var(--tint)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.btn.icon{width:36px;padding:0}
.btn.sm{min-height:30px;padding:0 12px;font-size:12px}
.btn svg{width:16px;height:16px;flex:none}
/* Sobre vidrio los botones son relleno translúcido, sin borde ni sombra
   (vidrio sobre vidrio no; Apple tampoco). */
.glass .btn,.topbar .btn{background:var(--tint);border-color:transparent;box-shadow:none}
.glass .btn:hover,.topbar .btn:hover{background:var(--tint-2)}
.glass .btn.primary,.topbar .btn.primary{background:var(--app-ink);color:#fff}
.btn .spin{width:13px;height:13px;border:2px solid var(--line-strong);border-top-color:var(--app-ink);border-radius:50%;display:none}
body.loading .btn .spin{display:inline-block;animation:eko-spin .7s linear infinite}
@keyframes eko-spin{to{transform:rotate(360deg)}}

/* ---------- Píldoras de estado (entorno) ----------
   PROD es el estado normal: discreto. TEST es la excepción y se nota
   (en las apps de plata, el entorno equivocado en silencio es pérdida
   de datos). DEMO en azul. */
.pill{
  display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 9px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink-2);background:var(--tint);border:1px solid transparent;
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;opacity:.85}
.pill.prod{color:var(--ink-2)}
.pill.prod::before{background:var(--app)}
.pill.test{color:var(--warn);background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.pill.demo{color:var(--info);background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 40%,transparent)}
.pill.ok{color:var(--ok);background:var(--ok-soft)}
.pill.bad{color:var(--bad);background:var(--bad-soft)}
.pill.plain::before{display:none}

/* ---------- Segmentado de vidrio (chips) ----------
   Bandeja translúcida; el segmento activo es una pastilla opaca elevada. */
.chips{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--r-pill);
  background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-edge),var(--shadow-1);max-width:100%;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  appearance:none;border:0;background:transparent;color:var(--ink-2);font:inherit;
  font-size:12.5px;font-weight:500;min-height:30px;padding:0 13px;border-radius:var(--r-pill);
  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  transition:background .15s,color .15s,box-shadow .15s;
}
.chip:hover{color:var(--ink);background:var(--tint)}
.chip[data-active="1"],.chip.active,.chip[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1)}
:root[data-theme="dark"] .chip[data-active="1"],:root[data-theme="dark"] .chip.active,:root[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--surface-3)}
.chip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.chip .dot{width:7px;height:7px;border-radius:50%;flex:none}

/* ---------- Campos ---------- */
.input,.field input,.field select,.field textarea,input.inp,select.inp{
  appearance:none;-webkit-appearance:none;width:100%;min-height:36px;padding:0 12px;
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);font:inherit;font-size:14px;
  transition:border-color .15s,box-shadow .15s;
}
.field textarea{padding:9px 12px;min-height:80px;resize:vertical}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus,input.inp:focus,select.inp:focus{
  outline:none;border-color:var(--app-ink);box-shadow:0 0 0 3px var(--ring);
}
.field{display:flex;flex-direction:column;gap:5px}
.field label,.label{font-size:12px;font-weight:600;color:var(--ink-2)}
.field .sub{font-size:11.5px;color:var(--ink-3)}
select.input,.field select{padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23706C65' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
/* Búsqueda (de vidrio, con lupa) */
.search{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-edge),var(--shadow-1);color:var(--ink-3)}
.search:focus-within{border-color:var(--app-ink);box-shadow:inset 0 1px 0 var(--glass-edge),0 0 0 3px var(--ring)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);padding:0}
.search input::placeholder{color:var(--ink-3)}
.search svg{width:15px;height:15px;flex:none}

/* Interruptor */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;min-height:36px;padding:0 14px 0 10px;border-radius:var(--r-pill);
  background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-edge),var(--shadow-1)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{position:relative;width:36px;height:22px;border-radius:var(--r-pill);background:var(--tint-2);transition:background .2s;flex:none}
.switch .thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.switch input:checked+.track{background:var(--app-ink)}
.switch input:checked+.track .thumb{transform:translateX(14px)}
.switch input:focus-visible+.track{box-shadow:0 0 0 3px var(--ring)}
.switch-label{font-size:12.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.switch-label b{color:var(--ink);font-weight:600}

/* ---------- Secciones y tarjetas ---------- */
.section-eyebrow{
  margin:0 0 10px;font-size:15px;font-weight:600;font-stretch:var(--narrow);letter-spacing:-.005em;color:var(--ink);
}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:20px}
.card>h3,.card .card-title{margin:0 0 2px;font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.card .hint{font-size:12.5px;color:var(--ink-3);margin:0 0 16px;line-height:1.5}
.card .hint b{color:var(--ink-2);font-weight:600}
.card.glass{background:var(--glass);box-shadow:inset 0 1px 0 var(--glass-edge),var(--shadow-glass);border-color:var(--glass-line)}

/* KPI */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:16px 18px}
.kpi .k{font-size:12.5px;font-weight:500;color:var(--ink-3)}
.kpi .v{font-size:32px;font-weight:500;font-stretch:var(--narrow);letter-spacing:-.01em;line-height:1.05;margin-top:6px}
.kpi .v small{font-size:14px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.kpi .foot{font-size:12px;color:var(--ink-3);margin-top:6px}
.kpi .foot b{color:var(--ink-2);font-weight:600}

/* ---------- Avisos ---------- */
.notice{
  display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--r-md);
  font-size:13px;line-height:1.45;margin-bottom:10px;
  background:var(--warn-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);
}
.notice>span:first-child{color:var(--warn);font-weight:700;flex:none}
.notice.err{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.notice.err>span:first-child{color:var(--bad)}
.notice.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.notice.ok>span:first-child{color:var(--ok)}
.notice.info{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 35%,transparent)}
.notice.info>span:first-child{color:var(--info)}
.notice b{font-weight:600}

/* ---------- Tablas de datos (opacas, siempre) ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -20px;padding:0 20px}
.eko-table{width:100%;border-collapse:collapse;font-size:13px}
.eko-table thead th{
  position:sticky;top:0;z-index:5;background:var(--surface);
  text-align:left;padding:8px 8px 9px;white-space:nowrap;user-select:none;
  font-size:12px;font-weight:600;color:var(--ink-3);
  border-bottom:1px solid var(--line-strong);
}
.eko-table thead th[data-k],.eko-table thead th[data-sort],.eko-table thead th[data-isort]{cursor:pointer}
.eko-table thead th:hover{color:var(--ink)}
.eko-table tbody td{padding:10px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.eko-table tbody tr:hover>td{background:var(--surface-2)}
.eko-table .right,.eko-table td.right,.eko-table th.right{text-align:right;font-variant-numeric:tabular-nums}
.eko-table tbody tr.tot-row>td{position:sticky;bottom:0;z-index:3;background:var(--surface);border-top:2px solid var(--line-strong);border-bottom:0;font-weight:600;padding-top:11px;color:var(--ink)}
.eko-table tbody tr.tot-row:hover>td{background:var(--surface)}
.eko-table .empty{padding:26px 10px;color:var(--ink-3);text-align:center;font-size:13px}
.empty{text-align:center;color:var(--ink-3);padding:40px 16px;font-size:14px}

/* Etiquetas pequeñas dentro de tablas */
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);vertical-align:1px;white-space:nowrap;background:var(--tint);color:var(--ink-2)}
.tag.ok{background:var(--ok-soft);color:color-mix(in srgb,var(--ok) 78%,var(--ink))}
.tag.warn{background:var(--warn-soft);color:color-mix(in srgb,var(--warn) 78%,var(--ink))}
.tag.bad{background:var(--bad-soft);color:color-mix(in srgb,var(--bad) 78%,var(--ink))}
.tag.info{background:var(--info-soft);color:color-mix(in srgb,var(--info) 78%,var(--ink))}
.tag.app{background:color-mix(in srgb,var(--app) 12%,transparent);color:var(--app-ink)}
.tag.accent{background:var(--accent-soft);color:var(--accent-ink)}

/* ---------- Hojas modales (vidrio fuerte) ---------- */
.modal-bg{
  position:fixed;inset:0;z-index:50;display:none;align-items:flex-start;justify-content:center;padding:30px 14px;overflow:auto;
  background:rgba(15,17,20,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.modal-bg.open{display:flex}
.modal{
  width:100%;max-width:640px;padding:24px;border-radius:var(--r-xl);
  background:var(--glass-strong);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(28px);backdrop-filter:saturate(var(--glass-sat)) blur(28px);
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-edge),var(--shadow-3);
}
.modal>h3,.modal .modal-title{margin:0 0 4px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.modal .hint{font-size:12.5px;color:var(--ink-3);margin:0 0 18px;line-height:1.5}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.modal-x{background:none;border:none;font-size:22px;line-height:1;color:var(--ink-3);cursor:pointer;padding:0 4px;border-radius:var(--r-sm)}
.modal-x:hover{color:var(--ink);background:var(--tint)}

/* ---------- Estados ---------- */
.skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:eko-sk 1.2s infinite;border-radius:var(--r-sm)}
@keyframes eko-sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Botón de tema (lo monta eko.js) */
.theme-btn svg{width:16px;height:16px}
.theme-btn .sun,.theme-btn .moon{display:none}
:root[data-theme="light"] .theme-btn .moon{display:block}
:root[data-theme="dark"] .theme-btn .sun{display:block}

/* ---------- Responsive ---------- */
@media (max-width:700px){
  :root{--gutter:16px}
  .topbar{padding:0 8px;margin-top:max(8px,env(safe-area-inset-top))}
  .topbar>.wrap,.topbar>.bar{flex-wrap:wrap;padding:8px 10px;gap:8px;border-radius:var(--r-lg)}
  /* Primera fila: marca + píldoras + botón de tema; el resto (acciones) pasa abajo,
     a todo el ancho, en vez de dejar el botón de tema solo en una fila. */
  .topbar>.wrap>*,.topbar>.bar>*{order:4}
  .topbar .brand{order:0;margin-right:auto}
  .topbar .pill{order:1}
  .topbar .spacer,.topbar .grow{display:none}
  .topbar .theme-btn{order:2}
  .topbar>.wrap::after,.topbar>.bar::after{content:"";order:3;flex-basis:100%;height:0}
  /* Grupos de controles (.controls, .top-actions): sus hijos pasan a ser ítems de la
     barra, así el botón de tema sube a la primera fila también en esas apps. */
  .topbar .controls,.topbar .top-actions{display:contents}
  .topbar .controls>*,.topbar .top-actions>*{order:4}
  .topbar .controls>.pill,.topbar .top-actions>.pill{order:1}
  .topbar .controls>.theme-btn,.topbar .top-actions>.theme-btn{order:2}
  /* Bandejas de chips: en el teléfono envuelven en filas en vez de scrollear con la
     barra oculta (se perdían pestañas fuera de la vista). */
  .chips{flex-wrap:wrap;overflow:visible;border-radius:var(--r-lg)}
  .chips .chip{border-radius:var(--r-md)}
  .topbar .updated{display:none}
  .brand .sub{display:none}
  .btn{min-height:44px;padding:0 15px;font-size:13px}
  .btn.icon{width:44px}
  .btn.sm{min-height:36px}
  .chip{min-height:36px;padding:0 14px}
  .input,.field input,.field select,input.inp,select.inp,.search,.switch{min-height:44px}
  main,main.wrap{padding-top:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* Reducir transparencia (ajuste del sistema): el vidrio pasa a superficie opaca. */
@media (prefers-reduced-transparency:reduce){
  :root{--glass:var(--surface);--glass-strong:var(--surface);--glass-blur:0px;--glass-sat:1}
}
/* Más contraste: tinta secundaria y líneas más marcadas. */
@media (prefers-contrast:more){
  :root{--ink-2:var(--ink);--ink-3:#4A4944;--line:rgba(25,19,0,.30);--line-strong:rgba(25,20,0,.45)}
  :root[data-theme="dark"]{--ink-3:#D2D0CC;--line:rgba(255,250,237,.32);--line-strong:rgba(255,251,237,.45)}
}