/* Taller ELIXIR-México 2026 — hoja de estilo.
   Paleta y tipografía según la Guía de marca de ELIXIR 2025:
   azul real #023452 (títulos), gris #4d4848 (texto), naranja #f47d20 (llamadas a la acción),
   verde oliva #bebf32 (acento, con moderación). Tipografía web: Lato.
   Sin recursos externos: la fuente se sirve desde assets/fuentes/. */

/* Poppins: misma tipografía que los banners, solo para títulos de la portada */
@font-face {
  font-family: "Poppins";
  src: url("fuentes/poppins-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fuentes/poppins-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fuentes/lato-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fuentes/lato-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --azul: #023452;
  --gris: #4d4848;
  --naranja: #f47d20;
  --oliva: #bebf32;
  --fondo: #ffffff;
  --fondo-suave: #f3f5f7;
  --borde: #d9dee3;
  --texto: #4d4848;
  --titulo: #023452;
  --enlace: #023452;
  --ancho: 60rem;
  /* Tono de cada semana: la Semana 1 conserva el verde azulado de los banners;
     la Semana 2 usa un azul índigo (el mismo degradado con el tono desplazado 40°) */
  --s1-g1: #0b2b3d; --s1-g2: #0f4a5c; --s1-g3: #137878; --s1-claro: #bff3ea; --s1-acento: #137878;
  --s2-g1: #0c0b3d; --s2-g2: #0f175c; --s2-g3: #133578; --s2-claro: #bfd9f3; --s2-acento: #2f4fb0;
  /* Fondo tenue del panel de cada semana */
  --s1-tinte: #ebf6f4; --s2-tinte: #eceffa;
}

/* Cada sección toma el tono de su semana; fuera de ellas se usa el de la Semana 1 */
:root, #semana-1 {
  --semana-g1: var(--s1-g1); --semana-g2: var(--s1-g2); --semana-g3: var(--s1-g3);
  --semana-claro: var(--s1-claro); --semana-acento: var(--s1-acento); --semana-tinte: var(--s1-tinte);
}
#semana-2 {
  --semana-g1: var(--s2-g1); --semana-g2: var(--s2-g2); --semana-g3: var(--s2-g3);
  --semana-claro: var(--s2-claro); --semana-acento: var(--s2-acento); --semana-tinte: var(--s2-tinte);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0b1d2a;
    --fondo-suave: #10283a;
    --borde: #23405a;
    --texto: #e8eef2;
    --titulo: #ffffff;
    --enlace: #f7a15c;
    --s1-acento: #4fc2b1;
    --s2-acento: #8ea7f0;
    --s1-tinte: #0e2a33; --s2-tinte: #131c3d;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
}

a { color: var(--enlace); text-underline-offset: 0.15em; }
a:focus-visible, summary:focus-visible, .boton:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 3px;
}

.saltar {
  position: absolute; left: -999px; top: 0;
  background: var(--naranja); color: var(--azul); padding: 0.5rem 1rem; font-weight: 700;
}
.saltar:focus { left: 1rem; top: 1rem; z-index: 10; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }

/* Encabezado */
.portada {
  background: var(--azul);
  color: #ffffff;
  padding: 3.5rem 0 3rem;
  border-bottom: 6px solid var(--naranja);
}
.portada .antetitulo {
  margin: 0 0 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--naranja);
}
.portada h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15;
  color: #ffffff;
}
.portada .resumen { max-width: 44rem; margin: 0 0 1.75rem; font-size: 1.15rem; }
.datos {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  margin: 0 0 2rem; padding: 0; list-style: none;
}
.datos strong { display: block; color: var(--oliva); font-size: 0.85rem; letter-spacing: 0.04em; }

.boton {
  display: inline-block;
  background: #f2b134;
  color: #13253a;
  font-weight: 700;
  padding: 0.8rem 1.6rem;
  border-radius: 4px;
  text-decoration: none;
}
.boton:hover { background: #f6c55e; }

/* Navegación */
nav.indice { background: var(--fondo-suave); border-bottom: 1px solid var(--borde); }
nav.indice ul {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem;
  margin: 0; padding: 0.75rem 0; list-style: none;
}
nav.indice a { font-weight: 700; text-decoration: none; }
nav.indice a:hover { text-decoration: underline; }

/* Secciones */
main section.contenedor { padding: 2.75rem 1rem 1rem; }
h2 {
  margin: 0 0 1rem;
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--titulo);
}
h2 .fechas { display: block; font-size: 1.05rem; color: var(--texto); font-weight: 400; margin-top: 0.25rem; }
h3 { margin: 1.5rem 0 0.5rem; font-size: 1.2rem; color: var(--titulo); }
p { max-width: 46rem; }


/* Programa por día: cada día es una fila compacta y desplegable (fecha, título y enlace);
   al abrirla aparecen la descripción y el horario. El borde izquierdo lleva el tono de la semana. */
details.dia { margin: 0 0 0.6rem; }
details.dia > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem;
  list-style: none; cursor: pointer;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-left: 6px solid var(--semana-acento);
  border-radius: 4px;
  padding: 0.7rem 1rem;
}
details.dia > summary::-webkit-details-marker { display: none; }
details.dia[open] > summary { border-radius: 4px 4px 0 0; }
.dia-titulo {
  flex: 1 1 22rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
  margin: 0; font-size: 1.05rem; line-height: 1.35; color: var(--titulo);
}
.dia-fecha {
  font-family: "Poppins", "Lato", sans-serif; font-weight: 600; font-size: 0.8rem;
  background: #f2b134; color: #13253a;
  padding: 0.15rem 0.5rem; border-radius: 4px; white-space: nowrap;
}
/* Avisos del día (salón, cupo, idioma): visibles aunque el día esté plegado */
.dia-notas { font-size: 0.88rem; font-weight: 400; color: var(--texto); }
.ver-mas { font-size: 0.9rem; font-weight: 700; color: var(--enlace); white-space: nowrap; }
.ver-mas::before { content: "▸ "; }
details.dia[open] .ver-mas::before { content: "▾ "; }
details.dia > summary:hover .ver-mas { text-decoration: underline; }
details.dia .cuerpo {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-top: 0;
  border-left: 6px solid var(--semana-acento);
  padding: 1rem 1rem 0.5rem;
  border-radius: 0 0 4px 4px;
}
details.dia .cuerpo > p:first-child { margin-top: 0; }
.subtitulo-horario { margin: 1rem 0 0.25rem; font-size: 1rem; color: var(--titulo); }

/* Cada semana es un panel con fondo tenue de su tono: se ve dónde empieza y dónde termina */
main section.semana {
  background: var(--semana-tinte);
  border-radius: 10px;
  padding: 1rem 1rem 0.75rem;
  margin-top: 2.75rem;
}
main section.semana > p:not(.aviso) { margin: 0 0 1rem; }

/* Texto solo para lectores de pantalla: el título de cada día está dentro del banner */
.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.tabla-envoltura { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
th, td { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--borde); }
th { color: var(--titulo); }
td.hora { white-space: nowrap; font-variant-numeric: tabular-nums; width: 8.5rem; }
tr.pausa td { color: var(--texto); opacity: 0.8; font-style: italic; }
/* Quién imparte la sesión: debajo de la actividad, en una línea propia */
.ponente { display: block; margin-top: 0.15rem; font-size: 0.9rem; font-weight: 700; color: var(--titulo); }

.aviso {
  background: var(--fondo-suave);
  border-left: 4px solid var(--oliva);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  max-width: 46rem;
}

/* Pie */
footer {
  margin-top: 3rem;
  padding: 2rem 0;
  background: var(--fondo-suave);
  border-top: 1px solid var(--borde);
  font-size: 0.95rem;
}
footer p { margin: 0 0 0.5rem; }

/* Banners: se ajustan al ancho disponible sin deformarse */
img.banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0 0 1rem;
}

/* Logotipo de ELIXIR: tamaño fijo y espacio libre alrededor, según la guía de marca */
/* Fila de logotipos de la portada: ELIXIR en su versión en negativo; el escudo de la UNAM (negro)
   y el logotipo del CCG (azul) conservan sus colores institucionales sobre una placa blanca,
   porque el fondo de la portada es oscuro */
.logos-portada {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
}
.logos-portada a { display: block; }
.logo-elixir img { display: block; width: auto; height: 74px; }
.logo-placa { background: #ffffff; border-radius: 8px; padding: 0.4rem 0.6rem; }
.logo-placa img { display: block; width: auto; height: 62px; }
@media (max-width: 480px) {
  .logos-portada { gap: 0.75rem 1rem; }
  .logo-elixir img { height: 56px; }
  .logo-placa img { height: 46px; }
}
.logo-pie { display: inline-block; margin: 0 0 1rem; padding: 0.5rem 0; }
.logo-pie img { display: block; width: 110px; height: auto; }

/* Portada con la misma estética que los banners: degradado, etiqueta menta,
   pastilla amarilla, título en Poppins e ilustración de red a la derecha */
.portada {
  background: linear-gradient(100deg, #0b2b3d 0%, #0f4a5c 55%, #137878 100%);
  border-bottom: 6px solid #f2b134;
}
.portada-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 2rem;
  align-items: center;
}
.portada .antetitulo {
  font-family: "Poppins", "Lato", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #bff3ea;
  margin: 0 0 0.9rem;
}
.pastilla {
  display: inline-block;
  font-family: "Poppins", "Lato", sans-serif;
  font-weight: 600;
  background: #f2b134;
  color: #13253a;
  padding: 0.4rem 0.8rem;
  border-radius: 5px;
  margin: 0 0 1rem;
}
.portada h1 { font-family: "Poppins", "Lato", sans-serif; font-weight: 700; }
.portada .datos strong { color: #bff3ea; }
/* Inscripción en la portada: deja claro que se puede elegir una semana o las dos */
.inscripcion { margin: 0 0 1.75rem; }
.inscripcion-texto { margin: 0; }
.inscripcion-texto strong { display: block; color: #bff3ea; font-size: 0.85rem; letter-spacing: 0.04em; }
.ilustracion { width: 100%; height: auto; }
@media (max-width: 52rem) {
  .portada-rejilla { grid-template-columns: 1fr; }
  .ilustracion { display: none; }
}

/* Cabecera de cada semana: misma estética que la portada y los banners */
.cabecera-semana {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem;
  gap: 1.25rem;
  align-items: center;
  background: linear-gradient(100deg, var(--semana-g1) 0%, var(--semana-g2) 55%, var(--semana-g3) 100%);
  border-radius: 6px;
  border-bottom: 5px solid #f2b134;
  padding: 1.25rem 1.5rem;
  margin: 0 0 1rem;
}
.cabecera-semana .antetitulo {
  font-family: "Poppins", "Lato", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--semana-claro);
  margin: 0 0 0.5rem;
}
.cabecera-semana .pastilla { margin-bottom: 0.6rem; }
.cabecera-semana h2 {
  font-family: "Poppins", "Lato", sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.2;
  color: #ffffff;
  margin: 0;
}
.ilustracion-semana { width: 100%; height: auto; }
@media (max-width: 52rem) {
  .cabecera-semana { grid-template-columns: 1fr; padding: 1.1rem 1.1rem; }
  .ilustracion-semana { display: none; }
}

/* Navegación fija al desplazarse, y margen para que los títulos no queden debajo de ella */
nav.indice { position: sticky; top: 0; z-index: 5; }
main section[id], details.dia[id] { scroll-margin-top: 4rem; }

@media (max-width: 40rem) {
  /* En teléfono la navegación fija ocupa una sola línea y se desliza de lado */
  nav.indice ul { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: 1.25rem; }
}