/* =========================================================
FIAcces — Frontend
Cumple WCAG 2.1 AA
========================================================= */
:root {
--fiacces-text-scale: 1;
--fiacces-primary: #2563EB;
--fiacces-primary-dark: #1E40AF;
--fiacces-text: #1F2937;
--fiacces-text-light: #6B7280;
--fiacces-bg: #FFFFFF;
--fiacces-bg-alt: #F9FAFB;
--fiacces-border: #E5E7EB;
--fiacces-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--fiacces-radius: 12px;
--fiacces-radius-sm: 8px;
}
/* === Aplicar escala de texto global ===
La escala se aplica por elemento desde JS (applyTextScale en frontend.js)
leyendo el font-size computado real, de modo que también afecta a textos
definidos en px por el tema. No se escala el aquí para evitar un
doble escalado de los textos en rem/em. */
/* === Modos de contraste === */
html.fiacces-contrast-high,
html.fiacces-contrast-high body {
background: #000 !important;
color: #FFFF00 !important;
}
html.fiacces-contrast-high a,
html.fiacces-contrast-high a * { color: #00FFFF !important; }
html.fiacces-contrast-high h1,
html.fiacces-contrast-high h2,
html.fiacces-contrast-high h3,
html.fiacces-contrast-high h4,
html.fiacces-contrast-high h5,
html.fiacces-contrast-high h6,
html.fiacces-contrast-high p,
html.fiacces-contrast-high span,
html.fiacces-contrast-high li,
html.fiacces-contrast-high td { color: #FFFF00 !important; background: transparent !important; }
html.fiacces-contrast-inverted { filter: invert(1) hue-rotate(180deg); }
html.fiacces-contrast-inverted img,
html.fiacces-contrast-inverted video,
html.fiacces-contrast-inverted picture { filter: invert(1) hue-rotate(180deg); }
html.fiacces-contrast-gray { filter: grayscale(100%); }
/* === Filtros para daltonismo === */
html.fiacces-daltonism-protanopia { filter: url("#fiacces-filter-protanopia"); }
html.fiacces-daltonism-deuteranopia { filter: url("#fiacces-filter-deuteranopia"); }
html.fiacces-daltonism-tritanopia { filter: url("#fiacces-filter-tritanopia"); }
/* El propio panel del plugin no debe invertirse ni desaturarse */
html.fiacces-contrast-inverted #fiacces-root,
html.fiacces-contrast-gray #fiacces-root { filter: invert(1) hue-rotate(180deg); }
html.fiacces-contrast-gray #fiacces-root { filter: grayscale(0%); }
/* === Fuente para dislexia === */
html.fiacces-dyslexia,
html.fiacces-dyslexia body,
html.fiacces-dyslexia p,
html.fiacces-dyslexia h1,
html.fiacces-dyslexia h2,
html.fiacces-dyslexia h3,
html.fiacces-dyslexia h4,
html.fiacces-dyslexia h5,
html.fiacces-dyslexia h6,
html.fiacces-dyslexia li,
html.fiacces-dyslexia a,
html.fiacces-dyslexia span,
html.fiacces-dyslexia td,
html.fiacces-dyslexia th,
html.fiacces-dyslexia button,
html.fiacces-dyslexia input,
html.fiacces-dyslexia textarea {
font-family: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif !important;
letter-spacing: 0.05em !important;
word-spacing: 0.1em !important;
line-height: 1.6 !important;
}
/* El panel propio mantiene su tipografía */
html.fiacces-dyslexia #fiacces-root,
html.fiacces-dyslexia #fiacces-root * {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
letter-spacing: normal !important;
word-spacing: normal !important;
}
/* === Subrayar enlaces === */
html.fiacces-underline-links a { text-decoration: underline !important; text-underline-offset: 3px !important; }
html.fiacces-underline-links #fiacces-root a { text-decoration: none !important; }
/* === Pausar animaciones === */
html.fiacces-pause-animations *,
html.fiacces-pause-animations *::before,
html.fiacces-pause-animations *::after {
animation-play-state: paused !important;
animation-duration: 0s !important;
transition: none !important;
}
html.fiacces-pause-animations video,
html.fiacces-pause-animations .fiacces-pause-animations video {
/* JS detiene los videos; CSS no puede pausarlos */
}
html.fiacces-pause-animations img[src*=".gif"] {
/* CSS no puede pausar GIFs reales; JS los reemplaza por canvas estático */
}
/* === Cursor === */
html.fiacces-cursor-large,
html.fiacces-cursor-large body * { cursor: url("data:image/svg+xml;utf8,") 5 3, auto !important; }
html.fiacces-cursor-xl,
html.fiacces-cursor-xl body * { cursor: url("data:image/svg+xml;utf8,") 8 5, auto !important; }
/* =========================================================
Botón flotante (FAB)
========================================================= */
#fiacces-root {
position: fixed;
z-index: 999999;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
font-size: 16px;
line-height: 1.5;
color: var(--fiacces-text);
}
#fiacces-root.fiacces-pos-bottom-right { bottom: 20px; right: 20px; }
#fiacces-root.fiacces-pos-bottom-left { bottom: 20px; left: 20px; }
#fiacces-root.fiacces-pos-top-right { top: 20px; right: 20px; }
#fiacces-root.fiacces-pos-top-left { top: 20px; left: 20px; }
.fiacces-fab {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--fiacces-primary);
color: #FFFFFF;
border: 3px solid #FFFFFF;
box-shadow: var(--fiacces-shadow);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, background 0.2s ease;
padding: 0;
animation: fiacces-fab-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* El botón crece desde la esquina donde está anclado */
#fiacces-root.fiacces-pos-bottom-right .fiacces-fab { transform-origin: bottom right; }
#fiacces-root.fiacces-pos-bottom-left .fiacces-fab { transform-origin: bottom left; }
#fiacces-root.fiacces-pos-top-right .fiacces-fab { transform-origin: top right; }
#fiacces-root.fiacces-pos-top-left .fiacces-fab { transform-origin: top left; }
@keyframes fiacces-fab-in {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.fiacces-fab { animation: none; }
}
.fiacces-fab:hover { transform: scale(1.08); background: var(--fiacces-primary-dark); }
/* === Aviso emergente sobre el icono === */
.fiacces-tip {
position: absolute;
width: 240px;
max-width: calc(100vw - 40px);
background: var(--fiacces-bg);
color: var(--fiacces-text);
border: 1px solid var(--fiacces-border);
border-radius: var(--fiacces-radius-sm);
box-shadow: var(--fiacces-shadow);
padding: 12px 32px 12px 14px;
font-size: 14px;
line-height: 1.45;
transform: scale(0);
opacity: 0;
/* Cierre: suave y acelerando hacia el icono */
transition: transform 0.32s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.32s ease;
}
.fiacces-tip.fiacces-tip--open {
transform: scale(1);
opacity: 1;
/* Apertura: con ligero rebote */
transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.28s ease;
}
.fiacces-tip[hidden] { display: none; }
.fiacces-tip__text { margin: 0; }
.fiacces-tip__close {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--fiacces-text-light);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.fiacces-tip__close:hover { background: var(--fiacces-bg-alt); color: var(--fiacces-text); }
.fiacces-tip__close:focus-visible { outline: 2px solid var(--fiacces-primary); outline-offset: 1px; }
/* Flecha del bocadillo */
.fiacces-tip::after {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: var(--fiacces-bg);
border: 1px solid var(--fiacces-border);
transform: rotate(45deg);
}
/* Posición del bocadillo según la esquina del botón */
#fiacces-root.fiacces-pos-bottom-right .fiacces-tip,
#fiacces-root.fiacces-pos-bottom-left .fiacces-tip { bottom: 72px; }
#fiacces-root.fiacces-pos-top-right .fiacces-tip,
#fiacces-root.fiacces-pos-top-left .fiacces-tip { top: 72px; }
#fiacces-root.fiacces-pos-bottom-right .fiacces-tip,
#fiacces-root.fiacces-pos-top-right .fiacces-tip { right: 0; }
#fiacces-root.fiacces-pos-bottom-left .fiacces-tip,
#fiacces-root.fiacces-pos-top-left .fiacces-tip { left: 0; }
#fiacces-root.fiacces-pos-bottom-right .fiacces-tip::after { bottom: -7px; right: 20px; border-top: 0; border-left: 0; }
#fiacces-root.fiacces-pos-bottom-left .fiacces-tip::after { bottom: -7px; left: 20px; border-top: 0; border-left: 0; }
#fiacces-root.fiacces-pos-top-right .fiacces-tip::after { top: -7px; right: 20px; border-bottom: 0; border-right: 0; }
#fiacces-root.fiacces-pos-top-left .fiacces-tip::after { top: -7px; left: 20px; border-bottom: 0; border-right: 0; }
/* El bocadillo crece desde la esquina del icono */
#fiacces-root.fiacces-pos-bottom-right .fiacces-tip { transform-origin: bottom right; }
#fiacces-root.fiacces-pos-bottom-left .fiacces-tip { transform-origin: bottom left; }
#fiacces-root.fiacces-pos-top-right .fiacces-tip { transform-origin: top right; }
#fiacces-root.fiacces-pos-top-left .fiacces-tip { transform-origin: top left; }
@media (prefers-reduced-motion: reduce) {
.fiacces-tip { transition: opacity 0.2s ease; transform: scale(1); }
}
.fiacces-fab:focus-visible {
outline: 3px solid #FBBF24;
outline-offset: 3px;
}
/* =========================================================
Panel modal
========================================================= */
.fiacces-panel {
position: absolute;
width: 360px;
max-width: calc(100vw - 40px);
max-height: calc(100vh - 100px);
background: var(--fiacces-bg);
border-radius: var(--fiacces-radius);
box-shadow: var(--fiacces-shadow);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--fiacces-border);
}
#fiacces-root.fiacces-pos-bottom-right .fiacces-panel { bottom: 72px; right: 0; }
#fiacces-root.fiacces-pos-bottom-left .fiacces-panel { bottom: 72px; left: 0; }
#fiacces-root.fiacces-pos-top-right .fiacces-panel { top: 72px; right: 0; }
#fiacces-root.fiacces-pos-top-left .fiacces-panel { top: 72px; left: 0; }
.fiacces-panel[hidden] { display: none; }
.fiacces-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: var(--fiacces-primary);
color: #FFFFFF;
flex-shrink: 0;
}
.fiacces-panel__title {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #FFFFFF;
}
.fiacces-close {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: #FFFFFF;
border: 2px solid transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
padding: 0;
}
.fiacces-close:hover { background: rgba(255, 255, 255, 0.35); }
.fiacces-close:focus-visible { outline: 3px solid #FBBF24; outline-offset: 2px; }
.fiacces-panel__body {
padding: 16px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.fiacces-panel__footer {
padding: 12px 16px;
border-top: 1px solid var(--fiacces-border);
background: var(--fiacces-bg-alt);
display: flex;
justify-content: flex-end;
flex-shrink: 0;
}
/* === Cards === */
.fiacces-card {
background: var(--fiacces-bg-alt);
border: 1px solid var(--fiacces-border);
border-radius: var(--fiacces-radius-sm);
padding: 14px;
}
.fiacces-card__title {
margin: 0 0 10px;
font-size: 14px;
font-weight: 700;
color: var(--fiacces-text);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.fiacces-card__controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.fiacces-card__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.fiacces-card__list {
display: flex;
flex-direction: column;
gap: 10px;
}
/* === Botones === */
.fiacces-btn {
background: var(--fiacces-primary);
color: #FFFFFF;
border: 2px solid transparent;
padding: 10px 16px;
border-radius: var(--fiacces-radius-sm);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
min-height: 44px; /* WCAG 2.5.5 - Target Size */
min-width: 44px;
}
.fiacces-btn:hover { background: var(--fiacces-primary-dark); }
.fiacces-btn:focus-visible { outline: 3px solid #FBBF24; outline-offset: 2px; }
.fiacces-btn--secondary {
background: transparent;
color: var(--fiacces-text);
border: 2px solid var(--fiacces-border);
}
.fiacces-btn--secondary:hover {
background: var(--fiacces-bg-alt);
border-color: var(--fiacces-text-light);
}
.fiacces-value {
font-size: 16px;
font-weight: 700;
color: var(--fiacces-text);
min-width: 60px;
text-align: center;
}
/* Toggle buttons (contrast / cursor) */
.fiacces-toggle {
background: var(--fiacces-bg);
color: var(--fiacces-text);
border: 2px solid var(--fiacces-border);
padding: 10px 12px;
border-radius: var(--fiacces-radius-sm);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
min-height: 44px;
text-align: center;
}
.fiacces-toggle:hover { border-color: var(--fiacces-primary); }
.fiacces-toggle:focus-visible { outline: 3px solid #FBBF24; outline-offset: 2px; }
.fiacces-toggle[aria-pressed="true"] {
background: var(--fiacces-primary);
color: #FFFFFF;
border-color: var(--fiacces-primary);
}
/* === Switches === */
.fiacces-switch {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
user-select: none;
min-height: 44px;
}
.fiacces-switch input { position: absolute; opacity: 0; pointer-events: none; }
.fiacces-switch__slider {
width: 44px;
height: 24px;
background: #CBD5E1;
border-radius: 999px;
position: relative;
transition: background 0.2s ease;
flex-shrink: 0;
}
.fiacces-switch__slider::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
background: #FFFFFF;
border-radius: 50%;
transition: transform 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.fiacces-switch input:checked + .fiacces-switch__slider {
background: var(--fiacces-primary);
}
.fiacces-switch input:checked + .fiacces-switch__slider::before {
transform: translateX(20px);
}
.fiacces-switch input:focus-visible + .fiacces-switch__slider {
outline: 3px solid #FBBF24;
outline-offset: 2px;
}
.fiacces-switch__label {
font-size: 14px;
color: var(--fiacces-text);
line-height: 1.4;
}
/* === Screen-reader only === */
.fiacces-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* === Responsive === */
@media (max-width: 480px) {
.fiacces-panel {
width: calc(100vw - 30px);
}
}
@media (prefers-reduced-motion: reduce) {
.fiacces-fab,
.fiacces-btn,
.fiacces-toggle,
.fiacces-switch__slider,
.fiacces-switch__slider::before {
transition: none !important;
}
}