/* =============================================================================
   Accesibilidad — PIRA RIESGOS  (WCAG 2.1)
   Widget flotante · Alto contraste · Escala de texto · Foco visible
   Responsive: móvil / tablet / escritorio · Android · Windows · macOS
   ========================================================================== */

/* --- utilidades --- */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;left:12px;top:-60px;z-index:1000;
  background:#FFD60A;color:#000;font-weight:700;padding:10px 16px;border-radius:0 0 10px 10px;
  font-family:"Saira Condensed",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;
  transition:top .18s ease;
}
.skip-link:focus{top:0}
main[tabindex]:focus{outline:none}

/* --- foco visible reforzado en todo el sitio --- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #1866D9;outline-offset:2px;border-radius:3px;
}

/* --- escala de texto (A- / A / A+) --- */
:root{--a11y-escala:1}
html{font-size:calc(100% * var(--a11y-escala,1))}

/* =============================================================================
   WIDGET DE ACCESIBILIDAD
   Botón flotante en una esquina (no tapa el contenido). El panel se abre
   solo cuando el usuario lo pide y se cierra con «Cerrar», Escape o clic fuera.
   ========================================================================== */
.a11y-launcher{
  position:fixed;left:14px;bottom:14px;z-index:97;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:#0f0720;color:#fff;border:2px solid #FFD60A;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  transition:background .15s ease,transform .15s ease;
}
.a11y-launcher:hover{background:#1a0f33;transform:translateY(-1px)}
.a11y-launcher svg{width:24px;height:24px}

.a11y-panel{
  position:fixed;left:14px;bottom:72px;z-index:98;
  width:min(280px,calc(100vw - 28px));
  background:#0f0720;color:#ecebf6;border:1px solid rgba(255,255,255,.22);
  border-radius:14px;padding:14px;box-shadow:0 18px 44px rgba(0,0,0,.55);
  font-family:"Saira Condensed",system-ui,sans-serif;
  display:flex;flex-direction:column;gap:8px;
}
.a11y-panel[hidden]{display:none!important}
.a11y-title{margin:0 0 2px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:#FFD60A}
.a11y-btn{
  display:flex;align-items:center;gap:8px;
  background:transparent;border:1px solid rgba(255,255,255,.25);color:#ecebf6;
  border-radius:9px;padding:10px 12px;cursor:pointer;font:inherit;font-size:.92rem;text-align:left;
  transition:background .15s ease;
}
.a11y-btn:hover{background:rgba(255,255,255,.1)}
.a11y-btn[aria-pressed="true"]{background:#FFD60A;color:#000;border-color:#FFD60A}
.a11y-row{display:flex;align-items:center;gap:6px}
.a11y-label{flex:1;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:#a6a3c6}
.a11y-mini{
  width:38px;height:38px;border-radius:9px;cursor:pointer;font:inherit;font-weight:800;
  background:transparent;border:1px solid rgba(255,255,255,.25);color:#ecebf6;
}
.a11y-mini:hover{background:rgba(255,255,255,.1)}
.a11y-close{
  align-self:flex-end;background:transparent;border:0;color:#a6a3c6;cursor:pointer;
  font:inherit;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;padding:4px 6px;
}
.a11y-close:hover{color:#fff}

@media(max-width:560px){
  .a11y-launcher{left:12px;bottom:12px}
  .a11y-panel{left:12px;right:12px;width:auto;bottom:70px}
}
@media (prefers-reduced-motion:reduce){
  .skip-link,.a11y-launcher{transition:none}
}

/* =============================================================================
   MODO ALTO CONTRASTE   ( #000 fondo · #FFF texto · #FFD60A primarios )
   ========================================================================== */
html.contraste-alto{
  --azul:#FFD60A; --teal:#FFD60A; --purpura:#FFD60A; --magenta:#FFD60A;
  --grad:#FFD60A; --grad-d:#FFD60A;
  --ink:#000; --ink-2:#000; --ink-3:#000;
  --tx:#fff; --tx-dim:#fff;
  --paper:#000; --paper-2:#000; --card:#000;
  --tx-dark:#fff; --tx-dark-dim:#fff;
  --line-d:#fff; --line:rgba(255,255,255,.6);
}
html.contraste-alto body{background:#000;color:#fff}
html.contraste-alto .nav{background:#000;border-bottom:2px solid #FFD60A}
html.contraste-alto .hero,
html.contraste-alto .sec-dark,
html.contraste-alto .close,
html.contraste-alto .diag,
html.contraste-alto .pcard,
html.contraste-alto .stat,
html.contraste-alto .quote,
html.contraste-alto footer,
html.contraste-alto .sectors button{
  background:#000!important;color:#fff!important;border-color:#fff!important;
}
html.contraste-alto .grad-text,
html.contraste-alto .stat .n,
html.contraste-alto .pain-num,
html.contraste-alto h1,html.contraste-alto h2,html.contraste-alto h3{
  color:#FFD60A!important;-webkit-text-fill-color:#FFD60A!important;background:none!important;
}
html.contraste-alto a{color:#FFD60A!important;text-decoration:underline}
html.contraste-alto .btn-p{background:#FFD60A!important;color:#000!important;border:2px solid #000}
html.contraste-alto .btn-g,
html.contraste-alto .btn-wa{background:#000!important;color:#FFD60A!important;border:2px solid #FFD60A!important}
html.contraste-alto .pcard::before,
html.contraste-alto .detbar,
html.contraste-alto .flow::before,
html.contraste-alto .close::after,
html.contraste-alto footer .grad-bar{background:#FFD60A!important}
html.contraste-alto .chip{color:#fff!important;border-color:#FFD60A!important}
html.contraste-alto #sig{opacity:.15}
html.contraste-alto .sectors button.sel{background:#FFD60A!important;color:#000!important}
html.contraste-alto :focus-visible{outline:3px solid #FFD60A!important;outline-offset:2px}
html.contraste-alto .a11y-launcher,
html.contraste-alto .a11y-panel{background:#000;border-color:#FFD60A}
html.contraste-alto .a11y-btn,
html.contraste-alto .a11y-mini{border-color:#FFD60A;color:#fff}

/* =============================================================================
   PANEL PRIVADO DE VISITAS  (solo con ?admin=CLAVE)
   ========================================================================== */
.panel-visitas{
  position:fixed;right:12px;top:78px;z-index:96;
  background:#0f0720;color:#ecebf6;border:1px solid #FFD60A;border-radius:12px;
  padding:12px 14px;font-family:"Saira Condensed",system-ui,sans-serif;
  display:flex;flex-direction:column;gap:2px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  font-size:.82rem;min-width:150px;max-width:calc(100vw - 24px);
}
.panel-visitas strong{color:#FFD60A;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;margin-bottom:4px}
.panel-visitas span{display:flex;justify-content:space-between;gap:14px}
.panel-visitas b{font-weight:800}