/*
 * 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;
}
/* EL ICONO DEL TÍTULO DE UN WIDGET (2026-07-31). Un emoji y no un SVG: son cuatro conceptos que el
   estándar ya dibuja —trofeo, fuego, hielo, marca— así que meter cuatro archivos al repositorio para
   redibujarlos sería trabajo y peso a cambio de nada.

   No es el mismo caso que la banderita de la pizarra, que SÍ es un SVG: Windows no trae los glifos de
   banderas y pintaba «DO» en su lugar. Estos cuatro los trae cualquier sistema.

   `font-size` propio y no heredado: los emoji se dibujan con una tipografía distinta de la del texto
   y a la misma medida se ven más grandes que la letra de al lado.

   `aria-hidden` va en el HTML. Sin él, un lector de pantalla anuncia «fuego Quemando la liga», que
   es ruido: el título ya dice lo que el icono repite. */
.dgl-widget-icono {
  font-size: .9em; margin-right: .35rem; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ---------- 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); }
/* EN MÓVIL LA FECHA SE PEGA DESPUÉS DE LA FLECHA, NO AL BORDE (2026-08-01).

   Ahí las flechas van una en cada punta, y la izquierda ocupa los mismos 34px donde la fecha se pega
   al desplazar. Con `z-index` 3 contra 2, la flecha ganaba: medido, tapaba 34 de los 51px de la
   etiqueta y en pantalla se veía media franja roja cortada.

   No se arregla subiéndole el `z-index` a la fecha — entonces la fecha taparía la flecha y el botón
   dejaría de poder pulsarse justo al principio de la tira, que es donde más se usa.

   La tira gana un relleno izquierdo del ancho de la flecha y la fecha se pega a `left: 0`, que en un
   contenedor con relleno es el borde de la CAJA DE RELLENO — o sea justo donde la flecha termina.
   Medido: la flecha acaba en 46px y la etiqueta se queda clavada en 46 en cualquier posición.

   El `left` NO se pone también a 2,1rem, aunque parezca lo simétrico: los dos se suman y dejan 33px
   de blanco entre la flecha y la fecha. Está medido, se probó primero así.

   En escritorio no hace falta: ahí las dos flechas están a la derecha y el borde izquierdo está libre.
   Fue justo el efecto secundario que se ganó al juntarlas, y volvió al separarlas otra vez en móvil. */
@media (max-width: 991.98px) {
  .dgl-tira { padding-left: 2.1rem; }
  .dgl-fecha { left: 0; }
}

/* 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; }

/* LAS FLECHAS CAMBIAN DE SITIO SEGÚN EL DISPOSITIVO (2026-07-31, decisión del dueño).

   * **Con ratón (≥992px): las dos juntas a la derecha**, como en Baseball Savant. Una en cada punta
     obliga a cruzar la pantalla entera para retroceder y volver a avanzar; juntas, el puntero se
     queda donde está y solo cambia de botón.
   * **En teléfono (<992px): una en cada punta**, como estaban siempre. Ahí no hay puntero que
     recorra nada: el pulgar ya está sobre la pantalla y llega a las dos esquinas sin moverse, y
     además cada flecha señala hacia donde va el contenido. La diferencia no es el tamaño de la
     pantalla, es que una la mueve un ratón y la otra un dedo.

   El punto de corte es el `lg` de Bootstrap, el mismo que el sitio ya usa para el carril de anuncios.

   Van así con `display: contents` en el envoltorio: en móvil desaparece y los dos botones se
   posicionan cada uno contra `.dgl-banner`; en escritorio vuelve a ser una caja flex y los alinea.
   Sin eso harían falta dos marcados distintos en la plantilla para el mismo widget.

   Más grandes en las dos, y en NEGRITA y en tinta: de 1,6rem de ancho y 1,2rem de glifo a 2,1 y 1,5.
   El `--dgl-muted` las dejaba al nivel de un texto secundario, que es lo contrario de lo que son —
   son la ÚNICA forma de ver los juegos que no caben. El peso hace más por que se vean que el tamaño:
   un glifo fino y grande se sigue leyendo como decoración. */
.dgl-flechas { display: contents; }
.dgl-flecha {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  width: 2.1rem; padding: 0; border: 0;
  background: var(--dgl-card); color: var(--dgl-ink);
  font-size: 1.5rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.dgl-flecha-izq { left: 0; border-right: 1px solid var(--dgl-line); }
.dgl-flecha-der { right: 0; border-left: 1px solid var(--dgl-line); }
.dgl-flecha:hover { color: var(--dgl-navy); background: #f0f3f8; }
.dgl-flecha[disabled] { opacity: .25; cursor: default; }

@media (min-width: 992px) {
  .dgl-flechas { display: flex; position: absolute; top: 0; bottom: 0; right: 0; z-index: 3; }
  /* `static` para que las coloque el flex del envoltorio y no su propio `left`/`right`. */
  .dgl-flecha { position: static; border-left: 1px solid var(--dgl-line); border-right: 0; }
  /* Sitio para que el ÚLTIMO juego pueda pasar por debajo de las dos en vez de quedarse tapado por
     ellas para siempre. Solo acá: en móvil van separadas y cada una tapa un extremo, que es como
     estuvo siempre. */
  .dgl-tira { padding-right: 4.2rem; }
}

/* 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; }
/* EL LOGO SE VA EN PANTALLA ANCHA, y suena al revés hasta que se miran los anchos.

   La rejilla es `minmax(250px, 1fr)`, así que el número de columnas lo decide el CONTENEDOR y no la
   pantalla. En un teléfono el widget ocupa el ancho entero y la rejilla saca UNA columna de ~350px;
   en escritorio el widget vive en media fila (`col-lg-6`) y saca DOS de ~260. O sea que la caja es
   más ancha en el teléfono, y la línea que allí cabe entera acá se corta con puntos suspensivos —
   `.dgl-destacado-linea` lleva `text-overflow: ellipsis`.

   Entre 508px y 991px el widget también saca dos columnas, pero de ~365px, que sí dan de sí. Por eso
   el corte va en 992 y no antes.

   Se sacrifica el logo y no la línea porque la línea ES el dato: «17 H, 2B, 6 HR, 9 RBI, 13 R»
   truncada en «17 H, 2B, 6 HR, 9 R…» esconde justo lo que hace notable la actuación. El equipo, en
   cambio, se puede mirar en la ficha del jugador, que está a un clic desde el propio nombre.

   Decisión del dueño, 2026-07-31, para los cuatro widgets de la franja. */
@media (min-width: 992px) {
  .dgl-destacado-logo { display: none; }
}
/* 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; }
/* EL NOMBRE COMPLETO EN MÓVIL Y EL ABREVIADO EN ESCRITORIO (dueño, 2026-08-01).

   Suena al revés y es por lo mismo que el logo del equipo: la rejilla es `minmax(250px, 1fr)`, así
   que en un teléfono arma UNA columna de ~350px y en escritorio DOS de ~260. La caja es más ancha en
   el teléfono, y ahí «Fernando Tatis Jr.» cabe donde en escritorio solo cabe «F. Tatis Jr.».

   Los dos vienen en el HTML y acá se elige, porque el servidor no sabe de qué ancho es la pantalla.
   El corte es el `lg` de siempre — entre 768 y 991 la caja mide ~365px, todavía más que en
   escritorio, así que el nombre largo también le sirve.

   Solo aplica a los tres paneles que usan `.dgl-destacado-nombre`: destacados y las dos rachas. El de
   líderes tiene su propia anatomía y no lo pidió el dueño. */
.dgl-nombre-largo { display: none; }
@media (max-width: 991.98px) {
  .dgl-nombre-corto { display: none; }
  .dgl-nombre-largo { display: inline; }
}

/* «VER MÁS ARTÍCULOS»: UN ENLACE EN ESCRITORIO, UN DESPLIEGUE EN EL TELÉFONO (dueño, 2026-08-01).

   En escritorio lleva al índice, como siempre. En un teléfono despliega tres tarjetas más sin salir
   de la portada: quien baja hasta ahí en el celular ya está leyendo, y mandarlo a otra página para
   ver tres tarjetas le cobra una carga entera.

   Las tres van SIEMPRE en el HTML —el servidor no sabe de qué ancho es la pantalla— y acá se decide.
   En escritorio no se dibujan nunca, y no es solo por no alargar la página: la fila del bloque
   editorial mide 664px medidos y es lo que justifica el anuncio de 300x600 del carril. Tres tarjetas
   más la estirarían y esa cuenta dejaría de cuadrar.

   El mismo corte de 992px que el resto de lo que distingue ratón de dedo en este archivo. */
.dgl-solo-angosta { display: none; }
.dgl-art-de-mas { display: none; }
@media (max-width: 991.98px) {
  .dgl-solo-ancha { display: none; }
  .dgl-solo-angosta { display: block; }
  #portada-articulos.esta-desplegado .dgl-art-de-mas { display: block; }
}
.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; }

/* NINGÚN ANUNCIO PUEDE EMPUJAR LA PÁGINA A LO ANCHO. El `iframe` lleva su ancho en un atributo
   —970 desde el 2026-07-29— y sin esto una pantalla más estrecha que eso saca una barra de scroll
   horizontal en TODO el sitio, que es de los defectos que peor se ven en un móvil.

   Antes el problema existía igual con 728, solo que empezaba por debajo de 740px de pantalla. Con
   970 empezaría por debajo de ~994, o sea también en tablets y portátiles pequeños.

   Lo que esto NO resuelve: por debajo de esos 994px el banner se ve RECORTADO, porque el `iframe` se
   estrecha pero la imagen de dentro sigue midiendo 970. La solución de verdad es una zona aparte con
   formato de móvil (320×50 o 300×250) y enseñar una u otra por CSS. Queda pendiente y anotado. */
.dgl-ad-marco { max-width: 100%; }

/* CENTRADO, Y ESO ES LO QUE SALVA LA COHERENCIA VISUAL DEL SITIO (2026-07-29).
   Un anuncio tiene ancho FIJO —970, 728, 300— y las columnas del sitio son fluidas: el contenedor
   mide 1140 o 1320 según la pantalla. Pegado a la izquierda, el sobrante se acumulaba todo a la
   derecha —350px muertos en el banner de cabecera— y se leía como un elemento mal colocado.
   Centrado, ese mismo sobrante queda repartido y se lee como margen.

   `display: block` en vez de `inline`: además de permitir el `margin: auto`, quita de un golpe los
   6px de aire que un elemento inline reserva debajo para los trazos que bajan de la línea. Medido en
   producción antes de esto: el marco 90, su contenedor 96. */
.dgl-ad-marco { display: block; margin-inline: auto; }

/* EL ALTO DEL HUECO HORIZONTAL LO FIJA EL CSS, no el atributo del `iframe`, y por una razón concreta:
   el tamaño del anuncio lo elige `anuncios.js` cuando la página ya cargó. Si el alto viniera del
   atributo, la página daría un salto en móvil al pasar de 90 a 50 px justo cuando el lector empieza a
   leer. Reservándolo aquí, el hueco nace con la medida correcta.

   El corte en 992 sale de medir el `.container` de Bootstrap en el sitio real: por debajo de ahí mide
   720 o menos, así que no cabe ni el de 728. */
@media (max-width: 991.98px) {
  .dgl-ad-leader { height: 50px; }
}
/* LA COLUMNA DE UN ANUNCIO DE 300 DE ANCHO, que mide lo que el anuncio y no lo que la rejilla.

   Un `col-lg-4` sobre el contenedor de 1320 da 440px de ancho, y el anuncio 300: sobraban 140px a un
   lado, y con el artículo de al lado ocupando su columna entera la fila se veía descuadrada. Es el
   mismo defecto que tenía la torre de líderes, que entregaba 261px diciendo 300.

   Fijando la base de la columna, el artículo se queda con TODO el resto y no hay hueco entre los dos.
   La canaleta se suma porque las columnas de Bootstrap llevan `box-sizing: border-box` y su relleno
   saldría del mismo ancho. */
@media (min-width: 992px) {
  .dgl-col-300 { flex: 0 0 auto; width: calc(300px + var(--bs-gutter-x, 1.5rem)); }
}

/* 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; }
/* Más chicas que las pastillas de filtro del resto del sitio: acá viven en la línea del título de un
   widget, no en una barra de herramientas, y a tamaño completo eran el elemento más alto de esa línea.
   Acotado a `.dgl-pestanas` para no tocar las de categorías del índice de artículos. */
.dgl-pestanas .dgl-pill { font-size: .72rem; padding: .15rem .7rem; }

/* LA CABECERA DE UN WIDGET, con alto reservado. Los cuatro paneles de la franja van dos y dos, y sus
   filas tienen que arrancar a la misma altura: si no, dos listas idénticas se leen como escalonadas.
   Medido antes de esto: la de líderes medía 28px —lo que ocupan sus pestañas— contra 18 de las otras
   tres, que solo llevan una fecha. Diez píxeles de desfase en todas las filas.
   No se arregla achicando las pestañas: para bajar de 28 a 18 la letra tendría que quedar en 9px.
   El alto lo fija la más alta y las demás lo reservan, que es lo mismo que ya hace el hueco del
   «ver más». */
.dgl-widget-cabecera { min-height: 1.75rem; }

/* 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`. */
/* Cinco filas en escritorio y cuatro en móvil, igual que los otros tres paneles de la franja. Acá el
   alto SÍ es fijo y no `max-height`: la lista trae siempre unas treinta filas, así que nunca sobra
   sitio, y la expansión de este widget FLOTA por encima en vez de empujar — necesita un marco de alto
   conocido contra el que posicionarse. `lideres.js` cuenta las mismas filas; los dos números tienen
   que decir lo mismo. */
.dgl-lideres-marco {
  position: relative;
  height: calc(5 * var(--caja) + 4 * var(--hueco));
}
@media (max-width: 991.98px) {
  .dgl-lideres-marco { height: calc(4 * var(--caja) + 3 * 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; }
/* El «Cerrar» que cierra la capa desde su propio final. Existe siempre en el HTML —uno por lista— y
   solo se ve cuando esa lista está flotando: cerrada, sería un botón que no cierra nada.

   Mismo aspecto que el «ver menos» de arriba a propósito: son el mismo control visto desde los dos
   extremos de una lista larga, y darles dos formas distintas los haría parecer dos cosas.

   `grid-column: 1 / -1` porque la lista es una rejilla: sin eso el botón ocuparía una celda y se
   pondría al lado de la última fila en vez de debajo. */
.dgl-lideres-cerrar { display: none; }
.dgl-lideres-lista.is-flotante .dgl-lideres-cerrar {
  display: block; grid-column: 1 / -1; width: 100%; margin-top: .4rem; padding: .3rem;
  background: none; border: 0; border-top: 1px solid var(--dgl-line); font: inherit;
  font-size: .72rem; line-height: 1.4; color: var(--dgl-blue); cursor: pointer;
}
.dgl-lideres-lista.is-flotante .dgl-lideres-cerrar: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; }

/* LA COLUMNA DE LA TORRE, y existe por un defecto medido (2026-07-29).

   Estaba en `col-xl-3`, que sobre el contenedor de 1140px da 285px menos 24 de canaleta: **261**. El
   `max-width: 100%` de `.dgl-ad-torre` la encogía a esos 261 sin quejarse, así que el hueco decía
   300×600 y entregaba 261×600 — una creatividad de 300 de ancho salía aplastada un 13%.

   Con `flex-basis` fijo la columna mide siempre lo que el anuncio necesita, y el tablero se queda con
   el resto. La canaleta se suma porque las columnas de Bootstrap llevan `box-sizing: border-box` y su
   relleno saldría del mismo ancho. */
@media (min-width: 1200px) {
  .dgl-col-torre { flex: 0 0 auto; width: calc(300px + var(--bs-gutter-x, 1.5rem)); }
}

/* 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. */
/* EL MARCO YA NO TIENE ALTO FIJO (2026-07-31). Mide lo que mida su lista, y nada más.

   Lo tenía —tres filas primero, cinco después— con `overflow: hidden`, y eso solo servía para
   esconder lo que el botón «ver N más» desplegaba. Al quitar el botón, el alto fijo dejó de recortar
   un extra opcional y pasó a recortar contenido sin salida.

   Y NO ERA UN CASO RARO: la rejilla es `minmax(250px, 1fr)`, así que en un teléfono arma UNA columna
   y diez cajas son diez filas. Medido a 375px: marco de 344px, contenido de 696 — **cinco de las diez
   cajas invisibles y sin ningún control para llegar a ellas**. En escritorio no se veía, porque ahí
   las dos columnas hacen que diez cajas quepan justo en las cinco filas.

   Sin alto fijo se arregla eso y, de paso, lo que pidió el dueño: con cuatro cajas el panel mide
   cuatro filas en vez de dejar un rectángulo blanco esperando a las que no llegaron.

   EN MÓVIL SÍ SE RECORTA, A CUATRO FILAS, Y VUELVE EL BOTÓN (2026-07-31). Diez cajas en una columna
   son diez filas de scroll dentro de un widget, y hay cuatro widgets seguidos. Se recorta con
   `max-height` y no con `height`: así una lista de tres cajas mide tres y no deja el hueco blanco.

   El corte es 992px, el mismo `lg` que ya usa el resto del sitio. Entre 508 y 991 la rejilla arma dos
   columnas, así que ahí cuatro filas son ocho cajas — no es exactamente «cuatro tarjetas», es cuatro
   filas, que es lo que gobierna el alto y lo que se pidió. */
.dgl-destacados-marco { min-height: 0; }
/* El botón solo existe en móvil: en escritorio la lista entera está a la vista y no desplegaría nada.
   Se apunta con `.dgl-destacados` para no tocar el del widget de líderes, que lo lleva siempre. */
.dgl-destacados .dgl-lideres-mas { display: none; }
@media (max-width: 991.98px) {
  .dgl-destacados-marco {
    max-height: calc(4 * var(--caja) + 3 * var(--hueco));
    overflow: hidden;
  }
  .dgl-destacados.esta-desplegado .dgl-destacados-marco { max-height: none; overflow: visible; }
  .dgl-destacados .dgl-lideres-mas { display: block; }
}

/* El anuncio que se queda a la vista mientras se baja y aterriza sobre el pie de página al llegar al
   final.

   SIN FONDO PROPIO (2026-07-29). Lo tenía —blanco— y el motivo escrito era que, al flotar sobre el
   contenido, «se leería el texto por debajo del patrón rayado». Ese razonamiento era de cuando el
   hueco dibujaba el recuadro rayado de maqueta. Hoy lo que flota es un `iframe` con un anuncio real,
   que es opaco y tapa por sí mismo, así que el fondo ya no protegía de nada.

   Y sí estorbaba: cuando la zona NO tiene campaña, Revive devuelve un cuerpo transparente y vacío, y
   ese blanco quedaba como **un recuadro en blanco en mitad de la página**. Se veía en `/jugadores/` y
   no en la portada, y la diferencia no era la página: era esta única línea. Los demás huecos vacíos
   son transparentes y se funden con el gris del fondo.

   Lo que se acepta a cambio: si algún día un anunciante manda una creatividad con transparencia, se
   leerá el texto a través. Es exigible al anunciante —los formatos de display se entregan opacos— y
   es preferible a un rectángulo blanco permanente que ve todo el mundo.

   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`. */
.dgl-ad-pegajoso { position: sticky; bottom: .75rem; }

/* ---------- Í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.

   TRES LÍNEAS, y eran dos hasta el 2026-07-30. Las subió el dueño por lo mismo que había subido las
   del titular dos días antes: vio una entradilla cortada con puntos suspensivos teniendo la tarjeta
   medio vacía debajo.

   Había DOS recortes sobre el mismo texto y el otro se quitó — la plantilla llevaba un
   `truncatechars:110` que contaba CARACTERES sin saber cuántos caben. Este cuenta LÍNEAS, que es lo
   que de verdad ocupa alto: 110 caracteres son dos líneas largas o casi tres cortas, y con el clamp
   el límite se ajusta solo al ancho que haya.

   Por qué 3 y no 4: la tarjeta mide 300px fijos. Descontando la banda (65), los rellenos, el
   antetítulo, el titular de hasta tres líneas y el pie, quedan 69,5px con etiquetas y 94,5 sin
   ellas — o sea 3,2 y 4,4 líneas de 21,6px. El peor caso manda, y con tres entra por unos 5px.

   `flex-shrink: 0` sigue haciendo falta: `.pie` lleva `margin-top: auto` y cuando el contenido no
   deja hueco el flex se cobra la diferencia ENCOGIENDO a sus hermanos, dejando la última línea
   cortada por la mitad. No es el clamp fallando, es el flex apretando. */
.dgl-art .entradilla {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: .95rem; line-height: 1.5; color: #4b5563; margin-bottom: .6rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  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. */
/* EL DESTACADO SOLO ES MÁS GRANDE CUANDO ADEMÁS ES MÁS ANCHO (2026-07-31, decisión del dueño).

   El titular a 1,5rem contra los .95rem del resto dice «este es el importante», y eso se entiende
   porque al lado hay tarjetas más chicas con las que compararlo. Apiladas en un teléfono no hay tal
   comparación: las tres ocupan el mismo ancho, van una debajo de otra, y lo único que queda del
   contraste es un titular que se come tres renglones de pantalla.

   El corte va en el `md` de Bootstrap porque es exactamente donde las tarjetas dejan de medir todas
   lo mismo: por debajo de 768px `col-md-6` se apila y la retícula entera es de una columna. No es un
   número elegido por «esto ya parece un móvil», es el punto donde el argumento del tamaño deja de
   ser cierto. */
@media (min-width: 768px) {
  .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; }
/* LOS ENLACES DEL CUERPO NO VAN SUBRAYADOS — NI EN REPOSO NI AL PASAR EL RATÓN.
   Decisión del dueño (2026-07-30). Acá había un `text-decoration: underline` propio, y además está el
   `a:hover` global del sitio, así que hay que anular los dos. En un párrafo con cuatro nombres
   seguidos —«Tatis en primera, Castillo en segunda…»— el subrayado troceaba la frase.

   SIN SUBRAYADO, EL COLOR ES LO ÚNICO QUE DISTINGUE UN ENLACE, y el de marca no daba. Medido:

       #1f4e9b   2,11:1 contra el texto del cuerpo   ← el de marca, no llega
       #2a6fd4   3,48:1                              ← este
       referencia para separar un enlace de la prosa solo por color: 3:1

   Un azul oscuro sobre casi negro no es un tecnicismo de accesibilidad: se pierde de vista. Y con la
   idea de enlazar las fichas de jugador desde los artículos, un enlace que no se ve es un enlace que
   no se pulsa. Se aclara SOLO acá; el azul de marca del resto del sitio no se toca. Mismo tono —217°
   contra 213°— con la luminosidad que hace falta.

   LO QUE SUSTITUYE AL SUBRAYADO en cada caso:

       ratón     el color cambia al azul de marca — visible, y no trocea la línea
       teclado   un recuadro de foco, que no es un subrayado

   El del teclado no es opcional: quien navega con Tab no dispara ningún `hover`, así que sin él se
   queda sin saber dónde está. */
.dgl-bloque-parrafo a { color: #2a6fd4; text-decoration: none; }
.dgl-bloque-parrafo a:hover { color: var(--dgl-blue); text-decoration: none; }
.dgl-bloque-parrafo a:focus-visible { outline: 2px solid var(--dgl-blue); outline-offset: 2px; }
/* 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;
}
/* LA IMAGEN NO SE AGRANDA: se centra. Decisión del dueño, 2026-07-31.

   Estaba en `width: 100%`, que estira la imagen hasta los 820px de la columna venga de donde venga.
   Con una foto grande no se nota —solo se achica— pero con un gráfico de 400px lo escalaba al doble
   y salía borroso: un gráfico tiene el tamaño que tiene, y agrandarlo no añade un solo píxel de
   información.

   `max-width` en vez de `width` es toda la diferencia: nunca crece, y sigue achicándose cuando no
   cabe, que es lo que hace falta en un teléfono. El `margin-inline: auto` la centra en la columna, y
   el pie se centra con ella para que no quede colgando a un lado de una imagen estrecha.

   La plantilla NO hacía falta tocarla: está medido que `width-1000` de Wagtail no agranda — un
   original de 765px sale de 765px. El archivo servido siempre tuvo el tamaño bueno; era el CSS el
   que lo estiraba al pintarlo. */
/* El video de YouTube del cuerpo del artículo. `aspect-ratio` y no un alto fijo: la columna cambia de
   ancho en cada tamaño de pantalla, y con `height` puesto el marco se descuadra en cuanto lo hace.
   El 16/9 es la proporción en que YouTube sirve casi todo; un Short saldrá con bandas a los lados, y
   eso es preferible a recortarle la imagen. */
.dgl-bloque-video { margin: 1.6rem 0; }
.dgl-video-marco {
  aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: .5rem; overflow: hidden;
}
.dgl-video-marco iframe { width: 100%; height: 100%; border: 0; display: block; }
.dgl-bloque-video figcaption { text-align: center; }

.dgl-bloque-imagen { margin: 1.6rem 0; }
.dgl-bloque-imagen img {
  display: block; margin-inline: auto;
  max-width: 100%; height: auto; border-radius: .5rem;
}
.dgl-bloque-imagen figcaption {
  color: var(--dgl-muted); font-size: .82rem; margin-top: .5rem; text-align: center;
  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;
}
/* ALINEACIÓN POR COLUMNA en la tabla pegada. El editor la declara una sola vez, en el `<colgroup>`
   del propio HTML, y `articles/tablas.py` la baja a cada celda — CSS no puede alinear texto desde un
   `<col>`, que es por lo que esa etiqueta parece no servir para nada.

   `.dgl-stats-table` alinea a la derecha y deja la primera columna a la izquierda, que es lo correcto
   para la tabla de una ficha —año y cifras— y no para una tabla cualquiera, donde los nombres pueden
   estar en la 2 y en la 5.

   El selector lleva las TRES clases a propósito. Con `.dgl-bloque-tabla .der` no bastaba: la regla de
   la primera columna es `.dgl-stats-table th:first-child`, que puntúa más alto, y la columna 1 —la
   única que uno querría mover— se quedaba sin obedecer. */
.dgl-bloque-tabla .dgl-stats-table th.izq, .dgl-bloque-tabla .dgl-stats-table td.izq { text-align: left; }
.dgl-bloque-tabla .dgl-stats-table th.centro, .dgl-bloque-tabla .dgl-stats-table td.centro { text-align: center; }
.dgl-bloque-tabla .dgl-stats-table th.der, .dgl-bloque-tabla .dgl-stats-table td.der { text-align: right; }

/* 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;
}

/* LAS NOTAS AL PIE. El numerito dentro del texto y la lista al terminar el artículo.

   LA LLAMADA NO SE PINTA COMO UN ENLACE DEL CUERPO. Los del cuerpo van en #2a6fd4 sin subrayar
   —decisión del dueño, ver arriba— y eso ya carga el párrafo de azul; sumarle los numeritos convierte
   una nota en otro enlace más para pulsar. Va en el gris del texto secundario y solo se pone azul al
   pasar el ratón: quien lee de corrido lo esquiva, quien lo busca lo encuentra.

   `vertical-align: super` con el tamaño reducido y NO la línea base del navegador: `<sup>` a secas
   estira el interlineado de ESE renglón, así que un párrafo con dos llamadas sale con dos renglones
   más separados que el resto. Con `line-height: 0` el superíndice no cuenta para el alto de la línea.

   La zona de pulsado se ensancha con `padding` y no con `margin` — en un móvil un corchete de seis
   píxeles no se acierta con el pulgar. El `padding` no descoloca nada porque el elemento es inline y
   la altura está anulada. */
.dgl-nota-llamada {
  color: #4b5563; text-decoration: none; padding: .35rem .15rem;
}
.dgl-nota-llamada sup { font-size: .7em; line-height: 0; vertical-align: super; }
.dgl-nota-llamada:hover { color: #2a6fd4; }
.dgl-nota-llamada:focus-visible { outline: 2px solid var(--dgl-blue); outline-offset: 2px; }

/* La llamada a la que se acaba de saltar. Sin esto, el navegador lleva el foco al pie y el lector
   pierde de vista de qué palabra venía al volver: la página salta y todas las llamadas se ven igual.
   Amarillo de resaltador durante un segundo y medio, que es lo que tarda el ojo en engancharse.

   Se resalta con `:target` —el propio ancla del navegador— así que no hace falta JavaScript. */
.dgl-nota-llamada:target, .dgl-notas-lista li:target { animation: dgl-nota-destella 1.6s ease-out; }
@keyframes dgl-nota-destella {
  from { background: #fef08a; }
  to { background: transparent; }
}
/* Quien pidió al sistema que no le muevan nada en pantalla no debería recibir un parpadeo. El
   resaltado se queda fijo en vez de desaparecer: cumple la misma función sin animar. */
@media (prefers-reduced-motion: reduce) {
  .dgl-nota-llamada:target, .dgl-notas-lista li:target { animation: none; background: #fef08a; }
}

/* La lista del final. Separada por una línea porque ya no es el artículo: es el aparato de notas, y
   el lector tiene que ver de un vistazo que el texto se acabó. Un escalón más pequeña que el cuerpo
   —el mismo 0.9 que usan los pies del sitio— sin bajar del umbral en el que el serif cuesta leer. */
.dgl-notas { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid #e5e7eb; }
.dgl-notas-titulo {
  font-size: 1rem; font-weight: 700; letter-spacing: .02em; color: #374151; margin-bottom: .6rem;
}
.dgl-notas-lista {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: .95rem; line-height: 1.55; color: #374151; padding-left: 1.4rem; margin-bottom: 0;
}
.dgl-notas-lista li { margin-bottom: .5rem; }
/* El texto de la nota llega como HTML enriquecido, o sea envuelto en `<p>`. El margen de párrafo del
   cuerpo abriría un hueco dentro de cada punto de la lista y los separaría más entre sí que de su
   propio número. La flecha de vuelta va pegada al último párrafo, así que este queda en línea. */
.dgl-notas-lista li p { margin: 0; display: inline; }
.dgl-notas-lista li p + p { display: block; margin-top: .4rem; }
.dgl-nota-volver { margin-left: .35rem; }
.dgl-nota-volver a { color: #4b5563; text-decoration: none; padding: .25rem; }
.dgl-nota-volver a:hover { color: #2a6fd4; }
.dgl-nota-volver a:focus-visible { outline: 2px solid var(--dgl-blue); outline-offset: 2px; }
.dgl-nota-volver sup { font-size: .7em; line-height: 0; vertical-align: super; }

/* 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. */
/* 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. */

/* 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;
}
/* Fuera en pantalla ancha, igual que en los otros tres widgets de la franja — el porqué está junto a
   `.dgl-destacado-logo`. Va ACÁ y no allá arriba con los otros: la regla de la línea anterior tiene
   la misma especificidad y viene después, así que allá arriba la pisaba y el escudo seguía saliendo.
   Se vio midiendo en el navegador, no leyendo el CSS. */
@media (min-width: 992px) {
  .dgl-lider-escudo { display: none; }
}

/* 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;
}


/* ---------- Compartir ---------- */
/* Cuatro enlaces y una etiqueta, en fila y con salto. `gap` y no márgenes: con márgenes, el hueco
   entre filas al saltar de línea sale distinto del hueco entre botones. */
.dgl-compartir {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
/* Botones de contorno y no macizos: son una acción secundaria. Un artículo tiene UNA acción
   principal —leerlo— y cuatro botones de color pleno debajo del texto compiten con ella. */
.dgl-compartir-boton {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border: 1px solid var(--dgl-line, #dfe3e9);
  border-radius: 999px; background: #fff; color: var(--dgl-navy); text-decoration: none;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem; line-height: 1.4;
  cursor: pointer; transition: background-color .12s, border-color .12s;
}
.dgl-compartir-boton:hover, .dgl-compartir-boton:focus-visible {
  background: var(--dgl-navy); border-color: var(--dgl-navy); color: #fff; text-decoration: none;
}
/* La variante de la cabecera: misma cosa, más callada. Va bajo la firma y no puede pesar más que el
   titular que tiene encima. */
.dgl-compartir-fino .dgl-compartir-boton { padding: .15rem .55rem; font-size: .72rem; }

/* El icono. `em` y no `px`: así sigue al tamaño del texto del botón, y la variante fina de la cabecera
   se encoge sola sin necesitar su propia regla.

   `flex-shrink: 0` porque el botón es flexible: sin esto, un nombre largo aplastaría el icono en vez
   de dejar que el botón crezca. */
.dgl-compartir-icono { width: 1em; height: 1em; flex-shrink: 0; }

/* En la fila fina de la cabecera se ve SOLO EL ICONO: va bajo la firma, y cuatro nombres escritos ahí
   pesarían más que el titular que tienen encima. El nombre sigue en el HTML —lo lee un lector de
   pantalla y lo encuentra una búsqueda en la página— pero no se dibuja.

   Y el icono crece un poco al quedarse solo: a .72rem de texto sería un cuadradito de 11px,
   demasiado chico para acertarle con el dedo. */
.dgl-compartir-fino .dgl-compartir-boton > span { position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dgl-compartir-fino .dgl-compartir-boton { padding: .35rem .5rem; }
.dgl-compartir-fino .dgl-compartir-icono { width: 1.15rem; height: 1.15rem; }

/* La variante para fondo oscuro: el hero del perfil es navy, y los botones de contorno claro
   desaparecerían encima. Mismo dibujo, colores invertidos. */
.dgl-compartir-oscuro .dgl-compartir-boton {
  background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff;
}
.dgl-compartir-oscuro .dgl-compartir-boton:hover,
.dgl-compartir-oscuro .dgl-compartir-boton:focus-visible {
  background: #fff; border-color: #fff; color: var(--dgl-navy);
}

/* El enlace a la cuenta del sitio en el pie.
   El TAMAÑO del icono va en los atributos del `<svg>` y no acá: un SVG en línea sin `width` ni
   `height` ocupa todo el ancho de su contenedor, y esa es una avería que no puede depender de que una
   hoja de estilos cargue. Acá solo va la disposición. */
.dgl-pie-x { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; }

/* ─── EFEMÉRIDES DEL PERFIL ────────────────────────────────────────────────────────────────────
   La carrera contada en hechos fechados. Es el único tab del perfil que muestra PROSA y no cifras,
   así que no usa `dgl-stats-table`: esa es monoespaciada y de cuerpo chico, buena para alinear
   números y mala para leer un párrafo. */
.dgl-efem { list-style: none; margin: 0; padding: 0; }
.dgl-efem-item { padding: .7rem 1rem; border-top: 1px solid var(--dgl-line); }
/* La primera no lleva línea arriba: ya la pone el borde del panel. */
.dgl-efem-item:first-child { border-top: 0; }

.dgl-efem-fecha {
  display: block; color: var(--dgl-muted); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: .15rem;
}
.dgl-efem-titular { margin: 0; font-size: .92rem; line-height: 1.45; }
/* La frase que sitúa —«uno de los 16 dominicanos con un ciclo»— va más apagada que el titular: es
   contexto, no la noticia. */
.dgl-efem-situacion { margin: .1rem 0 0; color: var(--dgl-muted); font-size: .82rem; line-height: 1.4; }

/* LAS DESHONRAS SE MARCAN, NO SE ESCONDEN. Un sombrero dorado es parte de la carrera igual que un
   ciclo, y el archivo las publica a propósito. La barra en el margen basta para que no se lean como
   una hazaña; el color no cambia porque el texto ya dice lo que pasó. */
.dgl-efem-item.es-negativa { border-left: 3px solid var(--dgl-line); }

/* EL RECORTE DEL «VER MÁS». Las filas están TODAS en el HTML: esto es un corte visual, no una
   página, y por eso no hay petición nueva ni cambia la URL — que es justamente lo que haría un
   paginador, y de paso devolvería al lector al primer tab.

   A diferencia de los widgets de portada, acá el recorte NO se limita a pantallas angostas:
   noventa y nueve entradas de prosa son largas también con ratón. */
.dgl-efem-de-mas { display: none; }
#efem-lista.esta-desplegado .dgl-efem-de-mas { display: block; }

/* ==========================================================================
   «Un día como hoy» — el widget de portada, debajo de la pizarra
   ========================================================================== */

/* LAS DIECISÉIS TARJETAS SE APILAN EN LA MISMA FILA DE LA RETÍCULA, y todas ocupan sitio. Así el
   panel mide lo que mide la MÁS ALTA y no cambia de alto al rotar: con `display:none` daba un salto
   cada vez que pasaba de un cumpleaños de una línea a un walk-off de cuatro, y la portada entera se
   movía debajo.

   UNA COLUMNA EN MÓVIL Y DOS EN ESCRITORIO, que es de donde sale «una efeméride a la vez en el
   teléfono». La cuenta de cuáles se ven la lleva `dia_como_hoy.js` con ESTA MISMA consulta de
   768px; si los dos números se separan, el móvil enseña dos tarjetas una encima de la otra. */
.dgl-dch { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.dgl-dch-caja {
  grid-row: 1; grid-column: 1;
  /* `visibility` y no `display`, para que la escondida siga midiendo. La transición es solo de
     opacidad: el desvanecido cruzado exigiría capas con z-index y no aporta nada que se note. */
  visibility: hidden; opacity: 0;
  transition: opacity .35s ease;
}
.dgl-dch-caja.es-visible { visibility: visible; opacity: 1; }
@media (min-width: 768px) {
  .dgl-dch { grid-template-columns: 1fr 1fr; gap: 1rem; }
  /* Impares a la izquierda y pares a la derecha, y así cada pantalla —tarjetas 1-2, 3-4, 5-6…— cae
     siempre en las mismas dos celdas. */
  .dgl-dch-caja:nth-child(odd) { grid-column: 1; }
  .dgl-dch-caja:nth-child(even) { grid-column: 2; }
}

/* EL ESTADO SIN JAVASCRIPT, y por eso está en el CSS y no en el `.js`: la primera siempre, y la
   segunda solo donde de verdad caben dos. Es exactamente lo que se vería con el script cargado, así
   que no hay parpadeo cuando arranca — lo primero que hace es quitar estas dos clases. */
.dgl-dch-caja.es-primera { visibility: visible; opacity: 1; }
@media (min-width: 768px) {
  .dgl-dch-caja.es-segunda { visibility: visible; opacity: 1; }
}

/* LA MISMA CAJA GRIS QUE LOS OTROS WIDGETS. Es literalmente el recuadro de `.dgl-destacado-caja`
   —mismo borde, mismo radio, mismo fondo— para que la portada se lea como una sola cosa y no como
   cuatro widgets de autores distintos. Panel blanco por fuera, caja gris por dentro. */
.dgl-dch-caja {
  min-width: 0;
  border: 1px solid #dfe3e9; border-radius: .5rem; padding: .55rem .7rem;
  background: var(--dgl-bg);
}

/* EL AÑO DELANTE DEL NOMBRE Y CON LA MISMA LETRA: «2009 - Alex Rodríguez». La línea entera comparte
   tamaño, peso y color; lo único que distingue al nombre es que se puede pulsar. */
.dgl-dch-cabeza {
  font-weight: 700; font-size: .95rem; color: var(--dgl-navy);
  margin-bottom: .25rem;
}
.dgl-dch-anio { font-variant-numeric: tabular-nums; }
/* El nombre lo pone la plantilla porque el texto no lo dice: los titulares están escritos para ir
   debajo de un nombre, y el del cumpleaños es literalmente «Cumple 70 años.». */
.dgl-dch-nombre { color: inherit; text-decoration: none; }
.dgl-dch-nombre:hover, .dgl-dch-nombre:focus-visible { text-decoration: underline; }

.dgl-dch-titular { margin: 0; font-size: .9rem; line-height: 1.45; }
/* La frase que sitúa va más apagada: es contexto, no la noticia. Igual que en el tab del perfil. */
.dgl-dch-situacion { margin: .15rem 0 0; color: var(--dgl-muted); font-size: .8rem; line-height: 1.4; }

/* Las deshonras se marcan y no se esconden — el mismo criterio que en el perfil. Casi nunca llegan
   acá: su puntaje tiene techo 400 y el corte del día de temporada anda por 528. */
.dgl-dch-caja.es-negativa { border-left: 3px solid var(--dgl-muted); }

/* LOS CONTROLES: «Anterior» a la izquierda, «Próximo» a la derecha y los puntos en el medio. Con
   dieciséis efemérides y una vuelta de dos minutos y medio, esperar a que regrese la que te
   interesó no es una opción — de ahí que las flechas existan aunque rote sola. */
.dgl-dch-controles {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: .85rem;
}
/* «Anterior» y «Próximo» son `.dgl-pill`, el mismo control que las pestañas de Bateo y Pitcheo del
   widget de líderes (dueño, 2026-08-04). Acá solo se les impide encogerse; el aspecto entero —fondo,
   borde, radio, letra— viene de `.dgl-pill` para que un pill se vea igual en todo el sitio. */
.dgl-dch-controles .dgl-pill { flex: 0 0 auto; font-size: .72rem; padding: .15rem .7rem; }

.dgl-dch-puntos { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.dgl-dch-punto {
  width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--dgl-line); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.dgl-dch-punto.es-visible { background: var(--dgl-navy); transform: scale(1.25); }
.dgl-dch-punto:hover { background: var(--dgl-muted); }

/* EN MÓVIL, LA CUENTA EN VEZ DE LOS PUNTOS. Con una tarjeta a la vez son DIECISÉIS pantallas, y
   dieciséis puntos de medio rem en un teléfono no se pulsan: o se falla el que se quiere o se
   comen el ancho entero. «3 / 16» dice lo mismo y cabe. Al revés en escritorio, donde son ocho y
   los puntos sí sirven para saltar directo. */
.dgl-dch-cuenta { flex: 0 0 auto; color: var(--dgl-muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.dgl-dch-controles .dgl-dch-puntos { display: none; }
@media (min-width: 768px) {
  .dgl-dch-controles .dgl-dch-puntos { display: flex; }
  .dgl-dch-cuenta { display: none; }
}

/* QUIEN PIDIÓ QUE NADA SE MUEVA LAS VE LAS DIECISÉIS DE UNA VEZ. `dia_como_hoy.js` no arranca el
   reloj con esta consulta activa, así que sin esto el widget se quedaría clavado en la primera y
   las otras quince no habría forma de verlas. Los controles tampoco se destapan: ya no llevan a
   ninguna parte. Es la misma cortesía que congela el cintillo. */
@media (prefers-reduced-motion: reduce) {
  .dgl-dch-caja {
    grid-row: auto; grid-column: auto !important;
    visibility: visible; opacity: 1; transition: none;
  }
}