/**
 * Barra de accesibilidad Fondecom — NOVA
 *
 * Todo va contenido bajo .fac y con reset propio, para que ni el tema ni
 * Elementor la deformen, y para que ella tampoco afecte al resto del sitio.
 */

.fac{
  --fac-bg:#1B3049;
  --fac-act:#FFD558;
  --fac-txt:#FFFFFF;
  --fac-top:60%;
  --fac-ancho:212px;

  position:fixed;
  top:var(--fac-top);
  z-index:99990;
  display:flex;
  align-items:flex-start;
  font-family:inherit;
  line-height:1.4;
}
.fac--izq{left:0;flex-direction:row}
.fac--der{right:0;flex-direction:row-reverse}

/* ── Reset propio de los botones ── */
.fac button{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:0 !important;
  margin:0 !important;
  font:inherit;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-decoration:none !important;
  box-shadow:none !important;
  min-width:0 !important;
  min-height:0 !important;
  cursor:pointer;
  color:inherit;
}

/* ── Pestaña que abre la barra ── */
.fac__tab{
  width:46px !important;
  height:52px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center;
  background:var(--fac-bg) !important;
  color:var(--fac-txt) !important;
  transition:background-color .2s ease,width .2s ease;
}
.fac--izq .fac__tab{border-radius:0 10px 10px 0 !important}
.fac--der .fac__tab{border-radius:10px 0 0 10px !important}
.fac__tab:hover{background:#24405F !important}
.fac__tab svg{
  width:24px;height:24px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.fac__tab svg circle{fill:currentColor;stroke:none}

/* ── Panel desplegable ── */
.fac__panel{
  width:var(--fac-ancho);
  background:var(--fac-bg);
  color:var(--fac-txt);
  padding:16px 14px 14px;
  box-shadow:0 10px 34px rgba(0,0,0,.28);
  /* Plegado: se colapsa sin ocupar espacio ni ser enfocable */
  max-width:0;
  padding-left:0;
  padding-right:0;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:max-width .28s ease,opacity .22s ease,padding .28s ease,visibility .28s;
}
.fac--izq .fac__panel{border-radius:0 10px 10px 0}
.fac--der .fac__panel{border-radius:10px 0 0 10px}

.fac.is-open .fac__panel{
  max-width:var(--fac-ancho);
  padding-left:14px;
  padding-right:14px;
  opacity:1;
  visibility:visible;
}

.fac__titulo{
  margin:0 0 8px !important;
  padding:0 !important;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fac-txt);
  opacity:.65;
  white-space:nowrap;
}
.fac__titulo + .fac__titulo,
.fac__grupo + .fac__titulo{margin-top:16px !important}

/* ── Tamaño del texto ── */
.fac__grupo{display:flex;gap:8px}
.fac__btn{
  flex:1;
  height:44px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center;
  border-radius:8px !important;
  background:rgba(255,255,255,.12) !important;
  color:var(--fac-txt) !important;
  font-weight:800;
  line-height:1 !important;
  transition:background-color .18s ease,color .18s ease;
}
.fac__btn:hover{background:rgba(255,255,255,.24) !important}
.fac__btn[aria-pressed="true"]{
  background:var(--fac-act) !important;
  color:#111A24 !important;
}
.fac__btn--a1{font-size:13px}
.fac__btn--a2{font-size:16px}
.fac__btn--a3{font-size:20px}

/* ── Ayudas de lectura ── */
.fac__lista{display:flex;flex-direction:column;gap:6px}
.fac__opt{
  display:flex !important;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:44px !important;
  padding:8px 10px !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.08) !important;
  color:var(--fac-txt) !important;
  font-size:13px;
  font-weight:600;
  text-align:left;
  transition:background-color .18s ease,color .18s ease;
}
.fac__opt:hover{background:rgba(255,255,255,.2) !important}
.fac__opt[aria-pressed="true"]{
  background:var(--fac-act) !important;
  color:#111A24 !important;
}
.fac__opt svg{
  width:18px;height:18px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.fac__opt span{white-space:nowrap}

/* ── Restablecer ── */
.fac__reset{
  width:100%;
  margin-top:14px !important;
  padding:10px !important;
  border-radius:8px !important;
  background:transparent !important;
  color:var(--fac-txt) !important;
  font-size:12.5px;
  font-weight:600;
  opacity:.7;
  border:1px solid rgba(255,255,255,.25) !important;
  transition:opacity .18s ease,background-color .18s ease;
}
.fac__reset:hover{opacity:1;background:rgba(255,255,255,.1) !important}

/* ── Foco visible ── */
.fac :focus-visible{
  outline:3px solid var(--fac-act);
  outline-offset:2px;
  border-radius:8px;
}

/* ══════════ Efectos sobre el sitio ══════════
   Se aplican en <html> solo cuando el visitante los activa. */

/* Subrayar enlaces */
html.fac-enlaces a:not(.fac__tab):not(.fac__btn):not(.fac__opt){
  text-decoration:underline !important;
  text-underline-offset:.18em;
}

/* Detener animaciones */
html.fac-animacion *,
html.fac-animacion *::before,
html.fac-animacion *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}

/* Alto contraste — no toca la propia barra */
html.fac-contraste body{background:#000 !important}
html.fac-contraste body *:not(.fac):not(.fac *){
  background-color:transparent !important;
  color:#FFFFFF !important;
  border-color:#FFFFFF !important;
  text-shadow:none !important;
}
html.fac-contraste body a:not(.fac *){color:#FFE24D !important}
html.fac-contraste body h1:not(.fac *),
html.fac-contraste body h2:not(.fac *),
html.fac-contraste body h3:not(.fac *){color:#FFE24D !important}
html.fac-contraste body button:not(.fac *),
html.fac-contraste body input:not(.fac *),
html.fac-contraste body select:not(.fac *),
html.fac-contraste body textarea:not(.fac *){
  background:#000 !important;
  border:2px solid #FFFFFF !important;
}
html.fac-contraste img:not(.fac *){filter:grayscale(.25) contrast(1.15)}

/* ── Móvil: más compacta ── */
@media (max-width:768px){
  .fac{--fac-ancho:184px}
  .fac__tab{width:40px !important;height:46px !important}
  .fac__tab svg{width:21px;height:21px}
  .fac__opt span{white-space:normal}
}

/* Impresión: no debe salir */
@media print{ .fac{display:none !important} }

@media (prefers-reduced-motion:reduce){
  .fac__panel,.fac__tab,.fac__btn,.fac__opt{transition-duration:.01ms !important}
}
