/* ======================================================================================
   APP SHELL FINAL de Fitintrade — el contenedor visual definitivo.

   TODO va bajo `.fshell`. Ni una regla global.
   ---------------------------------------------------------------------------
   No hay `body{}`, ni `a{}`, ni `table{}`, ni `input{}` sueltos. Y no es purismo: las
   páginas legacy (dashboard.html son 573 KB con su propio CSS) heredan de lo global, y
   una regla suelta sobre `table` aquí les cambiaría las tablas sin que nadie lo pidiera
   ni lo revisara. El contenedor se pone alrededor; no entra dentro.

   MOBILE-FIRST DE VERDAD
   ---------------------------------------------------------------------------
   La base de este fichero ES el móvil: cajón lateral + barra inferior. El escritorio se
   añade a partir de 1024px con `min-width`. No hay ni un `max-width` escondiendo cosas al
   final, que es como se acaba con una interfaz de escritorio encogida.

   CONGELADO — 17/07/2026
   ---------------------------------------------------------------------------
   Aquí hubo dos variantes (`.v-a` y `.v-b`) para poder elegir. Se eligió la A y la B se
   retiró: sus reglas son ahora las de la casa, sin clase que las active.

   Con esto quedan congeladas SEIS cosas, y ningún módulo puede volver a definirlas:
   navegación · barra lateral · logo · iconografía · comportamiento móvil · estructura.

   Lo que este fichero NO define todavía —y por eso viene el Hito 1.5— es la tipografía,
   el color, el espaciado y los componentes base. Hoy eso vive repartido: 52 tamaños de
   letra y 293 colores escritos a mano en las plantillas, y dos juegos de tokens (`--fs-*`
   aquí, `--ft-*` en fit_ui.css) que no se hablan.
   ====================================================================================== */

/* Ninguna imagen de la envolvente puede empujar la maquetación. Es la red por si mañana
   alguien añade otro <img> y se olvida del ancho: el fallo de arriba no se ve hasta que
   miras la página en un móvil. */
.fshell img { max-width: 100%; }

/* ======================================================================================
   EL RAÍL, MEDIDO UNA SOLA VEZ (02/09/2026)
   ======================================================================================
   `--fs-sb-w` y `--fs-sb-mini` estaban dentro de `.fshell`. Se suben a `:root` para que
   también los vea lo que cuelga directamente de `<body>`.

   `--fs-rail` es el ancho EFECTIVO del raíl en este momento: 0 por defecto —en móvil la
   barra es un cajón que no ocupa sitio, y las páginas sin App Shell final no tienen raíl— y
   el ancho real sólo en escritorio y sólo cuando la envolvente lo declara. Una capa a
   pantalla completa lo lee para no tapar la navegación. */
:root {
  --fs-sb-w:      264px;   /* el clásico tenía 340: demasiado. 264 cabe y respira. */
  --fs-sb-mini:   68px;
  --fs-rail:      0px;
}
@media (min-width: 1024px) {
  body.fs-conrail      { --fs-rail: var(--fs-sb-w); }
  body.fs-conrail.fs-conrail-mini { --fs-rail: var(--fs-sb-mini); }
}

.fshell {
  /* ---------------- color: el del clásico, que es la marca ---------------- */
  --fs-green:      #00C896;
  --fs-green-dk:   #00A77E;
  --fs-green-soft: rgba(0, 200, 150, .12);
  --fs-red:        #E5484D;
  --fs-amber:      #D98324;
  --fs-ink:        #1d1d1f;
  --fs-gray:       #6e6e73;
  --fs-soft:       #86868b;
  --fs-panel:      #ffffff;
  --fs-bg:         #f5f5f7;
  --fs-line:       #e8e8ed;

  /* barra lateral: oscura, como en el clásico. El logo está pensado para este fondo. */
  --fs-side:        #2b2d31;
  --fs-side-ink:    #f5f5f7;
  --fs-side-muted:  #b0b2b8;
  --fs-side-line:   rgba(255, 255, 255, .10);
  --fs-side-hover:  rgba(255, 255, 255, .06);
  --fs-side-active: rgba(0, 200, 150, .18);

  /* ---------------- medidas ----------------
     Los DOS anchos del raíl viven en `:root` (justo debajo de este bloque) y aquí sólo se
     consumen. La razón es que hay capas que se cuelgan de `<body>` —el fondo del gráfico
     ampliado, por ejemplo— y son HERMANAS de `.fshell`, así que no heredarían un token
     declarado aquí dentro. Duplicar la medida allí sería tener dos veces el mismo número. */
  --fs-top-h:     56px;
  --fs-bottom-h:  58px;
  --fs-radius:    14px;
  --fs-radius-sm: 9px;

  /* El aire lateral del contenido. UN número, en UN sitio. Antes esto lo decidía cada
     página por su cuenta (20px aquí, 24px allá, 0 en Timing) y por eso el contenido
     bailaba de una pantalla a otra. */
  --fs-gutter: clamp(14px, 1.6vw, 24px);

  /* La medida máxima del contenido.
     1760 no es un número bonito, es el resultado de una cuenta: el monitor grande de la
     casa es de 1920 y la barra ocupa 264, así que el hueco real es 1656. Con 1760 no
     sobra NADA a 1920 —que era la queja— y a la vez una pantalla de 2560 no estira una
     tabla hasta los 2300px, donde el ojo ya no sigue la fila. */
  --fs-content-max: 1760px;

  /* ---------------- tipografía ---------------- */
  --fs-fs-nav:   14.5px;   /* nunca por debajo de 14 en navegación */
  --fs-fs-grp:   11px;
  --fs-fs-sm:    12.5px;

  /* ---------------- zonas seguras del dispositivo ---------------- */
  --fs-safe-b: env(safe-area-inset-bottom, 0px);
  --fs-safe-t: env(safe-area-inset-top, 0px);
  --fs-safe-l: env(safe-area-inset-left, 0px);

  min-height: 100dvh;      /* dvh y no vh: en móvil la barra del navegador se mueve */
  background: var(--fs-bg);
  color: var(--fs-ink);
}

/* ======================================================================================
   MÓVIL (la base)
   ====================================================================================== */

/* ---------------- cajón lateral ---------------- */
.fshell .fs-sb {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(86vw, 320px);
  padding-left: var(--fs-safe-l);
  padding-top: var(--fs-safe-t);
  background: var(--fs-side);
  color: var(--fs-side-ink);
  display: flex;
  flex-direction: column;
  z-index: 60;
  transform: translateX(-102%);
  transition: transform .22s ease;
  overscroll-behavior: contain;   /* que el scroll del cajón no arrastre la página */
}
.fshell .fs-sb.abierto { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .fshell .fs-sb { transition: none; }
}

.fshell .fs-scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
  z-index: 55;
}
.fshell .fs-scrim.on { opacity: 1; pointer-events: auto; }

/* ---------------- cabecera de la barra: marca + contraer ---------------- */
.fshell .fs-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 8px 10px 16px;
  min-height: var(--fs-top-h);
  border-bottom: 1px solid var(--fs-side-line);
}
.fshell .fs-brand {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; color: inherit; min-width: 0;
}
.fshell .fs-brand img {
  height: 34px; width: auto; display: block; flex-shrink: 0;
}
.fshell .fs-brand .txt {
  font-weight: 900; font-size: 22px; letter-spacing: -.005em; white-space: nowrap;
}
.fshell .fs-brand .txt b { color: var(--fs-green); font-weight: 900; }

/* El botón de contraer. Empujado a la derecha con el margin-left auto. Discreto pero
   visible; el chevron mira a la izquierda (contraer) y gira al expandir. */
.fshell .fs-collapse {
  margin-left: auto; flex-shrink: 0;
  width: 34px; height: 34px;
  display: none;                       /* solo escritorio; se enciende en el @media 1024 */
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; border-radius: var(--fs-radius-sm);
  color: var(--fs-side-muted);
}
.fshell .fs-collapse:hover { background: var(--fs-side-hover); color: var(--fs-side-ink); }
.fshell .fs-collapse:focus-visible { outline: 2px solid var(--fs-green); outline-offset: 1px; }
.fshell .fs-collapse svg { transition: transform .18s ease; }
.fshell.mini .fs-collapse svg { transform: rotate(180deg); }   /* apunta a expandir */

.fshell .fs-sb-x {
  margin-left: auto; flex-shrink: 0;
  width: 44px; height: 44px;          /* 44: el mínimo táctil. No se negocia. */
  background: none; border: 0; color: var(--fs-side-muted);
  font-size: 26px; line-height: 1; cursor: pointer; border-radius: var(--fs-radius-sm);
}
.fshell .fs-sb-x:active { background: var(--fs-side-hover); }

/* ---------------- navegación ---------------- */
.fshell .fs-nav {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 10px calc(18px + var(--fs-safe-b));
  -webkit-overflow-scrolling: touch;
  /* Scrollbar fina e integrada con el fondo oscuro (Hito 1.6). La de serie es un bloque
     blanco grueso que canta sobre el grafito. Se afina y se tiñe, pero NO se oculta: una
     lista larga que no muestra que se puede desplazar es peor que una barra fea.
     Solo se aplica a ESTE contenedor (Firefox necesita la propiedad en el que hace scroll);
     el resto del navegador se queda como está. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.fshell .fs-nav::-webkit-scrollbar { width: 8px; }
.fshell .fs-nav::-webkit-scrollbar-track { background: transparent; }
.fshell .fs-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
.fshell .fs-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); background-clip: padding-box; }
.fshell .fs-grp {
  font-size: var(--fs-fs-grp); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fs-side-muted);
  padding: 16px 10px 6px; opacity: .75;
}
.fshell .fs-grp:first-child { padding-top: 6px; }

.fshell .fs-i {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px;                    /* táctil */
  padding: 9px 10px;
  border-radius: var(--fs-radius-sm);
  color: var(--fs-side-ink);
  text-decoration: none;
  font-size: var(--fs-fs-nav); font-weight: 600;
  white-space: nowrap;
}
.fshell .fs-i .ico { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.fshell .fs-i .et { overflow: hidden; text-overflow: ellipsis; }
.fshell .fs-i .ext { margin-left: auto; font-size: 11px; opacity: .5; }
/* `Preview`: lo ve SOLO el administrador, y solo mientras la herramienta no este abierta
   a nadie mas. Discreta a proposito: es una aclaracion, no un aviso. */
.fshell .fs-i .prev { margin-left: auto; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; opacity: .62; font-weight: 700; }
.fshell .fs-i:active { background: var(--fs-side-hover); }
.fshell .fs-i.on {
  background: var(--fs-side-active);
  color: #fff;
}
/* El hover es un extra, nunca el único camino: en un móvil no existe. */
@media (hover: hover) {
  .fshell .fs-i:hover { background: var(--fs-side-hover); }
  .fshell .fs-i.on:hover { background: var(--fs-side-active); }
}
.fshell .fs-i:focus-visible {
  outline: 2px solid var(--fs-green); outline-offset: -2px;
}

/* grupo plegable */
.fshell .fs-grp.pleg {
  display: flex; align-items: center; gap: 6px;
  width: 100%; background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: left;
  min-height: 40px;
}
.fshell .fs-grp.pleg .chev {
  margin-left: auto; transition: transform .18s ease; font-size: 10px;
}
.fshell .fs-grp.pleg[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.fshell .fs-sec[hidden] { display: none; }

/* ---------------- bloque de cuenta (el ÚNICO sitio de la cuenta) ---------------- */
.fshell .fs-foot {
  border-top: 1px solid var(--fs-side-line);
  padding: 8px calc(8px + var(--fs-safe-l)) calc(8px + var(--fs-safe-b));
}
/* Es un botón: avatar + nombre + rol. Se abre con ratón y con teclado. El correo NO va
   aquí -está en el menú-. */
.fshell .sbp {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--fs-radius-sm);
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--fs-side-ink); font-family: inherit;
}
.fshell .sbp:hover { background: var(--fs-side-hover); }
.fshell .sbp:focus-visible { outline: 2px solid var(--fs-green); outline-offset: -2px; }
.fshell .sbp-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, var(--fs-green), var(--fs-green-dk));
  color: #06231b; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.fshell .sbp-av img { width: 100%; height: 100%; object-fit: cover; }
.fshell .sbp-t { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.fshell .sbp-n {
  font-size: 13.5px; font-weight: 700; color: var(--fs-side-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fshell .sbp-r { font-size: 11.5px; color: var(--fs-side-muted); }
.fshell .sbp-chev { color: var(--fs-side-muted); font-size: 18px; flex-shrink: 0; }

/* ---- bloque de cuenta BAJO EL LOGO (avatar+nombre+tier + campana) ---- */
.fshell .fs-account {
  display: flex; align-items: center; gap: 4px;
  padding: 6px calc(8px + var(--fs-safe-l)) 8px 8px;
  margin: 2px 0 4px; border-bottom: 1px solid var(--fs-side-line);
}
.fshell .fs-account #sb-profile { flex: 1; min-width: 0; }
.fshell .fs-abell {
  position: relative; width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--fs-radius-sm);
  color: var(--fs-side-muted); cursor: pointer;
}
.fshell .fs-abell:hover { background: var(--fs-side-hover); color: var(--fs-side-ink); }
.fshell .fs-abell:focus-visible { outline: 2px solid var(--fs-green); outline-offset: -2px; }
.fshell .fs-abell .cnt {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--red, #e5484d); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}
/* Barra contraída: solo avatar y campana, apilados y centrados. */
.fshell.mini .fs-account { flex-direction: column; gap: 2px; padding: 6px 4px 8px; }
.fshell.mini .fs-account #sb-profile { flex: 0 0 auto; }
.fshell.mini .sbp { justify-content: center; padding: 6px; }
.fshell.mini .sbp-t, .fshell.mini .sbp-chev { display: none; }

/* El menú de cuenta se abre desde el avatar de la cabecera (arriba a la derecha), y ahí se
   ancla. `app_shell_v2.css` ya lo pone arriba-derecha; esto solo asegura la posición bajo
   la cabecera y por encima del drawer, y le da a la cuenta su cabecera (avatar/nombre/
   correo/rol). #prof-pop es `position:fixed`, así que se sitúa respecto a la ventana. */
.fshell .prof-pop {
  top: calc(var(--fs-top-h) + var(--fs-safe-t) + 6px);
  right: 12px; left: auto; bottom: auto; width: 260px;
  z-index: 95;
}
.fshell .prof-pop .pp-r {
  font-size: 11px; font-weight: 700; color: var(--fs-green-dk);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 2px;
}
/* En móvil el menú se pega a la esquina superior derecha bajo la cabecera, sin desbordar:
   ancho acotado y por encima del cajón. */
@media (max-width: 767px) {
  .fshell .prof-pop {
    right: 8px; left: auto; width: min(280px, calc(100vw - 16px));
    top: calc(var(--fs-top-h) + var(--fs-safe-t) + 4px);
    z-index: 95;
  }
}

/* El buscador central: `position:relative` para que su lupa (.ic, absoluta a left:14px)
   se quede DENTRO de la barra y no flote a la izquierda del todo -era la «lupa aislada»-. */
.fshell .fs-search { position: relative; }
/* Lupa SVG del sistema de iconos (antes era el emoji 🔍): gris neutral, integrada, centrada. */
.fshell .fs-search .ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--fs-gray, #8a929c); pointer-events: none;
}

/* El avatar de cuenta en la cabecera: redondo, área táctil 44px, y su inicial/foto dentro.
   `.tb-prof .av` ya viene de app_shell_v2.css; aquí se asegura el tamaño táctil y que la
   regla genérica de `.fs-top-right button` no le quite el aspecto de avatar. */
.fshell .fs-top-right .tb-prof { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.fshell .fs-top-right .tb-prof .av {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--fs-green), var(--fs-green-dk));
  color: #06231b; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.fshell .fs-top-right .tb-prof .av img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- cabecera ---------------- */
.fshell .fs-main { min-width: 0; }

.fshell .fs-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  height: calc(var(--fs-top-h) + var(--fs-safe-t));
  padding: var(--fs-safe-t) 10px 0;
  background: var(--fs-panel);
  border-bottom: 1px solid var(--fs-line);
}
.fshell .fs-burger {
  width: 44px; height: 44px; flex-shrink: 0;
  background: none; border: 0; color: var(--fs-ink);
  font-size: 20px; cursor: pointer; border-radius: var(--fs-radius-sm);
}
.fshell .fs-burger:active { background: var(--fs-green-soft); }

.fshell .fs-top .fs-brand-min {
  display: flex; align-items: center; gap: 7px; text-decoration: none; color: inherit;
}
/* `width:auto` NO es opcional: el <img> lleva width="371" en el HTML (que está bien: sin
   los atributos, el navegador no reserva el hueco y la página salta al cargar). Sin esto,
   el CSS fijaba solo el alto y el logo salía de 371x26 -estirado- y no cabía en una
   cabecera de 390px: la página desbordaba a 658px, el navegador la escalaba y la barra
   inferior se iba fuera de pantalla. Un `width:auto` que falta tira toda la maquetación
   móvil. */
/* Y otra cosa que solo se ve mirando: el logo es un músculo BLANCO con velas verdes,
   dibujado para el fondo oscuro de la barra lateral, donde se lee perfecto. Pero esta
   cabecera es blanca, así que en el móvil el músculo desaparecía y quedaban las tres
   velas verdes flotando solas. El smoke no lo vio nunca: comprueba que el logo responda
   200 y que mida lo que debe, y las dos cosas eran ciertas. Era invisible, no ausente.
   No se toca el logo —es el de la marca, y lo que se pidió fue recuperarlo, no
   sustituirlo—: se le pone debajo el fondo para el que está hecho. */
.fshell .fs-top .fs-brand-min img {
  height: 26px; width: auto;
  background: var(--fs-side);
  border-radius: 7px;
  padding: 3px 5px;
  box-sizing: content-box;
}
.fshell .fs-top .fs-brand-min .txt { font-weight: 900; font-size: 16px; }
.fshell .fs-top .fs-brand-min .txt b { color: var(--fs-green-dk); }

.fshell .fs-top-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.fshell .fs-top-right button {
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; border-radius: var(--fs-radius-sm);
  color: var(--fs-gray); position: relative;
}
.fshell .fs-top-right button:active { background: var(--fs-green-soft); }

/* La lupa de la cabecera solo en móvil: allí abre el buscador a pantalla completa, que es
   donde el campo no cabe. En escritorio el buscador está a la vista y una segunda lupa
   sobra -era justo la redundancia que había que quitar-. */
@media (min-width: 768px) { .fshell .solo-movil { display: none !important; } }

/* En móvil la búsqueda no ocupa la cabecera: se abre a pantalla completa. Un input de
   200px con un teclado encima no es buscar, es adivinar. */
.fshell .fs-search { display: none; }
.fshell .fs-search.abierta {
  display: flex; position: fixed; inset: 0; z-index: 70;
  background: var(--fs-panel); flex-direction: column; padding: var(--fs-safe-t) 12px 0;
}

/* ---------------- cinta de mercado (nuestra, cache-only) ----------------
   Ya no es el widget de TradingView -que se pintaba a un alto imprevisible y se cortaba-:
   es nuestra, con altura fija propia y control total. Se desliza sola. `:empty` evita la
   franja gris mientras carga. */
.fshell .fs-tape {
  height: 40px; overflow: hidden; position: relative;
  border-bottom: 1px solid var(--fs-line); background: var(--fs-panel);
  display: flex; align-items: center;
}
.fshell .fs-tape:empty { display: none; border-bottom: 0; }
.fshell .tk-track {
  display: inline-flex; align-items: center; gap: 28px;
  white-space: nowrap; padding-left: 20px;
  will-change: transform;
  animation: fs-tape-scroll 80s linear infinite;
}
.fshell .fs-tape:hover .tk-track { animation-play-state: paused; }  /* leerla parándola */
@keyframes fs-tape-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .fshell .tk-track { animation: none; }
  .fshell .fs-tape { overflow-x: auto; }   /* si no hay animación, se desplaza a mano */
}
.fshell .tk-i {
  font-size: 12.5px; color: var(--fs-gray); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.fshell .tk-i b { color: var(--fs-ink); font-weight: 700; }
.fshell .tk-c { font-weight: 700; }
.fshell .tk-up .tk-c { color: var(--fs-green-dk); }
.fshell .tk-dn .tk-c { color: var(--fs-red); }
.fshell .tk-fl .tk-c { color: var(--fs-soft); }
.fshell .tk-stale { color: var(--fs-amber); font-weight: 600; }
/* El instrumento cuyo dato NO es de hoy. Atenuado y con su fecha al lado: el aviso global
   dice que algo va viejo y esto dice QUÉ. No se oculta el precio —sigue siendo el último
   cierre conocido, que es información— pero deja de leerse como una cotización viva. Y no
   depende sólo del color: lleva la fecha escrita y su `aria-label`. */
.fshell .tk-i-stale { opacity: .62; }
.fshell .tk-i-old { color: var(--fs-amber); font-weight: 600; margin-left: 5px;
                    font-variant-numeric: tabular-nums; }

/* ======================================================================================
   CONTENIDO — la caja es de la envolvente, no de cada página
   ======================================================================================

   ESTO ES LO QUE ESTABA ROTO, Y MERECE LA PENA DEJARLO ESCRITO.

   `.fs-content` no tenía caja: solo `padding-bottom`. Ni aire lateral, ni medida máxima,
   ni centrado. Así que la caja la ponía cada página por su cuenta, y cada una se
   inventó la suya:

       Inicio              .iw    1500px   sin centrar
       Explorador          .wrap  1240px   centrada
       Carteras            .wrap  1200px   centrada
       Centro seguimiento  .wrap  1240px   centrada
       Seguimiento         .wrap  1180px   centrada
       Centro de datos     .wrap  1180px   centrada
       Ficha               .wrap   820px   centrada
       ETFs                .ew    1440px   sin centrar
       Ficha ETF           .fw    1240px   sin centrar
       Admin UCITS         .aw    1500px   sin centrar
       Admin Inicio        .aw    (sin regla: cero aire)
       Admin Técnico       .aw    (sin regla: cero aire)
       Timing              (ninguna: el título pegado a la barra)

   Ocho medidas distintas y tres páginas sin nada. Y el efecto es de manual:

     · las que llevan `margin:0 auto` se CENTRAN dentro del hueco que deja la barra. A
       1920 ese hueco mide 1656, así que el Explorador dejaba (1656-1240)/2 = 208px
       muertos a la IZQUIERDA. Carteras, (1656-1200)/2 = 228. Medidos, no estimados.
     · las que NO se centran dejan el hueco a la DERECHA: Inicio 1656-1500 = 156px,
       ETFs 1656-1440 = 216px.

   Dos síntomas opuestos, un solo origen: nadie era dueño de la caja. Por eso el arreglo
   NO es tocar un número en cada página —eso es justo lo que había—, sino que la
   envolvente ponga la caja UNA vez y las páginas dejen de ponerla.

   ¿Y por qué se desactivan aquí y no borrando la regla de cada página? Porque las
   páginas también se sirven con la envolvente ANTIGUA cuando el flag está apagado, y
   allí SÍ necesitan su caja: es la que las sostiene. Quitársela rompería la vuelta
   atrás, que es la red de seguridad de todo esto. Como `.fshell` solo existe en la
   envolvente nueva, apagar el flag deja las páginas exactamente como estaban.
   ====================================================================================== */
.fshell .fs-content {
  width: 100%;
  max-width: var(--fs-content-max);
  margin-inline: auto;
  padding-inline: var(--fs-gutter);
  padding-bottom: calc(var(--fs-bottom-h) + var(--fs-safe-b) + 12px);
  min-width: 0;
}

/* Las cajas que cada página se inventó. Se les quita SOLO lo horizontal: el aire de
   arriba y de abajo es suyo y está bien. */
.fshell .fs-content > .iw,
.fshell .fs-content > .wrap,
.fshell .fs-content > .ew,
.fshell .fs-content > .fw,
.fshell .fs-content > .aw,
.fshell .fs-content > .cp-wrap,
.fshell .fs-content > .shell-ctx {
  max-width: none;
  margin-inline: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Excepción, y es deliberada: la ficha se LEE de arriba abajo, no se escanea como una
   tabla. Una línea de texto de 1760px obliga al ojo a saltar de vuelta y perder el
   renglón. Mantiene su medida corta, centrada dentro de la caja grande.
   La clase la pone la plantilla; sin ella, la ficha se comporta como las demás. */
.fshell .fs-content > .wrap.med-lectura {
  max-width: 860px;
  margin-inline: auto;
}

/* ---------------- formularios: que no estiren la página ----------------
   Un <select> se mide por su opción más larga, no por el hueco que tiene. En el
   Explorador, «Confluencia / divergencia: todas» pedía 348px metido en un hueco de 332
   y estiraba la página entera a 362. Con 2px de más ya aparece el scroll horizontal, y
   entonces el móvil se mueve de lado al hacer scroll: parece roto porque lo está.

   Va aquí y no en el Explorador por dos razones: le pasa a cualquier desplegable largo
   —hoy es ese, mañana otro—, y poner el parche página por página es exactamente lo que
   nos ha traído hasta aquí.

   Sigue sin haber una sola regla global: todo cuelga de `.fshell`, que no existe en las
   páginas antiguas. Sus formularios no se enteran. */
.fshell select,
.fshell input,
.fshell textarea { max-width: 100%; }

/* El contenido legacy va encapsulado: así el CSS de fuera no entra y el de dentro no sale. */
.fshell .fs-legacy { all: initial; font-family: inherit; display: block; }

/* ---------------- barra inferior (solo móvil) ---------------- */
.fshell .fs-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--fs-bottom-h) + var(--fs-safe-b));
  padding-bottom: var(--fs-safe-b);
  background: var(--fs-panel);
  border-top: 1px solid var(--fs-line);
}
.fshell .fs-b {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; color: var(--fs-gray);
  font-size: 10.5px; font-weight: 600;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  min-height: 44px;
}
.fshell .fs-b .ico { width: 21px; height: 21px; }
.fshell .fs-b.on { color: var(--fs-green-dk); }
.fshell .fs-b:active { background: var(--fs-green-soft); }

/* ======================================================================================
   TABLET (≥768)
   ====================================================================================== */
@media (min-width: 768px) {
  /* El buscador es el elemento CENTRAL de la cabecera (Hito 1.6). Se centra en el ancho
     completo con `margin:auto`, y los controles de la derecha se sacan del flujo con
     `position:absolute` para que no lo descentren. Ancho amplio en escritorio, y baja de
     forma fluida en tablet con el `min()`. */
  .fshell .fs-top { position: relative; }
  .fshell .fs-search {
    display: flex; position: relative; padding: 0;   /* relative: la lupa .ic va DENTRO */
    flex: 0 1 auto; width: min(560px, 60vw); margin: 0 auto;
  }
  .fshell .fs-top-right { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; }
  .fshell .fs-content { padding-bottom: calc(var(--fs-bottom-h) + 12px); }
}

/* ======================================================================================
   ESCRITORIO (≥1024): la barra deja de ser un cajón
   ====================================================================================== */
@media (min-width: 1024px) {
  .fshell { display: flex; }

  .fshell .fs-sb {
    position: sticky; top: 0; height: 100dvh;
    width: var(--fs-sb-w);
    transform: none; transition: width .18s ease;
    flex-shrink: 0;
  }
  .fshell .fs-sb-x { display: none; }
  .fshell .fs-scrim { display: none; }
  .fshell .fs-burger { display: none; }
  .fshell .fs-bottom { display: none; }
  .fshell .fs-top .fs-brand-min { display: none; }
  .fshell .fs-content { padding-bottom: 40px; }

  .fshell .fs-main { flex: 1; }

  /* El botón de contraer solo tiene sentido en escritorio: aquí se enciende. */
  .fshell .fs-collapse { display: flex; }

  /* --- contraída ---
     Se esconde TODO el texto y se deja solo lo que se reconoce de un vistazo: el logo, los
     iconos y el avatar. Nada de textos cortados ni iniciales inventadas. */
  .fshell.mini .fs-sb { width: var(--fs-sb-mini); }
  .fshell.mini .fs-brand .txt,
  .fshell.mini .fs-i .et,
  .fshell.mini .fs-i .ext,
  .fshell.mini .fs-grp,
  .fshell.mini .sbp-t,
  .fshell.mini .sbp-chev { display: none; }
  /* la cabecera de la barra pasa a columna: logo arriba, botón de expandir debajo; los dos
     caben en los 68px. El chevron ya apunta a la derecha (expandir) por el rotate(180). */
  .fshell.mini .fs-head { flex-direction: column; gap: 4px; padding: 12px 0; }
  .fshell.mini .fs-brand { justify-content: center; }
  .fshell.mini .fs-collapse { margin: 0; }
  /* el bloque de cuenta se queda -antes se ocultaba entero-: solo el avatar, centrado, y
     sigue abriendo el mismo menú al pulsarlo. */
  .fshell.mini .fs-foot { padding: 8px 0 calc(8px + var(--fs-safe-b)); }
  .fshell.mini .sbp { justify-content: center; padding: 8px 0; }
  .fshell.mini .fs-i { justify-content: center; padding: 9px 0; }

  /* Tooltip al contraerla. Con :hover Y :focus: si solo fuera hover, quien navegue con
     teclado tendría una barra de iconos sin nombres. */
  .fshell.mini .fs-i { position: relative; }
  .fshell.mini .fs-i::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
    background: var(--fs-ink); color: #fff;
    padding: 6px 10px; border-radius: 7px; font-size: 12.5px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 80;
  }
  .fshell.mini .fs-i:hover::after,
  .fshell.mini .fs-i:focus-visible::after { opacity: 1; }
}

/* ======================================================================================
   EL ACABADO — CONGELADO el 17/07/2026
   --------------------------------------------------------------------------------------
   Esto era la «variante A» y ahora es, simplemente, cómo se ve Fitintrade: iconos verdes,
   más presencia, secciones marcadas. Cercana al menú clásico a propósito.

   Aquí abajo había una variante B y una pastilla para conmutarlas. Se retiraron al elegir.
   No por limpieza: una variante perdedora que se queda en el fichero es el «segundo
   estilo» que a partir de ahora ningún módulo puede introducir, y basta con que alguien
   escriba `v-b` en un div para resucitarla sin querer. Está en git.

   CON ESTO QUEDAN CONGELADAS SEIS COSAS, y ningún módulo puede volver a definirlas:
   navegación · barra lateral · logo · iconografía · comportamiento móvil · estructura.

   Lo que NO congela esto todavía —y por eso viene el Hito 1.5— es tipografía, color,
   espaciado y componentes base: hoy no viven aquí, viven repartidos en 52 tamaños de
   letra y 293 colores escritos a mano por las páginas.
   ====================================================================================== */
.fshell .fs-i .ico { color: var(--fs-green); }
.fshell .fs-i.on .ico { color: #fff; }
.fshell .fs-i { font-weight: 650; }
.fshell .fs-grp {
  color: var(--fs-green); opacity: .9; font-weight: 800;
  border-top: 1px solid var(--fs-side-line); margin-top: 4px; padding-top: 14px;
}
.fshell .fs-grp:first-child { border-top: 0; margin-top: 0; }
.fshell .fs-i.on {
  background: var(--fs-side-active);
  box-shadow: inset 3px 0 0 var(--fs-green);
}
/* El logo a 38px, el tamaño de la variante A. El padding de la marca ya NO vive aquí: lo
   pone `.fs-head`, la cabecera de la barra que envuelve logo + botón de contraer. Antes
   estaba en `.fs-brand` y peleaba con las reglas del modo contraído; ahora hay un solo
   dueño del hueco. */
.fshell .fs-brand img { height: 38px; }
/* En contraído, el logo se afina un poco para no rozar los bordes de los 68px. */
.fshell.mini .fs-brand img { height: 34px; }
.fshell .fs-b.on .ico { color: var(--fs-green-dk); }