/* Semana de la Pyme — mapa: SVG, hover, región activa y panel de resultados */

/* ---------- contenedor del SVG ---------- */
/* El mapa es un control, no un texto para leer. Sin esto, al pinchar y
   arrastrar sobre él el navegador selecciona los nombres de región y los
   pinta con su color de selección: un rectángulo azul sólido sobre la
   etiqueta, que además queda fijo hasta pinchar en otra parte. También
   evita el cursor de texto parpadeando sobre el SVG. */
.mapas{display:flex;justify-content:center;margin-top:40px;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}
.mapas svg,.mapas svg *{-webkit-user-select:none;-moz-user-select:none;user-select:none}
.mapas svg text{pointer-events:none}
.mapas > svg{width:100%;max-width:840px;height:auto}
.mapa-error{max-width:46ch;margin:40px auto;padding:22px 26px;border-radius:18px;
  background:#fff;border:1px solid var(--rojo);color:var(--azul-p);font-size:0.9375rem;text-align:center}

/* ---------- cada región ---------- */
.rg{cursor:pointer}
/* El contorno de foco de base.css es un rectángulo, y sobre una región
   de forma irregular se dibujaba como un cuadrado azul encima del mapa.
   Se anula en el grupo y también en todo lo que hay dentro, porque el
   foco puede caer en el <path>, no solo en el <g>. La señal de foco la
   dan el color rojo y el filete blanco de más abajo, que siguen la
   silueta real de la región. */
.rg:focus,
.rg:focus-visible,
.rg *:focus,
.rg *:focus-visible,
.mapas svg :focus,
.mapas svg :focus-visible{outline:none!important;box-shadow:none!important}
/* Solo la silueta de la región. Antes esto decía ".rg path" y alcanzaba
   a TODOS los <path> del grupo, incluida la línea guía que va hacia la
   etiqueta: al recibir relleno y escalado, esa línea se dibujaba como
   una forma sólida donde termina, que es el cuadrado sobre el nombre. */
.rg path:not(.guia){
  fill:var(--f);stroke:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke;
  transform-box:fill-box;transform-origin:center;
  transition:fill .25s ease,transform .3s cubic-bezier(.2,.8,.3,1);
}
/* La guía es una línea: nunca lleva relleno ni se escala, pase lo que pase. */
.rg .guia{fill:none!important;transform:none!important}
.rg .nom{font-family:var(--display);font-weight:900;fill:var(--azul-p);transition:fill .25s}
.rg .cnt{font-family:var(--texto);font-weight:400;fill:var(--texto-3);transition:fill .25s}
.rg .guia{stroke:#C4CADC;stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .25s}

/* al pasar el puntero y al quedar seleccionada: crece y se pone roja.
   Sin drop-shadow: esa sombra difuminada se recalculaba sobre el contorno
   completo en cada fotograma y era la causa del retraso. */
.rg:hover path:not(.guia),
.rg:focus-visible path:not(.guia),
.rg.on path:not(.guia){
  fill:var(--rojo);transform:scale(1.18);
}
.rg:hover .nom,.rg:focus-visible .nom,.rg.on .nom{fill:var(--rojo)}
.rg:hover .cnt,.rg:focus-visible .cnt,.rg.on .cnt{fill:var(--rojo);opacity:.85}
.rg:hover .guia,.rg:focus-visible .guia,.rg.on .guia{stroke:var(--rojo)}

/* la seleccionada se distingue del simple hover por el filete blanco */
.rg.on path:not(.guia){stroke:#fff;stroke-width:2.6}
.rg:focus-visible path:not(.guia){stroke:#fff;stroke-width:3.5}

/* ---------- vista de la región elegida ---------- */
.panel-region{display:none}
.panel-region.on{
  display:block;margin:34px auto 0;max-width:900px;background:#fff;
  border:1px solid var(--linea-cl);border-radius:var(--r);overflow:hidden;
  box-shadow:0 30px 66px -36px rgba(10,42,120,.5);
  animation:panelEntra .35s cubic-bezier(.16,1,.3,1);
}
@keyframes panelEntra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* cabecera */
.p-cab{background:var(--g-rojo);color:#fff;padding:20px 26px;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.p-cab h3{font-size:clamp(1.1875rem,2.3vw,1.625rem);color:#fff}
.p-cab p{margin:5px 0 0;font-size:0.7188rem;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;opacity:.92}
.p-x{width:36px;height:36px;border-radius:50%;border:0;flex:none;
  background:rgba(255,255,255,.24);color:#fff;font-size:1.25rem;line-height:1;cursor:pointer}
.p-x:hover{background:rgba(255,255,255,.4)}

/* filtros */
.p-filtros{padding:18px 22px 14px;border-bottom:1px solid var(--linea-cl);background:var(--papel)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{border:1px solid var(--linea-cl);background:#fff;color:var(--azul-p);
  padding:8px 15px;border-radius:100px;font:inherit;font-size:0.8125rem;font-weight:700;
  letter-spacing:.02em;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--azul);color:var(--azul)}
.chip.on{background:var(--azul-p);border-color:var(--azul-p);color:#fff}
.p-campos{display:flex;gap:10px;flex-wrap:wrap}
.p-campos input,.p-campos select{
  padding:11px 15px;border:1px solid var(--linea-cl);border-radius:12px;background:#fff;
  font:inherit;font-size:0.9062rem;color:var(--azul-p);transition:border-color .2s,box-shadow .2s}
.p-campos input{flex:1;min-width:220px}
.p-campos select{min-width:158px;cursor:pointer}
.p-campos input:focus,.p-campos select:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(0,107,185,.14)}

/* listado */
.p-lista{padding:8px 12px}
.fila{
  display:grid;grid-template-columns:104px 1fr auto 22px;align-items:center;gap:16px;width:100%;
  background:none;border:0;border-bottom:1px solid var(--linea-cl);padding:14px 12px;
  text-align:left;cursor:pointer;border-radius:12px;transition:background .2s;color:var(--azul-p);
  font-family:var(--texto);
}
.fila:last-child{border-bottom:0}
.fila:hover{background:var(--papel)}
.f-cuando{font-size:0.7188rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--azul)}
.f-txt b{display:block;font-size:1rem;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.f-txt em{font-style:normal;font-size:0.8438rem;color:var(--texto-3)}
.f-etq{font-size:0.6562rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--azul);background:var(--nube);padding:5px 11px;border-radius:100px;white-space:nowrap}
.f-mas{font-size:1.125rem;color:var(--rojo);transition:transform .2s;text-align:right}
.fila:hover .f-mas{transform:translateX(4px)}
.f-vacio{margin:0;padding:34px 12px;color:var(--texto-2);font-size:0.9688rem;text-align:center}

/* ver más */
.p-mas{display:flex;align-items:center;justify-content:center;gap:16px;padding:4px 22px 22px}
.p-mas:empty{padding:0}
.btn--gris{background:#fff;color:var(--azul-p);box-shadow:inset 0 0 0 2px var(--linea-cl)}
.btn--gris:hover{background:var(--papel);box-shadow:inset 0 0 0 2px var(--azul)}
.p-cuenta{font-size:0.7812rem;font-weight:700;color:var(--texto-3)}

@media (max-width:760px){
  .fila{grid-template-columns:1fr 22px;gap:6px 12px}
  .f-cuando{grid-column:1/3}
  .f-etq{justify-self:start;grid-column:1/3;margin-top:4px}
  .p-campos input{min-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .panel-region.on{animation:none}
}