/* Invéntor — fuentes locales.
   Las tres familias son libres (SIL Open Font License 1.1) y se pueden
   redistribuir con el proyecto. Ver LICENCIAS.md en esta carpeta.
   Subconjunto latino: cubre español completo (acentos, ñ, ¿, ¡). */

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Comfortaa-400.woff2") format('woff2');
}

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Comfortaa-500.woff2") format('woff2');
}

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Comfortaa-600.woff2") format('woff2');
}

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Comfortaa-700.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-400.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-500.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-600.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-700.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-400.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-500.woff2") format('woff2');
}

/* ============================================================
   INVÉNTOR — tokens
   v1.0.0 · Inventiva y Méntor
   Los colores de marca se midieron de los archivos de logo.
   No inventes valores: si algo no está aquí, no existe en el sistema.
   ============================================================ */

/* Invéntor — fuentes locales.
   Las tres familias son libres (SIL Open Font License 1.1) y se pueden
   redistribuir con el proyecto. Ver LICENCIAS.md en esta carpeta.
   Subconjunto latino: cubre español completo (acentos, ñ, ¿, ¡). */

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Comfortaa-400.woff2") format('woff2');
}

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Comfortaa-500.woff2") format('woff2');
}

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Comfortaa-600.woff2") format('woff2');
}

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Comfortaa-700.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-400.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-500.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-600.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-700.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-400.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-500.woff2") format('woff2');
}


:root {
  /* ---------- escalas de color ---------- */
  --blue-50: #effaff;
  --blue-100: #d7f0ff;
  --blue-200: #b2dffe;
  --blue-300: #83caf9;
  --blue-400: #4baeed;
  --blue-500: #008fd4;
  --blue-600: #0079b7;
  --blue-700: #00639a;
  --blue-800: #004e7c;
  --blue-900: #003a60;
  --blue-950: #002744;

  --slate-50: #f6f9fb;
  --slate-100: #e6eaee;
  --slate-200: #cdd5dc;
  --slate-300: #b0bcc6;
  --slate-400: #8f9fac;
  --slate-500: #6e7f8d;
  --slate-600: #51616e;
  --slate-700: #414f5a;
  --slate-800: #313d47;
  --slate-900: #242c34;
  --slate-950: #161d22;

  --green-50: #f2fbf3;
  --green-100: #e0f1e3;
  --green-200: #c4e1c9;
  --green-300: #a0cea8;
  --green-400: #78b585;
  --green-500: #549864;
  --green-600: #408250;
  --green-700: #306c40;
  --green-800: #245631;
  --green-900: #1b4024;
  --green-950: #112c18;

  --amber-50: #fff7eb;
  --amber-100: #f8e9d5;
  --amber-200: #efd4af;
  --amber-300: #e2b97f;
  --amber-400: #cf9947;
  --amber-500: #b37900;
  --amber-600: #986600;
  --amber-700: #7e5300;
  --amber-800: #654200;
  --amber-900: #4d3000;
  --amber-950: #352000;

  --red-50: #fff5f4;
  --red-100: #ffe3e0;
  --red-200: #ffc9c3;
  --red-300: #faa8a0;
  --red-400: #eb827a;
  --red-500: #cf5e58;
  --red-600: #b54945;
  --red-700: #993935;
  --red-800: #7b2b28;
  --red-900: #5d201e;
  --red-950: #411513;

  /* ---------- color de marca (sólo para reproducir logos) ---------- */
  --brand-blue: #008fd4;
  --brand-slate: #51616e;
  --brand-logo-slate: #485967;
  --brand-mentor-ink: #1d1d1b;

  /* ---------- roles semánticos · tema claro ---------- */
  --ground: #f6f9fb;
  --panel: #ffffff;
  --panel-2: #e6eaee;
  --ink: #242c34;
  --ink-2: #51616e;
  --ink-3: #6e7f8d;
  --line: #cdd5dc;
  --line-strong: #b0bcc6;
  --accent: #008fd4;
  --action: #0079b7;
  --action-hover: #00639a;
  --on-action: #ffffff;
  --ok: #306c40;
  --ok-bg: #e0f1e3;
  --ok-ink: #245631;
  --warn: #7e5300;
  --warn-bg: #f8e9d5;
  --warn-ink: #654200;
  --bad: #993935;
  --bad-bg: #ffe3e0;
  --bad-ink: #7b2b28;
  --info-bg: #effaff;

  /* ---------- series de datos ---------- */
  --data-1: #0079b7;
  --data-2: #8f9fac;
  --data-3: #408250;
  --data-4: #b37900;
  --data-5: #b54945;
  --data-track: #e6eaee;

  /* ---------- tipografía ---------- */
  --font-brand: 'Comfortaa', ui-rounded, 'Trebuchet MS', system-ui, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-num: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* display-xl es token de marca/marketing: no se usa en producto. */
  --text-display-xl: 700 56px/60px var(--font-brand);
  --text-display-lg: 600 40px/44px var(--font-brand);
  --text-display-md: 600 32px/38px var(--font-brand);
  --text-heading-lg: 600 24px/32px var(--font-brand);
  --text-heading-md: 600 20px/26px var(--font-ui);
  --text-heading-sm: 600 17px/24px var(--font-ui);
  --text-body-lg: 400 18px/29px var(--font-ui);
  --text-body: 400 16px/26px var(--font-ui);
  --text-chat: 400 17px/28px var(--font-ui);
  --text-body-sm: 400 14px/22px var(--font-ui);
  --text-label: 500 13px/18px var(--font-ui);
  --text-caption: 400 13px/19px var(--font-ui);
  --text-overline: 500 12px/15px var(--font-mono);
  --text-num: 400 14px/22px var(--font-num);
  --text-mono: 400 13px/20px var(--font-mono);

  --track-display-xl: -0.03em;
  --track-display-lg: -0.025em;
  --track-display-md: -0.02em;
  --track-heading-lg: -0.015em;
  --track-heading-md: -0.015em;
  --track-heading-sm: -0.01em;
  --track-body-lg: -0.005em;
  --track-body: -0.005em;
  --track-chat: -0.005em;
  --track-body-sm: 0; /* @kind other */
  --track-label: 0.005em;
  --track-caption: 0; /* @kind other */
  --track-overline: 0.14em;
  --track-num: 0; /* @kind other */
  --track-mono: 0; /* @kind other */

  /* ---------- espaciado (retícula de 4px) ---------- */
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;

  /* ---------- esquinas ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* ---------- elevación ---------- */
  --shadow-xs: 0 1px 2px rgba(36,44,52,.06);
  --shadow-sm: 0 1px 2px rgba(36,44,52,.06), 0 2px 6px -2px rgba(36,44,52,.10);
  --shadow-md: 0 2px 4px rgba(36,44,52,.05), 0 8px 20px -6px rgba(36,44,52,.14);
  --shadow-lg: 0 4px 8px rgba(36,44,52,.05), 0 20px 40px -12px rgba(36,44,52,.20);
  --ring: 0 0 0 3px rgba(0,143,212,.30);

  /* ---------- movimiento ---------- */
  --motion-fast: 120ms; /* @kind other */
  --motion-base: 180ms; /* @kind other */
  --motion-slow: 280ms; /* @kind other */
  --ease: cubic-bezier(.2,.8,.3,1); /* @kind other */

  /* ---------- contenedores ---------- */
  --container-doc: 1080px;
  --container-app: 1280px;
  --measure: 68ch;
}

/* ============================================================
   TEMA OSCURO
   Tres estados: sin marca (sistema), [data-theme="dark"], [data-theme="light"].
   Redefine SÓLO los roles semánticos — nunca las escalas.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #161d22;
    --panel: #242c34;
    --panel-2: #313d47;
    --ink: #e6eaee;
    --ink-2: #b0bcc6;
    --ink-3: #8f9fac;
    --line: #313d47;
    --line-strong: #414f5a;
    --accent: #4baeed;
    --action: #4baeed;
    --action-hover: #83caf9;
    --on-action: #161d22;
    --ok: #78b585;
    --ok-bg: #1b4024;
    --ok-ink: #c4e1c9;
    --warn: #cf9947;
    --warn-bg: #4d3000;
    --warn-ink: #efd4af;
    --bad: #eb827a;
    --bad-bg: #5d201e;
    --bad-ink: #ffc9c3;
    --info-bg: #002744;
    --data-1: #4baeed;
    --data-2: #6e7f8d;
    --data-3: #78b585;
    --data-4: #cf9947;
    --data-5: #eb827a;
    --data-track: #313d47;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px -2px rgba(0,0,0,.5);
    --shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 8px 20px -6px rgba(0,0,0,.55);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 20px 40px -12px rgba(0,0,0,.65);
    --ring: 0 0 0 3px rgba(75,174,237,.35);
  }
}

/* Forzar tema claro cuando el sistema pide oscuro.
   Mayor especificidad que el :root del @media, así que gana sin importar el orden. */
:root[data-theme="light"] {
  --ground: #f6f9fb;
  --panel: #ffffff;
  --panel-2: #e6eaee;
  --ink: #242c34;
  --ink-2: #51616e;
  --ink-3: #6e7f8d;
  --line: #cdd5dc;
  --line-strong: #b0bcc6;
  --accent: #008fd4;
  --action: #0079b7;
  --action-hover: #00639a;
  --on-action: #ffffff;
  --ok: #306c40;
  --ok-bg: #e0f1e3;
  --ok-ink: #245631;
  --warn: #7e5300;
  --warn-bg: #f8e9d5;
  --warn-ink: #654200;
  --bad: #993935;
  --bad-bg: #ffe3e0;
  --bad-ink: #7b2b28;
  --info-bg: #effaff;

  /* ---------- series de datos ---------- */
  --data-1: #0079b7;
  --data-2: #8f9fac;
  --data-3: #408250;
  --data-4: #b37900;
  --data-5: #b54945;
  --data-track: #e6eaee;
  --shadow-xs: 0 1px 2px rgba(36,44,52,.06);
  --shadow-sm: 0 1px 2px rgba(36,44,52,.06), 0 2px 6px -2px rgba(36,44,52,.10);
  --shadow-md: 0 2px 4px rgba(36,44,52,.05), 0 8px 20px -6px rgba(36,44,52,.14);
  --shadow-lg: 0 4px 8px rgba(36,44,52,.05), 0 20px 40px -12px rgba(36,44,52,.20);
  --ring: 0 0 0 3px rgba(0,143,212,.30);
}

:root[data-theme="dark"] {
  --ground: #161d22;
  --panel: #242c34;
  --panel-2: #313d47;
  --ink: #e6eaee;
  --ink-2: #b0bcc6;
  --ink-3: #8f9fac;
  --line: #313d47;
  --line-strong: #414f5a;
  --accent: #4baeed;
  --action: #4baeed;
  --action-hover: #83caf9;
  --on-action: #161d22;
  --ok: #78b585;
  --ok-bg: #1b4024;
  --ok-ink: #c4e1c9;
  --warn: #cf9947;
  --warn-bg: #4d3000;
  --warn-ink: #efd4af;
  --bad: #eb827a;
  --bad-bg: #5d201e;
  --bad-ink: #ffc9c3;
  --info-bg: #002744;
  --data-1: #4baeed;
  --data-2: #6e7f8d;
  --data-3: #78b585;
  --data-4: #cf9947;
  --data-5: #eb827a;
  --data-track: #313d47;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px -2px rgba(0,0,0,.5);
  --shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 8px 20px -6px rgba(0,0,0,.55);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 20px 40px -12px rgba(0,0,0,.65);
  --ring: 0 0 0 3px rgba(75,174,237,.35);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: var(--text-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
}

/* Comfortaa nunca baja de heading-lg (24px). Ver DESIGN.md § Tipografía. */
h1 { font: var(--text-display-lg); letter-spacing: var(--track-display-lg); margin: 0; text-wrap: balance; }
h2 { font: var(--text-display-md); letter-spacing: var(--track-display-md); margin: 0; text-wrap: balance; }
h3 { font: var(--text-heading-lg); letter-spacing: var(--track-heading-lg); margin: 0; text-wrap: balance; }
h4 { font: var(--text-heading-md); letter-spacing: var(--track-heading-md); margin: 0; }
h5 { font: var(--text-heading-sm); letter-spacing: var(--track-heading-sm); margin: 0; }

p { margin: 0; max-width: var(--measure); }

code, kbd, samp { font-family: var(--font-mono); font-size: .875em; }

/* Toda cifra que viva en columna. Obligatorio: ver DESIGN.md § Reglas. */
.num, td.num, .tabular {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

:focus-visible { outline: none; box-shadow: var(--ring); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* INVÉNTOR — clases de componente.
   Los valores salen de tokens/tokens.css. Ningún literal nuevo: ver DESIGN.md. */

/* ---------- Botón ---------- */
.btn{font-family:var(--font-ui);font-weight:600;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);line-height:1;transition:background var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-lg{font-size:15px;padding:13px 22px;min-height:44px}
.btn-md{font-size:14px;padding:10px 17px}
@media (max-width:768px){.btn-md,.btn-sm{min-height:44px;padding-top:11px;padding-bottom:11px}}
.btn-sm{font-size:13px;padding:7px 13px}
.btn-primary{background:var(--action);color:var(--on-action)}
.btn-primary:hover{background:var(--action-hover)}
.btn-secondary{background:var(--panel);color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--panel-2)}
.btn-ghost{background:transparent;color:var(--action)}
.btn-ghost:hover{background:var(--info-bg)}
.btn-danger{background:transparent;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.btn-danger:hover{background:var(--bad-bg)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-block{width:100%}

/* ---------- Campo de captura ---------- */
.field{display:block}
.field+.field{margin-top:var(--space-5)}
.field>label{display:block;font:var(--text-label);letter-spacing:var(--track-label);color:var(--ink-2);margin-bottom:var(--space-3)}
.field input,.field select,.field textarea{width:100%;font-family:var(--font-ui);font-size:15px;color:var(--ink);background:var(--ground);border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:10px 12px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.field .hint{font:var(--text-caption);color:var(--ink-3);margin:var(--space-2) 0 0}
.field.err input,.field.err select,.field.err textarea{border-color:var(--bad)}
.field.err .hint{color:var(--bad)}

/* ---------- Etiqueta de estado ---------- */
.tag{font-family:var(--font-ui);font-size:13px;font-weight:600;padding:4px 11px;border-radius:var(--radius-full);display:inline-flex;align-items:center;gap:6px}
.tag.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.tag.ok{background:var(--ok-bg);color:var(--ok-ink)}
.tag.warn{background:var(--warn-bg);color:var(--warn-ink)}
.tag.bad{background:var(--bad-bg);color:var(--bad-ink)}
.tag.neutral{background:var(--panel-2);color:var(--ink-2)}

/* ---------- Aviso ---------- */
.alert{display:flex;gap:var(--space-4);padding:14px 16px;border-radius:var(--radius-lg);font:var(--text-body-sm);border:1px solid transparent;align-items:stretch}
.alert strong{display:block;font-weight:600;margin-bottom:2px}
.alert .bar{width:3px;border-radius:3px;flex:none}
.alert.info{background:var(--info-bg);color:var(--ink);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.alert.info .bar{background:var(--accent)}
.alert.warn{background:var(--warn-bg);color:var(--warn-ink)}
.alert.warn .bar{background:var(--warn)}
.alert.bad{background:var(--bad-bg);color:var(--bad-ink)}
.alert.bad .bar{background:var(--bad)}

/* ---------- Tabla ---------- */
.ds-table-scroll{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--panel)}
.ds-table{border-collapse:collapse;width:100%}
.ds-table th,.ds-table td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);font:var(--text-body-sm)}
.ds-table th{font:var(--text-overline);letter-spacing:var(--track-overline);text-transform:uppercase;color:var(--ink-3);background:var(--panel-2);white-space:nowrap}
.ds-table tr:last-child td{border-bottom:0}

/* ---------- Conversación ---------- */
.chat{background:var(--ground);border:1px solid var(--line);border-radius:var(--radius-xl);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.bub{max-width:78%;font:var(--text-chat);letter-spacing:var(--track-chat);padding:12px 16px;border-radius:var(--radius-2xl)}
.bub.them{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:8px;align-self:flex-start;box-shadow:var(--shadow-xs)}
.bub.me{background:var(--action);color:var(--on-action);border-bottom-right-radius:8px;align-self:flex-end}
.quick{display:flex;gap:var(--space-3);flex-wrap:wrap;align-self:flex-start}
.quick button{font-family:var(--font-ui);font-size:14px;font-weight:500;color:var(--action);background:var(--panel);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:var(--radius-full);padding:7px 14px;cursor:pointer}
.quick button:hover{background:var(--info-bg)}
.doc{display:flex;gap:var(--space-4);align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;align-self:flex-start;box-shadow:var(--shadow-xs);text-align:left}
.doc .ico{width:40px;height:40px;border-radius:var(--radius-md);background:var(--info-bg);display:grid;place-items:center;color:var(--action);font:var(--text-mono);font-size:10px;flex:none}
.doc h4{font:var(--text-heading-sm);letter-spacing:var(--track-heading-sm);margin:0;font-size:15px}
.doc p{font:var(--text-caption);color:var(--ink-3);margin:0}

/* ---------- Iconos ---------- */
.ds-icon{display:inline-block;vertical-align:middle;flex:none;color:currentColor}

/* ---------- Esqueleto de carga ---------- */
.skel{background:var(--panel-2);border-radius:var(--radius-sm);position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--panel) 60%,transparent),transparent);transform:translateX(-100%);animation:skel-sweep 1.4s var(--ease) infinite}
.skel-stack{display:flex;flex-direction:column;gap:var(--space-3)}
.skel-stack .skel:last-child{width:62%}
@keyframes skel-sweep{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none}}

/* ---------- Estado vacío ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4);padding:var(--space-10) var(--space-7);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
.empty .glyph{width:56px;height:56px;border-radius:var(--radius-full);background:var(--info-bg);color:var(--action);display:grid;place-items:center}
.empty h4{font:var(--text-heading-md);letter-spacing:var(--track-heading-md);margin:0;color:var(--ink)}
.empty p{font:var(--text-body-sm);color:var(--ink-2);margin:0;max-width:44ch}

/* ---------- Barra superior ---------- */
.appbar{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--panel);border-bottom:1px solid var(--line);min-height:56px}
.appbar .titles{flex:1;min-width:0}
.appbar h1{font:var(--text-heading-md);letter-spacing:var(--track-heading-md);margin:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar p{font:var(--text-caption);color:var(--ink-3);margin:0}
.appbar .slot{display:flex;align-items:center;gap:var(--space-3)}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink-2);border-radius:var(--radius-full);cursor:pointer}
.iconbtn:hover{background:var(--panel-2);color:var(--ink)}
.iconbtn:focus-visible{outline:none;box-shadow:var(--ring)}

/* ---------- Barra de escritura ---------- */
.composer{display:flex;align-items:flex-end;gap:var(--space-3);padding:var(--space-4);background:var(--panel);border-top:1px solid var(--line)}
.composer textarea{flex:1;font:var(--text-chat);letter-spacing:var(--track-chat);color:var(--ink);background:var(--ground);border:1px solid var(--line-strong);border-radius:var(--radius-xl);padding:11px 15px;resize:none;max-height:140px;min-height:46px}
.composer textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.composer .send{width:46px;height:46px;flex:none;border:0;border-radius:var(--radius-full);background:var(--action);color:var(--on-action);display:grid;place-items:center;cursor:pointer}
.composer .send:hover{background:var(--action-hover)}
.composer .send:focus-visible{outline:none;box-shadow:var(--ring)}
.composer .send[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Cifra destacada ---------- */
.stat{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
.stat .k{font:var(--text-label);letter-spacing:var(--track-label);color:var(--ink-3);margin:0}
.stat .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:28px;line-height:34px;font-weight:500;color:var(--ink);margin:0;letter-spacing:-.01em}
.stat .v .unit{font-size:15px;font-weight:400;color:var(--ink-3);margin-left:4px}
.stat .note{font:var(--text-caption);color:var(--ink-2);margin:0;display:flex;align-items:center;gap:6px}
.stat .note.up{color:var(--ok)}
.stat .note.down{color:var(--bad)}

/* ---------- Barras ---------- */
.bars{display:flex;flex-direction:column;gap:var(--space-5);margin:0}
.bars .bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3) var(--space-5);align-items:baseline}
.bars .bar dt{font:var(--text-body-sm);color:var(--ink);min-width:0;overflow-wrap:anywhere}
.bars .bar dd{margin:0;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:14px;line-height:22px;color:var(--ink-2);text-align:right;white-space:nowrap}
.bars .track{grid-column:1/-1;height:10px;border-radius:var(--radius-full);background:var(--data-track);overflow:hidden}
.bars .fill{display:block;height:100%;border-radius:var(--radius-full);background:var(--data-1)}
.bars .bar.s2 .fill{background:var(--data-2)}
.bars .bar.s3 .fill{background:var(--data-3)}
.bars .bar.s4 .fill{background:var(--data-4)}
.bars .bar.s5 .fill{background:var(--data-5)}

/* ---------- Medidor de avance ---------- */
.meter{display:flex;flex-direction:column;gap:var(--space-3)}
.meter .head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4)}
.meter .head span:first-child{font:var(--text-label);letter-spacing:var(--track-label);color:var(--ink-2)}
.meter .head span:last-child{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink)}
.meter .track{height:10px;border-radius:var(--radius-full);background:var(--data-track);overflow:hidden}
.meter .fill{display:block;height:100%;border-radius:var(--radius-full);background:var(--data-1)}
.meter.ok .fill{background:var(--ok)}
.meter.warn .fill{background:var(--warn)}
.meter.bad .fill{background:var(--bad)}

/* ---------- Diálogo ---------- */
.scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--slate-950) 55%,transparent);display:grid;place-items:end center;padding:0;z-index:40}
@media (min-width:769px){.scrim{place-items:center;padding:var(--space-8)}}
.dialog{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:88vh;overflow:auto;padding:var(--space-7)}
@media (min-width:769px){.dialog{border-radius:var(--radius-xl)}}
.dialog header{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-5)}
.dialog h3{font:var(--text-heading-lg);letter-spacing:var(--track-heading-lg);margin:0;flex:1}
.dialog .body{font:var(--text-body);letter-spacing:var(--track-body);color:var(--ink-2)}
.dialog footer{display:flex;gap:var(--space-4);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--space-7)}
@media (max-width:768px){.dialog footer{flex-direction:column-reverse}.dialog footer>*{width:100%}}

/* ---------- Menú desplegable ---------- */
.menu-wrap{position:relative;display:inline-block}
.menu{position:absolute;top:calc(100% + var(--space-3));right:0;min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-2);z-index:30}
.menu button{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:44px;padding:0 var(--space-4);border:0;background:transparent;border-radius:var(--radius-md);font:var(--text-body-sm);color:var(--ink);text-align:left;cursor:pointer}
.menu button:hover{background:var(--panel-2)}
.menu button:focus-visible{outline:none;box-shadow:var(--ring)}
.menu button.bad{color:var(--bad)}
.menu hr{border:0;border-top:1px solid var(--line);margin:var(--space-2) 0}

/* INVÉNTOR — hoja global del sistema.
   Fuente de verdad de los valores: DESIGN.md
   Los tokens viven en tokens/tokens.css; las clases de componente en components.css. */
/* ============================================================
   INVÉNTOR — tokens
   v1.0.0 · Inventiva y Méntor
   Los colores de marca se midieron de los archivos de logo.
   No inventes valores: si algo no está aquí, no existe en el sistema.
   ============================================================ */

/* Invéntor — fuentes locales.
   Las tres familias son libres (SIL Open Font License 1.1) y se pueden
   redistribuir con el proyecto. Ver LICENCIAS.md en esta carpeta.
   Subconjunto latino: cubre español completo (acentos, ñ, ¿, ¡). */

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Comfortaa-400.woff2") format('woff2');
}

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Comfortaa-500.woff2") format('woff2');
}

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Comfortaa-600.woff2") format('woff2');
}

@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Comfortaa-700.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-400.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-500.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-600.woff2") format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-700.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-400.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-500.woff2") format('woff2');
}


:root {
  /* ---------- escalas de color ---------- */
  --blue-50: #effaff;
  --blue-100: #d7f0ff;
  --blue-200: #b2dffe;
  --blue-300: #83caf9;
  --blue-400: #4baeed;
  --blue-500: #008fd4;
  --blue-600: #0079b7;
  --blue-700: #00639a;
  --blue-800: #004e7c;
  --blue-900: #003a60;
  --blue-950: #002744;

  --slate-50: #f6f9fb;
  --slate-100: #e6eaee;
  --slate-200: #cdd5dc;
  --slate-300: #b0bcc6;
  --slate-400: #8f9fac;
  --slate-500: #6e7f8d;
  --slate-600: #51616e;
  --slate-700: #414f5a;
  --slate-800: #313d47;
  --slate-900: #242c34;
  --slate-950: #161d22;

  --green-50: #f2fbf3;
  --green-100: #e0f1e3;
  --green-200: #c4e1c9;
  --green-300: #a0cea8;
  --green-400: #78b585;
  --green-500: #549864;
  --green-600: #408250;
  --green-700: #306c40;
  --green-800: #245631;
  --green-900: #1b4024;
  --green-950: #112c18;

  --amber-50: #fff7eb;
  --amber-100: #f8e9d5;
  --amber-200: #efd4af;
  --amber-300: #e2b97f;
  --amber-400: #cf9947;
  --amber-500: #b37900;
  --amber-600: #986600;
  --amber-700: #7e5300;
  --amber-800: #654200;
  --amber-900: #4d3000;
  --amber-950: #352000;

  --red-50: #fff5f4;
  --red-100: #ffe3e0;
  --red-200: #ffc9c3;
  --red-300: #faa8a0;
  --red-400: #eb827a;
  --red-500: #cf5e58;
  --red-600: #b54945;
  --red-700: #993935;
  --red-800: #7b2b28;
  --red-900: #5d201e;
  --red-950: #411513;

  /* ---------- color de marca (sólo para reproducir logos) ---------- */
  --brand-blue: #008fd4;
  --brand-slate: #51616e;
  --brand-logo-slate: #485967;
  --brand-mentor-ink: #1d1d1b;

  /* ---------- roles semánticos · tema claro ---------- */
  --ground: #f6f9fb;
  --panel: #ffffff;
  --panel-2: #e6eaee;
  --ink: #242c34;
  --ink-2: #51616e;
  --ink-3: #6e7f8d;
  --line: #cdd5dc;
  --line-strong: #b0bcc6;
  --accent: #008fd4;
  --action: #0079b7;
  --action-hover: #00639a;
  --on-action: #ffffff;
  --ok: #306c40;
  --ok-bg: #e0f1e3;
  --ok-ink: #245631;
  --warn: #7e5300;
  --warn-bg: #f8e9d5;
  --warn-ink: #654200;
  --bad: #993935;
  --bad-bg: #ffe3e0;
  --bad-ink: #7b2b28;
  --info-bg: #effaff;

  /* ---------- series de datos ---------- */
  --data-1: #0079b7;
  --data-2: #8f9fac;
  --data-3: #408250;
  --data-4: #b37900;
  --data-5: #b54945;
  --data-track: #e6eaee;

  /* ---------- tipografía ---------- */
  --font-brand: 'Comfortaa', ui-rounded, 'Trebuchet MS', system-ui, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-num: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* display-xl es token de marca/marketing: no se usa en producto. */
  --text-display-xl: 700 56px/60px var(--font-brand);
  --text-display-lg: 600 40px/44px var(--font-brand);
  --text-display-md: 600 32px/38px var(--font-brand);
  --text-heading-lg: 600 24px/32px var(--font-brand);
  --text-heading-md: 600 20px/26px var(--font-ui);
  --text-heading-sm: 600 17px/24px var(--font-ui);
  --text-body-lg: 400 18px/29px var(--font-ui);
  --text-body: 400 16px/26px var(--font-ui);
  --text-chat: 400 17px/28px var(--font-ui);
  --text-body-sm: 400 14px/22px var(--font-ui);
  --text-label: 500 13px/18px var(--font-ui);
  --text-caption: 400 13px/19px var(--font-ui);
  --text-overline: 500 12px/15px var(--font-mono);
  --text-num: 400 14px/22px var(--font-num);
  --text-mono: 400 13px/20px var(--font-mono);

  --track-display-xl: -0.03em;
  --track-display-lg: -0.025em;
  --track-display-md: -0.02em;
  --track-heading-lg: -0.015em;
  --track-heading-md: -0.015em;
  --track-heading-sm: -0.01em;
  --track-body-lg: -0.005em;
  --track-body: -0.005em;
  --track-chat: -0.005em;
  --track-body-sm: 0; /* @kind other */
  --track-label: 0.005em;
  --track-caption: 0; /* @kind other */
  --track-overline: 0.14em;
  --track-num: 0; /* @kind other */
  --track-mono: 0; /* @kind other */

  /* ---------- espaciado (retícula de 4px) ---------- */
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;

  /* ---------- esquinas ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* ---------- elevación ---------- */
  --shadow-xs: 0 1px 2px rgba(36,44,52,.06);
  --shadow-sm: 0 1px 2px rgba(36,44,52,.06), 0 2px 6px -2px rgba(36,44,52,.10);
  --shadow-md: 0 2px 4px rgba(36,44,52,.05), 0 8px 20px -6px rgba(36,44,52,.14);
  --shadow-lg: 0 4px 8px rgba(36,44,52,.05), 0 20px 40px -12px rgba(36,44,52,.20);
  --ring: 0 0 0 3px rgba(0,143,212,.30);

  /* ---------- movimiento ---------- */
  --motion-fast: 120ms; /* @kind other */
  --motion-base: 180ms; /* @kind other */
  --motion-slow: 280ms; /* @kind other */
  --ease: cubic-bezier(.2,.8,.3,1); /* @kind other */

  /* ---------- contenedores ---------- */
  --container-doc: 1080px;
  --container-app: 1280px;
  --measure: 68ch;
}

/* ============================================================
   TEMA OSCURO
   Tres estados: sin marca (sistema), [data-theme="dark"], [data-theme="light"].
   Redefine SÓLO los roles semánticos — nunca las escalas.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #161d22;
    --panel: #242c34;
    --panel-2: #313d47;
    --ink: #e6eaee;
    --ink-2: #b0bcc6;
    --ink-3: #8f9fac;
    --line: #313d47;
    --line-strong: #414f5a;
    --accent: #4baeed;
    --action: #4baeed;
    --action-hover: #83caf9;
    --on-action: #161d22;
    --ok: #78b585;
    --ok-bg: #1b4024;
    --ok-ink: #c4e1c9;
    --warn: #cf9947;
    --warn-bg: #4d3000;
    --warn-ink: #efd4af;
    --bad: #eb827a;
    --bad-bg: #5d201e;
    --bad-ink: #ffc9c3;
    --info-bg: #002744;
    --data-1: #4baeed;
    --data-2: #6e7f8d;
    --data-3: #78b585;
    --data-4: #cf9947;
    --data-5: #eb827a;
    --data-track: #313d47;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px -2px rgba(0,0,0,.5);
    --shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 8px 20px -6px rgba(0,0,0,.55);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 20px 40px -12px rgba(0,0,0,.65);
    --ring: 0 0 0 3px rgba(75,174,237,.35);
  }
}

/* Forzar tema claro cuando el sistema pide oscuro.
   Mayor especificidad que el :root del @media, así que gana sin importar el orden. */
:root[data-theme="light"] {
  --ground: #f6f9fb;
  --panel: #ffffff;
  --panel-2: #e6eaee;
  --ink: #242c34;
  --ink-2: #51616e;
  --ink-3: #6e7f8d;
  --line: #cdd5dc;
  --line-strong: #b0bcc6;
  --accent: #008fd4;
  --action: #0079b7;
  --action-hover: #00639a;
  --on-action: #ffffff;
  --ok: #306c40;
  --ok-bg: #e0f1e3;
  --ok-ink: #245631;
  --warn: #7e5300;
  --warn-bg: #f8e9d5;
  --warn-ink: #654200;
  --bad: #993935;
  --bad-bg: #ffe3e0;
  --bad-ink: #7b2b28;
  --info-bg: #effaff;

  /* ---------- series de datos ---------- */
  --data-1: #0079b7;
  --data-2: #8f9fac;
  --data-3: #408250;
  --data-4: #b37900;
  --data-5: #b54945;
  --data-track: #e6eaee;
  --shadow-xs: 0 1px 2px rgba(36,44,52,.06);
  --shadow-sm: 0 1px 2px rgba(36,44,52,.06), 0 2px 6px -2px rgba(36,44,52,.10);
  --shadow-md: 0 2px 4px rgba(36,44,52,.05), 0 8px 20px -6px rgba(36,44,52,.14);
  --shadow-lg: 0 4px 8px rgba(36,44,52,.05), 0 20px 40px -12px rgba(36,44,52,.20);
  --ring: 0 0 0 3px rgba(0,143,212,.30);
}

:root[data-theme="dark"] {
  --ground: #161d22;
  --panel: #242c34;
  --panel-2: #313d47;
  --ink: #e6eaee;
  --ink-2: #b0bcc6;
  --ink-3: #8f9fac;
  --line: #313d47;
  --line-strong: #414f5a;
  --accent: #4baeed;
  --action: #4baeed;
  --action-hover: #83caf9;
  --on-action: #161d22;
  --ok: #78b585;
  --ok-bg: #1b4024;
  --ok-ink: #c4e1c9;
  --warn: #cf9947;
  --warn-bg: #4d3000;
  --warn-ink: #efd4af;
  --bad: #eb827a;
  --bad-bg: #5d201e;
  --bad-ink: #ffc9c3;
  --info-bg: #002744;
  --data-1: #4baeed;
  --data-2: #6e7f8d;
  --data-3: #78b585;
  --data-4: #cf9947;
  --data-5: #eb827a;
  --data-track: #313d47;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px -2px rgba(0,0,0,.5);
  --shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 8px 20px -6px rgba(0,0,0,.55);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 20px 40px -12px rgba(0,0,0,.65);
  --ring: 0 0 0 3px rgba(75,174,237,.35);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: var(--text-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
}

/* Comfortaa nunca baja de heading-lg (24px). Ver DESIGN.md § Tipografía. */
h1 { font: var(--text-display-lg); letter-spacing: var(--track-display-lg); margin: 0; text-wrap: balance; }
h2 { font: var(--text-display-md); letter-spacing: var(--track-display-md); margin: 0; text-wrap: balance; }
h3 { font: var(--text-heading-lg); letter-spacing: var(--track-heading-lg); margin: 0; text-wrap: balance; }
h4 { font: var(--text-heading-md); letter-spacing: var(--track-heading-md); margin: 0; }
h5 { font: var(--text-heading-sm); letter-spacing: var(--track-heading-sm); margin: 0; }

p { margin: 0; max-width: var(--measure); }

code, kbd, samp { font-family: var(--font-mono); font-size: .875em; }

/* Toda cifra que viva en columna. Obligatorio: ver DESIGN.md § Reglas. */
.num, td.num, .tabular {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

:focus-visible { outline: none; box-shadow: var(--ring); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* INVÉNTOR — clases de componente.
   Los valores salen de tokens/tokens.css. Ningún literal nuevo: ver DESIGN.md. */

/* ---------- Botón ---------- */
.btn{font-family:var(--font-ui);font-weight:600;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);line-height:1;transition:background var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-lg{font-size:15px;padding:13px 22px;min-height:44px}
.btn-md{font-size:14px;padding:10px 17px}
@media (max-width:768px){.btn-md,.btn-sm{min-height:44px;padding-top:11px;padding-bottom:11px}}
.btn-sm{font-size:13px;padding:7px 13px}
.btn-primary{background:var(--action);color:var(--on-action)}
.btn-primary:hover{background:var(--action-hover)}
.btn-secondary{background:var(--panel);color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--panel-2)}
.btn-ghost{background:transparent;color:var(--action)}
.btn-ghost:hover{background:var(--info-bg)}
.btn-danger{background:transparent;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.btn-danger:hover{background:var(--bad-bg)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-block{width:100%}

/* ---------- Campo de captura ---------- */
.field{display:block}
.field+.field{margin-top:var(--space-5)}
.field>label{display:block;font:var(--text-label);letter-spacing:var(--track-label);color:var(--ink-2);margin-bottom:var(--space-3)}
.field input,.field select,.field textarea{width:100%;font-family:var(--font-ui);font-size:15px;color:var(--ink);background:var(--ground);border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:10px 12px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.field .hint{font:var(--text-caption);color:var(--ink-3);margin:var(--space-2) 0 0}
.field.err input,.field.err select,.field.err textarea{border-color:var(--bad)}
.field.err .hint{color:var(--bad)}

/* ---------- Etiqueta de estado ---------- */
.tag{font-family:var(--font-ui);font-size:13px;font-weight:600;padding:4px 11px;border-radius:var(--radius-full);display:inline-flex;align-items:center;gap:6px}
.tag.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.tag.ok{background:var(--ok-bg);color:var(--ok-ink)}
.tag.warn{background:var(--warn-bg);color:var(--warn-ink)}
.tag.bad{background:var(--bad-bg);color:var(--bad-ink)}
.tag.neutral{background:var(--panel-2);color:var(--ink-2)}

/* ---------- Aviso ---------- */
.alert{display:flex;gap:var(--space-4);padding:14px 16px;border-radius:var(--radius-lg);font:var(--text-body-sm);border:1px solid transparent;align-items:stretch}
.alert strong{display:block;font-weight:600;margin-bottom:2px}
.alert .bar{width:3px;border-radius:3px;flex:none}
.alert.info{background:var(--info-bg);color:var(--ink);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.alert.info .bar{background:var(--accent)}
.alert.warn{background:var(--warn-bg);color:var(--warn-ink)}
.alert.warn .bar{background:var(--warn)}
.alert.bad{background:var(--bad-bg);color:var(--bad-ink)}
.alert.bad .bar{background:var(--bad)}

/* ---------- Tabla ---------- */
.ds-table-scroll{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--panel)}
.ds-table{border-collapse:collapse;width:100%}
.ds-table th,.ds-table td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);font:var(--text-body-sm)}
.ds-table th{font:var(--text-overline);letter-spacing:var(--track-overline);text-transform:uppercase;color:var(--ink-3);background:var(--panel-2);white-space:nowrap}
.ds-table tr:last-child td{border-bottom:0}

/* ---------- Conversación ---------- */
.chat{background:var(--ground);border:1px solid var(--line);border-radius:var(--radius-xl);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.bub{max-width:78%;font:var(--text-chat);letter-spacing:var(--track-chat);padding:12px 16px;border-radius:var(--radius-2xl)}
.bub.them{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:8px;align-self:flex-start;box-shadow:var(--shadow-xs)}
.bub.me{background:var(--action);color:var(--on-action);border-bottom-right-radius:8px;align-self:flex-end}
.quick{display:flex;gap:var(--space-3);flex-wrap:wrap;align-self:flex-start}
.quick button{font-family:var(--font-ui);font-size:14px;font-weight:500;color:var(--action);background:var(--panel);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:var(--radius-full);padding:7px 14px;cursor:pointer}
.quick button:hover{background:var(--info-bg)}
.doc{display:flex;gap:var(--space-4);align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;align-self:flex-start;box-shadow:var(--shadow-xs);text-align:left}
.doc .ico{width:40px;height:40px;border-radius:var(--radius-md);background:var(--info-bg);display:grid;place-items:center;color:var(--action);font:var(--text-mono);font-size:10px;flex:none}
.doc h4{font:var(--text-heading-sm);letter-spacing:var(--track-heading-sm);margin:0;font-size:15px}
.doc p{font:var(--text-caption);color:var(--ink-3);margin:0}

/* ---------- Iconos ---------- */
.ds-icon{display:inline-block;vertical-align:middle;flex:none;color:currentColor}

/* ---------- Esqueleto de carga ---------- */
.skel{background:var(--panel-2);border-radius:var(--radius-sm);position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--panel) 60%,transparent),transparent);transform:translateX(-100%);animation:skel-sweep 1.4s var(--ease) infinite}
.skel-stack{display:flex;flex-direction:column;gap:var(--space-3)}
.skel-stack .skel:last-child{width:62%}
@keyframes skel-sweep{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none}}

/* ---------- Estado vacío ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4);padding:var(--space-10) var(--space-7);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
.empty .glyph{width:56px;height:56px;border-radius:var(--radius-full);background:var(--info-bg);color:var(--action);display:grid;place-items:center}
.empty h4{font:var(--text-heading-md);letter-spacing:var(--track-heading-md);margin:0;color:var(--ink)}
.empty p{font:var(--text-body-sm);color:var(--ink-2);margin:0;max-width:44ch}

/* ---------- Barra superior ---------- */
.appbar{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--panel);border-bottom:1px solid var(--line);min-height:56px}
.appbar .titles{flex:1;min-width:0}
.appbar h1{font:var(--text-heading-md);letter-spacing:var(--track-heading-md);margin:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar p{font:var(--text-caption);color:var(--ink-3);margin:0}
.appbar .slot{display:flex;align-items:center;gap:var(--space-3)}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink-2);border-radius:var(--radius-full);cursor:pointer}
.iconbtn:hover{background:var(--panel-2);color:var(--ink)}
.iconbtn:focus-visible{outline:none;box-shadow:var(--ring)}

/* ---------- Barra de escritura ---------- */
.composer{display:flex;align-items:flex-end;gap:var(--space-3);padding:var(--space-4);background:var(--panel);border-top:1px solid var(--line)}
.composer textarea{flex:1;font:var(--text-chat);letter-spacing:var(--track-chat);color:var(--ink);background:var(--ground);border:1px solid var(--line-strong);border-radius:var(--radius-xl);padding:11px 15px;resize:none;max-height:140px;min-height:46px}
.composer textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.composer .send{width:46px;height:46px;flex:none;border:0;border-radius:var(--radius-full);background:var(--action);color:var(--on-action);display:grid;place-items:center;cursor:pointer}
.composer .send:hover{background:var(--action-hover)}
.composer .send:focus-visible{outline:none;box-shadow:var(--ring)}
.composer .send[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Cifra destacada ---------- */
.stat{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
.stat .k{font:var(--text-label);letter-spacing:var(--track-label);color:var(--ink-3);margin:0}
.stat .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:28px;line-height:34px;font-weight:500;color:var(--ink);margin:0;letter-spacing:-.01em}
.stat .v .unit{font-size:15px;font-weight:400;color:var(--ink-3);margin-left:4px}
.stat .note{font:var(--text-caption);color:var(--ink-2);margin:0;display:flex;align-items:center;gap:6px}
.stat .note.up{color:var(--ok)}
.stat .note.down{color:var(--bad)}

/* ---------- Barras ---------- */
.bars{display:flex;flex-direction:column;gap:var(--space-5);margin:0}
.bars .bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3) var(--space-5);align-items:baseline}
.bars .bar dt{font:var(--text-body-sm);color:var(--ink);min-width:0;overflow-wrap:anywhere}
.bars .bar dd{margin:0;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:14px;line-height:22px;color:var(--ink-2);text-align:right;white-space:nowrap}
.bars .track{grid-column:1/-1;height:10px;border-radius:var(--radius-full);background:var(--data-track);overflow:hidden}
.bars .fill{display:block;height:100%;border-radius:var(--radius-full);background:var(--data-1)}
.bars .bar.s2 .fill{background:var(--data-2)}
.bars .bar.s3 .fill{background:var(--data-3)}
.bars .bar.s4 .fill{background:var(--data-4)}
.bars .bar.s5 .fill{background:var(--data-5)}

/* ---------- Medidor de avance ---------- */
.meter{display:flex;flex-direction:column;gap:var(--space-3)}
.meter .head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4)}
.meter .head span:first-child{font:var(--text-label);letter-spacing:var(--track-label);color:var(--ink-2)}
.meter .head span:last-child{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink)}
.meter .track{height:10px;border-radius:var(--radius-full);background:var(--data-track);overflow:hidden}
.meter .fill{display:block;height:100%;border-radius:var(--radius-full);background:var(--data-1)}
.meter.ok .fill{background:var(--ok)}
.meter.warn .fill{background:var(--warn)}
.meter.bad .fill{background:var(--bad)}

/* ---------- Diálogo ---------- */
.scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--slate-950) 55%,transparent);display:grid;place-items:end center;padding:0;z-index:40}
@media (min-width:769px){.scrim{place-items:center;padding:var(--space-8)}}
.dialog{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:88vh;overflow:auto;padding:var(--space-7)}
@media (min-width:769px){.dialog{border-radius:var(--radius-xl)}}
.dialog header{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-5)}
.dialog h3{font:var(--text-heading-lg);letter-spacing:var(--track-heading-lg);margin:0;flex:1}
.dialog .body{font:var(--text-body);letter-spacing:var(--track-body);color:var(--ink-2)}
.dialog footer{display:flex;gap:var(--space-4);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--space-7)}
@media (max-width:768px){.dialog footer{flex-direction:column-reverse}.dialog footer>*{width:100%}}

/* ---------- Menú desplegable ---------- */
.menu-wrap{position:relative;display:inline-block}
.menu{position:absolute;top:calc(100% + var(--space-3));right:0;min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-2);z-index:30}
.menu button{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:44px;padding:0 var(--space-4);border:0;background:transparent;border-radius:var(--radius-md);font:var(--text-body-sm);color:var(--ink);text-align:left;cursor:pointer}
.menu button:hover{background:var(--panel-2)}
.menu button:focus-visible{outline:none;box-shadow:var(--ring)}
.menu button.bad{color:var(--bad)}
.menu hr{border:0;border-top:1px solid var(--line);margin:var(--space-2) 0}