/* ===================================================================
   ACCESIBILIDAD VISUAL  ·  alquipistas
   -------------------------------------------------------------------
   Dos partes bien separadas.

   1. BASE. Se aplica siempre, a todo el mundo. Son los mínimos que pide
      la norma y que no cambian el aspecto del sitio: que se vea dónde
      está el foco al ir con el teclado, que los botones tengan un
      tamaño mínimo para poder pulsarlos, y que nada dependa solo del
      color para entenderse.

   2. PERFILES. Solo cuando la persona elige uno en el botón de las
      gafas. El JavaScript le pone al <body> la clase `a11y-low-vision`
      o `a11y-color-blind` y a partir de ahí manda lo de abajo.

   Sin perfil elegido, el sitio se ve igual que siempre salvo por los
   mínimos de la parte 1.
   =================================================================== */


/* ===================================================================
   1. BASE  ·  SIEMPRE ACTIVO
   =================================================================== */

/* --- Foco visible ---------------------------------------------------
   Sin esto, quien navega con el tabulador no sabe dónde está. Se usa
   :focus-visible para que NO salga el recuadro al pulsar con el ratón,
   solo al llegar con el teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
  outline: 3px solid #1156a5 !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}

/* Navegadores viejos que no entienden :focus-visible. */
a:focus,
button:focus,
.btn:focus {
  outline-color: #1156a5;
}

/* --- Tamaño mínimo de pulsación -------------------------------------
   La norma pide una zona de al menos 44 por 44 puntos. Muchos botones
   del sitio se quedaban por debajo y en un móvil se fallaba el toque. */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.35;
}

/* Los pequeños de dentro de las tablas no se estiran tanto, pero sí lo
   suficiente para no fallar el toque. */
.btn.btn-sm,
.btn.btn-xs {
  min-height: 36px;
  padding-top: 7px;
  padding-bottom: 7px;
}

/* Un botón que solo lleva un icono tiene que ser cuadrado, no una raya. */
.btn > i:only-child,
button > i:only-child { min-width: 24px; display: inline-block; }

/* Campos de formulario a la misma altura, que van con los botones. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
.form-control {
  min-height: 44px;
}

/* --- Contraste ------------------------------------------------------
   Los grises claros sobre blanco no llegan al mínimo exigido. Se
   oscurecen lo justo. Los colores de los botones NO se tocan: muchos
   llevan `btn-default` y encima su propia clase con el color de la
   marca, así que repintarlos por clase se cargaba justo los botones
   principales, como el Entrar de la portada. */
.text-muted,
.help-block,
small.text-muted { color: #5b6670 !important; }

/* --- El color nunca solo (WCAG 1.4.1) --------------------------------
   Un aviso que solo se distingue por ser rojo o verde no lo distingue
   quien no separa esos colores.

   Esto va en la BASE y no en el perfil de daltonismo a propósito. La
   norma pide que la pantalla NORMAL no dependa del color, no que haya
   un modo especial que hay que buscar y activar. Quien lo necesita
   muchas veces ni sabe que lo necesita. */
.alert {
  border-left: 6px solid rgba(0, 0, 0, .25);
  padding-left: 14px;
}

/* Un símbolo delante de cada aviso, para entenderlo sin ver el color.
   Va con aria-hidden implícito: el contenido generado por CSS no
   sustituye al texto, solo lo acompaña. */
.alert-success::before { content: "\2713"; font-weight: 700; margin-right: 8px; }
.alert-danger::before  { content: "\2715"; font-weight: 700; margin-right: 8px; }
.alert-warning::before { content: "\26A0"; font-weight: 700; margin-right: 8px; }
.alert-info::before    { content: "\2139"; font-weight: 700; margin-right: 8px; }

/* --- Saltar al contenido --------------------------------------------
   Enlace invisible que aparece al pulsar el tabulador nada más entrar,
   para no tener que recorrer el menú entero en cada pantalla. */
.a11y-saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 18px;
  background: #0b3c5d;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.a11y-saltar:focus {
  left: 10px;
  top: 10px;
  color: #fff;
}


/* ===================================================================
   2. EL BOTÓN DE LAS GAFAS Y SU VENTANA
   =================================================================== */

/* A la izquierda. La derecha es para el boton de Alqui, el asistente. */
.a11y-fab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 99998;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #0b3c5d;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  cursor: pointer;
}

.a11y-fab:hover,
.a11y-fab:focus { background: #10527d; color: #ffffff; }

.a11y-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 20, 28, .62);
}

.a11y-modal.is-open { display: flex; }

.a11y-dialog {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.a11y-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.a11y-title {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: #10202b;
}

.a11y-close {
  border: 0;
  background: none;
  font-size: 30px;
  line-height: 1;
  color: #5b6670;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

.a11y-sub {
  margin: 6px 0 16px 0;
  font-size: 15px;
  color: #4a5560;
}

.a11y-options { display: grid; gap: 10px; }

.a11y-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 2px solid #d8dee4;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
}

.a11y-option:hover { border-color: #9fb0bd; }

.a11y-option.is-active {
  border-color: #0b3c5d;
  background: #eef4f9;
}

.a11y-option.is-active .a11y-opt-title::after {
  content: " ✓";
  color: #0b3c5d;
}

.a11y-opt-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #10202b;
}

.a11y-opt-desc {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  color: #4a5560;
}

/* Barra de tamaño, solo sale con el perfil de baja visión. */
.a11y-zoombar {
  position: fixed;
  left: 18px;
  bottom: 86px;
  z-index: 99998;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: #0b3c5d;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

.a11y-zoombar.is-visible { display: flex; }

.a11y-zoom-btn {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.a11y-zoom-btn:hover { background: rgba(255, 255, 255, .26); }

.a11y-zoom-nivel {
  min-width: 54px;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}


/* ===================================================================
   3. PERFIL BAJA VISIÓN
   El tamaño lo pone el JavaScript ampliando la página. Aquí va todo
   lo demás: contraste, foco, enlaces y quitar lo que estorba.
   =================================================================== */

body.a11y-low-vision {
  background: #ffffff !important;
  color: #10202b !important;
}

/* Ojo: no se puede poner fondo blanco a `.container` ni a `section`. La
   cabecera lleva uno dentro, y al pintarlo de blanco tapaba su fondo
   oscuro y el titular, que es blanco, se quedaba invisible. */

/* Las imágenes de fondo de la cabecera dejan el texto encima ilegible. */
body.a11y-low-vision header,
body.a11y-low-vision .public-login-header,
body.a11y-low-vision .user-header {
  background-image: none !important;
  background-color: #0b3c5d !important;
}

body.a11y-low-vision header h1,
body.a11y-low-vision header p,
body.a11y-low-vision header span { color: #ffffff !important; }

/* El logo es azul oscuro sobre transparente, y con la cabecera en azul
   oscuro se quedaba escondido. Se le pone su plaquita blanca. */
body.a11y-low-vision header .navbar-brand.logo-nav {
  background: #ffffff !important;
  border-radius: 8px;
  padding: 8px 14px !important;
  display: inline-block;
}

/* Texto siempre oscuro sobre claro, sin grises apagados. */
body.a11y-low-vision p,
body.a11y-low-vision li,
body.a11y-low-vision td,
body.a11y-low-vision th,
body.a11y-low-vision label,
body.a11y-low-vision h1,
body.a11y-low-vision h2,
body.a11y-low-vision h3,
body.a11y-low-vision h4,
body.a11y-low-vision h5,
body.a11y-low-vision .text-muted,
body.a11y-low-vision .help-block { color: #10202b !important; }

/* Los enlaces se distinguen por el subrayado, no solo por el color. */
body.a11y-low-vision .body a,
body.a11y-low-vision .content a {
  color: #0a4c8a !important;
  text-decoration: underline !important;
}

body.a11y-low-vision .body a.btn,
body.a11y-low-vision .content a.btn { text-decoration: none !important; }

/* Botones más grandes y con la letra más gruesa. El color se deja como
   está: es el de la marca y ya contrasta. */
body.a11y-low-vision .btn,
body.a11y-low-vision button {
  font-weight: 700 !important;
  min-height: 52px;
}

/* Campos grandes y con filo marcado. */
body.a11y-low-vision input,
body.a11y-low-vision select,
body.a11y-low-vision textarea,
body.a11y-low-vision .form-control {
  min-height: 52px !important;
  border: 2px solid #10202b !important;
  background: #ffffff !important;
  color: #10202b !important;
}

/* Foco mucho más marcado. */
body.a11y-low-vision a:focus,
body.a11y-low-vision button:focus,
body.a11y-low-vision input:focus,
body.a11y-low-vision select:focus,
body.a11y-low-vision .btn:focus {
  outline: 4px solid #c25e00 !important;
  outline-offset: 3px !important;
}

/* Tablas con línea, que sin ella se pierde la fila. */
body.a11y-low-vision table td,
body.a11y-low-vision table th {
  border: 1px solid #6d7982 !important;
  background: #ffffff !important;
}

/* Fuera lo decorativo: animaciones, sombras y capas de color encima. */
body.a11y-low-vision *,
body.a11y-low-vision *::before,
body.a11y-low-vision *::after {
  animation: none !important;
  transition: none !important;
  text-shadow: none !important;
}

body.a11y-low-vision .carousel,
body.a11y-low-vision .carrusel,
body.a11y-low-vision .parallax { background-image: none !important; }


/* ===================================================================
   4. PERFIL DALTONISMO
   -------------------------------------------------------------------
   Solo cambia la PALETA. Los símbolos de los avisos y todo lo que hace
   que un estado se entienda sin color están en la BASE, activos para
   todo el mundo, que es lo que pide WCAG 1.4.1.

   Se sale del par rojo y verde, el que de verdad se confunde, y se pasa
   a azul, naranja y amarillo. No basta con que sean colores distintos:
   se eligen además con claridades muy separadas, porque quien no
   distingue el tono sí distingue si algo es más claro o más oscuro.

   Contraste medido de cada pareja (WCAG 1.4.3 pide 4,5 para texto):
     blanco sobre azul   #0a5ea8 .... 6,6
     blanco sobre naranja #b35a00 ... 4,8
     marrón sobre amarillo #ffd54f .. 9,7
     texto de aviso sobre su fondo ... por encima de 7 en los tres
   =================================================================== */

/* Correcto y aceptar, en azul. */
body.a11y-color-blind .btn-success {
  background: #0a5ea8 !important;
  border-color: #084a85 !important;
  color: #ffffff !important;
}

/* Peligro y borrar, en naranja oscuro. */
body.a11y-color-blind .btn-danger {
  background: #b35a00 !important;
  border-color: #8c4700 !important;
  color: #ffffff !important;
}

/* Aviso, en amarillo claro con texto oscuro. Va aparte del naranja a
   propósito: antes los dos salían del mismo color y entonces avisar y
   borrar se veían igual, que es justo lo que hay que evitar. */
body.a11y-color-blind .btn-warning {
  background: #ffd54f !important;
  border-color: #d3a600 !important;
  color: #3a2c00 !important;
}

/* `btn-primary` NO se toca: es el color de la marca, no significa ni
   correcto ni error, y cambiarlo no ayuda a nadie. */

body.a11y-color-blind .alert-success,
body.a11y-color-blind .label-success {
  background: #e7f0f9 !important;
  border-color: #0a5ea8 !important;
  color: #0a3c6b !important;
}

body.a11y-color-blind .alert-danger,
body.a11y-color-blind .label-danger {
  background: #fdf1e4 !important;
  border-color: #b35a00 !important;
  color: #7a3d00 !important;
}

body.a11y-color-blind .alert-warning {
  background: #fff8e1 !important;
  border-color: #d3a600 !important;
  color: #4a3800 !important;
}

body.a11y-color-blind .text-danger  { color: #b35a00 !important; }
body.a11y-color-blind .text-success { color: #0a5ea8 !important; }

/* Los días cerrados del calendario ya se tachan, así que se entienden
   sin el color. Aquí solo se les cambia el rojo por el naranja para
   que no choque con el resto de la paleta. */
body.a11y-color-blind .flatpickr-day.space-closed-day,
body.a11y-color-blind .flatpickr-day.space-closed-day:hover {
  border-color: #e0b98a !important;
  color: #7a3d00 !important;
  background: #fdf1e4 !important;
}

body.a11y-color-blind .spaces-closed-legend span { background: #b35a00 !important; }

/* Las últimas plazas de un partido se marcaban solo poniendo el número
   en rojo. Se le añade negrita, que se ve sin distinguir el color. */
body.a11y-color-blind .prt-plazas.es-ultimas {
  color: #b35a00 !important;
  font-weight: 700 !important;
}

/* Las etiquetas de estado de entradas, bonos y monedero: verde para
   activa y rojo para anulada. La palabra ya dice cuál es, así que la
   norma se cumple, pero con daltonismo las dos se ven casi iguales.
   Pasan a la misma pareja azul y naranja que el resto del perfil. */
body.a11y-color-blind .entradas-status.is-active,
body.a11y-color-blind .entrada-detail-status.is-active,
body.a11y-color-blind .bonos-status.is-active,
body.a11y-color-blind .monedero-status.is-success {
  color: #0a3c6b !important;
  background: #e7f0f9 !important;
}

body.a11y-color-blind .entradas-status.is-cancelled,
body.a11y-color-blind .entrada-detail-status.is-cancelled,
body.a11y-color-blind .monedero-status.is-error {
  color: #7a3d00 !important;
  background: #fdf1e4 !important;
}

/* Los enlaces de anular, que van en rojo suelto. */
body.a11y-color-blind .entradas-cancel,
body.a11y-color-blind .historial-cancel,
body.a11y-color-blind .entrada-cancel-card > a {
  color: #7a3d00 !important;
  border-color: #e0b98a !important;
  background: #fdf1e4 !important;
}

/* El visto grande de "todo ha ido bien" de los eventos. */
body.a11y-color-blind .evt-ok-icon { color: #0a5ea8 !important; }

/* -------------------------------------------------------------------
   BARRIDO COMPLETO
   Un repaso de los CSS propios sacó 183 declaraciones verdes o rojas.
   La mayoría son decorativas -el verde #569e28 de la plantilla original
   sale 40 veces y no significa nada, es el color de los enlaces- y esas
   NO se tocan: repintarlas dejaría el sitio hecho un cuadro sin ayudar
   a nadie. Aquí van solo las que significan bien o mal.
   ------------------------------------------------------------------- */

/* Avisos y mensajes con fondo suave. */
body.a11y-color-blind .evt-alert-success,
body.a11y-color-blind .tenant-inline-message.is-success,
body.a11y-color-blind .tenant-alert-ok,
body.a11y-color-blind .entradas-alert.is-success,
body.a11y-color-blind .spaces-payment-ready,
body.a11y-color-blind .bonos-refund-card.is-success,
body.a11y-color-blind .wallet-result-card.is-success {
  color: #0a3c6b !important;
  border-color: #0a5ea8 !important;
  background: #e7f0f9 !important;
}

body.a11y-color-blind .evt-alert.danger,
body.a11y-color-blind .tenant-inline-message.is-error,
body.a11y-color-blind .tenant-alert-error,
body.a11y-color-blind .entradas-alert.is-error,
body.a11y-color-blind .entrada-cancelled,
body.a11y-color-blind .pool-alert.is-error,
body.a11y-color-blind .psce-error,
body.a11y-color-blind .pscm-error,
body.a11y-color-blind .spaces-error,
body.a11y-color-blind .bonos-refund-card.is-error,
body.a11y-color-blind .wallet-result-card,
body.a11y-color-blind .error_login:not(:empty) {
  color: #7a3d00 !important;
  border-color: #b35a00 !important;
  background: #fdf1e4 !important;
}

/* Texto suelto que solo cambia de color. */
body.a11y-color-blind .spaces-availability,
body.a11y-color-blind .spaces-grid span,
body.a11y-color-blind .evt-summary-confirmed,
body.a11y-color-blind .foto-file-status.is-selected,
body.a11y-color-blind .trn-partido-eq.es-ganador,
body.a11y-color-blind .trn-llave-lado.es-ganador,
body.a11y-color-blind .bonos-refund-card.is-success .bonos-refund-status,
body.a11y-color-blind .wallet-result-card.is-success .wallet-result-status {
  color: #0a5ea8 !important;
}

body.a11y-color-blind .foto-file-status.is-error,
body.a11y-color-blind .receipt-result-card.is-error,
body.a11y-color-blind .tenant-result-error .tenant-result-label,
body.a11y-color-blind .bonos-refund-card.is-error .bonos-refund-status,
body.a11y-color-blind .wallet-result-status {
  color: #b35a00 !important;
}

body.a11y-color-blind .receipt-result-card.is-success { color: #0a5ea8 !important; }

/* Elementos con relleno sólido: días de piscina, etiquetas de torneo y
   de partidos, y los botones de borrar propios del módulo. */
body.a11y-color-blind .pool-day.is-available,
body.a11y-color-blind .pool-day.is-available:hover,
body.a11y-color-blind .pool-day.is-available:focus,
body.a11y-color-blind .trn-badge-en_juego,
body.a11y-color-blind .prt-etiqueta.socio,
body.a11y-color-blind .prt-badge-completo {
  border-color: #084a85 !important;
  background: #0a5ea8 !important;
  color: #ffffff !important;
}

body.a11y-color-blind .pool-day.is-full,
body.a11y-color-blind .prt-badge-cancelado,
body.a11y-color-blind .evt-btn-danger,
body.a11y-color-blind .prt-btn-danger,
body.a11y-color-blind .prt-invit-quitar,
body.a11y-color-blind .prt-nuevos {
  border-color: #8c4700 !important;
  background: #b35a00 !important;
  color: #ffffff !important;
}


/* El titular "Accede ahora" tiene la altura puesta a cero en la
   plantilla: su texto se sale de la caja y a tamaño normal no se nota,
   pero ampliado se monta encima del formulario. */
body.a11y-low-vision .public-login-heading,
body.a11y-low-vision .public-login-heading h2 {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.25 !important;
  overflow: visible !important;
}

/* Ampliada la pagina, cualquier imagen con un ancho fijo se sale por la
   derecha. El logo de la portada mide 430 puntos escritos a mano. */
body.a11y-low-vision img {
  max-width: 100% !important;
  height: auto !important;
}


/* -------------------------------------------------------------------
   TEXTO SOLO PARA EL LECTOR DE PANTALLA
   Se oye pero no se ve. Sirve para poner titulos y avisos que le hacen
   falta a quien no ve la pantalla y que a los demas les sobran.
   No se usa `display:none` ni `visibility:hidden`, que esconderian el
   texto tambien del lector.
   ------------------------------------------------------------------- */
.a11y-solo-lector {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}