/* ============================================================================
   CABA — documentos: circulares/resoluciones, programaciones y transparencia.
   Comparten un mismo lenguaje: banda verde de entrada, tabla o lista real,
   filtros como enlaces, descarga de PDF siempre explícita. Consume los
   tokens de base.css, nunca hexes crudos.
   ========================================================================= */

/* ---- Banda de entrada (verde), común a las cinco plantillas ---- */
.caba-doc-hero {
  background: var(--caba-verde);
  color: var(--caba-paper);
  padding-block: clamp(36px, 4vw, 64px) clamp(30px, 3vw, 48px);
}
.caba-doc-hero h1 { color: var(--caba-paper); margin: 0 0 18px; }
/* Titular de archivo: mayor y en versales, como lo dibuja el handoff. */
.caba-doc-hero__titulo {
  margin: 0 0 20px;
  font-size: clamp(3rem, 1rem + 5vw, 6rem); line-height: .9; letter-spacing: .01em;
  text-transform: uppercase;
}

.caba-doc-hero__migas { margin: 0 0 22px; color: var(--caba-paper); }
.caba-doc-hero__migas a {
  color: var(--caba-paper);
  text-decoration: none;
  border-bottom: 2px solid var(--caba-naranja);
  padding-bottom: 2px;
}
.caba-doc-hero__migas a:hover { border-bottom-color: var(--caba-paper); }

.caba-doc-hero__bajada {
  margin: 0;
  max-width: 64ch;
  font-size: var(--caba-size-md);
  line-height: 1.45;
  color: var(--caba-paper);
}

/* Único, en single-circular: el número gigante junto al título. */
.caba-doc-hero__fila { display: flex; flex-wrap: wrap; gap: 20px 44px; align-items: flex-end; }
.caba-doc-hero__numero {
  flex: none;
  font-family: var(--caba-font-display);
  font-size: var(--caba-size-mega);
  line-height: .84;
  letter-spacing: -.03em;
}
.caba-doc-hero__cuerpo { flex: 1 1 320px; }
.caba-doc-hero__cuerpo h1 { margin: 0 0 12px; }

.caba-doc-hero__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; color: var(--caba-paper); }
.caba-doc-hero__badge { padding: 2px 0; }
.caba-doc-hero__badge.is-vigente {
  font-weight: 700;
  color: var(--caba-ink);
  background: var(--caba-naranja);
  padding: 4px 8px;
}

/* ---- Filtros: enlaces reales navegables, nunca botones de JavaScript ---- */
.caba-doc-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: flex-start;
  padding-bottom: 24px;
  margin-bottom: 30px;
  border-bottom: var(--caba-rule-ink);
}
.caba-doc-filtros { align-items: flex-end; }
.caba-doc-filtros__grupo { display: flex; flex-direction: column; gap: 9px; }
.caba-doc-filtros__enlaces { display: flex; flex-wrap: wrap; gap: 7px; }

/* Buscador del archivo: mismo campo que el formulario de contacto, con su rótulo encima. */
.caba-doc-filtros__buscador { flex: 1 1 300px; display: flex; flex-direction: column; gap: 9px; }
.caba-doc-filtros__buscador input {
  width: 100%;
  font-family: var(--caba-font-text); font-size: 17px; color: var(--caba-ink);
  background: var(--caba-paper); border: 1px solid var(--caba-ink);
  padding: 13px 14px;
}
.caba-doc-conteo { margin: 0 0 14px; color: var(--caba-ink); }
.caba-doc-filtros__enlace {
  display: inline-block;
  border: 1px solid var(--caba-linea);
  padding: 11px 15px;
  font-size: 16px;
  color: var(--caba-ink);
  text-decoration: none;
  line-height: 1;
}
.caba-doc-filtros__enlace:hover { border-color: var(--caba-verde); color: var(--caba-verde); }
.caba-doc-filtros__enlace.is-activo {
  background: var(--caba-verde);
  border-color: var(--caba-verde);
  color: var(--caba-paper);
  font-weight: 700;
}
.caba-doc-filtros__enlace.is-activo:hover { color: var(--caba-paper); }

/* ---- Tabla: encabezado verde, scroll propio en móvil (nunca desborda la página) ---- */
.caba-doc-tabla-envoltura {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 8px;
}
.caba-doc-tabla { font-size: var(--caba-size-sm); }
.caba-doc-tabla caption { caption-side: top; text-align: left; color: var(--caba-ink); padding-bottom: 14px; }
.caba-doc-tabla thead tr { background: var(--caba-verde); }
.caba-doc-tabla th { text-align: left; padding: 12px 16px; color: var(--caba-paper); white-space: nowrap; }
.caba-doc-tabla td { padding: 13px 16px; border-bottom: var(--caba-rule); vertical-align: baseline; }
.caba-doc-tabla tbody tr:last-child td { border-bottom: 0; }
.caba-doc-col-derecha { text-align: right; }
.caba-doc-col-numero, .caba-doc-col-fecha { white-space: nowrap; }

/* Cuatro columnas con relleno de escritorio no caben nunca en un teléfono sin
   algo de scroll — el envoltorio ya lo confina al ancho de la tabla, nunca a
   la página. Este ajuste solo acorta cuánto hay que arrastrar: menos relleno
   por celda deja más sitio para el contenido real. */
@media (max-width: 700px) {
  .caba-doc-tabla th, .caba-doc-tabla td { padding: 11px 10px; }
}

/* Descarga de archivo, en tablas y listas: nunca "aquí" o "descargar" a secas. */
.caba-doc-enlace-archivo {
  color: var(--caba-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--caba-naranja);
  padding-bottom: 1px;
  white-space: nowrap;
}
.caba-doc-enlace-archivo:hover { color: var(--caba-verde); border-bottom-color: var(--caba-ink); }

.caba-doc-vacio { max-width: 60ch; color: var(--caba-gris); }
.caba-doc-paginacion { margin-top: 32px; }
/* Pie de la tabla de programaciones: «Página 01 de 04» a un lado y los enlaces al otro,
   sobre un filete de tinta, como lo dibuja la ronda 2. */
.caba-doc-paginacion--posicion {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  padding-top: 20px; border-top: var(--caba-rule-ink);
}
.caba-doc-paginacion__posicion { margin: 0; color: var(--caba-ink); }

/* ---- Tabla de programaciones ----
   Comparte el componente de tabla con las circulares, pero sus columnas del medio son
   opcionales (torneo, fase y sede aparecen solo si alguna fila las trae), así que no puede
   heredar los anchos fijos por posición: solo la jornada, el día y el PDF los tienen. */
.caba-tabla-marco .caba-tabla--programaciones tbody th[scope="row"] {
  font-family: var(--caba-font-display); font-weight: 400; font-size: 20px;
}
.caba-tabla-marco .caba-tabla--programaciones th:nth-child(3),
.caba-tabla-marco .caba-tabla--programaciones th:nth-child(4),
.caba-tabla-marco .caba-tabla--programaciones th:nth-child(5) { width: auto; }
.caba-tabla-marco .caba-tabla--programaciones th:last-child { width: 88px; }

/* ---- Detalle de circular: cuerpo + ficha lateral ---- */
.caba-doc-detalle { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.caba-doc-detalle__cuerpo { flex: 1 1 460px; max-width: 42rem; }

.caba-doc-resumen {
  margin: 0 0 22px;
  padding-left: 18px;
  border-left: 3px solid var(--caba-verde);
  font-size: var(--caba-size-md);
  line-height: 1.5;
}

.caba-doc-descarga {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: var(--caba-rule-ink);
}
.caba-doc-descarga__boton {
  background: var(--caba-verde);
  color: var(--caba-paper);
  text-decoration: none;
  padding: 16px 22px;
  font-family: var(--caba-font-label);
  font-weight: 700;
  font-size: var(--caba-size-label);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.caba-doc-descarga__boton:hover { background: var(--caba-ink); color: var(--caba-paper); }
.caba-doc-descarga__peso { color: var(--caba-gris); }

.caba-doc-ficha { flex: 1 1 280px; max-width: 400px; border-top: 9px solid var(--caba-verde); padding-top: 18px; }
.caba-doc-ficha__fila { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: var(--caba-rule); }
.caba-doc-ficha__fila:last-of-type { border-bottom: 0; }
.caba-doc-estado--vigente { color: var(--caba-verde); font-weight: 700; }
.caba-doc-estado--no-vigente { color: var(--caba-gris); }
.caba-doc-ficha__volver { margin: 20px 0 0; }

/* ---- Listas agrupadas: programaciones por año, documentos por tipo ---- */
.caba-doc-grupo__titulo { color: var(--caba-verde); margin: 44px 0 16px; }
.caba-doc-grupo__titulo:first-of-type { margin-top: 4px; }

.caba-doc-lista { list-style: none; margin: 0 0 8px; padding: 0; border-top: var(--caba-rule); }
.caba-doc-lista__item {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: var(--caba-rule);
}
.caba-doc-lista__fecha { text-decoration: none; color: var(--caba-ink); font-weight: 700; }
.caba-doc-lista__fecha:hover { text-decoration: underline; text-decoration-color: var(--caba-naranja); }

/* ---- Detalle de circular: rótulo del cuerpo y bloque de relacionadas ----
   Copia de la pantalla CIRCULAR · DETALLE del handoff: el cuerpo se lee a 18px y la columna
   derecha cierra con las circulares del mismo tipo, número en display y título al lado. */
.caba-doc-detalle__rotulo { margin: 0 0 16px; color: var(--caba-ink); }
.caba-doc-detalle__texto p { font-size: 18px; line-height: 1.6; margin: 0 0 18px; }
.caba-doc-detalle__texto > *:last-child { margin-bottom: 26px; }

.caba-doc-relacionadas__rotulo { margin: 32px 0 14px; color: var(--caba-ink); }
.caba-doc-relacionadas { display: flex; flex-direction: column; border-top: var(--caba-rule); }
.caba-doc-relacionadas__fila {
  display: flex; gap: 16px; align-items: baseline;
  padding: 13px 0; border-bottom: var(--caba-rule);
  text-decoration: none; color: var(--caba-ink);
}
.caba-doc-relacionadas__numero {
  flex: none; font-family: var(--caba-font-display); font-size: 19px; color: var(--caba-verde);
}
.caba-doc-relacionadas__titulo { font-size: 16px; line-height: 1.35; }
.caba-doc-relacionadas__fila:hover .caba-doc-relacionadas__titulo { color: var(--caba-verde); }

/* Circulares y resoluciones: contenido centrado en la celda, vertical y horizontalmente.
   Las filas miden lo que mida el título, que a menudo ocupa dos líneas; con vertical-align:top
   el número, la fecha y la vigencia quedaban colgando arriba y la fila se leía desalineada.
   El título se deja a la izquierda a propósito: es prosa que envuelve, y centrarla parte el
   punto de entrada de la lectura en cada fila.
   Va aquí, bajo el modificador, para no arrastrar a programaciones ni a transparencia. */
.caba-tabla-marco .caba-tabla--circulares th,
.caba-tabla-marco .caba-tabla--circulares td { vertical-align: middle; text-align: center; }
.caba-tabla-marco .caba-tabla--circulares th:nth-child(4),
.caba-tabla-marco .caba-tabla--circulares td:nth-child(4),
.caba-tabla-marco .caba-tabla--circulares tbody th[scope="row"] { text-align: left; }
/* El último td lleva text-align:right heredado de .caba-tabla; aquí se centra como el resto. */
.caba-tabla-marco .caba-tabla--circulares td:last-child,
.caba-tabla-marco .caba-tabla--circulares th:last-child { text-align: center; }
/* La reserva de 25px de la primera columna (marca de la fila 1) mide lo mismo que marca+hueco,
   así que ambos tipos de fila ocupan igual y se centran alineadas entre sí. */
.caba-tabla-marco .caba-tabla--circulares .caba-tabla__numero { justify-content: center; }