/* Página «Proyectos»: mapa interactivo de Colombia y listado completo (proyectos.html · proyectos.js).
   Usa los tokens y las capas de styles.css, que se carga antes. */
@layer components {
  /* ───────── cabecera ───────── */
  .pry { --fondo: #071428; background: var(--fondo); padding-block: clamp(7rem, 12vw, 9rem) clamp(3rem, 6vw, 5rem); }
  .pry--seccion { padding-block: clamp(4rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem); scroll-margin-top: 3rem; }   /* dentro del inicio: sin el espacio de la cabecera */
  .pry__titulo { margin: .8rem 0 0; font-size: clamp(2.2rem, 5.4vw, 4.2rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--white); text-wrap: balance; max-width: 18ch; }
  .pry__oro { background: linear-gradient(180deg, #f6d394 0%, #e3ac5c 55%, #c98a34 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .pry__lead { margin-top: 1.1rem; max-width: 60ch; }
  .pry__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
    & div { border-left: 2px solid rgb(232 179 106 / .55); padding-left: .9rem; }
    & dt { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
    & dd { margin: .2rem 0 0; font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 760; font-variation-settings: "wdth" 80; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums;
      & small { margin-left: .4rem; font-size: .8rem; font-weight: 500; color: var(--mist); letter-spacing: 0; } } }
  @media (min-width: 760px) { .pry__cifras { grid-template-columns: repeat(4, auto); justify-content: start; gap: 2.6rem; } }

  /* ───────── filtros ───────── */
  .pry__filtros { display: flex; flex-wrap: wrap; align-items: end; gap: .9rem 1.2rem; margin-top: clamp(1.8rem, 4vw, 2.8rem); padding: 1rem; border-radius: 18px;
    background: rgb(255 255 255 / .045); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); }
  .pry__grupo { border: 0; padding: 0; margin: 0; min-width: 0; }
  .pry__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
  .pry__chip { min-height: 40px; padding: .4rem .9rem; border: 0; border-radius: 999px; font: 600 .86rem/1 var(--font); color: var(--mist); background: rgb(255 255 255 / .07); cursor: pointer;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); transition: background .2s, color .2s;
    & small { font-weight: 500; opacity: .7; margin-left: .15rem; }
    &:hover { background: rgb(255 255 255 / .14); color: var(--white); }
    &[aria-pressed="true"] { background: var(--gold); color: var(--navy); box-shadow: none; } }
  .pry__campo { display: grid; gap: .3rem; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mist);
    & select { min-height: 40px; padding: 0 2rem 0 .8rem; border: 0; border-radius: 12px; font: 500 .9rem/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--white);
      background: rgb(255 255 255 / .09) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9d3e0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .55rem center / 1rem;
      box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); appearance: none; cursor: pointer; }
    & option { color: var(--ink); background: var(--white); } }
  .pry__tiempo { display: flex; align-items: center; gap: .8rem; flex: 1 1 280px; min-width: 0; }
  .pry__play { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--navy); background: var(--gold); cursor: pointer; transition: scale .2s var(--ease);
    & .ico { width: 20px; height: 20px; } &:hover { scale: 1.07; } &.is-on { background: var(--white); } }
  .pry__rango { flex: 1; display: grid; gap: .45rem; min-width: 0; font-size: .82rem; color: var(--mist);
    & b { color: var(--gold); font-variant-numeric: tabular-nums; font-size: 1rem; }
    & input { width: 100%; margin: 0; accent-color: var(--gold); cursor: pointer; } }

  /* ───────── escena: mapa + panel ───────── */
  .pry__escena { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
  @media (min-width: 980px) { .pry__escena { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); align-items: start; } }
  .pry__mapa { position: relative; border-radius: 22px; overflow: hidden; touch-action: pan-y;
    background: radial-gradient(90% 70% at 50% 45%, #0f2a4f 0%, #0a1d3a 60%, #081a33 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
    & svg { display: block; width: 100%; height: auto; max-height: min(86vh, 900px); margin-inline: auto; cursor: grab; }
    &.con-zoom { touch-action: none; & svg:active { cursor: grabbing; } }
    &.sin-mapa svg, &.sin-mapa .pry__zoom, &.sin-mapa .pry__leyenda { display: none; } }
  .pry__carga { margin: 0; padding: 3rem 1.5rem; text-align: center; color: var(--mist); }
  .map__dep { stroke: #071428; stroke-width: .9; vector-effect: non-scaling-stroke; cursor: pointer; outline: none; transition: fill .45s var(--ease), opacity .3s, filter .2s;
    &:hover, &:focus-visible { filter: brightness(1.22); stroke: var(--gold); stroke-width: 1.6; }
    &.is-sel { stroke: var(--gold); stroke-width: 2.2; } }
  .hay-sel .map__dep:not(.is-sel) { opacity: .38; }
  .map__mun { fill: rgb(240 190 110 / .86); stroke: #fff3d8; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; outline: none; transition: r .5s var(--ease), fill .2s, opacity .3s;
    filter: drop-shadow(0 0 4px rgb(232 179 106 / .55));
    &:hover, &:focus-visible { fill: #fff; stroke: var(--gold); stroke-width: 2; }
    &.is-sel { fill: #fff; stroke: var(--gold); stroke-width: 2.6; }
    &.is-fuera { opacity: .16; pointer-events: none; } }
  .map__nombres text { fill: #fff; font-family: var(--font); font-weight: 600; paint-order: stroke; stroke: #06162c; stroke-width: 3px; vector-effect: non-scaling-stroke; pointer-events: none; }
  .map__recuadro { fill: rgb(255 255 255 / .03); stroke: rgb(255 255 255 / .22); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }
  .map__rotulo { fill: var(--mist); font: 600 9px var(--font); letter-spacing: .06em; pointer-events: none; }

  .pry__volver { position: absolute; left: .8rem; top: .8rem; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .9rem; border: 0; border-radius: 999px;
    font: 600 .84rem/1 var(--font); color: var(--navy); background: var(--gold); cursor: pointer; box-shadow: 0 8px 20px -8px rgb(0 0 0 / .7);
    & .ico { width: 16px; height: 16px; } &[hidden] { display: none; } }
  .pry__zoom { position: absolute; right: .8rem; top: .8rem; display: grid; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); background: rgb(7 20 40 / .75); backdrop-filter: blur(6px);
    & button { width: 40px; height: 40px; border: 0; font: 500 1.3rem/1 var(--font); color: var(--white); background: none; cursor: pointer; &:hover { background: rgb(255 255 255 / .12); } }
    & button + button { border-top: 1px solid rgb(255 255 255 / .14); } }
  .pry__leyenda { position: absolute; right: .8rem; bottom: .8rem; display: grid; gap: .3rem; width: min(190px, 46%); padding: .65rem .75rem; border-radius: 12px; font-size: .68rem; color: var(--mist);
    background: rgb(7 20 40 / .78); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); pointer-events: none; }
  .pry__rampa { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #173560, #2c5a94, #5d93cf, #b5d4f4); }
  .pry__esc { display: flex; justify-content: space-between; & b { font-weight: 600; color: var(--white); } }
  .pry__punto { display: flex; align-items: center; gap: .4rem; margin-top: .2rem; & i { width: 10px; height: 10px; border-radius: 50%; background: #f0be6e; box-shadow: 0 0 0 1px #fff3d8; } }

  /* ficha flotante al pasar el cursor */
  .pry__tip { position: absolute; z-index: 3; display: grid; gap: .18rem; width: max-content; max-width: min(300px, 78%); padding: .7rem .85rem; border-radius: 14px; font-size: .8rem; line-height: 1.35; color: var(--mist);
    background: rgb(6 18 36 / .96); box-shadow: 0 0 0 1px rgb(232 179 106 / .5), 0 18px 40px -14px rgb(0 0 0 / .9); pointer-events: none;
    &[hidden] { display: none; } }
  .tip__t { font-size: 1rem; font-weight: 700; color: var(--white); line-height: 1.2; }
  .tip__d { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
  .tip__n { font-size: .95rem; font-weight: 700; color: var(--gold); }
  .tip__f--ent { margin-top: .2rem; padding-top: .35rem; border-top: 1px solid rgb(255 255 255 / .12); font-size: .74rem; }
  .tip__c { margin-top: .25rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgb(232 179 106 / .85); }

  /* ───────── panel de detalle ───────── */
  .pry__panel { padding: 1.3rem; border-radius: 22px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); color: var(--mist); min-width: 0; }
  @media (min-width: 980px) { .pry__panel { position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow: auto; } }
  .pan__ceja { margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold) !important; }
  .pan__titulo { margin: .25rem 0 0; font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 780; font-variation-settings: "wdth" 78; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums;
    & small { font-size: 1rem; font-weight: 500; color: var(--mist); } }
  .pan__titulo--lugar { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
  .pan__dato { margin: .5rem 0 0; & b { color: var(--gold); font-size: 1.15rem; } }
  .pan__volver { margin: 0 0 .8rem; padding: 0; border: 0; background: none; font: 600 .84rem var(--font); color: var(--mist); cursor: pointer; &:hover { color: var(--gold); } }
  .pan__barra { display: flex; gap: 2px; height: 10px; margin-top: 1rem; border-radius: 5px; overflow: hidden; & i { min-width: 3px; } }
  .pan__tipos { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: .82rem;
    & li { display: flex; align-items: center; gap: .4rem; } & i { width: 9px; height: 9px; border-radius: 2px; } & b { color: var(--white); } }
  .t-interventoria { --t: #e8b36a; } .t-obra { --t: #6fa8e6; } .t-consultoria { --t: #8fd3c1; } .t-consultoria-y-obra { --t: #c9a2e8; }
  .pan__barra i, .pan__tipos i { background: var(--t, #8fa3bf); }
  .pan__sub { margin: 1.3rem 0 .55rem; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mist) !important; }
  .pan__rank { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none;
    & button { position: relative; display: flex; justify-content: space-between; gap: 1rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 9px; font: 500 .9rem var(--font); text-align: left; color: var(--white); background: none; cursor: pointer; overflow: hidden;
      & span, & b { position: relative; z-index: 1; } & b { font-variant-numeric: tabular-nums; }
      & i { position: absolute; inset: 0 auto 0 0; border-radius: 9px; background: rgb(93 147 207 / .28); transition: width .45s var(--ease); }
      &:hover i { background: rgb(232 179 106 / .32); } } }
  .pan__lineas { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; font-size: .88rem; & li { display: flex; justify-content: space-between; gap: 1rem; } & b { color: var(--white); } }
  .pan__munis { display: flex; flex-wrap: wrap; gap: .35rem;
    & button { min-height: 34px; padding: .25rem .7rem; border: 0; border-radius: 999px; font: 500 .82rem var(--font); color: var(--white); background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); cursor: pointer;
      & b { margin-left: .2rem; color: var(--gold); } &:hover { background: rgb(255 255 255 / .16); }
      &[aria-pressed="true"] { background: var(--gold); color: var(--navy); & b { color: var(--navy); } } } }
  .pan__ver { margin-top: 1.3rem; width: 100%; justify-content: center; }
  .pan__pista, .pan__nada { margin: 1rem 0 0; font-size: .8rem; color: #8fa3bf !important; }
  .pry__nota { margin: .9rem 0 0; font-size: .8rem; color: #8fa3bf !important; min-height: 1.2em; }

  /* ───────── listado ───────── */
  .lst { scroll-margin-top: 5rem; }
  .lst__cab { display: grid; gap: 1rem; align-items: end; }
  @media (min-width: 760px) { .lst__cab { grid-template-columns: 1fr minmax(280px, 420px); } }
  .lst__buscar { display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: 0 1rem; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--rule), var(--shadow);
    & .ico { width: 20px; height: 20px; color: var(--muted); flex: none; }
    & input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 1rem var(--font); color: var(--ink); }
    &:focus-within { box-shadow: inset 0 0 0 2px var(--navy-2), var(--shadow); } }
  .lst__estado { margin: 1.4rem 0 1rem; color: var(--muted); & b { color: var(--navy); font-size: 1.15rem; } }
  .lst__chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: 0 .75rem; border: 0; border-radius: 999px; font: 600 .84rem var(--font); color: var(--navy); background: #f6e3c2; cursor: pointer; &:hover { background: var(--gold); } }
  .lst__items { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
  @media (min-width: 900px) { .lst__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .lst__it { display: grid; gap: .55rem; align-content: start; padding: 1.1rem 1.2rem; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); }
  .lst__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: .74rem; }
  .lst__anio { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; font-size: .86rem; }
  .lst__tipo { padding: .2rem .55rem; border-radius: 999px; font-weight: 650; color: var(--navy); background: color-mix(in srgb, var(--t, #8fa3bf) 38%, white); }
  .lst__linea { color: var(--muted); }
  .lst__vivo { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; color: #17694a; &::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1f9d6b; } }
  .lst__obj { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
  .lst__pie { display: grid; gap: .15rem; margin: 0; font-size: .78rem; color: var(--muted); & span:first-child { font-weight: 600; color: var(--navy-2); } }
  .lst__mas { display: flex; margin: 1.6rem auto 0; color: var(--white); background: var(--navy); border: 0; cursor: pointer; &:hover { background: var(--navy-2); } &[hidden] { display: none; } }
  .lst__vacio { margin: 2rem 0; text-align: center; color: var(--muted); }
  .lst__limpiar { border: 0; background: none; padding: 0; font: 600 1rem var(--font); color: var(--navy-2); text-decoration: underline; cursor: pointer; }
  .lst__fuente { margin: 2.4rem 0 0; font-size: .74rem; color: var(--muted); max-width: 80ch; }

  @media (prefers-reduced-motion: reduce) { .map__dep, .map__mun, .pan__rank i { transition: none; } }
  @media (forced-colors: active) { .pry__oro { -webkit-text-fill-color: currentColor; background: none; } .map__dep.is-sel, .map__mun.is-sel { stroke: Highlight; } }
}