/* ============================================================
   CIBAPAC — estilos propios de esta página
   ============================================================ */

.cibapac-hero{
  display:block;width:clamp(84px,10vw,116px);height:auto;
  margin:0 auto 18px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5));
}

.equipos{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:clamp(12px,1.6vw,18px)}

.eq{
  position:relative;display:grid;justify-items:center;text-align:center;gap:4px;
  padding:26px 18px 22px;
  border:1px solid var(--linea);border-radius:16px;
  background:linear-gradient(165deg,rgba(20,48,86,.6),rgba(10,23,42,.85));
  transition:transform .3s,border-color .3s,background .3s;
}
.eq:hover{border-color:var(--linea-oro)}

.eq__escudo{
  width:84px;height:84px;display:grid;place-items:center;
  border-radius:16px;overflow:hidden;margin-bottom:14px;
  background:rgba(8,17,31,.4);
}
.eq__escudo:empty{border:1px dashed rgba(242,202,128,.22)}
.eq__escudo img{width:100%;height:100%;object-fit:cover;display:block}

.eq__nombre{
  font-family:var(--display);font-weight:800;font-size:.92rem;
  text-transform:uppercase;line-height:1.2;
}
.eq__sede{
  font-family:var(--texto);font-size:.72rem;color:rgba(233,239,246,.45);
  margin:6px 0 0;text-transform:none;line-height:1.4;
}

/* Nuestro equipo, destacado */
.eq--nuestro{
  border-color:var(--oro);
  background:linear-gradient(165deg,rgba(164,115,45,.3),rgba(12,28,50,.92));
}
.eq__nuestro{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,var(--oro),#D3A253);color:var(--tinta);
  font-size:.5rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 14px;border-radius:0 0 10px 10px;white-space:nowrap;
}
.eq--nuestro .eq__nombre{color:var(--oro)}

/* Espacios por capturar */
.eq--vacio{opacity:.55;border-style:dashed}
.eq--vacio .eq__nombre{color:rgba(233,239,246,.5);font-weight:700}

/* ============================================================
   TABLA GENERAL — posiciones de la Región 4
   ============================================================ */

/* En pantallas angostas la tabla se desplaza en horizontal en lugar
   de aplastar las columnas. */
.tg-caja{
  overflow-x:auto;
  border:1px solid var(--linea);border-radius:16px;
  background:linear-gradient(165deg,rgba(20,48,86,.5),rgba(10,23,42,.85));
  -webkit-overflow-scrolling:touch;
}

.tg{
  width:100%;min-width:660px;border-collapse:collapse;
  /* Cifras de ancho fijo: sin esto las columnas bailan de fila en fila */
  font-variant-numeric:tabular-nums;
}

.tg thead th{
  font-family:var(--display);font-weight:800;font-size:.56rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(233,239,246,.5);text-align:center;
  padding:14px 8px;white-space:nowrap;
  border-bottom:1px solid var(--linea-oro);
}
.tg thead th:nth-child(2){text-align:left;padding-left:16px}

.tg tbody td,
.tg tbody th{
  font-family:var(--texto);font-size:.86rem;color:rgba(233,239,246,.8);
  text-align:center;padding:12px 8px;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.tg tbody tr:last-child td,
.tg tbody tr:last-child th{border-bottom:0}
.tg tbody tr{transition:background .25s}
.tg tbody tr:hover{background:rgba(18,97,166,.12)}

.tg__pos{
  font-family:var(--display);font-weight:800;font-size:.8rem;
  color:rgba(233,239,246,.35);width:44px;
}

.tg__equipo{
  display:flex;align-items:center;gap:11px;
  text-align:left !important;padding-left:16px !important;
  min-width:230px;
}
.tg__escudo{
  width:30px;height:30px;flex:none;border-radius:7px;overflow:hidden;
  background:rgba(8,17,31,.5);display:grid;place-items:center;
}
.tg__escudo img{width:100%;height:100%;object-fit:cover;display:block}
.tg__nombre{
  font-family:var(--display);font-weight:800;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.2;
}

/* Sustituto del escudo mientras no haya imagen */
.tg__inicial{
  font-family:var(--display);font-weight:800;font-size:.82rem;
  color:rgba(242,202,128,.55);
}

.tg__g{color:var(--oro)}

/* La diferencia de puntos es la columna que se lee de un vistazo */
.tg__dif{font-weight:700}
.tg__dif--mas{color:#6FD08C}
.tg__dif--menos{color:#E08585}

/* Nuestro equipo, marcado igual que en las tarjetas de arriba */
.tg__fila--nuestro td,
.tg__fila--nuestro th{background:rgba(164,115,45,.16)}
.tg__fila--nuestro:hover td,
.tg__fila--nuestro:hover th{background:rgba(164,115,45,.24)}
.tg__fila--nuestro .tg__nombre{color:var(--oro)}
.tg__fila--nuestro .tg__pos{color:var(--oro)}

/* Corte de clasificación */
.tg__fila--corte td,
.tg__fila--corte th{border-bottom:1px solid var(--linea-oro)}

/* ---------- Qué significa cada abreviatura ----------
   El aviso se despliega hacia abajo, nunca hacia arriba: la tabla vive
   dentro de una caja con desplazamiento horizontal y cualquier cosa que
   sobresalga por encima quedaría cortada. */
.tg thead th[data-tip]{position:relative;cursor:help}
.tg thead th[data-tip] > span{
  border-bottom:1px dotted rgba(233,239,246,.3);padding-bottom:2px;
}
.tg thead th[data-tip]::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% - 2px);left:50%;transform:translateX(-50%) translateY(-4px);
  z-index:6;white-space:nowrap;pointer-events:none;
  background:#0F2748;border:1px solid var(--linea-oro);border-radius:7px;
  padding:7px 11px;
  font-family:var(--texto);font-weight:500;font-size:.7rem;letter-spacing:0;
  text-transform:none;color:rgba(233,239,246,.9);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;
  transition:opacity .18s,transform .18s,visibility .18s;
}
.tg thead th[data-tip]:hover::after,
.tg thead th[data-tip]:focus-visible::after{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
/* En la última columna el aviso se alinea a la derecha para no salirse */
.tg thead th[data-tip]:last-child::after{left:auto;right:0;transform:translateY(-4px)}
.tg thead th[data-tip]:last-child:hover::after,
.tg thead th[data-tip]:last-child:focus-visible::after{transform:translateY(0)}

.tg-nota{
  font-family:var(--texto);font-size:.76rem;color:rgba(233,239,246,.45);
  margin:14px 0 0;line-height:1.5;
}

.tg-pie{
  display:flex;flex-wrap:wrap;gap:8px 22px;
  margin-top:16px;
}
.tg-pie p{
  font-family:var(--texto);font-size:.72rem;color:rgba(233,239,246,.42);
  margin:0;line-height:1.5;
}
.tg-pie b{color:rgba(233,239,246,.72);font-weight:600}

/* ============================================================
   MAPA DE SEDES
   ============================================================ */
.mapa-caja{margin:0}
.mapa{
  width:100%;height:auto;display:block;
  /* Los globos se dibujan fuera del trazo, así que no se recorta */
  overflow:visible;
}
.mapa__pais{
  fill:url(#mapaRelleno);
  stroke:rgba(242,202,128,.45);stroke-width:1.4;stroke-linejoin:round;
}

/* Guías que unen cada escudo con su ciudad */
.mapa__guia{stroke:rgba(233,239,246,.28);stroke-width:1}
.mapa__punto{fill:var(--oro);stroke:#08111F;stroke-width:1.2}
.mapa__punto--nuestro{fill:#fff}

/* Nuestra sede late para distinguirse del resto */
.mapa__pulso{
  fill:none;stroke:var(--oro);stroke-width:2;
  transform-origin:center;transform-box:fill-box;
  animation:mapa-late 2.6s ease-out infinite;
}
@keyframes mapa-late{
  0%{transform:scale(.6);opacity:.9}
  70%,100%{transform:scale(2.8);opacity:0}
}

.mapa__equipo{cursor:pointer;outline:none}
/* Placa cuadrada como en la tabla: el recorte circular cortaba los
   logos horizontales, que son varios. */
.mapa__aro{
  fill:none;stroke:rgba(242,202,128,.5);stroke-width:2;
  transition:stroke .2s,stroke-width .2s;
}
.mapa__equipo:hover .mapa__aro,
.mapa__equipo:focus-visible .mapa__aro{stroke:#fff;stroke-width:3}
.mapa__equipo--nuestro .mapa__aro{stroke:var(--oro);stroke-width:3}

.mapa__globo{opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;pointer-events:none}
.mapa__globo rect{fill:#0F2748;stroke:var(--oro);stroke-width:1}
.mapa__globo text{
  font-family:var(--texto);font-size:12px;font-weight:600;fill:#E9EFF6;text-anchor:middle;
}
.mapa__equipo:hover .mapa__globo,
.mapa__equipo:focus-visible .mapa__globo{opacity:1;visibility:visible}

.mapa-pie{
  display:flex;align-items:center;gap:9px;justify-content:center;
  font-family:var(--texto);font-size:.76rem;color:rgba(233,239,246,.5);
  margin-top:14px;
}
.mapa-pie__yo{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:#fff;box-shadow:0 0 0 4px rgba(242,202,128,.3);
}

/* ---------- Listado por estado ---------- */
.sedes{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(34px,4vw,52px);
}
.sedes__estado h3{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.1em;color:var(--oro);
  margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--linea-oro);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.sedes__estado h3 span{
  font-size:.62rem;color:rgba(233,239,246,.4);font-variant-numeric:tabular-nums;
}
.sedes__estado ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sedes__estado li{
  display:flex;align-items:center;gap:11px;
  padding:7px;border-radius:9px;transition:background .25s;
}
.sedes__estado li:hover{background:rgba(18,97,166,.14)}
.sedes__estado img{
  width:34px;height:34px;flex:none;border-radius:7px;object-fit:cover;
  background:rgba(8,17,31,.5);
}
.sedes__estado span{display:grid;gap:2px;min-width:0}
.sedes__estado b{
  font-family:var(--display);font-weight:800;font-size:.72rem;
  text-transform:uppercase;line-height:1.2;
}
.sedes__estado i{
  font-family:var(--texto);font-style:normal;font-size:.7rem;
  color:rgba(233,239,246,.45);line-height:1.2;
}
.sedes__yo b{color:var(--oro)}
.sedes__yo{background:rgba(164,115,45,.16)}

@media(prefers-reduced-motion:reduce){
  .mapa__pulso{animation:none;opacity:.5}
}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em;color:var(--oro);
  background:rgba(18,97,166,.18);border-radius:4px;padding:2px 6px;
}