@charset "UTF-8";
/**
 * CundIAgentes
 *  - Capa de aplicacion sobre el sistema de diseno Cundinamarca - gov.co
 *
 * Aqui SOLO viven las piezas que el sistema no trae y que este repositorio
 * necesita: la rejilla de fichas de ficha, el panel interno con barra
 * lateral, los indicadores, la linea de tiempo del cronograma y las barras de
 * datos del tablero.
 *
 * Regla que se respeta igual que en el sistema: ningun color literal. Todo
 * sale de los tokens --gc-* / --cundi-*, de modo que un re-marcado en
 * src/tokens/theme-cundinamarca.css tambien arrastra esta capa.
 */

/* ===================================================================
   Rejillas
   =================================================================== */

.rejilla-cundia {
  display: grid;
  gap: var(--gc-space-4);
}

.rejilla-cundia-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-cundia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-cundia-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla-cundia-principal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

@media (max-width: 1024px) {
  .rejilla-cundia-3,
  .rejilla-cundia-4,
  .rejilla-cundia-principal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .rejilla-cundia-2,
  .rejilla-cundia-3,
  .rejilla-cundia-4,
  .rejilla-cundia-principal { grid-template-columns: minmax(0, 1fr); }
}

/* ===================================================================
   Encabezado de pagina
   =================================================================== */

.encabezado-cundia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-4);
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: var(--gc-space-4);
  margin-bottom: var(--gc-space-5);
  border-bottom: 1px solid var(--gc-border);
}

.antetitulo-cundia {
  margin: 0 0 var(--gc-space-1);
  font-family: var(--gc-font-title);
  font-size: var(--gc-font-size-xs);
  font-weight: var(--gc-peso-titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gc-text-muted);
}

.encabezado-cundia h1 {
  margin: 0;
  font-family: var(--gc-font-title);
  font-size: var(--gc-font-size-h3);
  line-height: var(--gc-line-height-h3);
  color: var(--gc-brand);
}

.acciones-cundia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-2);
  align-items: center;
}

/* ===================================================================
   Portada publica
   =================================================================== */

.portada-cundia {
  padding: var(--gc-space-9) var(--gc-margen);
  color: var(--gc-text-inverse);
  background: linear-gradient(115deg, var(--cundi-azul-800) 0%, var(--cundi-azul-600) 100%);
}

.portada-cundia-interior {
  display: grid;
  gap: var(--gc-space-7);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

@media (max-width: 900px) {
  .portada-cundia-interior { grid-template-columns: minmax(0, 1fr); }
}

.portada-cundia h1 {
  margin: var(--gc-space-2) 0 var(--gc-space-3);
  font-family: var(--gc-font-title);
  font-size: var(--gc-font-size-h1);
  line-height: var(--gc-line-height-h1);
  color: var(--gc-text-inverse);
}

.portada-cundia p { max-width: 58ch; color: var(--gc-text-inverse); }

.portada-cundia .antetitulo-cundia { color: var(--cundi-franja-amarillo); }

.tablero-portada {
  display: grid;
  gap: var(--gc-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--gc-space-5);
  border: 1px solid var(--cundi-azul-400);
  border-radius: var(--gc-radius-sm);
  /* Sólido y no un velo blanco: el velo aclaraba el degradado hasta dejar la
     cifra amarilla por debajo del mínimo de contraste, y además eran los dos
     únicos colores literales del archivo. */
  background: var(--cundi-azul-800);
}

.tablero-portada .cifra {
  display: block;
  font-family: var(--gc-font-title);
  font-size: var(--gc-font-size-h2);
  font-weight: var(--gc-peso-titulo);
  line-height: 1.1;
  color: var(--cundi-franja-amarillo);
}

.tablero-portada .rotulo {
  font-size: var(--gc-font-size-sm);
  color: var(--gc-text-inverse);
}

/* ===================================================================
   Ficha de ficha
   =================================================================== */

.tarjeta-ficha {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--gc-surface);
  border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius-sm);
  box-shadow: var(--gc-sombra-1);
  transition: box-shadow .16s ease, transform .16s ease;
}

.tarjeta-ficha:hover,
.tarjeta-ficha:focus-within {
  box-shadow: var(--gc-sombra-3);
  transform: translateY(-2px);
}

.franja-tarjeta-ficha {
  display: flex;
  align-items: flex-end;
  height: 76px;
  padding: var(--gc-space-3);
  background: linear-gradient(120deg, var(--cundi-azul-800), var(--cundi-azul-600));
}

.franja-tarjeta-ficha .sector {
  font-family: var(--gc-font-title);
  font-size: var(--gc-font-size-xs);
  font-weight: var(--gc-peso-titulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gc-text-inverse);
}

.cuerpo-tarjeta-ficha {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--gc-space-2);
  padding: var(--gc-space-4);
}

.cuerpo-tarjeta-ficha .titulo-tarjeta-ficha {
  margin: 0;
  font-family: var(--gc-font-title);
  font-size: var(--gc-font-size-md);
  line-height: var(--gc-line-height-md);
  color: var(--gc-brand);
}

.cuerpo-tarjeta-ficha .titulo-tarjeta-ficha a { color: inherit; text-decoration: none; }
.cuerpo-tarjeta-ficha .titulo-tarjeta-ficha a:hover { text-decoration: underline; }

.datos-tarjeta-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-1) var(--gc-space-4);
  margin: 0;
  font-size: var(--gc-font-size-xs);
  color: var(--gc-text-muted);
}

.datos-tarjeta-ficha span {
  display: inline-flex;
  gap: var(--gc-space-1);
  align-items: center;
}

.pie-tarjeta-ficha {
  display: flex;
  gap: var(--gc-space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--gc-space-3) var(--gc-space-4);
  font-size: var(--gc-font-size-xs);
  color: var(--gc-text-muted);
  border-top: 1px solid var(--gc-border);
  background: var(--gc-surface-sunken);
}

/* ===================================================================
   Etiquetas de estado
   Extienden .etiqueta-govco, que solo trae completado / error / pendiente.
   =================================================================== */

.etiqueta-govco {
  display: inline-block;
  width: auto;
  height: auto;
  font-size: var(--gc-font-size-xs);
  font-weight: var(--gc-peso-cuerpo-fuerte);
  line-height: 1.4;
  white-space: nowrap;
}

.etiqueta-govco.neutro {
  color: var(--gc-text-muted) !important;
  background-color: var(--gc-surface-sunken) !important;
}

.etiqueta-govco.informativo {
  color: var(--gc-brand) !important;
  background-color: var(--gc-brand-subtle) !important;
}

/* ===================================================================
   Panel interno con barra lateral
   =================================================================== */

.app-cundia {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 60vh;
}

@media (max-width: 900px) {
  .app-cundia { grid-template-columns: minmax(0, 1fr); }
}

.lateral-cundia {
  padding: var(--gc-space-5) var(--gc-space-4);
  border-right: 1px solid var(--gc-border);
  background: var(--gc-surface-sunken);
}

.identidad-lateral-cundia {
  display: flex;
  gap: var(--gc-space-3);
  align-items: center;
  padding-bottom: var(--gc-space-4);
  margin-bottom: var(--gc-space-4);
  border-bottom: 1px solid var(--gc-border);
}

.avatar-cundia {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-family: var(--gc-font-title);
  font-weight: var(--gc-peso-titulo);
  color: var(--gc-brand-on);
  background: var(--gc-brand);
  border-radius: var(--gc-radius-circle);
}

.identidad-lateral-cundia .nombre {
  display: block;
  font-size: var(--gc-font-size-sm);
  font-weight: var(--gc-peso-cuerpo-fuerte);
  color: var(--gc-text-strong);
}

.identidad-lateral-cundia .papel {
  display: block;
  font-size: var(--gc-font-size-xs);
  color: var(--gc-text-muted);
}

.menu-lateral-cundia {
  display: flex;
  flex-direction: column;
  gap: var(--gc-space-1);
  padding: 0;
  margin: 0;
  list-style: none;
}

.menu-lateral-cundia a {
  display: flex;
  gap: var(--gc-space-2);
  align-items: center;
  padding: var(--gc-space-2) var(--gc-space-3);
  font-size: var(--gc-font-size-sm);
  color: var(--gc-text);
  text-decoration: none;
  border-radius: var(--gc-radius-xs);
}

.menu-lateral-cundia a:hover { background: var(--gc-brand-subtle); }

.menu-lateral-cundia a[aria-current="page"] {
  font-weight: var(--gc-peso-cuerpo-fuerte);
  color: var(--gc-brand);
  background: var(--gc-brand-subtle);
}

.menu-lateral-cundia .contador {
  padding: 0 var(--gc-space-2);
  margin-left: auto;
  font-size: var(--gc-font-size-xs);
  color: var(--gc-text-inverse);
  background: var(--gc-danger);
  border-radius: var(--gc-radius-pill);
}

.principal-cundia { padding: var(--gc-space-6) var(--gc-space-6); }

@media (max-width: 640px) {
  .principal-cundia { padding: var(--gc-space-5) var(--gc-space-4); }
}

/* ===================================================================
   Paneles e indicadores
   =================================================================== */

.panel-cundia {
  background: var(--gc-surface);
  border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius-sm);
  box-shadow: var(--gc-sombra-1);
}

.cabecera-panel-cundia {
  display: flex;
  gap: var(--gc-space-3);
  align-items: center;
  padding: var(--gc-space-3) var(--gc-space-4);
  border-bottom: 1px solid var(--gc-border);
}

.cabecera-panel-cundia h2,
.cabecera-panel-cundia h3 {
  margin: 0;
  font-family: var(--gc-font-title);
  font-size: var(--gc-font-size-md);
  color: var(--gc-brand);
}

.cabecera-panel-cundia .apunte {
  margin-left: auto;
  font-size: var(--gc-font-size-xs);
  color: var(--gc-text-muted);
}

.cuerpo-panel-cundia { padding: var(--gc-space-4); }

.indicador-cundia {
  padding: var(--gc-space-4);
  background: var(--gc-surface);
  border: 1px solid var(--gc-border);
  border-left: 4px solid var(--gc-brand);
  border-radius: var(--gc-radius-xs);
}

.indicador-cundia.exito { border-left-color: var(--gc-success); }
.indicador-cundia.alerta { border-left-color: var(--gc-warning); }
.indicador-cundia.riesgo { border-left-color: var(--gc-danger); }

.indicador-cundia .rotulo {
  display: block;
  font-size: var(--gc-font-size-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gc-text-muted);
}

.indicador-cundia .cifra {
  display: block;
  margin-top: var(--gc-space-1);
  font-family: var(--gc-font-title);
  font-size: var(--gc-font-size-h3);
  font-weight: var(--gc-peso-titulo);
  line-height: 1.1;
  color: var(--gc-text-strong);
}

.indicador-cundia .apunte {
  display: block;
  margin-top: var(--gc-space-1);
  font-size: var(--gc-font-size-xs);
  color: var(--gc-text-muted);
}

.medidor-cundia {
  height: 8px;
  margin-top: var(--gc-space-2);
  overflow: hidden;
  background: var(--gc-surface-sunken);
  border-radius: var(--gc-radius-pill);
}

.medidor-cundia > span {
  display: block;
  height: 100%;
  background: var(--gc-brand);
  border-radius: inherit;
}

.medidor-cundia.exito > span { background: var(--gc-success); }
.medidor-cundia.alerta > span { background: var(--gc-warning); }
.medidor-cundia.riesgo > span { background: var(--gc-danger); }

/* ===================================================================
   Cronograma
   =================================================================== */

.cronograma-cundia {
  position: relative;
  padding-left: var(--gc-space-5);
  margin: 0;
  list-style: none;
}

.cronograma-cundia::before {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 5px;
  width: 2px;
  content: "";
  background: var(--gc-border);
}

.cronograma-cundia li {
  position: relative;
  padding-bottom: var(--gc-space-4);
}

.cronograma-cundia li::before {
  position: absolute;
  top: 4px;
  left: calc(var(--gc-space-5) * -1 + 1px);
  width: 10px;
  height: 10px;
  content: "";
  background: var(--gc-surface);
  border: 2px solid var(--gc-border-strong);
  border-radius: var(--gc-radius-circle);
}

.cronograma-cundia li[data-estado="cumplido"]::before {
  background: var(--gc-success);
  border-color: var(--gc-success);
}

.cronograma-cundia li[data-estado="actual"]::before {
  background: var(--gc-brand);
  border-color: var(--gc-brand);
  box-shadow: 0 0 0 4px var(--gc-brand-subtle);
}

.cronograma-cundia .hito {
  display: block;
  font-size: var(--gc-font-size-sm);
  font-weight: var(--gc-peso-cuerpo-fuerte);
  color: var(--gc-text-strong);
}

.cronograma-cundia .fecha {
  display: block;
  font-size: var(--gc-font-size-xs);
  color: var(--gc-text-muted);
}

/* ===================================================================
   Listas de documentos, avisos y resultados
   =================================================================== */

.lista-cundia {
  padding: 0;
  margin: 0;
  list-style: none;
}

.fila-cundia {
  display: flex;
  gap: var(--gc-space-3);
  align-items: center;
  padding: var(--gc-space-3);
  border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius-xs);
}

.fila-cundia + .fila-cundia { margin-top: var(--gc-space-2); }

.sello-cundia {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--gc-font-title);
  font-size: var(--gc-font-size-xs);
  font-weight: var(--gc-peso-titulo);
  color: var(--gc-brand);
  background: var(--gc-brand-subtle);
  border-radius: var(--gc-radius-xs);
}

.fila-cundia .detalle { flex: 1; min-width: 0; }

.fila-cundia .titulo {
  display: block;
  font-size: var(--gc-font-size-sm);
  font-weight: var(--gc-peso-cuerpo-fuerte);
  color: var(--gc-text-strong);
}

.fila-cundia .apunte {
  display: block;
  font-size: var(--gc-font-size-xs);
  color: var(--gc-text-muted);
}

.fila-cundia.sin-leer { border-left: 3px solid var(--gc-brand); }
.fila-cundia.atencion { border-color: var(--gc-warning); background: var(--gc-warning-soft); }

/* ===================================================================
   Barras de datos del tablero gerencial
   =================================================================== */

.barras-cundia {
  display: flex;
  flex-direction: column;
  gap: var(--gc-space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.barras-cundia li {
  display: grid;
  gap: var(--gc-space-1) var(--gc-space-3);
  align-items: center;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 3fr) auto;
}

.barras-cundia .rotulo {
  font-size: var(--gc-font-size-xs);
  color: var(--gc-text);
}

.barras-cundia .valor {
  font-size: var(--gc-font-size-xs);
  font-weight: var(--gc-peso-cuerpo-fuerte);
  color: var(--gc-text-strong);
  text-align: right;
}

.columnas-cundia {
  display: flex;
  gap: var(--gc-space-2);
  align-items: flex-end;
  height: 180px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.columnas-cundia li {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--gc-space-1);
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  font-size: var(--gc-font-size-xs);
  color: var(--gc-text-muted);
}

.columnas-cundia .columna {
  width: 100%;
  min-height: 2px;
  background: var(--gc-brand);
  border-radius: var(--gc-radius-xs) var(--gc-radius-xs) 0 0;
}

/* ===================================================================
   Formulario parametrizado y utilidades
   =================================================================== */

.campos-cundia {
  display: grid;
  gap: var(--gc-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.campos-cundia .ancho-completo { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .campos-cundia { grid-template-columns: minmax(0, 1fr); }
}

.aviso-cundia {
  padding: var(--gc-space-3) var(--gc-space-4);
  font-size: var(--gc-font-size-sm);
  border: 1px solid var(--gc-border);
  border-left: 4px solid var(--gc-brand);
  border-radius: var(--gc-radius-xs);
  background: var(--gc-brand-subtle);
}

.aviso-cundia.exito { border-left-color: var(--gc-success); background: var(--gc-success-soft); }
.aviso-cundia.alerta { border-left-color: var(--gc-warning); background: var(--gc-warning-soft); }
.aviso-cundia.error { border-left-color: var(--gc-danger); background: var(--gc-danger-soft); }
.aviso-cundia + .aviso-cundia { margin-top: var(--gc-space-2); }

.filtros-cundia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-3);
  align-items: flex-end;
  padding: var(--gc-space-4);
  margin-bottom: var(--gc-space-5);
  background: var(--gc-surface-sunken);
  border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius-xs);
}

.filtros-cundia .campo { flex: 1 1 180px; }

.pila-cundia { display: flex; flex-direction: column; gap: var(--gc-space-4); }
.fila-flex-cundia { display: flex; flex-wrap: wrap; gap: var(--gc-space-2); align-items: center; }
.separador-cundia { height: 1px; margin: var(--gc-space-4) 0; background: var(--gc-border); border: 0; }
.texto-apunte { font-size: var(--gc-font-size-xs); color: var(--gc-text-muted); }
.texto-destacado { font-family: var(--gc-font-title); font-size: var(--gc-font-size-h4); color: var(--gc-brand); }
.sin-margen { margin: 0; }
.margen-superior { margin-top: var(--gc-space-4); }
.a-la-derecha { margin-left: auto; }

.caja-destacada-cundia {
  padding: var(--gc-space-5);
  color: var(--gc-text-inverse);
  background: linear-gradient(140deg, var(--cundi-azul-800), var(--cundi-azul-600));
  border-radius: var(--gc-radius-sm);
}

.caja-destacada-cundia .cifra {
  display: block;
  font-family: var(--gc-font-title);
  font-size: var(--gc-font-size-h3);
  font-weight: var(--gc-peso-titulo);
  color: var(--cundi-franja-amarillo);
}

.caja-destacada-cundia .rotulo,
.caja-destacada-cundia p { color: var(--gc-text-inverse); }

/* El boton relleno del sistema es azul, y sobre la caja azul se pierde.
   Sobre fondo oscuro pasa al amarillo institucional, que contra el azul 800
   da 12:1 y sigue dentro de la paleta. */
.caja-destacada-cundia .btn-govco.fill-btn-govco,
.portada-cundia .btn-govco.fill-btn-govco {
  color: var(--cundi-azul-800) !important;
  background-color: var(--cundi-franja-amarillo) !important;
  border-color: var(--cundi-franja-amarillo) !important;
}

.caja-destacada-cundia .btn-govco.fill-btn-govco:hover,
.portada-cundia .btn-govco.fill-btn-govco:hover {
  background-color: var(--cundi-azul-50) !important;
  border-color: var(--cundi-azul-50) !important;
}

.portada-cundia .btn-govco.outline-btn-govco {
  color: var(--gc-text-inverse) !important;
  border-color: var(--gc-text-inverse) !important;
  background-color: transparent !important;
}

.portada-cundia .btn-govco.outline-btn-govco:hover {
  color: var(--cundi-azul-800) !important;
  background-color: var(--gc-text-inverse) !important;
}

/* La tabla del sistema no define un ancho fluido para contenedores estrechos. */
.tabla-govco { width: 100%; }

/* ===================================================================
   Correcciones de accesibilidad y de fidelidad al sistema
   Todas salen de la validacion UX/UI: contrastes medidos en el DOM real,
   controles nativos que el sistema no alcanza a estilar, y reflujo a 320 px.
   =================================================================== */

/* --- Etiquetas de estado: el sistema las deja en 3,59:1 y 3,96:1 --------- */
.etiqueta-govco.completado {
  color: var(--gc-text-strong) !important;
  background-color: var(--gc-success-soft) !important;
  border: 1px solid var(--gc-success-border);
}

.etiqueta-govco.pendiente {
  color: var(--gc-warning-strong) !important;
  background-color: var(--gc-surface) !important;
  border: 1px solid var(--gc-warning);
}

.etiqueta-govco.error {
  border: 1px solid var(--gc-danger-border);
}

/* A 320 px "EN EVALUACIÓN · Cerró el 31/08/2026" se cortaba sin aviso dentro
   de una tarjeta con overflow oculto. */
.etiqueta-govco {
  white-space: normal;
}

/* --- Controles nativos que el sistema no cubre -------------------------- *
 * `form/entradas-texto.css` solo estila text, password, "mail" (errata por
 * email) y tel. El resto quedaba con el estilo del navegador, 30 px de alto
 * y sin radio, al lado de campos de 40 px. */
.entradas-de-texto-govco input[type="email"],
.entradas-de-texto-govco input[type="date"],
.entradas-de-texto-govco input[type="number"],
.entradas-de-texto-govco input[type="search"],
.entradas-de-texto-govco input[type="url"],
.entradas-de-texto-govco select,
.grupo-opciones-cundia select,
.filtros-cundia select,
table select {
  width: 100%;
  min-height: 40px;
  padding: var(--gc-space-2) var(--gc-space-3);
  font-family: var(--gc-font-body);
  font-size: var(--gc-font-size-sm);
  color: var(--gc-text);
  background-color: var(--gc-surface);
  border: 1px solid var(--gc-border-strong);
  border-radius: var(--gc-radius-xs);
}

.entradas-de-texto-govco input[type="email"]:focus-visible,
.entradas-de-texto-govco input[type="date"]:focus-visible,
.entradas-de-texto-govco input[type="number"]:focus-visible,
.entradas-de-texto-govco input[type="search"]:focus-visible,
.entradas-de-texto-govco input[type="url"]:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gc-border-focus);
  outline-offset: 2px;
}

table select { min-height: 36px; }

/* El estado de error del sistema solo existe dentro de .entradas-de-texto;
   en una casilla el mensaje salía con el color de un texto de ayuda. */
.error-text-govco {
  display: block;
  margin-top: var(--gc-space-1);
  font-size: var(--gc-font-size-xs);
  color: var(--gc-danger);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--gc-danger) !important;
}

/* --- Grupos de opción --------------------------------------------------- */
.grupo-opciones-cundia {
  padding: 0;
  margin: 0;
  border: 0;
}

.grupo-opciones-cundia > legend {
  padding: 0;
  margin-bottom: var(--gc-space-2);
  font-family: var(--gc-font-body-bold);
  /* Sin esto el navegador lo pinta a 24 px y queda más grande que el título
     de la sección que lo contiene. */
  font-size: var(--gc-font-size-sm);
  font-weight: var(--gc-peso-cuerpo-fuerte);
  color: var(--gc-text-strong);
}

/* --- Medidores: la pista no se distinguía del fondo (1,12:1) ------------ */
.medidor-cundia {
  border: 1px solid var(--gc-border);
}

/* --- Reflujo a 320 px (WCAG 1.4.10) ------------------------------------- */
.portada-cundia h1 {
  font-size: clamp(28px, 7vw, var(--gc-font-size-h1));
  overflow-wrap: break-word;
}

@media (max-width: 900px) {
  /* El menú lateral ocupaba 377 px antes del h1 en cada página del panel. */
  .lateral-cundia {
    border-right: 0;
    border-bottom: 1px solid var(--gc-border);
  }

  .menu-lateral-cundia {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .menu-lateral-cundia a {
    padding: var(--gc-space-2);
    font-size: var(--gc-font-size-xs);
  }
}

/* --- Alto contraste ----------------------------------------------------- *
 * `tokens/contraste.css` re-mapea los tokens semánticos pero no la paleta de
 * marca --cundi-*, con la que esta capa construye sus degradados: el texto se
 * invertía a negro y el fondo seguía azul. */
.contrast-govco .portada-cundia,
.contrast-govco .caja-destacada-cundia,
.contrast-govco .franja-tarjeta-ficha {
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-border-strong);
}

.contrast-govco .portada-cundia,
.contrast-govco .portada-cundia h1,
.contrast-govco .portada-cundia p,
.contrast-govco .caja-destacada-cundia,
.contrast-govco .caja-destacada-cundia p,
.contrast-govco .caja-destacada-cundia .rotulo,
.contrast-govco .tablero-portada .rotulo,
.contrast-govco .franja-tarjeta-ficha .sector {
  color: var(--gc-text) !important;
}

.contrast-govco .tablero-portada {
  background: var(--gc-surface) !important;
  border-color: var(--gc-border-strong);
}

.contrast-govco .tablero-portada .cifra,
.contrast-govco .caja-destacada-cundia .cifra,
.contrast-govco .portada-cundia .antetitulo-cundia,
.contrast-govco .caja-destacada-cundia .antetitulo-cundia {
  color: var(--gc-text) !important;
}

.contrast-govco .btn-govco.fill-btn-govco,
.contrast-govco .portada-cundia .btn-govco.fill-btn-govco,
.contrast-govco .caja-destacada-cundia .btn-govco.fill-btn-govco {
  color: var(--gc-surface) !important;
  background-color: var(--gc-text) !important;
  border-color: var(--gc-text) !important;
}

.contrast-govco .portada-cundia .btn-govco.outline-btn-govco {
  color: var(--gc-text) !important;
  border-color: var(--gc-text) !important;
}

/* La barra gov.co y la de accesibilidad quedaban negro sobre negro, y con
   ellas desaparecía el botón para volver al modo normal. */
.contrast-govco .barra-govco-plantilla a,
.contrast-govco .boton-accesibilidad-govco,
.contrast-govco .boton-accesibilidad-govco .icono-govco {
  color: var(--govcolor-white, #FFFFFF) !important;
}

.contrast-govco .barra-govco-plantilla,
.contrast-govco .barra-accesibilidad-flotante-govco {
  background-color: var(--cundi-cobalto-600) !important;
}

.contrast-govco .etiqueta-govco {
  color: var(--gc-text) !important;
  background-color: var(--gc-surface) !important;
  border: 1px solid var(--gc-text) !important;
}