/* =========================================================
   BASE + COMPONENTES
   ------------------------------------------------------------
   Todo lo que se repite en más de una pantalla vive acá.
   Cada valor sale de tokens.css.

   Orden del archivo:
     1. reset          5. tarjetas
     2. tipografía     6. botones
     3. layout         7. campos y selectores
     4. capa de fondo  8. etiquetas, badges y presupuesto
     5. (ver arriba)   9. avisos, vacíos y toasts
                        10. movimiento reducido
   ========================================================= */

/* =========================================================
   1. RESET
   ========================================================= */

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

html{
  height: 100%;
  /* El scroll del documento lo maneja la pantalla, no el body:
     si el body scrollea y la pantalla también, en mobile tenés
     dos scrolls compitiendo. */
  overscroll-behavior-y: none;
}

body{
  margin:0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--type-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  overscroll-behavior-y: none;
}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

img,svg,video,canvas{ display:block; max-width:100%; }
button,input,select,textarea{ font: inherit; color: inherit; }
button{ cursor:pointer; border:none; background:none; }
button:disabled{ cursor:not-allowed; }

a{ color: inherit; }

::selection{ background: var(--grass); color: #0c0b09; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius: var(--r-pill); }
::-webkit-scrollbar-track{ background: transparent; }

/* =========================================================
   2. TIPOGRAFÍA
   ========================================================= */

/* Todo heading hereda la condensada: en esta app los títulos
   son rótulos, no párrafos. */
h1,h2,h3,h4,h5,h6,.display{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-serif);
  letter-spacing: -.005em;
  margin:0;
}

/* --- Displays fluidos: cuatro tamaños, no siete --- */
/* Rótulo de gala. En versal, con el tracking de prensa: el
   Didone en minúscula es delicado y en versal se vuelve rótulo. */
.t-display{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--leading-serif);
  letter-spacing: .04em;
  /* El Didone es de trazo fino: sobre crema hay que engordarlo
     un punto o los pelos se pierden. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.t-d1{ font-size: var(--type-d1); }   /* kicker de sección */
.t-d2{ font-size: var(--type-d2); }   /* título de pantalla */
.t-d3{ font-size: var(--type-d3); }   /* nombre del torneo */
.t-d4{ font-size: var(--type-d4); }   /* precio del lote */

/* Alias: los nombres viejos se/mapEAN a la escala nueva. */
.t-mega{ font-size: var(--type-d4); }
.t-huge{ font-size: var(--type-d3); }
.t-big{  font-size: var(--type-d2); }
.t-mid{  font-size: var(--type-d1); }

/* --- Roles de texto --- */
/* Etiqueta en versal. Va con --muted, no con --faint: son 10px
   y el usuario los lee de verdad. */
.t-label{
  font-size: var(--type-3xs);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
}

.t-muted{ color: var(--muted); }
/* .t-dim es "menos importante", no "casi invisible": sigue
   siendo texto y tiene que pasar AA. */
.t-dim{ color: var(--muted); }
.t-grass{ color: var(--grass); }
.t-gold{ color: var(--gold); }
.t-red{ color: var(--red-tint); }
.t-blue{ color: var(--blue); }

.t-num{
  font-family: var(--font-num);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.t-up{ text-transform: uppercase; letter-spacing: var(--tracking-mid); }

/* Texto largo de apoyo, con medida acotada para no quedar
   en una línea de 120 caracteres en escritorio. */
.t-lead{
  font-size: var(--type-lg);
  line-height: 1.45;
  color: var(--muted);
  max-width: 62ch;
}

/* Marca de sección: línea + número, estilo ficha de transmisión */
.rule{
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.rule::after{
  content:"";
  flex:1;
  height:1px;
  background: var(--line);
}
.rule .n{
  font-family: var(--font-display);
  font-size: var(--type-xs);
  font-weight: 700;
  color: var(--grass);
  letter-spacing: var(--tracking-mid);
}

/* =========================================================
   3. LAYOUT
   ========================================================= */

/* El selector es #contenido y NO #app aunque en index.html el div
   nazca con id="app": app.js le pone id="contenido" al arrancar, y
   el rename es a propósito —#contenido es el <main> y el destino del
   enlace de salto. Con "#app" acá la regla dejaba de coincidir con
   nada: position volvía a static, el z-index a auto, y la capa
   .video-layer (fixed, z-index 0, fondo negro opaco) se pintaba
   ENCIMA de todo el contenido. La app quedaba negra pero el DOM
   estaba entero, con su texto y su accesibilidad intactos, que es
   por lo que ni a11y.js ni el árbol de accesibilidad lo detectan.

   Ojo: el orden de pintado no es el del DOM. Lo estático se pinta
   en el paso 4 y un fixed con z-index en el 8, así que el fondo
   gana aunque esté declarado primero en el HTML. */
#contenido{
  position: relative;
  z-index: var(--z-content);
  min-height: 100vh;
  min-height: 100dvh;
}

.screen{ display:none; position:relative; z-index: var(--z-content); }
.screen.active{ display:block; animation: screenIn var(--t-base) var(--ease); }
@keyframes screenIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform:none; }
}

/* Contenedor de pantalla. El padding lateral es el gutter:
   en 360px son 16px, en 1920px son 28px. */
.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s11);
}

.cols{ display:grid; gap: var(--gap); }
.cols-2{ grid-template-columns: 1fr 1fr; }
.cols-3{ grid-template-columns: repeat(3, 1fr); }
.cols-4{ grid-template-columns: repeat(4, 1fr); }
.cols-side{ grid-template-columns: 1.55fr 1fr; }
@media (max-width: 980px){
  .cols-2,.cols-3,.cols-4,.cols-side{ grid-template-columns: 1fr; }
}

.row{ display:flex; align-items:center; gap: var(--s2); }
.row.wrap-row{ flex-wrap: wrap; }
.row.between{ justify-content: space-between; }
.row.end{ justify-content: flex-end; }
.row.top{ align-items: flex-start; }
.stack{ display:flex; flex-direction: column; gap: var(--s2); }

/* =========================================================
   4. CAPA DE FONDO
   Grano sutil: evita que el negro se vea plano como una
   pantalla apagada. No es un efecto, es una corrección.
   ========================================================= */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-bg);
  /* Dos focos: el azul frío es la "iluminación" de la sala y el
     cálido del piso. Sobre un negro tan plano, sin esto, la
     pantalla se ve apagada y no apagada: rota. */
  background-image:
    radial-gradient(ellipse 90% 60% at 82% -8%,  rgba(127,163,204,.07), transparent 60%),
    radial-gradient(ellipse 80% 55% at 14% 108%, rgba(212,175,106,.05), transparent 62%);
}

/* =========================================================
   5. TARJETAS
   ========================================================= */

.card{
  background:
    linear-gradient(180deg, rgba(242,237,224,.022), transparent 42%),
    var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--pad);
  box-shadow: var(--shadow-1), var(--edge-light);
}
.card.flat{ background: var(--surface); box-shadow:none; }
.card.raised{ box-shadow: var(--shadow-2); }
.card.pad-0{ padding:0; overflow:hidden; }

.card-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--pad);
  border-bottom: 1px solid var(--line);
}
.card-head h3{ font-size: var(--type-xl); }
.card-body{ padding: var(--pad); }

.divider{ height:1px; background: var(--line); border:none; margin: var(--s4) 0; }

/* =========================================================
   6. BOTONES
   Todo control apretable tiene al menos --tap de alto. Los
   botones de texto suelto (icono, fechar) usan .btn-icon y
   casi-square, que también respetan el mínimo.
   ========================================================= */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--tap);
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s2) var(--s5);
  font-size: var(--type-md);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.btn:hover:not(:disabled){ background: #2f2b22; border-color: #554e3d; }
.btn:active:not(:disabled){ transform: translateY(1px); }
.btn:disabled{ opacity:.4; }

/* Primario: una sola acción por pantalla, verde. */
/* El botón principal de la gala es dorado. Texto casi negro:
   9,5:1 medido, muy por encima de AA. */
.btn-primary{
  background: var(--gold);
  border-color: var(--gold);
  color: #14110a;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(212,175,106,.18);
}
.btn-primary:hover:not(:disabled){
  background: var(--gold-live);
  border-color: var(--gold-live);
  box-shadow: 0 4px 18px rgba(212,175,106,.3);
}

/* Premio: campeón, revelar, confirmar algo que no se puede
   deshacer. */
/* Botón de premio: el más lleno. Se reserva para lo que gana
   algo — revelar, confirmar, campeón. */
.btn-gold{
  background: var(--gold-live);
  border-color: var(--gold-live);
  color:#14110a;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(212,175,106,.34);
}
.btn-gold:hover:not(:disabled){
  background: #ecd08c;
  border-color: #ecd08c;
  box-shadow: 0 6px 28px rgba(212,175,106,.45);
}

/* Secundario y fantasma: menos peso, mismo objetivo táctil. */
.btn-ghost{ background:transparent; border-color: var(--line-2); }
.btn-ghost:hover:not(:disabled){ background: var(--card-2); border-color: var(--line-2); }

/* Peligro: solo para salir de un torneo o borrar. */
.btn-danger{
  background: transparent;
  border-color: rgba(192,74,78,.55);
  color: var(--red-tint);
}
.btn-danger:hover:not(:disabled){ background: var(--red-bg); }

.btn-lg{ min-height: 52px; padding: var(--s3) var(--s7); font-size: var(--type-md); }
/* Chico en tipografía, no en alto: 34px de alto era un objetivo
   táctil demasiado chico para un dedo. */
.btn-sm{ min-height: var(--tap); padding: 4px var(--s3); font-size: var(--type-xs); }
.btn-block{ width:100%; }

.btn-up{
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--type-lg);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
}

/* Botón cuadrado para ícono. Chiquito por fuera, pero nunca
   debajo de 44 de alto: en el dedo es la diferencia entre
   tocarlo y no. */
.btn-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  flex-shrink: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--muted);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn-icon:hover:not(:disabled){ background: var(--card-2); color: var(--text); border-color:#554e3d; }

/* =========================================================
   FOCO
   Anillo doble: el oscuro separa el foco del fondo y el
   verde lo hace visible sobre cualquier superficie.
   ========================================================= */
:focus{ outline: none; }
:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* =========================================================
   7. CAMPOS Y SELECTORES
   ========================================================= */

.field{ margin-bottom: var(--s4); }
.field > label{
  display:block;
  font-size: var(--type-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
  margin-bottom: var(--s2);
}

.input, .select{
  width:100%;
  min-height: var(--tap);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--text);
  padding: var(--s3);
  font-size: var(--type-md);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.input::placeholder{ color: var(--muted); }
.input:focus, .select:focus{
  border-color: var(--gold);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--gold-bg);
}
.select{ appearance:none; cursor:pointer; }

/* Entrada de código: la más grande de la app, es la puerta de
   entrada al torneo. */
.input-lg{
  font-family: var(--font-num);
  font-size: var(--type-3xl);
  font-weight: 700;
  padding: var(--s4);
  text-align: center;
  letter-spacing: .3em;
  text-indent: .3em;   /* compensa el tracking, si no se ve corrido */
}

/* Opciones tipo ficha: elegir plantilla, presupuesto, formato. */
.pick{
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.pick-opt{
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s2);
  text-align: center;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.pick-opt:hover{ border-color:#554e3d; }
.pick-opt:active{ transform: translateY(1px); }
/* El estado seleccionado no es solo color: también pesa la
   línea, para que se lea sin distinguir el verde. */
.pick-opt.sel{
  border-color: var(--gold);
  background: var(--gold-bg);
  box-shadow: inset 0 -2px 0 var(--gold);
}
.pick-opt .v{
  font-family: var(--font-num);
  font-size: var(--type-3xl);
  font-weight: 800;
  line-height: 1;
}
.pick-opt .k{
  font-size: var(--type-3xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  color: var(--muted);
}
.pick-opt.sel .v{ color: var(--gold); }

/* =========================================================
   8. ETIQUETAS, BADGES Y PRESUPUESTO
   ========================================================= */

/* Pastilla de estado: listo, esperando, desconectado. */
.pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 5px var(--s3);
  font-size: var(--type-xs);
  color: var(--muted);
  white-space: nowrap;
}
.pill b{ color: var(--text); font-weight: 700; }
.pill-grass{ border-color: rgba(79,191,127,.42); color: var(--grass); }
.pill-gold{ border-color: rgba(212,175,106,.45); color: var(--gold); }
.pill-red{ border-color: rgba(192,74,78,.45); color: var(--red-tint); }
.pill-blue{ border-color: rgba(127,163,204,.45); color: var(--blue); }

/* Badge de posición. El color de la posición es el mismo en
   toda la app: badge, formación, lateral y log. */
.tag{
  display: inline-flex;
  align-items: center;
  padding: 3px var(--s2);
  border-radius: var(--r-sm);
  font-size: var(--type-3xs);
  font-weight: 800;
  letter-spacing: .08em;
  font-family: var(--font-num);
  text-transform: uppercase;
}
.pos-POR{ background: var(--pos-por-bg); color: var(--pos-por); }
.pos-DEF{ background: var(--pos-def-bg); color: var(--pos-def); }
.pos-MED{ background: var(--pos-med-bg); color: var(--pos-med); }
.pos-DEL{ background: var(--pos-del-bg); color: var(--pos-del); }

/* Punto de color del equipo. Es decorativo: el nombre del
   equipo siempre acompaña, así que va aria-hidden. */
.dot{
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
  background: var(--team-color, var(--muted));
}
.dot-lg{ width: 12px; height: 12px; }

/* Barra de presupuesto.
   Es un dato que se lee al instante: verde con holgura,
   ámbar cuando aprieta, rojo cuando no alcanza. */
.budget-bar{
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--card-2);
  overflow: hidden;
}
.budget-bar > i{
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--grass);
  transition: width var(--t-slow) var(--ease), background var(--t-base) var(--ease);
}
/* La barra es el único lugar donde el presupuesto bajo se ve
   solo, sin leer un número. */
.budget-bar.is-empty > i{ background: var(--line-2); }
.budget-bar.is-tight > i{ background: var(--gold); }
.budget-bar.is-out > i{ background: var(--red); }

/* =========================================================
   9. CÓDIGO DE TORNEO
   Se ve a tres metros de la pantalla y se dicta por
   teléfono. El texto lleva espacios porque el
   `letter-spacing` no cuenta como separador para un lector de
   pantalla ni para quien lo dicta.
   ========================================================= */
.code{
  font-family: var(--font-num);
  font-weight: 800;
  font-size: var(--type-d2);
  line-height: 1;
  letter-spacing: .12em;
  text-align: center;
  padding: var(--s5) var(--s3);
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  user-select: all;
  white-space: nowrap;
}

/* =========================================================
   10. AVISOS, VACÍOS Y TOASTS
   ========================================================= */

.note{
  border-left: 2px solid var(--line-2);
  padding: var(--s2) 0 var(--s2) var(--s3);
  color: var(--muted);
  font-size: var(--type-sm);
}
.note-grass{ border-color: var(--grass); }
.note-red{ border-color: var(--red); }
.note-gold{ border-color: var(--gold); }
.note-blue{ border-color: var(--blue); }

/* Estado vacío: no es un error, es una pantalla que todavía
   no tiene nada que mostrar. */
.empty{
  text-align: center;
  color: var(--muted);
  font-size: var(--type-sm);
  padding: var(--s9) var(--s5);
}

.toast{
  position: fixed;
  left: 50%;
  bottom: calc(var(--s6) + var(--safe-bottom));
  transform: translate(-50%, 20px);
  background: var(--card-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s5);
  font-size: var(--type-md);
  font-weight: 600;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  z-index: var(--z-toast);
  max-width: calc(100vw - var(--s9));
  text-align: center;
}
.toast.show{ opacity:1; transform: translate(-50%,0); }
.toast.err{ border-color: rgba(192,74,78,.65); color: var(--red-tint); }
.toast.ok{ border-color: rgba(79,191,127,.6); color: var(--grass); }

/* =========================================================
   11. MOVIMIENTO REDUCIDO
   Se apaga el MOVIMIENTO, no la información.

   La versión anterior usaba `*` con animation-duration y
   transition-duration, lo que también mataba las
   transiciones de color y el feedback de foco: eso no es
   decoración, es información. Acá se bajan las duraciones,
   que es lo que perceptualmente importa, y además se corta
   el movimiento puro (translate, scale) de los elementos
   marcados con .mo.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  /* El fondo se queda congelado: el video sigue, pero sin moverse. */
  .video-layer{ animation: none !important; }
  .mo{ transform: none !important; }
}


/* =========================================================
   TECLADO
   ------------------------------------------------------------
   Dos cosas que no se ven hasta que alguien navega sin ratón.

   EL ENLACE DE SALTO
   -------------------
   Con teclado, el Tab arranca en el primer control de la
   página. En una pantalla con una barra y veinte filas de
   tabla, eso son veinte pulsaciones antes de llegar al
   contenido. El enlace de salto está oculto hasta que recibe
   el foco, que es cuando hace falta: es una persona que ya
   decidió que quiere saltar y no un control flotando siempre
   arriba.

   Se usa "clip-path" y no "display: none" a propósito: un
   elemento con display none no puede recibir el foco y el
   enlace no serviría de nada.

   SOLO PARA LECTORES
   ------------------
   La región que anuncia el cambio de pantalla y los textos de
   ayuda tienen que estar en el árbol y no verse. Con
   "clip-path" en vez de "hidden", el texto sigue disponible
   para copiar y para buscar en la página; con "hidden" no se
   puede seleccionar y no aparece en la búsqueda del navegador.
   ------------------------------------------------------------ */

.salto{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  padding: 12px 18px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--type-sm);
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom-right-radius: var(--r-sm);
  transform: translateY(-120%);
  transition: transform var(--t-base) var(--ease);
}
.salto:focus,
.salto:focus-visible{
  transform: none;
  outline: 3px solid var(--bg);
  outline-offset: 2px;
}

/* Con prefers-reduced-motion el salto no se desliza: aparece de
   golpe. El movimiento de 60 píxeles no aporta nada y a alguien
   le puede provocar el vértigo. */
@media (prefers-reduced-motion: reduce){
  .salto{ transition: none; }
}

/* El contenido al que salta. El foco programático deja un
   contorno que en un contenedor no se ve, así que se lo
   dibujamos: si alguien saltó, tiene que ver dónde cayó. */
#contenido:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

.sr-solo{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* El esqueleto de la pantalla se anuncia como tal, para que un
   lector de pantalla sepa que hay algo cargando y no piense
   que la página está vacía. */
.cargando-aviso{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--s5);
  text-align: center;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--type-md);
}
.cargando-aviso::after{
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin-top: var(--s3);
  background: var(--gold);
  animation: cargando-pulso 1200ms var(--ease) infinite;
}
@keyframes cargando-pulso{
  0%, 100%{ opacity: .25; transform: scaleX(.4); }
  50%{ opacity: 1; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce){
  .cargando-aviso::after{ animation: none; opacity: .7; }
}

/* ------------------------------------------------------------
   Las pestañas

   No usan el patrón de tablist completo —role="tab",
   aria-selected, paneles— porque no hay paneles con rol
   "tabpanel": la pantalla cambia entera. Lo que sí importa es
   que el lector de pantalla diga cuál está elegida, y para eso
   alcanza con aria-current.
   ------------------------------------------------------------ */

[role="tablist"]{
  /* La fila scrollea sola; el documento no. */
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}

[aria-current="true"],
[aria-current="page"]{
  /* La pestaña elegida se marca con el dorado y no solo con el
     subrayado: el subrayado lo ve quien distingue colores, el
     dorado también. */
  color: var(--gold);
}