@import url("/static/tokens.css");   /* paleta única: app + sitio público (docs/61 §G7) */
/* ===== clases-firma del rediseño (icon-chip, cards, kpi, trend, pill) =====
   Fuente canónica: docs/design/design-system.css (docs/22). */
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.icon-chip{width:36px;height:36px;flex:none;border-radius:11px;display:inline-flex;
  align-items:center;justify-content:center;line-height:1;
  background:var(--accent-soft);color:var(--accent-text)}
.icon-chip.sm{width:30px;height:30px;border-radius:9px}
.icon-chip.sm .ico{width:17px;height:17px}
.icon-chip.chip-violet{background:var(--violet-soft);color:var(--violet)}
.icon-chip.chip-blue{background:var(--blue-soft);color:var(--blue)}
.icon-chip.chip-amber{background:var(--warn-soft);color:var(--warn-text)}
.icon-chip.chip-red{background:var(--neg-soft);color:var(--neg-text)}
.icon-chip.chip-teal{background:var(--teal-soft);color:var(--teal)}
.icon-chip.chip-gray{background:var(--surface-2);color:var(--label)}
.trend{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;
  padding:3px 8px;border-radius:var(--radius-pill)}
.trend.up{background:var(--pos-soft);color:var(--pos-text)}
.trend.down{background:var(--neg-soft);color:var(--neg-text)}
.trend.flat{background:var(--surface-2);color:var(--label)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow-x:hidden}  /* todo el contenido real vive en
  .sidebar/.main, ambos acotados */
body{display:flex;font:14px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);
  /* cifras de ancho fijo en TODA la app: sin esto las columnas de números bailan al
     cambiar de dígito y los KPI se descolocan al refrescar (docs/58 §2.2) */
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.hidden{display:none!important}

/* ---------------------------------------------------------------------------
   FOCO DE TECLADO (docs/58 F0). Antes no existía ninguna regla `:focus-visible`:
   navegando con el tabulador no se veía dónde estabas. Se usa `:focus-visible`
   (no `:focus`) para que el anillo NO salga al hacer clic con el ratón. */
:where(a,button,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible{
  outline:2px solid var(--accent-fill);
  outline-offset:2px;
  border-radius:6px;
}
/* elementos con fondo oscuro o dentro de tablas densas: anillo con halo claro */
.nav-item:focus-visible,.bot-item:focus-visible,.tab:focus-visible,
.pf-th:focus-visible,.rd-th:focus-visible{
  outline:2px solid var(--accent-fill);outline-offset:-2px;
  box-shadow:0 0 0 4px var(--accent-soft)}

/* sidebar (rediseño #45: tema CLARO con iconos de línea) */
.sidebar{width:230px;flex:none;background:var(--side);color:var(--side-ink);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:14px 12px;overflow:auto}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);font-size:17px;
  padding:6px 8px 16px;cursor:pointer;user-select:none}
.brand-logo{width:30px;height:30px;flex:none;border-radius:9px;background:var(--accent-soft);
  color:var(--accent-text);display:inline-flex;align-items:center;justify-content:center}
.brand-logo .ico{width:17px;height:17px}
.brand:hover{color:var(--accent-text)}
.sidebar nav{display:flex;flex-direction:column;gap:2px}
.nav-section{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--faint);padding:16px 10px 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  cursor:pointer;color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500;
  position:relative;white-space:nowrap}   /* «Mis dividendos PRONTO» no debe partirse */
.nav-item .ic{width:20px;height:20px;flex:none;display:inline-flex;align-items:center;
  justify-content:center;color:var(--faint)}
.nav-item:hover{background:var(--panel-2)}
.nav-item:hover .ic{color:var(--muted)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-text);font-weight:700}
.nav-item.active .ic{color:var(--accent-text)}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent)}
.nav-item.soon{opacity:.55}
.nav-item.soon:hover{opacity:.8;background:var(--panel-2)}

.sidebar-foot{margin-top:auto;font-size:11px;color:var(--faint);padding:12px 10px 4px}
#logout .ic{color:var(--faint)}
#logout:hover{background:var(--neg-soft);color:var(--neg-text)}
#logout:hover .ic{color:var(--neg-text)}

/* botón hamburguesa (solo móvil) + backdrop del cajón off-canvas */
.menu-btn{display:none;flex:none;border:1px solid var(--line);background:var(--panel-2);
  border-radius:9px;width:40px;height:40px;font-size:18px;cursor:pointer;color:var(--ink);
  align-items:center;justify-content:center}
.menu-btn:active{background:var(--accent-soft)}
.backdrop{position:fixed;inset:0;background:rgba(15,20,32,.45);z-index:40}

/* barra inferior de pestañas (solo móvil) */
.bottombar{display:none;flex-direction:row;align-items:stretch;
  position:fixed;bottom:0;left:0;right:0;z-index:45;
  background:var(--panel);border-top:1px solid var(--line);
  box-shadow:0 -2px 12px rgba(20,30,60,.06);padding-bottom:env(safe-area-inset-bottom)}
.bot-item{flex:1;border:0;background:none;cursor:pointer;color:var(--muted);
  font-size:11px;font-weight:600;padding:7px 2px 6px;display:flex;flex-direction:column;
  align-items:center;gap:3px}
.bot-item .bi-ic{font-size:18px;line-height:1}
.bot-item.active{color:var(--accent-text)}

/* toast genérico (opciones de menú aún sin desarrollar, sug. #41) */
.toast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%) translateY(12px);
  background:#1f2733;color:var(--surface-2);font-size:13px;font-weight:600;padding:10px 18px;
  border-radius:10px;box-shadow:0 6px 24px rgba(20,30,60,.3);z-index:70;opacity:0;
  pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* main */
.main{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden}
.topbar{display:flex;align-items:center;gap:16px;padding:12px 22px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.search-wrap{position:relative;flex:1;max-width:620px}
.search-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);
  pointer-events:none}
.search-ic .ico{width:17px;height:17px}
.search-kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px;color:var(--faint)}
#search{width:100%;padding:10px 40px 10px 38px;border:1px solid var(--line-2);border-radius:var(--radius-el);
  font-size:14px;background:var(--panel-2);outline:none}
#search:focus{border-color:var(--accent-text);background:var(--panel);box-shadow:0 0 0 3px var(--accent-soft)}
.results{position:absolute;top:46px;left:0;right:0;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);max-height:380px;overflow:auto;z-index:20}
.res{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:1px solid var(--line)}
.res:last-child{border-bottom:0}
.res:hover,.res.sel{background:var(--accent-soft)}
.res .tk{font-weight:700;min-width:54px}
.res .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res .jx{font-size:11px;color:var(--muted)}
.res .star{color:var(--warn)}
.res .star.wl{color:var(--pos-text)}
.user{margin-left:auto;color:var(--muted);font-size:13px;white-space:nowrap}

/* empty */
.empty{flex:1;overflow:auto;padding:60px;max-width:760px}
.empty h1{font-size:26px;margin:0 0 8px}
.empty p{color:var(--muted)}
.hint{margin-top:18px}

/* ===========================================================================
   PORTADA (docs/61 bloque A)
   ⚠️ `.main` es un flex de altura fija con overflow:hidden → toda sección debe
   declarar su propio scroll (`flex:1; overflow:auto`), o se recorta (docs/38).
   Dos columnas en escritorio, una en móvil; el bloque de cifras del catálogo
   («+24.000 empresas») se fue al escaparate, que es donde vende.
   =========================================================================== */
.home{flex:1;overflow:auto;padding:var(--s7) var(--s7) var(--s8)}
.home-head{display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;
  margin-bottom:var(--s6)}
.home-hello h1{font-size:var(--fs-3xl);margin:0;letter-spacing:-.02em}
.home-sub{color:var(--muted);margin:var(--s1) 0 0;font-size:var(--fs-base)}
.home-fresh{margin-left:auto}
.home-fresh .badge{font-weight:500}
.home-fresh b{font-weight:700}

.home-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--s4);align-items:start}
/* ⚠️ `min-width:0` en las tres columnas Y en la tarjeta: el mínimo automático de un elemento
   de rejilla (y de un hijo flex) es su contenido, así que la tira «visto recientemente»
   —que scrollea sola con `overflow-x:auto`— estiraba la columna a 1.679 px y era la PORTADA
   entera la que scrolleaba en horizontal (docs/64 §9.3.ter). `.home-col-full` se quedó sin él. */
.home-col-a,.home-col-b,.home-col-full{min-width:0}
.home-col-a,.home-col-b{display:flex;flex-direction:column;gap:var(--s4)}
.home-col-full{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--s4)}
.home-card{min-width:0}
.home-col-a>*,.home-col-b>*,.home-col-full>*{min-width:0}

/* KPI de la cartera: la rejilla del sistema, pero con las tarjetas ya dentro de
   una tarjeta → sin sombra ni borde doble */
.home-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));
  gap:var(--s3)}
.home-kpis .kpi{background:var(--panel-2);box-shadow:none}
.kpi-x{font-size:var(--fs-sm);color:var(--muted);margin-top:2px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kpi-v .up{color:var(--pos-text)} .kpi-v .down{color:var(--neg-text)}
.home-na{color:var(--muted);font-size:var(--fs-sm);margin:0}

/* onboarding (portada sin cartera) */
.home-onboard{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--s4)}
.home-onboard li{display:flex;gap:var(--s3);align-items:flex-start}
.home-onboard b{font-size:var(--fs-base);color:var(--ink)}
.home-onboard p{margin:2px 0 var(--s2);color:var(--muted);font-size:var(--fs-md);
  line-height:1.5}
.ob-n{flex:none;width:26px;height:26px;border-radius:var(--radius-pill);
  background:var(--accent-soft);color:var(--accent-text);font-weight:800;
  font-size:var(--fs-md);display:inline-flex;align-items:center;justify-content:center}

/* agenda y dividendos del mes */
.home-divmes{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-el);
  padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
.home-divmes .hd-l{display:block;font-size:var(--fs-xs);color:var(--label);
  text-transform:uppercase;letter-spacing:.04em}
.home-divmes b{font-size:var(--fs-xl);font-variant-numeric:tabular-nums}
/* el pastilla y el botón NO se encogen: con `white-space:nowrap` el texto se salía de
   la píldora (la insignia quedaba en 14 px de ancho y se leía pegada al botón) */
.home-divmes .badge,.home-divmes .btn{flex:none}
.home-divmes .btn{margin-left:auto}      /* el botón a la derecha; la píldora, junto a la cifra */
.home-divmes>div:first-child{flex:0 1 auto;min-width:0}
.home-ev{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;
  border-top:1px solid var(--line);color:inherit;text-decoration:none}
.home-ev:first-of-type{border-top:0}
.home-ev:hover{color:var(--accent-text)}
.home-ev-d{flex:none;width:52px;font-size:var(--fs-sm);color:var(--label);
  font-variant-numeric:tabular-nums}
.home-ev-ic{flex:none;display:inline-flex}
.home-ev-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--fs-base);font-weight:600}
.home-ev-l{flex:none;font-size:var(--fs-sm);color:var(--muted)}

/* movimiento de la semana */
/* `min-width:0` en las columnas: el mínimo automático de un elemento de rejilla es su
   contenido, y con él la lista se salía de la tarjeta en pantallas de 320 px */
/* `auto-fit` y no `1fr 1fr`: entre 761 y 1100 px la portada ya es de una columna, así que
   la tarjeta mide ~470 px y partirla en dos dejaba 71 px para el nombre («Alexandria Real
   E…»). Por debajo de 240 px por columna se apilan solas, también en móvil apaisado. */
.home-mv-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s5)}
.home-mv-cols>div{min-width:0}
.home-mv-h{font-size:var(--fs-xs);color:var(--label);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:var(--s2)}
.home-mv{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0;
  color:inherit;text-decoration:none;min-width:0}
.home-mv:hover .home-mv-n{color:var(--accent-text)}
/* el nombre envuelve a dos líneas en vez de cortarse: en la columna estrecha de la portada
   se quedaba en «Alexandria Real E…» (−25 % del texto) tanto en móvil como en escritorio */
.home-mv-n{flex:1;min-width:0;overflow:hidden;font-size:var(--fs-md);font-weight:600;
  line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.home-mv-p{font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}

/* avisos: cada fila es badge + texto del disparo + antigüedad (docs/64 §9) */
.home-av{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0;
  border-top:1px solid var(--line);color:inherit;text-decoration:none}
.home-av:first-of-type{border-top:0}
.home-av.unread .home-av-l{color:var(--ink);font-weight:600}
.home-av-l{flex:1;min-width:0;font-size:var(--fs-sm);color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-more{color:var(--accent-text);text-decoration:none;font-weight:600}
.home-more:hover{text-decoration:underline}
.home-av-d{font-size:var(--fs-xs);color:var(--faint);white-space:nowrap}

/* visto recientemente */
.home-strip-h{font-size:var(--fs-xs);color:var(--label);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:var(--s2)}
.home-strip{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s1);
  scrollbar-width:thin}
.home-chipco{display:inline-flex;align-items:center;gap:var(--s2);flex:none;
  border:1px solid var(--line-2);border-radius:var(--radius-pill);
  padding:var(--s1) var(--s3) var(--s1) var(--s1);color:var(--ink);
  text-decoration:none;font-size:var(--fs-md);font-weight:600;max-width:220px}
.home-chipco span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-chipco:hover{border-color:var(--accent-text);color:var(--accent-text)}

/* «qué hay dentro» (solo portada vacía) */
.home-cat-big{font-size:var(--fs-3xl);font-weight:800;color:var(--accent-text);
  line-height:1;letter-spacing:-.02em}
.home-cat-l{margin:var(--s1) 0 var(--s3);color:var(--muted);font-size:var(--fs-md)}
.home-cat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--s1);font-size:var(--fs-md);color:var(--ink-2)}
.home-cat-list b{font-variant-numeric:tabular-nums}

/* explorar el catálogo */
.home-explora{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s3)}
.home-ex{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);
  text-align:left;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius-el);padding:var(--s3) var(--s4);cursor:pointer;
  font:inherit;color:inherit;transition:border-color var(--dur-fast) var(--ease)}
.home-ex:hover{border-color:var(--accent-text)}
.home-ex .hx-t{font-weight:700;font-size:var(--fs-base)}
.home-ex .hx-d{font-size:var(--fs-sm);color:var(--muted);line-height:1.4}
.home-ex .icon-chip{margin-bottom:var(--s1)}

@media (max-width:1100px){
  .home-grid{grid-template-columns:1fr}
  .home-col-full{grid-column:auto}
}
@media (max-width:760px){
  .home{padding:var(--s5) var(--s4) var(--s8)}
  /* el saludo lleva el nombre del usuario: a 28 px parte en dos líneas y se come
     un tercio de la primera pantalla */
  .home-hello h1{font-size:var(--fs-2xl)}
  .home-head{margin-bottom:var(--s5)}
  /* la píldora lleva tres datos y `.badge` va en `nowrap`: en pantallas de 320 px se
     salía de la pantalla */
  .home-fresh{margin-left:0;width:100%}
  .home-fresh .badge{white-space:normal}
  .home-mv-cols{grid-template-columns:1fr;gap:var(--s4)}
  /* Filas de una línea → dos. En 390 px el nombre se quedaba en la elipsis
     («United Pa…», «Alexandria Real E…», −44 % del texto): la etiqueta baja a la
     segunda línea, alineada bajo el nombre, y el nombre puede envolver. */
  .home-ev{display:grid;grid-template-columns:46px 30px minmax(0,1fr);
    grid-template-areas:"d i n" ". . l";column-gap:var(--s2);row-gap:1px;
    align-items:center;padding:var(--s3) 0}
  .home-ev-d{grid-area:d;width:auto}
  .home-ev-ic{grid-area:i}
  .home-ev-n{grid-area:n;white-space:normal;overflow:visible;line-height:1.25}
  .home-ev-l{grid-area:l;justify-self:start}
  /* La fila del aviso ya no lleva nombre de empresa (el texto del disparo lo nombra):
     dos columnas, no tres, o la del medio quedaba vacía con un hueco de 196 px entre
     la píldora y la hora. */
  .home-av{display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"b f" "l l";column-gap:var(--s2);row-gap:2px;
    align-items:center;padding:var(--s3) 0}
  .home-av>.badge{grid-area:b;justify-self:start}
  .home-av-l{grid-area:l;-webkit-line-clamp:3;line-height:1.3}
  .home-av-d{grid-area:f;justify-self:end}
}

.chip{border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:6px 14px;
  margin:0 6px 6px 0;cursor:pointer;font-size:13px;color:var(--ink)}
.chip:hover{border-color:var(--accent-text);color:var(--accent-text)}

/* company */
.company{flex:1;overflow:auto;padding:20px 22px 60px}
/* `flex-wrap` y `min-width:0`: la fila de controles mide 611 px y solo envolvía por debajo de
   760 px, así que entre 760 y ~1000 (teléfono apaisado, ventana estrecha) empujaba la ficha
   fuera y era la VISTA la que scrolleaba en horizontal (docs/64 §9.3.ter) */
.company-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:14px;flex-wrap:wrap}
.company-head>*{min-width:0}
.company-head h1{margin:0;font-size:22px;display:flex;align-items:center;gap:10px}

/* logotipos (con monograma de fondo como fallback) */
.logo{flex:none;position:relative;display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;color:#fff;font-weight:700;overflow:hidden;width:24px;height:24px;font-size:10px}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--panel)}
.logo.sm{width:22px;height:22px;font-size:11px}
.logo.lg{width:34px;height:34px;font-size:13px;border-radius:8px}
.logo.lg img{border-radius:8px}
/* Cabecera de la ficha (docs/58 F3): una línea sobria con mercado y divisa; los
   identificadores viven en un desplegable, no sueltos en el título. */
.company-head h1 .c-tk{font-size:var(--fs-md);font-weight:700;color:var(--label);
  background:var(--surface-2);border-radius:6px;padding:2px 8px;letter-spacing:.02em}
.c-meta{color:var(--muted);font-size:var(--fs-md);margin-top:5px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.c-meta .c-dot{color:var(--faint-deco)}
.c-meta .c-ccy{color:var(--label)}
.c-ids{font-size:var(--fs-sm)}
.c-ids summary{cursor:pointer;color:var(--label);list-style:none;
  border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:1px 10px}
.c-ids summary::-webkit-details-marker{display:none}
.c-ids summary:hover{color:var(--ink-2);border-color:var(--line-3)}
/* abierto ocupa la fila entera: como elemento flexible medía lo que su píldora
   («Identificadores», 98 px) y la lista de dentro se recortaba a la mitad */
.c-ids[open]{flex:1 1 100%}
.c-ids[open] summary{color:var(--ink-2);width:max-content}
.c-ids dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:8px 0 0;
  padding:10px 12px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-el);box-shadow:var(--shadow)}
.c-ids dt{color:var(--label);font-weight:600}
.c-ids dd{margin:0;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* tarjeta «En tu cartera» */
.pf-row.has-pos{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-el);box-shadow:var(--shadow);padding:8px 12px}
.pf-row.has-pos .pf-title{font-weight:700}
.pf-row.has-pos .pf-acts{display:flex;gap:6px;margin-left:6px}
.pf-row.has-pos .wl-btn{margin-top:0}
/* (estilos de .wl-btn unificados arriba, docs/58 F2) */
/* controles de cartera/radar por usuario (#48) */
.pf-controls{margin-top:10px}
.pf-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-pos{font-size:12px;color:var(--muted)}
.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* gestión de usuarios (panel admin, #48) */
.users{flex:1;overflow:auto;padding:20px 22px 60px}
.usr-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 14px 14px}
.usr-form input,.usr-form .sg-sel{padding:8px 11px;border:1px solid var(--line-2);border-radius:8px;font-size:14px}
.usr-list{display:flex;flex-direction:column;gap:10px}
.usr-card{background:var(--panel);border:1px solid var(--line-2);border-radius:12px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  cursor:pointer;transition:border-color .15s,box-shadow .15s}
.usr-card .usr-main{flex:1;min-width:0}          /* el nombre pegado al avatar, no centrado */
.usr-card .usr-open{margin-left:auto;white-space:nowrap}
.usr-card:hover{border-color:var(--accent-text);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.usr-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.usr-main .pill{background:var(--surface-2);border-radius:6px;padding:1px 8px;font-size:12px}
.usr-main .pill.pf{background:var(--warn-soft);color:var(--warn-text)}
.usr-sub{color:var(--muted);font-size:12px}
.usr-date{color:var(--muted);font-size:12px}
.usr-open{color:var(--accent-text);font-size:13px;font-weight:600;white-space:nowrap}
/* ficha de usuario (detalle) */
.usr-detail-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.usr-detail-head h1{margin:0;font-size:20px}
.usr-detail-head .pill{background:var(--surface-2);border-radius:6px;padding:1px 8px;font-size:12px}
.usr-detail-head .pill.pf{background:var(--warn-soft);color:var(--warn-text)}
.usr-meta{color:var(--muted);font-size:12px;margin-bottom:16px}
.usr-ficha{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:12px;padding:16px;max-width:760px}
.usr-fld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.usr-fld input{padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;font-size:14px;color:var(--text)}
.usr-detail-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;max-width:760px}
.usr-detail-acts .wl-btn,.usr-detail-acts .btn{margin-top:0}
.usr-fld select{padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;font-size:14px;color:var(--text);background:var(--panel)}
.usr-age{color:var(--muted);font-size:11px;margin-top:2px}
.usr-datelbl{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.usr-datelbl input{padding:7px 9px;border:1px solid var(--line-2);border-radius:8px}
.usr-avbtn,.usr-avchg{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:8px;padding:7px 11px;font-size:13px;background:var(--panel)}
.usr-avbtn:hover,.usr-avchg:hover{background:var(--surface-2)}
.usr-av-prev{width:40px;height:40px;border-radius:50%;object-fit:cover;display:none}
.usr-av-prev.on{display:inline-block}
/* avatar redondo (imagen o monograma) */
.uav{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  overflow:hidden;color:#fff;font-weight:700;flex:none;vertical-align:middle}
.uav img{width:100%;height:100%;object-fit:cover}
.uav.sm{width:30px;height:30px;font-size:13px}
.uav.lg{width:52px;height:52px;font-size:22px}
.user{display:flex;align-items:center;gap:8px}
.user .uav{margin-right:2px}
/* chip de estado de solo lectura (buzón limitado, app pública) */

/* tonos con contraste suficiente para texto blanco (docs/58 F0): los anteriores
   (var(--accent), var(--warn), var(--teal)) se quedaban en 2,1-2,5:1 */
.sg-status-chip.propuesta{background:var(--accent-fill)}
.sg-status-chip.aceptada{background:var(--violet-fill)}
.sg-status-chip.planificada{background:var(--teal-fill)}
.sg-status-chip.realizada{background:var(--warn-text)}
.sg-status-chip.terminada{background:var(--pos-text)}
.sg-status-chip.descartada{background:var(--label)}
/* tabla comparativa de cartera */
.cartera{flex:1;overflow:auto;padding:20px 22px 60px}  /* scroll propio (.main es overflow:hidden) */
.cartera-head{margin-bottom:12px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px}
.cartera-head h1{margin:0 0 4px;font-size:22px}
.cartera-sub{color:var(--muted);font-size:13px;flex:1 1 auto}
.pf-ccy{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:600;color:var(--muted)}
.pf-ccy select{padding:6px 10px;border:1px solid var(--line-2);border-radius:9px;background:var(--panel-2);
  color:var(--ink);font-size:13px;font-weight:600;outline:none;cursor:pointer}
/* banda de totales de la cartera */
.pf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.pf-kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:13px 16px;display:flex;flex-direction:column;gap:2px}
.pf-kpi-l{color:var(--label);font-size:var(--fs-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em}
.pf-kpi-v{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-top:2px}
.pf-kpi-v small{font-size:12px;font-weight:600}
.pf-kpi-n{color:var(--muted);font-size:11px}   /* aclaración bajo la cifra (base del P&L) */
/* beneficio verde/rojo */
.pnl-up{color:var(--pos-text);font-weight:600}
.pnl-down{color:var(--neg-text);font-weight:600}
.pf-unpriced{opacity:.5}
.pf-empty{text-align:center;color:var(--muted);padding:22px}
/* sub-pestañas de «Mi cartera» */
.pf-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line);
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.pf-tab{white-space:nowrap}
.pf-tab{background:none;border:none;padding:9px 16px;font-size:14px;font-weight:600;color:var(--muted);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.pf-tab:hover{color:var(--ink)}
.pf-tab.active{color:var(--accent-text);border-bottom-color:var(--accent-text)}
.pf-chart-wrap{position:relative;height:340px;margin-bottom:8px}
/* proyección (docs/63) */
.proj-lead{font-size:var(--fs-md);color:var(--ink-2);margin:0 0 14px;max-width:70ch}
.proj-lead b{color:var(--ink)}
/* ⚠️ `minmax(0,…)` en las dos pistas: con el `minmax(260px,340px)` de antes los campos no
   encogían y la 2ª columna se salía por debajo de la tarjeta de al lado (docs/63 A1). */
.proj-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px;margin-bottom:16px;align-items:start}
.proj-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.proj-form{min-width:0}
.proj-fields{display:grid;grid-template-columns:1fr;gap:12px}
.proj-fields label{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-xs);font-weight:600;color:var(--muted);min-width:0}
.fld-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.fld-top>span:first-child{overflow-wrap:anywhere}
/* el interruptor es una fila, no una columna: `.proj-fields label` es más específico */
.proj-fields label.switch{flex-direction:row;align-items:center;gap:8px;font-weight:600;color:var(--ink-2)}
.proj-fields input,.proj-fields select{width:100%;min-width:0;padding:9px 11px;border:1px solid var(--line-2);
  border-radius:var(--radius-el);font-size:var(--fs-sm);color:var(--ink);background:var(--panel-2);outline:none;
  font-variant-numeric:tabular-nums}
.proj-fields input:focus-visible,.proj-fields select:focus-visible{border-color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-soft)}
.proj-fields input.bad{border-color:var(--neg-text)}
.fld-u{font-weight:600;color:var(--faint);font-size:var(--fs-xs)}
.fld-help{font-weight:400;color:var(--faint);font-size:var(--fs-xs);line-height:1.35}
.fld-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,110px);gap:10px}
.proj-more{border-top:1px solid var(--line);padding-top:10px}
.proj-more summary{cursor:pointer;font-size:var(--fs-xs);font-weight:600;color:var(--accent-text);list-style:none}
.proj-more summary::-webkit-details-marker{display:none}
.proj-more summary::after{content:" ▾"}
.proj-more[open] summary::after{content:" ▴"}
.proj-more .proj-fields{margin-top:12px}
.proj-switch{margin-top:2px}
.proj-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.proj-base-row{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-sm);padding:5px 0;
  border-bottom:1px solid var(--line)}
.proj-base-row:last-child{border-bottom:0}
.proj-base-row b{color:var(--ink);font-variant-numeric:tabular-nums}
.proj-base-row.total{font-weight:700;color:var(--ink);border-top:1px solid var(--line-2);border-bottom:0;margin-top:2px;padding-top:8px}
.proj-prog{margin-bottom:14px}
.proj-prog:last-child{margin-bottom:0}
.proj-prog-top{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-xs);color:var(--muted);
  margin-bottom:5px;font-weight:600}
.proj-prog-top b{color:var(--ink);font-variant-numeric:tabular-nums}
.proj-bar{height:9px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.proj-bar span{display:block;height:100%;background:var(--accent-fill);border-radius:6px;transition:width .4s}
.proj-eta{font-size:var(--fs-sm);color:var(--ink-2);margin-top:5px}
.proj-eta b{color:var(--ink)}
.proj-chart-opts{display:flex;gap:8px;flex-wrap:wrap}
/* especificidad por encima de `.seg`, que se declara más abajo y si no gana siempre */
.proj-chart-opts .proj-only-mobile{display:none}
.proj-break{display:grid;gap:8px}
.proj-break-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--surface-2)}
.proj-break-bar i{display:block;height:100%}
.proj-break-list{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--fs-sm)}
.proj-break-list span{display:inline-flex;align-items:center;gap:7px;color:var(--muted)}
.proj-break-list b{color:var(--ink);font-variant-numeric:tabular-nums}
.proj-break-list i{width:9px;height:9px;border-radius:3px;flex:none}
.proj-table-card summary{cursor:pointer;font-weight:600;font-size:var(--fs-sm);color:var(--ink-2);
  display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}
.proj-table-card summary::-webkit-details-marker{display:none}
.proj-table-card[open] summary{margin-bottom:12px}
@media(max-width:760px){
  .proj-grid{grid-template-columns:1fr}
  .proj-chart-opts .proj-only-mobile{display:inline-flex}
  /* los tres selectores no caben junto al título: van a su propia fila, a lo ancho */
  #proj-chart-card .card-head{flex-wrap:wrap}
  #proj-chart-card .ch-txt{flex:1 1 100%}
  .proj-chart-opts{width:100%;margin-top:4px}
  .proj-chart-opts .seg{flex:1 1 auto}
  .proj-chart-opts .seg button{flex:1;white-space:nowrap;padding:6px 8px}
  .proj-table-card summary{flex-direction:column;align-items:stretch;gap:8px}
  .proj-break-list{flex-direction:column;gap:6px}
}
.pf-table{width:100%;border-collapse:collapse;font-size:13px}
.pf-table th,.pf-table td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.pf-th{cursor:pointer;user-select:none;text-align:right;color:var(--muted);font-weight:600;
  position:sticky;top:0;background:var(--panel)}
.pf-th:hover{color:var(--ink)}
.pf-th.pf-name{text-align:left}
.pf-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.pf-table td.pf-name{text-align:left}
.pf-link{color:var(--ink);text-decoration:none;font-weight:600}
.pf-link:hover{color:var(--accent-text)}
.pf-tk{color:var(--muted);font-weight:400;font-size:12px}
.pf-sec{color:var(--muted)}
.pf-flag{margin-right:5px}
.pf-flag.star{color:var(--warn)}
.pf-flag.wl{color:var(--pos-text)}
.pf-table tbody tr:nth-child(even){background:var(--bg)}
.pf-table tbody tr:hover{background:var(--accent-soft)}

/* ---- Mi Radar (docs/32) ---- */
.rd-table td,.rd-table th{text-align:right;font-variant-numeric:tabular-nums}
.rd-td,.rd-th{text-align:right}
.rd-name{text-align:left;min-width:150px}
.rd-link{color:var(--ink);text-decoration:none;font-weight:600}
.rd-link:hover{color:var(--accent-text)}
.rd-tk{display:block;color:var(--muted);font-weight:400;font-size:11px}
/* separación visual entre bloque de momento y bloque de valoración */
.rd-g-val{border-left:1px solid var(--line-2)}
th.rd-g-val{border-left:1px solid var(--line-2)}
/* chip semáforo (múltiplo/RPD/SMA coloreado) */
.rd-c{display:inline-block;padding:2px 7px;border-radius:var(--radius-pill);font-weight:600;
  font-size:12px;line-height:1.4}
.rd-c.rd-verde{background:var(--accent-soft);color:var(--accent-text)}
.rd-c.rd-ambar{background:var(--warn-soft);color:var(--warn-text)}
.rd-c.rd-rojo{background:var(--neg-soft);color:var(--neg-text)}
.rd-c.rd-na{background:var(--panel-2);color:var(--muted)}
.rd-c[title]{cursor:pointer}      /* toque → popover con la explicación (móvil) */
.rd-pct{display:block;font-size:10px;font-weight:500;opacity:.8;margin-top:1px}
.rd-atip{display:block;font-size:10px;font-weight:600;color:var(--warn-text);margin-top:1px;cursor:help}

.rd-filter{margin-left:auto}
.switch{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.switch input{width:16px;height:16px;accent-color:var(--accent-text)}

/* selector de moneda de presentación (#23) */
.ccy-wrap{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.ccy-wrap select{border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--ink);
  font-size:12px;font-weight:600;padding:5px 7px;cursor:pointer}

/* selector segmentado de rango de años (rediseño #45: track gris + pastilla blanca) */
.seg{display:inline-flex;background:var(--surface-2);border-radius:var(--radius-el);padding:3px}
.seg button{border:0;background:transparent;padding:6px 12px;font-size:var(--fs-sm);font-weight:600;
  /* --muted sobre el gris del segmentado se queda en 4,27:1 (docs/58 F7) */
  color:var(--label);cursor:pointer;border-radius:8px}
.seg button:hover{color:var(--ink)}
.seg button.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.08)}

/* banda de KPIs (Resumen) */
.kpi-band{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
.about{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px}
.about-head{font-size:12px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.03em;font-weight:700;margin-bottom:6px}
.about-tag{font-weight:700;font-size:15px;margin-bottom:4px}
.about-text{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.about-src{display:inline-block;margin-top:8px;font-size:12px;color:var(--muted);
  text-decoration:none} .about-src:hover{text-decoration:underline}
/* pestaña «Información general» (perfil en tarjetas, sug. #19) */
.overview{margin-top:4px}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;align-items:start;margin-bottom:16px}
.ov-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:14px 18px}
.ov-card-h{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;margin-bottom:12px}
.ov-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.ov-row:last-child{border-bottom:0}
.ov-k{color:var(--ink);font-weight:600;white-space:nowrap}
.ov-v{color:var(--muted);text-align:right}
.ov-v .up{color:var(--pos-text)} .ov-v .down{color:var(--neg-text)}
.ov-v a{color:var(--accent-text);text-decoration:none} .ov-v a:hover{text-decoration:underline}
.ov-desc .about-text{color:var(--ink);margin:0}
.ov-msg{color:var(--muted);padding:16px}
@media(max-width:700px){.ov-grid{grid-template-columns:1fr}}

.kpi-lead{display:flex;flex-wrap:wrap;gap:28px}
.kpi-lead-item .kpi-l{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.kpi-lead-v{font-size:22px;font-weight:800;margin-top:3px;letter-spacing:-.01em}
.kpi-lead-v .up{color:var(--pos-text)} .kpi-lead-v .down{color:var(--neg-text)}
.kpi-chips{margin-top:12px}
/* Ejercicio fuera de su propia serie (docs/71 §19): aviso encima de la rejilla de KPI */
.kpi-atip{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--warn-soft);
  color:var(--ink);font-size:.86rem;line-height:1.45;display:flex;flex-wrap:wrap;gap:6px 10px;
  align-items:baseline}
.kpi-atip>span:not(.badge){flex:1 1 100%}
.kpi-is-atip .kpi-v{text-decoration:underline dotted var(--warn-text);text-underline-offset:4px}
.kpi-is-atip .kpi-why{color:var(--warn-text)}
.kpi-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border-radius:var(--radius-pill);
  padding:4px 11px;margin-right:6px;font-size:12px;font-weight:600;color:var(--ink-2)}
.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:1180px){.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:980px){.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;
  box-shadow:var(--shadow)}
.kpi .kpi-l{font-size:var(--fs-xs);color:var(--label);text-transform:uppercase;
  letter-spacing:.04em;font-weight:600;line-height:1.25;min-height:2.5em;
  display:flex;align-items:flex-start}
.kpi .kpi-v{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-top:4px}

/* barra de comparación de empresas (chips + mini-buscador «comparar con») */
.compare-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.compare-chips{display:flex;gap:6px;flex-wrap:wrap}
.cmp-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  border-radius:20px;padding:3px 6px 3px 11px;color:#fff;background:var(--c,var(--blue))}
.cmp-chip.base{padding:3px 11px}
.cmp-x{flex:none;background:rgba(255,255,255,.32);border:0;color:#fff;border-radius:50%;
  width:16px;height:16px;font-size:12px;line-height:1;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center}
.cmp-x:hover{background:rgba(255,255,255,.6)}
.cmp-wrap{position:relative;width:240px;max-width:100%}
#cmp-search{width:100%;padding:7px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:13px;background:var(--panel-2);outline:none}
#cmp-search:focus{border-color:var(--accent-text);background:var(--panel);box-shadow:0 0 0 3px var(--accent-soft)}
.cmp-wrap .results{top:40px}
.cmp-note{font-size:12px;color:var(--warn-text);background:var(--warn-soft);border-radius:6px;padding:3px 10px}

/* barra «series en la gráfica» (sug. #15): chips de las métricas seleccionadas
   (de cualquier pestaña) + botones para sumar el preset de la pestaña o limpiar */
.series-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.series-lbl{font-size:12px;color:var(--muted);font-weight:600}
.series-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.series-btn{flex:none;padding:4px 10px;font-size:var(--fs-sm)}   /* variante compacta del botón */

.chart-row{display:flex;gap:12px;align-items:stretch;margin-bottom:16px}
.chart-card{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-card);box-shadow:var(--shadow);padding:16px 18px;height:340px;flex:1;min-width:0}
.chart-row .chart-card{margin-bottom:0}
#chart{width:100%!important;height:100%!important}
.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:14px;text-align:center;pointer-events:none}

/* tabs (rediseño #45: subrayado tipo referencia) */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:14px}
.tab{padding:9px 14px;border-radius:8px 8px 0 0;cursor:pointer;font-size:13px;font-weight:600;
  color:var(--muted);background:transparent;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink-2)}
.tab.active{color:var(--accent-text);border-bottom-color:var(--accent-text)}

/* table */
.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);overflow:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
thead th{position:sticky;top:0;background:var(--panel-2);z-index:5;font-size:11px;color:var(--faint);
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  text-align:right;padding:10px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap}
thead th.metric-col{text-align:left;left:0;z-index:6}
tbody td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:hover{background:var(--panel-2)}
.metric-col{position:sticky;left:0;background:var(--panel);text-align:left!important;min-width:300px;
  font-weight:600;z-index:4}
/* sombra al borde de la columna fija: sin ella no se entiende que la tabla se
   desplaza en horizontal y los años recientes parecen no existir (docs/58 §4.2) */
.table-wrap.is-scrollable .metric-col::after{content:"";position:absolute;top:0;right:0;
  width:10px;height:100%;transform:translateX(100%);pointer-events:none;
  background:linear-gradient(90deg,rgba(16,24,40,.07),transparent)}
.metric-col .pick{width:100%}
tbody tr:hover .metric-col{background:var(--panel-2)}
/* fila de subtítulo de sección */
tr.section td{background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;position:sticky;left:0}
/* el rótulo de sección viaja con el scroll horizontal: si no, al desplazar la tabla
   hacia los años recientes las bandas quedaban en blanco (docs/58 F2) */
tr.section .sec-label{position:sticky;left:12px;display:inline-block}
tr.section td.sec-cell{overflow:hidden}
tbody tr.section:hover{background:var(--surface-2)}
/* fila de total/subtotal */
tr.total .metric-col{font-weight:700}
tr.total td{font-weight:700;border-bottom:1px solid var(--line-3);
  border-top:1px solid var(--line-2);background:var(--panel-2)}
tr.total:hover td{background:var(--panel-2)}
tr.total .val{font-weight:700}
.val{font-weight:600}
.g{display:block;font-size:11px;font-weight:600;margin-top:1px}
.g.up{color:var(--pos-text)} .g.down{color:var(--neg-text)} .g.flat{color:var(--muted)}
.na{color:var(--line-3)}
.pick{display:inline-flex;align-items:center;gap:8px}
.pick input{width:15px;height:15px;cursor:pointer}
.swatch{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;visibility:hidden}
.unit{font-size:11px;color:var(--muted);font-weight:500;margin-left:4px}

/* icono ℹ de ayuda por fila (sug. #17) + popover */
.info{display:inline-flex;align-items:center;justify-content:center;font-size:1em;
  width:1.35em;height:1.35em;margin-left:.35em;color:var(--muted);cursor:help;
  border-radius:50%;flex:none;user-select:none;font-style:normal;transition:color .1s}
.info:hover,.info:focus{color:var(--accent-text);background:var(--accent-soft);outline:none}
.tooltip{position:absolute;z-index:1000;max-width:240px;padding:8px 11px;
  background:#1f2733;color:var(--surface-2);font-size:12px;line-height:1.4;
  border-radius:8px;box-shadow:0 4px 16px rgba(20,30,60,.28);pointer-events:none}

/* favoritos (sug. #16): corazón por fila + panel a la izquierda de la gráfica */
.fav-btn{border:none;background:none;cursor:pointer;padding:0 2px;font-size:17px;line-height:1;
  color:var(--line-3);flex:none;transition:transform .1s}
.fav-btn:hover{transform:scale(1.2)}
.fav-btn.on{color:var(--neg-text)}
.fav-panel{width:210px;flex:none;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-card);box-shadow:var(--shadow);padding:10px 0;align-self:stretch;
  max-height:340px;overflow:auto}
.fav-head{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:2px 12px 8px;border-bottom:1px solid var(--line)}
.fav-title{font-size:12px;font-weight:700;color:var(--ink)}
.fav-bulk{display:flex;gap:4px}
.fav-bulk-btn{border:1px solid var(--line);background:var(--panel-2);border-radius:6px;cursor:pointer;
  font-size:12px;padding:3px 7px;color:var(--muted)}
.fav-bulk-btn:hover{color:var(--ink);border-color:var(--accent-text)}
.fav-list{list-style:none;margin:0;padding:6px 0 0}
.fav-item{display:flex;align-items:center;gap:7px;padding:6px 12px}
.fav-item:hover{background:var(--panel-2)}
.fav-item.missing{opacity:.45}
.fav-dot{width:10px;height:10px;border-radius:50%;flex:none}
.fav-label{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;cursor:pointer}
.fav-item.missing .fav-label{cursor:default}
.fav-label:hover{color:var(--accent-text)}
.fav-eye{border:none;background:none;cursor:pointer;padding:0 2px;font-size:17px;flex:none;
  opacity:.4;filter:grayscale(1)}
.fav-eye:hover{opacity:.8}
.fav-eye.on{opacity:1;filter:none}
.fav-eye:disabled{cursor:default;opacity:.2}
.fav-x{border:none;background:none;cursor:pointer;color:var(--muted);font-size:18px;
  line-height:1;padding:0 2px;flex:none}
.fav-x:hover{color:var(--neg-text)}
@media (max-width:760px){
  .chart-row{flex-direction:column}
  .fav-panel{width:auto;align-self:auto;max-height:none;order:-1}
}

/* historial de dividendos */
.div-history{margin-top:18px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-card);box-shadow:var(--shadow);padding:14px 16px;max-width:420px}
.div-history h3{margin:0 0 10px;font-size:14px}
.div-history #div-history-body{max-height:320px;overflow:auto}
table.mini{width:100%;font-size:13px}
table.mini thead th{position:sticky;top:0;background:var(--panel-2)}
table.mini td{padding:6px 10px}
table.mini td:last-child{font-weight:600}

/* sparkline inline en la columna de métrica */
.spark{display:inline-block;width:62px;height:16px;margin-left:auto;flex:none;vertical-align:middle}
.spark path{fill:none;stroke-width:1.4}
.spark .area{stroke:none;opacity:.10}

/* nota al pie de la tabla */
.table-note{color:var(--muted);font-size:12px;margin:10px 2px 0;max-width:640px}

/* informes */
.reports{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:6px 0 10px}
table.rep{width:100%;font-variant-numeric:tabular-nums}
table.rep thead th{position:sticky;top:0;background:var(--panel-2);font-size:12px;color:var(--muted);
  font-weight:600;text-align:left;padding:10px 16px;border-bottom:1px solid var(--line)}
table.rep td{padding:9px 16px;border-bottom:1px solid var(--line)}
table.rep tr:hover{background:var(--panel-2)}
a.dl{color:var(--accent-text);text-decoration:none;font-weight:600}
a.dl:hover{text-decoration:underline}
.rep-msg{color:var(--muted);font-size:13px;padding:10px 16px;margin:0}

/* buzón de sugerencias */
.buzon{flex:1;overflow:auto;padding:20px 22px 60px}  /* sug. #37: ocupa el 100% del ancho */
.buzon h1{font-size:22px;margin:0 0 6px}
.buzon-intro{color:var(--muted);font-size:13px;margin:0 0 16px}
.sg-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:14px 16px;margin-bottom:22px}
#sg-body{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  font:14px/1.45 inherit;resize:vertical;background:var(--panel-2);outline:none}
#sg-body:focus{border-color:var(--accent-text);background:var(--panel);box-shadow:0 0 0 3px var(--accent-soft)}
.sg-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sg-thumb{position:relative;width:64px;height:64px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sg-thumb img{width:100%;height:100%;object-fit:cover}
.sg-rm{position:absolute;top:2px;right:2px;width:18px;height:18px;border:0;border-radius:50%;
  background:rgba(20,26,40,.7);color:#fff;font-size:12px;line-height:1;cursor:pointer}
.sg-actions{display:flex;align-items:center;gap:14px;margin-top:12px}
.sg-attach{font-size:13px;color:var(--accent-text);cursor:pointer;font-weight:600}
.sg-ctx{font-size:12px;color:var(--muted);flex:1}

/* ===========================================================================
   BADGE · un solo componente para todos los estados (docs/58 F2)
   ---------------------------------------------------------------------------
   Convivían seis maneras de decir lo mismo: `.sg-status-chip` (buzón, relleno
   sólido), `.cal-est` («previsto»), `.rd-badge` («cartera»), `.px-badge`
   (activo/desactivado), `.pill` (rastreador) y texto suelto en el panel. Ahora
   hay UNA pieza con un tono por significado:

     .badge            neutro          .badge.ok        correcto / activo
     .badge.warn       previsto/aviso  .badge.bad       error / caído
     .badge.info       informativo     .badge.new       novedad
     .badge.solid      relleno sólido (para listas de estado, como el buzón)
     .badge.sm         más pequeño
   =========================================================================== */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;
  border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:700;
  line-height:1.5;letter-spacing:.02em;white-space:nowrap;
  background:var(--surface-2);color:var(--label)}
.badge.ok{background:var(--accent-soft);color:var(--accent-text)}
.badge.warn{background:var(--warn-soft);color:var(--warn-text)}
.badge.bad{background:var(--neg-soft);color:var(--neg-text)}
/* ⚠️ COLISIÓN de nombres (encontrada en docs/61 §A2): `.info` a secas es el icono ℹ de
   ayuda por fila (línea ~771), que fija `width:1.35em;height:1.35em`. Un `.badge.info`
   heredaba ese ancho y salía como una píldora de 14 px con el texto desbordado por
   fuera. La variante devuelve el tamaño a «lo que ocupe su contenido». */
.badge.info{background:var(--blue-soft);color:var(--blue-text);
  width:auto;height:auto;margin-left:0;cursor:inherit}
.badge.new{background:var(--violet-soft);color:var(--violet-text)}
.badge.sm{padding:1px 7px;font-size:10px}
.badge.solid{color:#fff;background:var(--label)}
.badge.solid.ok{background:var(--accent-fill)}
.badge.solid.warn{background:var(--warn-text)}
.badge.solid.bad{background:var(--neg-text)}
.badge.solid.info{background:var(--teal-fill)}
.badge.solid.new{background:var(--violet-fill)}
/* punto de estado delante del texto (para «activo», «en pausa»…) */
.badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  flex:none}

/* Los nombres antiguos siguen funcionando: son el mismo componente. */
.cal-est,.rd-badge,.px-badge,.sp-net-c,.sg-status-chip,.soon-tag{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;
  border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:700;
  line-height:1.5;white-space:nowrap;background:var(--surface-2);color:var(--label)}
.cal-est{margin-left:auto;background:var(--warn-soft);color:var(--warn-text);
  text-transform:uppercase;letter-spacing:.4px}
.rd-badge{margin-left:6px;background:var(--accent-soft);color:var(--accent-text);
  font-size:10px;padding:1px 7px}
.px-badge.on{background:var(--accent-soft);color:var(--accent-text)}
.px-badge.off{background:var(--neg-soft);color:var(--neg-text)}
.sg-status-chip{color:#fff}
.soon-tag{margin-left:auto;text-transform:uppercase;letter-spacing:.04em;
  font-size:10px;padding:1px 7px}

/* ===========================================================================
   BOTÓN · un solo componente (docs/58 F2)
   ---------------------------------------------------------------------------
   Había doce clases distintas (`.btn`, `.wl-btn`, `.px-btn`, `.series-btn`,
   `.btn-add-cash`, `.cal-refresh`, `.sg-cancel`, `.sp-errbtn`…), cada una con
   su tamaño, su radio y su color. Ahora todas son `.btn` + una variante:

     .btn            relleno principal (acción de la pantalla)
     .btn.ghost      secundaria: misma caja, sin peso
     .btn.outline    terciaria: borde de acento, fondo del panel (toggles)
     .btn.subtle     enlace-botón: sin borde ni fondo hasta el hover
     .btn.danger     acción destructiva
     .btn.on         estado activo de un toggle
     .btn-sm         compacto  ·  .btn-icon  cuadrado, solo icono
   =========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--accent-fill);color:#fff;border:1px solid transparent;
  border-radius:var(--radius-el);padding:9px 18px;
  font:inherit;font-size:var(--fs-base);font-weight:600;line-height:1.2;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease)}
.btn:hover{background:var(--accent-fill-hov)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:default;transform:none}
.btn:disabled:hover{background:var(--accent-fill)}

.btn.ghost{background:var(--panel);color:var(--ink-2);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--panel-2);border-color:var(--line-3)}
.btn.outline{background:var(--panel);color:var(--accent-text);border-color:var(--accent-fill)}
.btn.outline:hover{background:var(--accent-soft)}
.btn.subtle{background:none;color:var(--muted);border-color:transparent;padding:6px 10px}
.btn.subtle:hover{background:var(--surface-2);color:var(--ink-2)}
.btn.danger{background:var(--danger-fill);color:#fff;border-color:transparent}
.btn.danger:hover{background:var(--danger-fill);filter:brightness(.92)}
.btn.ghost.danger{background:var(--panel);color:var(--neg-text);border-color:var(--neg-text)}
.btn.ghost.danger:hover{background:var(--neg-soft)}
.btn.on{background:var(--accent-fill);color:#fff;border-color:transparent}
.btn.on:hover{background:var(--accent-fill-hov)}
.btn-sm{padding:6px 11px;font-size:var(--fs-sm)}
.btn-icon{padding:0;width:34px;height:34px;flex:none}
.btn .ico{width:16px;height:16px}

/* Alias de compatibilidad: el HTML y el JS que aún dicen `wl-btn`, `px-btn`… reciben
   exactamente el mismo componente. Se conservan porque son nombres usados en decenas de
   plantillas de cadena; el estilo ya es UNO solo. */
.wl-btn,.px-btn,.series-btn,.btn-add-cash,.cal-refresh,.sg-cancel,.scr-preset,.cur-open{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--panel);color:var(--ink-2);border:1px solid var(--line-2);
  border-radius:var(--radius-el);padding:6px 13px;
  font:inherit;font-size:var(--fs-md);font-weight:600;line-height:1.2;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease)}
.wl-btn:hover,.px-btn:hover,.series-btn:hover,.btn-add-cash:hover,.cal-refresh:hover,
.sg-cancel:hover,.cur-open:hover{background:var(--panel-2);border-color:var(--line-3)}
.wl-btn{color:var(--accent-text);border-color:var(--accent-fill)}
.wl-btn:hover{background:var(--accent-soft);border-color:var(--accent-fill)}
.wl-btn.on{background:var(--accent-fill);color:#fff;border-color:transparent}
.wl-btn.ghost{color:var(--ink-2);border-color:var(--line-2)}
.wl-btn.ghost:hover{background:var(--panel-2);border-color:var(--line-3)}
.wl-btn.danger,.wl-btn.ghost.danger{color:var(--neg-text);border-color:var(--neg-text)}
.wl-btn.danger:hover,.wl-btn.ghost.danger:hover{background:var(--neg-soft)}
.wl-btn:disabled,.px-btn:disabled{opacity:.55;cursor:default}
.sg-msg{font-size:13px;margin-top:10px;min-height:1em}
.sg-msg.ok{color:var(--pos-text)} .sg-msg.err{color:var(--neg-text)}
.sg-list{display:flex;flex-direction:column;gap:12px}
.sg-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:12px 16px}
.sg-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sg-li-date{font-size:12px;color:var(--muted);margin-right:auto}
.sg-li-ctx{font-size:11px;background:var(--surface-2);color:var(--ink);border-radius:6px;padding:1px 8px}
.sg-del{margin-left:auto;background:none;border:none;cursor:pointer;font-size:15px;
  opacity:.55;border-radius:6px;padding:2px 6px;line-height:1;transition:opacity .15s,background .15s}
.sg-del:hover{opacity:1;background:var(--neg-soft)}
.sg-li-body{font-size:14px;white-space:pre-wrap;word-break:break-word}
.sg-li-imgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* `max-width`: una captura apaisada a 80 px de alto puede medir 250 px de ancho y en
   móvil se salía de la tarjeta del buzón */
.sg-li-img{height:80px;max-width:100%;border:1px solid var(--line);border-radius:8px;
  object-fit:cover;cursor:zoom-in}
.sg-thumb img{cursor:zoom-in}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(15,20,32,.82);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:32px}
.lightbox img{max-width:95vw;max-height:92vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.sg-chip{font-size:11px;font-weight:700;border-radius:20px;padding:2px 10px;color:#fff;text-transform:uppercase;letter-spacing:.03em}
/* color por estado (chip antiguo + select de la tarjeta) */
.sg-chip.propuesta,.sg-status-sel.propuesta{--st:var(--accent)}
.sg-chip.aceptada,.sg-status-sel.aceptada{--st:var(--violet-fill)}
.sg-chip.planificada,.sg-status-sel.planificada{--st:var(--warn)}
.sg-chip.realizada,.sg-status-sel.realizada{--st:var(--warn-text)}
.sg-chip.terminada,.sg-status-sel.terminada{--st:var(--green)}
.sg-chip.descartada,.sg-status-sel.descartada{--st:var(--label)}
.sg-chip{background:var(--st,var(--accent))}

/* barra de filtro/orden del buzón */
.sg-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.sg-q{flex:1;min-width:160px;border:1px solid var(--line);border-radius:9px;padding:8px 11px;
  font:14px/1.4 inherit;background:var(--panel-2);outline:none}
.sg-q:focus{border-color:var(--accent-text);background:var(--panel);box-shadow:0 0 0 3px var(--accent-soft)}
.sg-sel{border:1px solid var(--line);border-radius:9px;padding:8px 10px;font:13px inherit;
  background:var(--panel-2);cursor:pointer;outline:none}
.sg-count{font-size:12px;color:var(--muted);margin-left:auto}

/* select de estado en la tarjeta (coloreado por estado) */
.sg-status-sel{font-size:11px;font-weight:700;border-radius:20px;padding:3px 26px 3px 11px;
  color:#fff;border:0;cursor:pointer;background:var(--st,var(--accent));text-transform:uppercase;
  letter-spacing:.03em;-webkit-appearance:none;appearance:none;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.sg-status-sel option{color:var(--ink);background:var(--panel);text-transform:none}

/* editar/guardar/cancelar */
.sg-edit{background:none;border:none;cursor:pointer;font-size:14px;opacity:.55;
  border-radius:6px;padding:2px 6px;line-height:1;transition:opacity .15s,background .15s}
.sg-edit:hover{opacity:1;background:var(--surface-2)}
.sg-edit-box{margin-top:2px}
.sg-edit-ta{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  font:14px/1.45 inherit;resize:vertical;min-height:90px;background:var(--panel);outline:none}
.sg-edit-ta:focus{border-color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-soft)}
.sg-edit-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.sg-save{padding:6px 14px;font-size:13px}

.sg-edit-thumbs{margin-top:10px}
.sg-edit-attach{margin-right:auto}

/* reordenar a mano (drag & drop) */
.sg-grip{cursor:grab;color:var(--muted);font-size:12px;line-height:1;user-select:none;
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);white-space:nowrap}
.sg-grip:hover{background:var(--line);color:var(--text)}
.sg-grip:active{cursor:grabbing}
.sg-draggable .sg-card{cursor:grab}
.sg-draggable .sg-card .sg-status-sel,.sg-draggable .sg-card .sg-edit,
.sg-draggable .sg-card .sg-del{cursor:pointer}
.sg-card.sg-dragging{opacity:.5;outline:2px dashed var(--accent);outline-offset:2px}

/* overlay de carga */
.overlay{position:fixed;inset:0;background:rgba(20,26,40,.32);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:50}
.overlay-box{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);
  padding:26px 34px;text-align:center;min-width:240px}
.overlay-txt{font-weight:700;font-size:15px;margin-top:14px}
.overlay-sub{color:var(--muted);font-size:12px;margin-top:4px}
.spinner{width:34px;height:34px;margin:0 auto;border-radius:50%;
  border:3px solid var(--accent-soft);border-top-color:var(--accent-text);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== transición de entrada al cambiar de vista (buzón #53) ===== */
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.view-anim{animation:viewIn .26s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){.view-anim{animation:none}}

/* ===== modal reutilizable (alta a cartera / usuarios), integrado con el botón atrás ===== */
body.modal-open{overflow:hidden}
.modal-back{position:fixed;inset:0;z-index:65;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(15,20,32,.44);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .2s ease}
.modal-back.show{opacity:1}
.modal{background:var(--panel);border-radius:18px;box-shadow:var(--shadow-pop);
  width:100%;max-width:440px;max-height:90vh;overflow:auto;
  transform:translateY(12px) scale(.98);opacity:.6;transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .22s}
.modal.wide{max-width:600px}
.modal-back.show .modal{transform:none;opacity:1}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px 10px}
.modal-head h2{margin:0;font-size:18px;font-weight:800;color:var(--ink)}
.modal-x{flex:none;width:32px;height:32px;border:0;border-radius:9px;background:var(--panel-2);
  color:var(--muted);font-size:16px;cursor:pointer;line-height:1;transition:background .15s,color .15s}
.modal-x:hover{background:var(--neg-soft);color:var(--neg-text)}
.modal-body{padding:4px 22px 22px}
.modal-lead{margin:0 0 14px;color:var(--ink-2);font-size:14px;line-height:1.5}
.modal-fields{display:grid;gap:12px;margin-bottom:18px}
.modal-fields label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;
  color:var(--muted)}
.modal-fields input,.modal-fields select{padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;
  font-size:14px;color:var(--ink);background:var(--panel-2);outline:none;transition:border-color .15s,box-shadow .15s}
.modal-fields input:focus,.modal-fields select:focus{border-color:var(--accent-text);background:var(--panel);box-shadow:0 0 0 3px var(--accent-soft)}
.modal-note{margin:-8px 0 16px;color:var(--muted);font-size:12px;line-height:1.5}
.modal-acts{display:flex;justify-content:flex-end;gap:10px;align-items:center}
.modal-acts .wl-btn,.modal-acts .btn{margin-top:0}
/* los formularios de usuario reflotados en un modal → columna limpia */
.modal .usr-form{display:grid;gap:12px;padding:0}
.modal .usr-form input,.modal .usr-form .sg-sel{width:100%}
.modal .usr-detail{padding:0}
.modal .usr-detail-acts{max-width:none}

/* cabecera de la lista de usuarios (título + botón crear) */
.users-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.users-head h1{margin:0}

/* pestaña Accionariado (insider trading + propietarios, sug. #20) */
.insiders{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:18px 20px;margin-top:-1px}
.ins-band{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:14px}
.ins-kpi .kpi-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.ins-kpi-v{font-size:20px;font-weight:700;margin-top:2px}
.ins-kpi-v.up{color:var(--pos-text)} .ins-kpi-v.down{color:var(--neg-text)}
.ins-subtabs{display:flex;gap:8px;margin-bottom:12px}
/* segmentado: la misma pieza que el selector de años de la ficha, no un tercer estilo */
.ins-subs{display:inline-flex;background:var(--surface-2);border-radius:var(--radius-el);padding:3px;gap:2px}
.ins-sub{border:0;background:none;color:var(--muted);font-size:var(--fs-md);
  font-weight:600;padding:6px 13px;border-radius:8px;cursor:pointer}
.ins-sub:hover{color:var(--ink)}
.ins-sub.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.ins-table{width:100%;border-collapse:collapse;font-size:13px}
.ins-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
.ins-table th.num,.ins-table td.num{text-align:right}
.ins-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.ins-table tr:hover td{background:var(--panel-2)}
.ins-owner{font-weight:600;color:var(--ink)}
.ins-role{font-size:11px;color:var(--muted);font-style:italic}
.ins-side{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:10px;
  min-width:54px;text-align:center}
.ins-side.ins-buy{background:var(--accent-soft);color:var(--pos-text)}
.ins-side.ins-sell{background:var(--neg-soft);color:var(--neg-text)}
.ins-side.ins-other{background:var(--accent-soft);color:var(--accent-text)}
.ins-nat{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.ins-table a{color:var(--accent-text);text-decoration:none;font-size:15px}
.ins-note{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.5}

/* ====================== RESPONSIVE MÓVIL (sug. #41) ====================== */
@media (max-width:760px){
  /* sidebar → cajón off-canvas controlado por la hamburguesa */
  .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:50;width:250px;max-width:84vw;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:2px 0 24px rgba(0,0,0,.35)}
  .sidebar.open{transform:translateX(0)}
  .menu-btn{display:inline-flex}
  .bottombar{display:flex}

  /* topbar compacta: buscador a ancho completo, sin etiqueta de usuario */
  .topbar{padding:10px 12px;gap:10px}
  .search-wrap{max-width:none}
  .user{display:none}

  /* deja sitio a la barra inferior fija (~58px) en las zonas con scroll */
  .company{padding:14px 12px 84px}
  .cartera{padding:14px 12px 84px}
  .buzon{padding:16px 14px 84px}
  .empty{padding:34px 18px 84px}
  .users{padding:14px 12px 84px}

  /* cabecera de cartera/radar: el `margin-left:auto` del filtro, pensado para una
     sola línea, dejaba la etiqueta «Moneda» suelta y alineada a la derecha al
     envolver. En móvil el subtítulo ocupa su fila y los dos controles comparten la
     siguiente, uno a cada lado. */
  .cartera-head{align-items:center}
  .cartera-sub{flex:1 1 100%}
  .rd-filter{margin-left:0}
  .cartera-head .pf-ccy{margin-left:auto}

  /* cabecera de empresa: controles en su propia línea, sin solaparse */
  .company-head{flex-direction:column;gap:10px}
  .company-head h1{font-size:18px}
  .controls{flex-wrap:wrap;gap:10px}

  /* gráfica un poco más baja */
  .chart-card{height:280px}
  .kpi-lead{gap:18px}
  .kpi-lead-v{font-size:18px}

  /* matriz financiera: columna métrica ESTRECHA de ancho fijo (la etiqueta se
     trunca con «…»; el nombre completo está en el icono ℹ) para que se vean varios
     años a la vez. Sombra = pista de «hay más →», snap por columna de año. */
  /* ancho fijo solo en cabecera + filas de datos; las filas de sección llevan
     colspan y deben poder mostrar el subtítulo completo → se excluyen */
  #table th.metric-col,#table td.metric-col:not([colspan]){width:200px;min-width:200px;
    max-width:200px;box-shadow:6px 0 8px -6px rgba(15,20,32,.22)}
  #table td.metric-col:not([colspan]){white-space:normal}   /* permite el salto de línea */
  #table .metric-col .pick{display:flex;align-items:center;gap:5px;max-width:100%}
  /* etiqueta hasta 2 líneas (elipsis solo si aún no cabe) → legible sin ensanchar */
  #table .metric-col .mlabel{flex:1;min-width:0;line-height:1.2;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #table .metric-col input{width:14px;height:14px}
  #table thead th,#table tbody td{padding:6px 7px;font-size:13px}
  .company .table-wrap{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  #table thead th:not(.metric-col),#table tbody td:not(.metric-col){scroll-snap-align:end}
  #table .val{font-size:13px}
  /* subtítulo de sección: el texto interno queda fijo al scroll horizontal (sticky sobre
     el span). En móvil la fila repite los años como guía de columna: la celda del
     subtítulo (sec-cell) queda pegada a la izquierda y los años (sec-year) van discretos. */
  #table tr.section .sec-label{position:sticky;left:8px;display:inline-block}
  #table tr.section td.sec-cell{overflow:hidden}
  #table tr.section td.sec-year{position:static;text-align:right;color:var(--faint);
    font-weight:700;font-size:11px;padding:6px 7px}

  /* opciones de la gráfica plegables tras un botón */
  .chart-opts-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;
    width:100%;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink-2);
    border-radius:10px;padding:10px 13px;font-size:13px;font-weight:600;cursor:pointer;
    margin-bottom:12px}
  .chart-opts{display:none}
  .chart-opts.open{display:block}

  /* banda de KPIs compacta */
  .kpi-band{padding:14px}
  .kpi-lead{gap:14px 20px}
  .kpi-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;
    margin-top:12px;padding-top:12px}
  .kpi{padding:11px 12px}
  .kpi .kpi-v{font-size:17px}
  .kpi-chips{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .kpi-chips::-webkit-scrollbar{display:none}

  /* pestañas de la ficha: tira deslizable en 1 fila (no se apilan) con snap;
     JS auto-centra la activa. Coherente con las sub-pestañas de «Mi cartera». */
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:2px;
    scroll-snap-type:x proximity;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;white-space:nowrap;scroll-snap-align:start;font-size:13px;padding:9px 12px}

  /* modal como «hoja» que sube desde abajo (más natural en móvil, #53) */
  .modal-back{align-items:flex-end;padding:0}
  .modal{max-width:none;border-radius:20px 20px 0 0;max-height:92vh;
    transform:translateY(100%);opacity:1}
  .modal.wide{max-width:none}
  .modal-back.show .modal{transform:none}
  .modal-body{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
}

/* Fase 3: botón para plegar las opciones de la gráfica (solo móvil) */
.chart-opts-toggle{display:none}

/* ============ Fase 1 móvil: tablas de lista → tarjetas (cartera/radar) ============
   La tabla ancha (.table-wrap.rows-cards) y su barra de orden móvil se conmutan por
   breakpoint con el listado de tarjetas (.cards). Desktop: tabla; móvil: tarjetas. */
.cards{display:none}
.cards-bar{display:none}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:12px 14px}
.mcard.pf-unpriced{opacity:.55}
.mcard-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-decoration:none;
  color:var(--ink);font-size:15px;margin-bottom:11px}
.mcard-head b{font-weight:700}
.mcard-head .pf-tk,.mcard-head .rd-tk{color:var(--muted);font-weight:400;font-size:12px}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px}
.cg-cell{display:flex;flex-direction:column;gap:1px;min-width:0}
.cg-l{font-size:11px;color:var(--muted);font-weight:600}
.cg-v{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis}
.mcard-more{margin-top:10px}
.mcard-more>summary{font-size:12px;color:var(--accent-text);cursor:pointer;font-weight:600;
  list-style:none;padding:4px 0}
.mcard-more>summary::-webkit-details-marker{display:none}
.mcard-more>summary::after{content:" ▾"}
.mcard-more[open]>summary::after{content:" ▴"}
.mcard-more[open]>summary{margin-bottom:9px}
@media (max-width:760px){
  .rows-cards{display:none}
  .cards{display:flex;flex-direction:column;gap:10px}
  .cards-bar{display:flex;justify-content:flex-end;margin-bottom:12px}
  .cards-order{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
    font-weight:600}
  .cards-order select{border:1px solid var(--line-2);border-radius:9px;background:var(--panel-2);
    color:var(--ink);font-size:13px;font-weight:600;padding:7px 10px;outline:none;cursor:pointer}
  /* accionariado: la tabla densa se apila (etiqueta:valor), sin scroll horizontal */
  .ins-table thead{display:none}
  .ins-table,.ins-table tbody,.ins-table tr,.ins-table td{display:block;width:100%}
  .ins-table tr{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:6px 13px}
  .ins-table tr:hover td{background:none}
  .ins-table td{border:0;padding:6px 0;display:flex;justify-content:space-between;
    align-items:baseline;gap:14px;text-align:right}
  .ins-table td:not(:last-child){border-bottom:1px solid var(--line)}
  .ins-table td::before{content:attr(data-label);color:var(--muted);font-weight:600;
    text-align:left;font-size:12px;flex:none}
  .ins-owner,.ins-role{text-align:right}
}

/* ===================== Calendario de eventos (buzón #44) ===================== */
/* .main es overflow:hidden → cada sección hace su propio scroll (como .company/.buzon).
   Sin esto el contenido del calendario se recortaba y no se podía desplazar. */
.calendario{flex:1;overflow:auto;padding:20px 22px 60px}
.cal-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.cal-sub{color:var(--muted);font-size:13px}
.cal-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.cal-chip{border:1px solid var(--line);background:var(--panel);color:var(--muted);
  border-radius:16px;padding:5px 12px;font-size:13px;cursor:pointer;font-weight:600}
.cal-chip:hover{border-color:var(--accent-text);color:var(--accent-text)}
.cal-chip.active{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.cal-refresh{margin-left:auto}
.cal-msg{color:var(--muted);font-size:14px;padding:12px 0}
.cal-hint{color:var(--muted);font-size:12px}
.cal-month{margin-bottom:22px}
.cal-mtitle{font-size:13px;text-transform:capitalize;color:var(--ink);margin:0 0 8px;
  padding-bottom:5px;border-bottom:2px solid var(--line);font-weight:700}
.cal-row{display:flex;align-items:center;gap:11px;padding:8px 6px;border-bottom:1px solid var(--line);
  font-size:14px}
.cal-row:hover{background:var(--panel-2)}
.cal-day{min-width:62px;color:var(--muted);font-size:12px;text-align:right}
.cal-day b{color:var(--ink);font-size:15px;margin-right:3px;font-variant-numeric:tabular-nums}
/* ⚠️ ancho AUTO: cuando el icono era un emoji cabía en 20 px, pero desde el rediseño es
   un `icon-chip sm` de 30 y se salía de su propia caja (docs/58 §8.4.septdecies) */
.cal-ic{flex:none;display:inline-flex;text-align:center}
.cal-co{min-width:210px;color:var(--ink);text-decoration:none;font-weight:600}
.cal-co:hover{color:var(--accent-text)}
.cal-tk{color:var(--muted);font-weight:400;font-size:12px}
.cal-lbl{color:var(--muted)}
.cal-amt{color:var(--pos-text);font-weight:600;font-variant-numeric:tabular-nums}

/* color por tipo en el borde izquierdo del icono */
.cal-row.cal-earnings{box-shadow:inset 3px 0 0 -1px var(--accent)}
.cal-row.cal-ex_div{box-shadow:inset 3px 0 0 -1px var(--warn-text)}
.cal-row.cal-pay_div{box-shadow:inset 3px 0 0 -1px var(--green)}
.cal-row.cal-agm{box-shadow:inset 3px 0 0 -1px var(--violet)}

/* panel «Próximos eventos» en la ficha (pestaña Información general) */
.events-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:14px 16px;margin:16px 0}
.ev-head{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;
  font-weight:700;margin-bottom:8px}
.ev-msg{color:var(--muted);font-size:13px;margin:4px 0}
.ev-row{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px solid var(--line);
  font-size:14px;flex-wrap:wrap}
.ev-row:last-child{border-bottom:0}
.ev-date{min-width:92px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
/* `min-width` en ch, no 0: con la fila envolviendo, un `min-width:0` dejaba el nombre en
   31 px al final de la primera línea en vez de bajarlo entero a la siguiente */
.ev-lbl{color:var(--muted);flex:1 1 auto;min-width:14ch}

@media (max-width:760px){
  /* `anywhere`: con la fila apretada, un nombre de una sola palabra larga
     («LyondellBasell») no cabía y se cortaba a la mitad sin poder envolver */
  .cal-co{min-width:0;flex:1;overflow-wrap:anywhere}
  .cal-lbl{display:none}
  .cal-day{min-width:54px}
  /* era el único título de vista a 28 px en móvil: el resto van a 22 */
  .cal-head h1{font-size:22px}
}

/* ---------- rastreador / spider (panel admin, docs/29 F4) ---------- */
.spider{flex:1;overflow:auto;padding:20px 22px 60px}  /* scroll+padding propios (.main es overflow:hidden) */
.sp-top h1{margin:0}
.sp-intro{color:var(--muted);font-size:13px;margin:6px 0 16px;max-width:820px}
.sp-lanes{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sp-lane{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-card);
  padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.sp-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sp-head b{font-size:15px}
.sp-bar{height:9px;background:var(--surface-2);border-radius:var(--radius-pill);overflow:hidden}
.sp-fill{height:100%;background:var(--accent);border-radius:var(--radius-pill);
  transition:width .5s ease}
.sp-stats{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink-2)}
.sp-stats b{color:var(--ink)}
.sp-cur{font-size:13px;color:var(--muted);min-height:18px}
.sp-cur b{color:var(--accent-text)}
.sp-err{font-size:12px;color:var(--neg-text);word-break:break-word}
.sp-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:2px}
.sp-rate{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:2px}
.sp-rate input{width:88px;padding:6px 8px;border:1px solid var(--line-2);
  border-radius:var(--radius-el);font-size:13px}
.sp-rate input:focus{border-color:var(--accent-text);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
/* ⚠️ Aquí vivía una segunda definición de `.btn.ghost` (del panel del rastreador) que pisaba
   a la canónica de §botones con `color:var(--muted)`. Sobre `--surface-2` eso se queda en
   4,27:1 y lo cazó `research/ui_a11y.py` al meter los avisos automáticos (docs/64). El botón
   canónico es uno solo (docs/58 §8.4.septies): la duplicada se borra. */
/* estado del sistema (disco/CPU/RAM) */
.sp-sys{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:18px}
.sp-sys-card{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-card);
  padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.sp-sys-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.sp-sys-top b{font-size:17px;color:var(--ink)}
.sp-sys-sub{font-size:12px;color:var(--muted)}
.sp-fill.warm{background:var(--warn)}
.sp-fill.hot{background:var(--red)}
/* errores desplegables por carril */
.sp-errbtn{cursor:pointer;user-select:none;border-radius:var(--radius-pill);padding:1px 6px}
.sp-errbtn.has{color:var(--neg-text)}
.sp-errbtn:hover{background:var(--accent-soft)}
.sp-errlist{display:none;margin-top:4px}
.sp-errlist.open{display:block;max-height:260px;overflow:auto;border-top:1px solid var(--line-2);padding-top:8px}
.sp-err-row{padding:6px 0;border-bottom:1px solid var(--line-2)}
.sp-err-tk{font-size:13px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;gap:8px}
.sp-err-at{font-weight:400;color:var(--faint);font-size:11px}
.sp-err-msg{font-size:12px;color:var(--neg-text);word-break:break-word;margin-top:2px}
.sp-err-empty{font-size:12px;color:var(--muted);padding:6px 0}
/* log de peticiones externas del rastreador (auditoría) — panel único a lo ancho, abajo del todo */
.sp-logpanel{grid-column:1/-1;width:100%;margin-top:14px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;padding:14px 16px}
.sp-logpanel.hidden{display:none}
.sp-logpanel-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.sp-logpanel-head b{font-size:14px;color:var(--ink)}
.sp-logpanel-sub{font-size:12px;color:var(--muted)}
.sp-logpanel-head .btn{margin-left:auto}
.sp-loglist{max-height:420px;overflow:auto}
.sp-log-row{display:flex;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid var(--line-2);font-size:12px;font-variant-numeric:tabular-nums}
.sp-log-st{font-weight:700;flex:0 0 auto;min-width:52px}
.sp-log-row.ok .sp-log-st{color:var(--green,var(--pos-text))}
.sp-log-row.ko .sp-log-st{color:var(--neg-text)}
.sp-log-at{color:var(--faint);flex:0 0 auto;white-space:nowrap}
.sp-log-ms{color:var(--muted);flex:0 0 auto;white-space:nowrap;min-width:56px;text-align:right}
.sp-log-m{color:var(--muted);flex:0 0 auto;min-width:40px}
.sp-log-url{color:var(--ink);word-break:break-all;flex:1 1 auto;min-width:0}
/* Uso de red por carril: proxy vs IP propia (docs/44 F3) */
.sp-net{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.sp-net-c{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--surface-2,var(--surface-2));
  color:var(--muted);border:1px solid var(--line-2);white-space:nowrap}
.sp-net-c.via{color:var(--brand,var(--pos-text));border-color:color-mix(in srgb,var(--brand,var(--pos-text)) 30%,transparent)}
.sp-net-c.leak{color:#fff;background:var(--red,var(--neg-text));border-color:var(--red,var(--neg-text));font-weight:600}
.sp-net-c.api{color:var(--muted)}
/* Intención de la petición + IP de salida (docs/44 F2) */
.sp-log-px{flex:0 0 auto;min-width:120px;color:var(--muted);font-size:11px}
.sp-log-px.own{color:var(--neg-text);font-weight:600}
.sp-log-pu{color:var(--brand,var(--pos-text));font-style:normal;font-weight:600}
.sp-log-row.plan{border-bottom:0;padding-top:8px}
.sp-log-row.plan .sp-log-st{color:var(--brand,var(--pos-text))}
.sp-log-plan{color:var(--brand,var(--pos-text));font-weight:600;flex:1 1 auto;min-width:0}

/* Fondos en «Mi cartera» (visión patrimonio, docs/33) */
.pf-funds-h { margin: 1.4rem 0 .6rem; font-size: 1.05rem; font-weight: 700; }
.pf-fund { font-weight: 600; }

/* Liquidez en «Mi cartera» (docs/33) */
.pf-cash-head { display: flex; align-items: center; justify-content: space-between; margin: 1.4rem 0 .6rem; }
.pf-cash-head .pf-funds-h { margin: 0; }
.btn-add-cash{border-radius:var(--radius-pill);padding:5px 13px;font-size:var(--fs-sm)}
.pf-cash-act { white-space: nowrap; }
.pf-cash-act button { background: none; border: none; cursor: pointer; font-size: .95rem; padding: .1rem .25rem; opacity: .7; }
.pf-cash-act button:hover { opacity: 1; }
.cash-form { display: flex; flex-direction: column; gap: .8rem; }
.cash-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; }
.cash-form input, .cash-form select { padding: .5rem; border: 1px solid var(--line-2);
  border-radius: 8px; font: inherit; font-weight: 400; }
.cash-row { display: flex; gap: .8rem; }
.cash-row label { flex: 1; }
.cash-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .4rem; }

/* Pool de proxies gratis del rastreador (docs/39) */
.sp-proxies { margin: .6rem 0 1rem; }
.px-card { background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 14px; padding: .9rem 1rem; }
.px-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.px-head > div:first-child { font-size: 1.02rem; }

.px-mini { font-size: .78rem; color: var(--muted, var(--muted)); }
.px-btn{margin-left:auto;background:var(--accent-fill);color:#fff;border-color:transparent}
.px-btn:hover{background:var(--accent-fill-hov);border-color:transparent}
.px-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .6rem; margin-top: .7rem; }
.px-src { border: 1px solid var(--border, var(--line-2)); border-radius: 10px; padding: .5rem .6rem; }
.px-src-top { margin-bottom: .2rem; }
.px-via { color: var(--pos-text); font-weight: 600; }
.px-dir { color: var(--warn-text); font-weight: 600; }
/* fuente sin proxies utilizables → sus peticiones se quedan «sin salida» (docs/44) */
.px-src.starved { border-color: var(--neg-text, var(--neg-text)); background: rgba(192, 57, 43, .06); }
.px-noexit { color: var(--neg-text, var(--neg-text)); font-weight: 600; }
.px-note { font-size: .76rem; color: var(--muted, var(--muted)); margin: .6rem 0 0; }

/* Relé de Yahoo en Apps Script (docs/46 §5): reparto de vías + cuota de Google */
.rl-quota { margin-top: .7rem; font-size: .88rem; }
.rl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .6rem; margin-top: .7rem; }
.rl-row { border: 1px solid var(--border, var(--line-2)); border-radius: 10px; padding: .5rem .6rem; }
.rl-top { display: flex; align-items: center; gap: .4rem; }
.rl-info { cursor: help; color: var(--muted, var(--muted)); font-size: .8rem; }
.rl-share { margin-left: auto; font-weight: 700; color: var(--muted, var(--muted)); }
.rl-share.good { color: var(--pos-text); }
.rl-bar { height: 6px; border-radius: 999px; background: var(--border, var(--line-2));
  margin: .35rem 0 .3rem; overflow: hidden; }
.rl-bar > i { display: block; height: 100%; background: var(--accent, var(--accent)); }
.rl-win { display: flex; gap: .3rem; }
.rl-win button { padding: .2rem .6rem; font: inherit; font-size: .76rem; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel);
  color: var(--muted, var(--muted)); border-radius: 999px; }
.rl-win button.on { background: var(--accent-fill); color: #fff; border-color: transparent;
  font-weight: 600; }

/* Actualizar el listado de empresas (docs/42, Feature 1) */
.sp-universe { margin-bottom: 18px; }
.uni-card { background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 14px; padding: .9rem 1rem; }
.uni-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.uni-head > div:first-child { font-size: 1.02rem; }
.uni-mini { font-size: .82rem; color: var(--muted, var(--muted)); margin-top: .5rem; }
.uni-err { color: var(--neg-text); }
.uni-per { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
#uni-refresh-btn { margin-left: auto; padding: .35rem .8rem; border: 1px solid var(--line-2);
  background: var(--accent-fill); color: #fff; border-radius: 8px; font: inherit;
  font-weight: 600; cursor: pointer; }
#uni-refresh-btn:disabled { opacity: .6; cursor: default; }

/* Pestaña «Diagnóstico» (docs/42, Feature 2) */
.dg-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dg-top h2 { margin: 0; font-size: 1.1rem; }
#dg-refresh { padding: .35rem .8rem; border: 1px solid var(--line-2);
  background: var(--accent-fill); color: #fff; border-radius: 8px; font: inherit;
  font-weight: 600; cursor: pointer; }
.dg-intro { font-size: .82rem; color: var(--muted, var(--muted)); margin: .4rem 0 1rem; }
.dg-run { border: 1px solid var(--border, var(--line-2)); border-radius: 12px; margin-bottom: 1rem;
  overflow: hidden; }
.dg-run-head { display: flex; align-items: baseline; gap: .6rem 1rem; flex-wrap: wrap;
  padding: .55rem .8rem; background: var(--panel-2); border-bottom: 1px solid var(--border, var(--line-2)); }
.dg-mini { font-size: .76rem; color: var(--muted, var(--muted)); }
.dg-tablewrap { overflow-x: auto; }
.dg-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.dg-table th, .dg-table td { text-align: left; padding: .32rem .6rem; border-bottom: 1px solid var(--line-2, var(--line-2));
  white-space: nowrap; vertical-align: top; }
.dg-table th { font-size: .72rem; color: var(--muted, var(--muted)); font-weight: 600; }
.dg-t { font-variant-numeric: tabular-nums; color: var(--muted, var(--muted)); }
.dg-ms, .dg-st { font-variant-numeric: tabular-nums; text-align: right; }
.dg-st.bad { color: var(--neg-text); font-weight: 700; }
.dg-d { white-space: normal; }
.dg-url { color: var(--muted, var(--muted)); word-break: break-all; font-size: .76rem; }
/* Intención (docs/44 F2): columna en las filas HTTP + fila «plan» que las encabeza */
.dg-pu { color: var(--muted, var(--muted)); font-size: .76rem; max-width: 240px; }
.dg-plan td { color: var(--brand, var(--pos-text)); font-weight: 600; background: var(--surface-2); }
/* Fases locales (spans) y resumen de lo más lento (docs/44 F4) */
.dg-slow .dg-ms { color: var(--neg-text, var(--neg-text)); font-weight: 700; }
.dg-top-fases { font-size: .78rem; color: var(--muted, var(--muted)); margin: 2px 0 6px; display: flex;
  flex-wrap: wrap; gap: 10px; }
.dg-top-item { background: var(--surface-2, var(--surface-2)); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 2px 8px; }
.dg-ph { font-size: .68rem; padding: .06rem .4rem; border-radius: 999px; background: var(--blue-soft); color: var(--blue); }
.dg-ph.bg { background: var(--violet-soft); color: var(--violet); }
.dg-c { font-size: .7rem; padding: .08rem .45rem; border-radius: 999px; font-weight: 600; }
.dg-c.dg-hit { background: var(--accent-soft); color: var(--pos-text); }
.dg-c.dg-red { background: var(--blue-soft); color: var(--blue); }
.dg-c.dg-miss { background: var(--warn-soft); color: var(--warn-text); }
.dg-c.dg-skip { background: var(--line-2); color: var(--muted); }
.dg-c.dg-na { background: transparent; color: var(--faint-deco); }

/* ---------- Análisis de empresas (auditoría por carril, docs/45 — panel admin) ---------- */
/* .main es overflow:hidden → la sección hace su propio scroll (como .spider/.company).
   Sin esto el contenido se recortaba y no se podía desplazar. */
.audits{flex:1;overflow:auto;padding:20px 22px 60px}
#audits .card{background:var(--panel);border:1px solid var(--line-2);border-radius:16px;
  padding:16px 18px;margin-bottom:14px}
#audits .pill,.modal .au-find .pill{display:inline-block;background:var(--surface-2);border-radius:6px;
  padding:1px 8px;font-size:12px;white-space:nowrap}
#audits .pill.ok{background:var(--accent-soft);color:var(--pos-text)}
#audits .pill.warn{background:var(--warn-soft);color:var(--warn-text)}
#audits .pill.bad{background:var(--neg-soft);color:var(--neg-text)}
.au-order b{display:block;margin-bottom:10px}
.au-order-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.au-order-row label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.au-order-row select,.au-order-row input{padding:8px 10px;border:1px solid var(--line-2);
  border-radius:9px;font:inherit;background:var(--panel);color:var(--ink)}
.au-order-row input{width:90px}
.au-msg{margin-top:10px;font-size:13px;color:var(--muted)}
.au-run{cursor:pointer;transition:border-color .15s}
.au-run:hover{border-color:var(--accent-text)}
.au-run-head{display:flex;align-items:center;gap:12px}
.au-run-t{display:flex;flex-direction:column;min-width:0}
.au-run-sub{color:var(--muted);font-size:12px}
.au-run-chips{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.au-run-sum{margin-top:10px;font-size:13px;line-height:1.5}
.au-run-doc{margin-top:6px;font-size:12px;color:var(--muted)}
.au-emptybox{color:var(--muted);font-size:13px}
.au-openbox>b{display:block;margin-bottom:10px}
.au-find{border-left:3px solid var(--line-2);padding:8px 0 8px 12px;margin-bottom:8px}
.au-find.bug{border-left-color:var(--neg)}
.au-find.warn{border-left-color:var(--warn)}
.au-find-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.au-find-meta{color:var(--muted);font-size:12px}
.au-find-head .au-fst{margin-left:auto;padding:4px 8px;border:1px solid var(--line-2);
  border-radius:8px;font-size:12px;background:var(--panel)}
.au-find-txt{font-size:13px;margin-top:5px;line-height:1.5;white-space:pre-wrap}
.au-find-fix{font-size:12px;margin-top:4px;color:var(--pos-text)}
.au-tablewrap{overflow-x:auto}
.au-table{width:100%;border-collapse:collapse;font-size:13px}
.au-table th,.au-table td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line-2);
  vertical-align:top}
.au-table th{color:var(--muted);font-weight:600;font-size:12px}
.modal.wide:has(.au-table){max-width:min(960px,94vw)}
@media (max-width:760px){
  .au-order-row{flex-direction:column;align-items:stretch}
  .au-order-row input{width:100%}
  .au-run-chips{margin-left:0;width:100%}
}

/* ============ Padding móvil de las secciones definidas DESPUÉS del bloque
   RESPONSIVE de arriba (calendario/spider/audits). Va al final a propósito:
   el @media no añade especificidad, así que un override colocado antes de la
   regla base perdía el empate y no se aplicaba. ============ */
@media (max-width:760px){
  .calendario{padding:14px 12px 84px}
  .spider{padding:14px 12px 84px}
  .audits{padding:14px 12px 84px}
}

/* ============ Cursos (docs/54) ============
   Sección de aprendizaje: catálogo → ficha de curso → lección con preguntas.
   Usa los tokens del sistema de diseño (docs/design). Columna de lectura acotada
   (~72ch) porque el contenido es texto largo, y todo se apila en móvil. */
/* `.main` es overflow:hidden con altura fija → la sección hace su PROPIO scroll
   (igual que .cartera/.buzon/.calendario/.spider/.audits). Sin `flex:1;overflow:auto`
   el contenido se corta y no hay scroll vertical. */
.cursos{flex:1;overflow:auto;padding:22px 26px 40px}
#cur-catalog,#cur-course,#cur-lesson{max-width:1100px}
.cur-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cur-head h1{display:flex;align-items:center;gap:10px;margin:0;font-size:22px}
.cur-empty{padding:26px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-card);color:var(--muted);display:flex;flex-direction:column;gap:6px}
.cur-empty b{color:var(--ink)}

/* --- catálogo --- */
.cur-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:16px}
/* `min-width:0`: el mínimo automático de una tarjeta de rejilla es su contenido, y el
   título del libro va en `nowrap` → la tarjeta medía 543 px en una pantalla de 366 y se
   salía por la derecha. Con esto la elipsis del `cur-book-tag` sí actúa. */
.cur-card{min-width:0;display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow);
  text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease}
.cur-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.cur-card-top{display:flex;align-items:center;justify-content:space-between}
.cur-card h3{margin:0;font-size:16px;line-height:1.3}
.cur-card p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cur-lvl{font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--label)}
.cur-lvl.lvl-principiante{background:var(--pos-soft);color:var(--pos-text)}
.cur-lvl.lvl-intermedio{background:var(--blue-soft);color:var(--blue)}
.cur-lvl.lvl-avanzado{background:var(--warn-soft);color:var(--warn-text)}
.cur-lvl.lvl-experto{background:var(--violet-soft);color:var(--violet)}
.cur-bar{height:6px;border-radius:var(--radius-pill);background:var(--surface-2);overflow:hidden}
.cur-bar span{display:block;height:100%;background:var(--accent);border-radius:var(--radius-pill)}
.cur-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted)}
.cur-pend{color:var(--warn-text);font-weight:600}

/* encargos pendientes (solo dueño) */
.cur-reqbox{margin-top:14px;padding:12px 14px;background:var(--panel-2);border:1px dashed var(--line-2);
  border-radius:var(--radius-card);display:flex;flex-direction:column;gap:6px;font-size:13px}
.cur-reqbox small{color:var(--muted)}
.cur-req{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cur-req-t{font-weight:600}
.cur-req-l{color:var(--muted);font-size:12px}
.cur-req-st{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);
  background:var(--warn-soft);color:var(--warn-text)}
.cur-req-st.en_curso{background:var(--blue-soft);color:var(--blue)}

/* --- avisos de corrección (docs/54): las abiertas que ya he corregido, como alertas --- */
.cur-alerts{margin-top:16px;padding:14px 16px;background:var(--accent-soft);
  border:1px solid var(--accent);border-radius:var(--radius-card);
  display:flex;flex-direction:column;gap:10px}
.cur-alerts-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cur-alerts-head b{font-size:14px;color:var(--accent-text)}
.cur-alerts-n{display:inline-block;min-width:18px;text-align:center;margin-left:4px;
  padding:0 6px;border-radius:var(--radius-pill);background:var(--accent-fill);color:#fff;font-size:12px}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}
.cur-alert{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-el);
  padding:11px 13px;display:flex;flex-direction:column;gap:6px}
.cur-alert-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cur-alert-loc{font-weight:700;font-size:13px;color:var(--ink)}
.cur-alert-date{margin-left:auto;color:var(--faint);font-size:12px}
.cur-alert-score{font-size:12px;font-weight:700;padding:1px 8px;border-radius:var(--radius-pill)}
.cur-alert-score.s-ok{background:var(--accent-soft);color:var(--accent-text)}
.cur-alert-score.s-mid{background:var(--warn-soft);color:var(--warn-text)}
.cur-alert-score.s-low{background:var(--neg-soft);color:var(--neg-text)}
.cur-alert-q{font-size:13px;color:var(--ink-2);line-height:1.45}
.cur-alert-you{font-size:13px;color:var(--ink-2);line-height:1.45}
.cur-alert-you span{color:var(--muted);font-weight:600}
.cur-alert-fb{font-size:13px;line-height:1.5;background:var(--panel-2);
  border-left:3px solid var(--accent);border-radius:6px;padding:8px 10px;color:var(--ink)}
.cur-alert-go{align-self:flex-start;font-size:13px;font-weight:600;color:var(--accent-text)}
.cur-alert-go:hover{text-decoration:underline}
.nav-badge{display:inline-block;min-width:18px;text-align:center;padding:0 5px;margin-left:2px;
  border-radius:var(--radius-pill);background:var(--danger-fill);color:#fff;font-size:11px;
  font-weight:700}
/* ⚠️ `--red` es color de SUPERFICIE: con texto blanco se queda en 3,76:1. Con el contador de
   «Alertas» visible en todas las pantallas lo cazó `ui_a11y.py` (docs/64 §9); el rojo accesible
   es `--danger-fill` (docs/58 §8.4.decies). */

/* ===================== Alertas: historial de disparos (docs/64 §9) =====================
   La sección reutiliza `.cartera` (scroll propio, como exige `.main` overflow:hidden) y los
   chips del calendario; lo propio es la fila del historial. */
.al-head-acts{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.al-flabel{font-size:var(--fs-xs);color:var(--label);text-transform:uppercase;
  letter-spacing:.04em;margin-right:2px}
.al-flabel:not(:first-child){margin-left:var(--s3)}
.al-day{margin-bottom:var(--s5)}
.al-day-t{font-size:var(--fs-sm);color:var(--ink);margin:0 0 var(--s2);
  padding-bottom:5px;border-bottom:2px solid var(--line);font-weight:700}
.alf-row{display:flex;align-items:flex-start;gap:var(--s3);padding:10px;border-radius:var(--radius-el);
  border:1px solid var(--line);background:var(--panel);margin-bottom:6px}
.alf-row.unread{background:var(--surface-2);border-color:var(--line-2)}
.alf-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.alf-main{font-size:var(--fs-md);color:var(--ink);overflow-wrap:anywhere}
.alf-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent-fill);
  margin-right:5px;vertical-align:middle}
.alf-meta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:var(--fs-sm)}
.alf-when{color:var(--label)}
.al-tk{color:var(--ink-2);text-decoration:none;font-weight:600}
/* la fila sin leer va sobre `--surface-2`: el gris atenuado se queda en 4,27:1 ahí dentro
   (mismo caso que `.al-row` en docs/61 §A6) → `--label`, que sí llega */
.alf-row .rd-tk{color:var(--label)}
.al-tk:hover{color:var(--accent-text)}
.alf-acts{display:flex;align-items:center;gap:4px;flex-shrink:0}
.al-more-wrap{display:flex;justify-content:center;padding:var(--s3) 0}
@media (max-width:760px){
  /* el móvil no puede comerse el texto de la alerta: las acciones bajan a su línea */
  .alf-row{flex-wrap:wrap}
  .alf-acts{width:100%;justify-content:flex-end}
}

/* --- ficha de curso --- */
.cur-back{background:none;border:0;color:var(--accent-text);font-weight:600;font-size:13px;
  cursor:pointer;padding:0;margin-bottom:12px;display:inline-block}
.cur-back:hover{text-decoration:underline}
.cur-hero{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:20px;box-shadow:var(--shadow)}
.cur-hero h1{margin:8px 0 6px;font-size:24px;line-height:1.25}
.cur-hero p{margin:0 0 10px;color:var(--ink-2);line-height:1.55}
.cur-hero .cur-bar{margin:10px 0 6px;max-width:420px}
.cur-hero .btn{margin-top:12px}
.cur-panel{margin-top:16px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:18px 20px;box-shadow:var(--shadow)}
.cur-panel h2{margin:0 0 10px;font-size:15px;color:var(--ink)}
.cur-toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cur-toc-li{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:var(--radius-el);
  cursor:pointer;border:1px solid transparent}
.cur-toc-li:hover{background:var(--panel-2);border-color:var(--line-2)}
.cur-toc-n{width:26px;height:26px;flex:none;border-radius:50%;background:var(--surface-2);color:var(--label);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.cur-toc-li.ok .cur-toc-n{background:var(--accent-fill);color:#fff}
.cur-toc-li.wip .cur-toc-n{background:var(--warn-soft);color:var(--warn-text)}
.cur-toc-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.cur-toc-t small{color:var(--muted);font-size:12px;line-height:1.4}
.cur-toc-m{color:var(--faint);font-size:12px;white-space:nowrap}

/* --- lección: lectura --- */
.cur-lesson-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cur-step{color:var(--muted);font-size:12px}
.cur-read{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:26px 30px;box-shadow:var(--shadow);max-width:74ch}
.cur-read h1{margin:0 0 8px;font-size:26px;line-height:1.25}
.cur-lead{margin:0 0 18px;color:var(--muted);font-size:14px;font-style:italic}
.md{font-size:15px;line-height:1.7;color:var(--ink-2)}
.md p{margin:0 0 14px}
.md .md-h{color:var(--ink);line-height:1.3;margin:26px 0 10px}
.md h2.md-h{font-size:18px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.md h3.md-h{font-size:16px}
.md h4.md-h{font-size:14px;color:var(--ink-2)}
.md .md-list{margin:0 0 14px;padding-left:22px}
.md .md-list li{margin:5px 0}
.md code{background:var(--surface-2);border-radius:5px;padding:1px 5px;font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* Pista de «sigue a la derecha» en lo que hace scroll horizontal (docs/58 §8.4.septdecies).
   Dos capas: la que TAPA viaja con el contenido (`local`) y la sombra se queda pegada al
   borde (`scroll`), así solo se ve mientras quede algo por leer. Sobre el fondo oscuro del
   código la sombra negra no se vería → velo claro. */
.md .md-pre{background:var(--code-bg);color:var(--code-ink);border-radius:var(--radius-el);padding:14px 16px;
  overflow-x:auto;font-size:13px;line-height:1.5;margin:0 0 16px;
  background-image:linear-gradient(to left,var(--code-bg),rgba(0,0,0,0) 26px),
                   linear-gradient(to left,rgba(255,255,255,.22),rgba(255,255,255,0) 18px);
  background-repeat:no-repeat;background-position:right,right;
  background-size:26px 100%,16px 100%;background-attachment:local,scroll}
.md .md-pre code{background:none;color:inherit;padding:0}
.md .md-quote{margin:0 0 16px;padding:10px 16px;border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:0 var(--radius-el) var(--radius-el) 0}
.md .md-quote p:last-child{margin:0}
.md .md-tablewrap{overflow-x:auto;margin:0 0 16px;   /* la tabla ancha hace scroll en su caja */
  background-image:linear-gradient(to left,var(--panel),rgba(0,0,0,0) 26px),
                   linear-gradient(to left,var(--scroll-hint),rgba(0,0,0,0) 16px);
  background-repeat:no-repeat;background-position:right,right;
  background-size:26px 100%,16px 100%;background-attachment:local,scroll}
.md .md-table{border-collapse:collapse;width:100%;font-size:14px;min-width:min(520px,100%)}
/* ⚠️ `white-space:normal` NO es decorativo: el `tbody td{white-space:nowrap}` global (para
   la matriz financiera, que es de cifras) se colaba en las tablas de las lecciones, que son
   de prosa → una celda de seis palabras forzaba 453 px y la tabla se salía en cualquier
   pantalla estrecha (docs/58 §8.4.septdecies). */
.md .md-table th,.md .md-table td{padding:8px 12px;border-bottom:1px solid var(--line-2);
  text-align:left;vertical-align:top;white-space:normal}
.md .md-table th{background:var(--panel-2);color:var(--ink);font-weight:700;white-space:nowrap}
.md hr{border:0;border-top:1px solid var(--line-2);margin:22px 0}
.md a{color:var(--accent-text)}
/* bloque plegable «::: solucion … :::» de las lecciones (docs/54 §4): el alumno
   intenta el ejercicio y solo entonces abre la solución. */
.md .md-fold{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--radius-el);
  background:var(--panel-2);overflow:hidden}
.md .md-fold>summary{cursor:pointer;padding:9px 14px;font-size:14px;font-weight:600;
  color:var(--accent-text);list-style:none;user-select:none}
.md .md-fold>summary::-webkit-details-marker{display:none}
.md .md-fold>summary::before{content:"▸";display:inline-block;margin-right:7px}
.md .md-fold[open]>summary::before{content:"▾"}
.md .md-fold>summary:hover{background:var(--accent-soft)}
.md .md-fold-body{padding:4px 14px 2px;border-top:1px solid var(--line)}
.md .md-fold-body>*:last-child{margin-bottom:12px}

/* --- lección: preguntas --- */
.cur-quiz{margin-top:18px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:20px 24px;box-shadow:var(--shadow);max-width:74ch}
.cur-quiz h2{margin:0 0 14px;font-size:17px}
.cur-q{padding:16px 0;border-top:1px solid var(--line)}
.cur-q:first-child{border-top:0;padding-top:0}
.cur-q-head{display:flex;gap:10px;align-items:flex-start}
.cur-q-head p{margin:2px 0 0;font-weight:600;color:var(--ink);line-height:1.5}
.cur-q-n{width:24px;height:24px;flex:none;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-text);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700}
.cur-opts{display:flex;flex-direction:column;gap:8px;margin:12px 0 0;padding-left:34px}
.cur-opt{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line-2);
  border-radius:var(--radius-el);cursor:pointer;line-height:1.45;background:var(--panel)}
.cur-opt:hover{background:var(--panel-2)}
.cur-opt input{margin:2px 0 0;flex:none;accent-color:var(--accent-text)}
.cur-opt.is-sol{border-color:var(--accent-text);background:var(--accent-soft)}
.cur-q.answered .cur-opt{cursor:default}
.cur-open{width:100%;margin:12px 0 0;padding:11px 13px;border:1px solid var(--line-2);
  border-radius:var(--radius-el);font:inherit;resize:vertical;background:var(--panel)}
.cur-open:focus{outline:2px solid var(--accent-soft);border-color:var(--accent-text)}
.cur-hint{display:block;margin-top:6px;color:var(--muted);font-size:13px}
.cur-q-acts{margin-top:12px}
.cur-q-acts .btn{margin-top:0}
.cur-fb{margin-top:12px;padding:0}
.cur-fb:not(:empty){padding:12px 14px;border-radius:var(--radius-el);font-size:14px;line-height:1.55}
.cur-fb p{margin:6px 0 0}
.cur-fb.ok{background:var(--pos-soft);color:var(--pos-text)}
.cur-fb.ko{background:var(--neg-soft);color:var(--neg-text)}
.cur-fb.wait{background:var(--blue-soft);color:var(--blue)}
.cur-fb.graded{background:var(--violet-soft);color:var(--violet)}
.cur-guide{border-top:1px dashed rgba(0,0,0,.12);padding-top:8px}
.cur-quiz-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.cur-quiz-foot .wl-btn{margin-top:0}
.cur-score{font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cur-score b{font-size:16px;color:var(--ink)}
.cur-badge{background:var(--pos-soft);color:var(--pos-text);font-weight:700;font-size:12px;
  padding:3px 10px;border-radius:var(--radius-pill)}
.cur-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:18px auto 0;max-width:74ch}
.cur-read,.cur-quiz{margin-left:auto;margin-right:auto}   /* centra la columna de lectura */
.cur-nav .wl-btn,.cur-nav .btn{margin-top:0}

/* campos de formulario dentro del modal (pedir curso) */
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:13px;color:var(--ink-2)}
.fld span{font-weight:600;color:var(--ink)}
.fld input,.fld select,.fld textarea{padding:9px 11px;border:1px solid var(--line-2);
  border-radius:var(--radius-el);font:inherit;background:var(--panel);color:var(--ink);resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--accent-soft);
  border-color:var(--accent-text)}

@media (max-width:760px){
  .cursos{padding:14px 12px 84px}
  .cur-cards{grid-template-columns:1fr}
  .cur-read{padding:18px 16px;border-radius:var(--radius-card)}
  .cur-read h1{font-size:22px}
  .md{font-size:16px}                 /* algo mayor en móvil: es texto para leer */
  .cur-quiz{padding:16px 14px}
  .cur-opts{padding-left:0}
  .cur-hero{padding:16px}
  .cur-hero h1{font-size:20px}
  /* el botón lleva el título de la lección siguiente y `.btn` va en `nowrap`: se salía
     de la tarjeta en cuanto el título tenía cuatro palabras */
  .cur-hero .btn{white-space:normal;text-align:left;max-width:100%}
  .cur-panel{padding:14px 14px}
  .cur-toc-m{display:none}
  /* La barra de navegación NO va fija: en lecciones largas tapaba permanentemente una
     franja de texto o de tabla. Va al final del documento, que es donde se usa. */
  .cur-nav{padding:6px 0 4px}
  .cur-nav .btn,.cur-nav .wl-btn{flex:1}

  /* ---- lecciones: las tablas dejan de salirse (docs/58 §8.4.septdecies) ----
     El suelo de 520 px obligaba a TODAS las tablas a hacer scroll lateral, incluso a
     las de dos columnas que caben de sobra; y la tercera columna se leía a medias
     porque nada avisaba de que hubiera más a la derecha. */
  .md .md-table{min-width:0}
  .md .md-table th{white-space:normal}
  .md .md-table th,.md .md-table td{padding:7px 9px}
  /* de tres columnas en adelante no hay ancho posible: cada fila pasa a ser una ficha
     etiqueta/valor, el mismo patrón que la tabla de accionariado */
  .md .md-stack,.md .md-stack tbody,.md .md-stack tr,.md .md-stack td{display:block;width:100%}
  .md .md-stack thead{display:none}
  .md .md-stack tr{border:1px solid var(--line-2);border-radius:var(--radius-el);
    background:var(--panel-2);padding:2px 12px;margin-bottom:10px}
  /* `anywhere`: en las lecciones de matemáticas hay expresiones sin espacios
     (`(x+4)(x−4)`) más anchas que la pantalla */
  .md .md-stack td{border:0;padding:8px 0;overflow-wrap:anywhere}
  .md code{overflow-wrap:anywhere}
  .md .md-stack td:not(:last-child){border-bottom:1px solid var(--line)}
  .md .md-stack td::before{content:attr(data-label);display:block;font-size:11px;
    font-weight:700;color:var(--label);text-transform:uppercase;letter-spacing:.03em;
    margin-bottom:2px}
  .md .md-stack td:empty{display:none}
  /* los bloques de código son diagramas alineados: no se pueden apilar ni envolver, así
     que se encogen un punto (la pista de scroll va en la regla base) */
  .md .md-pre{font-size:12px;padding:12px 13px}
  .md .md-tablewrap{-webkit-overflow-scrolling:touch}
  /* apilada no hay scroll: sobra la pista (la clase va también en el envoltorio para
     no depender de `:has()`) */
  .md .md-tablewrap.md-stack{background-image:none}
}

/* cursos basados en un libro (docs/54 §4.bis) */
.cur-book{display:flex;gap:9px;align-items:flex-start;margin:10px 0 4px;padding:10px 12px;
  background:var(--violet-soft);border-radius:var(--radius-el);font-size:14px;line-height:1.5;
  color:var(--violet)}
.cur-book small{display:block;margin-top:3px;color:var(--violet);opacity:.85;font-size:12px}
.cur-book-tag{font-size:12px;color:var(--violet);background:var(--violet-soft);
  padding:3px 9px;border-radius:var(--radius-pill);align-self:flex-start;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cur-req-b{font-size:12px;color:var(--violet)}
.fld-hint{color:var(--muted);font-size:12px;font-weight:400;line-height:1.4}

/* audio y pronunciación en los cursos de idiomas (docs/54 §4.ter) */
.say-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--accent-text);border-radius:var(--radius-pill);
  padding:3px 11px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;line-height:1.4;
  margin:0 2px;vertical-align:middle}
.say-btn:hover{background:var(--accent-soft);border-color:var(--accent-text)}
.say-btn:active{transform:scale(.97)}
.say-btn.slow{color:var(--muted)}
.cur-input{width:100%;margin:12px 0 0;padding:11px 13px;border:1px solid var(--line-2);
  border-radius:var(--radius-el);font:inherit;background:var(--panel)}
.cur-input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent-text)}
.cur-input:disabled{background:var(--panel-2);color:var(--ink-2)}
.cur-pron{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.cur-pron-frase{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;
  background:var(--accent-soft);border-radius:var(--radius-el);font-size:16px;line-height:1.5}
.cur-pron-frase b{color:var(--ink)}
.cur-mic{margin-top:0;align-self:flex-start}
.cur-mic.rec{background:var(--neg);border-color:var(--neg-text);animation:curpulse 1.2s infinite}
@keyframes curpulse{50%{opacity:.65}}
@media (prefers-reduced-motion:reduce){.cur-mic.rec{animation:none}}
.cur-pron-out{font-size:14px;color:var(--ink-2);min-height:1px}
.cur-pron-warn{color:var(--warn-text)}
.cur-pron-alt summary{font-size:13px;color:var(--muted);cursor:pointer}
.cur-alt{color:var(--ink-2);font-size:13px}

/* ---------- páginas legales/informativas + pie (docs/55 §L2-L5) ---------- */
/* ⚠️ `.main` es un flex de altura fija con overflow:hidden → CADA sección debe declarar su
   propio scroll (`flex:1; overflow:auto`), como .company/.cartera/.spider. Sin esto, la
   página se recortaba a la altura del contenedor y no había forma de leerla (bug 2026-07-25). */
.page{flex:1;overflow:auto;padding:20px 22px 60px}
.page > *{max-width:760px}
.page h1{font-size:26px;margin:6px 0 14px}
.page h2{font-size:17px;margin:26px 0 8px;color:var(--ink)}
.page p,.page li{font-size:14px;line-height:1.65;color:var(--ink-2)}
.page .lead{font-size:16px;color:var(--ink);background:var(--accent-soft);
  border-radius:var(--radius-card);padding:12px 16px;margin-bottom:18px}
.page ul{margin:8px 0 8px 20px;display:flex;flex-direction:column;gap:6px}
.page a{color:var(--accent-text);text-decoration:none;font-weight:600}
.page a:hover{text-decoration:underline}
.page .btn{margin:6px 8px 6px 0}

/* Pie global. OJO: `.main` es un flex column de altura fija y cada sección hace su propio
   scroll → todo lo que se meta aquí ROBA alto útil a la vista en TODAS las pantallas.
   Por eso es de una línea (en móvil, dos) y las atribuciones largas viven en /pagina/fuentes. */
.site-foot{flex:none;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:8px 22px;border-top:1px solid var(--line);background:var(--panel)}
.foot-legal{font-size:12px;line-height:1.45;color:var(--muted);margin:0;flex:1;min-width:220px}
.foot-links{display:flex;flex-wrap:wrap;gap:14px}
.foot-links a{font-size:12px;color:var(--accent-text);text-decoration:none;font-weight:600}
.foot-links a:hover{text-decoration:underline}

/* utilidades usadas por los modales legales */
.muted{color:var(--muted)}
.legal-list{margin:8px 0 8px 20px;display:flex;flex-direction:column;gap:6px;
  font-size:14px;line-height:1.6;color:var(--ink-2)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.form-err{color:var(--neg-text);font-size:13px;min-height:1em;margin-top:8px}
.inp{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--radius-el);
  font:inherit;background:var(--panel)}
.inp:focus{outline:2px solid var(--accent-soft);border-color:var(--accent-text)}
/* ⚠️ el botón rojo lo define `.btn.danger` (arriba) con `--neg-text`: `--red` es la señal
   de las gráficas y sobre blanco da 3,76:1, por debajo del mínimo (docs/58 F0). Aquí solo
   queda `primary`; la regla que pisaba el fondo con `--red` se retiró. */
.btn.primary{background:var(--accent-fill)}
@media (max-width:760px){
  .page{padding:2px 2px 6px}
  .page h1{font-size:22px}
  /* En móvil el alto es oro: el pie legal + la barra de pestañas se comían ~130 px de
     844 (docs/58 §4.10). Ahora el aviso es UNA línea recortada (el texto completo sigue
     en Términos) y los enlaces comparten fila. */
  .site-foot{padding:4px 12px calc(56px + env(safe-area-inset-bottom));gap:6px 10px;
    align-items:baseline}
  .foot-legal{font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;min-width:0;flex:1 1 100%}
  .foot-links{gap:10px}
  .foot-links a{font-size:11px}
}
/* panel «Beta · uso» (docs/55 §M5): la rejilla de KPI va suelta, sin banda superior */
.bt-kpis{margin-top:0;padding-top:0;border-top:0;margin-bottom:16px}
.bt-kpis+.card,#bt-body .card{margin-bottom:16px}

/* ---------- buscador avanzado / screener (docs/49 §8.5) ---------- */
.scr-filters{padding:16px 18px;margin-bottom:14px}
.scr-row{display:flex;flex-wrap:wrap;gap:12px 18px;margin-bottom:10px}
.scr-row label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);
  font-weight:600}
.scr-row input,.scr-row select{padding:8px 10px;border:1px solid var(--line-2);
  border-radius:var(--radius-el);font:inherit;font-size:14px;background:var(--panel);
  color:var(--ink);min-width:120px}
.scr-row input:focus,.scr-row select:focus{outline:2px solid var(--accent-soft);
  border-color:var(--accent-text)}
.scr-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.scr-acts .btn,.scr-acts .wl-btn{margin-top:0}
.scr-count{font-size:13px;color:var(--muted);margin-left:auto}
.scr-th{cursor:pointer;white-space:nowrap}
.scr-th:hover{color:var(--accent-text)}
.scr-th.sorted{color:var(--accent-text)}
#scr-table td{white-space:nowrap}
@media (max-width:760px){
  .scr-row label{flex:1 1 45%}
  .scr-row input,.scr-row select{min-width:0;width:100%}
  .scr-count{margin-left:0;width:100%}
}
.scr-cov{font-size:12px;color:var(--muted);margin:0 0 10px}
#scr-table td:nth-child(1),#scr-table td:nth-child(2),#scr-table td:nth-child(3),
#scr-table td:nth-child(4),#scr-table th:nth-child(1),#scr-table th:nth-child(2),
#scr-table th:nth-child(3),#scr-table th:nth-child(4){text-align:left}

/* Visitante anónimo en las páginas públicas (/pagina/…): sin sesión no tiene sentido
   enseñarle «Mi cartera» ni el buscador — todo eso responde 401 (docs/38, repaso 2026-07-25). */
.nav-anon{display:none}
.is-anon .nav-anon{display:flex}
.is-anon .nav-item:not(.nav-anon),
.is-anon .nav-section,
.is-anon .search-wrap,
.is-anon #user-label,
.is-anon .bottombar{display:none}

/* ===========================================================================
   CONTROLES DE FORMULARIO (docs/58 F0/F2)
   La app mezclaba controles diseñados con `select`/`checkbox` nativos (Moneda,
   «Ordenar por», los 10 campos del buscador, «Índice base 100»). Aquí se les da
   la misma caja, el mismo radio y el mismo foco que al resto del sistema.
   Se aplica por elemento —no por clase— para que valga también en el HTML ya
   escrito.
   =========================================================================== */
.main select:not(.term-sel),
.main input[type="text"]:not(#search):not(#cmp-search),
.main input[type="number"],
.main input[type="search"],
.main input[type="date"]{
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--line-2);border-radius:var(--radius-el);
  background:var(--panel);color:var(--ink);
  font:inherit;font-size:var(--fs-md);line-height:1.4;
  padding:8px 11px;max-width:100%;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.main select:not(.term-sel){
  padding-right:30px;cursor:pointer;
  /* flecha propia (data-uri, sin peticiones y compatible con la CSP) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.main select:not(.term-sel):hover,
.main input[type="text"]:not(#search):not(#cmp-search):hover,
.main input[type="number"]:hover{border-color:var(--line-3)}
.main select:not(.term-sel):focus-visible,
.main input[type="text"]:focus-visible,
.main input[type="number"]:focus-visible,
.main input[type="date"]:focus-visible{
  outline:none;border-color:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-soft)}
.main input::placeholder{color:var(--faint)}

/* casillas e interruptores: el verde de marca, tamaño táctil y foco visible */
.main input[type="checkbox"],.main input[type="radio"]{
  accent-color:var(--accent-fill);width:16px;height:16px;cursor:pointer}
.main input[type="checkbox"]:focus-visible,.main input[type="radio"]:focus-visible{
  outline:2px solid var(--accent-fill);outline-offset:2px}

/* etiqueta de campo: una sola forma en toda la app */
.field-l{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--label);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}

/* leyenda del calendario (docs/58 F2) */
.cal-legend{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:0 0 12px;
  font-size:var(--fs-sm);color:var(--muted)}
.cal-legend .lg-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.cal-legend .lg-ok{background:var(--accent-fill)}
.cal-chip .ico{width:15px;height:15px}
.cal-chip{display:inline-flex;align-items:center;gap:6px}
/* chip de icono dentro de un título de vista */
h1 .icon-chip{vertical-align:-8px;margin-right:6px}

/* aviso «empresa no encontrada» en la vista de Inicio (docs/58 F2) */
.notfound{display:flex;align-items:flex-start;gap:14px;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--warn);
  border-radius:var(--radius-card);box-shadow:var(--shadow);
  padding:16px 18px;margin-bottom:20px;max-width:640px}
.notfound b{display:block;font-size:var(--fs-lg);margin-bottom:4px}
.notfound p{margin:0;color:var(--muted);font-size:var(--fs-md);line-height:1.5}

/* ===========================================================================
   ESQUELETOS DE CARGA (docs/58 F2)
   Antes solo había un velo con spinner sobre toda la pantalla: en las cargas
   rápidas (las más) parpadeaba, y en las lentas tapaba la app entera. Ahora la
   ficha se dibuja vacía con su forma real y el velo queda para la extracción
   de verdad lenta (primera vez de una empresa sin datos).
   =========================================================================== */
.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:8px;
  color:transparent!important}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:skelshine 1.15s infinite}
@keyframes skelshine{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none}}
.skel-line{height:12px;margin:6px 0}
.skel-kpi{height:74px;border-radius:14px}
.skel-num{height:24px;width:120px}
.skel-lbl{height:10px;width:70px;margin-top:8px}

/* Buzón: ancho de lectura. A pantalla completa las notas llegaban a 150 caracteres por
   línea, que es el doble de lo cómodo de leer (docs/58 §4.7). */
.sg-li-body{max-width:78ch;line-height:1.55;white-space:pre-wrap}
#sg-body,.sg-edit-ta{max-width:78ch}
/* misma regla para los textos largos de la ficha y las páginas legales */
.about-text,.ov-desc .about-text{max-width:78ch}

/* cabeceras con chip de icono en el panel de gestión (docs/58 F2) */
.uni-title,.px-title{display:flex;align-items:center;gap:9px}
.cur-hint::before{content:"Pista: ";font-weight:600;color:var(--label)}

/* etiqueta «sin precio» en las filas de cartera que no se pueden valorar (docs/58 §4.1) */
.tag-nopx{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:var(--radius-pill);
  background:var(--warn-soft);color:var(--warn-text);font-size:var(--fs-xs);font-weight:700;
  vertical-align:1px}

/* código original del tipo de informe, como matiz junto al nombre en español */
.rep-code{color:var(--label);font-size:var(--fs-xs);margin-left:6px}

/* ===== Radar: grupos de columnas, leyenda y celdas sin semáforo (docs/58 F3) ===== */
.rd-grouprow th{position:sticky;top:0;z-index:6;background:var(--panel-2);
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--label);text-align:left;padding:8px 12px 4px;border-bottom:0}
.rd-grouprow th.rd-g-val{border-left:1px solid var(--line-2)}
.rd-table thead tr:nth-child(2) th{top:28px}     /* la 2ª fila se pega bajo la de grupos */
.rd-plain{display:inline-block;padding:2px 0;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.rd-outlier{color:var(--label);font-weight:600;font-style:italic;cursor:help}
.rd-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;
  font-size:var(--fs-sm);color:var(--muted)}
.rd-legend-t{color:var(--label)}
.rd-legend-sep{width:1px;height:14px;background:var(--line-2);margin:0 4px}

/* ===== Buscador avanzado: presets, chips de filtro y acción por fila (docs/58 F3) ===== */
.scr-presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 8px}
.scr-presets-t{font-size:var(--fs-sm);color:var(--label);font-weight:600}
.scr-preset{border-radius:var(--radius-pill)}   /* mismo botón, en píldora */
.scr-preset.active{background:var(--accent-soft);border-color:var(--accent-fill);
  color:var(--accent-text)}
/* búsquedas guardadas del usuario: mismo chip que el preset + su × (docs/58 §9.2) */
.scr-saved-wrap{display:inline-flex;align-items:center;gap:2px}
.scr-saved-wrap .cmp-x{background:transparent;color:var(--muted)}
.scr-saved-wrap .cmp-x:hover{background:var(--surface-2);color:var(--neg-text)}
.scr-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 10px;min-height:0}
.scr-chips-t{font-size:var(--fs-sm);color:var(--label)}
.scr-chip{display:inline-flex;align-items:center;gap:4px;background:var(--accent-soft);
  color:var(--accent-text);border-radius:var(--radius-pill);padding:3px 4px 3px 11px;
  font-size:var(--fs-sm);font-weight:600}
.scr-chip .cmp-x{background:rgba(4,120,87,.18);color:var(--accent-text)}
.scr-chip .cmp-x:hover{background:rgba(4,120,87,.32)}
.scr-chip-clear{border:0;background:none;color:var(--muted);font:inherit;
  font-size:var(--fs-sm);text-decoration:underline;cursor:pointer}
.scr-sortable{color:var(--faint-deco);margin-left:4px;font-size:10px}
.scr-th{cursor:pointer;white-space:nowrap}
td.scr-act,th.scr-act{width:38px;text-align:center}
.scr-star{border:0;background:none;cursor:pointer;font-size:16px;line-height:1;
  color:var(--label);padding:2px 4px;border-radius:6px}
.scr-star:hover{background:var(--accent-soft);color:var(--accent-text)}
.scr-star.on{color:var(--warn-text)}
.scr-more-wrap{display:flex;justify-content:center;margin:14px 0}

/* ===== Reparto de la cartera y fila de totales (docs/58 F3) ===== */
.pf-mix{margin:16px 0}
.pf-mix .card{padding:16px 18px}
.mix-block{margin-top:14px}
.mix-block h3{margin:0 0 6px;font-size:var(--fs-xs);font-weight:700;color:var(--label);
  text-transform:uppercase;letter-spacing:.04em}
.mix-bar{display:flex;height:10px;border-radius:var(--radius-pill);overflow:hidden;
  background:var(--surface-2)}
.mix-seg{display:block;height:100%}
.mix-legend{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.mix-legend li{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm)}
.mix-legend i{width:9px;height:9px;border-radius:3px;flex:none}
.mix-legend .mix-k{color:var(--ink-2)}
.mix-legend .mix-v{color:var(--label);font-variant-numeric:tabular-nums}
#pf-foot td{border-top:2px solid var(--line-2);font-weight:700;background:var(--panel-2);
  padding-top:10px;padding-bottom:10px}
#pf-foot td.pf-name{color:var(--ink)}

/* ===========================================================================
   TARJETA CANÓNICA (docs/design/design-system.css → aquí, docs/58 F3)
   `.card` y `.card-head` estaban en el sistema de diseño pero nunca se habían
   portado a la hoja de la app, así que cada vista se inventaba su cabecera.
   =========================================================================== */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:20px}
.card.pad-sm{padding:14px 16px}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.card-head .ch-txt{min-width:0}
.card-head .ch-title{font-weight:700;font-size:var(--fs-lg);color:var(--ink);line-height:1.2}
.card-head .ch-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
.card-head .ch-right{margin-left:auto;display:flex;align-items:center;gap:8px}

/* panel de gestión: acciones secundarias plegadas (docs/58 §4.8) */
.sp-more{margin-top:8px}
.sp-more summary{cursor:pointer;font-size:var(--fs-sm);color:var(--label);font-weight:600;
  list-style:none;display:inline-flex;align-items:center;gap:5px}
.sp-more summary::-webkit-details-marker{display:none}
.sp-more summary::before{content:"⋯";font-weight:700}
.sp-more summary:hover{color:var(--ink-2)}
.sp-more-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.btn-sm{padding:6px 11px;font-size:var(--fs-sm)}
/* el pie legal público no pinta nada en el panel de gestión */
.is-admin .site-foot{display:none}

/* ===========================================================================
   MÓVIL · F5 (docs/58): la ficha llegaba a las pestañas tras cinco scrolls y las
   pestañas se cortaban sin pista de que hubiera más.
   =========================================================================== */
@media (max-width:760px){
  /* banda KPI: carrusel horizontal con snap en vez de 5 filas de 2 tarjetas */
  .kpi-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;margin-top:12px;padding-top:12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .kpi-grid::-webkit-scrollbar{display:none}
  .kpi-grid .kpi{flex:0 0 42%;scroll-snap-align:start;padding:10px 12px}
  .kpi-grid .kpi .kpi-l{min-height:2.4em}
  .kpi-grid .kpi .kpi-v{font-size:18px}
  .kpi-lead{gap:16px 22px}
  .kpi-lead-v{font-size:19px}

  /* pestañas de la ficha: degradado a la derecha mientras quede algo por ver */
  .tabs{position:relative;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs-wrap{position:relative}
  .tabs-wrap::after{content:"";position:absolute;top:0;right:0;width:28px;height:100%;
    pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg))}

  /* cabecera de la ficha: título e identificadores en dos líneas ordenadas */
  .company-head h1{flex-wrap:wrap;gap:8px}
  .c-meta{gap:6px;font-size:var(--fs-sm)}
  .pf-row.has-pos{width:100%;flex-wrap:wrap}
  .pf-row.has-pos .pf-acts{margin-left:auto}

  /* reparto de la cartera: leyenda en dos columnas para no hacer una lista larga */
  .mix-legend{gap:4px 12px}
  .mix-legend li{flex:0 0 46%}

  /* buscador: los chips de filtro activo y los presets, con scroll horizontal */
  .scr-presets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .scr-presets::-webkit-scrollbar{display:none}
  .scr-preset{white-space:nowrap}
}

/* interruptor de tema (docs/58 F6): un solo botón, icono según el tema activo */
.theme-btn{width:34px;height:34px;flex:none;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line-2);background:var(--panel);
  color:var(--label);border-radius:var(--radius-el);cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.theme-btn:hover{background:var(--surface-2);color:var(--ink-2)}
.theme-btn .ico{width:17px;height:17px}
.theme-btn .ic-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .ic-sun{display:none}
  :root:not([data-theme="light"]) .theme-btn .ic-moon{display:block}
}
:root[data-theme="dark"] .theme-btn .ic-sun{display:none}
:root[data-theme="dark"] .theme-btn .ic-moon{display:block}
:root[data-theme="light"] .theme-btn .ic-sun{display:block}
:root[data-theme="light"] .theme-btn .ic-moon{display:none}

/* ===========================================================================
   ESTADO VACÍO (docs/58 F2): icono, qué falta, por qué y una salida.
   Sustituye a las frases sueltas en gris de cada tabla.
   =========================================================================== */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;padding:34px 20px;max-width:46ch;margin:0 auto}
.empty-state .icon-chip{margin-bottom:4px}
.empty-state b{font-size:var(--fs-lg);color:var(--ink)}
.empty-state p{margin:0;color:var(--muted);font-size:var(--fs-md);line-height:1.55}
.empty-state .btn{margin-top:10px}
tr.empty-row td{padding:0;border-bottom:0;background:var(--panel)}
tr.empty-row:hover td{background:var(--panel)}
/* En una tabla ancha (el buscador mide 2.000 px) el estado vacío centrado se iba fuera
   de la pantalla: se ancla a la izquierda del área visible (docs/58 F2). */
tr.empty-row .empty-state{position:sticky;left:0;align-items:flex-start;text-align:left;
  width:min(52ch,92vw);margin:0;padding:30px 24px}
tr.empty-row .empty-state .icon-chip{margin-bottom:6px}
@media (max-width:760px){.empty-state{padding:24px 12px}}

/* Tira de frescura bajo la banda de KPI (docs/58 §5.1) */
.freshness{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-6px 0 16px;
  padding:8px 14px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-el);font-size:var(--fs-sm);color:var(--muted)}
.freshness .fr-item{white-space:nowrap}
.freshness .fr-item b{color:var(--ink-2);font-weight:700}
.freshness .fr-item[title]{cursor:help}
.freshness .fr-sep{color:var(--faint-deco)}
@media (max-width:760px){.freshness{font-size:var(--fs-xs);padding:7px 10px;gap:6px}}

/* Mediana histórica bajo el múltiplo en la banda KPI (docs/58 §5.6) */
.kpi .kpi-sub{margin-top:3px;font-size:var(--fs-xs);color:var(--label);
  display:flex;align-items:center;gap:5px;cursor:help}
.kpi-dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.kpi-dot.kpi-verde{background:var(--pos-text)}
.kpi-dot.kpi-ambar{background:var(--warn-text)}
.kpi-dot.kpi-rojo{background:var(--neg-text)}

/* Logotipo dentro de las listas (cartera, radar, buscador) — docs/58 §5.14 */
.pf-name .logo,.rd-name .logo,#scr-body .logo,.mcard-head .logo{
  vertical-align:-4px;margin-right:7px}
.mcard-head .logo{vertical-align:middle}

/* Mis dividendos (docs/58 §5.9) */
#dividendos .pf-kpis{margin-bottom:16px}
.dv-chart-wrap{height:220px;position:relative}
#dv-chart-card,#dv-next-card{margin-bottom:16px}
#dv-next .ev-row:last-child{border-bottom:0}
@media (max-width:760px){.dv-chart-wrap{height:180px}}

/* ===== Calendario: barra de control, vista de mes y exportación (docs/58 §5.8) ===== */
.cal-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.cal-toolbar .cal-export{margin-left:auto;text-decoration:none}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-nav b{min-width:9.5em;text-align:center;font-size:var(--fs-base);text-transform:capitalize}

.cal-grid{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:14px 16px;margin-bottom:14px}
.cg-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cg-dow{font-size:var(--fs-xs);font-weight:700;color:var(--label);text-transform:uppercase;
  letter-spacing:.04em;padding:2px 4px 6px}
.cg-cell{min-height:92px;border:1px solid var(--line);border-radius:10px;padding:6px;
  display:flex;flex-direction:column;gap:3px;background:var(--panel)}
.cg-cell.cg-out{border-style:dashed;opacity:.35;min-height:0}
.cg-cell.cg-has{background:var(--panel-2)}
.cg-cell.cg-today{border-color:var(--accent-fill);box-shadow:0 0 0 1px var(--accent-fill) inset}
.cg-num{font-size:var(--fs-sm);font-weight:700;color:var(--label);font-variant-numeric:tabular-nums}
.cg-cell.cg-today .cg-num{color:var(--accent-text)}
.cg-ev{display:block;font-size:10px;font-weight:700;line-height:1.25;text-decoration:none;
  color:var(--ink-2);background:var(--surface-2);border-radius:5px;padding:2px 5px;
  border-left:3px solid var(--label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-ev:hover{background:var(--accent-soft);color:var(--accent-text)}
.cg-ev .cg-ev-lbl{display:block;font-weight:500;color:var(--muted);font-size:9px;
  overflow:hidden;text-overflow:ellipsis}
.cg-ev.cal-earnings{border-left-color:var(--blue)}
.cg-ev.cal-ex_div{border-left-color:var(--violet)}
.cg-ev.cal-pay_div{border-left-color:var(--accent-fill)}
.cg-ev.cal-agm{border-left-color:var(--warn-text)}
.cg-more{font-size:10px;color:var(--label)}
.cg-foot{margin:10px 0 0;font-size:var(--fs-sm);color:var(--muted)}
@media (max-width:760px){
  .cal-toolbar .cal-export{margin-left:0;width:100%;justify-content:center}
  .cg-cell{min-height:64px;padding:4px}
  .cg-ev .cg-ev-lbl{display:none}
  .cal-nav b{min-width:7.5em;font-size:var(--fs-md)}
}

/* detalle del día en la vista de mes */
.cg-day{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.cg-day-h{font-size:var(--fs-sm);font-weight:700;color:var(--label);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.cg-cell.cg-has{cursor:pointer}
.cg-cell.cg-sel{border-color:var(--accent-fill);background:var(--accent-soft)}
@media (max-width:760px){
  /* en el teléfono no cabe el ticker: cada evento es un punto de su color y el detalle
     del día se abre al tocar la celda (docs/58 §5.8) */
  .cg-cell{min-height:56px;gap:2px}
  .cg-ev{width:8px;height:8px;padding:0;border:0;border-radius:50%;display:inline-block;
    font-size:0;line-height:0;margin-right:3px;background:var(--label)}
  .cg-ev.cal-earnings{background:var(--blue)}
  .cg-ev.cal-ex_div{background:var(--violet)}
  .cg-ev.cal-pay_div{background:var(--accent-fill)}
  .cg-ev.cal-agm{background:var(--warn-text)}
  .cg-ev .cg-ev-lbl{display:none}
  .cg-more{font-size:9px}
}

/* ===== Mi cuenta · preferencias (docs/58 §9.2 punto 6) =====
   Rejilla de formulario que se adapta sola: dos columnas en escritorio, una en el
   teléfono. Los campos reutilizan `.inp` y las tarjetas `.card`/`.card-head`. */
.ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px 18px}
.ct-grid > label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);
  color:var(--label);font-weight:600}
.ct-help{font-size:var(--fs-xs);color:var(--muted);font-weight:400;line-height:1.35}
.ct-avrow{display:flex;align-items:center;gap:10px}
#cuenta .card{margin-bottom:16px}
#cuenta .scr-acts{margin-top:16px}
.ct-msgrow .sg-msg{margin-top:6px}      /* acuse de las preferencias, sin botón que separar */

/* Columna TTM de la tabla financiera (docs/59): es la más reciente y se separa de los
   ejercicios con una línea, para que no se lea como un año más. */
#table th.ttm-col, #table td.ttm-col{border-left:2px solid var(--line-2)}
#table th.ttm-col{color:var(--accent-text)}

/* Columna de crecimiento anual compuesto (CAGR, docs/58 §9.2). Va pegada a la de la métrica
   y separada de los ejercicios, porque no es un año: es un resumen de todos ellos. */
#table th.cagr-col, #table td.cagr-col{border-right:2px solid var(--line-2);white-space:nowrap}
#table th.cagr-col{color:var(--accent-text)}
#table td.cagr-col .val.up{color:var(--pos-text)}
#table td.cagr-col .val.down{color:var(--neg-text)}

/* Avisos del usuario (docs/58 §9.2 punto 5): lista en «Mi cuenta» y etiqueta del modal. */
.al-list{display:flex;flex-direction:column;gap:6px}
.al-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius-el);background:var(--surface-2)}
.al-cond{margin-left:auto;font-size:var(--fs-sm);color:var(--ink-2);text-align:right}
/* la fila del aviso va sobre `--surface-2`: el gris atenuado normal se queda en
   4,27:1 ahí dentro (docs/61 §A6) → `--label`, que sí llega */
.al-row .muted,.al-row .rd-tk{color:var(--label)}
/* En móvil las tres piezas no caben en una línea: el nombre se partía a mitad y la
   condición se quedaba pegada a la ✕. Nombre y ✕ arriba, la condición debajo. */
@media (max-width:760px){
  .al-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"n x" "c c";column-gap:var(--s2);row-gap:2px;align-items:center}
  .al-row>.pf-link{grid-area:n}
  .al-row>.cmp-x{grid-area:x}
  .al-cond{grid-area:c;margin-left:0;text-align:left}
}
.alert-lbl{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);
  color:var(--label);font-weight:600}
/* avisos automáticos (docs/64): la fila es «qué avisa» + acciones; en móvil se apila.
   Clases propias y no `.al-row`, cuya `.al-cond` va alineada a la derecha para el otro caso. */
.ar-row{display:flex;align-items:flex-start;gap:var(--s3);padding:10px;
  border:1px solid var(--line);border-radius:var(--radius-el);background:var(--surface-2)}
.ar-row.off{opacity:.62}
.ar-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ar-meta,.ar-help{font-size:var(--fs-sm);color:var(--label)}
.ar-help{color:var(--ink-2)}
.ar-acts{display:flex;align-items:center;gap:6px;flex-shrink:0}
@media (max-width:760px){
  .ar-row{flex-direction:column;align-items:stretch}
  .ar-acts{justify-content:flex-end}
}

/* ===================== Tesis de inversión (docs/65) =====================
   Dos sub-vistas dentro de #tesis (catálogo → tesis). Reutiliza `.card`, `.badge` y el
   Markdown de `.md`; lo de aquí es solo lo propio: tarjetas de tesis, la escala de
   encaje 0-5, la barra del rango de valor y las tablas de encaje/riesgos.
   ⚠️ `.tesis` es una <section> hija de <main>, que es un flex de altura fija: sin
   `flex:1;overflow:auto` la vista se recorta y no se puede leer (docs/38). */
.tesis{flex:1;overflow:auto;padding:22px 26px 40px}
.th-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:16px}
.th-card{min-width:0;display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow);
  text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease}
.th-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.th-card-top{display:flex;align-items:center;gap:8px}
.th-card-tk{font-weight:700;font-size:13px;color:var(--label);margin-right:auto}
.th-card h3{margin:0;font-size:16px;line-height:1.3}
.th-card-res{margin:0;color:var(--ink-2);font-size:13px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.th-card-fit{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--label);font-weight:600}

/* escala de encaje: cinco bloques, no cinco estrellas (no es una nota, es un ajuste) */
.th-dots{display:inline-flex;gap:3px;vertical-align:middle}
.th-dot{width:9px;height:9px;border-radius:2px;background:var(--surface-2);
  border:1px solid var(--line-3)}
.th-dot.on{background:var(--accent-fill);border-color:var(--accent-fill)}

/* --- cabecera de la tesis --- */
.th-head{margin-bottom:18px}
.th-title{display:flex;align-items:center;gap:14px;margin:10px 0 6px}
.th-title h1{margin:0;font-size:24px;line-height:1.25}
.th-sub{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);margin-top:4px}
.th-link{color:var(--accent-text);text-decoration:none;font-weight:600}
.th-link:hover{text-decoration:underline}
.th-badges{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.th-resumen{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--ink);max-width:80ch}

/* `align-items:start` para que cada tarjeta mida lo que ocupa su contenido: sin esto la
   rejilla iguala alturas y «El precio» (cuatro líneas) quedaba con medio metro de hueco
   blanco al lado de «Cómo se ha valorado» (cuatro métodos con sus supuestos). */
.th-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;
  margin-bottom:14px;align-items:start}
.th-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;
  margin-bottom:14px;align-items:start}
.tesis .card{margin-bottom:14px}
.tesis .card-head h2{margin:0;font-size:var(--fs-lg);line-height:1.2}

.th-precio{display:flex;flex-wrap:wrap;gap:18px}
.th-precio div{display:flex;flex-direction:column;gap:2px}
.th-precio span{font-size:12px;color:var(--muted)}
.th-precio b{font-size:18px;font-variant-numeric:tabular-nums}
.th-precio b.up{color:var(--pos-text)}
.th-precio b.down{color:var(--neg-text)}

/* rango de valor: barra con el precio de hoy marcado encima */
.th-rango{margin-top:16px}
.th-rango-bar{position:relative;height:10px;border-radius:var(--radius-pill);
  background:var(--surface-2);overflow:visible}
.th-rango-fill{position:absolute;inset:0;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--accent-soft),var(--accent))}
.th-rango-hoy{position:absolute;top:-4px;width:3px;height:18px;border-radius:2px;
  background:var(--ink);transform:translateX(-1px)}
.th-rango-lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);
  margin-top:6px;font-variant-numeric:tabular-nums}

.th-zonas,.th-metodos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.th-zonas li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
.th-zona-t{font-weight:600;font-size:13px;color:var(--ink-2)}
.th-zona-n,.th-met-s{grid-column:1/-1;font-size:12px;color:var(--muted);line-height:1.5}
.th-zonas b,.th-metodos b{font-variant-numeric:tabular-nums}
.th-metodos li{display:flex;flex-direction:column;gap:2px;font-size:14px}
.th-met-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.th-met-v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.th-none{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.5}

/* semáforo: tramo «comprar» (hasta el objetivo) y «vigilar» (hasta objetivo + margen) */
.th-sem-bar{position:relative;height:10px;margin:16px 0 4px;border-radius:var(--radius-pill);
  background:var(--neg-soft)}
.th-sem-ok{position:absolute;left:0;top:0;bottom:0;background:var(--pos-soft);
  border-radius:var(--radius-pill) 0 0 var(--radius-pill)}
.th-sem-warn{position:absolute;top:0;bottom:0;background:var(--warn-soft)}
.th-perfil{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.th-perfil li{display:flex;flex-direction:column;gap:2px}
.th-perfil span{font-size:12px;color:var(--muted)}
.th-perfil b{font-size:15px}
.th-perfil .badge{align-self:flex-start}
.th-stars{color:var(--warn-text);letter-spacing:1px}
.th-puntos{margin:12px 0 0;padding-left:20px;max-width:80ch;line-height:1.6;color:var(--ink)}
.th-puntos li{margin:4px 0}
.th-descarte{margin:10px 0 0;padding:10px 12px;border-radius:var(--radius-el);
  background:var(--neg-soft);color:var(--ink);max-width:80ch}
.th-premortem{margin:12px 0 0;line-height:1.6;color:var(--ink-2)}
.th-elim-ko td{background:var(--neg-soft)}
.th-elim-ko .th-fit-sub{color:var(--ink-2)}

/* tablas de la tesis (encaje, riesgos, qué vigilar) */
.th-tablewrap{overflow-x:auto}
.th-table{border-collapse:collapse;width:100%;font-size:14px;min-width:min(560px,100%)}
.th-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--label);padding:8px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
/* ⚠️ `text-align:left` y `white-space:normal` NO son decorativos: el `tbody td` global
   (línea 718, escrito para la matriz financiera) alinea a la DERECHA y prohíbe envolver, y
   se cuela en cualquier tabla de prosa — aquí dejaba el «por qué» de cada estrategia pegado
   al margen derecho. Misma trampa que documenta docs/58 §8.4.septdecies. */
.th-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;
  white-space:normal;text-align:left}
.th-table tr:last-child td{border-bottom:none}
/* Las filas que encajan van tintadas, y sobre ese verde claro `--muted` se queda en
   4,36:1 — por debajo del mínimo (lo cazó `research/ui_a11y.py`). Los dos textos
   secundarios de esas filas suben a `--ink-2`, que da 9:1 en claro y de sobra en oscuro. */
.th-fit-on td{background:var(--accent-soft)}
.th-fit-on .th-fit-sub,.th-fit-on .th-fit-lbl{color:var(--ink-2)}
.th-fit-sub{font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}
.th-fit-lbl{display:block;font-size:11px;color:var(--muted);margin-top:4px}

.th-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;
  font-size:14px;line-height:1.55;color:var(--ink-2)}
.th-list.ok li::marker{color:var(--pos-text)}
.th-list.bad li::marker{color:var(--neg-text)}
.th-rompe{border-left:3px solid var(--neg-text)}

/* dirección y gobierno (docs/65 §4.bis): el equipo arriba y los cinco criterios en la
   misma tabla que el encaje. Un criterio sin evidencia se atenúa en vez de pintarse como
   una nota mala: es ausencia de dato, no un juicio. */
.th-dir-lead{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:80ch}
.th-equipo{list-style:none;padding:0;margin:0 0 14px;gap:6px}
.th-equipo b{color:var(--ink)}
.th-dir-nd td:first-child b,.th-dir-nd .th-fit-lbl{color:var(--muted)}
.th-cuerpo .md{max-width:80ch}
.th-foot{font-size:12px;color:var(--muted);line-height:1.6;margin-top:6px}
.th-foot p{margin:0 0 6px}

/* buscador de empresas dentro del modal de encargo (necesita contexto de posición
   para que `.results` se sitúe debajo del campo) */
.th-pick{position:relative}
.th-pick input{width:100%}

@media (max-width:760px){
  .tesis{padding:14px 12px 84px}
  .th-title h1{font-size:20px}
  .th-precio{gap:12px}
  /* tablas de 3 columnas → apiladas, con el rótulo delante (docs/58 §8.4.septdecies) */
  .th-table,.th-table tbody,.th-table tr,.th-table td{display:block;width:100%}
  .th-table thead{display:none}
  .th-table tr{border:1px solid var(--line);border-radius:var(--radius-el);
    margin-bottom:10px;padding:6px 10px}
  .th-table td{border:none;padding:6px 0;display:flex;gap:10px;align-items:baseline;
    flex-wrap:wrap}
  .th-table td::before{content:attr(data-label);flex:0 0 92px;font-size:11px;
    text-transform:uppercase;letter-spacing:.03em;color:var(--label);font-weight:600}
  /* el resumen de la estrategia baja a su propia línea: al lado del nombre, en 390 px,
     quedaban dos columnas de tres palabras cada una */
  .th-table td .th-fit-sub{flex:1 0 100%;margin-left:0}
}

/* ===========================================================================
   «Mi valoración» · PER Gorca (docs/71 §12): vista propia + bloque de la ficha
   =========================================================================== */
.val-mark{color:var(--warn-text);font-weight:700;margin-left:2px;cursor:help}
.val-base{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:500}
.val-table td.val-td{vertical-align:middle}
.val-table .val-umbral{white-space:nowrap}
.val-table .val-umbral .val-base{display:inline}
.val-table .val-edit{margin-left:6px}
.val-card-act{margin:10px 0 0;text-align:right}
.val-gorca{margin:16px 0 4px}
.val-card .kpi-grid.val-kpis{margin-top:0;padding-top:0;border-top:0}
.val-card .kpi .kpi-v{font-size:18px}
.val-kpi-sub{font-size:var(--fs-xs);color:var(--muted);margin-top:4px;line-height:1.35}
.val-years-wrap{margin-top:16px}
.val-years{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.val-years th,.val-years td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.val-years thead th{color:var(--label);font-weight:600;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.04em}
.val-years tbody th,.val-years thead th:first-child{text-align:left;font-weight:600;color:var(--ink-2);
  position:sticky;left:0;background:var(--panel)}
.val-years tr.val-tot td,.val-years tr.val-tot th{font-weight:800;color:var(--ink)}
@media (max-width:760px){
  .val-card .kpi-grid.val-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* la fila resaltada al pasar el ratón baja el gris apagado de 4,5:1 (ui_a11y): un tono más */
.val-table .rd-tk{color:var(--label)}
.val-table .val-edit{color:var(--accent-text)}

/* ===================== Varias carteras/listas, movimientos y comparador (docs/71 §13) ===================== */
.form-msg{margin:0 0 12px;color:var(--neg-text);font-size:var(--fs-sm);font-weight:600}
.form-msg:empty{display:none}
.pf-in{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--label);font-size:var(--fs-xs);font-weight:600;vertical-align:middle}
.pf-scope-note{margin:0 0 12px;color:var(--label);font-size:var(--fs-sm)}
/* gestor de carteras/listas */
.scope-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.scope-row{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;
  padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--radius-el)}
.scope-name{grid-column:1;min-width:0;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;
  font-size:var(--fs-base);background:var(--panel-2);color:var(--ink)}
.scope-acts{grid-column:2;grid-row:1;display:flex;gap:6px}
.scope-n{grid-column:1 / -1;color:var(--label);font-size:var(--fs-sm)}
.scope-new{display:flex;gap:8px}
.scope-new input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;
  font-size:var(--fs-base);background:var(--panel-2);color:var(--ink)}
.rl-checks{display:grid;gap:10px;margin-bottom:16px}
/* movimientos */
.tr-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px}
.tr-bar input,.tr-bar select{padding:8px 12px;border:1px solid var(--line-2);border-radius:10px;
  font-size:var(--fs-md);background:var(--panel);color:var(--ink)}
.tr-bar input{flex:1;min-width:160px;max-width:280px}
.tr-sub{margin-bottom:4px}
.tr-table td,.tr-table th{white-space:nowrap}
.tr-op-tag{display:inline-block;padding:1px 8px;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:700}
.tr-compra{background:var(--pos-soft);color:var(--pos-text)}
.tr-venta{background:var(--neg-soft);color:var(--neg-text)}
.tr-dividendo{background:var(--blue-soft);color:var(--blue-text)}
.tr-native{display:block;color:var(--label);font-size:var(--fs-xs)}
.tr-acts{text-align:right;white-space:nowrap}
.tr-acts .btn+.btn{margin-left:4px}
.tr-more{margin:12px auto 0;display:block}
.tr-ops{border:0;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px}
.tr-ops legend{font-size:12px;font-weight:600;color:var(--label);margin-bottom:6px;padding:0}
.tr-op{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line-2);
  border-radius:var(--radius-pill);font-size:var(--fs-md);cursor:pointer}
.tr-op:has(input:checked){border-color:var(--accent-text);background:var(--accent-soft);color:var(--accent-text);font-weight:700}
.tr-search-wrap{position:relative;display:block}
.tr-search-wrap input{width:100%}
.tr-search-wrap .results{top:44px;left:0;right:0}
.tr-ini{margin:0 0 12px;padding:12px 14px;border-radius:var(--radius-el);background:var(--warn-soft);
  color:var(--ink);font-size:var(--fs-md);line-height:1.5}
.tr-ini .modal-fields{margin:10px 0 0}
@media (max-width:760px){
  .tr-table td{white-space:normal}
  .tr-acts{text-align:right}
  .tr-bar input{max-width:none}
}
/* comparador */
.cmpv-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.cmpv-search{width:280px}
.cmpv-search input{width:100%;padding:8px 12px;border:1px solid var(--line-2);border-radius:10px;
  font-size:var(--fs-md);background:var(--panel);color:var(--ink)}
.cmpv-search .results{top:42px}
.cmpv-wrap{overflow-x:auto}
.cmpv-table{min-width:560px}
.cmpv-table th,.cmpv-table td{white-space:nowrap}
.cmpv-table .cmpv-l{position:sticky;left:0;z-index:1;background:var(--panel);text-align:left;
  font-weight:600;color:var(--ink-2)}
.cmpv-table thead .cmpv-l{z-index:2}
.cmpv-c{border-top:3px solid var(--c);vertical-align:top;text-align:right;min-width:130px}
.cmpv-co{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:700;text-decoration:none;
  white-space:normal;text-align:left}
.cmpv-nm{max-width:170px}
.cmpv-meta{display:block;color:var(--label);font-size:var(--fs-xs);font-weight:500;margin-top:2px}
.cmpv-g th{background:var(--surface-2);color:var(--label);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.04em;text-align:left;position:sticky;left:0}
.cmpv-hl{background:var(--accent-soft);color:var(--accent-text);font-weight:700}
.cmpv-chart-card{margin-top:16px}
.cmpv-chart-card .card-head{flex-wrap:wrap}
@media (max-width:760px){
  .cmpv-search{width:100%}
  .cmpv-nm{max-width:110px}
  .cmpv-c{min-width:110px}
}
.cmpv-table thead th{text-transform:none;letter-spacing:0;font-size:var(--fs-sm)}
.cmpv-table thead .cmpv-meta{font-weight:500}
.tr-table td,.tr-table th{text-align:left}
.tr-table td.num,.tr-table th:nth-last-child(-n+5){text-align:right}
.tr-table .pf-link{color:var(--ink);font-weight:600;font-size:inherit}
/* modal de posición: «Quitar de esta cartera» a la izquierda y, en móvil, en su propia línea */
.modal-acts{flex-wrap:wrap}
#pf-del{margin-right:auto}
.pf-row .wl-btn{white-space:nowrap}
.pf-row.has-pos .pf-acts{flex-wrap:wrap}
@media (max-width:760px){
  #pf-del{flex-basis:100%;margin-right:0}
}
/* chips del comparador: el color de la serie va en la marca lateral; el texto, sobre fondo
   neutro (blanco sobre el naranja de la paleta daba 3,87:1) */
.cmpv-bar .cmp-chip{background:var(--surface-2);color:var(--ink);border-left:4px solid var(--c);
  border-radius:8px}
.cmpv-bar .cmp-x{background:var(--line-2);color:var(--ink)}
.cmpv-bar .cmp-x:hover{background:var(--faint-deco)}
#dv-hist-card{margin-top:16px}

/* ---------- notas personales (docs/71 §20) ---------- */
.ov-notes .ov-card-h .note-add{margin-left:auto}
.note-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.note{border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;background:var(--surface-2)}
.note-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:4px}
.note-acts{margin-left:auto;display:flex;gap:4px}
.note-text{font-size:14px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.note-text p{margin:0 0 6px}
.note-text p:last-child{margin-bottom:0}
.note-ta{padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;font:inherit;font-size:14px;
  line-height:1.5;resize:vertical;min-height:160px;background:var(--surface);color:var(--ink)}
.note-count{font-size:12px;text-align:right}
/* vista «Mis notas» */
.nt-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.nt-toolbar input{flex:1 1 240px;padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--surface);color:var(--ink);font:inherit}
.nt-group{margin-bottom:16px}
.nt-group-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:600}
.nt-group-h a{color:var(--ink);text-decoration:none}
.nt-group-h a:hover{text-decoration:underline}
.nt-group-h .muted{font-weight:400;font-size:12px}

/* ---------- últimas comunicaciones (docs/71 §20) ---------- */
.nw-list{list-style:none;margin:0;padding:0}
.nw{display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.nw-list:first-of-type .nw:first-child{border-top:0}
.nw-date{flex:0 0 78px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.nw-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.nw-type{font-size:12px;font-weight:600;color:var(--ink-2)}
.nw-title{font-size:14px;color:var(--ink);text-decoration:none;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nw-title:hover{text-decoration:underline}
.nw-toggle{margin-top:6px}

/* ---------- segmentos (docs/71 §20) ---------- */
.ov-segs .seg-ctl{margin-left:auto;display:flex;gap:8px;align-items:center;font-weight:400}
.seg-tabs{display:flex;background:var(--surface-2);border-radius:999px;padding:2px}
.seg-tab{border:0;background:transparent;font:inherit;font-size:12px;padding:4px 10px;border-radius:999px;
  color:var(--muted);cursor:pointer}
.seg-tab.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg-year{font:inherit;font-size:12px;padding:4px 8px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--surface);color:var(--ink)}
.seg-head,.seg-row{display:grid;grid-template-columns:minmax(120px,1.4fr) 1.6fr 88px 56px;gap:10px;
  align-items:center}
.seg-list.mg .seg-row,.ov-segs .seg-head:has(span:nth-child(5)){grid-template-columns:minmax(120px,1.4fr) 1.6fr 88px 56px 60px}
.seg-head{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding-bottom:6px;
  border-bottom:1px solid var(--line)}
.seg-head span:nth-child(n+3){text-align:right}
.seg-row{padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.seg-name{overflow-wrap:anywhere}
.seg-bar{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.seg-bar span{display:block;height:100%;background:var(--accent);border-radius:999px}
.seg-val,.seg-pct,.seg-mg{text-align:right;font-variant-numeric:tabular-nums}
.seg-pct,.seg-mg{color:var(--ink-2)}
.seg-note{font-size:12px;color:var(--muted);margin:8px 0 0}
@media (max-width:760px){
  .seg-head,.seg-row,.seg-list.mg .seg-row,.ov-segs .seg-head:has(span:nth-child(5)){
    grid-template-columns:1fr 72px 46px;row-gap:4px}
  .seg-bar{grid-column:1 / -1;grid-row:2}
  .seg-head span:nth-child(2),.seg-mg,.seg-head span:nth-child(5){display:none}
  .ov-card-h:has(.seg-ctl){flex-wrap:wrap}
}

/* ---------- barrera de regresión en el panel (docs/67 T7) ---------- */
.au-sweep{margin-bottom:16px}
.au-sweep-kpi{margin:12px 0}
.au-sweep-reg ul{margin:8px 0 0;padding-left:18px;font-size:13px;max-height:320px;overflow:auto}
.au-sweep-tab{width:100%;font-size:13px}
.au-sweep-tab td,.au-sweep-tab th{white-space:normal;text-align:left;padding:5px 8px}
.au-sweep-tab .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.au-sweep details{margin-top:8px}
.au-sweep summary{cursor:pointer;font-weight:600}

/* ===========================================================================
   Cabecera de la ficha con la gráfica de cotización (docs/72): cifras de mercado a la
   izquierda, gráfica (precio o múltiplos en el tiempo) a la derecha. Va al final para
   ganar a las reglas de móvil de `.kpi-lead`, que se escribieron para una sola fila.
   =========================================================================== */
.kpi-hero{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:28px;align-items:start}
.kpi-hero-l{min-width:0}
.kpi-hero.no-px{display:block}
.kpi-hero:not(.no-px) .kpi-lead{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.kpi-hero:not(.no-px) .kpi-lead-item{order:2;min-width:0}
/* precio a lo ancho (con divisa de tres letras no cabe junto a la variación), luego variación y
   capitalización, y el rango a lo ancho para que no se parta */
.kpi-hero:not(.no-px) .kpi-lead-item:first-child{order:0;grid-column:1/-1}
.kpi-hero:not(.no-px) #kpi-var{order:1}
.kpi-hero:not(.no-px) #kpi-rng{order:3;grid-column:1/-1}
.kpi-hero:not(.no-px) .kpi-lead-item:first-child .kpi-lead-v{font-size:30px}
.kpi-hero:not(.no-px) #kpi-var .kpi-lead-v{font-size:22px}
.kpi-hero:not(.no-px) .kpi-lead-v{font-size:18px}
.kpi-hero:not(.no-px) .kpi-chips{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.kpi-hero:not(.no-px) .kpi-chip{margin-right:0}
.qc-card{min-width:0}
.qc-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.qc-title{font-weight:700;font-size:15px}
.qc-sum{margin:10px 0 0;font-size:13px;color:var(--muted)}
.qc-sum b{color:var(--ink);font-weight:700}
.qc-canvas{position:relative;height:250px;margin-top:8px}
.qc-foot{margin:6px 0 0;font-size:12px;color:var(--muted)}
.kpi-click{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.kpi-click:hover{border-color:var(--accent-strong)}
.kpi-click .kpi-l::after{content:" ↗";color:var(--faint);font-weight:400}
@media (max-width:1100px){
  .kpi-hero{grid-template-columns:minmax(0,1fr);gap:16px}
  .kpi-hero:not(.no-px) .kpi-lead{grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;gap:14px 28px}
  .kpi-hero:not(.no-px) .kpi-lead-item:first-child,
  .kpi-hero:not(.no-px) #kpi-rng{grid-column:auto}
}
@media (max-width:760px){
  .kpi-hero:not(.no-px) .kpi-lead{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .kpi-hero:not(.no-px) .kpi-lead-item:first-child .kpi-lead-v{font-size:24px}
  .kpi-hero:not(.no-px) #kpi-var .kpi-lead-v{font-size:20px}
  .kpi-hero:not(.no-px) .kpi-lead-v{font-size:16px}
  .kpi-hero:not(.no-px) .kpi-chips{flex-wrap:nowrap}
  .qc-bar .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .qc-bar .seg::-webkit-scrollbar{display:none}
  .qc-bar .seg button{padding:6px 9px;white-space:nowrap}
  .qc-canvas{height:210px}
}