/* =========================================================================
   VialGest · Sistema de diseño
   -------------------------------------------------------------------------
   Criterio de color: la marca NO compite con el dato. Los verdes, amarillos,
   naranjas y rojos quedan reservados para la escala de condición del pavimento
   (PCI) y los estados de reporte. La identidad se construye sobre azul
   profundo "asfalto" y un turquesa de señalización, que no aparecen en
   ninguna escala de datos.
   ========================================================================= */

:root {
  /* --- Identidad --- */
  --vg-tinta:        #0A1A2B;   /* azul casi negro: asfalto mojado */
  --vg-tinta-suave:  #15304A;
  --vg-primario:     #1B5E8C;   /* azul institucional */
  --vg-primario-alt: #14466B;
  --vg-acento:       #00B39A;   /* turquesa de señalización */
  --vg-acento-alt:   #008F7C;

  /* --- Superficies y texto --- */
  --vg-fondo:        #F4F7FA;
  --vg-superficie:   #FFFFFF;
  --vg-superficie-2: #EDF2F7;
  --vg-borde:        #D8E0E9;
  --vg-texto:        #16222F;
  --vg-texto-2:      #5B6B7C;
  --vg-texto-3:      #8A97A5;

  /* --- Estados del reporte (escala de dato) --- */
  --vg-nuevo:        #D7263D;
  --vg-validado:     #E08A00;
  --vg-atencion:     #2B7BBA;
  --vg-resuelto:     #1E8E6A;
  --vg-rechazado:    #8A97A5;

  /* --- Condición del pavimento, escala PCI (módulo de inspección) --- */
  --vg-pci-excelente: #1A7F4B;
  --vg-pci-bueno:     #6FBF52;
  --vg-pci-regular:   #F2C230;
  --vg-pci-malo:      #E8803A;
  --vg-pci-muymalo:   #C8372D;

  /* --- Mensajes --- */
  --vg-error:        #C0392B;
  --vg-error-fondo:  #FDECEA;
  --vg-exito:        #1E8E6A;
  --vg-exito-fondo:  #E6F5F0;

  /* --- Métrica --- */
  --vg-radio:        10px;
  --vg-radio-sm:     6px;
  --vg-sombra:       0 1px 3px rgba(10, 26, 43, .08), 0 4px 16px rgba(10, 26, 43, .06);
  --vg-sombra-alta:  0 8px 32px rgba(10, 26, 43, .18);
  --vg-barra:        56px;
  --vg-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--vg-fuente);
  color: var(--vg-texto);
  background: var(--vg-fondo);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------ Marca ----------------------------------- */
.vg-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.vg-logo svg { display: block; flex: none; }
.vg-logo-texto {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; color: #fff;
}
.vg-logo-texto .acento { color: var(--vg-acento); }
.vg-logo--oscuro .vg-logo-texto { color: var(--vg-tinta); }

/* ------------------------------ Barra ----------------------------------- */
.vg-barra {
  position: fixed; inset: 0 0 auto 0; height: var(--vg-barra); z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 16px;
  background: var(--vg-tinta);
  padding-top: env(safe-area-inset-top);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.vg-barra-acciones { display: flex; align-items: center; gap: 10px; }

.vg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; color: #cfe0ee;
  background: rgba(255,255,255,.1); padding: 5px 11px; border-radius: 99px;
  white-space: nowrap;
}
.vg-chip b { color: #fff; font-weight: 700; }

/* ------------------------------ Botones --------------------------------- */
.vg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: .95rem; font-weight: 600; line-height: 1;
  padding: 11px 18px; border: 1px solid transparent; border-radius: var(--vg-radio-sm);
  cursor: pointer; transition: background .15s ease, border-color .15s ease, opacity .15s;
  text-decoration: none;
}
.vg-btn:disabled { opacity: .55; cursor: not-allowed; }
.vg-btn--primario { background: var(--vg-primario); color: #fff; }
.vg-btn--primario:hover:not(:disabled) { background: var(--vg-primario-alt); }
.vg-btn--acento { background: var(--vg-acento); color: #06251F; }
.vg-btn--acento:hover:not(:disabled) { background: var(--vg-acento-alt); color: #fff; }
.vg-btn--neutro {
  background: var(--vg-superficie); color: var(--vg-texto); border-color: var(--vg-borde);
}
.vg-btn--neutro:hover:not(:disabled) { background: var(--vg-superficie-2); }
.vg-btn--fantasma {
  background: transparent; color: #cfe0ee; border-color: rgba(255,255,255,.25);
  padding: 8px 14px; font-size: .85rem;
}
.vg-btn--fantasma:hover { background: rgba(255,255,255,.1); color: #fff; }
.vg-btn--bloque { width: 100%; }
.vg-btn--sm { padding: 7px 12px; font-size: .82rem; }

/* --------------------------- Formularios -------------------------------- */
.vg-campo { display: block; margin-bottom: 14px; }
.vg-etiqueta {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--vg-texto-2); margin-bottom: 6px;
}
.vg-input, .vg-select, .vg-textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--vg-texto);
  padding: 11px 12px; background: var(--vg-superficie);
  border: 1px solid var(--vg-borde); border-radius: var(--vg-radio-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vg-input:focus, .vg-select:focus, .vg-textarea:focus {
  outline: none; border-color: var(--vg-primario);
  box-shadow: 0 0 0 3px rgba(27, 94, 140, .15);
}
.vg-textarea { resize: vertical; min-height: 64px; }
.vg-ayuda { font-size: .78rem; color: var(--vg-texto-3); margin-top: 5px; }

/* ----------------------------- Tarjetas --------------------------------- */
.vg-tarjeta {
  background: var(--vg-superficie); border: 1px solid var(--vg-borde);
  border-radius: var(--vg-radio); box-shadow: var(--vg-sombra); padding: 20px;
}
.vg-tarjeta-titulo {
  margin: 0 0 4px; font-size: 1.02rem; font-weight: 700; color: var(--vg-tinta);
}
.vg-tarjeta-sub { margin: 0 0 16px; font-size: .85rem; color: var(--vg-texto-2); }

/* ------------------------------ Mensajes -------------------------------- */
.vg-mensaje {
  font-size: .86rem; line-height: 1.45; margin: 12px 0 0;
  padding: 0; min-height: 1.1em; color: var(--vg-texto-2);
}
.vg-mensaje--error {
  color: var(--vg-error); background: var(--vg-error-fondo);
  padding: 10px 12px; border-radius: var(--vg-radio-sm);
}
.vg-mensaje--exito {
  color: var(--vg-exito); background: var(--vg-exito-fondo);
  padding: 10px 12px; border-radius: var(--vg-radio-sm);
}

/* ------------------------------- Tablas --------------------------------- */
.vg-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.vg-tabla th {
  text-align: left; font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--vg-texto-3);
  padding: 10px 12px; border-bottom: 1px solid var(--vg-borde); white-space: nowrap;
}
.vg-tabla td {
  padding: 12px; border-bottom: 1px solid var(--vg-superficie-2);
  vertical-align: middle;
}
.vg-tabla tr:last-child td { border-bottom: none; }
.vg-tabla-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }

/* ---------------------------- Insignias --------------------------------- */
.vg-insignia {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 99px; color: #fff; white-space: nowrap;
}
.vg-insignia--nuevo      { background: var(--vg-nuevo); }
.vg-insignia--validado   { background: var(--vg-validado); }
.vg-insignia--en_atencion{ background: var(--vg-atencion); }
.vg-insignia--resuelto   { background: var(--vg-resuelto); }
.vg-insignia--rechazado  { background: var(--vg-rechazado); }
.vg-insignia--rol {
  background: var(--vg-superficie-2); color: var(--vg-texto-2);
  border: 1px solid var(--vg-borde);
}
.vg-insignia--inactivo { background: var(--vg-texto-3); }

/* --------------------------- Indicadores -------------------------------- */
.vg-kpis {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.vg-kpi {
  background: var(--vg-superficie); border: 1px solid var(--vg-borde);
  border-radius: var(--vg-radio); padding: 14px 16px;
  border-left: 3px solid var(--vg-primario);
}
.vg-kpi-valor {
  font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--vg-tinta);
  font-variant-numeric: tabular-nums;
}
.vg-kpi-nombre {
  font-size: .74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--vg-texto-3); margin-top: 4px;
}
.vg-kpi--nuevo      { border-left-color: var(--vg-nuevo); }
.vg-kpi--validado   { border-left-color: var(--vg-validado); }
.vg-kpi--atencion   { border-left-color: var(--vg-atencion); }
.vg-kpi--resuelto   { border-left-color: var(--vg-resuelto); }

/* ------------------------------ Mapa ------------------------------------ */
.vg-mapa { position: fixed; inset: var(--vg-barra) 0 0 0; }

.vg-leyenda {
  position: fixed; left: 12px; bottom: 16px; z-index: 25;
  background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border: 1px solid var(--vg-borde); border-radius: var(--vg-radio);
  padding: 10px 12px; box-shadow: var(--vg-sombra); font-size: .78rem;
}
.vg-leyenda-titulo {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--vg-texto-3); margin-bottom: 7px;
}
.vg-leyenda-fila { display: flex; align-items: center; gap: 7px; margin: 4px 0; }
.vg-leyenda-punto {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: none;
}

/* --------------------------- Botón flotante ----------------------------- */
.vg-flotante {
  position: fixed; right: 16px; bottom: 20px; z-index: 30;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--vg-acento); color: #06251F;
  border: none; border-radius: 99px; padding: 15px 22px;
  font-family: inherit; font-size: 1rem; font-weight: 700;
  box-shadow: var(--vg-sombra-alta); cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.vg-flotante:hover { background: var(--vg-acento-alt); color: #fff; transform: translateY(-1px); }

/* ------------------------- Panel deslizante ----------------------------- */
.vg-hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--vg-superficie);
  border-radius: 18px 18px 0 0; box-shadow: var(--vg-sombra-alta);
  max-height: 88vh; overflow-y: auto;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(0); transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.vg-hoja[hidden] { display: block; transform: translateY(105%); pointer-events: none; }
.vg-hoja-asa {
  width: 38px; height: 4px; border-radius: 99px; background: var(--vg-borde);
  margin: -6px auto 14px;
}
@media (min-width: 720px) {
  .vg-hoja { left: auto; right: 16px; bottom: 16px; width: 390px; border-radius: var(--vg-radio); }
  .vg-hoja[hidden] { transform: translateY(calc(100% + 24px)); }
}

/* ------------------------------ Diseño ---------------------------------- */
.vg-pagina { padding: calc(var(--vg-barra) + 20px) 16px 40px; max-width: 1100px; margin: 0 auto; }
.vg-seccion { margin-bottom: 22px; }
.vg-seccion-titulo {
  font-size: 1.15rem; font-weight: 700; color: var(--vg-tinta); margin: 0 0 12px;
}
.vg-fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vg-fila--fin { justify-content: flex-end; }
.vg-grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .vg-grid-2 { grid-template-columns: 1fr 1fr; } }

.vg-centrado {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(1200px 600px at 50% -10%, #15304A 0%, transparent 60%),
    var(--vg-tinta);
}
.vg-caja-acceso { width: 100%; max-width: 380px; }

.vg-vista-previa {
  width: 100%; max-height: 210px; object-fit: cover;
  border-radius: var(--vg-radio-sm); margin-top: 10px; display: block;
}

/* ------------------------- Globo del mapa ------------------------------- */
.maplibregl-popup-content {
  border-radius: var(--vg-radio) !important;
  box-shadow: var(--vg-sombra-alta) !important;
  padding: 13px 15px !important;
  font-family: var(--vg-fuente);
}
.vg-globo-titulo {
  font-weight: 700; font-size: .95rem; color: var(--vg-tinta);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.vg-globo-meta { font-size: .76rem; color: var(--vg-texto-3); margin-top: 3px; }
.vg-globo-texto { font-size: .85rem; color: var(--vg-texto-2); margin-top: 6px; }
.vg-globo-foto {
  width: 100%; border-radius: var(--vg-radio-sm); margin-top: 9px; display: block;
}

.vg-oculto { display: none !important; }

/* La atribución de OpenStreetMap es obligatoria por licencia: se eleva para
   que el botón flotante no la tape en pantallas de teléfono. */
.maplibregl-ctrl-bottom-right { bottom: 76px; }
@media (min-width: 720px) { .maplibregl-ctrl-bottom-right { bottom: 8px; } }

/* ------------------- Capas del visor de red vial ------------------------
   Dos escalas DISTINTAS y deliberadamente separadas:
   · Transitabilidad: estado operativo, cambia en horas.
   · Condición (PCI): estado del pavimento, cambia en años.
   Pintarlas con el mismo color haría el mapa ambiguo.                      */
.vg-panel-lateral {
  position: fixed; top: var(--vg-barra); left: 0; bottom: 0; width: 330px;
  background: var(--vg-superficie); border-right: 1px solid var(--vg-borde);
  overflow-y: auto; padding: 16px; z-index: 20;
}
.vg-mapa--con-panel { left: 330px; }
@media (max-width: 860px) {
  .vg-panel-lateral { width: 100%; bottom: auto; max-height: 52vh; border-right: none;
                      border-bottom: 1px solid var(--vg-borde); }
  .vg-mapa--con-panel { left: 0; top: calc(var(--vg-barra) + 52vh); }
}

.vg-ruta-item {
  border: 1px solid var(--vg-borde); border-radius: var(--vg-radio-sm);
  padding: 11px 12px; margin-bottom: 9px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.vg-ruta-item:hover { background: var(--vg-superficie-2); }
.vg-ruta-item.activa { border-color: var(--vg-primario); background: #EEF5FA; }
.vg-ruta-codigo { font-weight: 700; color: var(--vg-tinta); font-size: .95rem; }
.vg-ruta-meta { font-size: .78rem; color: var(--vg-texto-2); margin-top: 3px; }
.vg-ruta-aviso {
  font-size: .74rem; color: #8A5B00; background: #FFF6E0;
  border-radius: 5px; padding: 6px 8px; margin-top: 7px; line-height: 1.35;
}

.vg-selector-capa {
  display: flex; gap: 0; margin-bottom: 12px;
  border: 1px solid var(--vg-borde); border-radius: var(--vg-radio-sm); overflow: hidden;
}
.vg-selector-capa button {
  flex: 1; padding: 8px 6px; border: 0; background: var(--vg-superficie);
  font-family: inherit; font-size: .8rem; font-weight: 600;
  color: var(--vg-texto-2); cursor: pointer;
}
.vg-selector-capa button.activa { background: var(--vg-primario); color: #fff; }

.vg-leyenda-escala { font-size: .76rem; margin-top: 10px; }
.vg-leyenda-escala .fila { display: flex; align-items: center; gap: 7px; margin: 3px 0; }
.vg-leyenda-escala i {
  width: 22px; height: 4px; border-radius: 2px; flex: none;
}

.vg-progresiva-caja {
  position: fixed; right: 14px; top: calc(var(--vg-barra) + 14px); z-index: 25;
  background: rgba(255,255,255,.97); border: 1px solid var(--vg-borde);
  border-radius: var(--vg-radio); box-shadow: var(--vg-sombra);
  padding: 11px 14px; min-width: 190px;
}
.vg-progresiva-valor {
  font-size: 1.22rem; font-weight: 700; color: var(--vg-tinta);
  font-variant-numeric: tabular-nums;
}
.vg-progresiva-nota { font-size: .74rem; color: var(--vg-texto-3); margin-top: 3px; }
.vg-progresiva-nota.fuera { color: var(--vg-error); font-weight: 600; }

/* =========================================================================
   Navegación por áreas (pestañas)
   -------------------------------------------------------------------------
   Va bajo la barra y es la misma en todas las páginas: el usuario cambia de
   área sin perder de vista dónde está. En pantalla angosta se desplaza en
   horizontal en vez de apilarse, porque apilada empujaría el mapa fuera de
   la pantalla en el celular.
   ========================================================================= */
.vg-areas {
  position: fixed;
  top: var(--vg-barra);
  left: 0; right: 0;
  height: 44px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 14px;
  background: var(--vg-tinta-suave);
  overflow-x: auto;
  scrollbar-width: none;
  z-index: 950;
}
.vg-areas::-webkit-scrollbar { display: none; }
.vg-areas a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 0 15px;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.vg-areas a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.vg-areas a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--vg-acento);
}
.vg-areas a svg { flex: none; opacity: .9; }
/* Las páginas con pestañas empiezan 44 px más abajo. */
body.vg-con-areas { --vg-barra-total: calc(var(--vg-barra) + 44px); }

/* =========================================================================
   Elementos de vía
   -------------------------------------------------------------------------
   Criterio de color: esta es una paleta CATEGÓRICA, no una escala. Los tipos
   no están ordenados de mejor a peor, así que no pueden usar un degradado.
   Y evita a propósito los verdes y amarillos de la escala PCI, salvo en la
   severidad de una incidencia, donde "rojo = grave" significa lo mismo que
   en el pavimento y confundir no es posible: una es un punto y la otra una
   línea.
   ========================================================================= */
:root {
  --vg-el-incidencia:   #C8372D;
  --vg-el-obra:         #1B5E8C;
  --vg-el-senal:        #00B39A;
  --vg-el-hito:         #6B4FBB;
  --vg-el-topografia:   #B5179E;
  --vg-el-cantera:      #8B5E34;
  --vg-el-agua:         #2B9BD4;
  --vg-el-logistica:    #5B6B7C;
  --vg-el-poblado:      #0A1A2B;
  --vg-el-desvio:       #FF6B35;
  --vg-el-otro:         #8A97A5;

  --vg-sev-baja:        #F2C230;
  --vg-sev-media:       #E8803A;
  --vg-sev-alta:        #C8372D;
  --vg-sev-critica:     #7B1A13;
}

/* --- Ficha del elemento: el panel que abre al hacer clic en un punto --- */
.vg-ficha {
  position: fixed;
  top: calc(var(--vg-barra) + 44px);
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100%;
  background: var(--vg-superficie);
  border-left: 1px solid var(--vg-borde);
  box-shadow: var(--vg-sombra-alta);
  overflow-y: auto;
  z-index: 900;
  transform: translateX(100%);
  transition: transform .22s ease;
}
.vg-ficha.abierta { transform: translateX(0); }
.vg-ficha-cabecera {
  position: sticky;
  top: 0;
  background: var(--vg-superficie);
  border-bottom: 1px solid var(--vg-borde);
  padding: 15px 18px 13px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  z-index: 2;
}
.vg-ficha-cabecera h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--vg-tinta);
  line-height: 1.25;
}
.vg-ficha-cuerpo { padding: 16px 18px 40px; }
.vg-ficha-cerrar {
  flex: none;
  border: 0;
  background: var(--vg-superficie-2);
  color: var(--vg-texto-2);
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.vg-ficha-cerrar:hover { background: var(--vg-borde); color: var(--vg-texto); }

/* Punto de color que identifica el tipo, junto al título */
.vg-punto-tipo {
  flex: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  margin-top: 4px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(10, 26, 43, .25);
}

/* --- Datos en pares etiqueta/valor --- */
.vg-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  font-size: .88rem;
  margin: 0 0 18px;
}
.vg-datos dt { color: var(--vg-texto-3); font-weight: 600; }
.vg-datos dd { margin: 0; color: var(--vg-texto); }
.vg-datos dd.mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --- Galería por fase: antes / durante / después --- */
.vg-fases { display: grid; gap: 14px; }
.vg-fase {
  border: 1px solid var(--vg-borde);
  border-radius: var(--vg-radio);
  overflow: hidden;
}
.vg-fase-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: var(--vg-superficie-2);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vg-texto-2);
}
.vg-fase--antes   .vg-fase-titulo { box-shadow: inset 3px 0 0 var(--vg-sev-alta); }
.vg-fase--durante .vg-fase-titulo { box-shadow: inset 3px 0 0 var(--vg-sev-baja); }
.vg-fase--despues .vg-fase-titulo { box-shadow: inset 3px 0 0 var(--vg-resuelto); }
.vg-fase--referencia .vg-fase-titulo { box-shadow: inset 3px 0 0 var(--vg-texto-3); }
.vg-fase-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 5px;
  padding: 5px;
}
.vg-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--vg-radio-sm);
  overflow: hidden;
  background: var(--vg-superficie-2);
  cursor: zoom-in;
}
.vg-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vg-foto-vacia {
  padding: 16px 12px;
  font-size: .82rem;
  color: var(--vg-texto-3);
  text-align: center;
}
.vg-foto-quitar {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 26, 43, .72);
  color: #fff;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.vg-foto:hover .vg-foto-quitar { opacity: 1; }

/* Visor a pantalla completa de una foto */
.vg-lupa {
  position: fixed;
  inset: 0;
  background: rgba(10, 26, 43, .92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 24px;
  cursor: zoom-out;
}
.vg-lupa.abierta { display: flex; }
.vg-lupa img { max-width: 100%; max-height: 100%; border-radius: var(--vg-radio); }
.vg-lupa-pie {
  position: absolute;
  bottom: 18px; left: 0; right: 0;
  text-align: center;
  color: rgba(255,255,255,.85);
  font-size: .85rem;
  padding: 0 24px;
}

/* --- Insignias de severidad y estado del elemento --- */
.vg-insignia--baja    { background: var(--vg-sev-baja); color: #3A2D00; }
.vg-insignia--media   { background: var(--vg-sev-media); }
.vg-insignia--alta    { background: var(--vg-sev-alta); }
.vg-insignia--critica { background: var(--vg-sev-critica); }
.vg-insignia--pendiente  { background: var(--vg-nuevo); }
.vg-insignia--programado { background: var(--vg-validado); }
.vg-insignia--en_proceso { background: var(--vg-atencion); }
.vg-insignia--ejecutado  { background: var(--vg-resuelto); }
.vg-insignia--verificado { background: var(--vg-pci-excelente); }
.vg-insignia--descartado { background: var(--vg-rechazado); }

/* --- Aviso de coordenada dudosa: tiene que incomodar --- */
.vg-aviso-coord {
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  margin: 0 0 14px;
  background: #FFF8E1;
  border: 1px solid #F2C230;
  border-left-width: 4px;
  border-radius: var(--vg-radio-sm);
  font-size: .84rem;
  color: #5A4300;
  line-height: 1.45;
}

/* --- Lista de elementos del panel lateral --- */
.vg-el-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--vg-borde);
  border-radius: var(--vg-radio-sm);
  background: var(--vg-superficie);
  margin-bottom: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: .86rem;
  color: var(--vg-texto);
}
.vg-el-item:hover { border-color: var(--vg-primario); background: var(--vg-superficie-2); }
.vg-el-item.activo { border-color: var(--vg-acento); box-shadow: 0 0 0 2px rgba(0,179,154,.18); }
.vg-el-item-txt { flex: 1; min-width: 0; }
.vg-el-item-txt strong {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vg-el-item-txt span { font-size: .78rem; color: var(--vg-texto-3); }
.vg-el-conteo {
  flex: none;
  font-size: .72rem;
  color: var(--vg-texto-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .vg-ficha { width: 100%; top: auto; height: 72vh; border-left: 0; border-top: 1px solid var(--vg-borde); }
  .vg-ficha { transform: translateY(100%); }
  .vg-ficha.abierta { transform: translateY(0); }
}

/* =========================================================================
   Desplazamiento por la barra de áreas
   -------------------------------------------------------------------------
   El mapa y el panel están posicionados contra la barra superior. Al añadir
   las pestañas hay 44 px más arriba, así que las páginas con áreas desplazan
   ambos. Se hace con una clase en <body> y no tocando las reglas originales,
   para que la página del visor sin pestañas siga igual.
   ========================================================================= */
body.vg-con-areas .vg-mapa { top: calc(var(--vg-barra) + 44px); }
body.vg-con-areas .vg-panel-lateral { top: calc(var(--vg-barra) + 44px); }

@media (max-width: 860px) {
  body.vg-con-areas .vg-panel-lateral { max-height: 46vh; }
  body.vg-con-areas .vg-mapa--con-panel { top: calc(var(--vg-barra) + 44px + 46vh); }
}

/* =========================================================================
   Páginas de contenido (sin mapa)
   ========================================================================= */
.vg-contenido {
  max-width: 1100px;
  margin: 0 auto;
  padding: calc(var(--vg-barra) + 44px + 24px) 20px 60px;
}

/* Tarjeta de proyecto en el listado */
.vg-proy {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: var(--vg-superficie);
  border: 1px solid var(--vg-borde);
  border-left: 4px solid var(--vg-primario);
  border-radius: var(--vg-radio);
  padding: 15px 17px;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: var(--vg-sombra);
  transition: border-color .15s, transform .12s;
}
.vg-proy:hover { border-color: var(--vg-primario); transform: translateY(-1px); }
.vg-proy.activo { border-left-color: var(--vg-acento); }
.vg-proy--ajeno { border-left-color: var(--vg-el-topografia); }
.vg-proy-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vg-proy-cod {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--vg-texto-3);
  font-variant-numeric: tabular-nums;
}
.vg-proy-nom { font-size: 1rem; font-weight: 600; color: var(--vg-tinta); }
.vg-proy-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 9px; font-size: .83rem; color: var(--vg-texto-2);
}
.vg-proy-meta b {
  display: block; color: var(--vg-texto); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vg-proy-meta span { color: var(--vg-texto-3); font-size: .76rem; }

.vg-insignia--preparacion  { background: var(--vg-texto-3); }
.vg-insignia--ejecucion    { background: var(--vg-atencion); }
.vg-insignia--suspendido   { background: var(--vg-validado); }
.vg-insignia--recepcionado { background: var(--vg-resuelto); }
.vg-insignia--liquidado    { background: var(--vg-pci-excelente); }
.vg-insignia--ajeno        { background: var(--vg-el-topografia); }