/*
 * Dominicanos en Grandes Ligas — mockup theme (Fase 0)
 * Sober, data-forward, responsive. Built on Bootstrap 5.
 * NOTE: this becomes the seed for the Django base template styles.
 */

:root {
  --dgl-navy: #0b1f3a;      /* top bar / footer */
  --dgl-navy-2: #12294b;
  /* UN solo rojo en todo el sitio, el de la bandera: monograma, tab activo, kickers, disco del valor.
     Hubo un segundo tono más oscuro (#a50e1e) para el tab y para el disco, elegido por contraste.
     Convivían a un palmo uno del otro y esa diferencia no se lee como una decisión, se lee como un
     descuido — que fue exactamente como la vio el dueño, dos veces.
     El contraste no lo justificaba: #ce1126 con blanco da 5,6:1 y el AA de la WCAG pide 4,5:1. */
  --dgl-red: #ce1126;
  --dgl-blue: #1f4e9b;      /* accent / links */
  --dgl-ink: #1a1d21;       /* body text */
  --dgl-muted: #6b7280;
  --dgl-line: #e5e7eb;
  --dgl-bg: #f6f7f9;
  --dgl-card: #ffffff;
  /* El alto de TODA tarjeta de artículo, en toda página. Es una variable y no un número suelto
     porque hay dos cosas que tienen que seguirlo para que la cuadrícula no se desarme: el panel de
     «Lo más reciente», que mide dos tarjetas, y el hueco publicitario que acompaña al destacado en
     la portada. Cambiarlo acá los mueve a los tres a la vez. */
  --dgl-art-alto: 300px;
  /* El canalón entre el destacado y la retícula (`g-4` de Bootstrap). También lo necesita el panel
     para su cuenta, así que se nombra en vez de repetir 1.5rem en dos sitios que deben coincidir. */
  --dgl-art-hueco: 1.5rem;
  /* Resaltados de las tablas: fondos pastel, matices distintos pero coordinados (un barrido de
     matiz con luminosidad y saturación parejas — el truco de una paleta coolors), con texto en
     tinta oscura. Suaves porque son claros, no lavados. Azul → menta → verde: distintos de verdad
     pero de la misma familia. Contraste con --lead-ink en negrita: 11.2 / 12.7 / 13.0 : 1
     (computados). Un solo lugar para tocarlos. */
  --lead-career: #b0d5e8;
  --lead-season: #b0e8d3;
  --lead-best: #cce8b0;
  --lead-ink: #1a1a1a;
}

body {
  /* En columna y de alto de pantalla como mínimo, para que `.dgl-cuerpo` pueda empujar el pie hacia
     abajo en las páginas cortas. `dvh` y no `vh` por el móvil: `vh` cuenta la barra del navegador
     como si nunca se recogiera, y deja el pie un poco más abajo del borde real. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--dgl-bg);
  color: var(--dgl-ink);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

a { color: var(--dgl-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Top bar / nav ---------- */
/* `flex-shrink: 0` porque ahora el cuerpo es un contenedor flex: sin esto, una página muy larga
   podría comprimir la barra en vez de dejarla a su alto natural. */
.dgl-topbar { background: var(--dgl-navy); flex-shrink: 0; }
/* ---------- La marca ---------- */
/* Dos piezas que funcionan juntas y por separado: el monograma es la marca corta —favicon, móvil,
   avatar— y el nombre es la larga.

   Sustituye al nombre en una sola línea, que medía 325px de los 1140 de la barra y obligaba a dos
   media queries para caber en móvil. Esta mide 164px en cualquier ancho y esas dos reglas ya no
   existen: el problema que resolvían era el tamaño del texto, y el texto dejó de ser el problema. */
.dgl-marca { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.dgl-marca:hover, .dgl-marca:focus { text-decoration: none; }

/* El monograma. En el rojo de la bandera y no en el azul: la barra ya es azul marino, así que uno
   azul se perdería dentro de ella.
   «DGL» no se inventa acá — es como se llama el proyecto por dentro desde el primer día
   (`dgl_master`, `dgl_leader`, `dglweb`). */
.dgl-marca-mono {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: .5rem;
  background: var(--dgl-red); color: #fff;
  font-weight: 800; font-size: .95rem; letter-spacing: -.02em;
}

/* El nombre lleva la jerarquía que el nombre pide: lo que define al sitio es «dominicanos», no «en
   Grandes Ligas». En una sola línea las cuatro palabras pesaban igual y ninguna lideraba. */
.dgl-marca-nombre { display: block; line-height: 1.05; }
.dgl-marca-nombre b {
  display: block; color: #fff; font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em;
}
/* La bajada también en blanco. La jerarquía la siguen dando el cuerpo, el grosor y el espaciado —no
   hace falta apagarla de color, y en gris azulado se leía como un texto secundario en vez de como
   parte del nombre. */
.dgl-marca-nombre span {
  display: block; color: #fff; font-weight: 500; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; margin-top: .18rem;
}
/* Sobre fondo claro el nombre invierte; el monograma no cambia, que es lo que lo hace reconocible
   fuera del sitio. */
.dgl-marca-clara .dgl-marca-nombre b,
.dgl-marca-clara .dgl-marca-nombre span { color: var(--dgl-ink); }
.dgl-topbar .form-control { background: #0e2646; border-color: #23406e; color: #fff; }
.dgl-topbar .form-control::placeholder { color: #8ea6c8; }
.dgl-navlink { color: #cdd8ea !important; font-weight: 600; font-size: .9rem; }
/* El nav aclara al pasar el ratón, y nada más. El subrayado se lo mete la regla global `a:hover` de
   este archivo: sobre una barra de menú lo lee como si cada ítem fuera un enlace suelto de texto,
   cuando lo que corresponde es que el resalte sea el color. */
.dgl-navlink:hover, .dgl-navlink:focus, .dgl-navlink.active { color: #fff !important; text-decoration: none; }

/* ---------- Cintillo / live ticker ---------- */
.dgl-ticker {
  background: var(--dgl-navy-2);
  border-top: 1px solid #1c3a5e; border-bottom: 2px solid var(--dgl-red);
  color: #e8eef7; font-size: .84rem; overflow: hidden; white-space: nowrap;
}
.dgl-ticker .dot { color: var(--dgl-red); }
.dgl-ticker b { color: #fff; }
.dgl-live-badge {
  background: var(--dgl-red); color: #fff; font-weight: 700; font-size: .68rem;
  letter-spacing: .1em; padding: .15rem .45rem; border-radius: 3px;
}

/* ---------- Page title (h1) ---------- */
.dgl-page-title {
  font-weight: 800; font-size: 3rem; line-height: 1.05; letter-spacing: -.03em;
  color: var(--dgl-ink); margin-bottom: .4rem;
}
@media (max-width: 575px) { .dgl-page-title { font-size: 2.1rem; } }

/* ---------- Section titles ---------- */
.dgl-section-title {
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em;
  border-left: 4px solid var(--dgl-red); padding-left: .6rem; margin-bottom: 1rem;
}

/* ---------- Cards / articles ---------- */
.card { border-color: var(--dgl-line); }
.dgl-hero { overflow: hidden; }
/* La imagen del destacado de la portada, por debajo del texto que la acompaña: lo que vende el
   artículo es el titular y la entradilla, no un rectángulo azul con una etiqueta. A 260px se comía
   el 53% de la tarjeta; a 190 baja al 45% y el texto pasa a mandar. */
.dgl-hero .dgl-thumb { height: 190px; }
.dgl-thumb {
  background: linear-gradient(135deg, var(--dgl-navy), var(--dgl-blue));
  color: #cfe0ff; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
}
.dgl-kicker { color: var(--dgl-red); font-weight: 700; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; }
.dgl-article-title { font-weight: 750; letter-spacing: -.01em; color: var(--dgl-ink); }
a.dgl-article-title:hover { color: var(--dgl-blue); text-decoration: none; }
.dgl-meta { color: var(--dgl-muted); font-size: .8rem; }
.dgl-tag {
  display: inline-block; background: #eef1f6; color: var(--dgl-blue);
  font-size: .72rem; font-weight: 600; padding: .1rem .4rem; border-radius: 3px;
}

/* ---------- Scoreboard (pizarra) ---------- */
.dgl-panel { background: var(--dgl-card); border: 1px solid var(--dgl-line); border-radius: .5rem; }
.dgl-game { border-bottom: 1px solid var(--dgl-line); }
.dgl-game:last-child { border-bottom: 0; }
.dgl-game .team { font-weight: 600; }
.dgl-game .score { font-weight: 800; font-variant-numeric: tabular-nums; }
.dgl-dom { color: var(--dgl-blue); font-weight: 700; }  /* dominican highlight */
.dgl-final { color: var(--dgl-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
/* El banner de juegos: una tira horizontal, ayer y hoy, con flechas a los dos lados.
   `position: relative` porque el panel del hover se cuelga de acá — dentro de la tira quedaría
   recortado, ya que un contenedor con scroll horizontal no deja asomar nada por debajo. */
.dgl-banner { position: relative; background: var(--dgl-card); border-bottom: 1px solid var(--dgl-line); }
.dgl-tira {
  display: flex; align-items: stretch; overflow-x: auto;
  scrollbar-width: none;  /* la barra sobra: para eso están las flechas */
}
/* Sin `scroll-behavior: smooth` acá a propósito: en CSS aplica a TODO desplazamiento programático,
   así que la tira se veía irse sola hacia la derecha al cargar y después de cada refresco. Las
   flechas piden la animación una por una, que es donde sí se quiere. */
.dgl-tira::-webkit-scrollbar { display: none; }

/* La fecha que separa un día del otro. Se queda pegada al borde al desplazar, para que nunca se
   pierda de vista a qué jornada pertenece lo que se está mirando. */
.dgl-fecha {
  position: sticky; left: 0; z-index: 2; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 3.2rem; padding: .5rem .4rem; background: var(--dgl-navy); color: #fff;
  font-size: .62rem; letter-spacing: .08em; line-height: 1.1;
}
.dgl-fecha b { font-size: 1rem; font-weight: 800; }
.dgl-fecha-hoy { background: var(--dgl-red); }

/* El ancho mínimo lo pide la línea de estado —«Alta del 7» más la banderita—, no los dos lados, que
   con sus cuatro piezas caben en menos. A 10,5rem sobraba un hueco entre el código del equipo y su
   marca, porque el `margin-left: auto` del récord reparte ahí todo lo que no se usa. */
.dgl-juego {
  flex: 0 0 auto; min-width: 9rem; padding: .45rem .7rem;
  border-left: 1px solid var(--dgl-line);
}
/* Es un control: el cursor lo dice, y el fondo responde igual al ratón, al foco y a estar abierta —
   las tres son la misma cosa vista desde tres dispositivos distintos. */
.dgl-con-detalle { cursor: pointer; }
.dgl-con-detalle:hover,
.dgl-con-detalle:focus-visible,
.dgl-con-detalle.is-abierta { background: #f7f9fc; }
/* El anillo por dentro: la tarjeta está dentro de una tira con `overflow-x`, y un `outline` normal
   se recortaría contra el borde al llegar tabulando a la última visible. */
.dgl-con-detalle:focus-visible { outline: 2px solid var(--dgl-blue); outline-offset: -2px; }
.dgl-juego-estado {
  display: flex; align-items: center; gap: .3rem;
  color: var(--dgl-muted); font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: .2rem;
}
/* La bandera va al final de la línea de estado, con un filo tenue para que el blanco de la cruz no
   se confunda con el fondo de la tarjeta. */
.dgl-bandera { margin-left: auto; flex: 0 0 auto; border: 1px solid var(--dgl-line); border-radius: 1px; }
.dgl-lado { display: flex; align-items: center; gap: .35rem; line-height: 1.5; color: var(--dgl-muted); }
/* El que ganó en tinta plena y el que perdió apagado: es la jerarquía que hace legible una tira de
   quince juegos sin leer los números. */
.dgl-ganador { color: var(--dgl-ink); }
.dgl-logo { flex: 0 0 auto; }
.dgl-lado .team { font-weight: 700; font-size: .8rem; min-width: 2.2rem; }
.dgl-lado .dgl-record { font-size: .62rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.dgl-lado .score { font-weight: 800; font-size: .9rem; min-width: 1.2rem; text-align: right;
  font-variant-numeric: tabular-nums; }

.dgl-flecha {
  position: absolute; top: 0; bottom: 0; z-index: 3; width: 1.6rem; padding: 0;
  border: 0; border-left: 1px solid var(--dgl-line); background: var(--dgl-card);
  color: var(--dgl-muted); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.dgl-flecha:hover { color: var(--dgl-ink); background: #f0f3f8; }
.dgl-flecha[disabled] { opacity: .25; cursor: default; }
.dgl-flecha-izq { left: 0; border-left: 0; border-right: 1px solid var(--dgl-line); }
.dgl-flecha-der { right: 0; }

/* El panel que baja al pasar el mouse por un juego terminado.
   En gris y no en blanco: la tira también es blanca, así que el panel se despegaba solo por su filo
   y su sombra. Es el mismo gris que usan las cajas de los widgets de abajo. */
.dgl-detalle {
  position: absolute; top: 100%; z-index: 20; min-width: 15rem; max-width: 22rem;
  background: var(--dgl-bg); border: 1px solid var(--dgl-line); border-top: 0;
  border-radius: 0 0 .4rem .4rem; box-shadow: 0 6px 18px rgb(0 0 0 / .12); padding: .5rem .7rem;
}
.dgl-detalle-equipo {
  display: flex; align-items: center; gap: .35rem; margin: .35rem 0 .2rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--dgl-muted);
}
.dgl-detalle-equipo:first-child { margin-top: 0; }
.dgl-detalle-jugador { display: flex; justify-content: space-between; gap: .8rem; padding: .1rem 0; }
.dgl-detalle-jugador a { font-size: .8rem; font-weight: 600; color: var(--dgl-ink); }
.dgl-detalle-jugador a:hover { color: var(--dgl-blue); }
.dgl-detalle-jugador .line {
  color: var(--dgl-blue); font-size: .75rem; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Un juego en curso tiene que distinguirse de uno terminado de un vistazo; el rojo es el acento del
   sitio y acá dice «esto está pasando ahora». */
.dgl-vivo { color: var(--dgl-red); font-weight: 700; }

/* ---------- Videos de jugadas ---------- */
/* El televisorcito que abre el video. Discreto hasta que se le pasa por encima: acompaña a la línea
   de estadísticas, no compite con ella. */
.dgl-video {
  display: inline-flex; align-items: center; vertical-align: -.2em;
  border: 0; background: none; padding: 0; margin-left: .35rem; cursor: pointer;
  color: var(--dgl-red); line-height: 0; opacity: .7;
}
.dgl-video:hover, .dgl-video:focus-visible { opacity: 1; }

.dgl-modal {
  position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center;
  background: rgb(0 0 0 / .75); padding: 1rem;
}
.dgl-modal[hidden] { display: none; }  /* `hidden` solo no gana contra `display: flex` */
.dgl-modal-caja { width: min(56rem, 100%); background: #000; border-radius: .5rem; overflow: hidden; }
.dgl-modal-barra {
  display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem;
  background: var(--dgl-navy); color: #fff;
}
.dgl-modal-titulo { font-size: .85rem; font-weight: 600; flex: 1 1 auto; }
.dgl-modal-cerrar {
  border: 0; background: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .25rem;
}
.dgl-modal-video { display: block; width: 100%; max-height: 78vh; background: #000; }
/* Con la ventana abierta la página de atrás no se mueve: si no, la rueda del mouse hace scroll del
   sitio mientras uno cree estar mirando el video. */
.dgl-sin-scroll { overflow: hidden; }

/* ---------- Destacados de la jornada ---------- */
/* Mismas cajas que el widget de líderes de al lado: las dos mitades de la franja tienen que rimar.
   Lo que cambia es lo de adentro — acá la noticia es la línea del día, no un puesto en un ranking. */
/* Los mismos tres números que el widget de líderes, y con los mismos valores: las cajas de las dos
   mitades tienen que medir igual, y eso solo se sostiene si el alto sale de la misma cuenta. */
.dgl-destacados { --pieza: 34px; --caja: 3.9rem; --hueco: .5rem; }
.dgl-destacados-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: var(--caja); align-content: start; gap: var(--hueco);
}
/* La caja es una fila: logo, retrato y una columna de dos renglones. El alto lo marca el retrato,
   igual que en el top 10 — por eso las dos miden lo mismo sin fijarlo a mano. */
.dgl-destacado-caja {
  display: flex; align-items: center; gap: .45rem;
  border: 1px solid #dfe3e9; border-radius: .5rem; padding: .4rem .6rem;
  background: var(--dgl-bg);
}
.dgl-destacado-quien { flex: 1 1 auto; min-width: 0; }
.dgl-destacado-logo { flex: 0 0 auto; }
/* Blanco bajo el recorte transparente: le da al retrato su propio disco, que es lo que lo separa del
   gris de la caja cuando el pelotero tiene el pelo oscuro. */
.dgl-destacado-foto {
  flex: 0 0 var(--pieza); width: var(--pieza); height: var(--pieza);
  border-radius: 50%; background: var(--dgl-card);
}
/* El nombre enlaza al perfil pero se lee como texto: en azul, cinco enlaces seguidos convierten el
   panel en una lista de links y el dato —que es la línea— pasa a segundo plano. */
/* El video y el nombre en una fila: el icono abre y el nombre se recorta si hace falta. `min-width:0`
   en los dos porque un hijo flex no baja de su ancho de contenido sin él, y sin eso el nombre
   empujaría al icono fuera de la caja en vez de recortarse. */
.dgl-destacado-nombre { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.dgl-destacado-quien .nombre {
  min-width: 0; font-weight: 700; font-size: .84rem; color: var(--dgl-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dgl-destacado-quien .nombre:hover { color: var(--dgl-blue); text-decoration: none; }
/* Justo debajo del nombre. `tabular-nums` para que los «3-4» de dos cajas distintas queden en la
   misma vertical. */
.dgl-destacado-linea {
  display: block; color: var(--dgl-blue); font-weight: 600; font-size: .78rem;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dgl-group-label { color: var(--dgl-muted); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Leaders widget ---------- */
.dgl-leader { font-variant-numeric: tabular-nums; }
.dgl-leader .rank { color: var(--dgl-muted); width: 1.2rem; display: inline-block; }
.dgl-leader .val { font-weight: 800; }

/* ---------- Ad slots ---------- */
.dgl-ad {
  background: repeating-linear-gradient(45deg, #eef0f3, #eef0f3 10px, #e7eaee 10px, #e7eaee 20px);
  border: 1px dashed #c7ccd3; color: #97a0ab; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; display: flex; align-items: center; justify-content: center;
  border-radius: .4rem;
}
.dgl-ad-leader { height: 90px; }
.dgl-ad-rect { height: 250px; }
/* El que acompaña al artículo destacado: se estira a lo que mida su fila —con `h-100`— en vez de
   quedarse en 250px y dejar un hueco al lado del artículo. El mínimo es el 300×250 de siempre, que
   es lo que ocupa cuando la columna se apila en móvil y ya no tiene fila que igualar. */
.dgl-ad-alto { min-height: 250px; }
/* El que cierra la página: `margin-top: auto` se come el espacio que sobre y lo deja pegado al pie,
   en vez de dejarlo colgando debajo de una tabla corta con un vacío por delante. */
.dgl-ad-pie { margin-top: auto; }

/* ---------- Article prose (readable serif body) ---------- */
.dgl-prose {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.15rem; line-height: 1.72; color: #24272c; letter-spacing: 0;
}
.dgl-prose p { margin-bottom: 1.15rem; }
.dgl-prose h2 {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 800; font-size: 1.25rem;
  letter-spacing: -.02em; margin: 2rem 0 .9rem;
}
.dgl-prose a { color: var(--dgl-blue); font-weight: 600; }
.dgl-lead { font-size: 1.28rem; line-height: 1.55; color: #3a3f47; }
.dgl-pullquote {
  border-left: 4px solid var(--dgl-red); padding: .2rem 0 .2rem 1.1rem; margin: 1.6rem 0;
  font-style: italic; font-size: 1.25rem; color: #2a2e34;
}
/* embedded blocks (StreamField vibe): captions stay monospace */
.dgl-embed { border: 1px solid var(--dgl-line); border-radius: .5rem; overflow: hidden; margin: 1.6rem 0; }
.dgl-embed-cap {
  background: #f3f5f8; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem;
  color: var(--dgl-muted); padding: .45rem .8rem; letter-spacing: .04em; text-transform: uppercase;
}
.dgl-stats-table { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .82rem;
  font-variant-numeric: tabular-nums; }
/* Encabezados en el azul del header y el footer: en una tabla larga son la única referencia de qué
   es cada columna, y en gris sobre blanco se perdían entre las filas. El separador se aclara porque
   el gris de Bootstrap desaparece sobre el navy. */
.dgl-stats-table th {
  background: var(--dgl-navy); color: #fff; font-weight: 700;
  border-right-color: rgba(255, 255, 255, .18);
}
.dgl-stats-table thead th:last-child { border-right: 0; }
/* Numbers right-aligned (tabular). The first column stays left because on the totals tables it is a
   label ("BOS (14 temporadas)", "Liga AL", "Ronda") that reads badly centred. */
.dgl-stats-table th, .dgl-stats-table td { text-align: right; }
.dgl-stats-table th:first-child, .dgl-stats-table td:first-child { text-align: left; }
/* Centred columns — Temporada, Equipo, Rd: short labels, not numbers. Declared last so it wins the
   specificity tie against the :first-child rule above. */
.dgl-stats-table th.dgl-mid, .dgl-stats-table td.dgl-mid { text-align: center; }
/* Column separators. Bootstrap already draws the row separator with these two variables, so reusing
   them (instead of a hard-coded 1px) keeps both directions identical if the theme ever changes it.
   With a grid on both axes a highlighted cell reads as a framed block instead of bleeding into its
   neighbours. The last column is skipped so it does not double up with the table's own edge. */
.dgl-stats-table th, .dgl-stats-table td {
  border-right: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
}
.dgl-stats-table th:last-child, .dgl-stats-table td:last-child { border-right: 0; }
/* Highlights (pastel cell background + dark bold ink): azul = career leader, menta = season leader,
   verde = the player's own career-high. Distinct hues, one coordinated family.
   Base rules also style the legend swatches (plain <span>). */
.lead-career { background: var(--lead-career); color: var(--lead-ink); font-weight: 800; }
.lead-season { background: var(--lead-season); color: var(--lead-ink); font-weight: 800; }
.lead-best   { background: var(--lead-best); color: var(--lead-ink); font-weight: 800; }
/* Inside a Bootstrap table the cell's own background + the .table-striped inset box-shadow both
   sit above .lead-* — beat the specificity and kill the stripe shadow so the fill shows. */
.dgl-stats-table td.lead-career,
.dgl-stats-table td.lead-season,
.dgl-stats-table td.lead-best { color: var(--lead-ink); font-weight: 800; box-shadow: none; }
/* Una celda que es líder de temporada Y su mejor marca. El fondo (claro) se lo queda el liderazgo,
   y encima va itálica + un recuadro oscuro de 1px que la enmarca dentro de su categoría (no es una
   cuarta categoría, es "esta celda además es su récord"). El recuadro va por un canal que no es el
   tono, así que también funciona para quien no distingue colores.
   `inset` para no ensanchar la celda ni empujar la rejilla, y calificado con `.dgl-stats-table td`
   y declarado DESPUÉS del `box-shadow: none` del rayado (misma propiedad, misma especificidad → gana
   el último). Ahí quedó borrándose la vez pasada. */
.lead-personal { font-style: italic; }
.dgl-stats-table td.lead-personal { box-shadow: inset 0 0 0 1px var(--lead-ink); }
/* Puestos: banda divisoria (Estándar, Avanzado, Sabermetría, Coeficientes). La tabla es larga y con
   el rayado las secciones se perdían; una fila completa en navy —el mismo tono del borde de "De por
   vida"— las separa de un vistazo. `box-shadow:none` vence el inset del rayado; `border-right:0` para
   que la banda sea continua y no la corten los separadores de columna. */
/* El encabezado de Puestos se repite en cada división, así que va dentro del <tbody> y hay que
   devolverle a mano lo que Bootstrap le da al <thead>: sin fondo propio se lo comía el rayado, y sin
   el color apagado competía con los datos en vez de rotularlos. */
/* Y al pie de su celda, no al tope: «De por vida» no cabe en una línea y parte en dos, así que la
   fila mide el doble de lo que miden los años. Arriba, los años quedaban flotando sobre un hueco y
   despegados de la columna que rotulan; abajo se apoyan en la primera fila de datos, que es contra
   la que se leen. */
.dgl-stats-table tr.dgl-puestos-head > th { box-shadow: none; vertical-align: bottom; }
.dgl-stats-table td.dgl-div-band {
  background: var(--dgl-navy); color: #fff; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: .74rem; box-shadow: none; border-right: 0; text-align: left;
}
.dgl-stats-table td.lead-career { background-color: var(--lead-career); }
.dgl-stats-table td.lead-season { background-color: var(--lead-season); }
.dgl-stats-table td.lead-best   { background-color: var(--lead-best); }

/* ---------- Player page ---------- */
.dgl-player-hero {
  background: linear-gradient(135deg, var(--dgl-navy), var(--dgl-navy-2));
  color: #fff; border-radius: .6rem;
}
/* El retrato, a la izquierda del nombre. Redondo y sobre un disco del azul del hero, igual que en el
   widget de líderes: los PNG de MLB vienen recortados con fondo transparente, así que sin disco el
   pelotero quedaría flotando sobre el degradado. `flex: 0 0 auto` para que no lo achique el nombre
   largo que tiene al lado. Ocupaba este sitio el cuadro de iniciales, que ya no existe. */
.dgl-retrato {
  flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; background: #1c3a5e;
}
@media (max-width: 575px) { .dgl-retrato { width: 72px; height: 72px; } }
/* El bloque del nombre y la bio, entre el retrato y los statboxes.
   `flex-basis: 0` y no el `auto` que traía —era un `.flex-grow-1` de Bootstrap— porque la fila
   envuelve: con base automática el navegador reparte en líneas usando el ANCHO NATURAL de cada
   pieza, y el de este bloque es 511px. Retrato + bloque + statboxes daban 1.107 contra 1.068 de
   ancho útil, así que los statboxes caían a una segunda línea y el hero crecía de 135px a 217px.
   Con base 0 el bloque no pide nada al repartir, todo entra en una línea, y después se estira con
   el espacio que sobra. `min-width: 0` para que la bio pueda partirse en vez de desbordar. */
.dgl-hero-quien { flex: 1 1 0; min-width: 0; }
.dgl-badge-rd {
  background: var(--dgl-red); color: #fff; font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; padding: .14rem .45rem; border-radius: 3px;
}
.dgl-player-hero .k { font-size: .68rem; color: #9db4d6; text-transform: uppercase; letter-spacing: .08em; }
.dgl-statbox .v { font-size: 1.35rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
/* La sigla de cada cifra en un cuadrito rojo. El hero es un bloque azul con cifras blancas y todo lo
   demás en el mismo gris azulado; el rojo de la bandera es lo único que lo despierta. Va en la SIGLA
   y no en la cifra a propósito: marca sin quitarle la lectura al número, que es el dato.
   `inline-block` para que el cuadro mida lo que mide la sigla —«H» y «WHIP» no ocupan igual— y no
   todo el ancho de la columna. Gana al `.dgl-player-hero .k` de arriba por venir después: misma
   especificidad, y de ahí conserva el tamaño, las mayúsculas y el espaciado. */
.dgl-statbox .k {
  display: inline-block; background: var(--dgl-red); color: #fff; font-weight: 700;
  padding: .08rem .4rem; border-radius: 3px; margin-top: .2rem;
}

/* ---------- Leaders / leaderboards ---------- */
/* El puesto en la tabla de líderes. Va sobre un <td>, así que NO lleva `display:inline-block` ni un
   ancho fijo: eso encajonaba el número en 1.6rem al borde izquierdo de una columna ancha y dejaba el
   resto de la celda en blanco. El ancho se fija en la columna (th) y el número se centra. */
.dgl-rank { color: var(--dgl-muted); }
.dgl-leaders-table .dgl-rank-col { width: 3rem; }
.dgl-lead-name { font-weight: 700; }
.dgl-lead-val { font-weight: 800; font-variant-numeric: tabular-nums; }
/* El inactivo va en la tinta del sitio, igual que los pills: en gris se leía como deshabilitado
   cuando en realidad es a donde hay que hacer clic. */
.nav-tabs .nav-link { font-weight: 700; color: var(--dgl-ink); font-size: .9rem; }
/* El tab activo va en bloque, no en subrayado: con seis pestañas el borde inferior costaba de
   ubicar.

   En el MISMO rojo del monograma de la marca y no en el profundo. Eran dos rojos a un palmo uno del
   otro —#ce1126 arriba y #a50e1e aquí— y esa diferencia no se lee como una decisión, se lee como un
   descuido. Contra blanco da 5,6:1, que sigue cumpliendo el AA de la WCAG. */
.nav-tabs .nav-link.active {
  background-color: var(--dgl-red); color: #fff;
  border-color: var(--dgl-red) var(--dgl-red) transparent;
}
.nav-tabs .nav-link.active:hover { color: #fff; }
/* La línea de la barra: el gris de Bootstrap es tan claro que los tabs flotaban sueltos en vez de
   apoyarse sobre algo. Más oscura, la fila entera se lee como una barra de pestañas. */
.nav-tabs { border-bottom-color: #9aa3ae; }
/* Los controles de Líderes son <a> (navegan por GET), no <button> como en el perfil, así que el
   `a:hover { text-decoration: underline }` global les pintaba un subrayado de link que en el perfil
   no aparece. Se quita para que tabs y pills se vean idénticos en ambas páginas. */
.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover { text-decoration: none; }
/* Pills de las tablas (Estándar / Avanzado / Statcast…). Bootstrap los trae en su azul primario,
   tanto el texto como el fondo del activo. Acá el texto va en la tinta del sitio y el activo toma
   el MISMO azul del topbar y el footer, para que el elemento seleccionado se lea como parte de la
   identidad y no como un color suelto de framework.
   site.css carga después de Bootstrap, así que a igual especificidad estas ganan. */
.nav-pills .nav-link { color: var(--dgl-ink); font-weight: 700; }
.nav-pills .nav-link:hover { color: var(--dgl-navy); }
.nav-pills .nav-link.active { background-color: var(--dgl-navy); color: #fff; font-weight: 800; }

.dgl-pill {
  background: #eef1f6; color: var(--dgl-blue); border: 1px solid var(--dgl-line);
  border-radius: 20px; padding: .22rem .8rem; font-size: .78rem; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.dgl-pill:hover { border-color: var(--dgl-blue); }
.dgl-pill.active { background: var(--dgl-navy); color: #fff; border-color: var(--dgl-navy); }
.dgl-seg .dgl-pill.active { background: var(--dgl-red); border-color: var(--dgl-red); }

/* ---------- Footer ---------- */
/* Crece para llenar lo que sobre de pantalla. `0 auto` en la base para que una tabla ancha no
   encoja el contenido en vez de sacar su propia barra de desplazamiento. Y en columna, para que
   `.dgl-ad-pie` pueda irse al fondo de ese espacio sobrante. */
.dgl-cuerpo { flex: 1 0 auto; display: flex; flex-direction: column; }
.dgl-footer { background: var(--dgl-navy); color: #b9c6db; flex-shrink: 0; }
.dgl-footer a { color: #cdd8ea; }
.dgl-footer h6 { color: #fff; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; }

/* ---------- Search results (typeahead mock) ---------- */
.dgl-search-wrap { position: relative; }
.dgl-search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: #fff;
  border: 1px solid var(--dgl-line); border-radius: 0 0 .4rem .4rem; box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.dgl-search-results a { display: block; padding: .5rem .75rem; color: var(--dgl-ink); border-bottom: 1px solid #f0f2f5; }
.dgl-search-results a:hover { background: #f3f6fb; text-decoration: none; }
.dgl-search-results small { color: var(--dgl-muted); }

/* ---------- Página de líderes (/lideres/) ---------- */
.dgl-control-label { font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--dgl-muted); margin-bottom: .25rem; display: block; }
/* Una tabla de 3 columnas (posición, jugador, valor) no debe estirarse a toda la página. Cuando hay
   dos tablas en paralelo (Primeros y Últimos) el contenedor se ensancha para las dos. */
.dgl-leaders-board { max-width: 32rem; }
.dgl-leaders-board.dgl-leaders-board-split { max-width: 62rem; }
/* El rótulo de cada tabla. Va FUERA del panel: adentro competía con los headers de la tabla y se
   leía como una fila más. En la tinta del sitio, no en el gris de los metadatos, porque distingue
   dos tablas que a simple vista son idénticas. */
.dgl-leaders-caption {
  color: var(--dgl-ink); font-weight: 800; font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: .35rem;
}
/* Jugador activo: fondo de la fila (un color del overlay de líderes) — se nota más que un asterisco.
   Gana el rayado (box-shadow del striping) igual que las celdas de liderazgo. */
.dgl-leaders-table tr.dgl-leader-active > td { background-color: var(--lead-season); box-shadow: none; }
.dgl-active-swatch { display: inline-block; width: 1.4rem; height: .85rem; vertical-align: middle;
  background: var(--lead-season); border: 1px solid var(--dgl-line); border-radius: 3px; }
/* Total incompleto: el jugador ya jugaba antes de que la métrica se registrara (los batazos y
   coeficientes arrancan en 1989). En rojo para que no se confunda con el resto del nombre. */
.dgl-partial { color: var(--dgl-red); font-weight: 800; }
/* Entradilla de una página de sección: explica qué es y cómo se usa, antes de los controles. Serif
   como el cuerpo de los artículos —es prosa, no dato— pero más chica que .dgl-prose, que está hecha
   para leerse de corrido y acá solo son dos párrafos de contexto. */
.dgl-lede {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.02rem; line-height: 1.6; color: var(--dgl-ink);
}
.dgl-lede p { margin-bottom: .6rem; }
/* Señal de carga entre un clic y la página nueva. El velo va casi transparente a propósito: la tabla
   vieja se sigue leyendo, así que se entiende que está por cambiar y no que desapareció. */
.dgl-loading { position: fixed; inset: 0; z-index: 1080; display: none; background: rgba(255,255,255,.5); }
.dgl-loading.is-on { display: grid; place-items: center; }
.dgl-spinner {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 3px solid var(--dgl-line); border-top-color: var(--dgl-navy);
  animation: dgl-spin .7s linear infinite;
}
@keyframes dgl-spin { to { transform: rotate(360deg); } }
/* Quien pide menos movimiento igual necesita saber que algo pasa: se frena, no se apaga. */
@media (prefers-reduced-motion: reduce) { .dgl-spinner { animation-duration: 2.4s; } }
/* La columna de nombre no es un número: fuente del cuerpo, alineada a la izquierda; el valor va en
   la mono de la tabla. Sin negrita: cuando TODAS las filas la llevan no resalta nada, solo pesa. */
.dgl-leaders-table thead th:nth-child(2) { text-align: left; }
.dgl-leaders-table td.dgl-leader-name { text-align: left; font-family: var(--bs-body-font-family, system-ui, sans-serif); }
.dgl-leaders-table td.dgl-leader-name a { color: var(--dgl-ink); }
.dgl-leaders-table td.dgl-leader-name a:hover { color: var(--dgl-blue); }

/* Un "enlace" que no navega. La fila de totales salta al pill de desglose, en la MISMA página, así
   que es una acción y no un destino: le corresponde <button>. Como <a href="#"> engañaba a todos a la
   vez — el lector de pantalla lo anunciaba como enlace, el teclado prometía navegación, y abrirlo en
   otra pestaña no hacía nada. Se ve igual que antes: era un enlace chico y sigue siéndolo. */
.dgl-linkbtn {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 400;
  color: var(--dgl-blue); text-decoration: none; cursor: pointer;
}
.dgl-linkbtn:hover { text-decoration: underline; }

/* --- Índice de jugadores: buscador con sugerencias ------------------------------------------ */
/* El desplegable se dibuja sobre el contenido y no lo empuja: si la página saltara al aparecer la
   lista, el usuario perdería de vista lo que estaba mirando cada vez que escribe una letra. */
.dgl-buscador { max-width: 34rem; }
.dgl-sugerencias {
  position: absolute; z-index: 20; left: 0; right: 0; margin: .15rem 0 0; padding: 0;
  list-style: none; background: #fff; border: 1px solid #c9d2dd; border-radius: .375rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12); max-height: 20rem; overflow-y: auto;
}
.dgl-sugerencias li {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .4rem .7rem; cursor: pointer;
}
.dgl-sugerencias li + li { border-top: 1px solid #eef1f5; }
/* Un solo estilo para el ratón y para las flechas: el teclado no puede ser ciudadano de segunda. */
.dgl-sugerencias li:hover, .dgl-sugerencias li.activo { background: #eef3fa; }
.dgl-sugerencias .nombre { font-weight: 600; }

/* Las dos listas largas van en columnas: 132 nombres en una sola columna obligan a un scroll que no
   aporta nada, y el ojo los recorre mejor en bloques. */
.dgl-resultados, .dgl-activos { columns: 4; column-gap: 1.5rem; }
.dgl-resultados li, .dgl-activos li { break-inside: avoid; padding: .12rem 0; }
.dgl-resultados .dgl-meta, .dgl-activos .dgl-meta { margin-left: .4rem; }
/* Menos columnas a medida que se estrecha: a cuatro, un nombre largo con su posición al lado
   —«Fernando Tatis Jr. SS»— no cabe por debajo de los 1200px y parte en dos líneas. */
@media (max-width: 1199px) { .dgl-resultados, .dgl-activos { columns: 3; } }
@media (max-width: 991px) { .dgl-resultados, .dgl-activos { columns: 2; } }
@media (max-width: 767px) { .dgl-resultados, .dgl-activos { columns: 1; } }

/* El asterisco del debutante. Mismo tratamiento visual que `.dgl-partial` pero con nombre propio:
   allá marca un dato incompleto y acá una noticia, y mezclar los dos significados en una sola clase
   haría que cambiar uno moviera el otro sin querer. */
.dgl-debut { color: var(--dgl-red); font-weight: 800; }

/* --- El buscador del header ------------------------------------------------------------------ */
/* Fondo gris para que se despegue del azul marino de la barra. Un input blanco desaparecía contra
   los bloques claros de la página al hacer scroll, y uno transparente ni se veía como campo. */
.dgl-topbar .dgl-buscador-header {
  background: #e6eaf0;
  border-color: #b8c2cf;
  color: var(--dgl-ink);
}
.dgl-topbar .dgl-buscador-header::placeholder { color: #6b7684; opacity: 1; }
/* Al enfocar se aclara en vez de cambiar de color: el foco tiene que notarse sin que el campo
   parezca otro. El halo es el azul del sitio, no el celeste por defecto de Bootstrap. */
.dgl-topbar .dgl-buscador-header:focus {
  background: #fff;
  border-color: var(--dgl-blue);
  box-shadow: 0 0 0 .2rem rgba(31, 78, 155, .25);
}
/* El desplegable del header cuelga de la barra, así que va por encima de todo lo demás. `z-index`
   más alto que el del índice porque acá compite con el propio navbar. */
.dgl-topbar .dgl-sugerencias { z-index: 1030; min-width: 20rem; }

/* La fila de «y N más» del desplegable. Se distingue de un jugador —cursiva y separada por una línea
   más marcada— porque no es una opción de la lista sino la salida hacia la lista completa. */
.dgl-sugerencias .dgl-sugerencias-mas {
  justify-content: center; font-style: italic; color: var(--dgl-blue);
  border-top: 2px solid #dfe5ed; background: #f7f9fc;
}

/* ---------- Widget: dominicanos en el top de las mayores ---------- */
/* El lado de las cuatro piezas de una fila —la sigla, la foto y los dos discos— en un solo lugar:
   son un cuarteto y tienen que medir igual. A dos columnas se achican, porque lo que sobra después
   de ellas es lo que le queda al nombre del pelotero, y «Junior Caminero» necesita ese espacio. */
/* `--caja` es el alto de UNA caja y `--hueco` la separación entre ellas. De esos dos números sale el
   alto del widget entero —tres filas y el enlace— y por eso están juntos: cambiar el tamaño de las
   piezas sin ajustar `--caja` dejaría la última fila cortada. */
.dgl-lideres { --pieza: 40px; --caja: 4.3rem; --hueco: .5rem; }
@media (min-width: 992px) { .dgl-lideres { --pieza: 34px; --caja: 3.9rem; } }
/* Las pestañas son `.dgl-pill`, el mismo control redondeado del perfil y de Líderes. Acá solo se
   ajusta la separación; el aspecto viene de allá para que un pill se vea igual en todo el sitio. */
.dgl-pestanas { display: flex; gap: .4rem; }

/* Una caja por categoría. Se lee sola —qué estadística, quién la encabeza, cuánto— y por eso tiene
   marco propio en vez de ser un renglón más de una lista. */
/* La caja en el gris del sitio y no en blanco: el panel que la contiene YA es blanco, y caja blanca
   sobre panel blanco solo se distinguía por un filo de un píxel. Con el gris hay tres capas que se
   despegan: panel blanco -> caja gris -> discos blancos. */
.dgl-lider-caja {
  border: 1px solid #dfe3e9; border-radius: .5rem; padding: .55rem .7rem;
  background: var(--dgl-bg);
}
/* Dos columnas cuando hay ancho, una sola cuando no. `auto-fill` con un mínimo y no un número fijo
   de columnas: el widget vive en media pantalla en escritorio y en el ancho completo en móvil, y así
   el corte lo decide el espacio real y no un breakpoint adivinado.
   El mínimo son 250px porque por debajo el nombre del pelotero queda en dos o tres letras y puntos
   suspensivos, que es peor que una sola columna. */
/* Filas de alto fijo: una caja con enlace de «ver más» tiene más contenido que una sin él, y dejadas
   a su aire hacían que cada fila midiera distinto y que el widget entero cambiara de alto según la
   pestaña. `align-content: start` para que las filas no se estiren a repartirse el marco. */
.dgl-lideres-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: var(--caja); align-content: start; gap: var(--hueco);
}
/* Una lista oculta no debe ocupar sitio: `d-none` es `display:none !important`, pero el grid de la
   regla de arriba tiene la misma especificidad y sin el !important de Bootstrap ganaría el último.
   Se deja explícito para no depender del orden. */
.dgl-lideres-lista.d-none { display: none; }
/* Abierta se marca con el filo, no con un fondo: el fondo competiría con las fotos, que son lo que
   la caja quiere que se mire. */
.dgl-lider-caja.is-abierta { border-color: var(--dgl-blue); }


.dgl-lider { display: flex; align-items: center; gap: .45rem; padding: .3rem 0; }
/* El separador entre jugadores de una misma caja, un punto más oscuro que el borde general: sobre el
   gris de la caja, `--dgl-line` casi no se veía. */
.dgl-lider + .dgl-lider { border-top: 1px solid #dfe3e9; }
/* Blanco bajo el recorte transparente: le da al retrato su propio disco, que es lo que lo separa del
   gris de la caja. Sin fondo, un pelo oscuro se derretiría contra el fondo. */
.dgl-lider-foto { flex: 0 0 var(--pieza); width: var(--pieza); height: var(--pieza); border-radius: 50%; background: var(--dgl-card); }
.dgl-lider-quien { flex: 1 1 auto; min-width: 0; }
/* A cuerpo pleno: los nombres vienen ya abreviados desde Python —«F. Tatis Jr.»— así que caben sin
   tener que achicar la letra. */
.dgl-lider-quien .nombre {
  display: block; font-weight: 700; font-size: .84rem; color: var(--dgl-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dgl-lider-quien .nombre:hover { color: var(--dgl-blue); text-decoration: none; }
/* La sigla en un cuadrado del alto de la foto, abriendo la fila. Cuadrado y no redondo a propósito:
   es la única pieza que no es una persona ni una cifra, y la forma distinta lo dice sin leerla. */
.dgl-lider-sigla {
  flex: 0 0 var(--pieza); height: var(--pieza); display: flex; align-items: center; justify-content: center;
  border-radius: .35rem; background: var(--dgl-navy); color: #fff;
  font-size: .78rem; font-weight: 800; letter-spacing: .02em;
}
/* En las filas que se ven al desplegar, el cuadrado se reserva pero no se pinta: la categoría ya la
   dijo la fila de arriba, y repetirla cuatro veces dentro de la misma caja es ruido. El hueco se
   queda para que las fotos sigan alineadas en la misma vertical. */
.dgl-lider-extra .dgl-lider-sigla { visibility: hidden; }

/* El equipo y el «ver más» en una línea propia bajo el nombre, para que el nombre pueda usar todo el
   ancho antes de recortarse con puntos suspensivos. */
.dgl-lider-donde { display: flex; align-items: center; gap: .4rem; margin-top: .1rem; }
.dgl-lider-logo { flex: 0 0 auto; }

/* El puesto y la cifra en discos del tamaño de la foto: los cuatro elementos de la fila quedan a la
   misma altura, y bajando la vista por las cajas se forma una retícula de columnas. */
.dgl-lider-disco {
  flex: 0 0 var(--pieza); height: var(--pieza); display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-variant-numeric: tabular-nums; line-height: 1;
}
.dgl-lider-disco.puesto { background: var(--dgl-card); border: 1px solid #dfe3e9; font-size: .7rem; }
/* El «#» chico y en gris para que el número mande: lo que se compara entre cajas es el 1 o el 8. */
.dgl-lider-disco.puesto::before { content: "#"; font-size: .62rem; color: var(--dgl-muted); }
.dgl-lider-disco.puesto b { font-size: 1rem; font-weight: 800; }
/* La cifra en relleno, que es el dato final de la fila. Un punto por debajo del puesto y con el
   interletraje apretado: el puesto son una o dos cifras y el valor puede ser «.328», cuatro
   caracteres que a igual cuerpo se salían del disco. */
.dgl-lider-disco.valor {
  background: var(--dgl-red); color: #fff; font-size: .82rem; font-weight: 800;
  letter-spacing: -.05em;
}

/* Pegado al equipo del que encabeza la categoría, no al pie de la caja: ahí se lee como lo que es,
   una acción sobre ESTA categoría y no sobre la lista entera. */
.dgl-lider-mas {
  padding: 0; background: none; border: 0; font: inherit; font-size: .68rem;
  letter-spacing: .02em; color: var(--dgl-blue); cursor: pointer; white-space: nowrap;
}
.dgl-lider-mas:hover { text-decoration: underline; }
.dgl-lider-mas:focus-visible { outline: 2px solid var(--dgl-blue); outline-offset: 2px; }

/* --- Las dos capas que flotan, para que nada empuje lo que hay debajo --- */
/* La caja es el ancla de su propia capa. */
.dgl-lider-caja { position: relative; }
/* Abierta se levanta por encima de sus vecinas y se funde con la capa: el borde de abajo se va y las
   esquinas inferiores se enderezan, así las dos piezas se leen como una sola. */
.dgl-lider-caja.is-abierta {
  z-index: 21; border-color: var(--dgl-blue); border-bottom-color: transparent;
  border-radius: .5rem .5rem 0 0;
}
/* Cuelga del borde inferior, un píxel afuera a cada lado para que los bordes se alineen con los de
   la caja en vez de quedar metidos hacia adentro. */
.dgl-lider-extra {
  position: absolute; top: 100%; left: -1px; right: -1px; z-index: 20;
  background: var(--dgl-bg); border: 1px solid var(--dgl-blue); border-top: 0;
  border-radius: 0 0 .5rem .5rem; padding: 0 .7rem .4rem;
  box-shadow: 0 14px 28px rgba(11, 31, 58, .22);
}

/* El marco mide exactamente tres filas, siempre. Es un alto fijo y no el de su contenido para que el
   widget no cambie de tamaño entre pestañas: bateo tiene catorce categorías y pitcheo cinco, y a lo
   que dé el contenido, saltarían de sitio los artículos de abajo al cambiar de pestaña.
   Sin `overflow: hidden` a propósito: recortaría las capas flotantes de las cajas de la última fila.
   Lo que sobra lo esconde `.dgl-fila-de-mas`. */
.dgl-lideres-marco {
  position: relative;
  height: calc(3 * var(--caja) + 2 * var(--hueco));
}
.dgl-fila-de-mas { display: none; }
.dgl-lideres-lista.is-flotante {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  background: var(--dgl-card); border: 1px solid var(--dgl-line); border-radius: .5rem;
  padding: .5rem; box-shadow: 0 16px 36px rgba(11, 31, 58, .24);
  /* Diecinueve categorías no caben en ninguna pantalla: pasado ese alto, la capa se desplaza sola en
     vez de crecer fuera de la ventana. */
  max-height: 70vh; overflow-y: auto;
}

/* Siempre ocupa su sitio, aunque no haya nada más que enseñar: si desapareciera, el widget mediría
   distinto en la pestaña que lo lleva y en la que no. Se apaga con `visibility` y no con `d-none`. */
/* `line-height` fijo y no heredado: es lo que garantiza que el botón mida igual diga «ver 9 más» o
   no diga nada, y por tanto que el widget no cambie de alto al saltar de pestaña. */
.dgl-lideres-mas {
  display: block; width: 100%; margin-top: .5rem; padding: .3rem; background: none;
  border: 0; font: inherit; font-size: .72rem; line-height: 1.4;
  color: var(--dgl-blue); cursor: pointer;
}
.dgl-lideres-mas:hover { text-decoration: underline; }
/* Un control que sobra hoy pero puede hacer falta mañana: se apaga sin quitarse, para que el widget
   mida igual con él y sin él. Los dos de la franja están uno al lado del otro y cualquier diferencia
   de alto los desalinea. Vale para el «ver N más» y para la fila de pestañas. */
.esta-de-mas { visibility: hidden; }

/* La etiqueta del abridor probable, donde iría la línea de un juego ya jugado. En gris y no en el
   azul del dato: no es una estadística, es lo único que se sabe todavía. */
.dgl-abridor {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dgl-muted);
}

/* El h1 cuando comparte fila con un widget: a 3rem y con su margen de siempre, la columna crecía
   hasta doblar el alto del panel de al lado. */
.dgl-titulo-junto { font-size: 2.2rem; margin-bottom: .5rem; }

/* El anuncio lateral se queda a la vista mientras se baja por un tablero largo. `top` con aire para
   que no quede pegado al borde de la ventana. */
.dgl-ad-pegado { position: sticky; top: 1rem; }

/* Rascacielos: el formato que corresponde al hueco alto y estrecho de la derecha. Ancho fijo y
   pegado al borde —`margin-left: auto`— en vez de ocupar toda la columna: un anuncio estirado hasta
   los 470px de la columna no es ningún formato que exista. */
.dgl-ad-torre { width: 300px; max-width: 100%; height: 600px; margin-left: auto; }

/* Banner chico, para el hueco corto que queda al lado de unas pestañas. Ancho fijo y pegado a la
   derecha: estirado a la columna entera pesaba más que las pestañas, que son el control de la
   página. `max-width` para que en móvil se encoja en vez de desbordar. */
.dgl-ad-banner { width: 468px; max-width: 100%; height: 60px; margin-left: auto; }

/* Tres filas exactas, el mismo cálculo que el marco del top 10: los dos widgets comparten `--caja` y
   `--hueco`, así que la cuenta da igual en ambos y los paneles miden lo mismo por su cuenta, sin
   depender de que la fila los estire.
   Con `overflow: hidden` —al revés que en líderes— porque acá no hay capas flotantes que recortar:
   los destacados no se despliegan. Es lo que garantiza que una jornada larga no lo haga crecer. */
.dgl-destacados-marco {
  height: calc(3 * var(--caja) + 2 * var(--hueco));
  overflow: hidden;
}

/* El anuncio que se queda a la vista mientras se baja y aterriza sobre el pie de página al llegar al
   final. Con fondo propio porque, al flotar sobre el contenido, sin él se leería el texto por debajo
   del patrón rayado.

   Nombre propio y NO `.dgl-ad-pie`, que ya existe y significa otra cosa —«vete al fondo del espacio
   que sobre»— y se usa en el perfil y en líderes sobre un `.container`. Ponerle a esa clase un fondo
   blanco pintaba los márgenes del contenedor, que son más anchos que el anuncio, y dejaba dos
   franjas blancas a los lados. */
.dgl-ad-pegajoso { position: sticky; bottom: .75rem; background-color: var(--dgl-card); }

/* ---------- Índice de artículos ---------- */
/* La tarjeta. Sin sombra y con un filo tenue: son doce en pantalla, y doce sombras convierten la
   lista en un relieve. El realce llega al pasar el mouse. */
/* ALTO FIJO, EL MISMO PARA TODAS Y EN TODAS LAS PÁGINAS. Decisión del dueño y la razón es la
   simetría: con tarjetas que crecen con su contenido, un titular de seis líneas estira su fila y la
   retícula queda a saltos — una tarjeta enorme al lado de una diminuta. Con 300px, la página se lee
   como una cuadrícula pase lo que pase, y la limitante la asume quien escribe: si el titular no cabe
   en dos líneas, hay que acortarlo. Es la misma medida del espacio publicitario que acompaña al
   destacado en la portada, así que los dos casan sin más cuentas.

   Antes era `height: 100%`, que igualaba las tarjetas DENTRO de una fila pero no entre filas, y
   obligaba al destacado a llevar su propia excepción para no estirarse a la columna entera. */
.dgl-art {
  display: flex; flex-direction: column; height: var(--dgl-art-alto);
  background: var(--dgl-card); border: 1px solid var(--dgl-line); border-radius: .5rem;
  overflow: hidden; transition: border-color .15s, transform .15s;
}
.dgl-art:hover { border-color: var(--dgl-blue); transform: translateY(-2px); }
/* `1 1 auto` y no `1 0 auto`: con `flex-shrink: 0` el cuerpo no bajaba de su ancho de contenido, así
   que en la tarjeta horizontal el título estiraba la caja a 1261px dentro de una tarjeta de 736 y el
   texto quedaba recortado por el `overflow: hidden`. `min-width: 0` por lo mismo — un hijo flex no
   se encoge por debajo de su contenido sin él. */
.dgl-art .cuerpo {
  padding: .7rem .9rem .7rem; display: flex; flex-direction: column;
  flex: 1 1 auto; min-width: 0; overflow: hidden;
}
/* Recortado a TRES líneas, con puntos suspensivos en la línea justa en vez de tajar a media palabra.
   Es la otra mitad del alto fijo: sin esto un titular largo desborda los 300px y se lo come el
   `overflow`, que corta a media altura de las letras y se ve como un error de dibujo.

   Eran dos hasta el 2026-07-28, y las subió el dueño al ver un titular partido con puntos
   suspensivos teniendo la tarjeta medio vacía debajo. Medido antes de cambiarlo, en el peor caso
   —tarjeta CON banda de imagen, entradilla de dos líneas, etiquetas y meta— el contenido no desborda
   ni en la retícula ni en el destacado: la banda es de alto fijo (65px, 70 en el destacado) y no
   crece con el ancho, así que el margen es el mismo en todas. Con dos líneas sobraban entre 109 y
   167px; la tercera cuesta 20 en la chica y 29 en el destacado.

   La cuarta ya no cabe, y tampoco convendría: un titular que no entra en tres líneas es un titular
   que hay que acortar, no una tarjeta que hay que agrandar.

   `flex-shrink: 0` es la parte que no se ve venir: `.pie` lleva `margin-top: auto` para quedar
   pegado abajo, y cuando el contenido no deja espacio libre el flex se cobra la diferencia
   ENCOGIENDO a sus hermanos — la entradilla pasaba de 48px a 40 y la segunda línea aparecía cortada
   por la mitad. No era el recorte fallando, era el flex apretando. */
.dgl-art h3 {
  font-size: .95rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.3; margin: .3rem 0 .45rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden; flex-shrink: 0;
}
.dgl-art h3 a { color: var(--dgl-ink); }
.dgl-art h3 a:hover { color: var(--dgl-blue); text-decoration: none; }
/* La entradilla en serif, como el cuerpo del artículo: adelanta cómo se va a leer adentro. */
.dgl-art .entradilla {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: .9rem; line-height: 1.5; color: #4b5563; margin-bottom: .6rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; flex-shrink: 0;
}
/* La meta pegada abajo, para que las tarjetas de una fila la alineen aunque los títulos midan
   distinto. */
.dgl-art .pie { margin-top: auto; }
.dgl-art-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }

/* El destacado: la MISMA tarjeta y el mismo alto, solo con el titular y la entradilla más grandes.
   Se distingue de la retícula por la letra y por lo ancho, no por medir distinto — que es lo que
   pedía la simetría.

   Apilado, NUNCA con la imagen al lado del texto: la banda arriba y el texto debajo, a todo el
   ancho. Antes esto era `flex-direction: row` con la imagen ocupando un tercio. */
.dgl-art-destacado h3 { font-size: 1.5rem; line-height: 1.2; }
.dgl-art-destacado .entradilla { font-size: 1rem; }

/* Las categorías. El aspecto es el de `.nav-pills`, el mismo control de Líderes y del perfil; lo
   único que añade esta clase es que la fila se deslice en móvil en vez de apilarse en tres
   renglones. Por eso acá NO hay colores ni tamaños: los pone la regla común, y duplicarlos sería
   garantizar que dentro de un mes no coincidan. */
.dgl-cats { overflow-x: auto; padding-bottom: .3rem; scrollbar-width: none; }
.dgl-cats::-webkit-scrollbar { display: none; }
.dgl-cats .nav-item { flex: 0 0 auto; }
.dgl-cats .nav-link { white-space: nowrap; }

/* «Lo más leído»: un ranking numerado y no más tarjetas — repetir el mismo componente a la derecha
   haría que la página entera se leyera como una sola lista larga. */
.dgl-top { counter-reset: leidos; }
.dgl-top li { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--dgl-line); }
.dgl-top li:last-child { border-bottom: 0; }
.dgl-top li::before {
  counter-increment: leidos; content: counter(leidos);
  font-weight: 800; font-size: 1.1rem; color: #cbd2dc; line-height: 1;
}
.dgl-top a { color: var(--dgl-ink); font-size: .82rem; font-weight: 650; line-height: 1.35; }
.dgl-top a:hover { color: var(--dgl-blue); text-decoration: none; }

/* El plato del menú. Se alinea con el texto de sus vecinos y se aclara igual que ellos al pasar el
   ratón, porque hereda `currentColor`. */
.dgl-navhome { display: inline-flex; align-items: center; }
.dgl-navhome svg { display: block; }

/* ---------- Artículos: la miniatura real ---------- */
/* `.dgl-thumb` era el rectángulo azul de los mockups, con el nombre del gráfico escrito dentro.
   Desde la Fase 5 hay imágenes de verdad, y esto es lo que ocupa su sitio: mismas medidas, mismo
   recorte. `object-fit: cover` porque Wagtail ya sirve el archivo recortado a la proporción pedida,
   pero un `fill-` puede quedar un píxel corto y sin esto la imagen se deforma para cuadrar. */
/* Una banda apaisada a todo el ancho, y a la MITAD de lo que medía: 130→65 en la retícula y 220→110
   en el destacado. Decisión del dueño, y la razón es buena — lo que vende un artículo es el titular,
   y una banda alta le comía el sitio al texto dentro de una tarjeta que mide lo que mide.

   `object-fit: cover` porque Wagtail ya sirve el archivo recortado a la proporción pedida, pero un
   `fill-` puede quedar un píxel corto y sin esto la imagen se deforma para cuadrar. */
.dgl-thumb-img { display: block; width: 100%; height: 65px; object-fit: cover; }
.dgl-art-destacado .dgl-thumb-img { height: 70px; }

/* ---------- Un artículo ---------- */
/* El ancho de la columna es la decisión de esta pantalla, y sale de dos fuerzas que tiran en contra.

   Por un lado, una línea muy larga se lee peor: al saltar de renglón el ojo pierde cuál venía. Por
   otro, una columna estrecha estira el artículo hacia abajo, y este sitio publica piezas con
   gráficos y tablas que en 620px quedaban apretadas y obligaban a hacer scroll sin parar — que es
   justo lo que pidió corregir el dueño.

   820px son unos 89 caracteres por línea con esta serif. Está por encima de los 75 de manual y por
   debajo del punto en que la lectura se rompe de verdad; y como el contenedor mide 1.320, la columna
   sigue sin ocupar la página entera.

   En píxeles y no en `ch` a propósito: `ch` se mide con la letra HEREDADA, que acá es la monoespaciada
   del sitio y no la serif del cuerpo. Los «72ch» que había antes no eran 72 caracteres de lo que se
   lee, eran 69 — una medida que parecía tipográfica y no lo era. */
.dgl-articulo { max-width: 820px; margin: 0 auto; }
.dgl-articulo .dgl-page-title { font-size: 2.4rem; }
a.dgl-kicker:hover { color: var(--dgl-red); text-decoration: underline; }
/* La entradilla en serif y más grande que el cuerpo: hace de puente entre el titular y el texto. */
.dgl-articulo-entradilla {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.15rem; line-height: 1.55; color: #374151; margin: .6rem 0 .8rem;
}
.dgl-articulo-foto img { width: 100%; height: auto; border-radius: .5rem; }
.dgl-articulo-cuerpo {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.08rem; line-height: 1.7; color: var(--dgl-ink);
}
.dgl-bloque-parrafo p { margin-bottom: 1.1rem; }
.dgl-bloque-parrafo a { color: var(--dgl-blue); text-decoration: underline; }
/* Los subtítulos vuelven a la tipografía del sitio: el serif es para leer seguido, y un rótulo que
   corta el texto se lee mejor con la letra de los rótulos. */
.dgl-bloque-titulo {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin: 2rem 0 .8rem;
}
.dgl-bloque-imagen { margin: 1.6rem 0; }
.dgl-bloque-imagen img { width: 100%; height: auto; border-radius: .5rem; }
.dgl-bloque-imagen figcaption {
  color: var(--dgl-muted); font-size: .82rem; margin-top: .5rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
/* La cita con una barra roja a la izquierda, como los títulos de sección: es el mismo gesto del
   sitio, así que la página no gana un elemento nuevo, reusa uno que el lector ya conoce. */
.dgl-bloque-cita {
  border-left: 4px solid var(--dgl-red); padding: .2rem 0 .2rem 1.1rem; margin: 1.6rem 0;
  font-size: 1.2rem; font-style: italic; color: #374151;
}
.dgl-bloque-cita p { margin-bottom: .4rem; }
.dgl-bloque-cita cite {
  display: block; font-style: normal; font-size: .82rem; color: var(--dgl-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.dgl-bloque-tabla { margin: 1.6rem 0; }
.dgl-bloque-tabla caption {
  caption-side: bottom; color: var(--dgl-muted); font-size: .8rem; padding-top: .4rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* La mención de jugador. Sale del ancho del texto hacia los dos lados —queda claro que no es un
   párrafo— pero sin llegar a ser una tarjeta suelta: es un apunte dentro del artículo. */
.dgl-bloque-jugador {
  display: flex; align-items: center; gap: .9rem; margin: 1.6rem 0; padding: .8rem 1rem;
  background: var(--dgl-card); border: 1px solid var(--dgl-line);
  border-left: 4px solid var(--dgl-blue); border-radius: .4rem;
}
.dgl-bloque-jugador-foto { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: #eef1f6; }
.dgl-bloque-jugador .nombre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700; font-size: .95rem; color: var(--dgl-ink);
}
.dgl-bloque-jugador .nombre:hover { color: var(--dgl-blue); text-decoration: none; }
.dgl-bloque-jugador .nota { font-size: .88rem; color: var(--dgl-muted); }

/* ---------- El gráfico ---------- */
/* Lo dibuja el servidor en SVG, sin librería ni JavaScript: ver `articles/blocks.py`. Todo el estilo
   vive acá y no en atributos del SVG, que es lo que permite cambiar el aspecto de todos los gráficos
   publicados sin volver a guardar un solo artículo.

   `height: auto` es imprescindible: un SVG en línea con `viewBox` toma el ancho del padre pero NO
   deduce el alto, así que sin esto se estira al alto por defecto de 150px o al que le dé el
   contenedor — y el dibujo sale con las proporciones destrozadas. */
.dgl-bloque-grafico { margin: 1.8rem 0; }
.dgl-bloque-grafico .titulo {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700; font-size: .9rem; margin-bottom: .5rem; color: var(--dgl-ink);
}
.dgl-bloque-grafico .fuente {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem; color: var(--dgl-muted); margin: .5rem 0 0;
}
.dgl-grafico { display: block; width: 100%; height: auto; overflow: visible; }
/* Las líneas de referencia, por debajo del dato. La del cero va más marcada: es la base contra la
   que se compara todo lo demás. */
.dgl-grafico .ref { stroke: var(--dgl-line); stroke-width: 1; }
.dgl-grafico .ref.cero { stroke: #9aa4b2; }
/* Las cifras del SVG no heredan el tamaño del CSS del documento: se declaran en unidades del
   `viewBox`, que es lo mismo que decir «relativas al dibujo». Por eso van en px y no en rem. */
.dgl-grafico .eje {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; fill: var(--dgl-muted);
}
.dgl-grafico .cifra {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; font-weight: 700; fill: var(--dgl-ink);
}
.dgl-grafico .barra { fill: var(--dgl-blue); }
/* La barra que baja del cero, en el rojo del sitio. El color no es adorno: en una métrica donde el
   cero es la media —OAA, DRS, run value— la diferencia entre estar por encima o por debajo es LA
   noticia, y pedirle al lector que la deduzca de a qué lado de una línea cae es pedirle de más. */
.dgl-grafico .barra.baja { fill: var(--dgl-red); }
.dgl-grafico .linea { stroke: var(--dgl-red); stroke-width: 2.5; stroke-linejoin: round; }
.dgl-grafico .punto { fill: var(--dgl-red); }
/* La primera columna cuando el editor la marca como encabezado. Va en <th> por accesibilidad —así un
   lector de pantalla dice «Juan Soto, HR, 41» en vez de leer números sueltos— pero SIN el azul del
   encabezado de arriba: una columna entera pintada de navy compite con la fila de títulos y la tabla
   pierde la jerarquía que ese color venía a marcar. */
.dgl-bloque-tabla tbody th {
  background: transparent; color: var(--dgl-ink); text-align: left; font-weight: 700;
}

/* La tarjeta de la portada ya no necesita reglas propias: el alto fijo, el recorte a dos lineas y
   el relleno viven en `.dgl-art`, que los aplica a TODAS las tarjetas del sitio. Quedo asi cuando el
   dueno pidio simetria — antes esto era la excepcion de una sola pantalla. */

/* El panel de «Lo más reciente», con alto FIJO: exactamente dos tarjetas más el canalón que las
   separa. Decisión del dueño y el motivo es la cuadrícula.

   Sin esto el panel medía lo que midiera su lista, el artículo de debajo empezaba a una altura
   cualquiera, y la columna derecha terminaba 107px más arriba que la izquierda: la página se leía
   como dos listas desalineadas en vez de una retícula. Con esta medida, ese artículo arranca a la
   misma altura que la segunda fila de la izquierda y las dos columnas cierran juntas.

   La cuenta se hace con las variables y no con un 624 escrito a mano: si mañana la tarjeta mide
   otra cosa, esto la sigue solo. `overflow: hidden` por si la lista trae diez titulares largos —
   antes que romper la rejilla, se corta. */
.dgl-panel-reciente {
  height: calc(var(--dgl-art-alto) * 2 + var(--dgl-art-hueco));
  overflow: hidden;
}

/* ---------- El cintillo de movimientos de roster ---------- */
/* Se desliza sin depender de JavaScript: una animación sobre la tira, que lleva la lista dos veces
   para que al terminar el ciclo empalme sin dejar ver el vacío del final.

   LA DURACIÓN DE ACÁ ES SOLO EL RESPALDO. Lo que tiene que quedar constante es la VELOCIDAD, y la
   tira mide lo que midan los movimientos que haya: con 25 entradas son unos 12.000px, y una duración
   fija de 90s daba 134px/s — hay que perseguir la frase con la vista, y así se publicó hasta que el
   dueño lo dijo. Pero en invierno, con tres movimientos, esos mismos 90s serían 27px/s y parecería
   colgada. Por eso  mide la tira y calcula duración = ancho / 55px por segundo. Si el
   script no carga, manda este valor: se mueve, se lee, y punto. */
/* Va dentro de un `.container`, así que mide lo que mide el bloque central y queda alineado con el
   menú de arriba y con el contenido de abajo. A todo el ancho de la pantalla se leía como una franja
   pegada al borde y no como parte de la página — lo pidió el dueño y tiene razón: es el único
   elemento del sitio que no respetaba esa columna.

   LAS CUATRO ESQUINAS REDONDEADAS, no solo las de abajo. Con `0 0 .4rem .4rem` el recorte del
   contenedor le llegaba al rótulo rojo y le redondeaba UNA esquina dejándole tres rectas — se veía
   como un error de dibujo, y lo era. Redondeando la tira entera, las dos esquinas visibles del
   rótulo quedan iguales.

   Y separada de la barra por arriba y por abajo: pegada al navy de la cabecera parecía una segunda
   barra de navegación en vez de una cintilla. */
.dgl-cintillo {
  display: flex; align-items: stretch; background: var(--dgl-navy-2);
  border-radius: .4rem; overflow: hidden; margin: .1rem 0 .5rem;
}
.dgl-cintillo-titulo {
  flex: 0 0 auto; background: var(--dgl-red); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  display: flex; align-items: center; padding: .35rem .8rem;
}
.dgl-cintillo-marco { flex: 1 1 auto; overflow: hidden; }
.dgl-cintillo-tira { display: flex; width: max-content; animation: dgl-cintillo 220s linear infinite; }
/* Se detiene al pasar el ratón Y al recibir el foco. Lo segundo faltaba: quien navega con teclado
   llegaba a un enlace que seguía moviéndose bajo el cursor de foco, o sea que para pulsarlo tenía
   que perseguirlo. `:focus-within` cubre el contenedor entero, así que basta con que el foco esté en
   cualquiera de los enlaces. */
.dgl-cintillo:hover .dgl-cintillo-tira,
.dgl-cintillo:focus-within .dgl-cintillo-tira { animation-play-state: paused; }
.dgl-cintillo-lista { display: flex; list-style: none; margin: 0; padding: 0; }
.dgl-cintillo-lista li {
  display: flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .35rem 1.1rem; font-size: .78rem; color: #cfe0ff;
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.dgl-cintillo-lista .cuando { color: #8ba6cf; font-weight: 700; font-size: .7rem; }
.dgl-cintillo-lista a { color: #fff; font-weight: 600; }
.dgl-cintillo-lista a:hover { color: #cfe0ff; text-decoration: underline; }
@keyframes dgl-cintillo { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Quien pidió menos movimiento en su sistema no ve nada moverse. Un texto que se desplaza sin parar
   es de lo que peor le sienta a quien tiene vértigo o problemas de atención — y acá encima hay que
   poder leerlo. Sin animación, la tira se queda quieta y se desplaza con el dedo o la rueda. */
@media (prefers-reduced-motion: reduce) {
  .dgl-cintillo-tira { animation: none; }
  .dgl-cintillo-marco { overflow-x: auto; }
}

/* La cabecera del índice: la entradilla a la izquierda y el buscador a la derecha, en la MISMA línea.
   Antes el buscador tenía su propia fila y empujaba las pestañas y la primera tarjeta un renglón
   entero hacia abajo sin decir nada nuevo.

   `flex-wrap` para que en móvil se apilen solos: en 375px no caben lado a lado sin dejar la caja tan
   estrecha que no se lea lo que se escribe. Y `margin-left: auto` en el formulario en vez de
   `justify-content: space-between`, porque el día que un índice no tenga entradilla la caja tiene
   que seguir pegada a la derecha y no saltar a la izquierda. */
.dgl-cabecera-articulos {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
}
.dgl-cabecera-articulos .dgl-lede { flex: 1 1 20rem; }
.dgl-buscar-articulos { display: flex; gap: .5rem; flex: 0 1 24rem; margin-left: auto; }
.dgl-buscar-articulos input { flex: 1 1 auto; }
.dgl-buscar-articulos button { flex: 0 0 auto; }

/* La paginación del índice. Enlaces de verdad, no un botón de JavaScript: ver el comentario de la
   plantilla. El contador va en medio para que se lea «‹ Anteriores · Página 2 de 4 · Siguientes ›»
   como una frase, y para que los dos botones no se peguen cuando falta uno de los dos. */
.dgl-paginacion { display: flex; align-items: center; justify-content: center; gap: 1rem; }

/* El crédito de la agencia en el pie. El logo se pinta como FONDO, no como `<img>`: si el archivo
   no está, un fondo ausente deja un hueco de 34px y nada más, mientras que un `<img>` roto pondría
   el icono de imagen partida en el pie de todas las páginas. Lleva su propio recuadro azul marino
   porque el logo viene con ese fondo y sobre el pie —del mismo azul— se funde sin costura.

   Sin subrayado y con el nombre en blanco para que no compita con los enlaces de las columnas de al
   lado, que sí son navegación. Esto es una firma, no un menú. */
.dgl-agencia {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit;
}
.dgl-agencia:hover { text-decoration: none; }
.dgl-agencia-logo {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
  background: #0f2447 url("../img/adcio-media.c632c4ea4bd9.png") center/contain no-repeat;
}
.dgl-agencia-txt { display: flex; flex-direction: column; line-height: 1.2; }
.dgl-agencia b { font-size: .9rem; color: #fff; }
.dgl-agencia-ig { font-size: .74rem; color: #8ea6c8; }
.dgl-agencia:hover .dgl-agencia-ig { color: #e8edf5; }

/* El copyright, solo en su renglón bajo el filete. Tuvo al lado la ficha de la agencia y esa franja
   costaba unos 60px de pie en todas las páginas; la ficha subió a ser la cuarta columna. */
.dgl-copyright { color: #8ea6c8; }

/* Las páginas legales. Reutilizan `.dgl-articulo` para el ancho de columna —el mismo problema de
   legibilidad— y esto solo añade lo que el texto largo de un documento necesita y un artículo no.

   El interlineado sube a 1.7: son párrafos densos, sin fotos ni gráficos que den respiro, y con el
   1.5 del cuerpo normal quedaban como un muro. */
/* En serif y no en la monoespaciada del sitio, por lo mismo que el cuerpo de un artículo: son
   párrafos para leer seguido, no rótulos. En mono, un documento de mil palabras se lee como un
   volcado de terminal — y estas páginas ya parten con toda la desventaja del mundo. */
.dgl-legal {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.05rem; line-height: 1.7; color: var(--dgl-ink);
}
/* Los titulillos SÍ vuelven a la mono, igual que los subtítulos de un artículo: lo que corta el
   texto se distingue mejor con la letra de los rótulos. */
.dgl-legal h2 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em;
  margin-top: 2.2rem; margin-bottom: .6rem;
}
.dgl-legal p { margin-bottom: 1rem; }
.dgl-legal a { color: var(--dgl-blue); text-decoration: underline; }
.dgl-legal ul { margin-bottom: 1rem; }
.dgl-legal li { margin-bottom: .4rem; }
/* El resumen de arriba: lo que se lleva quien no va a leer el resto, que son casi todos. Con el
   filete rojo del sitio, como los titulillos de los widgets. */
.dgl-legal-resumen {
  border-left: 3px solid var(--dgl-red); padding: .1rem 0 .1rem .9rem;
  font-size: 1.02rem; margin-bottom: 1.5rem;
}
.dgl-legal-hermanas { border-top: 1px solid #dde3ea; display: flex; gap: 1.5rem; font-size: .9rem; }

/* La «letra chica» del cuerpo de un artículo: fuentes, salvedades, créditos. La marca el editor
   desde la barra del texto enriquecido y se guarda como `<small>` — ver `articles/wagtail_hooks.py`.

   El tamaño se define acá y NO en la base: lo que se guarda es la etiqueta. Si mañana cambia el
   cuerpo del artículo, esto lo sigue solo en vez de obligar a reeditar los artículos viejos.

   0.84em y no menos: por debajo de ~14px reales el serif empieza a costar en pantalla, y una nota
   que no se lee no es una nota, es ruido. El gris tampoco baja más — el texto secundario también
   tiene que pasar el contraste. */
.dgl-articulo-cuerpo small {
  font-size: .84em; line-height: 1.5; color: #4b5563;
}

/* La celda cuyo dato la fuente entregó incompleto (SAB-03b). Hoy son los hits por tipo y los cuatro
   coeficientes de las siete temporadas de 1989-97 — ver `derive.UNDERTYPED_COLUMNS`.

   Antes esto solo se decía en el pie del panel. Correcto, pero obligaba a cruzar el año con los
   nombres de las columnas de memoria, y como la nota colgaba del panel entero se leía como si las
   doce columnas estuvieran flojas — cuando los cinco conteos de outs por tipo están completos.

   Subrayado punteado y no color: el color ya está tomado —vino es líder de temporada, azul de
   carrera— y una celda puede ser las dos cosas a la vez. El subrayado se suma sin pelearse. El
   `help` en el cursor y el `title` en la celda dan la explicación corta; la larga sigue en el pie. */
.dgl-stats-table td.dato-parcial {
  text-decoration: underline dotted #9aa5b1; text-underline-offset: 3px; cursor: help;
}

/* El «ver más» de los destacados. Las cajas de más existen en el HTML desde el principio —no las
   trae ningún fetch— así que desplegar es instantáneo y funciona igual si el JS tarda: sin él se ven
   las seis primeras, que es información correcta, solo que menos. */
.dgl-destacado-de-mas { display: none; }
.dgl-destacados.esta-desplegado .dgl-destacado-de-mas { display: flex; }
/* El marco recorta a seis con `overflow: hidden`; al desplegar tiene que soltar el alto o las cajas
   nuevas quedarían dibujadas fuera de la vista, que es el fallo que más cuesta descubrir porque el
   botón parece no hacer nada. */
.dgl-destacados.esta-desplegado .dgl-destacados-marco { height: auto; max-height: none; overflow: visible; }

/* De qué jornada viene una actuación, cuando no es la de arriba. El widget mezcla dos días para no
   quedarse hueco mientras los juegos de hoy van terminando.

   En gris y muy pequeña a propósito: es una aclaración, no un dato del pelotero. Si pesara lo mismo
   que el nombre, la vista iría primero a la fecha — que es lo menos importante de la fila. */
.dgl-destacado-cuando {
  font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: #6b7280;
  border: 1px solid #dde3ea; border-radius: .25rem; padding: 0 .25rem; white-space: nowrap;
}

/* La fecha de la jornada de referencia, al costado del título de destacados. Salió de dentro del
   título cuando el widget pasó a mezclar dos días: ahí afirmaba de todas las filas algo que solo
   valía para las de arriba. Como dato de contexto sigue haciendo falta —en el receso del Juego de
   Estrellas es lo único que dice que lo que se ve no es de hoy— pero en peso de nota al margen. */
.dgl-destacados-fecha {
  font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; white-space: nowrap;
}

/* PRUEBA (2026-07-27): el escudo del equipo entre la sigla y el retrato, no bajo el nombre.
   El hueco se reserva siempre —`flex: 0 0`— aunque no haya logo: si colapsara, una fila sin escudo
   correría el retrato y el nombre a la izquierda y las cajas dejarían de formar columnas. */
.dgl-lider-escudo {
  flex: 0 0 18px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
}

/* La columna de la temporada en curso, en la rejilla de Puestos. Un «#2» de este año y uno de 2015
   se leen igual y no valen lo mismo: el segundo está cerrado y el primero puede ser #7 el viernes.

   Un fondo tenue y no un color de texto: el color del texto ya lo usan las marcas de líder —vino de
   temporada, azul de carrera— y una celda puede ser líder Y de la temporada en curso a la vez. El
   fondo se pone debajo y no se pelea con ninguna.

   SOLO LAS CELDAS, NO EL ENCABEZADO. La primera versión pintaba también el `<th>`, que va sobre la
   barra azul marino: quedaba crema sobre marino con texto blanco encima, o sea el año casi ilegible
   —justo la columna que se quería destacar—. El encabezado se queda como los demás y la marca la
   lleva el asterisco. */
.dgl-stats-table td.dgl-en-curso {
  background: #fff7e6;
}
/* El asterisco del encabezado va sobre marino, así que no puede usar el rojo de `dgl-partial`, que
   está pensado para fondo claro. */
.dgl-puestos-head .dgl-en-curso-marca {
  color: #ffd166;
  font-weight: 700;
}