/* prefs.css — control de Tema e Idioma (24-oct-2026). Lo carga cada página junto a prefs.js.
   Usa los tokens de la página que lo hospeda con respaldo propio, porque la portada, el Scan,
   Folio y Stockdle nombran distinto sus variables. */

/* Inglés: el cuerpo espera la primera pasada de i18n.js (que quita la clase). Si el script no
   llega, la animación lo muestra igual a los 2,5 s: nunca una página en blanco. */
html.sf-traduce body { visibility: hidden; animation: sfp-muestra 0s linear 2.5s forwards; }
@keyframes sfp-muestra { to { visibility: visible; } }

/* Cambio de tema: transición breve de color en todo, solo mientras dura el cambio */
html.sf-tema-cambia, html.sf-tema-cambia *, html.sf-tema-cambia *::before, html.sf-tema-cambia *::after {
  transition: background-color .32s ease, color .32s ease, border-color .32s ease, fill .32s ease, stroke .32s ease !important;
}

.sfp-btn {
  --sfp-fg: var(--fg-1, var(--cream, #f5ecd9));
  --sfp-line: var(--border-2, rgba(245, 229, 186, .16));
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px; min-width: 34px; padding: 0 9px 0 7px; margin: 0 2px;
  border: 1px solid var(--sfp-line); border-radius: 999px; background: transparent;
  color: var(--sfp-fg); cursor: pointer; flex: none; position: relative;
  font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em;
  -webkit-tap-highlight-color: transparent;
}
/* área de toque de 44 px sin agrandar el botón */
.sfp-btn::after { content: ""; position: absolute; inset: -5px -3px; }
.sfp-btn:hover { border-color: var(--border-3, rgba(245, 229, 186, .3)); }
.sfp-btn:focus-visible { outline: 2px solid var(--accent, #910713); outline-offset: 2px; }
.sfp-btn[aria-expanded="true"] { background: var(--bg-hover, rgba(245, 229, 186, .08)); }
.sfp-disco { width: 17px; height: 17px; flex: none; }
.sfp-disco circle { fill: none; stroke: currentColor; stroke-width: 1.7; }
.sfp-disco path { fill: currentColor; transition: transform .45s cubic-bezier(.3, .7, .2, 1); transform-origin: 12px 12px; }
html[data-tema="claro"] .sfp-disco path { transform: rotate(180deg); }
.sfp-sigla { opacity: .82; }

/* En el raíl del Scan (60-200 px de ancho): solo el disco, centrado como los demás íconos */
.rail-foot .sfp-btn { width: 36px; height: 36px; padding: 0; margin: 0 auto 6px; }
.rail-foot .sfp-btn .sfp-sigla { display: none; }
/* Cabeceras angostas (Análisis, legales y la barra del Scan a ≤ 420 px): solo el disco, para no empujar
   la barra fuera de la pantalla ni pisar el título */
@media (max-width: 420px) {
  header nav .sfp-btn, .topright .sfp-btn { padding: 0; width: 34px; margin: 0; }
  header nav .sfp-btn .sfp-sigla, .topright .sfp-btn .sfp-sigla { display: none; }
}
/* 320 px: la barra de Folio no cabe en una fila; el último botón baja a la derecha en vez de salirse */
@media (max-width: 340px) {
  .topright:has(#pfwrap) { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; width: 100%; }
  .sfp-slot { padding: 0; width: 34px; margin: 0; } .sfp-slot .sfp-sigla { display: none; }
}

.sfp-hoja {
  position: fixed; z-index: 2147483000; width: 300px; max-width: calc(100vw - 24px);
  background: var(--bg-elevated, var(--bg-surface, #221a1d)); color: var(--fg-1, #f5ecd9);
  border: 1px solid var(--border-2, rgba(245, 229, 186, .16)); border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .12);
  padding: 14px 14px 12px; opacity: 0; transform: translateY(-4px);
  transition: opacity .16s ease, transform .2s cubic-bezier(.3, .7, .2, 1);
  font-family: var(--font-sans, 'IBM Plex Sans', system-ui, sans-serif);
}
.sfp-hoja.on { opacity: 1; transform: none; }
.sfp-hoja[hidden] { display: none; }
.sfp-fila + .sfp-fila { margin-top: 12px; }
.sfp-et { margin: 0 0 7px 2px; font: 500 12px/1.2 var(--font-sans, 'IBM Plex Sans', system-ui, sans-serif); color: var(--fg-2, #b8a99a); }
.sfp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 12px;
  background: var(--bg-sunken, rgba(0, 0, 0, .18)); border: 1px solid var(--border-1, rgba(245, 229, 186, .08)); }
.sfp-seg3 { grid-template-columns: 1fr 1fr 1fr; }
.sfp-op {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 56px; padding: 8px 4px; border: 0; border-radius: 9px; background: transparent;
  color: var(--fg-2, #b8a99a); cursor: pointer; font: 500 12.5px/1.15 var(--font-sans, 'IBM Plex Sans', system-ui, sans-serif);
  -webkit-tap-highlight-color: transparent;
}
.sfp-op svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sfp-op[data-v="oscuro"] svg { fill: currentColor; stroke: none; }
.sfp-op:hover { color: var(--fg-1, #f5ecd9); }
.sfp-op:focus-visible { outline: 2px solid var(--accent, #910713); outline-offset: 1px; }
.sfp-op[aria-pressed="true"] { background: var(--bg-surface, #171214); color: var(--fg-1, #f5ecd9);
  box-shadow: 0 0 0 1px var(--border-2, rgba(245, 229, 186, .16)), 0 1px 3px rgba(0, 0, 0, .18); }
.sfp-sg { font: 600 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; padding: 3px 0 1px; }
.sfp-op[aria-pressed="true"] .sfp-sg { color: var(--accent-text, var(--accent, #c0283a)); }

/* Teléfono: hoja abajo, a todo el ancho, sobre la barra inferior */
.sfp-hoja.sfp-abajo { left: 10px; right: 10px; width: auto; max-width: none; top: auto;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px) + var(--sf-barra, 0px)); transform: translateY(12px); }
.sfp-hoja.sfp-abajo.on { transform: none; }
@media (max-width: 559px) { .sfp-op { min-height: 60px; } }
@media (prefers-reduced-motion: reduce) { .sfp-hoja, .sfp-disco path { transition: none; } }

/* Scan y Folio: en escritorio el botón vive en el pie del raíl; bajo 760 px el raíl es barra
   inferior sin pie y el botón pasa a la cabecera (lo mismo que hace cuenta.css con la cuenta) */
.topright .sfp-btn { display: none; }
@media (max-width: 760px) { .topright .sfp-btn { display: inline-flex; } }

/* Texto que solo aparece en inglés (la nota «solo en español» de los análisis, la versión que rige en lo legal) */
.sf-solo-en{display:none}
html[lang="en"] .sf-solo-en{display:block}
.nota-es{font-size:13px;color:var(--fg-3,#8a7d74);margin:0 0 18px;font-style:italic}