/*
 * Aiden UI · bloque stats-band
 * Traducción literal de registry/components/blocks/stats-band/stats-band.module.css de Arc UI.
 * Mismas medidas, tiempos, retardos y variables de foundation.css. Clases .aui-stats-band-*, y las
 * variables locales de Arc (--i, --j, --h, --count, --draw, --start, --ink, --soft) con prefijo --aui-sb-
 * para no chocar con las de otro bloque de la misma página.
 *
 * Rediseño 7-oct §2 #4: «en las páginas comerciales deberemos añadir recursos como estos para hacerlas más
 * dinámicas y profesionales». Cifras de titular que cuentan al entrar en pantalla, cada una con un dibujo
 * pequeño que la demuestra y una línea de contexto al pasar por encima.
 */
.aui-stats-band { container: aui-stats-band / inline-size; background: var(--background); color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); }
.aui-stats-band *, .aui-stats-band *::before, .aui-stats-band *::after { box-sizing: border-box; }
.aui-stats-band-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.aui-stats-band-inner { max-width: 1120px; margin: 0 auto; padding: var(--space-24) var(--space-8); }

/* Cabecera: el título a la izquierda, la nota a la derecha, compartiendo la última línea base. */
.aui-stats-band-header { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: last baseline; gap: var(--space-4) var(--space-12); margin-bottom: var(--space-16); }
.aui-stats-band-title { max-width: 16ch; margin: 0; font-family: var(--font-display); font-size: clamp(1.875rem, 1rem + 2.6cqi, var(--text-4xl)); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-display); text-wrap: balance; }
.aui-stats-band-description { max-width: 34ch; margin: 0; justify-self: end; color: var(--text-secondary); font-size: var(--text-base); line-height: 1.5; text-wrap: pretty; }
.aui-stats-band-header:not(:has(.aui-stats-band-title)) { grid-template-columns: minmax(0, 1fr); }
.aui-stats-band-header:not(:has(.aui-stats-band-title)) .aui-stats-band-description { justify-self: start; }

/* La rejilla. Cada cifra tiene las mismas filas, así los números, las etiquetas y los dibujos se alinean
   de una columna a otra. */
.aui-stats-band-stats { position: relative; display: grid; grid-template-columns: repeat(var(--aui-sb-count), minmax(0, 1fr)); column-gap: var(--space-10); row-gap: var(--space-16); margin: 0; }
.aui-stats-band-stat {
  --aui-sb-start: calc(var(--aui-sb-i) * 90ms + var(--aui-sb-draw));
  --aui-sb-ink: var(--text-secondary);
  --aui-sb-soft: var(--border-strong);
  position: relative; display: flex; min-width: 0; flex-direction: column; cursor: default; -webkit-tap-highlight-color: transparent;
}
.aui-stats-band-stat:focus { outline: none; }
.aui-stats-band-figure { order: -1; margin: 0 0 var(--space-5); }
.aui-stats-band-label { color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); text-wrap: pretty; }
.aui-stats-band-caption { display: grid; margin: 2px 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); }
.aui-stats-band-detail, .aui-stats-band-context { grid-area: 1 / 1; min-width: 0; text-wrap: pretty; transition: opacity var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard); }
.aui-stats-band-stat[data-context] .aui-stats-band-context { opacity: 0; transform: translateY(4px); }
.aui-stats-band-context { color: var(--text-secondary); }

/* El número: letra de titular, dígitos tabulares, y la unidad más pequeña y más callada en la misma línea base. */
.aui-stats-band-number { display: inline-flex; align-items: baseline; font-family: var(--font-display); font-size: clamp(2.5rem, 1.4rem + 3cqi, var(--text-4xl)); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aui-stats-band-prefix, .aui-stats-band-suffix { color: var(--text-muted); font-size: .5em; letter-spacing: -.01em; }
.aui-stats-band-prefix { margin-right: .08em; }
.aui-stats-band-suffix { margin-left: .1em; }
.aui-stats-band-digits { display: inline-grid; justify-items: start; }
.aui-stats-band-sizer, .aui-stats-band-live { grid-area: 1 / 1; }
.aui-stats-band-sizer { visibility: hidden; }

/* Los dibujos van en la fila de abajo, todos del mismo alto, así quedan alineados haga lo que haga el texto
   que tienen encima. */
.aui-stats-band-visual { position: relative; display: flex; flex: none; flex-direction: column; justify-content: flex-end; height: calc(56px + var(--space-8)); margin: auto 0 0; padding-top: var(--space-8); }
.aui-stats-band-visual > * { position: relative; height: 100%; }
.aui-stats-band-visual > .aui-stats-band-bars[data-dense] { height: 56%; }
.aui-stats-band-draw { display: block; width: 100%; height: 100%; overflow: visible; }

.aui-stats-band-trend { margin-right: 3px; }
.aui-stats-band-area { fill: var(--aui-sb-soft); opacity: .22; transition: fill var(--duration-standard) var(--ease-standard); }
.aui-stats-band-line { fill: none; stroke: var(--aui-sb-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; transition: stroke var(--duration-standard) var(--ease-standard); }
.aui-stats-band-end-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--aui-sb-ink); box-shadow: 0 0 0 2px var(--background); transition: background-color var(--duration-standard) var(--ease-standard), opacity 320ms var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }

.aui-stats-band-bars { display: flex; align-items: flex-end; gap: 3px; }
/* 90 días no caben con 90 huecos fijos en una columna estrecha, así que las barras densas se sacan el hueco
   de su propio sitio. */
.aui-stats-band-bars[data-dense] { gap: 0; }
.aui-stats-band-bars[data-dense] .aui-stats-band-bar { border-radius: 0; clip-path: inset(0 22% 0 22%); }
.aui-stats-band-bar { flex: 1 1 0; height: 100%; border-radius: 1px; background: var(--aui-sb-soft); transform: scaleY(var(--aui-sb-h)); transform-origin: bottom; transition: background-color var(--duration-standard) var(--ease-standard), transform 560ms var(--ease-enter); }
.aui-stats-band-bar[data-ink] { background: var(--aui-sb-ink); }

.aui-stats-band-map { display: flex; }
.aui-stats-band-map .aui-stats-band-draw { width: auto; aspect-ratio: 80 / 30; }
.aui-stats-band-land { fill: var(--aui-sb-soft); transition: fill var(--duration-standard) var(--ease-standard); }
.aui-stats-band-lit { fill: var(--aui-sb-ink); transition: fill var(--duration-standard) var(--ease-standard); }

/* Al pasar por encima o al enfocar: la línea de contexto aparece y el dibujo toma el color de acento. Las
   demás cifras se quedan neutras. */
.aui-stats-band-stat:focus-visible { --aui-sb-ink: var(--accent); --aui-sb-soft: color-mix(in oklab, var(--accent) 42%, var(--background)); }
.aui-stats-band-stat[data-context]:focus-visible .aui-stats-band-detail { opacity: 0; transform: translateY(-4px); }
.aui-stats-band-stat[data-context]:focus-visible .aui-stats-band-context { opacity: 1; transform: none; }
@media (hover: none) {
  .aui-stats-band-stat:focus { --aui-sb-ink: var(--accent); --aui-sb-soft: color-mix(in oklab, var(--accent) 42%, var(--background)); }
  .aui-stats-band-stat[data-context]:focus .aui-stats-band-detail { opacity: 0; transform: translateY(-4px); }
  .aui-stats-band-stat[data-context]:focus .aui-stats-band-context { opacity: 1; transform: none; }
}
@media (hover: hover) {
  .aui-stats-band-stat:hover { --aui-sb-ink: var(--accent); --aui-sb-soft: color-mix(in oklab, var(--accent) 42%, var(--background)); }
  .aui-stats-band-stat[data-context]:hover .aui-stats-band-detail { opacity: 0; transform: translateY(-4px); }
  .aui-stats-band-stat[data-context]:hover .aui-stats-band-context { opacity: 1; transform: none; }
}

/* Entrada: las cifras suben en cadena mientras los números cuentan, y cada dibujo se traza cuando su número
   ya ha aterrizado. */
.aui-stats-band-stat { opacity: 0; transform: translateY(8px); transition: opacity 480ms var(--ease-enter), transform 640ms var(--ease-enter); transition-delay: calc(var(--aui-sb-i) * 90ms); }
.aui-stats-band[data-in-view] .aui-stats-band-stat { opacity: 1; transform: none; }
.aui-stats-band:not([data-in-view]) .aui-stats-band-draw { clip-path: inset(0 100% 0 0); }
.aui-stats-band:not([data-in-view]) .aui-stats-band-bar { transform: scaleY(0); }
.aui-stats-band:not([data-in-view]) :is(.aui-stats-band-end-dot) { opacity: 0; }
.aui-stats-band:not([data-in-view]) .aui-stats-band-end-dot { transform: scale(.3); }
.aui-stats-band-draw { clip-path: inset(0 -4px 0 0); transition: clip-path 1100ms var(--ease-in-out) var(--aui-sb-start); }
.aui-stats-band[data-in-view] .aui-stats-band-bar { transition-delay: 0ms, calc(var(--aui-sb-start) + var(--aui-sb-j) * 420ms); }
.aui-stats-band[data-in-view] .aui-stats-band-end-dot { transition-delay: 0ms, calc(var(--aui-sb-start) + 1000ms), calc(var(--aui-sb-start) + 1000ms); }

/* Con rejilla: líneas de un píxel. Primero se trazan las de arriba y abajo, y luego crecen las de entre cifras. */
.aui-stats-band[data-layout="divided"] .aui-stats-band-stats { column-gap: 0; row-gap: 0; }
.aui-stats-band[data-layout="divided"] .aui-stats-band-stats::before,
.aui-stats-band[data-layout="divided"] .aui-stats-band-stats::after { content: ""; position: absolute; right: 0; left: 0; height: 1px; background: var(--border); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-in-out); }
.aui-stats-band[data-layout="divided"] .aui-stats-band-stats::before { top: 0; }
.aui-stats-band[data-layout="divided"] .aui-stats-band-stats::after { bottom: 0; transition-delay: 120ms; }
.aui-stats-band[data-layout="divided"][data-in-view] .aui-stats-band-stats::before,
.aui-stats-band[data-layout="divided"][data-in-view] .aui-stats-band-stats::after { transform: scaleX(1); }
.aui-stats-band[data-layout="divided"] .aui-stats-band-stat { padding: var(--space-10) var(--space-8) var(--space-8); }
.aui-stats-band[data-layout="divided"] .aui-stats-band-stat:first-child { padding-left: 0; }
.aui-stats-band[data-layout="divided"] .aui-stats-band-stat:last-child { padding-right: 0; }
.aui-stats-band[data-layout="divided"] .aui-stats-band-stat:not(:first-child)::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--border); transform: scaleY(0); transform-origin: top; transition: transform 700ms var(--ease-enter); transition-delay: calc(var(--aui-sb-i) * 90ms + 240ms); }
.aui-stats-band[data-layout="divided"][data-in-view] .aui-stats-band-stat::before { transform: scaleY(1); }

/* Tableta: dos por dos. Una banda de tres se apila, en vez de dejar una huérfana. */
@container aui-stats-band (max-width: 800px) {
  .aui-stats-band-inner { padding: var(--space-20) var(--space-8); }
  .aui-stats-band-header { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-12); }
  .aui-stats-band-description { justify-self: start; }
  .aui-stats-band-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); row-gap: var(--space-12); }
  .aui-stats-band[data-layout="divided"] .aui-stats-band-stat { padding: var(--space-8) var(--space-8) var(--space-8); }
  .aui-stats-band[data-layout="divided"] .aui-stats-band-stat:nth-child(2n + 1) { padding-left: 0; }
  .aui-stats-band[data-layout="divided"] .aui-stats-band-stat:nth-child(2n) { padding-right: 0; }
  .aui-stats-band[data-layout="divided"] .aui-stats-band-stat:nth-child(2n + 1)::before { display: none; }
  .aui-stats-band[data-layout="divided"] .aui-stats-band-stat:nth-child(n + 3)::after { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: var(--border); }
}

/* Móvil: una cifra por fila, con el dibujo al lado del número para que nada quede apretado. */
@container aui-stats-band (max-width: 520px) {
  .aui-stats-band-inner { padding: var(--space-16) var(--space-4); }
  .aui-stats-band-header { margin-bottom: var(--space-10); }
  .aui-stats-band-stats { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-10); }
  .aui-stats-band-stat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); grid-template-areas: "figure visual" "label label" "caption caption"; column-gap: var(--space-6); }
  .aui-stats-band-figure { grid-area: figure; align-self: end; margin-bottom: var(--space-3); }
  .aui-stats-band-label { grid-area: label; }
  .aui-stats-band-caption { grid-area: caption; }
  .aui-stats-band-visual { grid-area: visual; align-self: end; height: 40px; margin: 0 0 var(--space-3); padding: 0; }
  .aui-stats-band-map { justify-content: flex-end; }
  .aui-stats-band[data-layout="divided"] .aui-stats-band-stat,
  .aui-stats-band[data-layout="divided"] .aui-stats-band-stat:nth-child(n) { padding: var(--space-8) 0; }
  .aui-stats-band[data-layout="divided"] .aui-stats-band-stat::before { display: none; }
  .aui-stats-band[data-layout="divided"] .aui-stats-band-stat:nth-child(n + 2)::after { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: var(--border); }
}
@container aui-stats-band (max-width: 800px) {
  .aui-stats-band-stats[data-count="3"] { grid-template-columns: minmax(0, 1fr); }
  /* Tres cifras apiladas con rejilla: sin relleno de columna ni líneas verticales; una línea entre filas. */
  .aui-stats-band[data-layout="divided"] .aui-stats-band-stats[data-count="3"] .aui-stats-band-stat { padding-right: 0; padding-left: 0; }
  .aui-stats-band[data-layout="divided"] .aui-stats-band-stats[data-count="3"] .aui-stats-band-stat::before { display: none; }
  .aui-stats-band[data-layout="divided"] .aui-stats-band-stats[data-count="3"] .aui-stats-band-stat:nth-child(n + 2)::after { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: var(--border); }
}

.aui-stats-band-preview { display: grid; width: 100%; justify-items: center; gap: var(--space-4); }
.aui-stats-band-frame { width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--background); }

@media (prefers-reduced-motion: reduce) {
  .aui-stats-band .aui-stats-band-stat, .aui-stats-band .aui-stats-band-draw, .aui-stats-band .aui-stats-band-bar, .aui-stats-band .aui-stats-band-end-dot,
  .aui-stats-band[data-layout="divided"] .aui-stats-band-stats::before, .aui-stats-band[data-layout="divided"] .aui-stats-band-stats::after, .aui-stats-band[data-layout="divided"] .aui-stats-band-stat::before { transition-duration: 0ms; transition-delay: 0ms; }
  .aui-stats-band .aui-stats-band-stat { opacity: 1; transform: none; }
  .aui-stats-band:not([data-in-view]) .aui-stats-band-draw { clip-path: inset(0 -4px 0 0); }
  .aui-stats-band:not([data-in-view]) .aui-stats-band-bar { transform: scaleY(var(--aui-sb-h)); }
  .aui-stats-band:not([data-in-view]) :is(.aui-stats-band-end-dot) { opacity: 1; transform: none; }
  .aui-stats-band-detail, .aui-stats-band-context { transition-duration: 0ms; }
}

/* Las webs de Aiden y sus temas meten CSS agresivo con !important (márgenes de dd y dl, tamaños de h2,
   MAYÚSCULAS, alturas). Como en los demás bloques, se protege lo imprescindible con `:not(#aui)` +
   !important, SOLO dentro del bloque: una regla del tema con id gana por especificidad aunque las dos lo
   lleven. Aquí no hay botones ni campos; lo que rompe la banda son los márgenes y el tamaño de la letra. */
.aui-stats-band dl:not(#aui),
.aui-stats-band dt:not(#aui),
.aui-stats-band dd:not(#aui) { margin: 0 !important; padding: 0 !important; }
.aui-stats-band .aui-stats-band-caption:not(#aui) { margin: 2px 0 0 !important; }
.aui-stats-band .aui-stats-band-figure:not(#aui) { margin: 0 0 var(--space-5) !important; }
.aui-stats-band :is(h2, p):not(#aui) { text-transform: none !important; }
.aui-stats-band .aui-stats-band-title:not(#aui) { font-family: var(--font-display) !important; font-weight: 500 !important; }
.aui-stats-band svg:not(#aui) { display: block !important; max-width: none !important; }