/*
  Look & feel de metodosmixtos.com: fondo claro, acentos azules, tipografía sans-serif
  limpia, secciones espaciadas. Sin librerías externas de CSS, siguiendo la convención
  del resto del proyecto (reporte/plantilla.py, reporte_predios/plantilla.py).
*/

:root {
  --azul: #1a56db;
  --azul-oscuro: #123a99;
  --texto: #1f2937;
  --texto-tenue: #5b6474;
  --borde: #e2e6ec;
  --fondo: #ffffff;
  --fondo-tenue: #f7f9fb;
  --sombra: 0 1px 3px rgba(15, 23, 42, 0.08);

  /* Clasificación de grillas: mismo sentido que reporte/plantilla.py (verde/ámbar/rojo/gris).
     Predios (Idóneo/Viable con gestión/No viable) usa estas cuatro; no tocar. */
  --good: #1a7f4e;
  --warn: #b3720a;
  --bad: #c22c2c;
  --ink-3: #9aa2b1;

  /* Clasificación de grillas del visor de la app (mapa, KPIs, tabla): distinta a
     propósito de --good/--warn/--bad de arriba, que usa predios. Excluida en rojo,
     Condicionada en amarillo, Elegible/Prioritaria en dos tonos de verde. */
  --g-excluida: #c22c2c;
  --g-condicionada: #ca8a04;
  --g-elegible: #6fbf8a;
  --g-prioritaria: #1a7f4e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo-tenue);
  color: var(--texto);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.4rem; }

.texto-tenue { color: var(--texto-tenue); }

/* Cabecera */

.cabecera {
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}

.cabecera__contenido {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.cabecera__marca {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--texto);
}
.cabecera__marca:hover { text-decoration: none; }

.cabecera__mmc {
  font-weight: 700;
  color: var(--azul);
  letter-spacing: 0.04em;
}

.cabecera__titulo { font-weight: 600; }

.cabecera__nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 1;
}
.cabecera__nav a { color: var(--texto-tenue); font-weight: 500; }
.cabecera__nav a:hover { color: var(--azul); text-decoration: none; }

.etapas { gap: 0; flex-wrap: wrap; }
.etapa {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--texto-tenue);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
}
a.etapa:hover { color: var(--azul); text-decoration: none; }
.etapa__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--fondo-tenue);
  color: var(--texto-tenue);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.etapa--hecha .etapa__num { background: var(--good); color: #fff; }
.etapa--activa { color: var(--azul); }
.etapa--activa .etapa__num { background: var(--azul); color: #fff; }
.etapa__sep { color: var(--borde); padding: 0 0.1rem; }

.cabecera__usuario {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cabecera__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.cabecera__nombre { font-size: 0.9rem; color: var(--texto-tenue); }

/* Contenido */

.contenido {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

.tarjeta {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: var(--sombra);
  padding: 2rem;
}

.tarjeta--centrada {
  max-width: 480px;
  margin: 3rem auto;
  text-align: center;
}

.tarjeta--enlace {
  display: block;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tarjeta--enlace:hover {
  border-color: var(--azul);
  text-decoration: none;
}

.tablero__intro { max-width: 640px; margin-top: 0.4rem; }

.tablero__pasos {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tablero__pasos li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.paso__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.tablero__tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.opciones-avanzadas { border-top: 1px solid var(--borde); padding-top: 0.75rem; margin-top: 0.25rem; }
.opciones-avanzadas summary { cursor: pointer; font-weight: 600; color: var(--texto-tenue); }
.opciones-avanzadas summary:hover { color: var(--azul); }
.opciones-avanzadas__cuerpo { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }

/* Botones */

.boton {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  border: 1px solid transparent;
}
.boton:hover { text-decoration: none; }

.boton--google {
  background: var(--azul);
  color: #fff;
  margin-top: 1.25rem;
}
.boton--google:hover { background: var(--azul-oscuro); }

.boton--fantasma {
  border-color: var(--borde);
  color: var(--texto-tenue);
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
}
.boton--fantasma:hover { border-color: var(--azul); color: var(--azul); }

/* Pie */

.pie {
  border-top: 1px solid var(--borde);
  color: var(--texto-tenue);
  font-size: 0.85rem;
}
.pie__contenido {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Móvil: la cabecera se apila en vez de desbordar */
@media (max-width: 640px) {
  .cabecera__contenido { flex-wrap: wrap; gap: 0.75rem; }
  .cabecera__nav { order: 3; width: 100%; }
}

/* ------------------------------------------------------------------ */
/* Visor de grillas (etapa 2)                                          */
/* ------------------------------------------------------------------ */

.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.visor__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.visor__kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.kpi {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  min-width: 90px;
  text-align: center;
  font: inherit;
}
/* Los de grillas.js son <button data-clase> (filtran el mapa/tabla al hacer clic); los
   de predios.js son <div> simples, así que el cursor/estado activo solo aplica a los
   primeros. */
.kpi[data-clase] { cursor: pointer; }
.kpi[data-clase].kpi--activo { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul) inset; }
.kpi span { display: block; font-size: 1.3rem; font-weight: 700; }
.kpi small { color: var(--texto-tenue); }
.kpi--pre span { color: var(--good); }
.kpi--via span { color: var(--warn); }
.kpi--rep span { color: var(--bad); }
.kpi--des span { color: var(--ink-3); }
.kpi--prioritaria span { color: var(--g-prioritaria); }
.kpi--elegible span { color: var(--g-elegible); }
.kpi--condicionada span { color: var(--g-condicionada); }
.kpi--excluida span { color: var(--g-excluida); }

.kpi-perfil { display: flex; gap: 0.5rem; margin-left: auto; }

.chips { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }

.chip {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--texto-tenue);
  cursor: pointer;
}
.chip.on, .chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip:disabled { opacity: 0.4; cursor: not-allowed; }

.visor__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.visor__mapa { padding: 1rem; }

.mapa-leaflet {
  width: 100%;
  height: 560px;
  background: #eef2f7;
  border-radius: 8px;
}
/* Colombia, departamentos, subestaciones, líneas y grillas se estilan desde grillas.js
   con las opciones propias de cada capa de Leaflet (color/weight/fillOpacity), no con
   CSS: son tipos de capa distintos (polígono, polyline, circleMarker, rectangle) y no
   gana nada tener la mitad de la paleta aquí y la otra mitad en JS. */
.mapa-leaflet .leaflet-tooltip { font: inherit; font-size: 0.8rem; }
.capa-base-gris { filter: grayscale(1) contrast(1.05); }

.marca-lotes {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--azul);
  color: var(--azul);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
}

/* max-height es un tope, no un piso: si esta caja tuviera height:100% en vez de un tope,
   el grid (.visor__cuerpo, align-items: stretch por defecto) mediría su contenido SIN
   recortar para calcular el alto de la fila, y un párrafo largo en la ficha terminaría
   estirando también la tarjeta del mapa. 560px es solo el valor de arranque;
   igualarAltoConMapa() (base.html) lo reemplaza por el alto real medido de la tarjeta
   del mapa apenas carga la página. */
.visor__ficha { padding: 1.25rem; overflow-y: auto; max-height: 560px; box-sizing: border-box; }

.leyenda-cobertura { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.leyenda-item { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; color: var(--texto-tenue); }
.leyenda-item i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

.ficha-lote { padding: 1.25rem; margin-bottom: 1.25rem; max-width: 640px; }
/* La sección del certificado (lote.js) queda debajo del mapa y la ficha, no al lado de
   nada — a todo el ancho, sin el tope pensado para el panel angosto junto al mapa. */
.ficha-lote--ancha { max-width: none; }
.f-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.f-head h2 { margin: 0; }
.ficha-accion { margin-top: 1rem; }

.tabla-criterios { width: 100%; border-collapse: collapse; margin: 0.25rem 0 0.75rem; font-size: 0.88rem; }
.tabla-criterios td { padding: 0.25rem 0; border-bottom: 1px solid var(--borde); }
.tabla-criterios td:first-child { color: var(--texto-tenue); }

.f-sec-titulo {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-tenue);
  margin-top: 1rem;
}

.sat-caja { margin: 0.75rem 0; }

.pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
}
.pill.p-pre { background: var(--good); }
.pill.p-via { background: var(--warn); }
.pill.p-rep { background: var(--bad); }
.pill.p-des { background: var(--ink-3); }
.pill.g-prioritaria { background: var(--g-prioritaria); }
.pill.g-elegible { background: var(--g-elegible); }
.pill.g-condicionada { background: var(--g-condicionada); color: #3f2d00; }
.pill.g-excluida { background: var(--g-excluida); }
.pill--lotes-lista { background: var(--g-prioritaria); }
.pill--lotes-curso { background: var(--g-condicionada); color: #3f2d00; }

.visor__filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.visor__filtros select, .visor__filtros input[type="search"] {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  color: var(--texto);
  background: var(--fondo);
  font: inherit;
}
.visor__filtros input[type="search"] { min-width: 200px; }

.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tabla th, .tabla td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--borde); text-align: left; }
.tabla th[data-k] { cursor: pointer; user-select: none; color: var(--texto-tenue); }
.tabla th[data-k]:hover { color: var(--azul); }
.tabla td.num, .tabla th.num { text-align: right; }
.tabla tr.sel { background: var(--fondo-tenue); }
.tabla tbody tr:hover { background: var(--fondo-tenue); }

@media (max-width: 900px) {
  .visor__cuerpo { grid-template-columns: 1fr; }
  .mapa-leaflet { height: 420px; }
}