/* ============================================================================
   GrupoMedic Ortopedia — Accesibilidad WCAG 2.1 AA
   website_id = 2 (ortopedia.grupomedic.es) — NO afecta a grupomedic.es (web 1).
   Cargado desde el footer COW 4354 (web2-only) como <link>.
   Añadido: 2026-07-22.  Público objetivo: personas mayores / visión reducida.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) CONTRASTE DE COLOR (WCAG 1.4.3, texto normal >= 4.5:1)
   --------------------------------------------------------------------------- */

/* "Invitado" y textos gris #808080 del widget de cuenta en el HEADER.
   Se limita a <header> para NO tocar los nombres de producto (viven en main). */
#wrapwrap > header .text-truncate,
#wrapwrap > header .tp-account-info-sidebar-content,
#wrapwrap > header .tp-account-info-sidebar-content .text-truncate {
  color: #445249 !important;   /* ~6.8:1 sobre blanco */
}

/* Verde de marca #509875 usado como TEXTO (solo 3.45:1) -> verde accesible.
   No toca fondos ni botones (que llevan texto oscuro), solo texto verde. */
.text-o-color-1,
font.text-o-color-1,
span.text-o-color-1 {
  color: #2f6a4c !important;   /* ~6.4:1 sobre blanco */
}

/* Titulares verdes del footer (h5 sin font wrapper). Los enlaces h6 ya son
   #2d5a3f (>=7:1), no se tocan. */
#footer h5,
#footer .h5 {
  color: #21402f !important;   /* ~9:1 */
}

/* ---------------------------------------------------------------------------
   2) FOCO DE TECLADO VISIBLE (WCAG 2.4.7)
   Halo doble (aro oscuro + halo lima) para que se vea sobre fondo claro,
   verde o lima. !important para vencer cualquier `outline:none` del tema.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.tp-action-icon:focus-visible,
.owl-prev:focus-visible,
.owl-next:focus-visible,
.accordion-button:focus-visible,
.s_social_media a:focus-visible,
.js_subscribe_btn:focus-visible,
.gm-hero-cta:focus-visible,
.gm-hero-dot:focus-visible {
  outline: 3px solid #14231c !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px #c5f06f !important;
  border-radius: 4px;
}

/* Fallback :focus (navegadores/AT sin :focus-visible) — sin box-shadow para no
   molestar en clic de ratón donde el navegador sí distingue. */
a:focus,
button:focus,
.tp-action-icon:focus,
.owl-prev:focus,
.owl-next:focus {
  outline: 3px solid #14231c;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   3) TARGETS TÁCTILES >= 44x44 px (WCAG 2.5.8 / público mayor)
   Solo iconos-botón sueltos con hueco alrededor. NO se tocan los iconos
   apilados de las tarjetas de producto para no romper la maqueta.
   --------------------------------------------------------------------------- */
.tp-account-info-sidebar-action,
.s_social_media a,
.owl-prev,
.owl-next,
.breadcrumb-item > a,
#wrapwrap > header .navbar-toggler,
.js_subscribe_btn,
.o_wsale_products_categories_list .accordion-button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* El botón +/- de cantidad y el input, cómodos para dedos mayores */
.css_quantity .btn,
input[name="add_qty"] {
  min-height: 44px;
}
input[name="add_qty"] {
  min-width: 48px;
}

/* ---------------------------------------------------------------------------
   4) ZOOM / LEGIBILIDAD — que aguante 200% sin recortar texto.
   Evita truncados que ocultan información con la fuente ampliada.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Etiquetas de categoría en la tira de tienda: que no se corten con zoom */
  .o_wsale_products_categories_list .nav-link { white-space: normal; }
}

/* ---------------------------------------------------------------------------
   5) MOVIMIENTO REDUCIDO (WCAG 2.3.3) — refuerzo. El hero ya lo respeta;
   aquí se cubre cualquier animación/transición del tema por si acaso.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}