/* Multiproyectos (vista de cartera): el diseño de ui/figma (bloque
   <style id="multiproyectos-figma"> de 04d1238), traído tal cual. Se enlaza
   donde ui/figma lo tenía —justo después de <style id="oficina-central">—
   para que la cascada sea la misma que allí. */
/* ═══════════════════════════════════════════════════════════════════
   MULTIPROYECTOS · el diseño del Figma
   Archivo ESPARQ · «Pase a Pruebas UI» · sección «Multiproyectos» (664:2156):
   Tarjetas = 664:4375 · Región = 666:4937 · Cartera = 666:5210. Modelo NUEVO:
   sustituye al de «Validaciones UI» (459:6500/459:5836/459:6116), que era más
   holgado. Cada regla cita su nodo. Va DESPUÉS de shell-blanco.css y con
   #projGate delante: gana a la hoja del shell, llena de !important.
   Esta pasada cubre TARJETAS. El botón «Nuevo Proyecto» (664:4419) sigue
   fuera, como en la pasada del 16/09: no hay alta de obra real detrás.
   ═══════════════════════════════════════════════════════════════════ */

/* 664:4383 · columna de 1308.84px: barra, titular y tarjeta, 24px entre ellas */
/* 30 px de aire antes de la cápsula azul era casi tanto como su propio alto
   (51) y se leía como un hueco, no como respiro. Baja a 16, que sigue
   separándola del borde sin regalar media franja. */
#projGate .pg-inner{ max-width:1357px; padding:16px 24px 24px; }   /* 60 abajo empujaba la vista fuera de pantalla */

/* separador fino de 0.5px blue/75 #99CBEB (459:6535, 459:6558, 462:6852) */
#projGate .pg-sep{ flex:none; width:0; align-self:stretch; border-left:.5px solid #99CBEB; }

/* ── 664:4385 · header-navigation-bar ──
   51 de alto, radio 50, borde 1px blanco, 6/20 de margen, degradado lineal
   de izquierda a derecha #2985D3 (13%) → #367EDC (84%). El efecto «Glass» de
   Figma no existe en CSS: se aproxima con un brillo interior y sombra suave. */
#projGate .pg-head{
  display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important;
  align-items:center!important; gap:24px!important;          /* 664:4387 Espacio=24 */
  box-sizing:border-box; min-height:51px; margin:0 0 16px!important;   /* 24 -> 16 (Lili, 01/10/2026) */
  padding:6px 20px!important; border:0; border-radius:50px;
  background:linear-gradient(90deg,#2985D3 13%,#367EDC 84%);
  /* Sin el borde blanco de 1px del Figma: Lili lo observó (01/10/2026). */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 30px rgba(41,133,211,.18);
}
#projGate .pg-head::after{ display:none!important; }
#projGate .pg-head > .pg-sep{ align-self:center; height:24px; }            /* 664:4410 */
/* 664:4390 · la marca, 80.32×24.6 (antes 109×34) */
#projGate .pg-brand img{ display:block; width:80.32px; height:24.6px!important; }

/* 664:4411 · Proyectos / Central: píldora de 4 de margen y 4 entre botones.
   El borde y el fondo son un efecto «Glass» que el export de Figma no trae:
   se ve en el render y se aproxima igual que antes (664:4415 la línea). */
#projGate .pgm-nivel{
  display:inline-flex; align-items:center; gap:4px; min-height:0;
  padding:4px!important; border:0; border-radius:50px!important;
  background:rgba(255,255,255,.08)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.25);   /* sin el contorno #E6F2FA (Lili, 01/10/2026) */
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* 664:4413 / 664:4416 · botones: 8/16, radio 50, Inter 500 12 (antes 12/24 y 16) */
#projGate .pgm-nivel button{
  position:relative; min-height:31px; padding:8px 16px!important; border-radius:50px!important;
  font:500 12px/normal Inter,system-ui,sans-serif!important; letter-spacing:0;
  color:#FFFFFF!important; background:transparent!important;
}
#projGate .pgm-nivel button + button::before{
  content:''; position:absolute; left:-2.25px; top:50%; height:16px; transform:translateY(-50%);
  border-left:.5px solid #99CBEB;
}
/* activo: fondo #E6F2FA, texto #484B51 (664:4413 · 664:4414) */
#projGate .pgm-nivel button[aria-selected="true"]{ background:#E6F2FA!important; color:#484B51!important; }
#projGate .pgm-nivel button:not([aria-selected="true"]):hover{ background:rgba(255,255,255,.14)!important; color:#FFFFFF!important; }

/* ── 664:4422 · la cuenta: avatar 32, nombre Inter 500 12 blanco, chevron 16 ── */
#projGate .pg-cuenta{
  position:relative; margin-left:auto!important; min-height:0; padding:0!important;
  background:transparent!important; border:0!important; box-shadow:none!important;   /* shell-blanco lo pinta como chip blanco */
}
#projGate .pgc-btn{
  display:flex; align-items:center; gap:8px; padding:0; border:0; background:transparent;
  cursor:pointer; color:#FFFFFF; font:inherit;
}
#projGate .pgc-av{
  width:32px; height:32px; border-radius:16px; flex:none; display:flex; align-items:center; justify-content:center;
  background:#E6F2FA!important; color:#077FCF; font:700 12px/1 Inter,system-ui,sans-serif;
  box-shadow:none;                          /* sin el aro blanco (Lili, 01/10/2026) */
}
#projGate .pgc-txt{ display:flex; margin-left:0; }                        /* 8px avatar-nombre (664:4423) */
#projGate .pgc-txt b{ font:500 12px/normal Inter,system-ui,sans-serif; color:#FFFFFF; white-space:nowrap; }
#projGate .pgc-txt i{ display:none; }                                     /* el Figma no enseña el rol */
#projGate .pgc-chev{ width:16px; height:16px; color:#E6F2FA; flex:none; transition:transform .15s; }
#projGate .pgc-btn[aria-expanded="true"] .pgc-chev{ transform:rotate(180deg); }
#projGate .pgc-btn:focus-visible{ outline:2px solid #FFFFFF; outline-offset:4px; border-radius:24px; }
/* El menú no está en el Figma: lleva lo que hacía el chip antes (Mi cuenta y Salir). */
#projGate .pgc-menu{
  position:absolute; top:calc(100% + 12px); right:0; z-index:30; min-width:180px; padding:6px;
  background:#FFFFFF; border:1px solid #E6F2FA; border-radius:12px;
  box-shadow:0 12px 32px rgba(16,24,40,.16);
}
#projGate .pgc-menu[hidden]{ display:none; }
#projGate .pgc-menu button{
  display:block; width:100%; text-align:left; padding:10px 12px; border:0; border-radius:8px;
  background:transparent; cursor:pointer; font:500 14px/20px Inter,system-ui,sans-serif; color:#2A2D34;
  min-height:0; height:auto;
}
#projGate .pgc-menu button:hover, #projGate .pgc-menu button:focus-visible{ background:#E6F2FA; outline:none; }

/* ── 664:4429 · titular: título, buscador y vistas; 24px entre piezas, 32 a la izquierda ── */
#projGate .pg-titular{
  display:flex; align-items:center; gap:24px; padding-left:32px; margin:0 0 16px;   /* 24 -> 16 (Lili, 01/10/2026) */
}
#projGate .pg-titular > .pg-sep{ height:50px; align-self:center; }        /* 664:4433 · alto de la fila */
#projGate .pg-tit{ flex:none; }
/* 664:4431 · Inter 700 24 #181C23 (neutro/12; antes #111827) */
#projGate .pg-tit h1{ margin:0; font:700 24px/normal Inter,system-ui,sans-serif; letter-spacing:0; color:#181C23; }
/* 664:4432 · Inter 400 14 #5C5E64 (neutro/8; antes #4B5563), 4px debajo del título */
#projGate .pg-tit p{ margin:4px 0 0; font:400 14px/normal Inter,system-ui,sans-serif; color:#5C5E64; }
/* 664:4434 · search-box: alto 36, radio píldora, borde 1px #E6F2FA, 10/12, 8px icono-texto */
#projGate .pgf-buscar{
  flex:1 1 auto; min-width:0; box-sizing:border-box; height:36px; display:flex; align-items:center; gap:8px;
  padding:10px 12px; background:#FFFFFF; border:1px solid #E6F2FA; border-radius:999px; box-shadow:none;
}
#projGate .pgf-buscar svg{ width:16px; height:16px; color:#5C5E64; }       /* 664:4435 */
/* 664:4437 · Inter 400 12 #484B51 (antes 13/15.73) */
#projGate .pgf-buscar input{ font:400 12px/normal Inter,system-ui,sans-serif; color:#2A2D34; }
#projGate .pgf-buscar input::placeholder{ color:#484B51; font-weight:400; }
#projGate .pgf-buscar:focus-within{ border-color:#077FCF; box-shadow:0 0 0 3px rgba(7,127,207,.12); }

/* 664:4439 · Perú / Región / Tarjetas: blanco, borde 1px #E6F2FA, radio 50, 4/8/4/6, 8px */
#projGate .pgm-vista{
  flex:none; display:inline-flex; align-items:center; gap:8px; min-height:0;
  padding:4px 8px 4px 6px!important; background:#FFFFFF!important;
  border:1px solid #E6F2FA!important; border-radius:50px!important; box-shadow:none!important;
}
/* 664:4441/4444/4446 · 8/16, radio 50, Inter 500 12, inactivos #8E9093 */
#projGate .pgm-vista button{
  position:relative; min-height:31px; padding:8px 16px!important; border-radius:50px!important;
  font:500 12px/normal Inter,system-ui,sans-serif!important; color:#8E9093!important; background:transparent!important;
}
/* activo: #077FCF con texto blanco (664:4446) */
#projGate .pgm-vista button[aria-selected="true"]{ background:#077FCF!important; color:#FFFFFF!important; }
#projGate .pgm-vista button:not([aria-selected="true"]):hover{ color:#077FCF!important; background:#F2F8FD!important; }
/* 664:4443 · línea de 0.5px #99CBEB, 30.8 de alto, solo entre dos inactivos */
#projGate .pgm-vista button:not([aria-selected="true"]) + button:not([aria-selected="true"])::before{
  content:''; position:absolute; left:-4.25px; top:50%; height:30.8px; transform:translateY(-50%);
  border-left:.5px solid #99CBEB;
}

/* ── 664:4449 · la tarjeta blanca: 24/30 de relleno. Radio y sombra no vienen
   en el export (son efectos de Figma): se conservan los del modelo anterior,
   que el render nuevo no contradice. ── */
#projGate .pg-panel{
  background:#FFFFFF; border-radius:12px; padding:24px 30px;
  box-shadow:-1px 2px 2.5px rgba(0,0,0,.06);
}
/* 664:4451 · filtros: repartidos de extremo a extremo (a 1244 quedan 33.8 de
   hueco), alineados al centro. Antes eran 21 fijos. */
#projGate .pg-filtros{
  display:flex!important; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:12px!important; margin:0!important;
  padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important;
}
#projGate .pg-filtros > .pg-sep{ height:41.12px; align-self:center; }
/* 664:4457 · Input Frame: 240×36, radio 6, borde 1px #E6F2FA, 10/12 ·
   664:4461 texto Inter 400 12 #2A2D34 · 664:4467 chevron de 16 con trazo 1.67 #3195D7 */
#projGate .pg-filtros select{
  flex:0 1 240px; min-width:0; max-width:240px; height:36px; box-sizing:border-box;
  padding:10px 36px 10px 12px; border:1px solid #E6F2FA; border-radius:6px; background-color:#FFFFFF;
  font:400 12px/normal Inter,system-ui,sans-serif; color:#2A2D34; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M12 6.4L8 10.4L4 6.4' fill='none' stroke='%233195D7' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px 16px;
}
#projGate .pg-filtros select:hover{ border-color:#99CBEB; }
#projGate .pg-filtros select:focus{ outline:none; border-color:#077FCF; box-shadow:0 0 0 3px rgba(7,127,207,.12); }
/* con valor elegido: borde azul, para ver de un vistazo qué filtra */
#projGate .pg-filtros select.act{ border-color:#077FCF; color:#2A2D34; font-weight:500; }
/* 664:4523 · Limpiar Filtros: 33 de alto, 8/16, radio 50, fondo #E6F2FA,
   borde 1px #077FCF, Inter 500 12 #077FCF (antes 45 de alto y 16) */
#projGate .pgf-limpiar{
  flex:none; height:33px; box-sizing:border-box; padding:8px 16px; border-radius:50px;
  background:#E6F2FA; border:1px solid #077FCF; color:#077FCF;
  font:500 12px/normal Inter,system-ui,sans-serif; cursor:pointer; white-space:nowrap;
}
#projGate .pgf-limpiar[hidden]{ display:inline-flex; }       /* el Figma lo enseña siempre */
#projGate .pgf-limpiar:hover{ background:#D4E9F7; }
/* el recuento no se ve (no está en el Figma), pero se sigue anunciando */
#projGate .pgf-cuenta{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── 664:4525 · rejilla: 4 tarjetas de 293px, 24 entre columnas y 24 entre filas
   (antes 34 entre filas) ── */
#projGate .pg-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:24px; margin-top:24px;
}
#projGate .pg-grid:empty{ display:none; }
/* Perú y Región: el mapa va debajo de la tarjeta de filtros */
/* Los dos huecos alrededor de los paneles bajan a 8: el que separa la tarjeta
   de filtros del mapa, y el que hay entre el mapa y la columna derecha. NO
   sale del Figma (que pide 24 en los dos): es pedido de Yary del 18/09 tras
   revisar la vista. El de .split se escribe aquí, con dos ids delante, porque
   el original vive minificado en la hoja del módulo del mapa. */
#projGate #pgmRoot{ margin-top:8px; }
#projGate #pgmRoot .split{ gap:8px; }

/* ── 664:4527 · Card Fotografico: sombra X0 Y1 blur 5.45 rgba(4,8,16,.12).
   Los radios salen de sus dos mitades: 16 arriba (664:4528) y 12 abajo (664:4532),
   con borde 1px #E6F2FA en el contorno. ── */
#projGate .pg-obra{
  position:relative; display:flex; flex-direction:column; gap:0; background:#FFFFFF;
  border:1px solid #E6F2FA!important; border-radius:16px 16px 12px 12px; overflow:hidden;
  padding:0!important; box-shadow:0 1px 5.45px rgba(4,8,16,.12); transition:transform .15s, box-shadow .15s;
}
#projGate .pg-obra.live:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.14); }
/* 664:4528 · Image Container: 166 de alto, 4px arriba y a los lados · 664:4529 radio 12 */
#projGate .pg-foto{ position:relative; height:166px; box-sizing:border-box; padding:4px 4px 0; background:#FFFFFF; overflow:hidden; }
#projGate .pg-foto img{ display:block; width:100%; height:162px; object-fit:cover; border-radius:12px 12px 0 0; }
#projGate .pg-foto.archivo::before{ inset:4px 4px 0; border-radius:12px 12px 0 0; }
/* 664:4568 · Badge: píldora #E6F2FA, alto 22, 4/10, radio 20, 4px punto-texto,
   a 10 de la izquierda y 10.85 de arriba · 664:4570 Inter 500 10 #2A2D34 */
#projGate .pg-chip{
  position:absolute; top:10.85px; left:10px; z-index:3; height:22px; box-sizing:border-box;
  display:inline-flex; align-items:center; gap:4px; padding:0 10px; border-radius:20px;
  background:#E6F2FA; font:500 10px/22px Inter,system-ui,sans-serif; color:#2A2D34; white-space:nowrap;
}
/* 664:4569 · punto de 8.38px con el color del estado (las cuatro tarjetas del Figma) */
#projGate .pg-chip i{ width:8.38px; height:8.38px; border-radius:50%; flex:none; background:#5C5E64; }
#projGate .pg-chip.ok i{ background:#05CC65; }
#projGate .pg-chip.atento i{ background:#FF9005; }
#projGate .pg-chip.alerta i{ background:#F92F2F; }
#projGate .pg-chip.espera i{ background:#5C5E64; }
/* Eje de calendario (30/09): en-curso reusa el mismo verde de "ok", y
   no-iniciado el mismo ambar de "atento" -misma semantica de color, otra
   etiqueta-. "finalizada" es azul, el mismo #2985D3/#077FCF que ya usa
   esta hoja para "en vivo"/"activo" en esta misma vista (lineas 34, 76),
   no un color inventado. */
#projGate .pg-chip.en-curso i{ background:#05CC65; }
#projGate .pg-chip.no-iniciado i{ background:#FF9005; }
#projGate .pg-chip.finalizada i{ background:#2985D3; }
/* «Sin acceso» pasa arriba a la derecha, donde el Figma dejaba el «⋮» */
#projGate .pg-candado{ top:11px; left:auto; right:10px; }

/* 664:4532 · Content Container: 10/14/24/14 */
#projGate .pg-cuerpo{ display:flex; flex-direction:column; flex:1; padding:10px 14px 24px!important; }
/* 664:4536 · Title Inter 700 16/18 #2A2D34 */
#projGate .pg-obra .pg-oname{ margin:0; font:700 16px/18px Inter,system-ui,sans-serif; letter-spacing:0; color:#2A2D34;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 664:4539 · Inter 400 12/14 #8E9093 */
#projGate .pg-obra .pg-oloc{ margin:0; font:400 12px/14px Inter,system-ui,sans-serif; color:#8E9093;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 664:4541 · estado + línea + cifras, 6px entre ellos y 10 bajo el título */
#projGate .pg-med{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
/* 664:4542 · punto 8.38 y texto Inter 500 12/14 #048F47, 8px entre ellos */
#projGate .pg-obra .pg-estado{ display:flex; align-items:center; gap:8px; margin:0!important;
  font:500 12px/14px Inter,system-ui,sans-serif; color:#048F47; min-height:14px; }
#projGate .pg-obra .pg-estado i{ width:8.38px; height:8.38px; border-radius:50%; background:#048F47; flex:none; }
#projGate .pg-obra .pg-estado.esp{ color:#8E9093; }
#projGate .pg-obra .pg-estado.esp i{ background:#5C5E64; }
/* 664:4546 · cuatro columnas con 6px y líneas de 0.5px #E6F2FA entre
   ellas; 664:4545 línea superior de 0.5px #D9DADB, 6px por encima */
#projGate .pg-obra .pgm-datos{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:12px; margin:0!important;
  position:relative;
  padding-top:6px; border-top:0; min-height:52px;
}
/* 664:4545 · la línea de arriba no ocupa caja en el Figma: va en un ::before
   absoluto. Con border-top, Chrome la sube a 1px y la tarjeta crece. */
#projGate .pg-obra .pgm-datos::before{
  content:''; position:absolute; left:0; right:0; top:0; height:.5px; background:#D9DADB;
}
#projGate .pg-obra .pgm-datos > div{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0; }
/* 664:4550 / 4555 / 4560 · las líneas van centradas en el hueco de 12 (el
   Figma las mete como piezas de ancho 0 con 6 de hueco a cada lado). */
#projGate .pg-obra .pgm-datos > div + div::before{
  content:''; position:absolute; left:-6.25px; top:0; bottom:0; border-left:.5px solid #E6F2FA;
}
/* 664:4548 · Inter 400 12/16 #8E9093 */
#projGate .pg-obra .pgm-datos .k{ font:400 12px/15px Inter,system-ui,sans-serif; letter-spacing:0; text-transform:none; color:#8E9093; }
/* 664:4549 · Inter 700 14/16 #2A2D34 */
#projGate .pg-obra .pgm-datos .v,
#projGate .pg-obra .pgm-datos .v.up,
#projGate .pg-obra .pgm-datos .v.dn{ margin-top:4px; font:700 14px/17px Inter,system-ui,sans-serif; letter-spacing:0; color:#2A2D34; }
/* 664:4554 · Inter 300 (Light) 10/16 #8E9093 */
#projGate .pg-obra .pgm-datos .m{ margin-top:4px; font:300 10px/12px Inter,system-ui,sans-serif; color:#8E9093; }

/* 664:4565 · botón y pie, 20px bajo las cifras y 10 entre ellos */
#projGate .pg-pie{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
/* 664:4566 · Button: 8/16, radio píldora, #077FCF · texto Inter 500 12 blanco
   (antes 38 de alto, 8/24, radio 40 y texto de 14) */
#projGate .pg-obra .pg-cta{
  display:flex; align-items:center; justify-content:center; width:100%; height:31px; box-sizing:border-box;
  margin:0!important; padding:8px 16px; border:0; border-radius:999px;
  background:#077FCF!important; color:#FFFFFF; font:500 12px/normal Inter,system-ui,sans-serif; letter-spacing:0; cursor:pointer;
}
#projGate .pg-obra .pg-cta:hover:not([disabled]){ background:#066BAF!important; }
#projGate .pg-obra .pg-cta[disabled]{ opacity:.45; cursor:not-allowed; }
/* 664:4567 · Inter 400 10/16 #8E9093, centrado (antes 300) */
#projGate .pg-ejec{ font:400 10px/12px Inter,system-ui,sans-serif; color:#8E9093; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* El paginador, dentro de la tarjeta blanca, con los controles del Figma de la
   vista Región (459:6487): cuadros de 32, radio 8, 8px entre ellos; activo con el
   degradado de la barra y texto Inter 700 13 blanco; inactivos #F8FAFC con borde
   1px #E2E8F0 y Inter 600 13 #64748B · recuento Inter 400 12 #9CA3AF (459:6486). */
#projGate #pgmPagerTarjetas .pager{
  display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap;
  margin-top:24px; padding:16px 0 0; background:transparent; border:0; border-top:.5px solid #E6F2FA;
  border-radius:0; box-shadow:none;
}
#projGate #pgmPagerTarjetas .pager .de{ margin-right:auto; font:400 12px/14.52px Inter,system-ui,sans-serif; color:#9CA3AF; }
#projGate #pgmPagerTarjetas .pager button{
  width:32px; height:32px; min-width:32px; padding:0; box-sizing:border-box; border-radius:8px;
  background:#F8FAFC; border:1px solid #E2E8F0; color:#64748B; cursor:pointer;
  font:600 13px/15.73px Inter,system-ui,sans-serif; font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:center; justify-content:center;
}
#projGate #pgmPagerTarjetas .pager button[aria-current="page"]{
  background:linear-gradient(90deg,#2985D3 13%,#367EDC 84%); border-color:transparent; color:#FFFFFF; font-weight:700;
}
#projGate #pgmPagerTarjetas .pager button:hover:not(:disabled):not([aria-current]){ border-color:#99CBEB; color:#077FCF; }
#projGate #pgmPagerTarjetas .pager button:disabled{ color:#CBD5E1; cursor:default; }

/* ── Pantallas más estrechas que el Figma (1440) ── */
@media (max-width:1180px){
  #projGate .pg-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  #projGate .pg-titular{ flex-wrap:wrap; padding-left:0; row-gap:14px; }
  #projGate .pg-titular > .pg-sep{ display:none; }
  #projGate .pg-tit{ flex:1 1 100%; }
  #projGate .pg-filtros{ flex-wrap:wrap; }
  #projGate .pg-filtros select{ flex:1 1 calc(50% - 11px); }
  #projGate .pg-filtros > .pg-sep{ display:none; }
  #projGate .pgf-limpiar{ margin-left:auto; }
}
@media (max-width:900px){
  #projGate .pg-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  #projGate .pg-head{ flex-wrap:wrap!important; gap:10px 16px!important; padding:10px 18px!important; border-radius:28px; }
  #projGate .pg-head > .pg-sep{ display:none; }
  #projGate .pg-brand{ order:1; }
  #projGate .pg-cuenta{ order:2; }
  #projGate .pgm-nivel{ order:3; flex:1 1 100%; justify-content:center; }
  #projGate .pgm-nivel button{ flex:1; font-size:14px!important; padding:9px 16px!important; min-height:36px; }
  #projGate .pgc-txt{ display:none; }
}
@media (max-width:560px){
  #projGate .pg-inner{ padding:16px 12px 40px; }
  #projGate .pg-grid{ grid-template-columns:1fr!important; }
  #projGate .pg-panel{ padding:16px; }
  #projGate .pg-tit h1{ font-size:20px; line-height:24px; }
  #projGate .pgf-buscar{ flex:1 1 100%; }
  #projGate .pgm-vista{ flex:1 1 100%; justify-content:space-between; }
  #projGate .pgm-vista button{ flex:1; padding:10px 8px!important; }
  #projGate .pg-filtros select{ flex:1 1 100%; }
  #projGate .pgf-limpiar{ flex:1 1 100%; justify-content:center; }
}

/* ═══════════════════════════════════════════════════════════════════
   MULTIPROYECTOS · estados PERÚ y REGIÓN (el mapa y sus dos paneles)
   «Pase a Pruebas UI»: lista de obras = 666:4937 · cartera = 666:5210.
   El módulo del mapa (#pgmRoot) trae su propia hoja, minificada y con otro
   lenguaje (--surface, --card, .card, .fila). Aquí NO se reescribe: se pisa
   desde este bloque, que llega después y lleva #projGate #pgmRoot delante
   (dos ids), así que gana sin tocar una línea de la hoja del módulo.
   ═══════════════════════════════════════════════════════════════════ */

/* 666:5087 / 666:5360 · dos columnas, y el Figma les da anchos DISTINTOS según
   el nivel: con la lista de obras el mapa mide 699.71 de 1308.84 (53.46%) y la
   lista 585.13 (44.71%); con la cartera el mapa crece a 752.84 (57.52%) y la
   columna baja a 532 (40.65%). El hueco de 8 es el pedido de Yary. */
#projGate #pgmRoot .split{
  grid-template-columns:minmax(0,53.46fr) minmax(0,44.71fr)!important;
  align-items:stretch!important;        /* 666:5087 · las dos columnas igualan alto */
}
#projGate #pgmRoot[data-nivel="peru"] .split{
  grid-template-columns:minmax(0,57.52fr) minmax(0,40.65fr)!important;
}

/* 666:5088 · la tarjeta del mapa: radio 16, 4 de relleno y sin borde */
#projGate #pgmRoot .split > .card{
  position:relative; background:#FFFFFF; border:0!important; border-radius:16px;
  padding:4px; box-shadow:0 1px 5.45px rgba(4,8,16,.12); overflow:visible;
}
/* 666:5089 · cabecera del mapa: 10/20, sin filete debajo */
#projGate #pgmRoot .mapbar{ padding:10px 20px!important; border-bottom:0!important; gap:10px; }
/* 666:5090 · el nivel, Inter 700 24 #181C23 (antes 14 en gris) */
#projGate #pgmRoot .miga{ font:700 24px/normal Inter,system-ui,sans-serif!important; color:#181C23!important; gap:6px; }
#projGate #pgmRoot .miga button, #projGate #pgmRoot .miga a{ font:inherit!important; color:inherit!important; }
/* 666:5091 · la pista, Inter 400 14 #5C5E64 a 4 del título */
#projGate #pgmRoot .mapbar .pista{ font:400 14px/normal Inter,system-ui,sans-serif!important; color:#5C5E64!important; margin-top:4px!important; }
/* 666:5092 · el mapa, radio 12 */
/* 666:5092 · el mapa mide 630.56 de alto en los DOS estados (solo cambia el
   ancho): de ahi sale el alto de la tarjeta (708.56) y, con el, el de la
   columna de la derecha. Con el min-height de 330 del modulo la columna se
   quedaba corta y la lista de regiones salia recortada. */
#projGate #pgmRoot .mapwrap{
  border-radius:12px; overflow:hidden; flex:none; min-height:0;
  /* Pedido de Yary/Lili (18/09): que la vista entre de un vistazo, sin bajar.
     Los 630.56 del Figma pasan a ser el TOPE; por debajo, el mapa se ajusta a
     lo que deja la pantalla (el resto de la columna suma ~374: relleno,
     barra, titular, tarjeta de filtros, huecos y la cabecera del mapa). */
  height:min(630.56px, calc(100dvh - 374px)); min-height:340px;
}

/* 666:5093 · la leyenda deja de ser una franja al pie y pasa a ser una pastilla
   que flota sobre el mapa, abajo a la izquierda: blanca, borde 1px #F0F0F1,
   radio 8, 8/12 de relleno y 16 entre grupos.
   Su TEXTO se conserva: el Figma lista los estados de obra, pero este mapa
   colorea regiones por «tiene obra / no tiene», así que la leyenda del Figma
   describiría algo que el mapa no dice. */
#projGate #pgmRoot .leyenda{
  position:absolute; left:19.42px; bottom:17.32px; z-index:3; width:auto;
  display:inline-flex; align-items:center; flex-wrap:wrap; row-gap:6px; column-gap:12px;
  max-width:calc(100% - 38.84px);   /* en el nivel region la leyenda trae cuatro grupos:
     sin esto se desbordaba de la tarjeta y tapaba la lista de obras */
  padding:6px 10px!important; border:1px solid #F0F0F1!important; border-radius:8px;
  background:#FFFFFF!important; box-shadow:0 1px 5.45px rgba(4,8,16,.08);
}
#projGate #pgmRoot .leyenda .ley-g{ display:inline-flex; align-items:center; column-gap:10px; flex-wrap:nowrap; white-space:nowrap; }
#projGate #pgmRoot .leyenda .pt{ display:inline-flex; align-items:center; gap:6px;
  font:500 10px/normal Inter,system-ui,sans-serif; color:#5C5E64; white-space:nowrap; }
#projGate #pgmRoot .leyenda .pt i{ width:8px; height:8px; border-radius:50%; flex:none; }
/* la rampa de avance y el «0 -> 100 %» no se parten en vertical */
#projGate #pgmRoot .leyenda .rampa{ display:inline-flex; flex:none; }
#projGate #pgmRoot .leyenda .rampa i{ width:9px; height:8px; flex:none; }
#projGate #pgmRoot .leyenda .tnum,
#projGate #pgmRoot .leyenda .ley-g:last-child{ white-space:nowrap; font:500 10px/normal Inter,system-ui,sans-serif; color:#5C5E64; }
#projGate #pgmRoot .leyenda .t-eyebrow{ font:500 10px/normal Inter,system-ui,sans-serif!important;
  letter-spacing:.06em!important; color:#8E9093!important; }

/* ── 666:5367 / 666:5426 · las tarjetas de la derecha: blancas, borde 1px
   #E6F2FA, radio 20 y 24/32 de relleno. Entre ellas, 16 (el Figma pone
   666:5426 a 465 con 666:5367 acabando en 449). ── */
#projGate #pgmRoot .col-cartera{ gap:16px!important; }
/* Cada tarjeta toma SU alto (666:5367 mide 449 y 666:5426 240 en el Figma).
   Repartir la columna en esa proporcion dejaba un hueco muerto dentro de la
   tarjeta de cartera al apretar las filas, que es lo que pidio Yary.
   y la lista de regiones con el resto. La hoja del modulo lo reparte al revés
   y la lista salía recortada a tres regiones. */
/* LA COLUMNA TIENE QUE ACABAR DONDE ACABA EL MAPA. Con las dos tarjetas a
   `flex:0 0 auto` cada una tomaba su alto y sumaban 648 de los 716 de la
   columna: 68 px muertos al final, y la derecha quedaba visiblemente mas
   chata que el mapa. Ahora una de las dos se estira y la columna cierra.

   La de regiones se queda a su alto —`min-height:0` para que pueda encogerse,
   asi el mapa sigue mandando la altura de la fila en vez de que la estire una
   lista larga: comprobado forzando quince regiones, la columna no se mueve de
   716 y la lista se desplaza dentro—. */
#projGate #pgmRoot .col-cartera > #pgm-panel{ flex:0 0 auto!important; min-height:0!important; }
/* El sobrante se lo queda la DONA, no la lista: debajo de la ultima region
   se leeria como un vacio, y en una tarjeta con un grafico se lee como aire.
   OJO, medido: el aire NO queda repartido, cae DEBAJO del cuerpo —128 px por
   arriba contra 65 por abajo—. Centrarlo estirando `.crono-cuerpo` con
   `flex:1` NO se puede: ver el aviso en esa regla. */
#projGate #pgmRoot .col-cartera > #pgm-crono{ flex:1 1 auto!important; }
/* Y EN LA VISTA DE REGIÓN NO HAY DONA: `#pgm-crono` queda vacío y en
   `display:none`, así que no hay quien se quede el sobrante y la columna
   terminaba 138 px antes que el mapa. Cuando está vacío, el sobrante se lo
   queda la lista, que es lo único que hay.
   El `:has()` lleva el id de la dona dentro, así que puntúa por encima de la
   regla de arriba sin necesidad de repetirla entera. */
#projGate #pgmRoot .col-cartera:has(> #pgm-crono:empty) > #pgm-panel{ flex:1 1 auto!important; }
#projGate #pgmRoot .col-cartera > .card{
  background:#FFFFFF; border:1px solid #E6F2FA!important; border-radius:20px;
  box-shadow:0 1px 5.45px rgba(4,8,16,.12); overflow:hidden;
}
/* 666:5368 / 666:5427 · la cabecera de cada panel: título Inter 700 16 #2A2D34 */
#projGate #pgmRoot .col-cartera .pcab{ padding:16px 24px 0!important; }   /* Figma 24/32; Yary pidio ajustar a pantalla */
#projGate #pgmRoot .col-cartera .pcab .t-card{
  font:700 16px/normal Inter,system-ui,sans-serif!important; color:#2A2D34!important;
}
#projGate #pgmRoot .col-cartera .pcab .sub{
  font:400 12px/normal Inter,system-ui,sans-serif!important; color:#8E9093!important; margin-top:4px;
}

/* ── 666:5370 · «Cartera por región»: filas de 16 con radio 8 y 4 entre ellas.
   La lista deja de tener filete arriba: el Figma la separa con el hueco. ── */
#projGate #pgmRoot .lista-reg{
  border-top:0!important; display:flex; flex-direction:column; gap:2px;   /* Yary: 4 -> 2 */
  padding:10px 24px 16px!important;
  /* `overflow:visible` recortaba la lista. La regla base del modulo le da
     `flex:1; min-height:0; overflow-y:auto` justo para que se desplace: la
     tarjeta toma la altura que le deja la columna y la lista hace scroll
     dentro. Al ponerle `visible` dejo de desplazarse, y como la tarjeta lleva
     `overflow:hidden`, lo que sobraba se cortaba en seco.
     Medido con cinco regiones: 5 filas de 58.4 + 4 huecos de 2 + 26 de relleno
     = 326, y la lista mide 295. Ica se perdia. Nada necesita salirse de la
     caja —el hover quita su sombra dos reglas mas abajo— asi que vuelve a
     desplazarse. */
  overflow-y:auto; overflow-x:hidden;
  /* Sin esto la barra de scroll aparece y desaparece moviendo el contenido. */
  scrollbar-gutter:stable;
}
/* 666:5371 · cada región: nombre y obras a la izquierda, barra, % y chevron */
#projGate #pgmRoot .lista-reg .fila{
  padding:10px 16px!important; border:0!important; border-radius:8px; gap:16px!important;   /* Yary: 16 -> 10 */
  flex-wrap:nowrap!important;            /* sin esto el chevron se cae a otra linea */
  background:#FFFFFF; align-items:center;
}
/* la fila activa (y el hover) van con #F5F5F5 y el nombre en azul, como el
   Figma pinta Lima en 666:5371/666:5373 */
#projGate #pgmRoot .lista-reg .fila:hover,
#projGate #pgmRoot .lista-reg .fila[aria-current="true"]{ background:#F5F5F5!important; box-shadow:none!important; }   /* el modulo le ponia un filete azul a la izquierda; el Figma no lo lleva */
#projGate #pgmRoot .lista-reg .fila:hover .nm,
#projGate #pgmRoot .lista-reg .fila[aria-current="true"] .nm{ color:#077FCF!important; font-weight:700!important; }
/* 666:5372 · el grupo de la izquierda mide 220 y separa nombre y obras en 4 */
#projGate #pgmRoot .lista-reg .info{ flex:none!important; width:220px; }
#projGate #pgmRoot .lista-reg .nm{
  font:600 16px/normal Inter,system-ui,sans-serif!important; color:#2A2D34!important;
}
#projGate #pgmRoot .lista-reg .lc{
  font:400 12px/normal Inter,system-ui,sans-serif!important; color:#8E9093!important; margin-top:4px!important;
}
/* 666:5375 · barra, % y chevron con 16 entre ellos */
#projGate #pgmRoot .lista-reg .cuota{ display:inline-flex; align-items:center; gap:16px; margin-left:auto; }
/* 666:5376 · el carril: 140×8, radio píldora, #E6F2FA · 666:5377 el relleno #077FCF */
#projGate #pgmRoot .lista-reg .barra{
  display:block; width:140px; height:8px; border-radius:999px; background:#E6F2FA; overflow:hidden; flex:none;
}
#projGate #pgmRoot .lista-reg .barra i{ display:block; height:100%; background:#077FCF; }
/* 666:5378 · el porcentaje, Inter 600 14 #2A2D34, 32 de ancho a la derecha */
#projGate #pgmRoot .lista-reg .cuota b{
  font:600 14px/normal Inter,system-ui,sans-serif; color:#2A2D34; width:32px; text-align:right; flex:none;
}
/* 666:5379 · el chevron, 14 */
#projGate #pgmRoot .lista-reg .chev{ font-size:14px!important; line-height:1; color:#8E9093!important; }

/* ── 666:5104 · «Obras encontradas»: cabecera de 20 con filete #F0F0F1 ── */
/* 666:5105 · el titulo de este panel va en #181C23, no en el #2A2D34 de las
   otras dos tarjetas. */
#projGate #pgmRoot[data-nivel="region"] .col-cartera > #pgm-panel .pcab .t-card{ color:#181C23!important; }
#projGate #pgmRoot[data-nivel="region"] .col-cartera > #pgm-panel .pcab{
  padding:20px!important; border-bottom:1px solid #F0F0F1; align-items:center;
}
/* 666:5107 · el orden, Inter 500 12 #5C5E64 con su chevron de 10 */
#projGate #pgmRoot .pgm-orden{ display:inline-flex; align-items:center; margin-left:auto; }
#projGate #pgmRoot .pgm-orden select{
  appearance:none; -webkit-appearance:none; border:0; background:transparent; cursor:pointer;
  font:500 12px/normal Inter,system-ui,sans-serif; color:#5C5E64; padding:0 16px 0 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' fill='none' stroke='%235C5E64' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center; background-size:10px 10px;
}
/* 666:5111 · cada obra: 12/16 de relleno, 12 de hueco y filete PUNTEADO #D9DADB */
#projGate #pgmRoot[data-nivel="region"] .lista .fila{
  padding:12px 16px!important; gap:12px!important;
  border:0!important; border-bottom:1px dashed #D9DADB!important; border-radius:0;
}
#projGate #pgmRoot[data-nivel="region"] .lista .fila:last-child{ border-bottom:1px solid #F0F0F1!important; }
#projGate #pgmRoot[data-nivel="region"] .lista .fila:hover{ background:#FCFDFD!important; }
/* el número del pin no está en el Figma (666:5111 empieza por la foto) */
#projGate #pgmRoot[data-nivel="region"] .lista .fila .n{ display:none!important; }
/* 666:5112 · la foto, 59.2 cuadrada con radio 6 */
#projGate #pgmRoot[data-nivel="region"] .lista .fila .th{
  width:59.2px!important; height:59.2px!important; border-radius:6px!important; object-fit:cover;
}
/* 666:5116 / 666:5117 · nombre Inter 700 16 #181C23 y ubicación 12 #5C5E64 a 2 */
#projGate #pgmRoot[data-nivel="region"] .lista .fila .nm{
  font:700 16px/normal Inter,system-ui,sans-serif!important; color:#181C23!important;
}
#projGate #pgmRoot[data-nivel="region"] .lista .fila .lc{
  font:400 12px/normal Inter,system-ui,sans-serif!important; color:#5C5E64!important; margin-top:2px!important;
}
/* 666:5118 · la etiqueta de estado: píldora con punto de 6, 4/10 y 6 de hueco.
   Pasa a decir el estado de CRONOGRAMA, como las tarjetas, en vez de
   «Publicada / Preparación». */
#projGate #pgmRoot .lista .fila .der{ flex-direction:row!important; gap:12px!important; align-items:center!important; }   /* la regla vieja los apilaba */
#projGate #pgmRoot .lista .fila .st{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font:500 12px/normal Inter,system-ui,sans-serif!important; white-space:nowrap;
  text-transform:none!important; letter-spacing:0!important;   /* la hoja del modulo las ponia en mayusculas */
}
#projGate #pgmRoot .lista .fila .st i{ width:6px; height:6px; border-radius:50%; flex:none; }
#projGate #pgmRoot .lista .fila .st.ok{ background:#E6FAF0; color:#048F47!important; }
#projGate #pgmRoot .lista .fila .st.ok i{ background:#048F47; }
#projGate #pgmRoot .lista .fila .st.atento{ background:#FFF4E6; color:#B46504!important; }
#projGate #pgmRoot .lista .fila .st.atento i{ background:#B46504; }
#projGate #pgmRoot .lista .fila .st.alerta{ background:#FEEAEA; color:#C63A3A!important; }
#projGate #pgmRoot .lista .fila .st.alerta i{ background:#F92F2F; }
#projGate #pgmRoot .lista .fila .st.espera{ background:#F0F0F1; color:#8E9093!important; }
#projGate #pgmRoot .lista .fila .st.espera i{ background:#8E9093; }
/* 666:5121 · «Ingresar»: píldora #077FCF con texto Inter 500 12 */
#projGate #pgmRoot .lista .fila .pgm-ing{
  height:auto!important; padding:8px 16px!important; border-radius:999px!important;
  background:#077FCF!important; color:#FFFFFF!important;
  font:500 12px/normal Inter,system-ui,sans-serif!important;
}
#projGate #pgmRoot .lista .fila .pgm-ing:disabled{ background:#E6F2FA!important; color:#8E9093!important; }

/* 666:5195 · el pie del panel: recuento a la izquierda y paginador a la
   derecha, 16 de relleno y sin filete */
#projGate #pgmRoot .pgm-pie{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px; background:#FFFFFF;
}
#projGate #pgmRoot .pgm-pie .pgm-cuenta{
  font:400 12px/normal Inter,system-ui,sans-serif; color:#8E9093;
}
#projGate #pgmRoot .pgm-pie .pager{
  padding:0!important; border-top:0!important; gap:8px!important; justify-content:flex-end!important;
}
/* 666:5198 · los botones: 32 cuadrados, radio 8, fondo #FCFDFD y borde #E6F2FA */
#projGate #pgmRoot .pgm-pie .pager button{
  width:32px; height:32px; min-width:32px!important; padding:0!important; border-radius:8px!important;
  background:#FCFDFD!important; border:1px solid #E6F2FA!important; color:#5C5E64!important;
  font:600 12px/normal Inter,system-ui,sans-serif!important;
}
/* 666:5201 · la página actual, con el degradado de la barra y texto 700 */
#projGate #pgmRoot .pgm-pie .pager button[aria-current="page"]{
  background:linear-gradient(90deg,#3195D7 12.95%,#077FCF 84.37%)!important;
  border-color:transparent!important; color:#FFFFFF!important; font-weight:700!important;
}
#projGate #pgmRoot .pgm-pie .pager button:disabled{ color:#CBD5E1!important; }

/* ── 666:5426 · «Estado de la cartera»: la dona a 160 con la cifra dentro y
   las tres filas de leyenda a la derecha, 24 entre las dos mitades ── */
#projGate #pgmRoot .crono-caja{ display:flex; flex-direction:column; }
#projGate #pgmRoot .crono-cuerpo{
  display:flex; align-items:center; gap:24px; padding:12px 24px 16px!important;
  /* NO poner aqui `flex:1` para centrar la dona en el aire sobrante: la
     tarjeta ya crece con `flex:1 1 auto`, y dos cosas creciendo dentro de una
     fila de rejilla que se dimensiona por contenido no tienen contra que
     resolverse — medido, el split entero colapsaba a 0 de alto. */
}
/* 666:5435 · la dona, 160 */
#projGate #pgmRoot .crono-dona{ width:160px!important; height:160px!important; flex:none; }
/* 666:5440 / 666:5441 · la cifra, Inter 800 28 #2A2D34, y «Obras» 600 10 #8E9093 */
#projGate #pgmRoot .crono-dona .cd-n{
  font:800 28px/1 Inter,system-ui,sans-serif!important; fill:#2A2D34!important; letter-spacing:0!important;
}
#projGate #pgmRoot .crono-dona .cd-l{
  font:500 11px/1 Inter,system-ui,sans-serif!important; fill:#8E9093!important; letter-spacing:0!important;
}
/* 666:5442 · las filas de leyenda: 12 entre ellas */
#projGate #pgmRoot .crono-leg{ display:flex; flex-direction:column; gap:12px; flex:1; min-width:0; margin:0; padding:0; list-style:none; }
#projGate #pgmRoot .crono-leg li{
  display:flex; align-items:center; gap:8px; margin:0; padding:0; border:0;
}
#projGate #pgmRoot .crono-leg li i{ width:8px; height:8px; border-radius:50%; flex:none; }
/* 666:5446 · el rótulo, Inter 400 12 #5C5E64 */
#projGate #pgmRoot .crono-leg .cl-k{ font:400 12px/normal Inter,system-ui,sans-serif!important; color:#5C5E64!important; flex:1; min-width:0; }
/* 666:5448 · el porcentaje, Inter 700 12 #2A2D34, 40 a la derecha · 666:5449 el
   recuento, 400 12 #8E9093, 24 · con 24 entre los dos */
#projGate #pgmRoot .crono-leg .cl-v{ font:700 12px/normal Inter,system-ui,sans-serif!important; color:#2A2D34!important; width:40px; text-align:right; flex:none; }
#projGate #pgmRoot .crono-leg .cl-n{ font:400 12px/normal Inter,system-ui,sans-serif!important; color:#8E9093!important; width:24px; text-align:right; flex:none; margin-left:24px; }
/* Dentro de la tarjeta flotante de una REGION (htmlRegion) la fila no cabe con
   los anchos fijos de la leyenda de la dona: los 40 + 24 + 24 del recuento se
   salian por la derecha y el numero quedaba cortado (02/10/2026). Aqui la fila
   es una rejilla: punto · rotulo (se estira) · % · recuento, y las dos
   columnas de cifras toman solo lo que miden. */
/* la lista cuelga directo de .hcard, que no tiene relleno: lleva los mismos
   16 a los lados que la cabecera (.hc-cab) y el boton (.hc-cta) */
#projGate #pgmRoot .hc-leg{ padding:0 16px; box-sizing:border-box; }
#projGate #pgmRoot .hc-leg li{ display:grid; grid-template-columns:8px minmax(0,1fr) auto auto; align-items:center; column-gap:10px; }
#projGate #pgmRoot .hc-leg .cl-v{ width:auto; min-width:36px; }
#projGate #pgmRoot .hc-leg .cl-n{ width:auto; min-width:16px; margin-left:4px; }

/* En pantalla estrecha las dos columnas se apilan y la leyenda vuelve al pie */
@media (max-width:1080px){
  #projGate #pgmRoot .split,
  #projGate #pgmRoot[data-nivel="peru"] .split{ grid-template-columns:minmax(0,1fr)!important; }
  #projGate #pgmRoot .mapwrap{ height:auto!important; min-height:330px!important; }
  #projGate #pgmRoot .leyenda{ position:static; width:100%; flex-wrap:wrap; margin:8px 4px 4px; }
  #projGate #pgmRoot .lista-reg{ padding:12px 16px 20px!important; }
  #projGate #pgmRoot .lista-reg .info{ width:auto; flex:1!important; }
  #projGate #pgmRoot .lista-reg .barra{ width:90px; }
  #projGate #pgmRoot .col-cartera .pcab{ padding:20px 20px 0!important; }
  #projGate #pgmRoot .crono-cuerpo{ padding:16px 20px 20px!important; gap:16px; }
}


/* ── «+ Nuevo Proyecto» en el titular (propuesta E2 + C1, 28/09) ──
   Escritorio (E2): acción principal a la derecha de Perú/Región/Tarjetas,
   relleno #077FCF como la pestaña activa (664:4446), 36 de alto como el
   buscador (664:4434), 8/18, radio 50, Inter 600 12 blanco.
   Teléfono (C1): a todo el ancho bajo el título, con el trato de «Limpiar
   Filtros» (664:4523: fondo #E6F2FA, borde y texto #077FCF) y 44 de toque. */
#projGate .pg-titular > .pgm-nuevo{
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:36px; min-height:0; padding:8px 18px!important; margin:0;
  border:1px solid #077FCF!important; border-radius:50px!important; background:#077FCF!important;
  color:#FFFFFF!important; font:600 12px/normal Inter,system-ui,sans-serif!important; letter-spacing:0;
  white-space:nowrap; cursor:pointer; box-shadow:none;
}
#projGate .pg-titular > .pgm-nuevo svg{ width:16px; height:16px; flex:none; stroke-width:2.4; }
#projGate .pg-titular > .pgm-nuevo:hover{ background:#0669AB!important; border-color:#0669AB!important; }
#projGate .pg-titular > .pgm-nuevo:focus-visible{ outline:2px solid #077FCF; outline-offset:3px; }
#projGate .pg-titular > .pgm-nuevo[hidden]{ display:none!important; }
/* La hoja base (pgm-estilos) esconde el texto por debajo de 700: aquí se ve siempre. */
#projGate .pg-titular > .pgm-nuevo span{ display:inline!important; }
@media (max-width:560px){
  #projGate .pg-tit{ order:0; }
  #projGate .pg-titular > .pgm-nuevo{
    order:1; flex:1 1 100%; height:44px; font-size:13px!important; font-weight:500!important;
    background:#E6F2FA!important; color:#077FCF!important; border-color:#077FCF!important;
  }
  #projGate .pg-titular > .pgm-nuevo:hover{ background:#D4E9F7!important; }
  #projGate .pg-titular > .pgf-buscar{ order:2; }
  #projGate .pg-titular > .pgm-vista{ order:3; }
}

/* ═══════════════════════════════════════════════════════════════════
   CRITERIOS DE MEJORA DEL 25-SEP (videos de Discord) · levantamiento
   Propuesta: 03-entregables/2026-09-28-propuesta-levantamiento-multiproyecto.html
   Solo presentación: los controles nuevos pulsan los que ya existen
   (assets/ui/multiproyecto.js).
   ═══════════════════════════════════════════════════════════════════ */

/* Piezas que solo existen en el teléfono */
#projGate .pgf-abrir, #projGate .pgh-cab, #projGate .pgh-k, #projGate .pgh-vista,
#projGate .pgh-ver, #projGate .pgh-velo, #projGate .pg-barra{ display:none; }

/* ── L1 · #5 (D 0:27–0:52) · el filtro solo se pinta cuando está aplicado ── */
#projGate .pg-filtros select:not(.act){ color:#8E9093; background-color:#FAFCFE; }
#projGate .pg-filtros select.act{
  color:#077FCF; font-weight:600; border-color:#077FCF; background-color:#E6F2FA;
}

/* ── L5 · #13 (R 15:05–18:04) · cada estado con su definición (borrador) ── */
#projGate #pgmRoot .crono-leg .cl-k{ white-space:normal; overflow:visible; text-overflow:clip; }
#projGate #pgmRoot .crono-leg .cl-d{
  display:block; white-space:normal; margin-top:2px; font:400 11px/1.3 Inter,system-ui,sans-serif; color:#8E9093;
}

/* ── L1 · #1–2 (D 0:00–0:57) · Perú y Región caben en la pantalla ──
   El bloque de mapa toma el alto que queda bajo los filtros (--pg-top lo
   mide multiproyecto.js). La columna derecha no crece: su lista se desplaza
   por dentro. Por debajo de 440 de alto se vuelve a bajar con scroll. */
@media (min-width:1081px){
  #projGate .pg-inner{ padding-bottom:16px; }
  #projGate #pgmRoot .split{
    height:max(440px, calc(100dvh - var(--pg-top, 278px)));
    grid-template-rows:minmax(0,1fr)!important;
  }
  #projGate #pgmRoot .split > .card{ display:flex; flex-direction:column; min-height:0; }
  #projGate #pgmRoot .mapwrap{ flex:1 1 auto; height:auto; min-height:0; }
  #projGate #pgmRoot .mapwrap > svg{ width:100%; height:100%; }
  #projGate #pgmRoot .col-cartera{ display:flex!important; flex-direction:column; min-height:0; }
  #projGate #pgmRoot .col-cartera > #pgm-panel{ flex:1 1 0!important; min-height:0!important; display:flex; flex-direction:column; }
  #projGate #pgmRoot .col-cartera > #pgm-crono{ flex:0 0 auto!important; }
  #projGate #pgmRoot .col-cartera > #pgm-panel .lista{ flex:1 1 auto; min-height:0; overflow-y:auto; }
  /* en Región no hay dona y una regla anterior con :has() le da a la lista
     flex:1 1 auto (crece con su contenido): se iguala su especificidad */
  #projGate #pgmRoot .col-cartera:has(> #pgm-crono:empty) > #pgm-panel{ flex:1 1 0!important; }
}
/* pantallas bajas (1280×720): la dona se achica para dejar sitio a la lista */
@media (min-width:1081px) and (max-height:820px){
  #projGate #pgmRoot .crono-dona{ width:112px!important; height:112px!important; }
  #projGate #pgmRoot .crono-cuerpo{ padding:6px 24px 12px!important; }
  #projGate #pgmRoot .col-cartera .pcab{ padding-top:12px!important; }
}

/* ── Observación 01-oct · el mapa sube y los filtros pasan a la derecha ──
   Perú y Región, en escritorio (donde las columnas no se apilan): la tarjeta
   del mapa empieza donde antes empezaba la de filtros y ocupa toda la columna
   izquierda; los filtros quedan arriba de la columna derecha, con su mismo
   ancho, en una rejilla de dos columnas: Región | Estado, Cliente a lo ancho
   y Jefe de Obra | «Limpiar Filtros» (alineado a la derecha). Cliente va
   sola porque sus nombres son los largos: en un 2×2 estricto, a 1100 px,
   «Inmobiliaria Los Álamos S…» (194 px de texto) se cortaba en 145 útiles.
   Solo se mueve la CAJA, no el nodo: #pgPanel sigue donde estaba en el HTML
   (mismos ids, mismos oyentes), se estrecha al ancho de la columna derecha y
   #pgmRoot sube lo que mide la tarjeta (--pg-fil). La columna derecha baja
   eso mismo más el hueco de 8 (pedido de Yary del 18/09 entre filtros y lo
   que sigue). multiproyecto.js mide --pg-top desde #pgmRoot, así que el
   bloque de mapa crece hacia arriba sin tocar el script.
   El ancho sale de las mismas fracciones del Figma que usa .split
   (44.71 de 98.17 con la lista de obras; 40.65 de 98.17 en Perú).
   Vista Obras: #pgmRoot está oculto, el :has() no aplica y los filtros
   quedan como siempre, a todo el ancho sobre las tarjetas.
   Tablet y teléfono (≤1080): no aplica; filtros arriba y el mapa debajo.
   (01-oct, tarde: la tarjeta de filtros desaparece. «Filtrar» y «Ordenar»
   pasan a la cabecera de la lista —bloque siguiente— y con ellos se van
   --pg-fil, el margen negativo del mapa y el relleno de la columna derecha:
   sin tarjeta encima, mapa y columna derecha empiezan a la misma altura.) */
@media (min-width:1081px){
  /* #pgPanel no se borra ni se esconde con display:none: dentro sigue el
     recuento #pgfCuenta (aria-live) y los selects que mandan. Solo deja de
     ocupar sitio y de verse. */
  #projGate .pg-inner:has(> #pgmRoot:not([hidden])) > #pgPanel{
    position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:0!important;
    overflow:hidden!important; clip:rect(0 0 0 0); clip-path:inset(50%); border:0!important; box-shadow:none!important;
  }
}

/* ── 01-oct · «Filtrar» y «Ordenar» en la cabecera de la lista (escritorio) ──
   Parte de la opción E′ (03-entregables/2026-10-01-propuesta-filtros-
   multiproyecto.html) con el cambio del usuario del mismo día: sin tarjeta de
   filtros; dos botones con ícono en la cabecera de «Cartera por región» /
   «Obras encontradas». «Filtrar» abre el menú propiedad › valor (sin
   íconos, con buscador «Filtrar por…»); «Ordenar» abre el orden de siempre
   (#pgm-orden) y lo reemplaza a la vista. Con filtros puestos, contador en el
   botón y fila de chips bajo la cabecera. Los <select> siguen en el DOM y
   siguen mandando (multiproyecto.js).
   La vista Obras (sin mapa) NO cambia: sus cuatro desplegables y «Limpiar
   Filtros» a todo el ancho, como estaban (pedido del usuario, 01-oct).
   Por debajo de 1081 no existe: tablet y teléfono quedan como estaban. */
#projGate .pgx-acc, #projGate .pgx-fila, #projGate .pgx-pop{ display:none; }
@media (min-width:1081px){
  #projGate #pgmRoot .pcab > .pgm-orden{ display:none!important; }
  /* con el mapa, la tarjeta de filtros ya no se ve (bloque anterior): sus
     controles tampoco se alcanzan con el tabulador. El recuento aria-live
     (#pgfCuenta) se queda visible para los lectores de pantalla. */
  #projGate .pg-inner:has(> #pgmRoot:not([hidden])) > #pgPanel .pg-filtros > :not(.pgf-cuenta){ visibility:hidden!important; }
  /* los dos botones */
  #projGate .pgx-acc{ display:inline-flex; align-items:center; gap:8px; flex:none; margin-left:auto; }
  #projGate .pgx-btn{
    display:inline-flex; align-items:center; gap:6px; height:32px; box-sizing:border-box; margin:0;
    padding:0 12px; border:1px solid #E6F2FA; border-radius:50px; background:#FFFFFF; cursor:pointer;
    font:500 12px/normal Inter,system-ui,sans-serif; color:#5C5E64; white-space:nowrap;
  }
  #projGate .pgx-btn[hidden]{ display:none; }
  #projGate .pgx-btn svg{ width:16px; height:16px; flex:none; color:#077FCF; }
  #projGate .pgx-btn:hover{ border-color:#99CBEB; color:#077FCF; }
  #projGate .pgx-btn[aria-expanded="true"]{ border-color:#077FCF; color:#077FCF; box-shadow:0 0 0 3px rgba(7,127,207,.12); }
  /* activo (filtros puestos / orden distinto del predeterminado): tenue, igual en los dos */
  #projGate .pgx-btn.pgx-on{ border-color:#077FCF; background:#E6F2FA; color:#077FCF; font-weight:600; }
  #projGate .pgx-btn:focus-visible{ outline:2px solid #077FCF; outline-offset:2px; }
  /* el número: el contador común de la plataforma (--cnt-*, assets/shell-blanco.css)
     en su variante INFORMATIVA (--cnt-info-*): azul, porque filtros puestos
     es un estado, no un pendiente; el rojo queda para los pendientes */
  #projGate .pgx-num{
    display:inline-block; box-sizing:border-box; text-align:center;
    min-width:var(--cnt-min, 20px); padding:var(--cnt-pad, 2px 7px); border-radius:var(--cnt-radius, 999px);
    background:var(--cnt-info-bg, #077FCF); color:var(--cnt-info-fg, #FFFFFF);
    font:var(--cnt-font, 600 10px/normal Inter,system-ui,sans-serif); letter-spacing:var(--cnt-ls, .02em);
  }
  #projGate .pgx-num[hidden]{ display:none; }
  /* la fila de chips, bajo la cabecera; sin filtros no existe */
  #projGate .pgx-fila{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px; box-sizing:border-box;
    padding:12px 20px 0; font-family:Inter,system-ui,sans-serif;
  }
  #projGate #pgmRoot[data-nivel="region"] .pgx-fila{ padding:12px 20px; border-bottom:1px solid #F0F0F1; }
  #projGate #pgmRoot[data-nivel="peru"] .pgx-fila{ padding:12px 24px 0; }
  #projGate .pgx-fila[hidden]{ display:none!important; }
  /* chip de filtro puesto: el azul de los filtros activos de esta pantalla */
  #projGate .pgx-chip{
    display:inline-flex; align-items:center; flex:none; max-width:100%; height:28px; box-sizing:border-box;
    padding:0 4px 0 0; border-radius:50px; background:#E6F2FA; border:1px solid #99CBEB; color:#077FCF;
  }
  #projGate .pgx-chip-tx{
    display:inline-block; min-width:0; max-width:240px; height:26px; padding:0 6px 0 12px; margin:0;
    border:0; background:transparent; color:#077FCF; cursor:pointer; border-radius:50px 0 0 50px;
    font:500 12px/26px Inter,system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #projGate span.pgx-chip-tx{ cursor:default; }
  #projGate .pgx-chip-tx b{ font-weight:600; }
  #projGate .pgx-chip-x{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:20px; height:20px; padding:0; margin:0; border:0; border-radius:50%; cursor:pointer;
    background:rgba(7,127,207,.12); color:#077FCF; font:600 14px/1 Inter,system-ui,sans-serif;
  }
  #projGate .pgx-chip-x:hover{ background:rgba(7,127,207,.22); }
  #projGate .pgx-chip-tx:focus-visible, #projGate .pgx-chip-x:focus-visible, #projGate .pgx-limpiar:focus-visible{
    outline:2px solid #077FCF; outline-offset:2px;
  }
  #projGate .pgx-limpiar{
    flex:none; height:28px; padding:0 4px; margin:0; border:0; background:transparent; cursor:pointer;
    font:600 12px/28px Inter,system-ui,sans-serif; color:#077FCF; white-space:nowrap;
  }
  #projGate .pgx-limpiar:hover{ text-decoration:underline; }
  /* los menús flotantes: fijos bajo su botón (multiproyecto.js les pone
     top/left/ancho), por encima de la lista, sin empujarla */
  #projGate .pgx-pop{
    position:fixed; z-index:1500; display:flex; flex-direction:column; box-sizing:border-box;
    width:320px; max-height:380px; padding:6px; overflow:hidden;
    background:#FFFFFF; border:1px solid #E6F2FA; border-radius:12px;
    box-shadow:0 10px 30px rgba(4,8,16,.14); font-family:Inter,system-ui,sans-serif;
  }
  #projGate .pgx-pop[hidden]{ display:none; }
  #projGate .pgx-pop-o{ overflow-y:auto; outline:none; }
  /* el buscador del menú: los campos claros de la casa (#F6F9FD, borde #E6F2FA) */
  #projGate .pgx-pop > input{
    display:block; flex:none; width:100%; height:34px; box-sizing:border-box; margin:0 0 6px;
    padding:0 12px; border:1px solid #E6F2FA; border-radius:8px; background:#F6F9FD;
    font:400 12px/normal Inter,system-ui,sans-serif; color:#2A2D34;
  }
  #projGate .pgx-pop > input::placeholder{ color:#8E9093; opacity:1; }
  #projGate .pgx-pop > input:focus{ outline:none; border-color:#077FCF; background:#FFFFFF; box-shadow:0 0 0 3px rgba(7,127,207,.12); }
  #projGate .pgx-menu{ flex:1 1 auto; min-height:0; overflow-y:auto; }
  #projGate .pgx-op{
    display:flex; align-items:center; gap:10px; min-height:34px; box-sizing:border-box;
    padding:7px 10px; border-radius:8px; cursor:pointer;
    font:400 13px/1.3 Inter,system-ui,sans-serif; color:#2A2D34;
  }
  #projGate .pgx-op .pgx-k{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #projGate .pgx-op .pgx-s{ flex:none; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:12px; color:#8E9093; font-variant-numeric:tabular-nums; }
  #projGate .pgx-op.pgx-act{ background:#F2F8FD; }
  #projGate .pgx-op[aria-selected="true"]{ color:#077FCF; font-weight:600; }
  #projGate .pgx-op[aria-selected="true"] .pgx-s{ color:#077FCF; }
  #projGate .pgx-op mark{ background:transparent; color:inherit; font-weight:700; }
  #projGate .pgx-op.pgx-volver{ min-height:30px; font:600 12px/1.3 Inter,system-ui,sans-serif; color:#077FCF; }
  #projGate .pgx-sep{ height:1px; margin:4px 2px; background:#E6F2FA; }
  #projGate .pgx-vacio{ padding:8px 10px; font:400 12px/1.4 Inter,system-ui,sans-serif; color:#8E9093; }
}

/* ── L1 · #4 (D 1:47–2:13) · Mi cuenta: firmar sin scroll ──
   Va con `html body` delante porque el bloque perfil-figma llega después. */
html body #perfilOv .rfi-modal{
  height:min(860px, calc(100dvh - 32px));
  padding:32px 40px!important; gap:16px;
}

/* ═══ Teléfono ═══════════════════════════════════════════════════════ */
@media (max-width:560px){
  #projGate .pg-inner{ padding-bottom:112px; }

  /* L4 · #14 (R 13:00–13:30) · cabecera ligera: logo y perfil */
  #projGate .pg-head{ flex-wrap:nowrap!important; min-height:48px; padding:6px 8px 6px 16px!important; border-radius:26px; margin-bottom:14px!important; }
  #projGate .pg-head .pgm-nivel{ display:none!important; }
  #projGate .pg-head .pg-cuenta{ margin-left:auto!important; }

  /* L3 · #11 · título centrado; buscador sin recuadro interior al enfocar */
  #projGate .pg-tit{ text-align:center; }
  #projGate .pgf-buscar input:focus, #projGate .pgf-buscar input:focus-visible{ outline:none!important; box-shadow:none!important; }
  #projGate .pg-titular{ row-gap:10px!important; column-gap:8px!important; margin-bottom:12px; }
  #projGate .pg-titular > .pgf-buscar{ order:2; flex:1 1 0!important; height:44px; }
  #projGate .pgm-vista{ display:none!important; }

  /* L2 · #7/#9 · el botón que abre la hoja, a la derecha del buscador */
  #projGate .pgf-abrir{
    order:3; position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:44px; height:44px; padding:0; border-radius:22px; cursor:pointer;
    background:#FFFFFF; border:1px solid #077FCF; color:#077FCF;
  }
  #projGate .pgf-abrir svg{ width:20px; height:20px; }
  #projGate .pgf-num{
    position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; box-sizing:border-box;
    border-radius:9px; background:#077FCF; color:#FFFFFF; font:700 10px/18px Inter,system-ui,sans-serif; text-align:center;
  }
  #projGate .pgf-num[hidden]{ display:none; }

  /* L2 · la hoja desde abajo con «Ver como» y los 4 filtros */
  #projGate .pg-filtros{
    position:fixed!important; left:0; right:0; bottom:0; z-index:1610;
    flex-direction:column!important; flex-wrap:nowrap!important; align-items:stretch!important; justify-content:flex-start!important;
    gap:8px!important; max-height:86dvh; overflow-y:auto;
    padding:10px 16px calc(16px + env(safe-area-inset-bottom))!important;
    background:#FFFFFF!important; border-radius:20px 20px 0 0!important; box-shadow:0 -10px 30px rgba(16,24,40,.2)!important;
    transform:translateY(105%); visibility:hidden; transition:transform .25s ease, visibility 0s linear .25s;
  }
  #projGate.pg-hoja .pg-filtros{ transform:none; visibility:visible; transition:transform .25s ease; }
  #projGate .pg-filtros::before{ content:''; display:block; flex:none; width:40px; height:4px; margin:0 auto 4px; border-radius:2px; background:#CBD5E1; }
  #projGate .pgh-cab{ display:flex; align-items:center; justify-content:space-between; }
  #projGate .pgh-cab b{ font:700 16px/1.2 Inter,system-ui,sans-serif; color:#181C23; }
  #projGate .pgh-x{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-10px;
    border:0; background:transparent; color:#5C5E64; border-radius:22px; cursor:pointer; }
  #projGate .pgh-x svg{ width:20px; height:20px; }
  #projGate .pgh-k{ display:block; margin:8px 0 0; font:600 12px/1 Inter,system-ui,sans-serif; color:#5C5E64; }
  #projGate .pgh-vista{ display:flex; gap:4px; padding:4px; border:1px solid #E6F2FA; border-radius:50px; background:#FFFFFF; }
  #projGate .pgh-vista button{
    flex:1; min-height:40px; padding:0 6px; border:0; border-radius:50px; background:transparent; cursor:pointer;
    font:500 13px/1 Inter,system-ui,sans-serif; color:#5C5E64;
  }
  #projGate .pgh-vista button[aria-pressed="true"]{ background:#077FCF; color:#FFFFFF; }
  #projGate .pg-filtros select{ flex:none!important; width:100%; max-width:none!important; height:44px!important; font-size:14px!important; }
  #projGate .pgf-limpiar{ flex:none!important; height:44px!important; margin:8px 0 0!important; }
  #projGate .pgh-ver{
    display:flex; align-items:center; justify-content:center; flex:none; height:44px; border:0; border-radius:50px; cursor:pointer;
    background:#077FCF; color:#FFFFFF; font:600 14px/1 Inter,system-ui,sans-serif;
  }
  /* el velo: difumina el fondo, como toda ventana de la casa */
  #projGate .pgh-velo{ display:block; position:fixed; inset:0; z-index:1605; background:rgba(15,23,42,.28);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
  #projGate .pgh-velo[hidden]{ display:none; }

  /* L2 · #6 (R 8:53–10:58) · la lista compacta: cada obra en una fila */
  #projGate .pg-panel{ background:transparent!important; padding:0!important; box-shadow:none!important; }
  #projGate .pg-grid{
    display:block!important; margin-top:0; padding:2px 14px; background:#FFFFFF; border-radius:12px;
    box-shadow:-1px 2px 2.5px rgba(0,0,0,.06);
  }
  #projGate .pg-grid .pg-obra{
    display:grid!important; grid-template-columns:52px minmax(0,1fr) auto;
    grid-template-areas:"img nm cta" "img lc cta" "img st cta";
    column-gap:12px; row-gap:3px; align-items:center;
    padding:12px 0!important; border:0!important; border-bottom:1px dashed #D9DADB!important;
    border-radius:0; box-shadow:none; overflow:visible; transform:none!important;
  }
  #projGate .pg-grid .pg-obra:last-child{ border-bottom:0!important; }
  #projGate .pg-grid .pg-foto, #projGate .pg-grid .pg-cuerpo,
  #projGate .pg-grid .pg-med, #projGate .pg-grid .pg-pie{ display:contents; }
  #projGate .pg-grid .pg-foto::before, #projGate .pg-grid .pg-foto::after, #projGate .pg-grid .pg-candado,
  #projGate .pg-grid .pg-estado, #projGate .pg-grid .pgm-datos, #projGate .pg-grid .pg-ejec{ display:none!important; }
  #projGate .pg-grid .pg-foto img{ grid-area:img; width:52px; height:52px; border-radius:8px; clip-path:inset(0 round 8px); transform:none!important; }   /* las «sin foto» van difuminadas: el recorte evita que el difuminado se salga */
  #projGate .pg-grid .pg-lapiz{ grid-area:img; position:static; justify-self:end; align-self:end; width:22px; height:22px; margin:0 -5px -5px 0; }
  #projGate .pg-grid .pg-lapiz svg{ width:12px; height:12px; }
  #projGate .pg-grid .pg-oname{ grid-area:nm; font:600 14px/18px Inter,system-ui,sans-serif; }
  #projGate .pg-grid .pg-oloc{ grid-area:lc; }
  #projGate .pg-grid .pg-chip{ grid-area:st; position:static; justify-self:start; height:20px; padding:0 8px; line-height:20px; }
  #projGate .pg-grid .pg-cta{ grid-area:cta; width:auto; height:36px; padding:0 14px; font-size:0!important; }
  #projGate .pg-grid .pg-cta::after{ content:'Ingresar'; font:500 12px/1 Inter,system-ui,sans-serif; }
  #projGate .pg-grid .pg-cta[title*="asignada"]::after{ content:'Sin acceso'; }
  #projGate #pgmPagerTarjetas .pager{ margin-top:10px; justify-content:center; }
  /* la vista la esconde con un style en línea (verVista): se respeta */
  #projGate .pg-grid[style*="display: none"], #projGate .pg-grid[style*="display:none"]{ display:none!important; }

  /* L2 · #10 (R 46:07–47:04) · en el mapa, «Cartera por región» primero */
  #projGate #pgmRoot .split{ display:flex!important; flex-direction:column; }
  #projGate #pgmRoot .col-cartera{ display:contents!important; }
  #projGate #pgmRoot .col-cartera > #pgm-panel{ order:1; }
  #projGate #pgmRoot .split > .card{ order:2; }
  #projGate #pgmRoot .col-cartera > #pgm-crono{ order:3; }
  /* L5 · #13 · la leyenda de la dona entera, a todo el ancho y legible */
  #projGate #pgmRoot .crono-cuerpo{ flex-direction:column; align-items:stretch; }
  #projGate #pgmRoot .crono-dona{ align-self:center; }
  #projGate #pgmRoot .crono-leg .cl-k{ font-size:13px!important; }

  /* L4 · #15 (R 13:35–23:31) · barra inferior flotante en glass */
  #projGate .pg-barra{
    display:flex; position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:1600;
    transform:translateX(-50%); gap:4px; padding:5px; border-radius:40px;
    background:rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:0 8px 24px rgba(16,24,40,.18), inset 0 0 0 1px rgba(255,255,255,.9);
  }
  #projGate .pg-barra[hidden]{ display:none; }
  #projGate .pg-barra button{
    display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:0; border-radius:40px;
    background:transparent; cursor:pointer; white-space:nowrap;
    font:600 13px/1 Inter,system-ui,sans-serif; color:#484B51;
    transition:padding .2s ease, background .2s ease;
  }
  #projGate .pg-barra button[hidden]{ display:none; }
  #projGate .pg-barra button svg{ width:20px; height:20px; flex:none; }
  #projGate .pg-barra button[aria-current="page"]{ background:#077FCF; color:#FFFFFF; }
  #projGate .pg-barra.mini button:not([aria-current]){ display:none; }
  #projGate .pg-barra.mini button span{ display:none; }
  #projGate .pg-barra.mini button{ padding:0 12px; }
  #projGate.pg-hoja .pg-barra{ display:none; }
}

/* ═══ Teléfono · ajustes del 29-sep sobre la propuesta «Entrada · lista compacta» ═══
   «+ Nuevo Proyecto» pasa a un «+» junto al avatar, en un contenedor glass como
   el de Proyectos / Central (664:4411); y en cada fila el estado va en la misma
   línea que el distrito. */
#projGate .pg-nuevo-mini{ display:none; }
@media (max-width:560px){
  #projGate .pg-titular > .pgm-nuevo{ display:none!important; }
  #projGate .pg-head > .pg-nuevo-mini{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    order:2; margin-left:auto; width:44px; height:36px; padding:0; cursor:pointer;
    border:0; border-radius:50px; color:#FFFFFF;
    background:rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25);   /* sin el contorno #E6F2FA (Lili, 01/10/2026) */
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  #projGate .pg-head > .pg-nuevo-mini[hidden]{ display:none!important; }
  #projGate .pg-head > .pg-nuevo-mini svg{ width:18px; height:18px; }
  #projGate .pg-head > .pg-nuevo-mini:active{ background:rgba(255,255,255,.24); }
  #projGate .pg-head > .pg-nuevo-mini:not([hidden]) + .pg-cuenta{ order:3; margin-left:10px!important; }

  /* fila: nombre arriba; distrito y estado en la segunda línea */
  #projGate .pg-grid .pg-obra{
    /* nombre, distrito entero y el estado debajo: en una sola línea con el
       distrito, a 360 de ancho el distrito quedaba en «M…» */
    grid-template-columns:52px minmax(0,1fr) auto!important;
    grid-template-areas:"img nm cta" "img lc cta" "img st cta"!important;
    row-gap:5px!important;
  }
  #projGate .pg-grid .pg-oname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #projGate .pg-grid .pg-oloc{ font-size:12px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #projGate .pg-grid .pg-cta{ align-self:center; margin-left:8px!important; }
  #projGate .pg-grid .pg-chip{ margin-left:0; justify-self:start; height:20px; padding:0 8px; font-size:10.5px; }
  #projGate .pg-grid .pg-chip.ok{ background:#E6FAF0; color:#048F47; }
  #projGate .pg-grid .pg-chip.atento{ background:#FFF4E6; color:#B46504; }
  #projGate .pg-grid .pg-chip.alerta{ background:#FEEAEA; color:#C63A3A; }
  #projGate .pg-grid .pg-chip.espera{ background:#F0F0F1; color:#5C5E64; }
  /* Eje de calendario (30/09), mismo criterio que arriba: en-curso = verde
     de "ok", no-iniciado = ambar de "atento", finalizada = el azul propio
     de esta hoja (lineas 34, 76), no uno inventado. */
  #projGate .pg-grid .pg-chip.en-curso{ background:#E6FAF0; color:#048F47; }
  #projGate .pg-grid .pg-chip.no-iniciado{ background:#FFF4E6; color:#B46504; }
  #projGate .pg-grid .pg-chip.finalizada{ background:#E6F2FA; color:#077FCF; }
}