/* Extras de las páginas de categoría (mosaico plano y ficha emergente):
   solo los cargan esas páginas. */

/* ---------- Mosaico por categoria (paginas de las puertas) ---------- */

/* El fondo de cada página de categoría lleva el color de su categoría: un
   degradado oscuro tintado con --c (la fija la clase --<categoria> de más
   abajo). Los porcentajes están elegidos para que el blanco, el texto de
   cielo y el enlace de migas conserven contraste AA sobre cualquier tinte
   (peor par ~5:1, comprobado); si se suben, hay que reverificarlos. */
.seccion--mosaico-categoria {
  --c: var(--noche-ponencia); /* respaldo si la página no declara categoría */
  max-width: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 40%, var(--cielo)),
    color-mix(in srgb, var(--c) 26%, var(--cielo-profundo)));
  color: var(--blanco);
  padding-block: var(--esp-7);
}

/* Color de la categoría principal de la página (espejo del mapa de teselas). */
.seccion--mosaico-categoria--ponencia { --c: var(--noche-ponencia); }
.seccion--mosaico-categoria--taller { --c: var(--noche-taller); }
.seccion--mosaico-categoria--formacion { --c: var(--noche-formacion); }
.seccion--mosaico-categoria--podcast { --c: var(--noche-podcast); }
.seccion--mosaico-categoria--video { --c: var(--noche-video); }
.seccion--mosaico-categoria--prensa { --c: var(--noche-prensa); }
.seccion--mosaico-categoria--publicacion { --c: var(--noche-publicacion); }
.seccion--mosaico-categoria--comunidad { --c: var(--noche-comunidad); }

.mosaico-categoria__interior {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

.seccion--mosaico-categoria h1,
.seccion--mosaico-categoria h2 {
  color: var(--blanco);
}

.seccion--mosaico-categoria .antetitulo {
  color: var(--cielo-texto);
}

.mosaico-categoria__intro {
  color: var(--cielo-texto);
  max-width: 58ch;
  margin-top: var(--esp-3);
}

.mosaico-categoria__migas {
  margin-top: var(--esp-4);
  font-size: var(--texto-s);
}

.mosaico-categoria__migas a {
  /* azul claro: conserva AA (>= 4.5:1) sobre el degradado tintado de
     cualquier categoría, incluidos los tonos más claros (verde, prensa) */
  color: #bcd6f5;
}

.mosaico-plano {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--esp-2);
  margin-top: var(--esp-6);
}

.tesela--ponencia { --c: var(--noche-ponencia); }
.tesela--taller { --c: var(--noche-taller); }
.tesela--formacion { --c: var(--noche-formacion); }
.tesela--podcast { --c: var(--noche-podcast); }
.tesela--video { --c: var(--noche-video); }
.tesela--prensa { --c: var(--noche-prensa); }
.tesela--publicacion { --c: var(--noche-publicacion); }
.tesela--comunidad { --c: var(--noche-comunidad); }

.tesela--tinte {
  background: color-mix(in srgb, var(--c, var(--noche-ponencia)) 24%, var(--cielo-profundo));
}

.tesela .tesela__tipo {
  background: var(--c, var(--noche-ponencia));
}

.tesela__anio {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--blanco);
  text-shadow: 0 1px 6px rgba(10, 16, 32, 0.8);
}


/* ---------- Ficha emergente de las teselas ---------- */

.ficha-dialogo {
  /* margin auto explícito: el reset global de márgenes del sitio
     anularía el centrado que el navegador da a los diálogos modales */
  margin: auto;
  border: 0;
  border-radius: var(--radio-tarjeta);
  padding: 0;
  max-width: min(42rem, calc(100vw - 2rem));
  width: 100%;
  max-height: min(85vh, 46rem);
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: 0 24px 70px rgba(10, 16, 32, 0.5);
}

.ficha-dialogo::backdrop {
  background: rgba(15, 22, 41, 0.72);
}

.ficha-dialogo__cerrar {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: var(--objetivo-minimo);
  height: var(--objetivo-minimo);
  border: 1.5px solid var(--borde-control);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--tinta);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.ficha-dialogo__cuerpo {
  padding: var(--esp-6) var(--esp-6) var(--esp-6) var(--esp-6);
  overflow: auto;
  max-height: inherit;
}

.ficha-dialogo__cuerpo .registro {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  max-width: none;
}

.ficha-dialogo__cuerpo h3,
.ficha-dialogo__cuerpo h4 {
  margin-top: var(--esp-3);
  padding-right: var(--esp-7); /* aire para el botón de cerrar */
}

/* ---------- Medios dentro de una ficha (imagen o reproductor) ---------- */

.registro__medio {
  margin: var(--esp-4) 0 0;
  max-width: 34rem;
}

.registro__medio > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-suave);
}

/* la imagen heredada de la tesela es cuadrada (tarjeta de logo o foto):
   más recogida que un fotograma apaisado */
.registro__medio--tesela {
  max-width: 15rem;
}

/* ---------- Archivo plegado (las fichas, recogidas en una linea) ---------- */

.archivo-pliegue > summary {
  cursor: pointer;
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: var(--texto-s);
  color: var(--tinta);
  padding: var(--esp-3) var(--esp-2);
  border-top: 1px solid var(--borde-control);
  border-bottom: 1px solid var(--borde-control);
}

.archivo-pliegue > summary:hover {
  text-decoration: underline;
}

.archivo-pliegue[open] > summary {
  margin-bottom: var(--esp-5);
  border-bottom-style: dashed;
}