/* app/static/css/auditoria.css — pagina publica /auditoria (Task 9)
   No importa nada de admin/corpus.html: el mecanismo del riel se espeja (dos
   variables inline, --ocurrio y --dijo) pero los estilos son propios — aquella
   pantalla le habla a un operador, esta a alguien que llego de afuera. */

.aud-page {
  background: #0b0d12;
  color: #d7dae0;
  min-height: 100vh;
}

.aud-container {
  /* El contenedor es la medida del TEXTO, no del contenido. Antes media 860 y cada
     parrafo ponia su propio max-width en ch: el resultado eran cuatro bordes derechos
     distintos (631/646/686/688) contra titulos y graficos que llegaban a 836. El texto
     no estaba mal alineado, estaba mas corto — y el ojo lo leia como arrinconado.
     Ahora hay UN borde para la prosa y los datos son lo que se sale de la columna. */
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 128px;
  padding-bottom: 80px;
}

.aud-bloque {
  margin-bottom: 3.5rem;
}

.aud-bloque:last-child {
  margin-bottom: 0;
}

.aud-h1, .aud-h2 {
  font-family: 'Syne', 'Inter', sans-serif;
  color: #ffffff;
  font-weight: 700;
}

.aud-eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 600;
  color: #34D399;
  margin-bottom: .75rem;
}

.aud-h1 {
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.aud-lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #c8ccd4;
}

.aud-h2 {
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.aud-alcance p {
  font-size: 1.05rem;
  color: #c8ccd4;
  line-height: 1.6;
}

.aud-alcance strong {
  color: #ffffff;
}

.aud-como-se-lee p,
.aud-ciclo p {
  font-size: 1rem;
  line-height: 1.75;
  color: #c8ccd4;
}

/* Los graficos y el epigrafe que los ancla se salen de la columna de texto. Que
   rompan la medida no es decoracion: dice que el dato es lo que manda en esta pagina
   y la prosa solo lo enmarca. */
.aud-h2--datos,
.aud-tramos,
.aud-epigrafe,
.aud-curva-wrap,
.aud-selector-fila,
.aud-leyenda {
  width: min(900px, 100vw - 2.5rem);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ===================== Tramos (bloque 3) =====================
   Cada tramo es un DUMBBELL sobre un eje 0-100 compartido por las seis filas.

   Por que asi y no una barra llena: el largo de una barra codifica "que tan
   probable era", que es justo lo que el rotulo de la fila ya dice. La variable que
   el lector NO sabe de antemano es la distancia entre lo dicho y lo ocurrido, y esa
   se lleva el peso visual: es el segmento.

   El eje compartido conserva la posicion, que el rotulo no puede dar
   perceptualmente: las seis filas forman una escalera y se ve de un golpe que el
   modelo ordena la realidad en todo el rango.

   El caso degenerado es la firma: cuando los dos numeros casi coinciden, el punto
   dorado queda centrado dentro del blanco y dibuja una DIANA. El mejor resultado es
   la marca mas reconocible de la pagina, no un muñon invisible.

   Ningun color de nota: la realidad es blanca y neutra, el claim es oro, y el
   segmento no juzga. Una escala verde/ambar seria una calificacion que nos ponemos
   nosotros. */

.aud-leyenda {
  display: flex;
  gap: 1.5rem;
  font-size: .82rem;
  color: #8a8f98;
  margin-bottom: 1.25rem;
}

.aud-leyenda span { display: inline-flex; align-items: center; gap: .45rem; }

.aud-chip {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.aud-chip--ocurrio { background: #f0f0f0; }
.aud-chip--dijo    { background: #FFD54A; }

/* La grilla vertical vive en el contenedor, detras de las seis filas: es lo que
   vuelve legible la posicion. */
.aud-tramos {
  --pista-izq: 122px;
  --pista-der: 92px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

/* Cada rotulo se ancla a SU porcentaje. Con space-between quedaban repartidos por
   ancho de texto y no coincidian con las lineas que rotulan. */
.aud-eje {
  position: relative;
  height: 1em;
  margin: 0 var(--pista-der) .55rem var(--pista-izq);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem;
  color: #5c6470;
}

.aud-eje span {
  position: absolute;
  transform: translateX(-50%);
}

.aud-eje span:nth-child(1) { left: 0;    transform: translateX(0); }
.aud-eje span:nth-child(2) { left: 25%; }
.aud-eje span:nth-child(3) { left: 50%; }
.aud-eje span:nth-child(4) { left: 75%; }
.aud-eje span:nth-child(5) { left: 100%; transform: translateX(-100%); }

.aud-tramo {
  display: grid;
  grid-template-columns: var(--pista-izq) 1fr var(--pista-der);
  align-items: center;
  padding: .55rem 0;
  animation: aud-entra .38s ease both;
  animation-delay: calc(var(--i, 0) * 65ms);
}

@keyframes aud-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aud-tramo { animation: none; }
}

.aud-tramo-rotulo {
  font-size: .85rem;
  color: #c8ccd4;
  padding-right: .75rem;
}

.aud-tramo-vacio {
  grid-column: 2 / -1;
  font-size: .82rem;
  color: #5c6470;
}

/* La pista: riel tenue de fondo + grilla a 25/50/75. */
/* Grilla con paradas de color explicitas, NO con background-position en porcentaje:
   ese modo alinea el X% de la IMAGEN con el X% del CONTENEDOR, asi que una linea
   pedida al 25% aterriza en 25% x (100% - 25%) = 18,75%. Se veia como dos lineas
   apretadas a la izquierda en vez de tres repartidas. */
.aud-pista {
  position: relative;
  height: 22px;
  --rejilla: rgba(255, 255, 255, .07);
  background: linear-gradient(90deg,
    transparent calc(25% - 1px), var(--rejilla) calc(25% - 1px), var(--rejilla) 25%,
    transparent 25%,
    transparent calc(50% - 1px), var(--rejilla) calc(50% - 1px), var(--rejilla) 50%,
    transparent 50%,
    transparent calc(75% - 1px), var(--rejilla) calc(75% - 1px), var(--rejilla) 75%,
    transparent 75%);
}

.aud-pista::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, .08);
}

/* El segmento ES la brecha: se lleva el grosor porque es la variable que importa. */
.aud-segmento {
  position: absolute;
  top: 50%;
  left: var(--desde);
  width: calc(var(--hasta) - var(--desde));
  height: 6px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: rgba(255, 255, 255, .34);
}

.aud-punto {
  position: absolute;
  top: 50%;
  border-radius: 50%;
}

.aud-punto--ocurrio {
  left: var(--ocurrio);
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  background: #f0f0f0;
}

/* Mas chico y dibujado despues: cuando coinciden queda centrado dentro del blanco
   y el par se lee como una diana. */
.aud-punto--dijo {
  left: var(--dijo);
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: #FFD54A;
}

/* Cifras tabulares para que las seis filas se alineen en columna. Mono SOLO en el
   par de valores: filas enteras en monoespaciada hacen que una pagina de confianza
   se lea como una terminal. */
.aud-par {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  font-weight: 500;
}

.aud-v-real { color: #f0f0f0; }
.aud-v-dijo { color: #FFD54A; }

.aud-epigrafe {
  /* margin-top/bottom por separado: el atajo `margin` pisaba el margin-left: 50% del
     breakout y el transform quedaba sin contrapeso, corriendo el epigrafe 450px a la
     izquierda. */
  margin-top: 1.5rem;
  margin-bottom: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: .88rem;
  color: #8a8f98;
  font-variant-numeric: tabular-nums;
}

.aud-epigrafe strong { color: #c8ccd4; font-weight: 600; }

/* En 'midiendo' no hay grafico al que servir de epigrafe, asi que la linea de alcance
   va suelta y sin el filete que la ata a algo de arriba. */
.aud-epigrafe--suelto {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 1.25rem;
}

/* ===================== Mercados (bloque 5) ===================== */

.aud-selector-fila {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

.aud-selector-fila label {
  font-size: .9rem;
  color: #a7acb6;
}

.aud-select {
  background: #14161d;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  padding: .5rem .75rem;
  font-size: .95rem;
  flex: 1;
  max-width: 320px;
}

.aud-select:focus {
  outline: 2px solid #34D399;
  outline-offset: 1px;
}

/* OBLIGATORIO: el JS usa maintainAspectRatio:false, asi que sin una altura
   explicita en el contenedor el canvas colapsa a 0 y la curva no se ve. */
.aud-curva-wrap {
  background: rgba(255, 255, 255, .03);
  border-radius: 12px;
  padding: 1rem;
}

/* El area de trazado tiene que ser CUADRADA. Los dos ejes van de 0 a 100 y la recta de
   calibracion perfecta es y=x, asi que sin lados iguales deja de ser una diagonal.

   Medido en produccion con el contenedor de 900x340 que habia antes: el area de trazado
   quedaba en 799x221 px, o sea 7,99 px por punto porcentual a lo ancho contra 2,21 a lo
   alto. La "diagonal" se dibujaba a 15,5 grados y el hueco vertical entre lo que TIPZ
   dijo y lo que ocurrio —que es exactamente lo que esta pagina mide— se comprimia 3,6
   veces. El grafico hacia ver al modelo mejor calibrado de lo que esta.

   El tope de 520px es la altura maxima tolerable para un bloque de esta pagina; la caja
   se centra y deja aire a los lados en vez de estirarse hasta los 900 del carril. */
.aud-curva-caja {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
}

/* Patron de Chart.js con maintainAspectRatio:false — el lienzo no debe participar del
   alto del padre, que sale de aspect-ratio y no del contenido. */
.aud-curva-caja > canvas {
  position: absolute;
  inset: 0;
}

@media (max-width: 575px) {
  .aud-curva-wrap { padding: .6rem; }
}

/* La clave de lectura de la curva. Va DEBAJO del grafico y no arriba: primero se ve
   la forma, despues se lee que significa. */
.aud-curva-nota {
  font-size: .92rem;
  line-height: 1.65;
  color: #a7acb6;
  margin: 1rem 0 0;
}

.aud-curva-nota--criterio {
  font-size: .86rem;
  color: #8a8f98;
  border-left: 2px solid rgba(255, 255, 255, .12);
  padding-left: .9rem;
}

.aud-curva-nota strong {
  color: #d7dae0;
  font-weight: 600;
}

/* ===================== Estado midiendo ===================== */

.aud-midiendo-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 1.5rem;
}

.aud-midiendo-icono {
  font-size: 1.6rem;
  color: #FBBF24;
  flex-shrink: 0;
}

.aud-midiendo-card p {
  margin: 0;
  color: #c8ccd4;
  line-height: 1.6;
}

/* Explicacion del ajuste, debajo de la curva. Fondo propio y no prosa suelta: es una
   pausa didactica dentro de un bloque de datos, y conviene que se lea como tal. */
.aud-explica {
  background: rgba(255, 255, 255, .03);
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
  margin-top: 1.5rem;
}

.aud-h3 {
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: .9rem;
}

.aud-explica p {
  font-size: .95rem;
  line-height: 1.7;
  color: #c8ccd4;
  max-width: 66ch;
  margin-bottom: .85rem;
}

.aud-explica p:last-child { margin-bottom: 0; }

.aud-explica strong { color: #ffffff; }

@media (max-width: 575px) {
  .aud-explica { padding: 1.1rem 1.1rem; }
}

/* ===================== Invitacion al metodo ===================== */

/* Deliberadamente mas sobrio que el cierre: es un puente, no la conversion. Si los dos
   bloques gritaran igual, el lector no sabria cual es la accion principal. */
.aud-invitacion-inner {
  border-left: 2px solid #34D399;
  padding: .25rem 0 .25rem 1.4rem;
}

.aud-invitacion-titulo {
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: .75rem;
}

.aud-invitacion-inner p {
  font-size: 1rem;
  line-height: 1.75;
  color: #c8ccd4;
  margin-bottom: 1rem;
}

.aud-invitacion-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #34D399;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(52, 211, 153, .35);
  padding-bottom: .15rem;
  transition: border-color .2s ease, gap .2s ease;
}

.aud-invitacion-link:hover,
.aud-invitacion-link:focus-visible {
  color: #34D399;
  border-bottom-color: #34D399;
  gap: .7rem;
}

@media (prefers-reduced-motion: reduce) {
  .aud-invitacion-link { transition: none; }
  .aud-invitacion-link:hover, .aud-invitacion-link:focus-visible { gap: .45rem; }
}

/* ===================== Cierre / CTA (bloque 8) ===================== */

.aud-cta-inner {
  text-align: center;
  background: linear-gradient(180deg, rgba(52, 211, 153, .08), transparent);
  border: 1px solid rgba(52, 211, 153, .2);
  border-radius: 16px;
  padding: 2.5rem 1.5rem;
}

.aud-cta-headline {
  font-size: 1.5rem;
  margin-bottom: .75rem;
}

.aud-cta-lead {
  color: #c8ccd4;
  max-width: 48ch;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.aud-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(135deg, #00A859, #00D46A);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  padding: .85rem 1.75rem;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.aud-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 168, 89, .35);
  color: #ffffff;
}

.aud-cta-trust {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  font-size: .85rem;
  color: #8a8f98;
}

.aud-cta-trust i {
  color: #34D399;
  margin-right: .3rem;
}

/* ===================== Responsive ===================== */

@media (max-width: 575px) {
  .aud-container { padding-top: 104px; }
  /* En 390px el riel mide ~350px: un punto porcentual son 3,5px, asi que los dos
     valores necesitan achicarse para no comerse la barra que los contiene. */
  /* A 390px la fila de tres columnas deja la pista sin ancho util. El rotulo sube a
     su propia linea y abajo quedan pista y cifras, que es donde esta el dato. */
  .aud-tramos { --pista-izq: 0px; --pista-der: 74px; }
  .aud-tramo {
    grid-template-columns: 1fr var(--pista-der);
    grid-template-areas: "rotulo rotulo" "pista cifras";
    row-gap: .3rem;
    padding: .65rem 0;
  }
  .aud-tramo-rotulo { grid-area: rotulo; padding-right: 0; font-size: .8rem; }
  .aud-pista { grid-area: pista; }
  .aud-par { grid-area: cifras; font-size: .74rem; gap: .4rem; }
  .aud-eje { margin: 0 var(--pista-der) .5rem 0; }
  .aud-tramo-vacio { grid-area: pista; }
  .aud-selector-fila { flex-wrap: wrap; }
  .aud-select { max-width: 100%; }
}

/* La frase de lectura del bloque "Como se lee": es la clave del grafico, asi que
   pesa un poco mas que la prosa que la rodea. */
.aud-lectura {
  font-size: 1.05rem;
  color: #ffffff;
}


/* El titulo de una seccion de datos se alinea con SUS datos, no con la prosa. Sin esto
   su filete terminaba 170px antes que la tabla que encabeza y parecia recortado. */
.aud-h2--datos { max-width: none; }

/* ===================== Partidos (bloque 7) =====================
   Mismos nombres de clase que el panel interno, otro tema. No se importa su CSS: esta
   todo bajo .corpus-dash con una paleta que este archivo no define, y las dos pantallas
   hablan a lectores distintos a proposito. */

/* El breakout va SOLO en la lista, igual que en el bloque de la curva: ahi tampoco lo
   lleva `.aud-mercados` sino `.aud-curva-wrap` y compania (:87-95). Si se lo pusieramos
   a la seccion entera, el parrafo de la intro —que es PROSA— se estiraria a 900 mientras
   el resto del texto de la pagina mide 700, que es exactamente el "un solo borde para la
   prosa" que declara el comentario de .aud-container. Y ponerlo en las dos se cancela:
   margin-left 50% del padre menos translateX 50% del propio ancho da cero, un no-op que
   se rompe solo el dia que los anchos dejen de coincidir. */
/* El principio va primero y con peso: es el motivo por el que esta seccion existe, no
   una nota al pie. Un poco mas grande que la nota tecnica que le sigue. */
.aud-partidos-principio {
  font-size: 1rem;
  line-height: 1.7;
  color: #c3c8d2;
  margin: 0 0 1.1rem;
}
.aud-partidos-principio strong { color: #fff; }

/* El desplegable respira: pegado al parrafo, el boton se leia como parte del texto. */
.aud-partidos-detalle {
  margin-top: 1.9rem;
}

.aud-partidos-boton {
  /* Sin el marcador nativo: el chevron propio queda a la derecha, alineado con el de las
     fichas, en vez del triangulito a la izquierda que Safari y Chrome dibujan distinto. */
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(420px, 100%);
  margin: 0 auto;
  padding: 13px 18px;
  background: rgba(52, 211, 153, .08);
  border: 1px solid rgba(52, 211, 153, .32);
  border-radius: 10px;
  color: #34D399;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.aud-partidos-boton::-webkit-details-marker { display: none; }
.aud-partidos-boton:hover {
  background: rgba(52, 211, 153, .14);
  border-color: rgba(52, 211, 153, .5);
}
.aud-partidos-boton:focus-visible {
  outline: 2px solid #34D399;
  outline-offset: 2px;
}

/* El rotulo cambia solo con el estado del <details>: sin JS, sin tocar el DOM. */
.aud-partidos-boton [data-abierto] { display: none; }
.aud-partidos-detalle[open] .aud-partidos-boton [data-cerrado] { display: none; }
.aud-partidos-detalle[open] .aud-partidos-boton [data-abierto] { display: inline; }

.aud-boton-chev { font-size: .7rem; transition: transform .2s; }
.aud-partidos-detalle[open] .aud-boton-chev { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .aud-partidos-boton,
  .aud-boton-chev { transition: none; }
}

.aud-partidos-lista {
  width: min(900px, 100vw - 2.5rem);
  margin-left: 50%;
  transform: translateX(-50%);
  /* Separa la lista del boton que la abrio: sin esto la primera ficha nace pegada. */
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aud-partidos .fx {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px;
  overflow: hidden;
}
.aud-partidos .fx.open { border-color: rgba(255, 255, 255, .16); }

.aud-partidos .fx-head {
  width: 100%; display: grid;
  /* CINCO pistas para cinco hijos: fx-st, fx-teams, fx-meta, fx-score, fx-chev. Con
     cuatro, el chevron cae a una fila implicita y las 40 cabeceras van al doble de alto
     —y no se nota en 390px, donde el media query esconde .fx-meta. */
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 12px;
  background: none; border: none; color: #d7dae0; text-align: left;
  padding: 13px 15px; cursor: pointer; font: inherit;
}
.aud-partidos .fx-head:hover { background: rgba(255, 255, 255, .025); }
.aud-partidos .fx-head:focus-visible { outline: 2px solid #34D399; outline-offset: -2px; }

.aud-partidos .fx-st { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #34D399; box-shadow: 0 0 8px rgba(52, 211, 153, .5); }
.aud-partidos .fx-teams { font-size: .9rem; font-weight: 600; min-width: 0; }
.aud-partidos .fx-teams em { color: #6b7280; font-style: normal; font-weight: 400;
  margin: 0 5px; font-size: .8rem; }
.aud-partidos .fx-meta { font-size: .68rem; color: #6b7280; white-space: nowrap; }
.aud-partidos .fx-score { font-variant-numeric: tabular-nums; font-size: 1rem;
  font-weight: 700; min-width: 40px; text-align: right; }
.aud-partidos .fx-chev { color: #6b7280; transition: transform .2s; font-size: .65rem; }
.aud-partidos .fx.open .fx-chev { transform: rotate(180deg); }

.aud-partidos .fx-body { display: none; border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 14px 15px; background: rgba(0, 0, 0, .13); }
.aud-partidos .fx.open .fx-body { display: block; }

.aud-partidos .fx-legend { font-size: .78rem; color: #a7acb6; line-height: 1.55;
  margin: 0 0 14px; padding: 9px 11px; background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; }
.aud-partidos .real-chip { background: rgba(52, 211, 153, .18); color: #34D399;
  padding: 0 4px; border-radius: 4px; }

.aud-partidos .fam { margin-bottom: 16px; }
.aud-partidos .fam:last-child { margin-bottom: 0; }
.aud-partidos .fam-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: .8rem; font-weight: 600; color: #fff; margin-bottom: 8px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.aud-partidos .fam-h small { color: #6b7280; font-weight: 400; font-size: .84em; }
.aud-partidos .fam-real { margin-left: auto; font-size: .72rem; color: #34D399;
  background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .25);
  padding: 2px 8px; border-radius: 6px; }

.aud-partidos .fx-1x2 { font-size: .82rem; color: #a7acb6; margin-bottom: 9px; }
.aud-partidos .fx-1x2 .fav { color: #ffd54a; font-weight: 700; }

.aud-partidos table.ou { width: 100%; border-collapse: collapse; font-size: .8rem; }
.aud-partidos table.ou th { text-align: right; font-size: .6rem; letter-spacing: .08em;
  text-transform: uppercase; color: #6b7280; font-weight: 600; padding: 2px 8px 5px; }
.aud-partidos table.ou th:first-child { text-align: left; }
.aud-partidos table.ou td { padding: 5px 8px; border-top: 1px solid rgba(255,255,255,.045);
  font-variant-numeric: tabular-nums; text-align: right; color: #a7acb6; }
.aud-partidos table.ou td.ol { text-align: left; color: #fff; }
.aud-partidos table.ou td.real { color: #34D399; font-weight: 700;
  background: rgba(52, 211, 153, .1); }

.aud-partidos .otros { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.aud-partidos .otro { display: flex; justify-content: space-between; gap: 8px;
  font-size: .78rem; padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .04); border-radius: 4px; }
.aud-partidos .otro.got { background: rgba(52, 211, 153, .10); }
.aud-partidos .otro.miss { background: rgba(248, 113, 113, .07); }
.aud-partidos .otro .ol { color: #a7acb6; }
.aud-partidos .otro.got .ol { color: #fff; }

.aud-partidos .hit { display: inline-block; font-size: .6rem; font-weight: 700;
  padding: 1px 5px; border-radius: 5px; margin-left: 7px; vertical-align: middle; }
.aud-partidos .hit.y { background: rgba(52, 211, 153, .16); color: #34D399; }
.aud-partidos .hit.n { background: rgba(248, 113, 113, .16); color: #f87171; }

.aud-partidos .fx-wait { color: #6b7280; font-size: .78rem; font-style: italic;
  line-height: 1.5; margin: 4px 0 0; }

@media (max-width: 620px) {
  .aud-partidos .otros { grid-template-columns: 1fr; }
  .aud-partidos .fx-meta { display: none; }
  .aud-partidos .fx-teams { white-space: normal; line-height: 1.32; }
}