@charset "utf-8";

/* =====================================================================
   Agenda Red de Investigadores en Diseno 2027
   Se vincula en agenda.html (region editable "head").

   Estructura:

   .agenda-cabecera      boton OYENTE + titulo + modalidad
   .agenda-dias          botones de fecha (imagenes)
   .agenda-dia           un dia: h2 + filas
     .agenda-fila        una comision (grid de 5 columnas)
       .agenda-hora
       .agenda-comision
       .agenda-btn  (ver expositores / Sala / ver video)

   Las filas alternan celeste y ocre solas (impar / par), no hace falta
   ponerles ninguna clase de color.
   ===================================================================== */

:root {
  --red-ocre: #96991f;
  --red-celeste: #26a5a8;
  --red-tinta: #1a1a1a;
}


/* ---------- Cabecera ---------- */

.agenda-red { max-width: 1180px; margin: 0 auto; padding: 30px 15px 50px; box-sizing: border-box; }
.agenda-red *, .agenda-red *::before, .agenda-red *::after { box-sizing: border-box; }

/* Cabecera centrada: boton OYENTE + titulo + modalidad */
.agenda-cabecera { text-align: center; }

.agenda-oyente {
  display: inline-block;
  padding: 8px 12px;
  border: 3px solid #095fab;
  border-radius: 2px;
  background: #fff;
  color: #00a4d9 !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: underline !important;
  transition: background-color .2s, color .2s;
}
.agenda-oyente:hover { background: #095fab; color: #fff !important; }

#content .agenda-red h1.agenda-titulo {
  color: #095fab !important;
  font-size: 30px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 28px 0 8px !important;
  padding: 0 !important;
}

#content .agenda-red .agenda-modalidad {
  margin: 0 !important;
  color: #095fab !important;
  font-size: 20px !important;
  font-weight: 600;
}


/* ---------- Botones de fecha (imagenes) ---------- */

.agenda-dias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 70px;
  margin: 60px 0 50px;
}
.agenda-dias a { display: block; width: 150px; border-radius: 50%; transition: transform .2s ease; }
.agenda-dias a:hover { transform: translateY(-4px); }
.agenda-dias img { display: block; width: 100%; height: auto; }


/* ---------- Dia ---------- */

.agenda-dia { margin-top: 40px; scroll-margin-top: 20px; }

/* La fila tiene una 5ta columna (100px + 16px de gap) reservada para
   "ver video". Como todavia no hay videos, el h2 se recorta esos 116px
   para terminar justo en el boton de Sala. Cuando se agreguen los
   botones de video, cambiar el margen derecho a 0. */
#content .agenda-red h2.agenda-fecha {
  margin: 0 116px 20px 0 !important;
  padding: 10px 24px !important;
  background: linear-gradient(90deg, rgba(38, 165, 168, 0) 0%, rgba(38, 165, 168, .5) 45%, var(--red-celeste) 100%) !important;
  color: var(--red-tinta) !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  text-align: right !important;
}


/* ---------- Fila de comision ---------- */

.agenda-fila {
  --color: var(--red-celeste);
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 140px 90px 100px;
  gap: 16px;
  margin-bottom: 16px;
}
.agenda-fila:nth-of-type(even) { --color: var(--red-ocre); }

.agenda-hora {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 6px 10px;
  background: var(--color);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.agenda-comision {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 6px 16px;
  border: 3px solid var(--color);
  background: #fff;
  color: var(--color);
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
}

.agenda-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 6px 8px;
  background: var(--color);
  border: 3px solid var(--color);
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.agenda-btn[href]:hover { background: #fff; color: var(--color) !important; }
.agenda-btn:focus-visible, .agenda-oyente:focus-visible,
.agenda-dias a:focus-visible { outline: 3px solid var(--red-tinta); outline-offset: 3px; }

/* "ver video" sin link todavia: se ve apagado y no se puede tocar.
   Cuando este el video: agregale href="..." y sacale la clase is-pendiente. */
.agenda-btn.is-pendiente { opacity: .35; cursor: default; }


/* ---------- Tablet ---------- */

@media (max-width: 991px) {
  .agenda-dias { gap: 16px 30px; margin: 40px 0; }
  .agenda-dias a { width: 130px; }

  .agenda-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
  .agenda-comision { grid-column: span 2; }
  #content .agenda-red h2.agenda-fecha { margin-right: 0 !important; }
}


/* ---------- Mobile ---------- */

@media (max-width: 575px) {
  .agenda-red { padding: 20px 0 40px; }
  #content .agenda-red h1.agenda-titulo { font-size: 22px !important; }
  #content .agenda-red .agenda-modalidad { font-size: 17px !important; }

  .agenda-dias { gap: 12px 18px; }
  .agenda-dias a { width: 100px; }

  #content .agenda-red h2.agenda-fecha { font-size: 20px !important; padding: 10px 14px !important; }

  .agenda-fila { margin-bottom: 26px; }
  .agenda-hora, .agenda-comision { grid-column: 1 / -1; }
  .agenda-hora { min-height: 42px; font-size: 18px; }
  .agenda-comision { font-size: 16px; min-height: 0; padding: 10px 12px; }
  .agenda-btn { font-size: 14px; min-height: 42px; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .agenda-oyente, .agenda-dias a, .agenda-btn { transition: none; }
}