/* ============================================================
   UJP · Herramientas en todo el sitio · webproX · 24-oct-2026
   Accesibilidad y radio en el header, mini reproductor y botón único de mensaje.
   Las secciones 6 y 7 vienen tal cual de la portada (home-v3.css); los efectos de
   accesibilidad se generalizaron a todas las páginas. Lo encola wpx-herramientas-ujp.php.
   ============================================================ */

/* ─── 6 · FLOTANTES (versión elegida: B, 22-oct) ──────────────────────────────
   Un solo flotante permanente: el botón de MENSAJE abajo a la derecha, que
   despliega WhatsApp y el chat de Lupi. Los lanzadores originales (Chaty y
   Elfsight) quedan ocultos en todo el sitio; el chat se abre con el lanzador de
   Elfsight (no tiene API pública para abrirlo). Accesibilidad y radio van en el
   header (herramientas.js los mueve ahí, en todas las páginas); mientras la radio
   suena aparece un mini reproductor abajo a la izquierda.
   Botones de 48 px, contraste AA, teclado y área segura del iPhone. */
:root{
  --fl-btn:48px; --fl-gap:12px; --fl-edge:20px; --fl-base:23px;
  --fl-size:48px;   /* compat: lo usan reglas del footer */
  --fl-ring:#E6D4A8; --fl-shadow:0 10px 24px -10px rgba(26,8,14,.55), 0 2px 4px rgba(26,8,14,.18);
  --fl-a11y:#0B57D0; --fl-a11y-dk:#0842A0;
  /* color de la casa y avatar de Lupi: UJP por defecto; ISEHF los cambia (wpx-herramientas-isehf.php) */
  --herr-vino:#5E1626; --herr-vino-hover:#7A1C33; --herr-lupi:url("../v3/lupi/lupi-avatar-108.webp");
  --fl-sl:env(safe-area-inset-left,0px); --fl-sr:env(safe-area-inset-right,0px); --fl-sb:env(safe-area-inset-bottom,0px);
}

/* lanzadores de terceros: ocultos (siguen en la página para abrir el chat) */
/* el selector lleva :not(#…) para tener peso de id: el CSS de Chaty le gana a una clase sola */
html body:not(#wpx-sin-chaty) .chaty{ display:none !important; }
html body:not(#wpx-sin-lanzador) [class*="FloatingButton__FloatingButtonContainer"]{ visibility:hidden !important; pointer-events:none !important; }
/* el chat de Lupi se abre a la derecha, sobre el botón de mensaje (en celular ocupa la pantalla) */
@media (min-width:641px){
  html body:not(#wpx-panel-lupi) .es-floating-panel-container{
    left:auto !important; top:auto !important;
    right:calc(var(--fl-edge) + var(--fl-sr)) !important;
    bottom:calc(var(--fl-base) + var(--fl-btn) + var(--fl-gap) + var(--fl-sb)) !important;
    max-height:calc(100dvh - var(--fl-base) - var(--fl-btn) - var(--fl-gap) - 24px) !important;
  }
}

/* ── botón de MENSAJE ── */
.v3-msg{ position:fixed; z-index:9992; right:calc(var(--fl-edge) + var(--fl-sr)); bottom:calc(var(--fl-base) + var(--fl-sb)); font-family:var(--ujp-font-body,system-ui,sans-serif); }
.v3-msg__btn,.v3-msg__btn:hover,.v3-msg__btn:focus{
  width:var(--fl-btn); height:var(--fl-btn); padding:0; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; background:var(--herr-vino); color:#fff;
  box-shadow:0 0 0 2px var(--fl-ring), var(--fl-shadow); text-transform:none; letter-spacing:normal;
}
.v3-msg__btn:hover{ background:var(--herr-vino-hover); }
.v3-msg__btn:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--fl-ring), 0 0 0 5px var(--herr-vino), 0 0 0 7px #fff; }
.v3-msg__btn svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.v3-msg__btn .i-x{ display:none; }
.v3-msg.is-open .v3-msg__btn .i-msg{ display:none; }
.v3-msg.is-open .v3-msg__btn .i-x{ display:block; }
.v3-msg__menu{ position:absolute; right:0; bottom:calc(var(--fl-btn) + 10px); display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.v3-msg__menu[hidden]{ display:none !important; }
.v3-msg__item,.v3-msg__item:hover,.v3-msg__item:focus{
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:6px 18px 6px 6px; border-radius:999px; border:0; cursor:pointer;
  background:#fff; color:#1F2328 !important; text-decoration:none !important; white-space:nowrap;
  font:600 16px/1.2 var(--ujp-font-body,system-ui,sans-serif); text-transform:none; letter-spacing:normal;
  box-shadow:0 10px 26px -10px rgba(26,8,14,.45), 0 0 0 1px rgba(0,0,0,.06);
}
.v3-msg__item:hover{ background:#F3F4F6; }
.v3-msg__item[aria-busy="true"]{ cursor:progress; }
.v3-msg__item[aria-busy="true"] .v3-msg__ico--lupi{ animation:v3pulso 1s ease-in-out infinite alternate; }
@keyframes v3pulso{ to{ opacity:.45; } }
@media (prefers-reduced-motion:reduce){ .v3-msg__item[aria-busy="true"] .v3-msg__ico--lupi{ animation:none; } }
.v3-msg__item:focus-visible{ outline:3px solid var(--herr-vino); outline-offset:2px; }
.v3-msg__ico{ width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; }
.v3-msg__ico--wa{ background:#1A7F44; color:#fff; }                 /* blanco 5,0:1 */
.v3-msg__ico--wa svg{ width:20px; height:20px; fill:currentColor; }
.v3-msg__ico--lupi{ background:#E9EDF2 var(--herr-lupi) center / cover no-repeat; }   /* avatar propio: cara de frente centrada, 108 px = 3x */

/* ── accesibilidad y radio en el header ── */
.v3-a11y,.v3-radio{ font-family:var(--ujp-font-body,system-ui,sans-serif); }
/* hasta que home-v3.js los ubica, no se ven (sin JS tampoco: ver P3) */
.v3-a11y:not(.is-hdr){ visibility:hidden; }
.v3-hdr-tools{ display:flex; align-items:center; gap:8px; margin-left:auto; margin-right:10px; flex:none; }
.v3-hdr-tools .v3-a11y{ position:relative; }
.v3-hdr-tools + .wpxc-fab-wrap{ margin-left:0 !important; }
@media (min-width:861px){ .v3-hdr-tools{ margin-left:16px; margin-right:0; order:99; } }
.v3-hdr-radio,.v3-hdr-radio:hover,.v3-hdr-radio:focus{
  position:relative; width:var(--fl-btn); height:var(--fl-btn); padding:0; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; background:var(--herr-vino); color:#fff; text-transform:none; letter-spacing:normal;
}
.v3-hdr-radio:hover{ background:var(--herr-vino-hover); }
.v3-hdr-radio:focus-visible{ outline:3px solid var(--herr-vino); outline-offset:2px; }
.v3-hdr-radio svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.v3-hdr-radio .i-pause{ display:none; fill:currentColor; stroke:none; }
.v3-hdr-radio[aria-pressed="true"] .i-radio{ display:none; }
.v3-hdr-radio[aria-pressed="true"] .i-pause{ display:block; }
.v3-hdr-radio[aria-pressed="true"]::after{ content:""; position:absolute; top:3px; right:3px; width:10px; height:10px; border-radius:50%; background:#ff4d5e; box-shadow:0 0 0 2px #fff; }
/* mini reproductor (sólo mientras suena) */
.v3-radio{ position:fixed; z-index:9990; left:calc(var(--fl-edge) + var(--fl-sl)); bottom:calc(var(--fl-base) + var(--fl-sb));
  display:flex; align-items:center; gap:10px; height:auto; width:auto; max-width:calc(100vw - 2 * var(--fl-edge) - var(--fl-btn) - var(--fl-gap) - var(--fl-sl) - var(--fl-sr));
  padding:4px 16px 4px 4px; border-radius:999px; background:var(--herr-vino); box-shadow:0 0 0 2px var(--fl-ring), var(--fl-shadow); }
.v3-radio:not(.is-on){ display:none; }

/* RADIO · botón de play/pausa del mini reproductor */
.v3-radio button{ border:0; cursor:pointer; padding:0; display:grid; place-items:center; text-transform:none; letter-spacing:normal; }
.v3-radio .v3-radio__play,.v3-radio .v3-radio__play:hover,.v3-radio .v3-radio__play:focus{
  position:relative; width:40px; height:40px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.14); color:#FBF8F4; box-shadow:none;
}
.v3-radio .v3-radio__play:hover{ background:rgba(255,255,255,.24); }
.v3-radio .v3-radio__play:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.v3-radio__play svg{ width:22px; height:22px; fill:currentColor; }
.v3-radio__play .i-pause,.v3-radio__play .i-load{ display:none; }
.v3-radio.is-playing .v3-radio__play .i-play{ display:none; }
.v3-radio.is-playing .v3-radio__play .i-pause{ display:block; }
.v3-radio.is-loading .v3-radio__play .i-play,.v3-radio.is-loading .v3-radio__play .i-pause{ display:none; }
.v3-radio.is-loading .v3-radio__play .i-load{ display:block; fill:none; stroke:currentColor; stroke-width:2.4; stroke-dasharray:36 60; stroke-linecap:round; animation:v3spin 1s linear infinite; }
@keyframes v3spin{ to{ transform:rotate(360deg); } }
/* info del mini reproductor: nombre y qué suena */
.v3-radio__info{ display:flex; flex-direction:column; gap:2px; min-width:0; color:#FBF8F4; line-height:1.25; }
.v3-radio__name{ font-weight:700; font-size:15px; white-space:nowrap; }
.v3-radio__name small{ font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#E6D4A8; margin-left:4px; }
.v3-radio__now{ display:block; overflow:hidden; white-space:nowrap; font-size:13.5px; color:rgba(251,248,244,.85); }
.v3-radio__now-in{ display:inline-block; }
.v3-radio__now.is-long .v3-radio__now-in{ padding-left:100%; animation:v3marq 14s linear infinite; }
@keyframes v3marq{ to{ transform:translateX(-100%); } }

/* ─── 7 · ACCESIBILIDAD · botón azul (#0B57D0) y panel neutro ─────────────── */
.v3-a11y button{ padding:0; text-transform:none; letter-spacing:normal; }
.v3-a11y .v3-a11y__btn,.v3-a11y .v3-a11y__btn:focus{
  width:var(--fl-btn); height:var(--fl-btn); border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
  background:var(--fl-a11y); color:#fff; box-shadow:none;
}
.v3-a11y .v3-a11y__btn:hover,.v3-a11y .v3-a11y__btn[aria-expanded="true"]{ background:var(--fl-a11y-dk); color:#fff; }
.v3-a11y .v3-a11y__btn:focus-visible{ outline:0; box-shadow:0 0 0 2px #fff, 0 0 0 5px var(--fl-a11y), 0 0 0 7px #fff; }
.v3-a11y__btn svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.v3-a11y__btn svg circle{ fill:currentColor; stroke:none; }
/* rótulos de los íconos del header ("Accesibilidad", "Radio"): debajo, con
   mouse o con teclado (no al tocar) */
.v3-hdr-item{ position:relative; display:inline-flex; }
.v3-tip{
  position:absolute; right:0; top:calc(100% + 8px); transform:translateY(-6px);
  white-space:nowrap; padding:7px 12px; border-radius:12px; background:var(--fl-a11y-dk); color:#fff;
  font-size:15px; font-weight:600; box-shadow:0 8px 22px -10px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s, transform .2s, visibility .2s; z-index:2;
}
@media (hover:hover) and (pointer:fine){ .v3-a11y:hover .v3-tip,.v3-hdr-item:hover .v3-tip{ opacity:1; visibility:visible; transform:none; } }
.v3-a11y:has(.v3-a11y__btn:focus-visible) .v3-tip,.v3-hdr-item:has(:focus-visible) .v3-tip{ opacity:1; visibility:visible; transform:none; }
.v3-a11y:has(.v3-a11y__btn[aria-expanded="true"]) .v3-tip{ display:none; }
.v3-hdr-item .v3-tip{ background:var(--herr-vino); }   /* rótulo de la radio en su color (blanco 13:1) */
/* panel: baja desde el botón del header (posición fija calculada por home-v3.js).
   Nunca supera la pantalla. */
.v3-a11y__panel{
  position:fixed; top:var(--pt,80px); right:var(--pr,20px); z-index:10060;
  box-sizing:border-box;
  width:min(340px, calc(100vw - 2 * var(--fl-edge) - var(--fl-sl) - var(--fl-sr)));
  max-height:calc(100dvh - var(--pt,80px) - 16px);
  overflow-y:auto; overscroll-behavior:contain;
  background:#fff; color:#1F2328; border-radius:16px; padding:14px;
  border-top:4px solid var(--fl-a11y);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.08);
}

/* aire al final del footer: los flotantes no tapan el copyright (en todas las páginas) */
body .ujp-chrome .ch-bottom{ padding-bottom:calc(var(--fl-base) + var(--fl-btn) + 16px + var(--fl-sb)); }

/* alto contraste: también los flotantes y los del header */
html.a11y-contrast .v3-a11y .v3-a11y__btn,html.a11y-contrast .v3-radio .v3-radio__play,html.a11y-contrast .v3-msg__btn,html.a11y-contrast .v3-hdr-radio{ background:#000 !important; color:#FFE600 !important; box-shadow:0 0 0 3px #FFE600 !important; }

.v3-a11y__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; font-size:18px; color:var(--fl-a11y); }
.v3-a11y .v3-a11y__x,.v3-a11y .v3-a11y__x:focus{ border:0; background:none; font-size:28px; line-height:1; cursor:pointer; color:#1F2328; width:40px; height:40px; border-radius:8px; flex:none; }
.v3-a11y .v3-a11y__x:hover{ background:#F3F4F6; color:#1F2328; }
.v3-a11y__size{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px; padding:10px 12px; border-radius:12px; background:#F3F4F6; margin-bottom:10px; font-size:15px; font-weight:600; color:#1F2328; }
.v3-a11y__size div{ display:flex; align-items:center; gap:8px; }
.v3-a11y .v3-a11y__size button,.v3-a11y .v3-a11y__size button:focus{ width:44px; height:40px; border-radius:8px; border:1px solid #C9CED6; background:#fff; color:#1F2328; cursor:pointer; font-weight:700; font-size:15px; }
.v3-a11y .v3-a11y__size button:hover{ background:#E8F0FE; border-color:var(--fl-a11y); color:var(--fl-a11y-dk); }
.v3-a11y__size output{ min-width:46px; text-align:center; font-variant-numeric:tabular-nums; color:#1F2328; }
.v3-a11y__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.v3-a11y .v3-a11y__grid button,.v3-a11y .v3-a11y__grid button:focus{
  min-width:0; min-height:52px; padding:8px 10px; border-radius:10px; border:1px solid #C9CED6; background:#fff; color:#1F2328; cursor:pointer;
  font-size:14.5px; font-weight:600; text-align:left; line-height:1.25; white-space:normal; overflow-wrap:anywhere; hyphens:manual;
}
.v3-a11y .v3-a11y__grid button:hover{ background:#F3F4F6; color:#1F2328; }
.v3-a11y .v3-a11y__grid button[aria-pressed="true"],
.v3-a11y .v3-a11y__grid button[aria-pressed="true"]:hover,
.v3-a11y .v3-a11y__grid button[aria-pressed="true"]:focus{ background:var(--fl-a11y); border-color:var(--fl-a11y); color:#fff; }
.v3-a11y__panel button:focus-visible{ outline:3px solid var(--fl-a11y); outline-offset:2px; }
.v3-a11y .v3-a11y__reset,.v3-a11y .v3-a11y__reset:focus{ width:100%; margin-top:10px; min-height:44px; border-radius:10px; border:1px solid var(--fl-a11y); background:#fff; color:var(--fl-a11y); cursor:pointer; font-weight:600; font-size:14.5px; white-space:normal; }
.v3-a11y .v3-a11y__reset:hover{ background:#E8F0FE; color:var(--fl-a11y-dk); }

/* efectos (clases en <html>) · en TODO el sitio desde el 24-10-2026.
   «Contenido» es todo lo que cuelga del body menos el header, las herramientas y los
   flotantes: #v3-main en la portada, main, .elementor y secciones sueltas (ISEHF), lo que va
   al lado del header en las plantillas propias (fichas, convocatorias) y el footer. El header no se agranda: el panel de accesibilidad vive
   en él y tiene que quedar en su lugar. Los modos de color usan :where() para que los
   enlaces y botones puedan ganarles (antes los enlaces quedaban blancos, no amarillos). */
html.a11y-z1 :is(body > :not(.ujp-home,script,style,noscript,link,template,aside,#wpadminbar,.v3-a11y-guide,#wpxjcBar,[class*="elfsight-app"],.chaty,.wpx-wa), body > .ujp-home > :not(.ujp-chrome), .ch-footer){ zoom:1.1; }
html.a11y-z2 :is(body > :not(.ujp-home,script,style,noscript,link,template,aside,#wpadminbar,.v3-a11y-guide,#wpxjcBar,[class*="elfsight-app"],.chaty,.wpx-wa), body > .ujp-home > :not(.ujp-chrome), .ch-footer){ zoom:1.2; }
html.a11y-z3 :is(body > :not(.ujp-home,script,style,noscript,link,template,aside,#wpadminbar,.v3-a11y-guide,#wpxjcBar,[class*="elfsight-app"],.chaty,.wpx-wa), body > .ujp-home > :not(.ujp-chrome), .ch-footer){ zoom:1.3; }
html.a11y-zm1 :is(body > :not(.ujp-home,script,style,noscript,link,template,aside,#wpadminbar,.v3-a11y-guide,#wpxjcBar,[class*="elfsight-app"],.chaty,.wpx-wa), body > .ujp-home > :not(.ujp-chrome), .ch-footer){ zoom:.92; }
/* escala de grises: por partes. Un filtro en un ancestro del panel de accesibilidad
   rompería su posición fija. El botón de accesibilidad queda azul para poder apagar el modo. */
html.a11y-gray :is(body > :not(.ujp-home,script,style,noscript,link,template,aside,#wpadminbar,.v3-a11y-guide,#wpxjcBar,[class*="elfsight-app"],.chaty,.wpx-wa), body > .ujp-home > :not(.ujp-chrome), .ch-footer),
html.a11y-gray .ch-header :is(.ch-logo,.wpxc-ident,.wpxc-navband,.ch-top,.wpxc-fab-wrap,.ch-burger),
html.a11y-gray :is(.v3-hdr-radio,.v3-radio,.v3-msg){ filter:grayscale(1); }
html.a11y-links body a{ text-decoration:underline !important; text-underline-offset:3px; }
html.a11y-font body,
html.a11y-font body :where(*:not(i):not(svg):not(svg *):not([class*="icon"]):not([class*="fa-"])){ font-family:Verdana,Tahoma,Arial,sans-serif !important; letter-spacing:.02em !important; font-style:normal !important; }
html.a11y-spacing body :is(p,li,a){ line-height:1.95 !important; letter-spacing:.04em !important; word-spacing:.12em !important; }
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
html.a11y-cursor,html.a11y-cursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9.5-6.6 1.4 3.8 7.2-2.9 1.5-3.8-7.3L4 19z' fill='%23000' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto !important;
}
html.a11y-contrast body{ background:#000 !important; }
/* Lupi no tiene fondo: en alto contraste se ve sobre el negro, sin caja. */
html.a11y-contrast body :where(*:not(img):not(svg):not(svg *):not(video):not(iframe)){
  background-color:#000 !important; background-image:none !important; color:#fff !important; border-color:#fff !important; text-shadow:none !important; box-shadow:none !important;
}
html.a11y-contrast body a,html.a11y-contrast body a *,
html.a11y-contrast body .v3-btn--cream,html.a11y-contrast body .v3-link-light{ color:#FFE600 !important; border-bottom-color:#FFE600 !important; }
/* botones: sin fondo propio en este modo, así que llevan contorno visible */
html.a11y-contrast body :is(.v3-btn,.ujp-btn-wine,.ujp-btn-orbit){ border:2px solid #FFE600 !important; }
html.a11y-contrast body .ujp-btn-orbit span{ color:#FFE600 !important; }
html.a11y-contrast body svg{ color:#fff; }
.v3-a11y-guide{ display:none; }
html.a11y-guide .v3-a11y-guide{
  display:block; position:fixed; left:0; right:0; height:46px; top:-100px; z-index:9989; pointer-events:none;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.45); border-top:2px solid #E6D4A8; border-bottom:2px solid #E6D4A8;
}

/* Con el menú mobile abierto, radio y accesibilidad no se superponen al panel. */
body:has(.ch-nav.open) .v3-radio,
body:has(.ch-nav.open) .v3-msg{ display:none; }
@media (prefers-reduced-motion:reduce){
  .v3-radio__now.is-long .v3-radio__now-in{ animation:none; padding-left:0; }
}

/* A4 · en táctil el "cursor grande" no sirve: no se ofrece; la guía ocupa la fila */
@media (hover:none) and (pointer:coarse){
  .v3-a11y .v3-a11y__grid [data-a11y=cursor]{ display:none; }
  .v3-a11y .v3-a11y__grid [data-a11y=guide]{ grid-column:1/-1; }
}

/* P3 · sin JavaScript no se muestran botones que no funcionarían */
html:not(.v3-js) .v3-a11y,html:not(.v3-js) .v3-radio{ display:none; }