/* PIEZA: autoria
 * ---------------------------------------------------------------------------
 * La ficha de autor y la caja de «quien firma» al final del articulo.
 *
 * Colores y tipografia, los que el sitio ya tenia (medidos el 2026-09-02):
 *   #F8F8F8  fondo de pagina    #3A3A3A  texto
 *   #595959  gris del pie       #DDE1E6  linea
 *   #195284  azul del menu      #1E72BD  azul de enlaces
 *   #E3E9EF  panel
 * --------------------------------------------------------------------------- */

/* =========================================================================
   1. El retrato
   Dos capas: las iniciales debajo y la imagen de Gravatar encima, pedida con
   `d=blank`, que devuelve un PNG transparente cuando esa persona no tiene
   foto. Quien tiene foto la ensena; quien no, deja ver el monograma. Sin
   detectar nada y sin siluetas genericas.
   ========================================================================= */

.dl-retrato {
  /* El tamano llega desde PHP en un `style=` EN LINEA, y un estilo en linea
     gana a cualquier selector: mientras PHP escribia directamente
     `--dl-retrato-tam`, NINGUNA media query podia cambiar el tamano del
     retrato. Las reglas de movil que lo intentaban estaban ahi, escritas, sin
     hacer nada — y eso no da ningun error.
     Ahora PHP escribe `--dl-retrato-base` (el valor de partida) y el tamano
     de verdad se calcula aqui, donde una media query si puede pisarlo. El
     96px es el respaldo por si algun dia se pinta un retrato sin base. */
  --dl-retrato-tam: var(--dl-retrato-base, 96px);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--dl-retrato-tam);
  height: var(--dl-retrato-tam);
  border-radius: 50%;
  overflow: hidden;
  background-color: #E3E9EF;
  box-shadow: inset 0 0 0 1px #DDE1E6;
}

.dl-retrato__ini {
  grid-area: 1 / 1;
  font-size: calc(var(--dl-retrato-tam) * 0.34);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #195284;
  line-height: 1;
  user-select: none;
}

.dl-retrato__img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* La foto de verdad (subida a mano desde el perfil) llega ya recortada por
   `wp_get_attachment_image()` a un tamano fijo, asi que no necesita el grid
   de dos capas de las iniciales: solo redondearla. */
.dl-retrato--foto .dl-retrato__img {
  position: static;
}

/* =========================================================================
   2.b Redes sociales
   Extraidas de la propia biografia (ver dl_autoria_redes en autoria.php), no
   son un dato nuevo que rellenar: solo se les da forma de boton en vez de
   quedar perdidas en mitad de una frase.
   ========================================================================= */

.dl-redes {
  display: flex;
  gap: 0.55rem;
  margin: 0.75rem 0;
}

/* Icono real en SVG (ver `dl_autoria_icono_svg()`), no una letra suelta
   metida a mano: era eso lo que no convencia. Cuadrado redondeado, al estilo
   del icono de una app, no un circulo plano — y cada red con SU color de
   marca, no el azul generico del sitio, para que se reconozcan de un
   vistazo. */
.dl-redes__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9375rem;
  height: 1.9375rem;
  border-radius: 6px;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(11, 21, 33, 0.18);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dl-redes__link svg { display: block; }
.dl-redes__link:hover,
.dl-redes__link:focus {
  /* Sin esto el icono se veia azul al pasar el raton: una regla generica
     del propio tema, `a:hover{color:#1c8edb}`, tiene MAS especificidad en
     el estado :hover que un simple `.dl-redes__link{color:#fff}` en reposo
     (una pseudo-clase cuenta como una clase mas), asi que ganaba ella y el
     SVG (que usa `fill="currentColor"`) heredaba ese azul en vez del blanco.
     Se fija el blanco tambien en :hover para que nada mas pueda tocarlo. */
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(11, 21, 33, 0.22);
}
.dl-redes__link:focus-visible {
  outline: 3px solid #1E72BD;
  outline-offset: 2px;
  transform: none;
}

/* Azul oficial de LinkedIn junto a negro de X: cada marca con su propio
   color, no el azul generico del sitio.
   El trazo del icono de LinkedIn dibuja el CUADRADO Y LAS LETRAS "in" en una
   sola pieza: la parte solida (el cuadrado menos las letras) sale rellena, y
   las letras se ven porque son huecos por los que asoma lo que haya detras.
   Sin fondo propio, esos huecos ensenaban el fondo CLARO de la pagina en vez
   de azul, y el icono entero quedaba casi invisible: eso era el problema
   real, no que sobrara el fondo. Lo que sobraba era el tamano: un SVG
   pequeno (16px) dentro de un badge grande (36px) con sombra propia se leia
   como dos cajas azules metidas una en otra. Se soluciona igualando: el SVG
   pasa a ocupar casi todo el badge, y ya no hay una caja pequena flotando
   dentro de una grande. */
.dl-redes__link--linkedin { background-color: #0A66C2; }
.dl-redes__link--linkedin:hover,
.dl-redes__link--linkedin:focus { background-color: #0857A6; }
.dl-redes__link--linkedin svg { width: 26px; height: 26px; }

.dl-redes__link--twitter { background-color: #0B0B0B; }
.dl-redes__link--twitter:hover,
.dl-redes__link--twitter:focus { background-color: #000000; }
.dl-redes__link--twitter svg { width: 13px; height: 13px; }

/* En la caja del final del articulo, un pelin mas pequenos todavia: ahi
   acompanan, no protagonizan. */
.dl-autor .dl-redes__link { width: 1.6875rem; height: 1.6875rem; border-radius: 5px; }
.dl-autor .dl-redes__link--linkedin svg { width: 22px; height: 22px; }
.dl-autor .dl-redes__link--twitter svg { width: 11px; height: 11px; }

/* =========================================================================
   2. La credencial
   La titulacion, en una linea, bajo el nombre. Es el dato que decide si
   sigues leyendo, asi que va antes que el relato biografico.
   ========================================================================= */

.dl-credencial {
  /* Pegado al nombre a proposito ("juntalo mas"): sin filete de por medio, el
     nombre y la credencial se leen como una sola unidad, nombre + quien es. */
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #195284;
  line-height: 1.4;
}

.dl-credencial--caja {
  margin: 0.05rem 0 0.35rem;
  font-size: 0.84375rem;
}

/* =========================================================================
   3. La ficha de autor
   Se le da forma a la cabecera que YA monta GeneratePress
   (`header.page-header` > `h1.page-title` > `span.vcard` + `div.author-info`).
   No se anade una propia: al intentarlo salieron dos H1 y la biografia
   repetida dos veces en la misma pagina.
   ========================================================================= */

/* GeneratePress mete su `page-header` DENTRO del contenedor del listado, o
   sea que en la rejilla de tarjetas cuenta como una celda mas. Sin esto, la
   ficha entera (retrato, nombre y biografia) se estrujaba en la primera
   columna, con 290px de ancho y dos tarjetas al lado. Ocupa todas las
   columnas. */
body.author .generate-columns-container > .page-header,
body.author .page-header {
  grid-column: 1 / -1;
}

/* Posicion absoluta para el retrato, NO CSS Grid con `grid-row: 1 / -1`.
   Se probo con grid (retrato ocupando todas las filas, el resto en la
   columna 2) y salio un fallo dificil de sospechar: al abarcar todas las
   filas, Chrome le daba a la PRIMERA fila implicita la altura completa del
   retrato (104px), y como el titulo caia justo en esa primera fila con
   `align-items:start`, quedaba pegado arriba dejando 66px de hueco VACIO
   debajo suyo antes de que empezara la credencial. Medido con precision por
   CDP: el margen entre titulo y credencial era de 2-3px, pero el hueco real
   en pantalla era de 66px — la diferencia completa era esa fila inflada.
   Con posicion absoluta el retrato no participa en ningun flujo de filas: el
   texto se apila con sus propios margenes, sin que el alto del retrato
   afecte a nada. */
body.author .page-header {
  position: relative;
  /* 104px del retrato + 1.5rem de separacion */
  padding-left: calc(104px + 1.5rem);
  min-height: 104px;
  margin-bottom: 0.5rem;
  padding-bottom: 0;
  border-bottom: 0;
}

body.author .page-header .dl-retrato {
  position: absolute;
  top: 0;
  left: 0;
}

body.author .page-header .page-title {
  /* Sin filete ni relleno debajo: quedaba como una raya azul suelta,
     desconectada del resto ("la linea esa azul fea"). El nombre y la
     credencial se leen mejor pegados, sin nada que los separe. */
  margin: 0 0 0.15rem;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: #3A3A3A;
  justify-self: start;
  /* En castellano hay apellidos largos de verdad; a 320px se salen si no se
     les deja partir. */
  overflow-wrap: anywhere;
  min-width: 0;
}

body.author .page-header .vcard {
  font-style: normal;
  border: 0;
  padding: 0;
}

body.author .author-info {
  /* La biografia es lo que se viene a leer: medida de lectura comoda, no la
     anchura entera del contenedor. */
  max-width: 38rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #3A3A3A;
}
body.author .author-info p { margin: 0 0 0.6rem; }
body.author .author-info p:last-child { margin-bottom: 0; }
body.author .author-info a {
  color: #1E72BD;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
body.author .author-info a:focus-visible {
  outline: 2px solid #1E72BD;
  outline-offset: 2px;
  border-radius: 2px;
}

.dl-autor-ficha__cuenta {
  margin: 0.8rem 0 0;
  font-size: 0.8125rem;
  color: #595959;
  font-variant-numeric: tabular-nums;
}

/* Hace de separador entre la ficha de la persona y su listado. Va dentro de
   la cabecera del tema (ver el porque en autoria.php), asi que la regla
   superior es lo que marca el corte. */
.dl-autor-ficha__listado {
  margin: 1.5rem 0 0.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #DDE1E6;
  font-size: 1.25rem;
  font-weight: 700;
  color: #3A3A3A;
}
/* Ocupa el ancho completo aunque la cabecera este en dos columnas. */
body.author .page-header .dl-autor-ficha__listado {
  grid-column: 1 / -1;
}

/* --- El listado, en tarjetas ---------------------------------------------
   GeneratePress lo maqueta con columnas flotadas y sin imagen. Aqui se
   convierte en una rejilla de verdad, y SOLO en la ficha de autor: tocar los
   ajustes del tema cambiaria tambien las categorias, que no es lo pedido. */

body.author .generate-columns-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 1.5rem;
  margin: 0;
}

body.author .generate-columns-container > article {
  width: auto;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
  display: flex;
}

body.author .generate-columns-container .inside-article {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  background-color: #FFFFFF;
  border: 1px solid #DDE1E6;
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.author .generate-columns-container .inside-article:hover { border-color: #1E72BD; }

.dl-tarjeta__img { display: block; line-height: 0; }
.dl-tarjeta__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* El `1rem` de abajo NO es opcional, y en la primera version faltaba: el
   relleno inferior de la tarjeta lo ponia `.entry-summary` (`padding: 0 1rem
   1rem`), y al ocultar el resumen se fue con el. Medido: con un titular de
   cuatro lineas, la linea de seccion y fecha acababa a 1px del borde de la
   tarjeta. Con titulares cortos no se notaba, porque la fila estira todas las
   tarjetas al alto de la mas larga y sobraban 44px. */
body.author .generate-columns-container .entry-header { padding: 0.9rem 1rem 1rem; }

body.author .generate-columns-container .entry-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
body.author .generate-columns-container .entry-title a {
  color: #3A3A3A;
  text-decoration: none;
}
body.author .generate-columns-container .entry-title a:hover {
  color: #1E72BD;
  text-decoration: underline;
}

body.author .generate-columns-container .entry-summary {
  margin: 0.5rem 0 0;
  padding: 0 1rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #595959;
}
body.author .generate-columns-container .entry-summary p { margin: 0; }
body.author .generate-columns-container .read-more {
  color: #1E72BD;
  white-space: nowrap;
}

/* --- Seccion y fecha de cada entrada del listado -------------------------
   Lo pinta `dl_autoria_ficha_meta()` en autoria.php. Es lo que permite
   elegir sin leerse los 20 titulares: por tema y por antiguedad, que en
   legislacion no da igual. */
.dl-tarjeta__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--dl-tinta-suave);
}

.dl-tarjeta__seccion {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  /* Tinta, NO el azul del sitio: esto no se puede pulsar, asi que no puede
     parecer un enlace. Se separa de la fecha por peso y versalitas. */
  color: var(--dl-tinta);
  /* Hay nombres de categoria largos de verdad ("Trafico, circulacion de
     vehiculos y seguridad vial"): sin tope ocupan dos lineas y empujan la
     fecha a una tercera, y la linea de datos acaba siendo mas alta que el
     titular. Se corta con puntos suspensivos. */
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-tarjeta__fecha { font-variant-numeric: tabular-nums; }

/* El punto separador se dibuja con el color de la linea, no con el del
   texto: separa, no compite. */
.dl-tarjeta__sep { color: var(--dl-linea); }

/* El resumen no tiene nada dentro: el tema tiene la longitud de extracto a
   cero, asi que lo unico que salia era el enlace "... Leer mas" colgando de
   un resumen vacio. Con la seccion y la fecha ya hay algo real que leer
   debajo del titular. */
body.author .generate-columns-container .entry-summary { display: none; }

/* --- «Ver más artículos» -------------------------------------------------
   Sigue siendo la paginacion real del tema, con enlaces de verdad
   (page/2/, page/3/...): un buscador puede recorrer los 355 articulos.
   `autoria.js` intercepta el clic y trae la pagina siguiente por `fetch`
   para que se cargue aqui mismo, sin recargar; si JavaScript falla, el
   enlace sigue navegando de la forma normal. Es mejora progresiva, no un
   reemplazo. */

/* Mismo problema que ya paso con `.page-header`: `#nav-below` es HIJO
   DIRECTO de `.generate-columns-container`, asi que la rejilla lo trataba
   como una tarjeta mas y le daba el ancho de UNA columna (272px medidos, no
   los 1184px del contenido). El boton se veia "centrado", pero centrado
   dentro de esa columna estrecha, pegado a la izquierda de la pagina entera. */
body.author .generate-columns-container > .paging-navigation {
  grid-column: 1 / -1;
}

body.author .paging-navigation {
  margin-top: 2rem;
  /* Sin filete arriba: era otra raya suelta sin nada que separar (el
     listado ya tiene su propio corte de tarjetas). */
  padding-top: 0;
  border-top: 0;
  background: transparent;
  text-align: center;
}
body.author .paging-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Decision del usuario: nada de numeros de pagina, SOLO "Ver mas articulos".
   `dl_autoria_etiqueta_paginacion()` en autoria.php ya le pide a
   `paginate_links()` que no genere los numeros intermedios ni los de los
   extremos (`mid_size`/`end_size` a 0); el numero de la pagina ACTUAL,
   WordPress lo sigue emitiendo siempre porque es comportamiento del nucleo,
   asi que aqui se oculta el que sobreviva ademas del enlace "Anteriores".
   Los enlaces reales SIGUEN existiendo en el HTML (por eso un buscador puede
   recorrer las paginas siguientes): esto solo los quita de la vista. */
body.author .paging-navigation .page-numbers:not(.next) {
  display: none;
}
/* GeneratePress pinta ADEMAS un bloque separado de "Entradas anteriores" /
   "Entradas siguientes" (clases `.nav-previous` / `.nav-next`, texto plano,
   sin clase `.page-numbers`), delante de los numeros. No lo cazaba la regla
   de arriba porque no comparte clase. Fuera tambien: es la misma idea de
   paginacion que "Ver mas articulos" ya cubre. */
body.author .paging-navigation .nav-previous,
body.author .paging-navigation .nav-next {
  display: none;
}

/* «Ver más artículos»: el unico enlace visible, con forma de boton. */
body.author .paging-navigation .page-numbers.next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 1.1rem;
  border: 1px solid #195284;
  border-radius: 3px;
  background-color: #195284;
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.author .paging-navigation a.page-numbers.next:hover {
  background-color: #0E3A61;
  border-color: #0E3A61;
}
body.author .paging-navigation .page-numbers.next:focus-visible {
  outline: 3px solid #1E72BD;
  outline-offset: 2px;
}

/* Estado de carga, mientras `autoria.js` trae la pagina siguiente. El icono
   gira; `prefers-reduced-motion` lo congela mas abajo (seccion 5). */
body.author .paging-navigation .page-numbers.next[aria-busy="true"] {
  cursor: progress;
  opacity: 0.85;
}
body.author .paging-navigation .page-numbers.next .dl-girando {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: dl-girar 700ms linear infinite;
  vertical-align: -0.15em;
}
@keyframes dl-girar { to { transform: rotate(360deg); } }

/* =========================================================================
   4. La caja de autor, al final del articulo
   ========================================================================= */

.dl-autor {
  margin: 2.25rem 0 0;
  padding: 1.1rem 1.25rem;
  background-color: #F8F8F8;
  border: 1px solid #DDE1E6;
  border-left: 3px solid #195284;
  border-radius: 0 3px 3px 0;
}

.dl-autor__fila {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.dl-autor__texto { min-width: 0; }

.dl-autor__nombre {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #3A3A3A;
  line-height: 1.3;
}
.dl-autor__nombre a {
  color: #3A3A3A;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dl-autor__nombre a:hover { color: #1E72BD; border-bottom-color: #1E72BD; }
.dl-autor__nombre a:focus-visible {
  outline: 2px solid #1E72BD;
  outline-offset: 2px;
  border-radius: 2px;
  transition: none;
}

.dl-autor__bio {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #3A3A3A;
}
.dl-autor__bio p { margin: 0 0 0.5rem; }
.dl-autor__bio p:last-child { margin-bottom: 0; }

.dl-autor__bio a,
.dl-autor__mas a {
  color: #1E72BD;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.dl-autor__bio a:hover,
.dl-autor__mas a:hover { text-decoration-thickness: 2px; }
.dl-autor__bio a:focus-visible,
.dl-autor__mas a:focus-visible {
  outline: 2px solid #1E72BD;
  outline-offset: 2px;
  border-radius: 2px;
}

.dl-autor__mas {
  margin: 0.65rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* =========================================================================
   5. Movil
   ========================================================================= */

@media (max-width: 600px) {
  /* --- La ficha ----------------------------------------------------------
     ESTO ESTABA ROTO, y el fallo es de los que no se ven leyendo el CSS.
     Estas reglas pedian `grid-template-columns` y `grid-column` sobre
     `.page-header`, que dejo de ser una rejilla cuando el retrato paso a
     posicion absoluta (ver la seccion 3): propiedades de rejilla sobre algo
     que no lo es no hacen NADA, y no dan error. Lo que si seguia aplicandose
     era el `padding-left: calc(104px + 1.5rem)` de escritorio, asi que a
     390px la biografia se leia en una tira de 222px medidos: tres palabras
     por linea.

     La solucion no es otra rejilla, es un `float`: el retrato se pone a la
     izquierda, el nombre y la credencial se acomodan a su lado, y en cuanto
     el texto pasa de largo el retrato, la biografia recupera el ancho
     entero ella sola. Sin numeros magicos y sin una segunda maqueta que
     mantener. */
  body.author .page-header {
    position: static;
    padding-left: 0;
    min-height: 0;
    margin-bottom: 1.25rem;
  }
  body.author .page-header .dl-retrato {
    position: static;
    float: left;
    --dl-retrato-tam: 88px;
    margin: 0.15rem 0.9rem 0.4rem 0;
  }
  body.author .page-header .page-title { font-size: 1.4375rem; }
  body.author .author-info {
    max-width: none;
    /* La biografia arranca DEBAJO del retrato, no envolviendolo. Sin esto sus
       dos primeras lineas quedaban sangradas al lado de la foto y el resto a
       ancho completo: un borde izquierdo en escalera, feo de leer. Y no cuesta
       alto: el nombre y la credencial ya suman mas que los 72px del retrato,
       asi que el hueco que deja el `clear` es de cero. */
    clear: left;
  }

  /* El titulo del listado tiene que bajar del todo del retrato flotado, o se
     le mete al lado. */
  body.author .page-header .dl-autor-ficha__listado { clear: both; }

  .dl-autor {
    margin-top: 1.75rem;
    padding: 0.9rem 1rem;
  }
  .dl-autor__fila { gap: 0.8rem; }
  .dl-autor__bio { font-size: 0.90625rem; }

  /* --- El listado: de tarjetas a filas -----------------------------------
     Con tarjetas, 20 articulos median 10.723px de alto (medido a 390px): una
     foto de archivo de 390x270 por articulo, para ver ARTICULO Y MEDIO por
     pantalla. Las fotos son genericas y no ayudan a elegir; el titular, la
     seccion y la fecha si.

     En filas se ven seis de una vez y la miniatura sigue dando el color de la
     pagina, solo que a 84px en vez de a 390. */
  body.author .generate-columns-container {
    display: block;
    gap: 0;
  }

  body.author .generate-columns-container > article {
    display: block;
    margin: 0;
  }

  body.author .generate-columns-container .inside-article {
    display: grid;
    /* `minmax(0, 1fr)` y no `1fr`: con `1fr` a secas un titular sin espacios
       ensancha la columna y saca la pagina de madre en horizontal. */
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    padding: 0.9rem 0;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--dl-linea);
    border-radius: 0;
    overflow: visible;
  }
  /* El borde de color al pasar por encima no vale en una fila sin caja: se
     marca la fila entera con un fondo muy suave. */
  body.author .generate-columns-container .inside-article:hover {
    border-color: var(--dl-linea);
    background-color: var(--dl-azul-100);
  }

  body.author .generate-columns-container .dl-tarjeta__img {
    grid-column: 1;
    grid-row: 1;
  }
  body.author .generate-columns-container .dl-tarjeta__img img {
    /* Cuadrada: a 84px de ancho, un 16/9 son 47px de alto y no se distingue
       nada dentro. */
    aspect-ratio: 1 / 1;
    border-radius: var(--dl-radio);
  }

  body.author .generate-columns-container .entry-header {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    min-width: 0;
  }

  body.author .generate-columns-container .entry-title { font-size: 0.9375rem; }

  /* Fuera el resumen: el tema tiene la longitud de extracto a cero, asi que
     lo unico que pintaba era un "... Leer mas" colgando de nada. */
  body.author .generate-columns-container .entry-summary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-autor a,
  body.author .generate-columns-container .inside-article,
  body.author .paging-navigation .nav-links a { transition: none; }
  body.author .paging-navigation .dl-girando { animation: none; }
  .dl-redes__link { transition: none; }
  .dl-redes__link:hover { transform: none; }
}

/* En Modelos el foco es el documento a descargar, no quien lo escribio:
   fuera la caja de autor al final del articulo. */
article.category-modelos .dl-autor {
  display: none;
}