/* Los visualizadores se apoyan en los tokens del sitio: esquinas rectas como los
   botones (--border-radius-none), escala --spacing-*, Roboto Slab en los
   títulos y la regla lateral de .title--slab como recurso de jerarquía.
   Superficies planas con borde, sin sombra. */

/* Estados del plan, en la paleta de Datos y gráficos. Se declaran acá y no en
   los tokens del sitio porque son de esta sección; el mapa los repite en
   planes.js, que es quien pinta el canvas y no lee CSS. */
:root {
  --estado-aprobado: #198754;
  --estado-aprobado-oscuro: #146c43;
  --estado-en-proceso: #FAC858;
  --estado-en-proceso-oscuro: #E0A800;
  --fondo-filtros: #F8FAFC;
}

.vp-intro {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-m);
  margin-bottom: var(--spacing-m);
}
.vp-intro__texto { flex: 1 1 520px; }
/* Mismo tratamiento de prosa que la intro de Organismos Colaboradores. */
.vp-intro__texto p {
  color: var(--text-color);
  line-height: 1.7;
  text-wrap: pretty;
  margin-bottom: 1em;
  margin-bottom: 1lh;
}
.vp-intro__texto p:last-child { margin-bottom: 0; }
.vp-intro__texto strong { font-weight: 800; }

/* --- Cifras ---------------------------------------------------------- */
.vp-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-xxs);
  margin-bottom: var(--spacing-m);
}
.vp-cifra {
  border: 1px solid var(--gray-100);
  border-left: 6px solid var(--gray-200);
  padding: var(--spacing-xs) var(--spacing-s);
  background: var(--white);
}
.vp-cifra__n {
  display: block;
  font-family: var(--font-slab);
  font-size: var(--text-heading-m);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
}
.vp-cifra__k {
  display: block;
  font-size: var(--text-body-xs);
  color: var(--gray-700);
  margin-top: var(--spacing-xxxs);
}
/* Verde y amarillo de Datos y gráficos. El amarillo va solo en el filete: como
   color de cifra sobre blanco no alcanza el contraste mínimo. */
.vp-cifra--aprobado { border-left-color: var(--estado-aprobado); }
.vp-cifra--aprobado .vp-cifra__n { color: var(--estado-aprobado); }
.vp-cifra--en_proceso { border-left-color: var(--estado-en-proceso); }
.vp-cifra--sin_dato { border-left-color: var(--gray-300); }
.vp-cifra--total { border-left-color: var(--info-500); }
.vp-cifra--total .vp-cifra__n { color: var(--primary-600); }

/* --- Filtros --------------------------------------------------------- */
.vp-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-xs);
  padding: var(--spacing-s);
  border: 1px solid var(--gray-100);
  background: var(--fondo-filtros);
  margin-bottom: var(--spacing-s);
}
.vp-campo { display: flex; flex-direction: column; gap: var(--spacing-xxxs); min-width: 180px; }
.vp-campo--ancho { flex: 1 1 220px; }
.vp-campo__label {
  font-size: var(--text-body-xs);
  font-weight: var(--weight-bold);
  color: var(--gray-700);
}
.vp-campo select,
.vp-campo input {
  height: 44px;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-none);
  padding: 0 var(--spacing-xxs);
  font-size: var(--text-body-s);
  color: var(--text-color);
  background: var(--white);
  transition: border-color var(--hover-dur) var(--hover-ease);
}
.vp-campo select:hover,
.vp-campo input:hover { border-color: var(--gray-500); }
.vp-campo select:focus-visible,
.vp-campo input:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 0;
  border-color: var(--text-color);
}
/* Separado del resto de la fila: lo que hace es exportar lo filtrado, no
   filtrar. Pegado a «Limpiar» se leería como un tercer control. */
.vp-filtros__descarga { margin-left: auto; }

/* El rótulo cuenta las comunas de la selección y el número va de 4 a 346, así
   que el botón cambiaría de ancho en cada filtro y correría lo que tiene al
   lado. Se reserva el ancho del caso más largo y los dígitos van tabulares. */
.vp-boton-descarga {
  min-width: 15rem;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* --- Tablero --------------------------------------------------------- */
/* Chile ocupa una franja angosta: el mapa se queda en una columna
   estrecha y el detalle toma el ancho útil. */
.vp-tablero {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--spacing-s);
  align-items: start;
}
/* `minmax(0, 1fr)` y no `1fr`: un track `1fr` no baja de su min-content, y el
   nombre del documento va en una sola línea, así que el panel se estiraba hasta
   el largo del texto y se salía de la pantalla. */
@media (max-width: 991px) { .vp-tablero { grid-template-columns: minmax(0, 1fr); } }

.vp-panel {
  border: 1px solid var(--gray-100);
  background: var(--white);
  padding: var(--spacing-s);
}
.vp-panel__cab { margin-bottom: var(--spacing-xxs); }
.vp-panel__titulo {
  font-family: var(--font-slab);
  font-size: var(--text-heading-s);
  font-weight: var(--weight-bold);
  color: var(--text-color);
  margin: 0;
  text-wrap: balance;
}
.vp-panel__sub {
  font-size: var(--text-body-xs);
  color: var(--gray-700);
  margin: var(--spacing-xxxs) 0 0;
  font-variant-numeric: tabular-nums;
}
.vp-mapa { width: 100%; height: 620px; }
.vp-mapa__falla {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: var(--spacing-s);
  border: 1px solid var(--gray-100);
  background: var(--gray-50);
  font-size: var(--text-body-s);
  color: var(--gray-700);
  text-align: center;
  text-wrap: pretty;
}
.vp-pie { font-size: var(--text-body-xs); color: var(--gray-600); margin: var(--spacing-xxs) 0 0; text-wrap: pretty; }

.vp-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxxs) var(--spacing-s);
  padding-top: var(--spacing-xxs);
  border-top: 1px solid var(--gray-100);
}
.vp-leyenda__item { display: inline-flex; align-items: center; gap: var(--spacing-xxxs); font-size: var(--text-body-xs); color: var(--gray-800); }
.vp-leyenda__color { width: 14px; height: 14px; border: 1px solid var(--black-12); flex: none; }

/* --- Detalle --------------------------------------------------------- */
.vp-panel--detalle { min-height: 220px; }
.vp-detalle__vacio { color: var(--gray-600); font-size: var(--text-body-xs); margin: var(--spacing-xxs) 0 0; }
.vp-detalle__region { font-size: var(--text-body-xs); color: var(--gray-700); margin: 0 0 var(--spacing-xxs); }
/* El chip repite el color que el estado tiene en el mapa y en la leyenda. El
   texto se elige por contraste: blanco sobre el verde, oscuro sobre el amarillo
   y el gris, donde el blanco no se leería. */
.vp-chip {
  display: inline-block;
  border-radius: var(--border-radius-l);
  padding: var(--spacing-xxxs) var(--spacing-xxs);
  font-size: var(--text-body-xs);
  font-weight: var(--weight-bold);
  margin-bottom: var(--spacing-xs);
  background: var(--gray-300);
  color: var(--text-color);
}
.vp-chip--aprobado { background: var(--estado-aprobado); color: var(--white); }
.vp-chip--en_proceso { background: var(--estado-en-proceso); color: var(--text-color); }
.vp-chip--sin_informacion { background: var(--gray-300); color: var(--text-color); }

/* Escalera de estado: los tres estados en orden, pintados hasta donde llegó la
   comuna, con el tramo actual más oscuro que los ya recorridos. */
.vp-escalera { display: flex; gap: 3px; margin-bottom: var(--spacing-xs); }
.vp-escalera__paso { flex: 1; }
.vp-escalera__barra { display: block; height: 6px; background: var(--gray-100); }
/* Cada estado pinta su escalera con su propio color —el mismo del mapa—, para
   que una comuna en proceso no muestre una barra verde junto a un chip y un
   polígono amarillos. El tramo actual va un tono más oscuro que los recorridos. */
.vp-escalera--aprobado {
  --paso-hecho: var(--estado-aprobado);
  --paso-actual: var(--estado-aprobado-oscuro);
}
.vp-escalera--en_proceso {
  --paso-hecho: var(--estado-en-proceso);
  --paso-actual: var(--estado-en-proceso-oscuro);
}
/* «Sin información» no es avance: su tramo va en gris, para que un color en el
   primer paso no se lea como que algo empezó. */
.vp-escalera--sin_informacion {
  --paso-hecho: var(--gray-300);
  --paso-actual: var(--gray-300);
}

.vp-escalera__paso.is-hecho .vp-escalera__barra { background: var(--paso-hecho); }
.vp-escalera__paso.is-actual .vp-escalera__barra { background: var(--paso-actual); }
.vp-escalera__rotulo {
  display: block;
  font-size: 11px;
  color: var(--gray-600);
  margin-top: var(--spacing-xxxs);
  text-wrap: pretty;
}
.vp-escalera__paso.is-actual .vp-escalera__rotulo {
  color: var(--text-color);
  font-weight: var(--weight-bold);
}

.vp-bloque { margin-top: var(--spacing-s); padding-top: var(--spacing-xxs); border-top: 1px solid var(--gray-100); }
.vp-bloque__titulo {
  font-size: var(--text-body-xs);
  font-weight: var(--weight-bold);
  color: var(--gray-700);
  margin: 0 0 var(--spacing-xxs);
}

/* Cada documento se rotula por lo que es —plan o decreto—, no solo "ver". */
.vp-doc {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
  border: 1px solid var(--gray-200);
  padding: var(--spacing-xxs) var(--spacing-xs);
  margin-bottom: var(--spacing-xxxs);
  text-decoration: none;
  color: var(--text-color);
  min-height: 44px;
  transition: border-color var(--hover-dur) var(--hover-ease), background-color var(--hover-dur) var(--hover-ease);
}
.vp-doc:hover { border-color: var(--primary-600); background: var(--info-50); }
.vp-doc:focus-visible { outline: 3px solid var(--focus-color); outline-offset: -3px; }
.vp-doc > i:first-child { color: var(--primary-600); flex: none; }
.vp-doc__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vp-doc__tipo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-600); font-weight: var(--weight-bold); }
.vp-doc__nombre { font-size: var(--text-body-xs); color: var(--primary-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-doc__ext { font-size: 11px; color: var(--gray-500); flex: none; }

/* Barras del desglose por estado en el panel de detalle. */
.vp-barra { margin-bottom: var(--spacing-xxs); }
.vp-barra__cab { display: flex; justify-content: space-between; gap: var(--spacing-xxs); font-size: var(--text-body-xs); margin-bottom: 3px; }
.vp-barra__n { font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); color: var(--text-color); }
.vp-barra__riel { display: block; height: 6px; background: var(--gray-50); }
.vp-barra__riel span { display: block; height: 100%; }

/* En teléfono los filtros dejan de competir por el ancho. Sueltos, «Región» se
   quedaba en su mínimo de 180px mientras «Comuna» se llevaba el resto de la
   fila: dos campos hermanos con anchos distintos sin ninguna razón. */
@media (max-width: 767px) {
  .vp-filtros { flex-direction: column; align-items: stretch; }
  .vp-campo, .vp-campo--ancho { min-width: 0; flex: 0 0 auto; }
  .vp-filtros .button { width: 100%; min-height: 44px; }
  .vp-filtros__descarga { margin-left: 0; }

  /* Con el ancho de un teléfono, recortar el nombre con puntos suspensivos deja
     visible «Plan de Acción Comu…» y ningún documento se distingue del otro. */
  .vp-doc { align-items: flex-start; }
  .vp-doc > i:first-child, .vp-doc__ext { margin-top: 2px; }
  .vp-doc__nombre { white-space: normal; overflow: visible; text-overflow: clip; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-campo select, .vp-campo input { transition: none; }
}