/* ==========================================================================
   Mercados hoy: franja bajo la cabecera y página /mercados-hoy/ (docs/mercados.md)
   Estilo nuevo (docs/estilo-nuevo.md, área 3): solo variables nuevas de base.css.
   La franja va en todas las páginas (la carga App::layout()); la página usa además
   las piezas comunes .cabeza, .aviso y .tabla de base.css.
   Contrastes (AA): blanco/franja 15 · sube #6ff0c4/franja 11 · baja #ff9fb4/franja 8,4
                    verde-texto/blanco 9 · rojo-texto/blanco 8,6
   ========================================================================== */

/* ---------- Franja ---------- */
.franja-mercados { background: var(--franja); color: #fff; font: 600 var(--t-xs)/1 var(--f); font-variant-numeric: tabular-nums lining-nums; }
/* Altura fija: rellenarla con JS no mueve nada de la página */
.franja-mercados__barra { display: flex; align-items: center; gap: var(--e-4); height: 2.25rem; overflow: hidden; }
.franja-mercados__lista { display: flex; align-items: center; gap: var(--e-5); flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; white-space: nowrap; }
.franja-mercados__lista[hidden] { display: none; }
.franja-mercados__item { display: inline-flex; align-items: baseline; gap: .45em; flex: none; }
.franja-mercados__item + .franja-mercados__item { padding-left: var(--e-5); border-left: 1px solid rgb(255 255 255 / .18); }
.franja-mercados__nombre { color: var(--lila-200); font-weight: 600; }
.franja-mercados__valor { font-weight: 700; }
.franja-mercados__var.is-sube { color: #6ff0c4; }
.franja-mercados__var.is-baja { color: #ff9fb4; }
.franja-mercados__flecha { font-size: 1em; }
.franja-mercados__ver { flex: none; display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; color: var(--turquesa); font-weight: 700; text-decoration: none; white-space: nowrap; }
.franja-mercados__ver:hover, .franja-mercados__ver:focus-visible { color: #fff; text-decoration: underline; }
.franja-mercados :focus-visible { outline-color: var(--turquesa); }
/* Los que no caben enteros los oculta el JS (todos están en la página) */
.franja-mercados__item[hidden] { display: none; }

/* ---------- Página: cabecera ---------- */
.mercados__cabecera .cabeza__meta { color: rgb(255 255 255 / .86); }
.mercados__aviso { margin-top: 1.1rem; max-width: 40rem; }
.mercados__cabeza-lado { display: grid; justify-items: end; }

/* ---------- Página: tabla (en el móvil se desliza de lado dentro de su caja) ---------- */
.mercados__tabla-caja { margin-top: var(--e-6); }
.mercados__tabla { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r-3); background: #fff; box-shadow: var(--s-1); }
.mercados__tabla:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.mercados__tabla table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: var(--t-sm); }
.mercados__tabla th, .mercados__tabla td { padding: .7rem .9rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
.mercados__tabla thead th { font-size: var(--t-xs); font-weight: 800; color: var(--tinta-2); background: var(--lila-50); white-space: nowrap; }
.mercados__tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.mercados__tabla tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 8.5rem; background: #fff; font-weight: 700; box-shadow: 1px 0 0 var(--borde); }
.mercados__tabla tbody th a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--tinta); text-decoration: none; }
.mercados__tabla tbody th a:hover { color: var(--morado); text-decoration: underline; }
.mercados__grupo th { position: static !important; padding-top: 1.1rem; font: 800 var(--t-xs)/1.3 var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--etiqueta); background: var(--lila-50) !important; box-shadow: none !important; }
.mercados__tabla tr.is-sin-dato td { color: var(--tinta-2); }
.mercados__actualizado { margin-top: var(--e-3); font-size: var(--t-xs); color: var(--tinta-2); }

.mer-var { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.mer-var.is-sube { color: var(--verde-texto); }
.mer-var.is-baja { color: var(--rojo-texto); }
.mer-var.is-nd { color: var(--tinta-2); font-weight: 500; }
.mer-estado { display: inline-block; margin-left: .5em; padding: .12em .55em; border-radius: var(--r-redondo); font-size: 1rem; font-weight: 700; vertical-align: .1em; }
.mer-estado.is-abierto { background: var(--verde-fondo); color: var(--verde-texto); }
.mer-estado.is-cerrado { background: var(--lila-100); color: var(--tinta-2); }
.mer-viejo { margin-left: .35em; color: var(--ambar-texto); cursor: help; }

/* ---------- Página: texto y tarjetas por grupo ---------- */
.mercados__texto { margin-block: var(--e-7); }
.mercados__texto .pagina__cuerpo { max-width: 52rem; }
.mercados__seccion { margin-block: var(--e-7); scroll-margin-top: calc(var(--cabecera-alto) + 1rem); }
.mercados__seccion > h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); }
.mercados__tarjetas { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

.mercado { scroll-margin-top: calc(var(--cabecera-alto) + 1rem); display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-5); border: 1px solid var(--borde); border-radius: var(--r-3); background: #fff; box-shadow: var(--s-1); }
.mercado:target { border-color: var(--morado); box-shadow: 0 0 0 3px var(--lila-200); }
.mercado__nombre { margin: 0; font-size: var(--t-xl); }
.mercado__pais { font: 600 var(--t-xs)/1 var(--f); letter-spacing: 0; color: var(--tinta-2); -webkit-text-stroke: 0; }
.mercado__dato { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em; margin: 0; }
.mercado__valor { font: 800 var(--t-h3)/1.1 var(--f); letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; }
.mercado__etiqueta, .mercado__meta { font-size: var(--t-xs); color: var(--tinta-2); }
.mercado__meta { margin: 0; }
.mercado__aviso { margin: 0; padding: var(--e-2) var(--e-3); border-radius: var(--r-1); background: var(--lila-50); font-size: var(--t-xs); color: var(--tinta-2); }
.mercado__graficas { display: flex; flex-wrap: wrap; gap: var(--e-4); margin: var(--e-2) 0; }
.mercado__grafica { margin: 0; }
.mercado__grafica figcaption { margin-top: .25rem; font-size: 1rem; color: var(--tinta-2); }
.mercado__explicacion { margin: var(--e-2) 0 0; font-size: var(--t-sm); line-height: 1.55; }
.mercado__enlaces { margin: auto 0 0; padding: var(--e-3) 0 0; border-top: 1px solid var(--borde); list-style: none; display: grid; gap: .1rem; font-size: var(--t-sm); }
.mercado__enlaces a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.mercado__enlaces a::after { content: "\00a0→"; }

/* Minigráficas SVG (src/Mercados/Grafica.php) */
.minigrafica { display: block; width: 132px; height: 40px; overflow: visible; color: var(--tinta-2); }
.minigrafica--sube { color: var(--verde-texto); }
.minigrafica--baja { color: var(--rojo-texto); }
.minigrafica__linea { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.minigrafica__area { fill: currentColor; opacity: .08; stroke: none; }

.mercados__pie { margin-block: var(--e-7); max-width: 52rem; }
.mercados__cabecera .antetitulo { color: var(--turquesa); }
.mercados .aviso { font-size: 1rem; }