/* ===== Popup "Elecciones COSOC 2026" (inc/popup-cosoc.php) — solo en la portada ===== */

/* z-index bajo #acc-btn (9000) y .acc-menu (9001), igual que el aviso de
   construcción: el botón de accesibilidad queda visible y usable. */
.popup-cosoc{
  position:fixed; inset:0; z-index:8999;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.popup-cosoc[hidden]{ display:none; }

.popup-cosoc-overlay{
  position:absolute; inset:0;
  background:rgba(7,24,48,.66);
  animation:popup-cosoc-fade .25s ease-out;
}

.popup-cosoc-panel{
  position:relative;
  box-sizing:border-box;
  width:100%; max-width:500px;
  max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:32px 28px 26px;
  border-top:6px solid var(--gold,#f0c40a);
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 60px rgba(7,24,48,.38);
  text-align:center;
  font-family:"Open Sans",sans-serif;
  color:var(--tx,#1a1a2e);
  animation:popup-cosoc-in .3s cubic-bezier(.22,1,.36,1);
}
.popup-cosoc-panel:focus{ outline:none; }

.popup-cosoc-x{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--gray,#5f6e8c);
  cursor:pointer;
  transition:background .2s, color .2s;
}
.popup-cosoc-x:hover{ background:var(--light,#f0f4ff); color:var(--navy,#0d2b5e); }

.popup-cosoc-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; margin-bottom:14px;
  border-radius:50%;
  background:var(--navy,#0d2b5e); color:var(--gold,#f0c40a);
}

.popup-cosoc-title{
  margin:0 0 14px;
  font-family:Montserrat,sans-serif; font-weight:800;
  font-size:1.1rem; line-height:1.3; letter-spacing:.01em;
  color:var(--navy,#0d2b5e);
}
.popup-cosoc-sep{ color:var(--gold-dark,#d4a800); margin:0 .25em; }
.popup-cosoc-place{ white-space:nowrap; }
.popup-cosoc-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.popup-cosoc-desc p{
  margin:0 0 10px;
  font-size:.95rem; line-height:1.6; color:#38445f;
}

.popup-cosoc-destacado{
  margin:16px 0 20px; padding:10px 14px;
  border-radius:10px;
  background:#fef9e2; border:1.5px solid var(--gold,#f0c40a);
  font-family:Montserrat,sans-serif; font-weight:800;
  font-size:1.05rem; line-height:1.35;
  color:var(--navy,#0d2b5e);
}

.popup-cosoc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:12px 26px;
  border-radius:10px;
  background:var(--navy,#0d2b5e); color:#fff;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:.95rem;
  text-decoration:none;
  transition:background .2s;
}
.popup-cosoc-btn:hover{ background:#0a1f44; color:#fff; }

.popup-cosoc-x:focus-visible,
.popup-cosoc-btn:focus-visible{ outline:3px solid var(--gold,#f0c40a); outline-offset:3px; }

@keyframes popup-cosoc-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popup-cosoc-in{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .popup-cosoc-overlay, .popup-cosoc-panel{ animation:none; }
  .popup-cosoc-x, .popup-cosoc-btn{ transition:none; }
}

/* Móvil: la tarjeta queda sobre el botón de accesibilidad (abajo a la
   derecha, ~72 px), sin taparlo; si no cabe, scroll interno. */
@media (max-width:480px){
  .popup-cosoc{ padding:12px 12px 88px; }
  .popup-cosoc-panel{ padding:28px 18px 20px; max-height:calc(100vh - 100px); max-height:calc(100dvh - 100px); }
  .popup-cosoc-title{ font-size:1.05rem; padding:0 24px; }
  .popup-cosoc-desc p{ font-size:.92rem; }
}

/* Alto contraste del sitio (body.alto-contraste en main.css pinta todo negro/blanco). */
body.alto-contraste .popup-cosoc-panel{ border:2px solid #fff!important; border-top:6px solid #ffea00!important; }
body.alto-contraste .popup-cosoc-destacado{ border:2px solid #ffea00!important; color:#ffea00!important; }
body.alto-contraste .popup-cosoc-btn{ border:2px solid #ffea00!important; }
body.alto-contraste .popup-cosoc-overlay{ background:rgba(0,0,0,.85)!important; }
/* main.css rellena todo SVG en alto contraste; estos íconos son de trazo. */
body.alto-contraste .popup-cosoc svg,
body.alto-contraste .popup-cosoc svg *{ fill:none!important; }
body.alto-contraste .popup-cosoc-x:focus-visible,
body.alto-contraste .popup-cosoc-btn:focus-visible{ outline-color:#ffea00; }