/* ==========================================================================
   Dólar en Bolivia · estilo base
   Nace en el wireframe (F0) y es la base del CSS de producción (F7).
   Orden: tokens → base → controles → cabecera y pie → cotización → gráfico
          → bloques → calculadora → tablas → FAQ → zonas → páginas.
   ========================================================================== */

/* Tipografía autoalojada (D-45): Archivo variable (subconjunto latin) */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("fuentes/archivo-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens ------------------------------------------------------------------ */
/* Color: tinta de billete sobre papel de seguridad. El tricolor boliviano
   solo aparece en la marca y en el termómetro de brecha (verde, amarillo, rojo). */
:root {
  color-scheme: light;
  --fondo: #f4f6f3;
  --superficie: #ffffff;
  --tinta: #17231d;
  --tinta-2: #4b5a52;
  --linea: #d5ddd8;
  --acento: #1a6b4b;
  --acento-suave: #e3efe8;
  --verde: #007934;
  --amarillo: #f2cc0c;
  --rojo: #d52b1e;
  --sube: #1a7f55;
  --baja: #c0392b;
  --aviso: #fff1c2;
  --aviso-tinta: #5c4a00;

  /* Tipografía: una familia; las cifras protagonistas usan el ancho expandido. */
  --fuente: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: 0.75rem;    /* 12 */
  --t-s: 0.875rem;    /* 14 */
  --t-m: 1rem;        /* 16 */
  --t-l: 1.125rem;    /* 18 */
  --t-xl: 1.3125rem;  /* 21 */
  --t-2xl: 1.5rem;    /* 24 */
  --t-3xl: 2.25rem;   /* 36 */
  --t-4xl: 3.75rem;   /* 60 */
  --t-5xl: 4.5rem;    /* 72 */

  /* Espaciado: múltiplos de 4 px. */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;

  --r-s: 4px;
  --r-m: 8px;
  --ancho: 76rem;
  --medida: 42rem;
  --alto-lienzo: 20rem;
  --alto-panel: 6.5rem;
  /* Altura del eje de tiempo compartido de la librería (T-1): estimada a falta de medición
     visual en un navegador real; a confirmar y ajustar en S10 (V-117). */
  --alto-eje: 1.75rem;
  --alto-anuncio: 280px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #0e1512;
  --superficie: #151f1a;
  --tinta: #e4ebe6;
  --tinta-2: #9fb1a7;
  --linea: #2a3831;
  --acento: #6bc79c;
  --acento-suave: #1c2e25;
  --verde: #2fa36b;
  --amarillo: #f2cc0c;
  --rojo: #ef5b4c;
  --sube: #3dbe84;
  --baja: #f06656;
  --aviso: #3a3006;
  --aviso-tinta: #f6dd7a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #0e1512;
    --superficie: #151f1a;
    --tinta: #e4ebe6;
    --tinta-2: #9fb1a7;
    --linea: #2a3831;
    --acento: #6bc79c;
    --acento-suave: #1c2e25;
    --verde: #2fa36b;
    --amarillo: #f2cc0c;
    --rojo: #ef5b4c;
    --sube: #3dbe84;
    --baja: #f06656;
    --aviso: #3a3006;
    --aviso-tinta: #f6dd7a;
  }
}

@media (min-width: 48rem) {
  :root {
    --alto-lienzo: 26rem;
    --alto-panel: 8rem;
    --alto-anuncio: 250px;
  }
}

/* Base -------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* En html y en body: en Safari de iOS, overflow-x:hidden solo en body no siempre basta
     para contener el elemento raíz de scroll. */
  overflow-x: hidden;
}

body {
  margin: 0;
  /* El sangrado a borde del gráfico y de la tabla en móvil (margin-inline negativo) ensancha
     el documento unos px a cada lado sin nada que lo contenga: en un teléfono real eso basta
     para un scroll horizontal fantasma que el simulador de escritorio no expone. */
  overflow-x: hidden;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-m);
  line-height: 1.5;
}

h1, h2, h3, p, ul, ol, dl, dd {
  margin: 0;
}

h1, h2, h3 {
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }

@media (min-width: 48rem) {
  h2 { font-size: var(--t-2xl); }
}

a {
  color: var(--acento);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.num {
  font-variant-numeric: tabular-nums lining-nums;
}

.micro {
  font-size: var(--t-s);
  color: var(--tinta-2);
}

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e-4);
}

@media (min-width: 48rem) {
  .envoltura { padding-inline: var(--e-6); }
}

.saltar {
  position: absolute;
  left: -100vw;
}

.saltar:focus {
  left: var(--e-4);
  top: var(--e-2);
  z-index: 200;
  padding: var(--e-2) var(--e-3);
  background: var(--superficie);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Controles --------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.75rem;
  padding: 0 var(--e-4);
  border: 1px solid var(--acento);
  border-radius: var(--r-s);
  background: var(--acento);
  color: var(--superficie);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.boton--sec {
  border-color: var(--linea);
  background: transparent;
  color: var(--tinta);
}

.boton--sec:hover {
  border-color: var(--tinta-2);
}

.boton--sec[aria-pressed="true"] {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--superficie);
}

.icono {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}

.boton svg,
.icono svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.chip {
  flex: none;
  min-height: 2.5rem;
  padding: 0 var(--e-3);
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-s);
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
}

.chip[aria-pressed="true"] {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--superficie);
}

.chip:disabled {
  color: var(--tinta-2);
  opacity: 0.45;
  cursor: not-allowed;
}

.segmentos {
  display: inline-flex;
  border: 1px solid var(--linea);
  border-radius: var(--r-s);
  overflow: hidden;
}

.segmentos button {
  min-width: 2.75rem;
  min-height: 2.5rem;
  padding: 0 var(--e-3);
  border: 0;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-s);
  cursor: pointer;
}

.segmentos button + button {
  border-left: 1px solid var(--linea);
}

.segmentos button[aria-pressed="true"] {
  background: var(--acento-suave);
  color: var(--acento);
  font-weight: 650;
}

.segmentos button:disabled {
  color: var(--tinta-2);
  opacity: 0.45;
  cursor: not-allowed;
}

.interruptor {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.5rem;
  font-size: var(--t-s);
  cursor: pointer;
}

.interruptor input {
  appearance: none;
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  margin: 0;
  border-radius: 999px;
  background: var(--tinta-2);
  cursor: pointer;
  transition: background-color 0.15s;
}

.interruptor input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px);
  border-radius: 50%;
  background: var(--superficie);
  transition: transform 0.15s;
}

.interruptor input:checked {
  background: var(--acento);
}

.interruptor input:checked::after {
  transform: translateX(1rem);
}

.campo {
  display: flex;
  align-items: center;
  border: 1px solid var(--tinta-2);
  border-radius: var(--r-s);
  background: var(--fondo);
}

.campo:focus-within {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.campo input {
  flex: 1;
  min-width: 0;
  padding: var(--e-3);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-xl);
  font-variant-numeric: tabular-nums;
}

.campo span {
  padding-inline: var(--e-3);
  color: var(--tinta-2);
  font-weight: 600;
}

/* Cabecera ---------------------------------------------------------------- */
.cabecera {
  border-bottom: 1px solid var(--linea);
}

.cabecera__fila {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "marca tema" "nav nav";
  align-items: center;
  column-gap: var(--e-4);
}

.marca {
  grid-area: marca;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  justify-self: start;
  padding-block: var(--e-2);
  color: var(--tinta);
  font-size: var(--t-l);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.marca__isotipo {
  width: 1.6em;
  height: 1.6em;
  flex-shrink: 0;
}

.tema {
  grid-area: tema;
  border-color: transparent;
}

.nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-inline: calc(-1 * var(--e-4));
}

.nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: var(--e-3);
  border-top: 1px solid var(--linea);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  color: var(--tinta-2);
  font-weight: 600;
  text-decoration: none;
}

.nav a[aria-current="page"] {
  border-bottom-color: var(--acento);
  color: var(--tinta);
}

@media (min-width: 48rem) {
  .cabecera__fila {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "marca nav tema";
    column-gap: var(--e-6);
  }

  .nav {
    display: flex;
    align-self: stretch;
    gap: var(--e-2);
    margin-inline: 0;
  }

  .nav a {
    min-height: 3.5rem;
    border-top: 0;
  }
}

/* Pie --------------------------------------------------------------------- */
.pie {
  padding-block: var(--e-6) var(--e-5);
  border-top: 1px solid var(--linea);
  color: var(--tinta-2);
  font-size: var(--t-s);
}

.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
}

.pie__marca {
  margin-bottom: var(--e-2);
  color: var(--tinta);
  font-size: var(--t-m);
  font-weight: 700;
}

.pie__titulo {
  margin-bottom: var(--e-2);
  color: var(--tinta);
  font-size: var(--t-s);
  font-weight: 650;
}

.pie ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-2);
  padding: 0;
  list-style: none;
}

.pie a {
  color: var(--tinta);
}

.pie__base {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
}

@media (min-width: 48rem) {
  .pie__rejilla { grid-template-columns: 2fr 1fr 1fr; }
}

/* Cotización (primer pliegue) --------------------------------------------- */
.cotizacion {
  padding-block: var(--e-5) var(--e-4);
}

.cotizacion h1 {
  margin-bottom: var(--e-4);
  font-size: var(--t-2xl);
}

.cotizacion__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
}

.etiqueta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--e-2);
  font-weight: 650;
}

.etiqueta small {
  color: var(--tinta-2);
  font-size: var(--t-s);
  font-weight: 400;
}

.precio {
  margin-block: var(--e-1);
  font-size: var(--t-4xl);
  font-stretch: 125%;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.precio--medio {
  font-size: var(--t-3xl);
}

.precio__moneda {
  color: var(--tinta-2);
  font-size: 0.4em;
  font-stretch: 100%;
  font-weight: 600;
  letter-spacing: 0;
}

.spread {
  margin-top: var(--e-3);
  font-size: var(--t-s);
}

.pareja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-4);
}

@media (min-width: 48rem) {
  .cotizacion {
    padding-block: var(--e-7) var(--e-5);
  }

  .cotizacion h1 {
    margin-bottom: var(--e-6);
    font-size: var(--t-3xl);
  }

  .cotizacion__rejilla {
    grid-template-columns: 1.25fr 1fr;
  }

  .cotizacion__rejilla .brecha {
    grid-column: 1 / -1;
  }

  .precio { font-size: var(--t-5xl); }
  .precio--medio { font-size: var(--t-4xl); }
}

/* Inicio: venta | compra | brecha, separadas por filetes. */
@media (min-width: 64rem) {
  .cotizacion__rejilla--tres {
    grid-template-columns: 1.3fr 0.9fr 1.2fr;
    gap: 0;
  }

  .cotizacion__rejilla--tres > * {
    padding-inline: var(--e-6);
  }

  .cotizacion__rejilla--tres > :first-child {
    padding-left: 0;
  }

  .cotizacion__rejilla--tres > * + * {
    border-left: 1px solid var(--linea);
  }

  .cotizacion__rejilla--tres .brecha {
    grid-column: auto;
    padding-right: 0;
  }

  /* Dólar oficial: compra y venta | valor para mañana; brecha debajo. */
  .cotizacion__rejilla--oficial {
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
    column-gap: var(--e-7);
  }
}

/* Brecha y termómetro. Ancho (--brecha) y nivel (data-nivel) salen del SSR. */
.brecha {
  --nivel: var(--amarillo);
  max-width: 34rem;
}

.brecha[data-nivel="baja"] { --nivel: var(--verde); }
.brecha[data-nivel="alta"] { --nivel: var(--rojo); }

.brecha__valor {
  font-size: var(--t-m);
}

.brecha__valor strong {
  margin-right: var(--e-1);
  font-size: var(--t-2xl);
  font-stretch: 125%;
  font-weight: 700;
}

.termometro {
  position: relative;
  height: 0.75rem;
  margin-top: var(--e-3);
  border: 1px solid var(--tinta-2);
  border-radius: 999px;
  overflow: hidden;
}

.termometro__relleno {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--brecha);
  background: var(--nivel);
}

/* Marcas de los umbrales 2% y 5% sobre una escala de 0 a 8%. */
.termometro::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--tinta-2), var(--tinta-2)) 25% 0 / 1px 100% no-repeat,
    linear-gradient(var(--tinta-2), var(--tinta-2)) 62.5% 0 / 1px 100% no-repeat;
}

.termometro__escala {
  position: relative;
  height: 1.25rem;
  color: var(--tinta-2);
  font-size: var(--t-xs);
}

.termometro__escala span {
  position: absolute;
  top: 0.125rem;
  transform: translateX(-50%);
}

.termometro__escala span:nth-child(1) { left: 0; transform: none; }
.termometro__escala span:nth-child(2) { left: 25%; }
.termometro__escala span:nth-child(3) { left: 62.5%; }
.termometro__escala span:nth-child(4) { left: 100%; transform: translateX(-100%); }

.brecha__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-4);
  margin-top: var(--e-2);
  font-size: var(--t-s);
}

.nivel {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 650;
}

.nivel::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--nivel);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25);
}

/* Valor para mañana (dólar oficial). */
.manana {
  padding: var(--e-4);
  border-radius: var(--r-m);
  background: var(--acento-suave);
}

.manana h2 {
  margin-bottom: var(--e-2);
  font-size: var(--t-l);
}

.manana__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-5);
  margin-block: var(--e-2);
  font-size: var(--t-xl);
  font-stretch: 112%;
  font-weight: 700;
}

.manana__cifras span {
  color: var(--tinta-2);
  font-size: var(--t-s);
  font-stretch: 100%;
  font-weight: 400;
}

/* Frescura y retraso. */
.aviso-retraso {
  margin-top: var(--e-4);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-s);
  background: var(--aviso);
  color: var(--aviso-tinta);
  font-size: var(--t-s);
  font-weight: 600;
}

.sello {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-2);
  margin-top: var(--e-4);
  color: var(--tinta-2);
  font-size: var(--t-s);
}

.sello__punto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--verde);
  animation: latido 2.4s ease-out infinite;
}

.sello--retraso .sello__punto {
  background: var(--amarillo);
  animation: none;
}

@keyframes latido {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.5rem transparent; }
}

/* Cuerpo con riel publicitario en escritorio ------------------------------ */
/* cuerpo--con-riel lo pone el SSR solo si la zona del riel tiene contenido. */
.cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--e-7);
  padding-bottom: var(--e-8);
}

.riel {
  display: none;
}

@media (min-width: 64rem) {
  .cuerpo--con-riel { grid-template-columns: minmax(0, 1fr) 300px; }
  .riel { display: block; }
}

/* Bloques ----------------------------------------------------------------- */
.bloque {
  padding-top: var(--e-7);
}

.bloque > h2 {
  margin-bottom: var(--e-4);
}

.bloque--pegado {
  padding-top: var(--e-2);
}

.prosa {
  max-width: var(--medida);
}

.prosa > * + * {
  margin-top: var(--e-4);
}

.prosa > h2 {
  margin-top: var(--e-7);
}

.prosa > h3 {
  margin-top: var(--e-5);
}

.prosa ul,
.prosa ol {
  padding-left: 1.25rem;
}

.prosa li + li {
  margin-top: var(--e-2);
}

.descargas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-5);
  margin-top: var(--e-4);
  font-size: var(--t-s);
}

/* Línea de tiempo del tipo de cambio oficial (secuencia real). */
.linea-tiempo {
  padding: 0;
  list-style: none;
}

.prosa .linea-tiempo {
  padding-left: 0;
}

.linea-tiempo li {
  position: relative;
  padding: 0 0 var(--e-4) var(--e-5);
  border-left: 2px solid var(--linea);
}

.linea-tiempo li + li {
  margin-top: 0;
}

.linea-tiempo li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.linea-tiempo li::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: -0.4375rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--acento);
  border-radius: 50%;
  background: var(--fondo);
}

.linea-tiempo li:last-child::before {
  background: var(--acento);
}

.linea-tiempo strong {
  display: block;
}

/* Gráfico ----------------------------------------------------------------- */
/* Contenedor del widget (F8). Altura reservada desde el SSR: montar no desplaza. */
.grafico {
  margin-inline: calc(-1 * var(--e-4));
  border-block: 1px solid var(--linea);
  background: var(--superficie);
}

@media (min-width: 48rem) {
  .grafico {
    margin-inline: 0;
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
  }
}

.grafico__controles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-2);
  padding-block: var(--e-3) var(--e-2);
}

.chips {
  display: flex;
  gap: var(--e-2);
  padding-inline: var(--e-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

.grafico__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  padding-inline: var(--e-4);
}

.grafico__lienzo {
  position: relative;
  width: 100%;
  height: var(--alto-lienzo);
  overflow: hidden;
  border-block: 1px solid var(--linea);
  touch-action: pan-y;
}

/* Panel inferior (brecha o estocástico): pane nativa de la librería, no una caja hermana
   (T-1, D-92). El lienzo crece cuando hay una capa de panel activa (ver .grafico--con-panel
   más abajo); la etiqueta vive dentro del lienzo, sobre la pane, posicionada desde abajo. */
.grafico__panel-eti {
  position: absolute;
  bottom: calc(var(--alto-panel) - var(--e-1) + var(--alto-eje));
  left: var(--e-4);
  margin: 0;
  color: var(--tinta-2);
  font-size: var(--t-xs);
  pointer-events: none;
}

.grafico--con-panel:not(.es-pantalla) .grafico__lienzo {
  height: calc(var(--alto-lienzo) + var(--alto-panel));
}

.grafico__lienzo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.grafico__leyenda {
  position: absolute;
  top: var(--e-2);
  left: var(--e-4);
  right: var(--e-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-3);
  color: var(--tinta-2);
  font-size: var(--t-xs);
  pointer-events: none;
}

.grafico__leyenda b {
  color: var(--tinta);
  font-weight: 600;
}

.grafico__sinjs {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: var(--e-5);
  color: var(--tinta-2);
  text-align: center;
}

.grafico__herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-2) var(--e-4) var(--e-3);
}

.grafico__herramientas .empuje {
  margin-left: auto;
}

/* Capas analíticas (D-09 g): apagadas por defecto, reveladas desde «Capas». */
.capas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  padding: 0 var(--e-4) var(--e-3);
}

.capas__nota {
  flex-basis: 100%;
  margin: 0;
}

.capas__nota:empty {
  display: none;
}

/* Tres estados con dueños distintos (T-3, D-92). El aviso es visible en la regla base y solo
   se oculta cuando hay JS, bundle (grafico--con-script, que escribe el SSR) y no ha fallado el
   montaje; sin ninguno de los tres, el aviso sigue mostrándose. */
.js .grafico--con-script:not(.grafico--sin-serie) .grafico__sinjs {
  display: none;
}

/* Controles, herramientas y capas: reservan su caja desde el primer pintado pero quedan
   invisibles hasta que el widget monta (T-3b) — cubre sin JS y sin bundle sin depender de
   nada. Solo grafico--listo, que el widget pone al montar, los hace visibles. */
.grafico__controles,
.capas,
.grafico__herramientas {
  visibility: hidden;
}

.grafico--listo .grafico__controles,
.grafico--listo .capas,
.grafico--listo .grafico__herramientas {
  visibility: visible;
}

/* Pantalla completa: capa CSS (también sirve donde no hay Fullscreen API, iOS). */
.grafico.es-pantalla {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.es-pantalla .grafico__lienzo {
  flex: 1;
  height: auto;
}

/* Lectura del gráfico (texto SSR). */
.lectura {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-3);
  margin-top: var(--e-4);
  padding: 0;
  list-style: none;
}

.lectura li {
  padding-left: var(--e-3);
  border-left: 2px solid var(--linea);
}

.sube { color: var(--sube); }
.baja { color: var(--baja); }

@media (min-width: 48rem) {
  .lectura {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-5);
  }
}

/* Calculadora y copiar ---------------------------------------------------- */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
}

.calc__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--e-2);
  padding: var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  background: var(--superficie);
}

.calc__fila label {
  font-weight: 650;
}

.calc__res output {
  margin-inline: -0.15em;
  padding-inline: 0.15em;
  border-radius: var(--r-s);
  font-size: var(--t-2xl);
  font-stretch: 112%;
  font-weight: 700;
  transition: background-color 0.6s ease-out, color 0.6s ease-out;
}

/* Resultado recién calculado: se enciende al instante y se apaga con fundido, para que
   se vea dónde aparece la cifra. Con «reducir movimiento», sin fundido. */
.calc__res output.es-nuevo {
  background: var(--acento-suave);
  color: var(--acento);
  transition: none;
}

.calc__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}

@media (min-width: 48rem) {
  .calc { grid-template-columns: 1fr 1fr; }
  .calc__acciones { grid-column: 1 / -1; }
}

.copiar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--e-2);
  margin-top: var(--e-6);
}

.copiar__texto {
  padding: var(--e-2) var(--e-3);
  border: 1px dashed var(--linea);
  border-radius: var(--r-s);
  font-size: var(--t-s);
  user-select: all;
}

.copiar__estado {
  color: var(--tinta-2);
  font-size: var(--t-s);
}

/* Tablas ------------------------------------------------------------------ */
.tabla-envoltura {
  margin-inline: calc(-1 * var(--e-4));
  padding-inline: var(--e-4);
  overflow-x: auto;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums lining-nums;
}

.tabla caption {
  padding-bottom: var(--e-2);
  caption-side: top;
  color: var(--tinta-2);
  text-align: left;
}

.tabla th,
.tabla td {
  padding: var(--e-2);
  border-bottom: 1px solid var(--linea);
  text-align: right;
  white-space: nowrap;
}

.tabla th:first-child {
  padding-left: 0;
  text-align: left;
}

.tabla td:last-child {
  padding-right: 0;
  font-weight: 650;
}

.tabla thead th {
  border-bottom-color: var(--tinta-2);
  color: var(--tinta-2);
  font-weight: 600;
}

.tabla tbody th {
  font-weight: 500;
}

.tabla .tabla__dia th {
  padding-top: var(--e-4);
  border-bottom-color: var(--tinta-2);
  color: var(--tinta);
  font-weight: 650;
}

@media (min-width: 48rem) {
  .tabla-envoltura {
    margin-inline: 0;
    padding-inline: 0;
  }

  .tabla {
    font-size: var(--t-m);
  }

  .tabla th,
  .tabla td {
    padding-inline: var(--e-4);
  }
}

/* Preguntas frecuentes ---------------------------------------------------- */
.faq {
  border-top: 1px solid var(--linea);
}

.faq details {
  border-bottom: 1px solid var(--linea);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-4);
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  color: var(--tinta-2);
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "−";
}

.faq__resp {
  max-width: var(--medida);
  padding-bottom: var(--e-4);
}

.faq__resp > * + * {
  margin-top: var(--e-3);
}

/* Zonas publicitarias (D-41) ---------------------------------------------- */
/* Solo se emiten si su archivo tiene contenido. La altura la fija el contenido:
   un afiliado trae su imagen con width/height; AdSense va dentro de
   .zona__reserva para reservar alto sin salto de maquetación. */
.zona {
  position: relative;
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  color: var(--tinta-2);
  font-size: var(--t-xs);
  text-align: center;
}

.zona::before {
  content: "Publicidad";
  position: absolute;
  top: 0;
  left: 0;
}

.zona img {
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.zona__reserva {
  display: grid;
  place-items: center;
  min-height: var(--alto-anuncio);
  border: 1px dashed var(--linea);
  border-radius: var(--r-s);
}

.riel .zona {
  position: sticky;
  top: var(--e-4);
  margin-top: 0;
}

.riel .zona__reserva {
  min-height: 600px;
}

/* Páginas legales --------------------------------------------------------- */
.legal {
  padding-block: var(--e-6) var(--e-8);
}

.legal h1 {
  font-size: var(--t-2xl);
}

.legal .prosa > h2 {
  margin-top: var(--e-6);
  font-size: var(--t-xl);
}

.indice {
  margin-top: var(--e-5);
  padding: var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  font-size: var(--t-s);
}

.indice ol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-1);
  margin-top: var(--e-2);
  padding-left: 1.25rem;
}

.hueco {
  padding: 0 0.25em;
  border-radius: 2px;
  background: var(--aviso);
  color: var(--aviso-tinta);
}

@media (min-width: 48rem) {
  .legal h1 { font-size: var(--t-3xl); }
}

/* 404 --------------------------------------------------------------------- */
.error {
  max-width: var(--medida);
  padding-block: var(--e-7) var(--e-8);
}

.error__codigo {
  color: var(--tinta-2);
  font-size: var(--t-4xl);
  font-stretch: 125%;
  font-weight: 700;
  line-height: 1;
}

.error h1 {
  margin-top: var(--e-4);
  font-size: var(--t-2xl);
}

.error p {
  margin-top: var(--e-3);
}

.error__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

@media (min-width: 48rem) {
  .error__codigo { font-size: var(--t-5xl); }
  .error h1 { font-size: var(--t-3xl); }
}