/* ==========================================================================
   Fitintrade · Sistema visual compartido (tokens + tabla + gráfico)
   Lo usan: Explorador de acciones, Mundo ETFs, Explorador ETF, Ranking FIT,
   Comparador, ficha ETF y Carteras. Un solo estándar para toda la app.
   ========================================================================== */

:root{
  /* --- tipografía --- */
  --ft-font: inherit;
  --ft-fs-xs: 11.5px;   /* badges, notas */
  --ft-fs-sm: 12.5px;   /* subtítulos de celda, cabeceras */
  --ft-fs-md: 14px;     /* texto de tabla */
  --ft-fs-lg: 15px;     /* pestañas */
  --ft-fs-h3: 13px;     /* títulos de tarjeta (uppercase) */
  --ft-fs-h1: 26px;
  --ft-fw-med: 600;
  --ft-fw-semi: 650;
  --ft-fw-bold: 700;
  --ft-fw-black: 800;
  /* --- espaciado --- */
  --ft-sp-1: 4px;  --ft-sp-2: 8px;  --ft-sp-3: 12px;
  --ft-sp-4: 16px; --ft-sp-5: 22px; --ft-sp-6: 32px;
  --ft-cell-x: 12px;          /* padding horizontal de celda (idéntico th/td) */
  --ft-cell-y: 12px;
  --ft-row-h: 48px;           /* altura de fila consistente */
  /* --- bordes, radios, sombras --- */
  --ft-line: var(--line, #e8e8ed);
  --ft-radius: 14px;
  --ft-radius-sm: 9px;
  --ft-shadow-1: 0 1px 2px rgba(0,0,0,.04);
  --ft-shadow-2: 0 8px 28px rgba(0,0,0,.10);
  /* --- superficies y texto --- */
  --ft-bg: var(--bg, #f5f5f7);
  --ft-panel: var(--panel, #fff);
  --ft-panel-2: #fbfbfd;      /* cabeceras de grupo, zonas suaves */
  --ft-hover: #fafafa;
  --ft-ink: var(--ink, #1d1d1f);
  --ft-gray: var(--gray, #6e6e73);
  --ft-soft: var(--soft, #86868b);
  /* --- semántica --- */
  --ft-pos: var(--green-dk, #00A77E);
  --ft-neg: var(--red, #E5484D);
  --ft-neu: var(--gray, #6e6e73);
  --ft-brand: var(--green, #00C896);
  --ft-brand-soft: var(--green-soft, #e9faf4);
  --ft-warn: var(--amber, #E8A33D);
  /* --- series de gráficos (orden fijo = colores consistentes) --- */
  --ft-s1: #00C896; --ft-s2: #2f6fed; --ft-s3: #E8A33D; --ft-s4: #E5484D;
}

/* ===================== TABLA COMPARTIDA ===================== */
.ft-wrap{ background:var(--ft-panel); border:1px solid var(--ft-line);
  border-radius:var(--ft-radius); box-shadow:var(--ft-shadow-1); overflow:hidden; }
.ft-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.ft{ width:100%; border-collapse:collapse; font-size:var(--ft-fs-md);
  table-layout:auto; }

/* Cabecera: MISMO padding y caja que las celdas -> nunca se desalinean */
table.ft thead th{
  text-align:left; color:var(--ft-gray); font-weight:var(--ft-fw-semi);
  font-size:var(--ft-fs-sm); text-transform:uppercase; letter-spacing:.03em;
  padding:10px var(--ft-cell-x); border-bottom:1px solid var(--ft-line);
  white-space:nowrap; background:var(--ft-panel); box-sizing:border-box;
}
table.ft tbody td{
  padding:var(--ft-cell-y) var(--ft-cell-x); border-bottom:1px solid var(--ft-line);
  vertical-align:middle; height:var(--ft-row-h); box-sizing:border-box;
}
table.ft tbody tr:last-child td{ border-bottom:0; }
table.ft tbody tr:hover td{ background:var(--ft-hover); }
table.ft tbody tr.ft-click{ cursor:pointer; }

/* Cabecera sticky (tablas largas) */
.ft-sticky table.ft thead th{ position:sticky; top:0; z-index:2; }

/* Alineación: el estándar único de la app */
table.ft th.ft-num, table.ft td.ft-num{ text-align:right; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
table.ft th.ft-center, table.ft td.ft-center{ text-align:center; }
table.ft th.ft-acts, table.ft td.ft-acts{ text-align:right; white-space:nowrap; }
table.ft td.ft-null{ color:var(--ft-soft); }

/* Celda principal: nombre + línea secundaria (ISIN · ticker · bolsa) */
.ft-main{ display:flex; flex-direction:column; line-height:1.3; min-width:0;
  /* EL max-width ES LO QUE HACE QUE EL ELLIPSIS FUNCIONE.
     Sin él, `text-overflow:ellipsis` de .ft-t no se activa nunca: con table-layout:auto
     el navegador ensancha la columna hasta que quepa el nombre más largo, y como .ft-t es
     nowrap, no hay nada que recortar. En el Explorador ETF eso daba una columna de 579 px
     -el 42% de la tabla- por nombres como «iShares Core MSCI World UCITS ETF USD (Acc)
     EUR», y empujaba la tabla a 1.379 px dentro de un contenedor de 1.078: el usuario
     perdía la última columna y tenía que descubrir que había scroll.
     El cap solo existía en @media(max-width:820px), así que en escritorio no había ninguno.
     320 px caben ~40 caracteres, que es un nombre de fondo entero salvo los kilométricos;
     y esos llevan su title, que §22 pide para el texto truncado. */
  max-width:320px; }
.ft-main .ft-t{ font-weight:var(--ft-fw-semi); color:var(--ft-ink); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.ft-t:hover{ color:var(--ft-pos); text-decoration:underline; }
.ft-main .ft-s{ font-size:var(--ft-fs-sm); color:var(--ft-soft); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

/* Ordenación */
th.ft-sort{ cursor:pointer; user-select:none; }
th.ft-sort:hover{ color:var(--ft-ink); background:var(--ft-brand-soft); }
th.ft-sort:focus-visible{ outline:2px solid var(--ft-brand); outline-offset:-2px; }
th.ft-sort.ft-on{ color:var(--ft-pos); }
.ft-ind{ font-size:9px; margin-left:3px; }

/* Semántica numérica */
.ft-pos{ color:var(--ft-pos); font-weight:var(--ft-fw-semi); }
.ft-neg{ color:var(--ft-neg); font-weight:var(--ft-fw-semi); }

/* Badges */
.ft-badge{ display:inline-block; font-size:var(--ft-fs-xs); font-weight:var(--ft-fw-bold);
  padding:3px 9px; border-radius:20px; white-space:nowrap; letter-spacing:.02em; }
.ft-b-pos{ background:var(--ft-brand-soft); color:var(--ft-pos); }
.ft-b-neg{ background:rgba(229,72,77,.10); color:var(--ft-neg); }
.ft-b-warn{ background:rgba(232,163,61,.14); color:#a06a12; }
.ft-b-neu{ background:#f0f0f2; color:var(--ft-gray); }

/* Acciones por fila */
.ft-act{ background:var(--ft-panel); border:1px solid var(--ft-line); color:var(--ft-ink);
  border-radius:var(--ft-radius-sm); padding:5px 10px; font-size:var(--ft-fs-sm);
  cursor:pointer; font-weight:var(--ft-fw-med); font-family:inherit; }
.ft-act:hover{ border-color:var(--ft-brand); color:var(--ft-pos); }

/* Estados: carga / vacío / error */
.ft-skel i{ display:block; height:13px; border-radius:6px; margin:11px 0;
  background:linear-gradient(90deg,#f0f0f3 25%,#e6e6ea 37%,#f0f0f3 63%);
  background-size:400% 100%; animation:ft-sk 1.2s infinite; }
@keyframes ft-sk{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.ft-msg{ padding:36px 16px; text-align:center; color:var(--ft-gray); font-size:var(--ft-fs-md); }
.ft-retry{ background:var(--ft-brand); color:#04120d; border:0; border-radius:var(--ft-radius-sm);
  padding:9px 18px; font-weight:var(--ft-fw-bold); cursor:pointer; margin-top:10px;
  font-family:inherit; }
.ft-fade{ opacity:.55; transition:opacity .12s; }

/* Paginación */
.ft-pag{ display:flex; justify-content:space-between; align-items:center; gap:var(--ft-sp-3);
  flex-wrap:wrap; padding:var(--ft-sp-3) var(--ft-cell-x); border-top:1px solid var(--ft-line);
  background:var(--ft-panel); }
.ft-pag-i{ color:var(--ft-gray); font-size:13.5px; }
.ft-pag-c{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ft-pg{ background:var(--ft-panel); border:1px solid var(--ft-line); border-radius:var(--ft-radius-sm);
  padding:6px 11px; font-size:13px; cursor:pointer; font-weight:var(--ft-fw-med);
  color:var(--ft-ink); font-family:inherit; }
.ft-pg:hover:not(:disabled){ border-color:var(--ft-brand); color:var(--ft-pos); }
.ft-pg:disabled{ opacity:.45; cursor:default; }
.ft-pg-n{ font-size:13px; color:var(--ft-gray); padding:0 6px; font-variant-numeric:tabular-nums; }
.ft-sel{ padding:6px 9px; border:1px solid var(--ft-line); border-radius:var(--ft-radius-sm);
  font-size:13px; font-family:inherit; background:var(--ft-panel); color:var(--ft-ink); }

/* ===================== GRÁFICO COMPARTIDO ===================== */
.ft-chart{ position:relative; width:100%; }
.ft-chart canvas{ width:100%; display:block; }
.ft-tip{ position:absolute; pointer-events:none; background:var(--ft-ink); color:#fff;
  border-radius:var(--ft-radius-sm); padding:8px 11px; font-size:12.5px; line-height:1.5;
  box-shadow:var(--ft-shadow-2); white-space:nowrap; z-index:5; display:none; }
.ft-tip b{ font-variant-numeric:tabular-nums; }
.ft-tip .ft-tip-d{ color:#a9bccd; font-size:11.5px; margin-bottom:3px; }
.ft-leg{ display:flex; gap:14px; flex-wrap:wrap; margin-top:var(--ft-sp-2); }
.ft-leg button{ display:flex; align-items:center; gap:6px; background:none; border:0;
  cursor:pointer; font-size:13px; color:var(--ft-ink); font-family:inherit;
  font-weight:var(--ft-fw-med); padding:2px 0; }
.ft-leg button.ft-off{ opacity:.38; text-decoration:line-through; }
.ft-leg .ft-dot{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.ft-per{ display:flex; gap:6px; flex-wrap:wrap; }
.ft-per button{ padding:6px 13px; border-radius:20px; background:var(--ft-panel);
  border:1px solid var(--ft-line); font-size:13px; cursor:pointer;
  font-weight:var(--ft-fw-med); color:var(--ft-gray); font-family:inherit; }
.ft-per button.ft-on{ background:var(--ft-brand); border-color:var(--ft-brand); color:#04120d; }

/* ============ TABLA DESPLAZABLE EN MOVIL (opt-in: .ft-mx) ============
   Todo lo de este bloque cuelga de `.ft-mx`, que sólo pone `movilDesplazable`. Sin esa
   bandera ninguna de estas reglas casa con nada, así que el Explorador, ETFs, Mi cartera,
   Timing y Administración siguen exactamente igual.

   El envoltorio se hace `relative` para poder anclarle las sombras: van en el ENVOLTORIO y
   no en la caja que se desplaza, porque un pseudo-elemento dentro de la caja viaja con el
   contenido y la sombra se iría con el dedo. */
.ft-mx{ position:relative; }
.ft-mx .ft-scroll{ overscroll-behavior-x:contain; }
.ft-mx .ft-scroll:focus-visible{ outline:2px solid var(--ft-brand,#00c896); outline-offset:-2px; }

/* Las sombras las enciende el JS midiendo el scroll real. Sin desbordamiento no hay clase y
   no hay sombra: un degradado permanente anuncia contenido que no existe. */
.ft-mx::after, .ft-mx::before{
  content:""; position:absolute; top:0; bottom:0; width:26px; pointer-events:none;
  opacity:0; transition:opacity .15s ease; z-index:5;
}
.ft-mx::after{ right:0; background:linear-gradient(to left, rgba(0,0,0,.14), rgba(0,0,0,0)); }
.ft-mx::before{ left:0;  background:linear-gradient(to right, rgba(0,0,0,.14), rgba(0,0,0,0)); }
.ft-mx.ft-mx-der::after{ opacity:1; }
.ft-mx.ft-mx-izq::before{ opacity:1; }

/* Primera columna FIJA: al desplazar las métricas se sigue sabiendo qué activo se lee.
   Lleva fondo propio -- sin él, el contenido que pasa por debajo se transparenta -- y una
   línea derecha que sólo aparece cuando de verdad hay algo oculto a la izquierda. */
.ft-sticky1 table.ft thead th:first-child,
.ft-sticky1 table.ft tbody td:first-child{
  position:sticky; left:0; background:var(--ft-panel); z-index:3;
}
.ft-sticky1 table.ft thead th:first-child{ z-index:4; }
.ft-sticky1 table.ft tbody tr:hover td:first-child{ background:var(--ft-hover); }
/* La sombra de la columna fija sólo aparece cuando de verdad hay contenido pasando por
   debajo. Una línea de 1 px no bastaba para que se leyera como fija: se ve el borde y una
   sombra corta, que es lo que distingue «columna fija» de «columna con borde». */
.ft-mx.ft-mx-izq table.ft thead th:first-child,
.ft-mx.ft-mx-izq table.ft tbody td:first-child{
  box-shadow:1px 0 0 var(--ft-line), 6px 0 8px -6px rgba(0,0,0,.18);
}

/* ===================== RESPONSIVE ===================== */
@media(max-width:820px){
  :root{ --ft-cell-x:9px; --ft-cell-y:10px; --ft-row-h:44px; }
  table.ft{ font-size:13px; }
  /* columnas marcadas como secundarias se ocultan y viven en la fila expandible */
  table.ft .ft-hide-m{ display:none; }
  /* ...salvo con la tabla desplazable, donde se alcanzan con el dedo. Decisión del
     propietario del 20/09/2026: en móvil NO se sustituye la tabla por tarjetas; se desplaza.
     Una columna oculta es una columna INALCANZABLE, y eso era el defecto. */
  .ft-mx table.ft .ft-hide-m{ display:table-cell; }
  .ft-mx .ft-exp{ display:none; }
  .ft-main{ max-width:200px; }   /* sobre el contenedor, no sobre .ft-t:
     es el contenedor quien fija el ancho de la columna. En el hijo, la
     linea secundaria (ISIN) seguia estirandola. */
  .ft-pag{ justify-content:center; }
}
@media(max-width:560px){
  .ft-main .ft-t{ max-width:150px; }
  .ft-pag-i{ width:100%; text-align:center; }
}
/* Detalle expandible en móvil */
.ft-more-row td{ background:var(--ft-panel-2); }
.ft-more{ display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; font-size:13px; }
.ft-more div{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; }
.ft-more span:first-child{ color:var(--ft-gray); }
.ft-exp{ background:none; border:0; cursor:pointer; color:var(--ft-gray); font-size:15px;
  padding:2px 6px; display:none; }
@media(max-width:820px){ .ft-exp{ display:inline-block; } }

/* ===== Bloque "Técnico y Timing" (fit_tecnico.js). Compartido por la ficha de
   acciones y la de ETFs: un solo estilo, un solo sitio donde tocarlo. ===== */
.tecb{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700}
.tecb-green{background:#e4f2ed;color:#00614a}
.tecb-gray{background:#eceef1;color:#5c6e69}
.tecb-amber{background:#fbf0e0;color:#8a4e00}
.tecb-red{background:#fbeae8;color:#9c2f27}
.tec-warn{background:#fbf0e0;border-left:3px solid #8a4e00;padding:9px 12px;
  border-radius:0 6px 6px 0;margin:8px 0;font-size:13px}
.tec-h{margin:18px 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--soft, #86868b)}
.tec-row{padding:8px 0;border-bottom:1px solid var(--line, #e8e8ed)}
.tec-row-h{display:flex;justify-content:space-between;gap:10px}
.tec-row-s{margin:2px 0 0;font-size:11.5px}
.tec-det{border-bottom:1px solid var(--line, #e8e8ed);padding:7px 0}
.tec-det summary{cursor:pointer;display:flex;justify-content:space-between;gap:10px;
  list-style:none}
.tec-det summary::-webkit-details-marker{display:none}
.tec-met{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px}
.tec-met-d{font-size:10.5px;opacity:.75}
.tec-pen{padding:7px 0;font-size:12.5px;color:#8a4e00}
.tec-tf{display:inline-flex;gap:2px;background:var(--card, #f5f5f7);border-radius:8px;padding:2px}
.tec-tf button{background:none;border:0;padding:5px 12px;border-radius:6px;cursor:pointer;
  font-size:12.5px;color:var(--soft, #86868b)}
.tec-tf button.on{background:var(--bg, #fff);color:var(--txt, #1d1d1f);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tec-chk{font-size:12px;display:inline-flex;align-items:center;gap:4px}
.tec-dis{font-size:11px;margin-top:14px;font-style:italic}

/* Aviso de honestidad del Timing FIT: que mide de verdad el numero.
   Nace de la validacion historica del Hito 7: el score ordena riesgo, no rentabilidad. */
.tec-honesto{border-left:3px solid var(--warn,#c8860d);background:rgba(200,134,13,.07);padding:10px 12px;margin:10px 0 14px;font-size:12.5px;line-height:1.5;color:var(--soft);max-width:78ch;border-radius:0 4px 4px 0}
.tec-honesto b{color:var(--text,inherit);font-weight:600}

/* El "que significa un valor alto" del Timing: visible pero sin gritar. */
.tec-honesto b{ font-weight:600; display:block; }
.tec-honesto-mas{ margin-top:6px; }
.tec-honesto-mas summary{ cursor:pointer; font-size:12px; opacity:.85; font-weight:600; }
.tec-honesto-mas summary:hover{ opacity:1; }
.tec-honesto-mas[open] summary{ margin-bottom:4px; }

/* ---- FitAsset: componente canónico de identidad de activo (equity_experience_v2 §3) ---- */
.fa{ display:inline-flex; align-items:center; gap:9px; min-width:0; text-align:left; }
.fa-logo{ position:relative; flex-shrink:0; border-radius:7px; overflow:hidden;
  background:var(--fa-bg,#888); display:flex; align-items:center; justify-content:center; }
.fa-logo.fa-has{ background:#fff; }
.fa-ini{ color:#fff; font-weight:800; font-size:11px; letter-spacing:.02em; user-select:none; }
.fa-logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }
.fa-t{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.fa-tk{ font-weight:800; font-size:13px; color:var(--ft-text,#1a1d21); }
.fa-nm{ font-size:11px; color:var(--ft-text-2,#6b7280); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:32ch; }
.fa-link{ text-decoration:none; color:inherit; }
.fa-out{ color:var(--ft-gray,#9aa3ad); font-weight:800; margin-left:5px; cursor:help; }
.fa-nolink .fa-tk{ color:var(--ft-text-2,#6b7280); }

/* ===== MEJORAS 2.0 · B2/B3 — fila navegable, toolbar, tarjeta móvil ===== */
/* Fila clicable: cursor + hover + FOCO por teclado visible (antes solo ratón). */
table.ft tbody tr.ft-click{ cursor:pointer; }
table.ft tbody tr.ft-click:hover{ background:var(--ft-panel-2,#f6f7f9); }
table.ft tbody tr.ft-click:focus-visible{ outline:2px solid var(--ft-brand,#00c896); outline-offset:-2px; background:var(--ft-panel-2,#f6f7f9); }
table.ft td .fa{ vertical-align:middle; }

/* TableToolbar: búsqueda + filtros + contador + limpiar. Igual en todas las tablas. */
.ft-tb{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ft-tb-search{ flex:1 1 240px; min-width:0; }
.ft-tb-input{ width:100%; font:inherit; font-size:14px; padding:9px 12px; border-radius:10px;
  border:1px solid var(--ft-line,#e6e8eb); background:var(--ft-panel,#fff); color:var(--ft-ink,#1a1d21); }
.ft-tb-input:focus{ outline:2px solid var(--ft-brand,#00c896); outline-offset:1px; border-color:transparent; }
.ft-tb-slots{ display:flex; gap:8px; flex-wrap:wrap; }
.ft-tb-count{ font-size:13px; color:var(--ft-gray,#6b7280); font-weight:600; margin-left:auto; }
.ft-tb-clear{ font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:7px 12px;
  border-radius:9px; border:1px solid var(--ft-line,#e6e8eb); background:var(--ft-panel,#fff); color:var(--ft-ink,#1a1d21); }
.ft-tb-clear:hover{ border-color:var(--ft-brand,#00c896); }

/* Botón "ver más" de móvil: oculto en escritorio, área táctil cómoda en móvil. */
.ft-exp{ background:none; border:0; cursor:pointer; color:var(--ft-gray,#6b7280); font-size:15px;
  padding:0; margin-right:6px; display:none; line-height:1; }
@media(max-width:820px){
  .ft-exp{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; min-height:32px; margin-right:0; vertical-align:middle; flex:0 0 auto; }
  /* La 1ª columna mantiene botón + logo + identidad EN UNA fila (no se parte entre el ▸ y el
     logo, que era lo que desalineaba). El nombre trunca con puntos suspensivos. */
  table.ft tbody td:first-child{ white-space:nowrap; }
  table.ft tbody td:first-child > .fa{ max-width:calc(100% - 30px); }
  /* el nombre trunca con puntos suspensivos (no se corta contra el borde). Tope relativo al
     viewport: deja sitio para el botón ▸, el logo y las columnas de la derecha (FIT/1A). */
  table.ft tbody td:first-child .fa-t{ max-width:52vw; }
  table.ft tbody td:first-child .fa-nm{ max-width:100%; }
}

/* ===== MEJORAS 2.0 — FitTable A (sub-fila de dominio) + B (columnas asíncronas) ===== */
.ft-expcol{ width:34px; text-align:center; }
.ft-toggle{ background:none; border:0; cursor:pointer; color:var(--ft-gray,#6b7280); font-size:14px;
  line-height:1; padding:0; min-width:30px; min-height:30px; display:inline-flex; align-items:center; justify-content:center; }
.ft-toggle:hover{ color:var(--ft-ink,#1a1d21); }
.ft-toggle:focus-visible{ outline:2px solid var(--ft-brand,#00c896); outline-offset:1px; border-radius:6px; }
.ft-sub > td{ background:var(--ft-panel-2,#f6f7f9); padding:0; }
.ft-sub > td > *{ margin:0; }