/* ==========================================================================
   SVF · Agenda (párrafo agenda)

   La tabla la escribe el editor en CKEditor con el formato "Tabla de
   agenda", que solo deja pasar la estructura (sin estilos en línea). El
   aspecto sale de aquí, según la estructura:
     - fila de encabezado (<thead>) ............ tono medio, texto oscuro
     - columna de encabezado (<th> en el cuerpo)  tono oscuro, texto blanco
       (la hora, cuando el editor la activa)
     - celdas combinadas a lo ancho (colspan) ... tono oscuro, texto blanco
       (Receso, Bienvenida, Preguntas...)
     - el resto ................................ tono claro

   Escritorio: celdas separadas con border-spacing, 6px entre columnas y
   entre filas.
   Móvil: tabla compacta con líneas blancas; si tiene 4 columnas o más,
   se desplaza de lado dentro de su marco (agenda.js muestra el aviso).

   Filas sin límite: con más de 5, agenda.js pliega las demás
   (.c-agd--plegado oculta .c-agd__extra) y muestra "Ver todo".

   Colores por portal: Medellín y Home en verde (los de la maqueta),
   Rionegro en púrpura con una sola regla .portal-rionegro.
   Las cabeceras llevan texto oscuro, como en la maqueta: sobre el verde
   claro #85aa1a el texto blanco daría 2.7:1 y no pasaría AA.
   ========================================================================== */

.c-agd {
  --agd-medio: #85aa1a;    /* fila de encabezado */
  --agd-oscuro: #004729;   /* columna de encabezado y celdas combinadas */
  --agd-claro: #e1edc3;    /* celdas normales */
  --agd-texto: #1d1d1b;
  --agd-radio: 14px;
  --agd-col-gap: 6px;      /* mismo espacio entre columnas que entre filas */
  --agd-fila-gap: 6px;
  --agd-linea: #fff;       /* separadores de la tabla compacta en móvil */

  max-width: 1080px;
  margin-inline: auto;
  padding-block: 56px 24px;
  scroll-margin-top: 100px;   /* al replegar, que el título no quede bajo el header */
}

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

.portal-rionegro .c-agd {
  --agd-medio: #b2abe4;
  --agd-oscuro: #442864;
  --agd-claro: #e4e2ef;
}

.c-agd__titulo {
  margin: 0 0 20px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #111111;
}

/* Introducción opcional: unidad, tema, moderadora. */
.c-agd__intro {
  max-width: 820px;
  margin: -6px 0 24px;
  color: var(--agd-oscuro);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.c-agd__intro p,
.c-agd__intro li {
  margin: 0 0 6px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
}

.c-agd__intro > :last-child {
  margin-bottom: 0;
}

.c-agd__intro strong {
  font-weight: 700;
}

.c-agd__intro a {
  color: inherit;
  text-decoration: underline;
}

/* Choque con sv-styles.css: `.l-content p { font-size: … !important;
   line-height: 26px }` fija el tamaño de todos los <p> del contenido. La
   introducción y las celdas vienen del editor con <p>, así que se corrige
   aquí con más especificidad y !important: la intro con su tamaño y las
   celdas heredan el de la tabla. */
.c-agd .c-agd__intro p,
.c-agd .c-agd__intro li {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.c-agd .c-agd__marco p {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Aviso de desplazamiento: lo muestra agenda.js si la tabla no cabe. */
.c-agd__desliza {
  margin: 0 0 10px;
  color: #555;
  font-size: 13px;
  line-height: 1.4;
}

.c-agd__desliza[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Tabla
   border-spacing también separa los bordes externos: el marco lo
   compensa para que la tabla quede alineada con el eje.
   -------------------------------------------------------------------------- */
.c-agd__marco {
  margin-inline: calc(var(--agd-col-gap) * -1);
}

/* CKEditor puede envolver la tabla en <figure class="table">. */
.c-agd__marco figure {
  margin: 0;
}

.c-agd__marco > * + * {
  margin-top: 24px;
}

.c-agd__marco table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: var(--agd-col-gap) var(--agd-fila-gap);
  background: none;
  color: var(--agd-texto);
  font-size: 14px;
  line-height: 1.4;
}

.c-agd__marco caption {
  padding: 0 var(--agd-col-gap) 8px;
  caption-side: top;
  color: var(--agd-oscuro);
  font-weight: 700;
  text-align: left;
}

.c-agd__marco th,
.c-agd__marco td {
  padding: 18px 16px;
  border: 0;
  background: var(--agd-claro);
  color: var(--agd-texto);
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
}

/* Fila de encabezado. */
.c-agd__marco thead th,
.c-agd__marco thead td {
  padding: 13px 12px;
  background: var(--agd-medio);
  color: var(--agd-texto);
  font-weight: 700;
}

/* Columna de encabezado (la hora). */
.c-agd__marco tbody th,
.c-agd__marco tfoot th {
  background: var(--agd-oscuro);
  color: #fff;
  font-weight: 700;
}

/* Celdas combinadas a lo ancho: Receso, Bienvenida, Preguntas... */
.c-agd__marco tbody td[colspan]:not([colspan="1"]) {
  background: var(--agd-oscuro);
  color: #fff;
  font-weight: 700;
}

.c-agd__marco th p,
.c-agd__marco td p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: inherit;
}

.c-agd__marco th p + p,
.c-agd__marco td p + p {
  margin-top: 6px;
}

.c-agd__marco strong {
  font-weight: 700;
}

/* Plegado: a partir de la sexta fila (lo marca agenda.js). */
.c-agd--plegado .c-agd__extra {
  display: none;
}

/* Esquinas externas redondeadas, solo en escritorio. Mientras la tabla
   está plegada, las de abajo pasan a la última fila visible (--corte). */
@media (min-width: 768px) {
  /* La hora en una sola línea ("8:00 - 8:40 a. m." no se parte). */
  .c-agd__marco tbody th {
    white-space: nowrap;
  }

  .c-agd__marco table > thead:first-of-type > tr:first-child > :first-child,
  .c-agd__marco table:not(:has(thead)) > tbody:first-of-type > tr:first-child > :first-child {
    border-top-left-radius: var(--agd-radio);
  }

  .c-agd__marco table > thead:first-of-type > tr:first-child > :last-child,
  .c-agd__marco table:not(:has(thead)) > tbody:first-of-type > tr:first-child > :last-child {
    border-top-right-radius: var(--agd-radio);
  }

  .c-agd__marco table > tbody:last-of-type > tr:last-child > :first-child,
  .c-agd--plegado .c-agd__corte > :first-child {
    border-bottom-left-radius: var(--agd-radio);
  }

  .c-agd__marco table > tbody:last-of-type > tr:last-child > :last-child,
  .c-agd--plegado .c-agd__corte > :last-child {
    border-bottom-right-radius: var(--agd-radio);
  }
}

/* --------------------------------------------------------------------------
   Botón "Ver todo" / "Ver menos". El selector con "button" le gana a
   _reboot.scss, como en Preguntas frecuentes.
   -------------------------------------------------------------------------- */
.c-agd__pie {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.c-agd__pie[hidden] {
  display: none;
}

.c-agd button.c-agd__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 170px;
  min-height: 44px;
  margin: 0;
  padding: 10px 26px;
  border: 1.5px solid var(--agd-oscuro);
  border-radius: 999px;
  background: transparent;
  color: var(--agd-oscuro);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

/* Flecha: apunta abajo plegado y arriba desplegado. */
.c-agd button.c-agd__boton::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

.c-agd button.c-agd__boton[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
}

/* Hover: intercambio de contraste. */
.c-agd button.c-agd__boton:hover,
.c-agd button.c-agd__boton:focus-visible {
  background: var(--agd-oscuro);
  color: #fff;
}

.c-agd button.c-agd__boton:focus-visible {
  outline: 3px solid var(--agd-oscuro);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .c-agd__marco table {
    font-size: 13px;
  }

  .c-agd__marco th,
  .c-agd__marco td {
    padding: 16px 12px;
  }
}

@media (max-width: 991px) {
  .c-agd__titulo {
    font-size: 32px;
  }
}

/* Móvil: tabla compacta, pegada, con líneas blancas entre filas y entre
   columnas de datos, como la maqueta móvil ("Cronograma"). Las tablas de
   4 columnas o más no caben: se desplazan de lado dentro del marco. */
@media (max-width: 767px) {
  .c-agd {
    padding-block: 40px 16px;
  }

  .c-agd__titulo {
    font-size: 28px;
    margin-bottom: 16px;
  }

  .c-agd__intro {
    margin: -4px 0 18px;
    font-size: 15px;
  }

  .c-agd .c-agd__intro p,
  .c-agd .c-agd__intro li {
    font-size: 15px !important;
  }

  .c-agd__marco {
    margin-inline: 0;
    overflow-x: auto;
    border-radius: var(--agd-radio);
    -webkit-overflow-scrolling: touch;
  }

  .c-agd__marco > * + * {
    margin-top: 16px;
  }

  .c-agd__marco table {
    border-spacing: 0;
    font-size: 12px;
    line-height: 1.35;
  }

  .c-agd__marco table:has(tr > :nth-child(4)) {
    min-width: 620px;
  }

  .c-agd__marco caption {
    padding: 0 0 8px;
  }

  .c-agd__marco th,
  .c-agd__marco td {
    padding: 12px 8px;
    border-top: 3px solid var(--agd-linea);
  }

  .c-agd__marco thead th,
  .c-agd__marco thead td {
    padding: 12px 6px;
    border-top: 0;
    font-size: 12px;
  }

  .c-agd__marco table:not(:has(thead)) > tbody:first-of-type > tr:first-child > * {
    border-top: 0;
  }

  .c-agd__marco tbody th {
    font-size: 11px;
  }

  /* Línea entre columnas de datos; no entre la hora y la primera. */
  .c-agd__marco td + td,
  .c-agd__marco thead :nth-child(n+3) {
    border-left: 3px solid var(--agd-linea);
  }

  .c-agd__pie {
    margin-top: 16px;
  }

  .c-agd button.c-agd__boton {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-width: 379px) {
  .c-agd__titulo {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-agd button.c-agd__boton,
  .c-agd button.c-agd__boton::after {
    transition: none;
  }
}