/* ===========================================================
   APEL TDF — Estilos del módulo de accesibilidad
   Se enlaza en TODAS las páginas (index y app/*). Usa las
   variables de color definidas por styles.css o app.css.
   =========================================================== */

/* Escalado de texto controlado por el widget */
html { font-size: calc(100% * var(--a11y-font, 1)); }

/* ---- Botón flotante + panel ---- */
.a11y-fab {
  position: fixed; left: 18px; bottom: 18px; z-index: 1000;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--azul-700, #103a66); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(10,37,64,.35); transition: transform .15s, background .2s;
}
.a11y-fab:hover { transform: scale(1.07); background: var(--azul-500, #1d5fa8); }
.a11y-fab:focus-visible { outline: 3px solid var(--ambar, #f5a623); outline-offset: 3px; }
.a11y-panel {
  position: fixed; left: 18px; bottom: 84px; z-index: 1000; width: 300px; max-width: calc(100vw - 36px);
  background: #fff; color: #15212e; border-radius: 14px; box-shadow: 0 28px 70px rgba(10,37,64,.22);
  border: 1px solid #e6ecf3; padding: 1rem; font-family: var(--ff-body, system-ui, sans-serif);
}
.a11y-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.a11y-panel__head strong { font-family: var(--ff-title, sans-serif); color: var(--azul-900, #0a2540); font-size: 1.1rem; }
.a11y-close { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #576678; }
.a11y-font { background: #f3f7fc; border-radius: 10px; padding: .6rem .8rem; margin-bottom: .8rem; }
.a11y-font > span { font-size: .82rem; font-weight: 600; color: var(--azul-900, #0a2540); }
.a11y-font__ctrl { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; }
.a11y-font__ctrl button { width: 44px; height: 36px; border-radius: 8px; border: 1.5px solid #e6ecf3; background: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; color: var(--azul-700, #103a66); }
.a11y-font__ctrl button:hover { border-color: var(--azul-300, #4b8fd6); }
.a11y-font__val { font-family: var(--ff-title, sans-serif); color: var(--azul-900, #0a2540); }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.a11y-grid button { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .7rem .4rem; border-radius: 10px; border: 1.5px solid #e6ecf3; background: #fff; cursor: pointer; font-size: .8rem; font-weight: 600; color: #15212e; text-align: center; }
.a11y-grid button span { font-size: 1.2rem; }
.a11y-grid button:hover { border-color: var(--azul-300, #4b8fd6); }
.a11y-grid button.is-on { background: var(--azul-700, #103a66); border-color: var(--azul-700, #103a66); color: #fff; }
.a11y-reset { width: 100%; margin-top: .7rem; padding: .6rem; border-radius: 10px; border: 0; background: #f3f7fc; color: var(--azul-700, #103a66); font-weight: 600; cursor: pointer; }
.a11y-reset:hover { background: #e7eef7; }

/* ---- Efectos sobre el sitio ---- */
/* Fondos oscuros (secciones, barras, hero, franjas con color propio) */
.a11y-contrast body, .a11y-contrast .nav, .a11y-contrast .topbar, .a11y-contrast .footer, .a11y-contrast .footer__bottom,
.a11y-contrast .section, .a11y-contrast .hero, .a11y-contrast .hero__overlay, .a11y-contrast .hero__media,
.a11y-contrast .section--cta, .a11y-contrast .cta__bg, .a11y-contrast .obra-cta { background: #000 !important; }
.a11y-contrast body { color: #fff !important; }
/* Tarjetas y bloques: fondo oscuro + borde claro para distinguirlos */
.a11y-contrast .section--alt, .a11y-contrast .strip, .a11y-contrast .card, .a11y-contrast .mini-card,
.a11y-contrast .strip__item, .a11y-contrast .benefit, .a11y-contrast .benefit__icon, .a11y-contrast .news,
.a11y-contrast .news__body, .a11y-contrast .news__date, .a11y-contrast .member, .a11y-contrast .member__avatar,
.a11y-contrast .contact-card, .a11y-contrast .appbar, .a11y-contrast .login-box, .a11y-contrast .salon__stat,
.a11y-contrast .salon__list li, .a11y-contrast .fb-card, .a11y-contrast .fb-aside, .a11y-contrast .carnet,
.a11y-contrast .notif, .a11y-contrast .video-wrap { background: #111 !important; border-color: #fff !important; }
/* TODO el texto en blanco (títulos incluidos) */
.a11y-contrast h1, .a11y-contrast h2, .a11y-contrast h3, .a11y-contrast h4, .a11y-contrast h5,
.a11y-contrast p, .a11y-contrast a, .a11y-contrast span, .a11y-contrast li, .a11y-contrast label,
.a11y-contrast strong, .a11y-contrast small, .a11y-contrast em, .a11y-contrast b,
.a11y-contrast dt, .a11y-contrast dd, .a11y-contrast time, .a11y-contrast .hl { color: #fff !important; }
/* Etiquetas/insignias: eran texto de color sobre fondo claro -> amarillo sobre negro */
.a11y-contrast .tag, .a11y-contrast .tag--accent, .a11y-contrast .notif__badge, .a11y-contrast .pill, .a11y-contrast .badge,
.a11y-contrast .eyebrow, .a11y-contrast .eyebrow--light { background: #000 !important; color: #ffd24d !important; border-color: #ffd24d !important; }

/* El widget NO debe verse afectado por el contraste (sino queda ilegible) */
.a11y-contrast .a11y-panel, .a11y-contrast .a11y-fab { filter: none !important; }
.a11y-contrast .a11y-panel { background: #111 !important; border-color: #fff !important; }
.a11y-contrast .a11y-panel strong, .a11y-contrast .a11y-panel span, .a11y-contrast .a11y-panel b,
.a11y-contrast .a11y-panel label, .a11y-contrast .a11y-grid button, .a11y-contrast .a11y-close,
.a11y-contrast .a11y-reset, .a11y-contrast .a11y-font__val { color: #fff !important; }
.a11y-contrast .a11y-font, .a11y-contrast .a11y-font__ctrl button,
.a11y-contrast .a11y-grid button, .a11y-contrast .a11y-reset { background: #1d2733 !important; border-color: #fff !important; }

/* Botones de acción legibles en alto contraste (negro sobre amarillo) */
.a11y-contrast .btn--primary, .a11y-contrast .btn--blue { background: #ffd24d !important; color: #000 !important; }
.a11y-contrast .btn--ghost, .a11y-contrast .btn--light { background: #000 !important; color: #fff !important; border-color: #fff !important; }

/* Campos de formulario en alto contraste (index y app) */
.a11y-contrast .form input, .a11y-contrast .form select, .a11y-contrast .form textarea,
.a11y-contrast .field input, .a11y-contrast .field select, .a11y-contrast .field textarea {
  background: #000 !important; color: #fff !important; border-color: #fff !important;
}
.a11y-contrast .form input::placeholder, .a11y-contrast .form textarea::placeholder,
.a11y-contrast .field input::placeholder, .a11y-contrast .field textarea::placeholder { color: #ccc !important; }

.a11y-grayscale { filter: grayscale(1); }
.a11y-grayscale.a11y-contrast { filter: grayscale(1) contrast(1.35); }
.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 1px dashed currentColor; outline-offset: 2px; }
.a11y-dyslexia, .a11y-dyslexia body { font-family: Verdana, Tahoma, sans-serif !important; letter-spacing: .04em; word-spacing: .12em; line-height: 1.9 !important; }
.a11y-bigcursor, .a11y-bigcursor * { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M6 4l24 12-10 2-4 14z" fill="%23000" stroke="%23fff" stroke-width="2"/></svg>') 4 4, auto !important; }
.a11y-noanim, .a11y-noanim * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.a11y-noanim .reveal { opacity: 1 !important; transform: none !important; }
.a11y-noanim .hero__media { transform: none !important; }

/* ---- Mejoras WCAG: foco visible (teclado) y "saltar al contenido" ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ambar, #f5a623) !important; outline-offset: 2px !important; border-radius: 3px;
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 3000; background: var(--azul-900, #0a2540); color: #fff !important; padding: .7rem 1.2rem; border-radius: 0 0 10px 10px; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 0; }

@media (max-width: 760px) { .a11y-fab { width: 50px; height: 50px; left: 14px; bottom: 14px; } }

/* ===== Botón flotante de WhatsApp (abajo a la derecha, en todas las páginas) ===== */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 1000;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(37,211,102,.45);
  transition: transform .15s ease, box-shadow .2s ease;
  animation: wa-pulse 2.6s ease-out infinite;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 14px 32px rgba(37,211,102,.6); }
.wa-float:focus-visible { outline: 3px solid var(--ambar, #f5a623); outline-offset: 3px; }
.wa-float svg { display: block; }
@keyframes wa-pulse {
  0% { box-shadow: 0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.45); }
  70% { box-shadow: 0 10px 26px rgba(37,211,102,.45), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 10px 26px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 760px) { .wa-float { width: 52px; height: 52px; right: 14px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .wa-float { animation: none; } }

/* Alto contraste: comercios y descuentos adheridos */
.a11y-contrast .comercio, .a11y-contrast .com-filtro, .a11y-contrast .comercio__logo { background: #111 !important; border-color: #fff !important; }
.a11y-contrast .comercio__rubro, .a11y-contrast .comercio__ini { background: #000 !important; color: #ffd24d !important; border-color: #ffd24d !important; }
.a11y-contrast .com-filtro.is-on, .a11y-contrast .comercio__desc { background: #ffd24d !important; color: #000 !important; border-color: #ffd24d !important; }

/* Alto contraste: reserva del salón */
.a11y-contrast .reserva { background: #111 !important; border-color: #fff !important; }
.a11y-contrast .form__msg--ok { background: #000 !important; color: #6bff8e !important; border-color: #6bff8e !important; }
.a11y-contrast .form__msg--err { background: #000 !important; color: #ff8a8a !important; border-color: #ff8a8a !important; }

/* Alto contraste: agenda de actividades */
.a11y-contrast .evento { background: #111 !important; border-color: #fff !important; }
.a11y-contrast .evento__fecha { background: #000 !important; border: 1px solid #ffd24d !important; }
.a11y-contrast .evento__dia, .a11y-contrast .evento__mes, .a11y-contrast .evento__meta { color: #ffd24d !important; }