/* ==========================================================================
   Página de actividades de Formación Tecnológica (un año)
   (templates/formaciontecnologica/node--actividades.html.twig): botones para
   filtrar por carrera y por mes, y lista por mes. Color del tema: #1978b3, el
   mismo de .text-primary (css/custom.css).
   ========================================================================== */

.act-filtros {
  margin: 40px 0 56px;
}

/* Una fila de botones (carrera o mes) con su etiqueta a la izquierda. */
.act-filtro {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.act-filtro + .act-filtro {
  margin-top: 12px;
}

.act-filtro__etiqueta {
  flex: 0 0 64px;
  color: #6e6e73;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.act-filtro__opciones {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.act-filtro__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #d2d2d7;
  border-radius: 999px;
  background-color: #fff;
  color: #1d1d1f;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.act-filtro__btn:hover {
  border-color: #1978b3;
  color: #1978b3;
}

.act-filtro__btn.is-active {
  border-color: #1978b3;
  background-color: #1978b3;
  color: #fff;
}

.act-filtro__btn:focus-visible {
  outline: 2px solid #1978b3;
  outline-offset: 2px;
}

/* Sin resultados con el otro filtro elegido (lo desactiva el JS). */
.act-filtro__btn:disabled {
  border-color: #e5e5ea;
  color: #c7c7cc;
  cursor: default;
}

/* Cantidad de actividades del botón. */
.act-filtro__num {
  font-size: 12px;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Lista por mes (páginas con carreras, como 2025). Escala tipográfica:
   mes 30px > título de actividad 18px > fecha y carrera 13px.
   La página sin carreras (2024) no usa estas clases.
   -------------------------------------------------------------------------- */

/* Un mes. El margen va abajo (no arriba) para que un mes oculto por el filtro
   no deje espacio. */
.act-mes-grupo {
  margin-bottom: 48px;
}

.act-mes-grupo__titulo {
  margin-bottom: 16px;
  color: #1978b3;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.act-mes-grupo__total {
  margin-left: 8px;
  color: #6e6e73;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Fila de una actividad: acordeón nativo <details>/<summary>. */
.act-item {
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid #e5e5ea;
  border-radius: 14px;
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.act-item:hover {
  border-color: #c7c7cc;
}

.act-item[open] {
  border-color: #1978b3;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* Summary: sin el triángulo del navegador (lo reemplaza el ícono propio).
   Miniatura, fecha, h4, resumen e ícono son hijos directos del summary (dentro
   de él no caben envoltorios de bloque). La fila no usa grid ni flex en el
   summary (Safari los ignoró durante años): el texto va en flujo normal con
   relleno a los lados, y la miniatura y el ícono van posicionados. */
.act-item__boton {
  position: relative;
  display: block;
  min-height: 124px; /* 96px de la miniatura + 2 x 14px de relleno */
  padding: 14px 52px 14px 128px; /* izq.: 16 + 96 + 16; der.: lugar del ícono */
  cursor: pointer;
  list-style: none;
}

.act-item--sin-foto .act-item__boton {
  min-height: 44px;
}

.act-item__boton::-webkit-details-marker {
  display: none;
}

.act-item__boton::marker {
  content: "";
}

.act-item__boton:focus-visible {
  outline: 2px solid #1978b3;
  outline-offset: -2px;
  border-radius: 14px;
}

.act-item__miniatura {
  position: absolute;
  top: 14px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #f2f2f5;
  color: #8e8e93;
}

.act-item__miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fecha y carrera sobre el título. Van en línea: si no caben (carrera larga
   en celular), el texto sigue en la línea de abajo, sin dejar el separador
   suelto al comienzo. */
.act-item__meta {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
}

.act-item__fecha {
  color: #1978b3;
}

.act-item__carrera {
  color: #6e6e73;
  font-weight: 500;
}

.act-item__fecha + .act-item__carrera::before {
  content: "·";
  margin: 0 6px;
  color: #c7c7cc;
}

/* h3 con solo el título: se quitan los estilos de encabezado del tema. */
.act-item__titulo {
  margin: 0;
  color: #1d1d1f;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.3;
  text-transform: none;
}

.act-item__resumen {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: #6e6e73;
  font-size: 15px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Abierta: el resumen sobra porque abajo está la descripción completa. */
.act-item[open] .act-item__resumen {
  display: none;
}

/* Ícono centrado en la altura de la fila. */
.act-item__icono {
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -10px;
  color: #8e8e93;
  transition: transform 0.2s ease, color 0.2s ease;
}

.act-item[open] .act-item__icono {
  color: #1978b3;
  transform: rotate(180deg);
}

/* Detalle, alineado con el texto de la fila (16 + 96 + 16 px). */
.act-item__detalle {
  padding: 4px 24px 24px 128px;
}

/* Sin foto no hay miniatura: el texto y el detalle empiezan cerca del borde. */
.act-item--sin-foto .act-item__boton {
  padding-left: 24px;
}

.act-item--sin-foto .act-item__detalle {
  padding-left: 24px;
}

/* Abierta, en escritorio: la fila deja de reservar el alto de la miniatura, así
   la descripción empieza justo debajo del título y la miniatura queda en la
   columna izquierda del detalle (que tiene el mismo relleno). El ícono se queda
   donde estaba con la fila cerrada, para que no salte. En celular el detalle va
   debajo de la miniatura, así que la fila conserva su alto. */
@media (min-width: 769px) {
  .act-item[open]:not(.act-item--sin-foto) {
    min-height: 126px; /* fila cerrada (124px) + 2px de borde */
  }

  .act-item[open]:not(.act-item--sin-foto) .act-item__boton {
    min-height: 0;
  }

  .act-item[open]:not(.act-item--sin-foto) .act-item__icono {
    top: 62px; /* mitad de la fila cerrada */
  }
}

.act-item__detalle .item-description {
  max-width: 75ch;
  margin-bottom: 24px;
  color: #3a3a3c;
  font-size: 16px;
  line-height: 1.6;
}

.act-item__detalle .gallery-container {
  margin-bottom: 24px;
}

.act-item__detalle .photo-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

@media (max-width: 768px) {
  .act-filtros {
    margin: 24px 0 40px;
  }

  /* En celular, la etiqueta va arriba y los botones se deslizan de lado en
     una sola línea (con 11 meses y 8 carreras, envueltos ocuparían media
     pantalla). */
  .act-filtro {
    display: block;
  }

  .act-filtro + .act-filtro {
    margin-top: 16px;
  }

  .act-filtro__etiqueta {
    display: block;
    margin-bottom: 8px;
  }

  .act-filtro__opciones {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Lugar para el contorno de foco (2px + 2px de separación); el margen
       negativo mantiene los botones alineados con la etiqueta. */
    margin: 0 -4px;
    padding: 4px 4px 6px;
    scrollbar-width: thin;
  }

  .act-filtro__btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .act-mes-grupo {
    margin-bottom: 40px;
  }

  .act-mes-grupo__titulo {
    font-size: 24px;
  }

  .act-item__boton {
    min-height: 88px; /* 64px de la miniatura + 2 x 12px */
    padding: 12px 44px 12px 88px; /* izq.: 12 + 64 + 12 */
  }

  .act-item--sin-foto .act-item__boton {
    min-height: 44px;
    padding-left: 16px;
  }

  .act-item--sin-foto .act-item__detalle {
    padding-left: 16px;
  }

  .act-item__miniatura {
    top: 12px;
    left: 12px;
    width: 64px;
    height: 64px;
  }

  .act-item__icono {
    right: 12px;
  }

  .act-item__titulo {
    font-size: 16px;
  }

  .act-item__resumen {
    font-size: 14px;
  }

  .act-item__detalle {
    padding: 4px 16px 20px;
  }

  .act-item__detalle .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .act-item,
  .act-item__icono {
    transition: none;
  }
}

/* ==========================================================================
   Índice de actividades por año (/actividades, vista actividades_anios:
   templates/formaciontecnologica/actividades-anios/). Una tarjeta por año.
   ========================================================================== */

.act-anios {
  padding-top: 64px;
  padding-bottom: 96px;
}

.act-anios__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.act-anio__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #e5e5ea;
  border-radius: 18px;
  background-color: #fff;
  color: #1d1d1f;
  text-decoration: none;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.act-anio__enlace:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  color: #1d1d1f;
  transform: translateY(-2px);
}

.act-anio__enlace:focus-visible {
  outline: 2px solid #1978b3;
  outline-offset: 3px;
}

.act-anio__imagen {
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background-color: #f2f2f2;
}

.act-anio__imagen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.act-anio__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 28px 28px;
}

.act-anio__titulo {
  margin-bottom: 12px;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.act-anio__resumen {
  margin-bottom: 24px;
  color: #6e6e73;
  font-size: 16px;
  line-height: 1.5;
}

.act-anio__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.act-anio__total {
  color: #6e6e73;
  font-size: 14px;
}

.act-anio__boton {
  color: #1978b3;
  font-size: 15px;
  font-weight: 600;
}

.act-anio__boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.act-anio__flecha {
  transition: transform 0.2s ease;
}

.act-anio__enlace:hover .act-anio__flecha {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .act-anios {
    padding-top: 40px;
    padding-bottom: 64px;
  }

  .act-anios__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .act-anio__titulo {
    font-size: 26px;
  }
}

/* Enlaces de evidencia que no son YouTube ni Instagram (node--actividades):
   publicación de Facebook incrustada y botón para abrirla, o botón solo. */
.act-facebook {
  overflow: hidden;
  border-radius: 12px;
  background-color: #fff;
}

.act-facebook iframe {
  display: block;
  width: 100%;
  max-width: 500px;
  height: 560px;
  border: 0;
}

.act-enlace-externo {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 10px 18px;
  border: 1px solid #1978b3;
  border-radius: 999px;
  color: #1978b3;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.act-enlace-externo:hover {
  background-color: #1978b3;
  color: #fff;
}

/* Debajo de la publicación incrustada: solo texto. */
.act-enlace-externo--simple {
  padding: 0;
  border: 0;
  font-size: 14px;
}

.act-enlace-externo--simple:hover {
  background-color: transparent;
  color: #1978b3;
  text-decoration: underline;
}