/* FSAD Accessibility Toolkit */
:root{
  --fsad-z: 99999;
  --fsad-gap: 8px;
  --fsad-bg: #ffffff;
  --fsad-panel: #f7faf9;
  --fsad-stroke: #dfe9e4;
  --fsad-brand: #1E824C;
  --fsad-muted: #56706a;
  --fsad-shadow: 0 12px 28px rgba(0,0,0,.15);
}

#fsad-a11y{ position:fixed; bottom:108px; right:16px; z-index:var(--fsad-z); font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif; }
#fsad-a11y *{ box-sizing:border-box; }

/* Toggle button (FAB) */
#fsad-a11y .fsad-toggle{
  position:fixed; bottom:16px; right:16px;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--fsad-stroke);
  background: radial-gradient(100% 100% at 50% 0%, #e9f9f0 0%, #dff5ea 100%);
  color:var(--fsad-brand); box-shadow: var(--fsad-shadow);
  cursor:pointer; transition: transform .15s ease, box-shadow .15s ease;
}
#fsad-a11y .fsad-toggle:hover{ transform: translateY(-1px); box-shadow: 0 16px 32px rgba(0,0,0,.18); }

/* Panel */
#fsad-panel{
  position:absolute; bottom:80px; right:0;
  background:var(--fsad-bg);
  border:1px solid var(--fsad-stroke);
  border-radius:16px; padding:12px;
  box-shadow: var(--fsad-shadow);
  width: min(380px, calc(100vw - 40px));
  max-height: min(70vh, 560px); overflow:auto;
}

/* Drag handle */
.fsad-handle{ width:100%; height:8px; margin-bottom:8px; border-radius:6px;
  background: repeating-linear-gradient(90deg, #cfeee0 0 10px, #e5f4ed 10px 20px);
  cursor: move;
}

/* Grid of buttons */
.fsad-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:var(--fsad-gap); }
@media (max-width:1024px){ .fsad-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .fsad-grid{ grid-template-columns: 1fr; } }

.fsad-btn{
  display:grid; place-items:center; gap:6px;
  border:1px solid var(--fsad-stroke); border-radius:12px;
  padding:10px; background:var(--fsad-panel); color:#123;
  cursor:pointer; transition: background .15s, transform .12s, border-color .15s;
}
.fsad-btn:hover{ background:#eef7f2; border-color:#cfeede; transform: translateY(-1px); }
.fsad-btn svg{ width:28px; height:28px; }

.fsad-btn--danger{ color:#b23b3b; background:#fff3f3; border-color:#f1cccc; }
.fsad-btn--danger:hover{ background:#ffe9e9; }

/* Active state */
html.fsad-contrast,
body.fsad-contrast{ background:#000 !important; color:#fff !important; }
.fsad-contrast *{ background-color: transparent !important; color:#fff !important; border-color:#777 !important; }
.fsad-contrast a{ color:#7dd3fc !important; text-decoration: underline !important; }

.fsad-grayscale { filter: grayscale(1) !important; }
.fsad-invert { filter: invert(1) hue-rotate(180deg) !important; }

.fsad-highlight-links a{ outline: 2px dashed #1E824C !important; background: #e9f9f0 !important; }

/* Focus ring accesible */
.fsad-strong-focus :focus{ outline: 3px solid #1E824C !important; outline-offset: 2px !important; }

/* Regla de lectura */
.fsad-ruler { position: fixed; left:0; right:0; height: 42px; pointer-events: none; z-index: var(--fsad-z); background: rgba(30,130,76,.15); border-top:1px solid rgba(30,130,76,.35); border-bottom:1px solid rgba(30,130,76,.35); }

/* Pausa de animaciones */
.fsad-no-anim *{ animation: none !important; transition: none !important; }

/* Mute: no css; se gestiona en JS */

/* CC forzado: resaltado de track */
.fsad-cc video::-webkit-media-text-track-display{ background: rgba(0,0,0,.65) !important; }
.fsad-cc track{ color: #fff !important; }

/* Ocultar imágenes decorativas */
.fsad-hide-images img[alt=""], .fsad-hide-images img[role="presentation"], .fsad-hide-images .decorative img{ visibility: hidden !important; }

/* Fuente legible y espaciado/line-height */
.fsad-readable{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif !important; }
.fsad-spacing { letter-spacing: .02em; word-spacing: .08em; line-height: 1.8 !important; }

/* Zoom tipográfico */
:root{ --fsad-scale: 1; }
body{ font-size: calc(1rem * var(--fsad-scale)); }

/* Drag ghost */
#fsad-a11y.dragging{ opacity: .96; }