/* high-contrast.css — Modo Alto Contraste (aditivo)
   Look & feel Mi Trámite Invalidez — última fase.

   TODAS las reglas de este archivo van scopeadas bajo
   [data-contrast="high"] (el atributo que app/(publico)/layout.jsx
   pone en <html> cuando el modo está activo). No hay ninguna regla
   fuera de ese scope: en modo normal este archivo no tiene ningún
   efecto.

   Qué NO está acá: todo lo que ya usa var(--facm-*) (bordes/
   placeholder de Contacto, color de error/resultado de Consulta
   Estado, títulos de Oficinas/FAQ, ícono hamburguesa, foco global)
   responde solo con la redefinición de tokens de facm-tokens.css — no
   hace falta repetirlo acá. Esto es exclusivamente para selectores con
   color LITERAL (hardcodeado) que los tokens no alcanzan a cubrir.

   Se carga como el ÚLTIMO <link> del <head> (ver layout.jsx) para
   ganar, por orden de carga, cualquier empate de especificidad con
   Flatsome/wp-inline.css/menu.css. Cada !important está documentado
   individualmente con la regla exacta que obliga a usarlo. */

/* ===================================================================
   Base: fondo y texto
   =================================================================== */
/* Vence html{background-color:#800080} (wp-inline.css, sin !important,
   selector compuesto ".absolute-footer, html" con especificidad de
   elemento) -- [data-contrast="high"] tiene más especificidad (cuenta
   como clase), no hace falta !important. */
[data-contrast="high"] {
  background: var(--facm-background);
}
/* Vence body{color:#777} (wp-inline.css, sin !important, selector de
   elemento) -- [data-contrast="high"] body tiene más especificidad
   (clase + elemento vs. solo elemento). Sin !important. Este es el
   override de mayor alcance: al fijar el color base de <body>, todo
   texto que NO tenga ya su propio color explícito (inline o de clase)
   hereda negro desde acá. */
[data-contrast="high"] body {
  background: var(--facm-background);
  color: var(--facm-text);
}

/* ===================================================================
   Enlaces: no depender solo del color para identificarlos (1.4.1)
   =================================================================== */
/* Se excluyen los que ya se ven como botón (no deberían llevar
   subrayado) -- .button/.btn (Flatsome/Bootstrap-clone) y .vd-btn
   (Valida DOC). */
[data-contrast="high"] a:not(.button):not(.btn):not(.vd-btn) {
  text-decoration: underline;
}

/* ===================================================================
   Foco visible: mismo color que ya toma el token --facm-focus (ver
   regla global en facm-tokens.css), pero más grueso en alto contraste.
   =================================================================== */
[data-contrast="high"] a:focus-visible,
[data-contrast="high"] button:focus-visible,
[data-contrast="high"] input:focus-visible,
[data-contrast="high"] select:focus-visible,
[data-contrast="high"] textarea:focus-visible,
[data-contrast="high"] [tabindex]:focus-visible {
  outline-width: 4px;
}

/* ===================================================================
   Header — nav desktop
   =================================================================== */
/* Vence .header-nav-main.nav > li > a { color: #800080 } (wp-inline.css,
   sin !important). [data-contrast="high"] .header-nav-main.nav > li > a
   tiene más especificidad (4 clases/atributos vs 2 clases + 2 tipo) --
   sin !important. */
[data-contrast="high"] .header-nav-main.nav > li > a {
  color: var(--facm-text);
}

/* ===================================================================
   Consulta Estado (Home) — .form-control
   Hallazgo pedido explícitamente: borde #ced4da (public/core/style/
   app.css) da ~1.49:1 sobre blanco en MODO NORMAL (no corregido en
   esta etapa, según instrucción -- documentado en el informe final).
   Acá solo se resuelve para alto contraste.
   Vence .form-control{border:1px solid #ced4da} (sin !important) por
   especificidad (2 clases vs 1). .form-control:focus{border-color:
   #80bdff;box-shadow:...} tampoco tiene !important -- mismo criterio. */
[data-contrast="high"] .form-control {
  border-color: var(--facm-border);
}
[data-contrast="high"] .form-control:focus {
  border-color: var(--facm-focus);
  box-shadow: 0 0 0 3px var(--facm-focus);
}

/* ===================================================================
   Botones legacy con color no tokenizado
   .btn-secondary-custom y .btn-login-mimic-primary ya usan
   var(--facm-primary) (corregidos en fases previas de esta feature) y
   responden solos a la redefinición de tokens -- no se repiten acá.
   .btn-danger sigue con rojo hardcodeado de Bootstrap-clone: se
   refuerza con un borde para que la acción "peligrosa" no dependa
   solo del relleno de color (1.4.1). Sin !important -- mayor
   especificidad alcanza. */
[data-contrast="high"] .btn-danger {
  border: 2px solid var(--facm-text);
}

/* ===================================================================
   Acordeones (Oficinas / Preguntas Frecuentes)
   =================================================================== */
/* Vence .toggle{opacity:.6} (flatsome.css) y el propio
   ".accordion .toggle{opacity:.85}" de este mismo proyecto (menu.css,
   fase anterior) -- [data-contrast="high"] .accordion .toggle tiene
   más especificidad que ambas. Sin !important. */
[data-contrast="high"] .accordion .toggle {
  opacity: 1;
  color: var(--facm-text);
}
/* Vence .accordion-title{border-top:1px solid #ddd} (flatsome.css,
   sin !important, ~1.3:1) por especificidad. */
[data-contrast="high"] .accordion-title {
  border-top-color: var(--facm-border);
}
[data-contrast="high"] .accordion-title.active {
  color: var(--facm-primary);
}
/* Hover adicional (título/borde/toggle/active/foco ya cubiertos
   arriba) -- distingue el estado "sobre el que paso el mouse" del
   inactivo/activo sin depender de un cambio de color en el texto
   (el título ya hereda negro de body{color:var(--facm-text)}). */
[data-contrast="high"] .accordion-title:hover {
  background-color: #f2eaf5;
}

/* ===================================================================
   AJUSTE FINAL — Home / Hero (content/index.html)
   Secciones #carousel-lg (desktop) y #carousel-sm (mobile): widget
   "Consulta Estado Trámite" sobre fondo lila decorativo. El fondo y
   los colores del título vienen como style="" inline (pegado desde
   Word) -- no hay otra forma de vencer un estilo inline sin tocar el
   HTML (fuera de alcance de esta etapa, solo CSS). !important
   documentado individualmente, único uso en esta sección.
   =================================================================== */
[data-contrast="high"] #carousel-lg,
[data-contrast="high"] #carousel-sm {
  background-color: #ffffff !important;
}
/* Título + subtítulo del hero ("Consulta Estado Trámite" / "Consulta
   el estado de tu trámite..."): fuerza negro sobre los <span
   style="color:..."> inline. */
[data-contrast="high"] #carousel-lg .h-large,
[data-contrast="high"] #carousel-lg .h-large *,
[data-contrast="high"] #carousel-sm .h-large,
[data-contrast="high"] #carousel-sm .h-large * {
  color: #000000 !important;
}
/* La palabra "Trámite" (span style="color:#d13456") no debe depender
   solo del coral para diferenciarse de "Consulta Estado": en alto
   contraste ya es negro como el resto (regla de arriba) -- se subraya
   para conservar una diferenciación perceptible sin apoyarse en el
   color (1.4.1). */
[data-contrast="high"] #carousel-lg .h-large span[style*="d13456"],
[data-contrast="high"] #carousel-sm .h-large span[style*="d13456"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* CTA del hero (login) ya usa var(--facm-primary) (fase previa de esta
   feature) y responde solo al cambio de tokens -- se refuerza con
   borde propio para que no dependa solo del relleno de color (1.4.1). */
[data-contrast="high"] .btn-login-mimic-primary {
  border: 2px solid var(--facm-text);
}
/* Flechas del carrusel del hero (Bootstrap-clone, public/core/style/
   app.css): ícono blanco pensado para ir sobre foto/overlay oscuro --
   invisible sobre el fondo blanco que fuerza este modo arriba. Mismo
   trazo SVG, solo cambia el fill a negro; no cambia tamaño/posición. */
[data-contrast="high"] .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.354a.5.5 0 0 1 0 .707L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}
[data-contrast="high"] .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.354a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* ===================================================================
   AJUSTE FINAL — Header / Navegación
   =================================================================== */
/* Refuerzo defensivo: el header ya es blanco en la práctica (Flatsome
   por defecto), se deja explícito para que Alto Contraste no dependa
   de ese comportamiento por defecto. */
[data-contrast="high"] #masthead {
  background: #ffffff;
}
/* Hover de los links del menú principal, distinto del reposo (ya
   negro + subrayado por las reglas de arriba) y del foco (outline
   4px). */
[data-contrast="high"] .header-nav-main.nav > li > a:hover {
  color: var(--facm-primary);
  text-decoration-thickness: 2px;
}
/* Botón "Alto contraste": el propio menu.css ya rellena el fondo con
   aria-pressed="true" (no depende SOLO del atributo ARIA para
   comunicar el estado -- ver comentario ahí), pero ese refuerzo es
   puramente de color. Acá se agrega un check (✓) antes del texto y un
   borde más grueso para que "está activo" no dependa solo del color
   (1.4.1 + 4.1.2), pedido explícito de esta etapa. */
/* Borde BLANCO (no negro): en este estado el relleno del botón ya es
   --facm-primary (#3a0e4d, oscuro) -- un borde negro quedaba en 1.35:1
   contra ese relleno (casi invisible, detectado al calcular el ratio
   antes de dar esto por terminado). Blanco sobre #3a0e4d da 15.56:1. */
[data-contrast="high"] .facm-contrast-btn[aria-pressed="true"] {
  border-width: 2.5px;
  border-color: #ffffff;
}
[data-contrast="high"] .facm-contrast-btn[aria-pressed="true"] .facm-contrast-btn__label::before {
  content: "\2713 ";
  font-weight: 900;
}

/* ===================================================================
   Resultado de Consulta Estado — Tanda visual controlada (look & feel).
   La tanda normal (public/core/style/app.css) ya deja el card y el
   botón "Imprimir PDF" sobre var(--facm-primary)/var(--facm-border), que
   SÍ responden a la redefinición de tokens de Alto Contraste -- pero
   ninguno de los dos tenía antes una regla propia acá, así que se
   agregan explícitas por el mismo criterio que el resto del archivo
   (fondo/texto/borde garantizados, no supuestos por herencia). Sin
   !important: el ID (#layerPersonalData_sm/_lg, #divPrintPDF_sm/_lg)
   combinado con [data-contrast="high"] ya alcanza la especificidad
   necesaria sobre la regla normal de app.css (también con ID, pero sin
   el atributo extra). */
[data-contrast="high"] #layerPersonalData_sm.card,
[data-contrast="high"] #layerPersonalData_lg.card {
  background-color: var(--facm-background, #ffffff);
  border: 2px solid var(--facm-border, #000000);
}
[data-contrast="high"] #layerPersonalData_sm .card-header,
[data-contrast="high"] #layerPersonalData_lg .card-header {
  background-color: var(--facm-primary, #3a0e4d);
  color: #ffffff;
}
[data-contrast="high"] #layerPersonalData_sm input,
[data-contrast="high"] #layerPersonalData_lg input {
  background-color: var(--facm-background, #ffffff);
  border: 1px solid var(--facm-border, #000000);
  color: var(--facm-text, #000000);
}
/* El botón "Imprimir PDF" ya queda sobre var(--facm-primary) (fondo
   #3a0e4d en Alto Contraste, texto blanco propio del botón, 15.56:1
   fill/texto) solo con la redefinición de tokens de facm-tokens.css --
   no hace falta repetir el color acá. No se agrega borde propio: a
   diferencia de "Alto contraste" (aria-pressed, que necesita señalizar
   un ESTADO sin depender solo del color), este botón ya distingue su
   límite del fondo blanco de la página por el fill oscuro (>3:1, 1.4.11
   ya cumplido) -- agregar un borde acá sería un segundo sistema sin
   necesidad real, lo que se pidió evitar. */