/* =============================================================================
   ft-a11y.css — FlexigoTech · capa de accesibilidad          10-09-2026
   -----------------------------------------------------------------------------
   Hoja NUEVA. No sustituye ni reescribe styles.css, blog.css ni ft-2026.css:
   se enlaza SIEMPRE la ULTIMA de todas, para poder corregir sin subir la
   especificidad mas de lo imprescindible.

   Que arregla y por que (todo comprobado en navegador contra 127.0.0.1:8181):

   01 · Enlace de salto al contenido           WCAG 2.4.1 (A)   — faltaba en 602 pag.
   02 · Foco visible universal                 WCAG 2.4.7 (AA)  — styles.css:883 lo
        apagaba en TODOS los campos de formulario con outline:none y lo sustituia
        por una sombra morada al 10% (contraste 1,1:1, invisible).
   03 · Contraste de texto                     WCAG 1.4.3 (AA)  — --text-light
        #8D97AB daba 2,94:1 sobre blanco (y 2,56:1 en movil). Se OSCURECE el
        mismo tono; no se cambia de color ni se toca la paleta de marca.
   04 · Contraste de componentes               WCAG 1.4.11 (AA) — borde de los
        campos #CBD5E1 = 1,6:1 sobre blanco.
   05 · Tamano de los objetivos tactiles       WCAG 2.5.8 (AA)  — .lang-opt medía
        20x18 px; el minimo son 24x24.
   06 · Movimiento reducido de verdad          WCAG 2.3.3 / 2.2.2 — la neutralizacion
        global solo estaba dentro de body.ft-home.
   07 · Control de pausa de la banda de logos  WCAG 2.2.2 (A).
   08 · Banner de cookies: foco visible y contraste de los botones.
   09 · Utilidades (.ft-sr-only) y ayuda de impresion.

   Ninguna regla de aqui cambia la maquetacion: solo color, contorno de foco,
   area minima de pulsacion y una fila de botones nueva en la banda de logos.
   ========================================================================== */


/* =============================================================================
   00 · TOKENS DE ACCESIBILIDAD
   ========================================================================== */
:root {
  /* Anillo de foco: morado de Odoo sobre halo blanco, para que se vea igual
     encima de fondo claro y encima de fondo oscuro. */
  --ft-a11y-ring:        #5B3C53;   /* 9,48:1 sobre blanco */
  --ft-a11y-ring-light:  #FFFFFF;
  --ft-a11y-ring-w:      3px;
  --ft-a11y-ring-off:    2px;

  /* Gris apagado accesible. Mismo tono azul-pizarra que el original, mas
     oscuro: 4,96:1 sobre blanco y 4,67:1 sobre el panel #F7F8FA. */
  --ft-a11y-muted:       #697080;

  /* Borde de control con 3:1 real sobre blanco. */
  --ft-a11y-control-line: #8B93A3;
}


/* =============================================================================
   01 · ENLACE DE SALTO AL CONTENIDO
   Primer elemento enfocable de cada pagina. Fuera de pantalla hasta que recibe
   el foco; entonces baja y se ve. No usa display:none ni visibility:hidden
   porque eso lo sacaria del orden de tabulacion.
   ========================================================================== */
.ft-skip {
  position: fixed;
  top: 0;
  left: 12px;
  z-index: 2147483001;          /* por encima del banner de cookies */
  transform: translateY(-140%);
  display: inline-block;
  padding: 12px 18px;
  min-height: 44px;
  background: #FFFFFF;
  color: #0C0D14;
  font: 700 15px/1.4 var(--ft-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  text-decoration: none;
  border: 2px solid var(--ft-a11y-ring);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: transform .14s ease;
}
.ft-skip:focus,
.ft-skip:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--ft-a11y-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ft-skip { transition: none; }
}

/* La portada ya traia su propio enlace de salto (.ft-h-skip), pero estilado
   como  body.ft-home .ft-h-skip: en cookies.html, cookies-en.html,
   soluciones.html y soluciones-en.html —que llevan el mismo marcado sin la
   clase ft-home— se pintaba como un enlace suelto a la vista, arriba del todo.
   Aqui se le da el mismo comportamiento sin depender de la clase del body. */
.ft-h-skip {
  position: fixed;
  left: 12px;
  top: 0;
  z-index: 2147483001;
  transform: translateY(-140%);
  display: inline-block;
  padding: 12px 18px;
  min-height: 44px;
  background: #FFFFFF;
  color: #0C0D14;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid var(--ft-a11y-ring);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.ft-h-skip:focus,
.ft-h-skip:focus-visible {
  transform: translateY(0);
  top: 0;
  outline: 3px solid var(--ft-a11y-ring);
  outline-offset: 2px;
}

/* El destino del salto no debe quedar tapado por la cabecera fija, y al
   recibir el foco por programa no debe pintar un anillo raro. */
[id="ft-main"] { scroll-margin-top: calc(var(--ft-header-h, 72px) + 12px); }
[id="ft-main"]:focus { outline: none; }


/* =============================================================================
   02 · FOCO VISIBLE UNIVERSAL
   El sitio solo tenia :focus-visible dentro de body.ft-home y de unos pocos
   contenedores (.ft-sec, .ft-hero, #header, .footer). En el resto se quedaba el
   contorno del navegador, que styles.css apagaba en todos los campos.
   ========================================================================== */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]):focus-visible {
  outline: var(--ft-a11y-ring-w) solid var(--ft-a11y-ring);
  outline-offset: var(--ft-a11y-ring-off);
  border-radius: 3px;
  box-shadow: 0 0 0 calc(var(--ft-a11y-ring-w) + var(--ft-a11y-ring-off)) var(--ft-a11y-ring-light);
}

/* Sobre fondo oscuro el anillo morado se pierde: ahi se invierte. */
.footer :where(a[href], button, input, select, textarea, summary):focus-visible,
.ft-cierre :where(a[href], button):focus-visible,
.ft-dark :where(a[href], button):focus-visible,
#ft-cc :where(a[href], button):focus-visible {
  outline-color: #FFFFFF;
  box-shadow: 0 0 0 calc(var(--ft-a11y-ring-w) + var(--ft-a11y-ring-off)) rgba(0, 0, 0, .55);
}

/* styles.css:883 apagaba el contorno de TODOS los campos de formulario y lo
   sustituia por box-shadow rgba(108,71,255,.10) — 1,1:1, no se ve. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.quick-form input:focus,
.quick-form select:focus,
.quick-form textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--ft-a11y-ring-w) solid var(--ft-a11y-ring) !important;
  outline-offset: 1px !important;
}


/* =============================================================================
   03 · CONTRASTE DE TEXTO (WCAG 1.4.3 AA)
   Se oscurece el MISMO tono. No se introduce ningun color nuevo de marca.
       #8D97AB  2,94:1  ->  #697080  4,96:1
       #94A3B8  2,56:1  ->  #697080  4,96:1   (bloque movil de styles.css)
       #79808F  3,96:1  ->  #697080  4,96:1
   ========================================================================== */
:root {
  /* !important porque 200 y pico paginas vuelven a declarar --text-light
     (#64748B o #94A3B8) dentro de un <style> que va en el <body>, y un estilo
     del body gana a cualquier hoja del <head> por orden. Comprobado en
     modules.html: sin el !important seguia saliendo 4,34:1. */
  --text-light:        #697080 !important;
  --color-text-light:  #697080 !important;
  --ft-muted:          #697080 !important;
  --light:             #697080 !important;
  --success:           #137E39 !important;
  --module-accent:     #137E39 !important;
  --orange:            #C2410C !important;
}

/* styles.css redefine la paleta entera dentro de @media (max-width:768px):
   sin esto, en movil vuelven los 2,56:1. */
@media (max-width: 768px) {
  :root {
    --color-text-light: #697080;
    --color-gold:       #8F5E10;
    --color-teal:       #0F766E;
  }
}

/* La portada define --ft-h-faint: #6A7284 y el comentario de ft-2026.css lo da
   por bueno «sobre bg y sobre bg-1». Pero se usa tambien sobre --ft-h-bg-2
   (#EEF1F6), el panel de dentro de las tarjetas, donde baja a 4,26:1 (medido en
   navegador: .ft-h-showbar-i, .ft-h-mono, .ft-h-more). Un punto mas oscuro y
   cumple en los tres fondos. */
body.ft-home { --ft-h-faint: #646B7C; }   /* 5,34 / 5,02 / 4,71 */

/* Verde y ambar como TEXTO. Como fondo (botones, barras) siguen igual: lo que
   cambia ahi es la tinta, mas abajo. */
.badge-gold,
.badge-teal,
.text-gold,
.text-teal,
.compat-badge,
.hero-metric-delta,
.compare-table .check,
.mod-hero-stat-value.ok,
.mod-hero-stat-value.warn {
  --gold: #8F5E10;
  --teal: #0F766E;
  --color-gold: #8F5E10;
  --color-teal: #0F766E;
}

/* Blanco sobre ambar daba 2,64:1 y blanco sobre verde 2,49:1. Se conserva el
   fondo de marca y se pone tinta oscura: 7,3:1 y 7,8:1. */
.btn-gold,
.btn-gold:hover,
.btn-gold:visited {
  color: #0C0D14;
}

/* Texto de ayuda / marcas de agua. */
::placeholder { color: var(--ft-a11y-muted); opacity: 1; }
.ft-form-control::placeholder { color: var(--ft-a11y-muted); opacity: 1; }

/* --- EL PIE LEGAL, QUE ERA EL PEOR CASO DE TODO EL SITIO ------------------
   styles.css:940-942 pinta .footer-bottom p y .footer-bottom-links a con
   --text-tertiary = rgba(241,243,249,.36): un blanco al 36 %, pensado para el
   pie OSCURO de la plantilla original. El pie de este sitio es BLANCO en las
   631 paginas (medido en navegador), asi que el aviso de copyright, el mapa
   del sitio y los enlaces a aviso legal / privacidad / cookies salian a
   1,11:1 — practicamente invisibles. Ademas de fallar 1.4.3, choca con la
   LSSI art. 10, que exige que esa informacion sea de acceso «facil y
   directo». El indice del sitio y la fila de enlaces legales llevaban ademas
   opacity .75 / .85 encima. */
.footer-bottom,
.footer-bottom p,
.footer-bottom a,
.footer-bottom-links a { color: var(--ft-a11y-muted); }
.footer-bottom-links a:hover,
.footer-bottom a:hover { color: var(--ft-ink, #0C0D14); }
/* Los enlaces de esta fila llevan style="color:inherit" en linea, y una regla
   en linea gana a cualquier hoja: por eso se le pone el color al CONTENEDOR,
   que es de donde heredan. */
.ft-site-index,
#ft-site-index,
.ft-legal-links,
#ft-legal-links,
.footer-bottom,
#ft-cc-fallback-row {
  opacity: 1;
  color: var(--ft-text, #505768);
}
.ft-site-index a,
.ft-legal-links a,
#ft-legal-links a,
#ft-cc-fallback-row a,
#ft-cc-fallback-row .ft-cc-link { color: var(--ft-text, #505768); }
.ft-site-index a:hover,
.ft-legal-links a:hover,
#ft-legal-links a:hover { color: var(--ft-ink, #0C0D14); }

/* 47 paginas (las herramientas sueltas y varias landings) llevan el pie con
   background:#0f172a en linea. Ahi la tinta tiene que ser CLARA: el color de
   arriba, pensado para el pie blanco de las otras 584, dejaba los enlaces
   legales en 2,47:1. #CBD5E1 sobre #0f172a = 12,0:1. */
.ft-pie-oscuro,
.ft-pie-oscuro .footer-bottom,
.ft-pie-oscuro .ft-site-index,
.ft-pie-oscuro #ft-site-index,
.ft-pie-oscuro .ft-legal-links,
.ft-pie-oscuro #ft-legal-links,
.ft-pie-oscuro #ft-cc-fallback-row { color: #CBD5E1; }
.ft-pie-oscuro a,
.ft-pie-oscuro .ft-cc-link { color: #CBD5E1; }
.ft-pie-oscuro a:hover { color: #FFFFFF; }
.ft-pie-oscuro :where(a[href], button):focus-visible {
  outline-color: #FFFFFF;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .55);
}


/* --- CASOS SUELTOS MEDIDOS EN NAVEGADOR ---------------------------------
   Todos comprobados uno a uno contra 127.0.0.1:8181; se conserva el tono y
   solo se mueve la luminosidad lo justo para llegar al minimo. */

/* 1) El logotipo de texto de las cinco herramientas sueltas (auditoria,
      calculadora-verifactu, checker-conector-odoo, plantillas-rrhh,
      selector-conector-marketplace, y sus -en). styles.css:280 pinta
      .logo-flexi de BLANCO porque en la plantilla original la cabecera era
      oscura; en estas paginas la cabecera es blanca al 97 %, asi que la
      palabra «Flexigo» era literalmente invisible (1:1) y «Tech» quedaba en
      2,02:1. En el resto del sitio el logotipo es un SVG y no le afecta. */
.logo-flexi { color: var(--ft-ink, #0C0D14); }
.logo-tech  { color: #B45309; }            /* mismo oro, 5,02:1 */

/* 2) Los botones principales de esas mismas herramientas: blanco sobre
      #3B82F6 = 3,68:1. Un azul mas profundo de la misma familia: 5,17:1. */
.aud-btn, .calc-btn, .ck-btn, .lm-btn, .sel-btn {
  background-color: #2563EB;
  color: #FFFFFF;
}
/* El «Atras» de la auditoria es el mismo azul pero como TEXTO sobre blanco. */
.aud-btn.ghost, .aud-btn.secondary, .aud-btn[data-ghost] {
  background-color: #FFFFFF;
  color: #1D4ED8;
  border: 1px solid #1D4ED8;
}

/* 3) Comentarios de los bloques de codigo: #475569 sobre #0F172A = 2,36:1.
      Aqui hay que ACLARAR, no oscurecer. */
.code-block .cm, pre .cm, code .cm { color: #8896AC; }

/* 4) partners.html pinta los numeros gigantes de paso con
      color:var(--border-light) —#E2E8F0 sobre #F8FAFC, 1,18:1—. Se corrige en
      la propia pagina, no aqui: .step-num tambien existe en about.html y en
      modules/*, donde es texto BLANCO dentro de un circulo azul y tocarlo
      global lo rompia (comprobado en navegador). */

/* 5) Boton de WhatsApp: blanco sobre el verde de marca #25D366 = 1,98:1.
      Se oscurece el verde manteniendo el tono. */
a[href*="wa.me"], a[href*="api.whatsapp.com"] { background-color: #0F8043 !important; color: #FFFFFF !important; }

/* 6) modules.html: el enlace «Tambien en el App Store de Odoo» iba en
      #94A3B8 sobre blanco (2,56:1). */
.fgt-as, a.fgt-as { color: var(--ft-a11y-muted); }

/* 7) --success: 16 paginas lo declaran como #16A34A y lo usan como TINTA
      («Con Odoo 19 — Control total»), 3,30:1 sobre blanco. Mismo verde, un
      punto mas oscuro: 5,16:1. Como fondo (el punto de .badge2-dot) no
      cambia nada perceptible. */

/* 8) services.html: .trio-link pide color:var(--primary-blue) y esa variable
      NO esta declarada en esa pagina (si en otras 40). Una var() invalida sin
      respaldo hace que la propiedad herede: el enlace «Ver todos los modulos
      disponibles» salia BLANCO sobre un panel azul palido (#EFF6FF), 1,09:1.
      Con el respaldo, donde la variable existe sigue mandando ella. */
.trio-link { color: var(--primary-blue, #1D4ED8); }


/* =============================================================================
   04 · CONTRASTE DE COMPONENTES (WCAG 1.4.11 AA)
   El borde de un campo es lo unico que dice donde hay que escribir: necesita
   3:1 contra el fondo. #CBD5E1 daba 1,6:1.
   ========================================================================== */
.ft-form-control,
.form-group input,
.form-group select,
.form-group textarea,
.quick-form input,
.quick-form select,
.quick-form textarea {
  border-color: var(--ft-a11y-control-line);
}
.ft-form-check input[type="checkbox"],
.ft-form-check input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ft-accent, #714B67);
}


/* =============================================================================
   05 · OBJETIVOS TACTILES (WCAG 2.5.8 AA — minimo 24x24 CSS px)
   No se cambia el tamano visible de nada: se agranda el AREA PULSABLE con un
   pseudo-elemento centrado, que es invisible y no mueve la maquetacion.
   ========================================================================== */
#header .lang-opt,
.lang-opt,
.cw-close,
.mobile-toggle,
.ft-cc-link,
.ftb-ctrl {
  position: relative;
}
#header .lang-opt::after,
.lang-opt::after,
.cw-close::after,
.mobile-toggle::after,
.ft-cc-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 24px);
  height: max(100%, 24px);
  min-width: 24px;
  min-height: 24px;
  transform: translate(-50%, -50%);
}
/* El selector de idioma es el control mas pequeno del sitio: ademas del area,
   se le sube el tipo de 10/11 px a 12 px, que sigue cabiendo en la cabecera. */
#header .lang-opt,
.lang-opt {
  font-size: 12px !important;
  padding: 6px 9px !important;
  min-height: 24px;
}
.mobile-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

/* Casillas y radios. En .ft-form-check (contact.html) miden 18x18, pero
   llevan <label for> asociado, asi que el area que activa el control es la
   casilla MAS la etiqueta: el objetivo real supera de largo los 24 px. En los
   bloques de consentimiento nuevos se dibuja la casilla ya a 24 px. */
.ft-rgpd input[type="checkbox"],
.fg-rgpd input[type="checkbox"] { width: 24px; height: 24px; }

/* Fila de enlaces legales del pie: 21 px de alto. No estan dentro de una frase,
   asi que no les vale la excepcion «en linea» de 2.5.8. */
.ft-legal-links a,
#ft-legal-links a,
.ft-site-index a,
.footer-bottom-links a,
#ft-cc-fallback-row a,
#ft-cc-fallback-row .ft-cc-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* El bloque del consentimiento RGPD: la casilla arriba, el texto al lado, y el
   conjunto pulsable. Se declara aqui porque el marcado es nuevo. */
.ft-rgpd {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0;
  font-size: 13px;
  line-height: 1.5;
}
.ft-rgpd input[type="checkbox"] { flex: 0 0 auto; margin-top: 0; }
.ft-rgpd label { font-weight: 400; color: var(--ft-text, #505768); }
.ft-rgpd a { color: var(--ft-accent, #714B67); text-decoration: underline; }


/* =============================================================================
   06 · MOVIMIENTO REDUCIDO (WCAG 2.3.3)
   La neutralizacion global vivia dentro de body.ft-home, asi que en las otras
   630 paginas seguian corriendo transiciones y animaciones.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
  .marquee-wrap,
  .ftb-track { animation: none !important; }
}


/* =============================================================================
   07 · BANDA DE LOGOS: BOTON DE PAUSA (WCAG 2.2.2 A)
   La banda se movia sola y solo se paraba pasando el raton por encima; el
   propio texto de la pagina lo decia ("pasa el raton"), que es justo lo que no
   sirve con teclado ni en pantalla tactil.
   ========================================================================== */
.ftb-ctrls {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.ftb-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 16px;
  font: 600 13px/1.2 var(--ft-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  color: var(--ft-ink, #0C0D14);
  background: #FFFFFF;
  border: 1px solid var(--ft-a11y-control-line);
  border-radius: 999px;
  cursor: pointer;
}
.ftb-ctrl:hover { background: var(--ft-panel, #F7F8FA); }
.ftb-ctrl svg { width: 11px; height: 11px; fill: currentColor; }
.ftb-ctrl .ftb-ic-play { display: none; }
.ftb-ctrl[aria-pressed="true"] .ftb-ic-play { display: inline; }
.ftb-ctrl[aria-pressed="true"] .ftb-ic-pause { display: none; }
/* Cuando el visitante pide parar, se para de verdad. */
body.ft-home .ftb-band.is-parada .ftb-track { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .ftb-ctrls { display: none; }   /* ya no hay nada que pausar */
}


/* =============================================================================
   08 · BANNER DE COOKIES
   El banner se pinta desde cookie-consent.js con un <style> inyectado que no
   trae ni un solo estado de foco. Sobre #0f172a el contorno por defecto del
   navegador es casi invisible.
   ========================================================================== */
#ft-cc button:focus-visible,
#ft-cc a:focus-visible {
  outline: 3px solid #FFFFFF !important;
  outline-offset: 2px !important;
}
#ft-cc button { min-height: 44px; }
#ft-cc .ft-rej { background: #475569 !important; color: #FFFFFF !important; }
#ft-cc a { color: #C7D2FE !important; }
/* Boton "Cookies" del pie: area pulsable de 24 px y foco visible. */
.ft-cc-link { display: inline-block; min-height: 24px; line-height: 24px; }


/* =============================================================================
   09 · UTILIDADES
   ========================================================================== */
/* Texto solo para lectores de pantalla. ft-2026.css ya trae .ft-sr-only; se
   repite aqui porque 11 paginas no cargan esa hoja. */
.ft-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Mensajes de error de formulario: rojo accesible y visible sin depender solo
   del color (lleva ademas el icono y el texto). */
.form-error,
.ft-form-error,
[role="alert"].form-error { color: #B4232A; }

@media print {
  .ft-skip, .ftb-ctrls, #ft-cc { display: none !important; }
}