/* ─────────────────────────────────────────────────────────────────
   Sistema visual del Espacio BDR — "Hairline".
   Un solo archivo para el lanzador y todas las apps: si algo se ve
   distinto entre dos pantallas, es un bug, no una decisión.

   Tres reglas que sostienen el resto:
   1. Tipografía Inter a 13/20, dos pesos de trabajo (400 cuerpo, 500
      interfaz) y 600 reservado a títulos y cifras, siempre tabulares.
   2. El color de cada app vive solo en el cuadrado de su icono
      (--app-hue). La acción, el foco y la selección son siempre --acc.
   3. La estructura se hace con filetes opacos de 1px. La sombra queda
      reservada a lo que flota: el modal y el toast.

   El foco vive al final, en §FOCO: va después de los hover para que
   nunca lo tape un hover con la misma especificidad.
   ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* superficies: lienzo + escalera de tres pasos, todo opaco */
  --bg:        #f7f8f8;   /* lienzo de página y nav */
  --bg-deep:   #f0f1f2;   /* alias antiguo: solo auth-wall */
  --surface:   #ffffff;   /* paneles, tarjetas, tabla, inputs, modal, toast */
  --surf2:     #f3f4f5;   /* cabecera de grupo, detalle expandido, pie de modal */
  --surf3:     #ebecee;   /* pestaña activa, pista de barras, kbd, contadores, disabled */

  /* filetes: opacos, nunca rgba (los paneles apilados no oscurecen) */
  --line:      #e6e7e9;   /* divisores, anillo de paneles/inputs/botón secundario */
  --line-2:    #d0d4da;   /* anillo en hover de inputs y botones */
  --hover:     rgba(20,22,30,.035); /* ÚNICO hover de fondo: filas, items, fantasma */
  --active:    rgba(20,22,30,.07);  /* pressed */

  /* tinta: cuatro niveles fríos, nunca #000 */
  --text:      #1f2126;   /* títulos, cifras, primera columna, fila seleccionada */
  --text-2:    #3c4149;   /* cuerpo, labels, botón secundario, nav */
  --muted:     #6b6f76;   /* metadatos, th, captions, hints */
  --faint:     #90959d;   /* SOLO placeholders, iconos inactivos, separador '/' */

  /* acento único: acción, foco, selección. Nada más. */
  --acc:       #4b57d6;
  --acc-ink:   #3d48c2;   /* hover del primario; texto sobre --acc-dim */
  --acc-dim:   #eceefb;   /* fila .on, .chip.on, .cnt de pestaña activa */
  --acc-line:  #c7cbf0;   /* anillo de .chip.on; serie 'best' de los gráficos */

  /* identidad de app: SOLO el cuadrado del icono (.app-ico, .apphd-ico).
     Las dos derivadas se vuelven a declarar sobre el propio icono (§LANZADOR):
     un custom property se resuelve donde se declara, y en el lanzador cada
     tarjeta trae su --app-hue en línea. */
  --app-hue:    #4b57d6;                                        /* lo pisa html[data-app] y el Editor */
  --app-ico:    color-mix(in oklab, var(--app-hue) 80%, #000);  /* trazo: siempre legible */
  --app-ico-bg: color-mix(in oklab, var(--app-hue) 18%, #fff);  /* fondo: siempre pastel */

  /* semántica: par tinte/tinta opaco; el texto siempre es la tinta oscura */
  --green:  #107d32;  --gdim:  #e5fce7;
  --amber:  #a64f00;  --adim2: #fff4d4;
  --yellow: #a64f00;  --ydim:  #fff4d4;   /* alias: amarillo = ámbar (un solo aviso) */
  --red:    #d60020;  --rdim:  #ffe9ea;
  --info:   #0064e2;  --idim:  #eaf4ff;   /* 'info' ya no es el acento */
  --purple: #6d28d9;  --pdim:  #efe9fb;   /* solo .hot-btn-promote del board */

  /* elevación: plano en la página, sombra solo en lo que flota */
  --e1: 0 0 0 1px var(--line);
  --e2: 0 0 0 1px var(--line), 0 2px 4px rgba(20,22,30,.04), 0 8px 16px -8px rgba(20,22,30,.06);
  --e3: 0 0 0 1px var(--line), 0 1px 1px rgba(0,0,0,.02), 0 8px 16px -4px rgba(20,22,30,.06), 0 24px 48px -12px rgba(20,22,30,.16);
  --ring:    0 0 0 2px var(--surface), 0 0 0 4px var(--acc);   /* :focus-visible de botones, tabs, chips, filas */
  --ring-in: 0 0 0 1px var(--acc), 0 0 0 3px var(--acc-dim);   /* :focus de inputs */
  --scrim:   rgba(20,22,30,.4);

  /* radios: vocabulario cerrado */
  --r-xs: 4px;   /* píldoras, kbd, swatches, .ci, .ep */
  --r-s:  6px;   /* botones, inputs, selects, chips, tabs, icono de app */
  --r-m:  8px;   /* paneles, tarjetas, toast, menús, .fila, .score-box */
  --r-l:  12px;  /* modal */
  --r-xl: 12px;  /* alias retirado → modal */

  /* tipografía: solo Inter, eje variable 400..600 */
  --font:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* escala cerrada (tamaño / interlínea / tracking):
     11/16  kbd, .cnt
     12/16  captions, th, píldoras, labels, metadatos, .card-label, .sec
     13/20  BASE: filas, botones, inputs, nav, cuerpo
     14/20  h2 de panel, nombre de app en el lanzador
     16/24  h2 de modal, .cel .v
     20/28  h1 de app, saludo del lanzador, .cel.mrr .v
     24/32  .card-val, .score-n
     Pesos: 400 cuerpo · 500 UI/labels/nombres · 600 SOLO títulos y cifras. */
  --fs-12: 12px; --lh-12: 16px;
  --fs-13: 13px; --lh-13: 20px;
  --fs-14: 14px; --lh-14: 20px;
  --fs-16: 16px; --lh-16: 24px;
  --fs-20: 20px; --lh-20: 28px;
  --fs-24: 24px; --lh-24: 32px;
  --ls-13: -.1px; --ls-14: -.15px; --ls-16: -.2px; --ls-20: -.3px; --ls-24: -.5px;

  /* ritmo: base 4 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --h-ctl:   28px;   /* botón, input de tabla/toolbar, chip, pestaña, select */
  --h-ctl-l: 32px;   /* input de formulario, botón dentro de .modal-btns */
  --h-row:   36px;   /* fila de tabla y de lista (una línea) */
  --h-row-l: 44px;   /* fila de dos líneas: .req-hd, .hot-card */
  --h-nav:   48px;

  /* movimiento */
  --ease:   ease-out;
  --t-fast: 100ms;   /* hover de fondo/color */
  --t-mid:  160ms;   /* modal, toast, popover: opacity + translateY(4px), sin scale */
}

/* Identidad por app: solo --app-hue. El acento de acción no se toca. */
html[data-app="espacio"]   { --app-hue: #4b57d6; }
html[data-app="forecast"]  { --app-hue: #4b57d6; }
html[data-app="ayuda"]     { --app-hue: #0e7490; }
html[data-app="sal"]       { --app-hue: #6d28d9; }
html[data-app="historial"] { --app-hue: #5b616b; }  /* neutro: herramienta de managers */

/* ═══ BASE GLOBAL ═════════════════════════════════════════════════ */
body {
  font-family: var(--font);
  font-feature-settings: "cv01" 1, "cv05" 1, "cv08" 1, "ss03" 1;
  font-size: var(--fs-13); line-height: var(--lh-13); letter-spacing: var(--ls-13);
  background: var(--bg); color: var(--text); min-height: 100vh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.n, input.n, td, th, .tabular, .card-val, .cellpct, .cellnum, .q-inp, .badge,
.hora, .cel .v, .score-n, .req-score b, .cnt { font-variant-numeric: tabular-nums; }

/* Acciones latentes: ocultas hasta hover/foco; siempre visibles sin puntero */
.row-actions, .hot-card-actions, .req-acts, .cmb .mini, .app-edit { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
tr:hover .row-actions, tr:focus-within .row-actions,
.hot-card:hover .hot-card-actions, .hot-card:focus-within .hot-card-actions,
.req.open .req-acts, .req:focus-within .req-acts,
.ev:hover .cmb .mini, .ev:focus-within .cmb .mini,
.app:hover .app-edit, .app:focus-within .app-edit { opacity: 1; }
@media (hover: none) { .row-actions, .hot-card-actions, .req-acts, .cmb .mini, .app-edit { opacity: 1; } }

/* Transición entre documentos: al pulsar una app, el icono de su tarjeta
   se convierte en el de la cabecera de dentro. Chrome la hace; el resto
   navega normal, sin nada roto. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ═══ NAV ═════════════════════════════════════════════════════════ */
.nav {
  display: flex; align-items: center; gap: 12px;
  height: var(--h-nav); padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; color: inherit; }
.nav-logo {
  width: 24px; height: 16px; border-radius: 3px; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--line-2);
}
.nav-logo svg { display: block; width: 100%; height: 100%; }
.nav-name {
  font: 500 var(--fs-13)/var(--lh-13) var(--font);
  letter-spacing: var(--ls-13); color: var(--text); white-space: nowrap;
}
.nav-crumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); flex-shrink: 0; }
.nav-crumb a { color: var(--muted); text-decoration: none; font-weight: 400; }
.nav-crumb a:hover { color: var(--text); }
.nav-crumb .here { font: 500 var(--fs-13)/var(--lh-13) var(--font); letter-spacing: var(--ls-13); color: var(--text); }
.nav-sep { color: var(--faint); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.who {
  font-size: var(--fs-12); line-height: var(--lh-12); color: var(--muted); font-weight: 400;
  padding: 0; margin: 0; border: 0;
}

/* Pestañas: un solo estilo para la nav, el board y el editor. */
.nav-tabs { display: flex; gap: 2px; align-self: center; overflow-x: auto; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.tab {
  height: var(--h-ctl); padding: 0 10px; border-radius: var(--r-s);
  background: none; border: 0; color: var(--muted);
  font: 500 var(--fs-13)/var(--h-ctl) var(--font); letter-spacing: var(--ls-13);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tab::after { display: none; }
.tab:hover { color: var(--text); background: var(--hover); }
.tab.active { color: var(--text); background: var(--surf3); font-weight: 500; }
.tab .cnt {
  font: 500 11px/16px var(--font); min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-xs); background: var(--surf3); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.tab.active .cnt { background: var(--acc-dim); color: var(--acc-ink); }
.nav-tabs.many .tab { font-size: var(--fs-12); padding: 0 8px; }

/* ═══ BOTONES ═════════════════════════════════════════════════════ */
.btn, .icon-btn, .btn-ghost, .mini {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-ctl); padding: 0 12px; border: 0; border-radius: var(--r-s);
  font: 500 var(--fs-13)/1 var(--font); letter-spacing: var(--ls-13);
  cursor: pointer; text-decoration: none; white-space: nowrap; transform: none;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn svg, .icon-btn svg, .btn-ghost svg { width: 16px; height: 16px; }
.btn:active { transform: none; }

/* Secundario: anillo de filete sobre blanco. */
.btn, .icon-btn { background: var(--surface); color: var(--text-2); box-shadow: var(--e1); }
.btn:hover, .icon-btn:hover { background: var(--surf2); box-shadow: 0 0 0 1px var(--line-2); color: var(--text); }
.btn:active, .icon-btn:active { background: var(--surf3); }

/* Primario: uno solo por vista. */
.btn-primary { background: var(--acc); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--acc-ink); box-shadow: none; color: #fff; }
.btn-primary:active { background: #333da8; }

/* Fantasma: sin caja hasta que lo tocas. */
.btn-ghost { background: transparent; color: var(--text-2); box-shadow: none; }
.btn-ghost:hover { background: var(--hover); color: var(--text); }
.btn-ghost:active { background: var(--active); }

.mini { height: 24px; padding: 0 8px; font-size: var(--fs-12); border-radius: var(--r-xs);
  background: transparent; color: var(--text-2); box-shadow: none; }
.mini svg { width: 14px; height: 14px; }
.mini:hover { background: var(--hover); color: var(--text); box-shadow: none; }
.mini.del:hover { color: var(--red); background: var(--rdim); box-shadow: none; }

.btn-danger { color: var(--red); background: transparent; box-shadow: none; }
.btn-danger:hover { color: var(--red); background: var(--rdim); box-shadow: none; }

.btn:disabled, .btn-primary:disabled, .icon-btn:disabled, .btn-ghost:disabled, .mini:disabled {
  background: var(--surf2); color: var(--faint); box-shadow: 0 0 0 1px var(--line);
  opacity: 1; cursor: not-allowed;
}
.modal-btns .btn, .modal-btns .btn-primary { height: var(--h-ctl-l); padding: 0 14px; }

.seg { display: inline-flex; background: var(--surf3); border-radius: var(--r-s); padding: 2px; gap: 2px; box-shadow: none; }
.seg button {
  height: 24px; padding: 0 10px; border-radius: var(--r-xs); border: 0; background: transparent;
  color: var(--muted); font: 500 var(--fs-13)/24px var(--font); letter-spacing: var(--ls-13);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.seg .cnt { font: 500 11px/16px var(--font); color: var(--muted); }

kbd {
  display: inline-flex; align-items: center; height: 16px; padding: 0 4px;
  border-radius: var(--r-xs); background: var(--surf3); color: var(--muted);
  font: 500 11px/16px var(--font-mono);
}

/* ═══ LAYOUT Y TIPOGRAFÍA ═════════════════════════════════════════ */
.inner { max-width: 1120px; margin: 0 auto; padding: 24px 20px 64px; }
.h1 { font: 600 var(--fs-20)/var(--lh-20) var(--font); letter-spacing: var(--ls-20); color: var(--text); }
.h1-sub { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--muted); margin-top: 4px; max-width: 62ch; }
.sec {
  font: 500 var(--fs-12)/var(--lh-12) var(--font); color: var(--muted);
  text-transform: none; letter-spacing: 0; margin: 32px 0 8px;
  display: flex; align-items: center; gap: 10px;
}
.sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.view { display: none; } .view.active { display: block; }

/* ═══ CABECERA DE APP ═════════════════════════════════════════════
   Sin banda teñida: lo único con color es el cuadrado del icono. */
.apphd { background: var(--surface); border-bottom: 1px solid var(--line); }
.apphd-in { max-width: 1120px; margin: 0 auto; padding: 20px; display: flex; align-items: center; gap: 12px; }
.apphd-ico {
  --app-ico:    color-mix(in oklab, var(--app-hue) 80%, #000);
  --app-ico-bg: color-mix(in oklab, var(--app-hue) 18%, #fff);
  width: 32px; height: 32px; border-radius: var(--r-s); flex-shrink: 0;
  background: var(--app-ico-bg); color: var(--app-ico);
  display: flex; align-items: center; justify-content: center; box-shadow: none;
}
.apphd-ico svg { width: 18px; height: 18px; }
.apphd h1 { font: 600 var(--fs-20)/var(--lh-20) var(--font); letter-spacing: var(--ls-20); color: var(--text); }
.apphd p { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--muted); margin-top: 0; }
.apphd-act { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ═══ PANELES Y TARJETAS ══════════════════════════════════════════ */
.panel { background: var(--surface); border-radius: var(--r-m); box-shadow: var(--e1); overflow: hidden; }
.panel:hover { box-shadow: var(--e1); }
.panel + .panel { margin-top: 24px; }
.panel-hd { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; min-height: 48px; }
.panel-hd h2, .panel-title { font: 500 var(--fs-14)/var(--lh-14) var(--font); letter-spacing: var(--ls-14); color: var(--text); }
.panel-sub { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--muted); }
.panel-bd { padding: 16px; }

/* Las KPI son una fila de cifras dentro de un panel: el filete se dibuja
   con márgenes negativos y se recorta con overflow, así no queda suelto
   ni en la primera columna ni al saltar de fila. */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 0;
  background: var(--surface); border-radius: var(--r-m); box-shadow: var(--e1);
  overflow: hidden; margin-bottom: 24px;
}
.card {
  background: none; box-shadow: none; border-radius: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  margin: -1px 0 0 -1px; padding: 12px 16px 14px; position: relative; transition: none;
}
.card:hover { box-shadow: none; }
.card-label { font: 400 var(--fs-12)/var(--lh-12) var(--font); color: var(--muted); text-transform: none; letter-spacing: 0; margin-bottom: 4px; }
.card-val { font: 600 var(--fs-24)/var(--lh-24) var(--font); letter-spacing: var(--ls-24); color: var(--text); }
.card-sub { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--muted); margin-top: 4px; }
.card-sub b { color: var(--text-2); font-weight: 500; }
.card-prog, .attbar { height: 4px; border-radius: 2px; background: var(--surf3); box-shadow: none; margin-top: 8px; overflow: hidden; }
.card-prog > i, .attbar-fill { display: block; height: 100%; border-radius: 2px; transition: width 300ms ease-out; }
.quota-inp {
  height: var(--h-ctl); width: 96px; border-radius: var(--r-s); background: transparent;
  border: 0; box-shadow: none; text-align: right; color: var(--text);
  font: 500 var(--fs-13)/var(--h-ctl) var(--font); outline: none;
  transition: box-shadow var(--t-fast) var(--ease);
}
.quota-inp:hover { box-shadow: 0 0 0 1px var(--line); }

/* ═══ EL LANZADOR ═════════════════════════════════════════════════ */
.masthead { padding: 32px 0 8px; }
.mast-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font: 500 var(--fs-12)/var(--lh-12) var(--font); color: var(--muted);
  text-transform: none; letter-spacing: 0;
}
.mast-eyebrow .flag { width: 16px; height: 11px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); }
.mast-eyebrow .flag svg { display: block; width: 100%; height: 100%; }
.mast-h { font: 600 var(--fs-20)/var(--lh-20) var(--font); letter-spacing: var(--ls-20); color: var(--text); }
.mast-h .saludo { font-weight: 400; color: var(--muted); }
.mast-sub { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--muted); margin-top: 4px; }

.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.app {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: inherit;
  background: var(--surface); border-radius: var(--r-m); padding: 16px;
  box-shadow: var(--e1); overflow: hidden; animation: none;
  transition: box-shadow var(--t-fast) var(--ease);
}
.app:hover { transform: none; box-shadow: var(--e2); }
.app-ico {
  /* se re-derivan aquí: cada tarjeta trae su propio --app-hue (en la tarjeta
     o en el propio icono) y un custom property solo ve lo que hay en su sitio */
  --app-ico:    color-mix(in oklab, var(--app-hue) 80%, #000);
  --app-ico-bg: color-mix(in oklab, var(--app-hue) 18%, #fff);
  width: 32px; height: 32px; border-radius: var(--r-s); flex-shrink: 0;
  background: var(--app-ico-bg); color: var(--app-ico);
  display: flex; align-items: center; justify-content: center;
  box-shadow: none; transition: none;
}
.app-ico svg { width: 18px; height: 18px; }
.app:hover .app-ico { transform: none; }
.app-nm {
  font: 500 var(--fs-14)/var(--lh-14) var(--font); letter-spacing: var(--ls-14);
  display: flex; align-items: center; gap: 6px;
}
.app-nm .arrow { opacity: 0; color: var(--muted); display: inline-flex; transition: opacity var(--t-fast) var(--ease); }
.app-nm .arrow svg { width: 14px; height: 14px; }
.app:hover .app-nm .arrow { opacity: 1; transform: none; color: var(--muted); }
.app-desc { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--muted); }
.app-foot { margin-top: auto; padding-top: 4px; }
.badge-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.app.soon { opacity: .5; }
.app.soon:hover { box-shadow: var(--e1); }
.app-edit { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; }
/* Mismo par que en la fila del editor, aquí en 24px: dos cuadrados de icono. */
.app-edit .mini { width: 24px; padding: 0; line-height: 0; }
.app-drag { cursor: grab; }
.app-drag:active { cursor: grabbing; }
.app-drop { box-shadow: 0 0 0 2px var(--acc); }
.app-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-m); background: transparent; box-shadow: 0 0 0 1px var(--line-2);
  color: var(--muted); font: 500 var(--fs-13)/var(--lh-13) var(--font);
  cursor: pointer; min-height: 132px; padding: 20px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.app-add:hover { background: var(--hover); color: var(--text); box-shadow: 0 0 0 1px var(--line-2); }
.app-add svg { width: 18px; height: 18px; }

/* ═══ PÍLDORAS ════════════════════════════════════════════════════ */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 6px; border-radius: var(--r-xs);
  font: 500 var(--fs-12)/20px var(--font); letter-spacing: 0;
  white-space: nowrap; box-shadow: none;
}
.pill-green  { color: var(--green);  background: var(--gdim); }
.pill-yellow { color: var(--amber);  background: var(--adim2); }
.pill-amber  { color: var(--amber);  background: var(--adim2); }
.pill-red    { color: var(--red);    background: var(--rdim); }
.pill-blue   { color: var(--info);   background: var(--idim); }
.pill-grey   { color: var(--text-2); background: var(--surf3); }

/* ═══ FORMULARIOS ═════════════════════════════════════════════════ */
.frow { margin-bottom: 16px; }
.frow-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.frow-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
label.lb, .ed-campo .lb {
  display: block; font: 500 var(--fs-12)/var(--lh-12) var(--font);
  color: var(--text-2); letter-spacing: 0; margin-bottom: 6px;
}
label.lb .opt, .ed-campo .lb .opt { font-weight: 400; color: var(--muted); }
.hint, .ed-hint { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--muted); margin-top: 4px; }
.hint b, .ed-hint b { color: var(--text-2); font-weight: 500; }
.in, .sel, .ta, .ficha-in {
  width: 100%; height: var(--h-ctl-l); padding: 0 10px;
  border: 0; border-radius: var(--r-s);
  background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line);
  font: 400 var(--fs-13)/var(--lh-13) var(--font); letter-spacing: var(--ls-13);
  outline: none; transition: box-shadow var(--t-fast) var(--ease);
}
.in::placeholder, .ta::placeholder, .ficha-in::placeholder { color: var(--faint); }
.in:hover, .sel:hover, .ta:hover, .ficha-in:hover { box-shadow: 0 0 0 1px var(--line-2); }
.in.err, .sel.err, .ta.err, .err { box-shadow: 0 0 0 1px var(--red); background: var(--surface); }
.ta { height: auto; min-height: 96px; padding: 8px 10px; line-height: var(--lh-13); resize: vertical; }
.sel {
  appearance: none; cursor: pointer; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6f76' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px;
}
.in.n, .ficha-in.n { text-align: right; font-variant-numeric: tabular-nums; }
.chk { display: flex; align-items: center; gap: 8px; font: 400 var(--fs-13)/var(--lh-13) var(--font); cursor: pointer; }
.chk input, .ed-chk input, .ficha-check input { width: 16px; height: 16px; accent-color: var(--acc); cursor: pointer; flex-shrink: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: var(--h-ctl); padding: 0 10px; border-radius: var(--r-s);
  display: inline-flex; align-items: center;
  background: var(--surface); color: var(--text-2); box-shadow: 0 0 0 1px var(--line);
  font: 400 var(--fs-13)/var(--h-ctl) var(--font); letter-spacing: var(--ls-13);
  border: 0; cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover { box-shadow: 0 0 0 1px var(--line-2); color: var(--text); }
.chip.on { background: var(--acc-dim); color: var(--acc-ink); box-shadow: 0 0 0 1px var(--acc-line); font-weight: 500; }
.chip.on::before { content: none; }
.chip svg { width: 16px; height: 16px; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: var(--r-xs); margin-right: 6px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* ═══ NOTAS PERSISTENTES ══════════════════════════════════════════
   Filete de color sobre fondo neutro, nunca caja teñida. */
.note, .ed-warn {
  border-radius: var(--r-xs); padding: 10px 12px;
  font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-2);
  background: var(--surf2); border-left: 2px solid var(--line-2); box-shadow: none;
}
.note-info { border-left-color: var(--info); }
.note-warn, .ed-warn { border-left-color: var(--amber); }
.note-stop { border-left-color: var(--red); }
.note b { color: var(--text); font-weight: 500; }

/* ═══ SOLICITUDES ═════════════════════════════════════════════════
   Filas dentro de un .panel, nunca tarjeta propia. */
.req {
  margin: 0; border-radius: 0; box-shadow: none; background: transparent;
  border-top: 1px solid var(--line); overflow: hidden;
  transition: background var(--t-fast) var(--ease);
}
.panel > .req:first-child { border-top: 0; }
.req:hover, .req.open { box-shadow: none; background: var(--hover); }
.req.done { opacity: 1; }
.req.done .req-acct { color: var(--muted); }
.req-hd { display: flex; align-items: center; gap: 12px; min-height: var(--h-row-l); padding: 0 16px; cursor: pointer; }
.req-hd:hover { background: none; }
.req-score { flex-shrink: 0; width: 40px; text-align: left; }
.req-score b {
  display: block; font: 600 15px/20px var(--font); letter-spacing: var(--ls-13);
  color: var(--text); position: relative; padding-left: 12px;
}
.req-score b::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--faint));
}
.req-score span { display: none; }
.req-main { min-width: 0; flex: 1; }
.req-acct { font: 500 var(--fs-13)/var(--lh-13) var(--font); letter-spacing: var(--ls-13); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.req-meta { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--muted); margin-top: 2px; }
.req-chev { color: var(--faint); flex-shrink: 0; display: inline-flex; transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.req-chev svg { width: 16px; height: 16px; }
.req-chev.op { transform: rotate(180deg); color: var(--muted); }
.req-hd:hover .req-chev { color: var(--text); }
.req-bd { display: none; background: var(--surf2); border-top: 1px solid var(--line); padding: 8px 16px 16px 72px; }
.req.open .req-bd { display: block; }
.req-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(158px,1fr)); gap: 8px 24px; margin: 8px 0 12px; }
.req-f { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.req-f .k, .k-lb {
  font: 500 var(--fs-12)/var(--lh-12) var(--font); color: var(--muted);
  text-transform: none; letter-spacing: 0;
}
.req-f .v { font: 400 var(--fs-13)/var(--lh-13) var(--font); letter-spacing: var(--ls-13); margin-top: 0; word-break: break-word; }
.req-txt {
  font-size: var(--fs-13); line-height: var(--lh-13); white-space: pre-wrap;
  background: none; box-shadow: none; border-left: 2px solid var(--line-2);
  border-radius: 0; padding: 0 12px;
}
.req-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.brk { display: flex; flex-wrap: wrap; gap: 0; margin-top: 8px; }
.brk-i {
  font: 400 var(--fs-12)/var(--lh-12) var(--font); color: var(--muted);
  background: none; box-shadow: none; padding: 0; border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.brk-i + .brk-i::before { content: "·"; color: var(--faint); margin: 0 6px; }
.brk-i b { color: var(--text-2); font-weight: 500; }
.brk-i.neg, .brk-i.neg b { color: var(--red); background: none; box-shadow: none; }
.bar { height: 4px; background: var(--surf3); border-radius: 2px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 2px; transition: width 300ms ease-out; }

/* Vacíos: título de qué no hay, frase de qué pasará. Sin caja ni tinte. */
.empty, .hot-empty, .lead-empty {
  text-align: center; padding: 40px 20px; color: var(--muted);
  font-size: var(--fs-12); line-height: var(--lh-12); background: none; border: 0;
}
.empty svg { width: 20px; height: 20px; color: var(--faint); margin-bottom: 8px; }
.empty b, .empty-title { display: block; font: 500 var(--fs-13)/var(--lh-13) var(--font); color: var(--text-2); margin-bottom: 2px; }
.vacio { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--muted); }

/* ═══ TABLAS ══════════════════════════════════════════════════════ */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.tabla th {
  text-align: right; font: 500 var(--fs-12)/var(--lh-12) var(--font);
  text-transform: none; letter-spacing: 0; color: var(--muted);
  height: var(--h-row); padding: 0 12px; background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.tabla th:first-child, .tabla td:first-child { text-align: left; }
.tabla td { padding: 8px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; text-align: right; }
.tabla td:first-child { font-weight: 500; color: var(--text); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--hover); }
.tabla tr.on td { background: var(--acc-dim); color: var(--text); font-weight: 500; }
.tabla tr.on:hover td { background: var(--acc-dim); }
.tabla tfoot td { font-weight: 500; background: none; border-top: 1px solid var(--line); border-bottom: 0; padding: 8px 12px; }
.tabla .flaca { color: var(--amber); }
.wrap-x { overflow-x: auto; }

/* ═══ MODAL ═══════════════════════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0; background: var(--scrim);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  display: none; align-items: center; justify-content: center; z-index: 300; padding: 20px;
}
.overlay.open { display: flex; animation: fade var(--t-mid) var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface); border-radius: var(--r-l);
  width: 100%; max-width: 560px; padding: 24px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--e3); animation: modalIn var(--t-mid) var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.modal h2 { font: 600 var(--fs-16)/var(--lh-16) var(--font); letter-spacing: var(--ls-16); color: var(--text); margin-bottom: 12px; }
.modal p, .modal li { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--muted); }
.modal .modal-btns {
  display: flex; gap: 8px; justify-content: flex-end;
  margin: 24px -24px -24px; padding: 12px 24px;
  background: var(--surf2); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-l) var(--r-l);
}
.help-body { max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.help-body h3 { font: 500 var(--fs-13)/var(--lh-13) var(--font); margin: 16px 0 4px; color: var(--text); }
.help-body h3:first-child { margin-top: 2px; }
.help-body p, .help-body li { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--muted); }
.help-body ul { padding-left: 18px; margin: 4px 0; }
.help-body li { margin-bottom: 4px; }
.help-body b { color: var(--text); font-weight: 500; }
.help-body code { font: 400 var(--fs-12)/var(--lh-12) var(--font-mono); background: var(--surf3); border-radius: var(--r-xs); padding: 1px 5px; }

/* ═══ TOAST ═══════════════════════════════════════════════════════ */
#toast {
  position: fixed; bottom: 24px; left: 24px; transform: translateY(4px);
  background: var(--surface); color: var(--text); padding: 10px 12px; border-radius: var(--r-m);
  font: 500 var(--fs-13)/var(--lh-13) var(--font);
  display: none; align-items: center; gap: 12px;
  box-shadow: var(--e3); z-index: 9999; max-width: min(420px, calc(100vw - 48px));
  opacity: 0; transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
#toast.on { display: flex; opacity: 1; transform: none; }
#toast button { background: none; border: 0; color: var(--acc); font: 500 var(--fs-13)/var(--lh-13) var(--font); padding: 0 4px; cursor: pointer; }
#toast button:hover { color: var(--acc-ink); text-decoration: underline; }
body.form-open #toast { bottom: 96px; }

/* ═══ MÓVIL ═══════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .inner { padding: 16px 12px 48px; }
  .nav { padding: 0 12px; gap: 10px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav .who { display: none; }
  .apphd-in { padding: 16px 12px; gap: 12px; flex-wrap: wrap; }
  .apphd-act { width: 100%; margin-left: 0; }
  .masthead { padding: 24px 0 4px; }
  .frow-2, .frow-3 { grid-template-columns: 1fr; gap: 12px; }
  .apps { grid-template-columns: 1fr; }
  .req-hd { align-items: flex-start; padding: 10px 16px; }
  .req-bd { padding-left: 16px; }
}
@media (max-width: 440px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .card-val { font-size: var(--fs-20); line-height: var(--lh-20); }
}

/* ═══ EDITOR (managers) ═══════════════════════════════════════════
   El mismo patrón que el Editor del board: modal ancho con pestañas,
   listas editables con peso y orden, textos con el original en gris. */
.modal.ed { max-width: 720px; padding: 0; }
.modal.ed .modal-btns { margin: 0; }
.ed-hd { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 12px; }
.ed-hd h2 { margin-bottom: 2px; }
.ed-hd .mini { margin-left: auto; width: var(--h-ctl); height: var(--h-ctl); padding: 0; line-height: 0; border-radius: var(--r-s); }
.ed-hd .mini svg { width: 16px; height: 16px; }
.ed-sub { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--muted); }
.ed-tabs { display: flex; gap: 2px; padding: 0 16px 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ed-tabs::-webkit-scrollbar { display: none; }
.ed-tab {
  height: var(--h-ctl); padding: 0 10px; border-radius: var(--r-s);
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font: 500 var(--fs-13)/var(--h-ctl) var(--font); letter-spacing: var(--ls-13);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ed-tab::after { display: none; }
.ed-tab:hover { color: var(--text); background: var(--hover); }
.ed-tab.on { color: var(--text); background: var(--surf3); font-weight: 500; }
.ed-body { padding: 16px 24px 24px; max-height: 64vh; overflow-y: auto; }
.ed-sec {
  font: 500 var(--fs-12)/var(--lh-12) var(--font); color: var(--muted);
  text-transform: none; letter-spacing: 0; margin: 20px 0 8px;
  display: flex; align-items: center; gap: 10px;
}
.ed-sec::after { display: none; }
.ed-body .ed-sec:first-child { margin-top: 0; }
.ed-in, .q-inp {
  width: 100%; height: var(--h-ctl); padding: 0 10px;
  border: 0; border-radius: var(--r-s);
  background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line);
  font: 400 var(--fs-13)/var(--h-ctl) var(--font); letter-spacing: var(--ls-13);
  outline: none; transition: box-shadow var(--t-fast) var(--ease);
}
.ed-in:hover, .q-inp:hover { box-shadow: 0 0 0 1px var(--line-2); }
.ed-in.n, .q-inp { text-align: right; font-variant-numeric: tabular-nums; }
.ed-in::placeholder, .q-inp::placeholder { color: var(--faint); }
.ed-list { display: flex; flex-direction: column; gap: 4px; }
.ed-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; }
.ed-list.peso .ed-row { grid-template-columns: 22px 1fr 78px auto; }
/* El cuadrado de la app dentro de una fila del editor: la mitad de alto que
   en la tarjeta, con el trazo a escala. */
.ed-row .app-ico { width: 28px; height: 28px; border-radius: var(--r-s); }
.ed-row .app-ico svg { width: 16px; height: 16px; }
.ed-row.ed-cab {
  font: 400 var(--fs-12)/var(--lh-12) var(--font); color: var(--muted);
  text-transform: none; letter-spacing: 0; padding: 0 2px 2px;
}
.ed-row.ed-cab span:nth-child(3) { text-align: right; padding-right: 10px; }
.ed-grab { color: var(--faint); display: inline-flex; justify-content: center; }
.ed-grab svg { width: 16px; height: 16px; }
.ed-btns { display: inline-flex; gap: 4px; }
.ed-btns .mini { width: var(--h-ctl); height: var(--h-ctl); padding: 0; line-height: 0; border-radius: var(--r-s); }
.ed-btns .mini svg { width: 16px; height: 16px; }
.ed-btns .mini:disabled { background: none; box-shadow: none; color: var(--faint); cursor: default; }
.ed-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ed-acts .btn svg { width: 16px; height: 16px; }
.ed-txt { margin-bottom: 6px; }
.ed-campo { margin-bottom: 12px; }
.ed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; }
.ed-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.ed-tabla th {
  text-align: right; font: 500 var(--fs-12)/var(--lh-12) var(--font);
  text-transform: none; letter-spacing: 0; color: var(--muted);
  height: var(--h-ctl-l); padding: 0 6px; border-bottom: 1px solid var(--line);
}
.ed-tabla th:first-child, .ed-tabla td:first-child { text-align: left; font-weight: 500; white-space: nowrap; }
.ed-tabla td { padding: 4px; border-bottom: 1px solid var(--line); }
.ed-tabla tbody tr:last-child td { border-bottom: 0; }
.ed-tabla .ed-in { padding: 0 8px; font-size: var(--fs-13); }
@media (max-width: 760px) {
  .modal.ed { max-height: 94vh; }
  .ed-hd { padding: 16px 16px 8px; }
  .ed-tabs { padding: 0 10px 8px; }
  .ed-body { padding: 14px 16px 20px; max-height: 66vh; }
  .ed-list.peso .ed-row { grid-template-columns: 18px 1fr 62px auto; }
}

/* ═══ FOCO ════════════════════════════════════════════════════════
   Al final del archivo a propósito: así el anillo gana siempre al
   hover, aunque compartan especificidad. Un anillo para lo que se
   pulsa, un anillo interior para lo que se escribe. */
:is(.btn, .btn-ghost, .icon-btn, .mini, .tab, .ed-tab, .chip, .seg button, .app, .app-add,
    .req-hd, .hot-btn, .add-btn, .ctrl, .slip-mo, .ed-mini, .lead-del, tr[tabindex]):focus-visible {
  outline: none; box-shadow: var(--ring);
}
:is(.in, .sel, .ta, .ed-in, .ci, .ficha-in, .q-inp, .quota-inp, .nav-name, .cel.dsc input):focus {
  outline: none; box-shadow: var(--ring-in);
}