/*
Theme Name: JUSTIC-IA (maqueta)
Theme URI: https://maqueta.franciscoconejero.com/
Author: Francisco José Conejero Molla
Description: Tema hijo de Twenty Twenty-Five para la maqueta de la web del proyecto JUSTIC-IA. Bloques nativos, sin constructor visual y sin dependencias de pago.
Template: twentytwentyfive
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: justicia
*/

/* ---------------------------------------------------------------------------
   CONTRATO DE DIRECCION

   TESIS. El sitio es el calendario del proyecto, y un calendario dibuja
   tambien los meses vacios. Rechaza la disposicion que esta categoria
   siempre entrega: heroe con la frase de mision, tres tarjetas de impacto y
   carrusel de fotos.

   MUNDO PROPIO. Gris frio #ECEEEC de papel, tinta #14181A, petroleo #0B5F58.
   Archivo variable recorriendo su eje de anchura: estrecha en los railes de
   fecha, normal en lectura. Filetes, nunca tarjetas. Radio cero en todo: un
   calendario esta rayado, no redondeado. Sin sombras y sin motion.

   RELATO. Se ven las dos cosas que de verdad pasaron, en su mes real,
   rodeadas de los meses donde no hay nada documentado. La estructura es
   solida y el contenido es de ONGAWA.

   PRIMER PANTALLAZO. El aviso de maqueta en flujo. Debajo el nombre resuelto
   tipograficamente con el hueco de la marca vacio y rotulado. Debajo el rail
   de 2026: doce meses en fila, diez delgados y vacios, dos altos y llenos.

   FORMA. Calendario academico. Fijada por el encargo, sin sorteo.
--------------------------------------------------------------------------- */

/* Archivo variable, autoalojada, SIL Open Font License 1.1.
   Copia de la licencia en assets/fuentes/OFL.txt */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('assets/fuentes/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('assets/fuentes/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* Paleta. Todos los pares en uso medidos con contraste.py: cero fallos.
     Regla dura: el acento NUNCA va sobre tinta (2,38:1). */
  --papel:    #ECEEEC;
  --hueco:    #E4E7E5;
  --tinta:    #14181A;
  --suave:    #4E5654;  /* 6,47:1 sobre papel */
  --acento:   #0B5F58;  /* 6,45:1 sobre papel */
  --filete:   #C3C8C5;  /* decorativo */
  --borde-ui: #5A6360;  /* 5,31:1, para todo lo que se pulsa */
  --pie-rotulo: #B9C0BD; /* 9,93:1 sobre tinta, para los rotulos del pie */

  --canalon: 1.25rem;
  --rail: 7.5rem;
  --medida: 33rem;  /* 528 px. En ch cambiaba con el cuerpo de cada elemento */
  --tope: 78rem;
}

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

/* El filtro oculta fichas con el atributo hidden, y el navegador lo aplica con
   [hidden]{display:none} desde su propia hoja. Cualquier display de autor le
   gana, y .j-act declara grid dos veces (298 y 605). Sin esta linea el filtro
   marcaba las cinco fichas como ocultas, el contador decia «0 fichas a la
   vista», la caja de vacio aparecia, y las cinco seguian en pantalla a altura
   completa encima de ella. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body.wp-site-blocks,
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 100%;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  font-synthesis-weight: none;
}

/* Todo cuadrado. Un calendario esta rayado, no redondeado. */
a, button, input, select, textarea, img, table, th, td { border-radius: 0; }

img { max-width: 100%; height: auto; }

/* --- foco visible en todo lo enfocable, no solo en enlaces --- */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}
/* Sobre tinta el acento da 2,38:1 y no llega a los 3:1 que pide el criterio
   1.4.11 de WCAG 2.1 para un elemento de interfaz. Es la misma regla que la
   nota de direccion ya escribia para el texto, y al anillo de foco se le habia
   escapado. Sobre fondo oscuro el foco va en papel, que da 15,32:1. Afecta al
   enlace de salto y al del aviso, o sea a las dos primeras paradas del
   tabulador. */
.j-aviso :focus-visible,
.j-pie :focus-visible,
.j-saltar:focus-visible {
  outline-color: var(--papel);
}

/* --- saltar al contenido ---
   Escondido con recorte y no con `left: -9999px`. Esa tecnica es de otra epoca
   y ademas ensanchaba el area desplazable: a 320 px el documento media 357 px
   de ancho. Lo tapaba el relleno lateral de <body>, y al quitarlo salio. */
.j-saltar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--tinta);
  color: var(--papel);
  text-decoration: none;
}
.j-saltar:focus {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  padding: .75rem 1rem;
  z-index: 50;
}

/* --- envoltura --- */
.j-ancho { max-width: var(--tope); margin-inline: auto; padding-inline: var(--canalon); }

/* --- tipografia --- */
.j-display {
  font-size: clamp(2.1rem, 5.6vw, 4.2rem);
  font-weight: 500;
  font-stretch: 92%;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
h2, .j-h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  font-weight: 500;
  font-stretch: 95%;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .75rem;
  text-wrap: balance;
}
h3, .j-h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 .4rem;
}
/* Declarado con clase para ganarle al `text-wrap: pretty` que WordPress emite
   despues de esta hoja sobre h1..h6 y p, con la misma especificidad. */
.wp-block-heading, .j-h2, .j-act-titulo, .j-uni-nombre, .j-eje-nombre {
  text-wrap: balance;
}
p, li { max-width: var(--medida); }

/* Los li heredaban los 40 px de sangria del navegador y empezaban donde no
   empieza nada mas, en un diseno cuya gramatica es que todo cuelga de un rail. */
ul.wp-block-list, ol.wp-block-list { padding-left: 1.75rem; }

/* Enlace visitado, pulsado, y control deshabilitado. */
a:visited { color: var(--suave); }              /* 6,47:1 sobre papel */
a:active { color: var(--tinta); }
.j-pie a:visited, .j-pie a:active { color: var(--papel); }
.j-boton:active { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.j-boton:disabled { color: var(--suave); border-color: var(--filete); cursor: default; background: transparent; }
p { margin: 0 0 1rem; }

/* rotulo condensado: meses, metadatos, etiquetas de rail.
   La versalita aqui es convencion de calendario, no un adorno de seccion. */
.j-rotulo {
  font-size: .78rem;
  font-weight: 600;
  font-stretch: 78%;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--suave);
}

.j-dato { font-size: .875rem; color: var(--suave); }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--tinta); }

/* --- el aviso de maqueta. En flujo, arriba, sin cerrar --- */
.j-aviso {
  background: var(--tinta);
  color: var(--papel);
  padding: 1.1rem 0 1.2rem;
  border-bottom: 1px solid var(--tinta);
}
.j-aviso p { max-width: 74ch; margin: 0; font-size: .9375rem; line-height: 1.55; }
.j-aviso strong { font-weight: 700; }
.j-aviso a { color: var(--papel); text-decoration-thickness: 1px; }
.j-aviso a:hover { color: var(--papel); text-decoration-thickness: 2px; }

/* --- cabecera --- */
.j-cabecera { border-bottom: 1px solid var(--tinta); }
.j-cabecera-fila {
  display: grid;
  gap: 1.5rem 2rem;
  padding: 1.75rem 0 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 56rem) {
  .j-cabecera-fila { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
}
.j-marca { display: grid; gap: .6rem; }
.j-marca-nombre {
  font-size: clamp(1.55rem, 3.4vw, 2.1rem);
  font-weight: 700;
  font-stretch: 86%;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
  color: var(--tinta);
}
.j-marca-nombre a { color: inherit; text-decoration: none; }
.j-marca-nombre a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.j-marca-pie { font-size: .8125rem; color: var(--suave); max-width: 46ch; margin: 0; }

/* el hueco de la identidad grafica, visible a proposito */
.j-hueco-marca {
  display: grid;
  place-items: center;
  min-height: 4rem;
  padding: .6rem .9rem;
  border: 1px dashed var(--borde-ui);
  background: var(--hueco);
  max-width: 18rem;
}
.j-hueco-marca span {
  font-size: .8125rem;
  font-stretch: 100%;
  letter-spacing: 0;
  text-transform: none;
  color: var(--suave);
  text-align: center;
  line-height: 1.35;
  max-width: none;
}

/* --- navegacion. Una sola linea en escritorio --- */
.j-nav { border-top: 1px solid var(--filete); }
.j-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 0;   /* a 390 px las filas se tocaban y dos dianas de 46 px pegaban */
}
.j-nav li { max-width: none; }
.j-nav a {
  display: block;
  padding: .7rem 1rem .7rem 0;
  margin-right: 1.1rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
}
.j-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.j-nav a[aria-current="page"] {
  color: var(--acento);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
/* La seccion a la que pertenece una ficha o un archivo. Se marca, pero mas
   flojo que la pagina exacta, porque no es la misma cosa. */
.j-nav a[aria-current="true"] {
  color: var(--acento);
  font-weight: 700;
}

/* --- secciones --- */
/* El filete cruza toda la anchura solo donde la composicion la usa de verdad:
   el calendario, las filas de actividad, los ejes, el filtro y las tablas, que
   llevan campo derecho. En las secciones de prosa el texto ocupa 531 px de los
   1.121 del contenedor, y un filete de 1.121 dibujaba una rejilla que la
   pagina no ocupa. Ahi el filete se recorta a la columna de lectura, que es lo
   que hace una agenda: la raya va debajo de lo que hay, no de lado a lado. */
.j-seccion { padding-block: 3rem; position: relative; }
.j-seccion::after {
  content: "";
  position: absolute;
  left: var(--canalon);
  bottom: 0;
  width: min(calc(100% - var(--canalon) * 2), var(--medida));
  border-bottom: 1px solid var(--filete);
}
.j-seccion:has(.j-calendario)::after,
.j-seccion:has(.j-act)::after,
.j-seccion:has(.j-eje)::after,
.j-seccion:has(.j-filtro)::after,
.j-seccion:has(.j-tabla)::after,
.j-seccion:has(.j-uni)::after { width: calc(100% - var(--canalon) * 2); }
.j-seccion:last-of-type::after { content: none; }
/* Una seccion que acaba en una lista ya cerrada no necesita su propio filete:
   quedaban dos rayas a 72 px, la de tinta que cierra la lista y la clara que
   cierra la seccion. */
.j-seccion:has(.j-ejes)::after,
.j-seccion:has(.j-universidades)::after,
.j-seccion:has(.j-lista)::after { content: none; }
@media (min-width: 60rem) { :root { --canalon: 2.5rem; } .j-seccion { padding-block: 4.5rem; } }

.j-intro { max-width: var(--medida); }
.j-intro p { font-size: 1.0625rem; }

/* --- el rail del calendario. Meses en filas --- */
.j-calendario { border-top: 1px solid var(--tinta); margin-top: 1.75rem; }

.j-mes {
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--filete);
}
@media (min-width: 48rem) {
  .j-mes {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: 0 1.75rem;
    align-items: baseline;
  }
}
.j-mes-etiqueta { display: flex; align-items: baseline; gap: .5rem; }
.j-mes-etiqueta .j-anyo { font-stretch: 78%; font-weight: 500; color: var(--borde-ui); }

.j-mes--vacio { padding: .55rem 0; }
.j-mes--vacio .j-mes-cuerpo { font-size: .875rem; color: var(--suave); min-height: 1px; }
.j-mes--lleno { padding: 1.4rem 0 1.6rem; border-bottom: 1px solid var(--tinta); }
.j-mes--hoy .j-mes-etiqueta::after {
  content: "hoy";
  font-size: .68rem;
  font-stretch: 78%;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acento);
  border: 1px solid var(--acento);
  padding: 0 .3rem;
}

/* una actividad dentro de su mes */
.j-act { display: grid; gap: 1rem; }
@media (min-width: 62rem) {
  .j-act { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 3rem; align-items: start; }
}
.j-act-principal { display: grid; gap: .45rem; align-content: start; }
.j-act-margen { display: grid; gap: .55rem; align-content: start; }
.j-act-margen .j-etiquetas { margin: 0; }
.j-act-margen .j-estado { margin: 0; max-width: 46ch; }
.j-act-margen .j-fuente { margin: 0; max-width: 46ch; }
.j-act + .j-act { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--filete); }
.j-act-fecha {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  font-stretch: 78%;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--acento);
}
.j-act-titulo {
  max-width: 26ch;
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 600;
  font-stretch: 95%;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}
/* El titulo de una actividad, el nombre de una universidad y el de un eje son
   el enlace principal de su bloque. Medidos a 320 y 390 px se quedaban entre
   21 y 28 px de alto, por debajo de los 44 que pide la diana tactil. */
.j-act-titulo a,
.j-uni-nombre a,
.j-eje-nombre a { color: var(--tinta); text-decoration: none; display: inline-block; padding-block: .8rem; }
.j-uni-nombre a:hover,
.j-eje-nombre a:hover { color: var(--acento); text-decoration: underline; text-decoration-thickness: 2px; }
.j-act-titulo a:hover { color: var(--acento); text-decoration: underline; text-decoration-thickness: 2px; }
.j-act-donde { font-size: .9375rem; color: var(--suave); max-width: 44ch; margin: 0; }

/* etiquetas de taxonomia. Sin puntos de color, sin pastillas de adorno */
.j-etiquetas { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.j-etiquetas li { max-width: none; }
.j-etiquetas a, .j-etiqueta, .j-etiqueta-actual {
  display: inline-block;
  font-size: .75rem;
  font-stretch: 82%;
  font-weight: 500;
  padding: .16rem .45rem;
  border: 1px solid var(--filete);
  color: var(--suave);
  text-decoration: none;
  background: var(--papel);
}
.j-etiquetas a:hover { border-color: var(--borde-ui); color: var(--tinta); }
/* La etiqueta del archivo en el que ya estas. Misma caja y mismo tamano que
   las demas, con el fondo del hueco para que se vea que no se pulsa. */
.j-etiqueta-actual { background: var(--hueco); font-weight: 700; }

/* la marca de fuente, que es la pieza que sostiene todo el prototipo */
.j-fuente { font-size: .8125rem; color: var(--suave); margin: 0; max-width: 60ch; }
.j-fuente a { color: var(--acento); }

/* el hueco declarado. Nunca dice "proximamente" */
.j-pendiente {
  border: 1px dashed var(--borde-ui);
  background: var(--hueco);
  padding: .85rem 1rem;
  font-size: .875rem;
  color: var(--suave);
  max-width: 62ch;
}
.j-pendiente strong { color: var(--tinta); font-weight: 600; }
.j-pendiente p { max-width: none; margin: 0; }
.j-pendiente p + p { margin-top: .5rem; }

/* --- pie --- */
.j-pie { background: var(--tinta); color: var(--papel); padding: 2.75rem 0 3rem; margin-top: 0; }
/* El parrafo que explica los enlaces legales arrancaba a 0 px del ultimo y
   parecia un quinto enlace. */
.j-pie ul + p { margin-top: 1rem; }
.j-pie a { color: var(--papel); }
.j-pie a:hover { color: var(--papel); text-decoration-thickness: 2px; }
/* Un enlace del pie que lleva a la pagina en la que ya estas se marca, para
   que se vea que no va a pasar nada al pulsarlo. Sobre tinta no se puede usar
   el acento, que da 2,38:1, asi que se marca con el peso y sin subrayado. */
/* El elemento del pie que nombra la pagina en la que ya estas. No es enlace. */
.j-pie .j-aqui { font-weight: 700; }
.j-marca-nombre .j-aqui { color: var(--tinta); }
.j-pie p, .j-pie li { color: var(--papel); font-size: .875rem; }
.j-pie-rejilla { display: grid; gap: 2rem; grid-template-columns: 1fr; }
/* En movil el pie llegaba a los 759 px, el 46 % de una pagina corta como la de
   error. Con las dos listas de enlaces en paralelo baja a poco mas de 500 y
   deja de ser lo primero que se ve al bajar. */
@media (max-width: 47.99rem) {
  .j-pie { padding: 1.75rem 0 2rem; }
  .j-pie-rejilla { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .j-pie-rejilla > div:first-child { grid-column: 1 / -1; }
}
@media (min-width: 48rem) { .j-pie-rejilla { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } }
.j-pie h2 { font-size: .78rem; font-stretch: 78%; letter-spacing: .06em; text-transform: uppercase; color: var(--pie-rotulo); margin: 0 0 .7rem; }
.j-pie ul { list-style: none; margin: 0; padding: 0; }
.j-pie li + li { margin-top: .35rem; }

/* --- estado de comprobacion. Lo que devolvio abrir la fuente --- */
/* Sangria francesa. El rotulo es inline-block dentro de un <p>, asi que la
   segunda linea volvia al margen y corria por debajo del propio rotulo. Con
   «PENDIENTE DE CONFIRMAR CON ONGAWA», que mide 258 px, la primera linea se
   quedaba en dos palabras. */
.j-estado {
  margin: .3rem 0 0;
  font-size: .8125rem;
  max-width: var(--medida);
  line-height: 1.45;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .3rem;
  align-items: start;
}
/* La sangria francesa solo cuando el rotulo cabe al lado. «Pendiente de
   confirmar con ONGAWA» mide 190 px, y en la columna de procedencia de una
   ficha de actividad, que anda por los 250, deja la nota en una cinta de
   cincuenta. Manda el ancho del contenedor y no el de la ventana, asi que va
   con consulta de contenedor. Donde no se puede, el rotulo va en su linea. */
.j-act-margen, .j-ficha { container-type: inline-size; }
@container (min-width: 30rem) {
  .j-estado {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: .15rem .4rem;
  }
}
@supports not (container-type: inline-size) {
  @media (min-width: 62rem) {
    .j-estado { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: .15rem .4rem; }
  }
}
.j-estado-rotulo {
  display: inline-block;
  font-stretch: 80%;
  font-weight: 700;
  font-size: .8125rem;   /* 13 px. Antes .72rem, o sea 11,52 px */
  letter-spacing: 0;
  padding: .25rem .5rem;  /* antes .12rem vertical y .45rem lateral */
  margin-right: 0;
  border: 1px solid var(--borde-ui);
  color: var(--tinta);
}
.j-estado--verificada .j-estado-rotulo {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--papel);
}
.j-estado-nota { color: var(--suave); }

.j-act-hora { font-weight: 500; }
.j-vacio { font-size: .875rem; color: var(--suave); margin: 0; }

/* --- filtro --- */
.j-filtro-controles { margin: 0 0 2rem; border: 0; padding: 0; }
.j-grupo { border: 0; padding: 0; margin: 0 0 1.1rem; }
.j-grupo legend { padding: 0; margin: 0 0 .5rem; }
.j-casillas { display: flex; flex-wrap: wrap; gap: .5rem; }

/* La casilla nativa se queda: la mueve el teclado y la lee el lector.
   Se pinta el label, y el foco se dibuja sobre el label. */
.j-casilla { position: relative; }
.j-casilla input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.j-casilla label {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .4rem .8rem;
  border: 1px solid var(--borde-ui);
  background: var(--papel);
  color: var(--tinta);
  font-size: .875rem;
  line-height: 1.25;
  cursor: pointer;
}
.j-casilla input:hover + label { background: var(--hueco); }
.j-casilla input:checked + label {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--papel);
  font-weight: 600;
}
/* El recuento de cada etiqueta. Probadas las dieciocho casillas una a una con
   navegador, trece no devolvian ninguna ficha y se ofrecian como si estuvieran
   vivas. El numero lo dice antes de pulsar. */
.j-casilla-cuenta {
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  font-stretch: 78%;
  font-weight: 600;
  color: var(--suave);
  margin-left: .5rem;
  padding-left: .5rem;
  border-left: 1px solid var(--filete);
}
/* Marcada, el fondo pasa a acento. La tinta suave sobre el acento da 1,3:1, o
   sea ilegible, y ninguna medida automatica lo habria visto porque todas miran
   el estado en reposo. Sobre acento el recuento va en papel, que da 6,45:1. */
.j-casilla input:checked + label .j-casilla-cuenta {
  color: var(--papel);
  border-left-color: var(--papel);
}
.j-casilla--vacia label { color: var(--suave); }
.j-filtro-nota {
  font-size: .875rem;
  color: var(--suave);
  max-width: var(--medida);
  margin: 0 0 1.25rem;
}

.j-casilla input:focus-visible + label {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}
.j-casilla input:checked:focus-visible + label { outline-color: var(--tinta); }

.j-filtro-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: .5rem;
  border-top: 1px solid var(--filete);
}
.j-filtro-cuenta { margin: 0; font-size: .875rem; color: var(--suave); font-weight: 600; }

.j-boton {
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid var(--borde-ui);
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
}
.j-boton:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.j-enlace-boton {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}
.j-enlace-boton:hover { color: var(--tinta); }

.j-sin-resultados {
  border: 1px dashed var(--borde-ui);
  background: var(--hueco);
  padding: 1rem 1.1rem;
  font-size: .9375rem;
  max-width: 62ch;
}

/* --- la lista de actividades --- */
.j-lista { border-top: 1px solid var(--tinta); }
.j-lista .j-act {
  padding: 1.5rem 0 1.65rem;
  border-bottom: 1px solid var(--filete);
  margin: 0;
  border-top: 0;
}
.j-lista .j-act:last-child { border-bottom: 1px solid var(--tinta); }

/* Una lista se abre y se cierra con el filete de tinta, y por dentro se separa
   con el claro. .j-lista lo hacia y las otras tres no: el calendario, los ejes
   y las universidades abrian en tinta y cerraban en gris, asi que el bloque
   quedaba sin rematar por abajo. Es el encuentro que mira primero quien viene
   de la arquitectura. */
.j-calendario .j-mes:last-child,
.j-ejes .j-eje:last-child,
.j-universidades .j-uni:last-child { border-bottom-color: var(--tinta); }

/* --- los cinco ejes --- */
.j-ejes { border-top: 1px solid var(--tinta); margin-top: 1.75rem; }
.j-eje {
  display: grid;
  gap: .9rem;
  padding: 1.9rem 0 2.1rem;
  border-bottom: 1px solid var(--filete);
}
@media (min-width: 52rem) {
  .j-eje { grid-template-columns: 14rem minmax(0, 1fr); gap: 0 3rem; align-items: start; }
  .j-eje-nombre { grid-row: span 2; }
}
.j-eje-nombre {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 600;
  font-stretch: 92%;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.j-eje-texto { margin: 0; font-size: 1.0625rem; }
.j-eje-cita { margin: 0; }

/* la cita literal. Comillas de verdad, sin cursiva, sin filete de color.
   El tamano y el peso se fijan aqui porque el bloque nativo de WordPress
   hereda 36 px y peso 300 del tema padre, y en la misma pagina convivian
   citas a 36 y a 16. La medida en rem y no en ch por lo mismo: el ch se
   resuelve contra el cuerpo de cada elemento. */
.j-cita, .wp-block-quote.j-cita {
  margin: 1.25rem 0;
  padding: 0 0 0 1.1rem;
  border-left: 1px solid var(--borde-ui);
  max-width: var(--medida);
  font-style: normal;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
}
.j-cita p { font-size: 1.0625rem; font-weight: 400; margin: 0 0 .55rem; }
.j-cita p:last-of-type { margin-bottom: .4rem; }
.j-cita cite, .j-cita footer {
  display: block;
  font-size: .8125rem;
  font-style: normal;
  color: var(--suave);
}
.j-cita cite a, .j-cita footer a { color: var(--acento); }

/* --- el marco de una imagen que todavia no existe ---
   Mismo lenguaje que el hueco de la marca: fondo hundido y trazo discontinuo.
   La proporcion va escrita dentro, y los campos debajo, para que se vea que el
   texto alternativo es un campo obligatorio y no un descuido tecnico. */
.j-marco { margin: 1.5rem 0 0; max-width: var(--medida); }
.j-marco-caja {
  display: grid;
  place-items: center;
  border: 1px dashed var(--borde-ui);
  background: var(--hueco);
  color: var(--suave);
}
.j-marco--ancho .j-marco-caja { aspect-ratio: 16 / 9; }
.j-marco--alto .j-marco-caja { aspect-ratio: 4 / 3; }
.j-marco-prop {
  font-size: .78rem;
  font-stretch: 78%;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.j-marco-pie { margin: .7rem 0 0; }
.j-marco-que { font-size: .875rem; color: var(--suave); margin: 0 0 .7rem; max-width: none; }
.j-marco-campos { margin: 0; display: grid; gap: .3rem; border-top: 1px solid var(--filete); padding-top: .6rem; }
.j-marco-campos > div { display: grid; gap: 0 .6rem; }
@media (min-width: 34rem) { .j-marco-campos > div { grid-template-columns: 10rem minmax(0, 1fr); } }
.j-marco-campos dt {
  font-size: .78rem;
  font-stretch: 78%;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--suave);
  margin: 0;
}
.j-marco-campos dd { font-size: .8125rem; color: var(--suave); margin: 0; }

/* --- archivo de taxonomia ---
   El rotulo dice de que lista es esta pagina, y el h1 dice cual. Poner
   «Universidad: Universidad Politecnica de Madrid» en el h1, que es lo que
   entregaba el tema padre, repite la palabra dos veces en la misma linea. */
.j-rotulo--archivo { margin: 0 0 .35rem; }
.j-volver { margin: 2rem 0 0; font-size: .9375rem; }
.j-volver a { color: var(--acento); }

/* --- universidades --- */
.j-universidades { border-top: 1px solid var(--tinta); margin-top: 1.75rem; }
.j-uni { padding: 1.9rem 0 2.1rem; border-bottom: 1px solid var(--filete); display: grid; gap: .9rem; }
.j-uni-nombre {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 600;
  font-stretch: 92%;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
}
.j-uni-sigla {
  font-size: .78rem;
  font-stretch: 78%;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--suave);
  border: 1px solid var(--filete);
  padding: .1rem .38rem;
}
.j-uni-actividades .j-act { padding: 0; border: 0; grid-template-columns: 1fr; gap: .6rem; }
.j-uni-actividades .j-act + .j-act { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--filete); }

/* --- ficha de una actividad --- */
.j-ficha { display: grid; gap: 1.4rem; padding-top: 2.25rem; }
.j-ficha-datos { border-top: 1px solid var(--tinta); margin: 0; }
.j-ficha-datos div {
  display: grid;
  gap: .1rem .5rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--filete);
}
@media (min-width: 40rem) {
  .j-ficha-datos div { grid-template-columns: 11rem minmax(0,1fr); align-items: baseline; }
}
.j-ficha-datos dt { margin: 0; }
.j-ficha-datos dd { margin: 0; max-width: var(--medida); }
.j-ficha-datos div:last-child { border-bottom-color: var(--tinta); }

/* --- tablas de la maqueta, sin filete en cada fila --- */
.j-tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.j-tabla caption { text-align: left; font-size: .8125rem; color: var(--suave); padding-bottom: .6rem; }
.j-tabla th { text-align: left; font-weight: 600; padding: .55rem .8rem .55rem 0; border-bottom: 1px solid var(--tinta); vertical-align: top; }
/* La primera columna es la clave de su fila, asi que va en th con scope. Sin
   eso un lector de pantalla lee los importes sin saber de que campo son. Se
   pinta como se pintaba, que es lo que ya se leia bien. */
.j-tabla tbody th[scope="row"] {
  font-weight: 400;
  border-bottom: 1px solid var(--filete);
}
.j-tabla tbody tr:last-child th[scope="row"] { border-bottom: 1px solid var(--tinta); }
.j-tabla td { padding: .55rem .8rem .55rem 0; border-bottom: 1px solid var(--filete); vertical-align: top; }
/* Sin esto la segunda columna llegaba a 146 caracteres por linea en una pagina
   cuya prosa esta capada a 68. */
.j-tabla td:last-child, .j-tabla th:last-child { max-width: 46rem; }
.j-tabla tr:last-child td { border-bottom: 1px solid var(--tinta); }
.j-desborde { overflow-x: auto; }

/* Solo para lectores de pantalla. Los meses vacios se leen aunque se vean
   en blanco: el silencio funciona mirando, no escuchando. */
.j-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* La rejilla del documento. Alineada a la izquierda contra el rail, no
   centrada: esto es una agenda, no un articulo de revista. */
.j-seccion > * { margin-inline: 0; }

/* El filete de seccion quedaba a 72 px de lo de arriba y a 88 px de lo de
   abajo. Los 16 px de mas son el blockGap de WordPress, que se suma al
   relleno de la seccion. El ritmo lo lleva el relleno, no el hueco. */
.j-seccion + .j-seccion { margin-block-start: 0; }

.j-mes--hoy .j-mes-etiqueta { color: var(--tinta); }

.j-pendiente--corto p { font-size: .8125rem; }
.j-pendiente--corto { padding: .55rem .75rem; }