/* ══════════════════════════════════════════
   Widget de Accesibilidad
   Ícono, disposición y colores replicados del
   "Menú de accesibilidad" de claro.com.ar/personas
   (botón flotante azul #0474F9, header y tarjetas
   activas en teal #0097A9). Funcionalidad real:
   perfiles Daltonismo y Dislexia.
══════════════════════════════════════════ */

@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/opendyslexic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/opendyslexic-700.woff2') format('woff2');
}

:root {
  --a11y-blue: #0474f9;
  --a11y-teal: #0097a9;
  --a11y-teal-dark: #007c8c;
}

/* ── Botón flotante ── */
.a11y-fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 998;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}
.a11y-fab:hover { transform: scale(1.06); }
.a11y-fab svg { display: block; width: 100%; height: 100%; }
.a11y-fab-bg { fill: var(--a11y-blue); }
.a11y-fab-fg { fill: #fff; }

/* ── Panel ── */
.a11y-panel {
  position: fixed;
  left: 20px;
  bottom: 74px;
  z-index: 999;
  width: min(360px, calc(100vw - 40px));
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: #fff;
  color: #1a1a1a;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  font-family: 'Inter', Arial, sans-serif;
}
.a11y-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--a11y-teal);
  color: #fff;
  padding: 16px 18px;
  border-radius: 14px 14px 0 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.a11y-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.a11y-close:hover { background: rgba(255, 255, 255, .15); }

.a11y-panel-body { padding: 18px; }
.a11y-section-label {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #1a1a1a;
  margin-bottom: 12px;
}

/* ── Tarjetas de perfil ── */
.a11y-profiles { display: flex; gap: 10px; }
.a11y-profile-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  color: #1a1a1a;
  border: 2px solid #d9dde3;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.a11y-profile-btn:hover { border-color: var(--a11y-teal); }
.a11y-profile-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 151, 169, .1);
  color: var(--a11y-teal);
}
.a11y-profile-ico svg { width: 16px; height: 16px; }
.a11y-profile-txt { font-size: .84rem; font-weight: 600; }

.a11y-profile-btn.is-active {
  background: var(--a11y-teal);
  border-color: var(--a11y-teal);
  color: #fff;
}
.a11y-profile-btn.is-active .a11y-profile-ico { background: rgba(255, 255, 255, .3); color: #fff; }
.a11y-profile-btn.is-active:hover { background: var(--a11y-teal-dark); }

.a11y-hint { font-size: .74rem; color: #6b6b6b; font-weight: 400; margin-top: 14px; line-height: 1.5; }
.a11y-reset {
  margin-top: 10px;
  width: 100%;
  padding: 8px;
  background: none;
  border: 1px solid #d9dde3;
  border-radius: 8px;
  color: #6b6b6b;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
}
.a11y-reset:hover { border-color: #b3b8c0; color: #1a1a1a; }

@media (max-width: 480px) {
  .a11y-fab { left: 14px; bottom: 14px; }
  .a11y-panel { left: 14px; bottom: 66px; }
  .a11y-profiles { flex-direction: column; }
}

/* ══════════════════════════════════════════
   EFECTOS DE LOS PERFILES (aplicados en <html>)
══════════════════════════════════════════ */

/* Daltonismo: quita el color y apoya la lectura en
   contraste/luminancia en vez de tono; subraya los
   enlaces para que no dependan del color. */
html.a11y-daltonismo {
  filter: saturate(0) !important;
}
html.a11y-daltonismo a {
  text-decoration: underline !important;
}

/* Dislexia: tipografía OpenDyslexic (peso variable en
   la base de cada letra, ayuda a no "voltear" caracteres)
   + pausa toda animación/transición que pueda distraer. */
html.a11y-dislexia,
html.a11y-dislexia body,
html.a11y-dislexia h1,
html.a11y-dislexia h2,
html.a11y-dislexia h3,
html.a11y-dislexia h4,
html.a11y-dislexia h5,
html.a11y-dislexia p,
html.a11y-dislexia span,
html.a11y-dislexia a,
html.a11y-dislexia button,
html.a11y-dislexia li,
html.a11y-dislexia dt,
html.a11y-dislexia dd,
html.a11y-dislexia label,
html.a11y-dislexia input {
  font-family: 'OpenDyslexic', Arial, sans-serif !important;
  letter-spacing: .01em !important;
}
html.a11y-dislexia .hero-title mark {
  color: var(--accent-ink, #f5f3ee) !important;
}
html.a11y-dislexia *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-fab):not(.a11y-fab *) {
  animation: none !important;
  transition: none !important;
}