/* --- WIDGET DE ACCESIBILIDAD --- */

/* Botón Flotante */
#acc-trigger {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #0056b3;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 99999; /* Muy alto para estar sobre todo */
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s;
}
#acc-trigger:hover { transform: scale(1.1); }
#acc-trigger svg { width: 32px; height: 32px; fill: white; }

/* Panel Principal */
#acc-panel {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 320px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  padding: 20px;
  z-index: 99999;
  display: none;
  font-family: 'Segoe UI', Arial, sans-serif;
}
#acc-panel.is-visible { display: block; animation: pfaSlideUp 0.3s ease-out; }

/* Cabecera del Panel */
.acc-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px;
}
.acc-title-group { display: flex; align-items: center; gap: 10px; }
.acc-logo-header { height: 32px; width: auto; display: block; }
.acc-header h3 { margin: 0; font-size: 18px; color: #333; font-weight: 700; }
.acc-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #666; }

/* Grid de Botones */
.acc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Estilo Botones */
.acc-option {
  background: #f4f6f8;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.acc-option:hover { background: #e0e0e0; }
.acc-option.active { border-color: #0056b3; background: #e3f2fd; color: #0056b3; }
.acc-option.btn-reset { background-color: #fff0f0; color: #d32f2f; }
.acc-option.btn-reset:hover { background-color: #ffcdd2; }

.acc-icon { font-size: 22px; }
.acc-label { font-size: 13px; font-weight: 600; color: inherit; }

@keyframes pfaSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- CLASES FUNCIONALES --- */

/* 1. Grises */
html.acc-gray { filter: grayscale(100%); }

/* 2. Contraste */
html.acc-contrast body { background-color: #000 !important; color: #ffff00 !important; }
html.acc-contrast a { color: #00ffff !important; text-decoration: underline; }
html.acc-contrast button { background-color: #ffff00 !important; color: #000 !important; font-weight: bold; border: 2px solid white;}
/* Fix para panel en contraste */
html.acc-contrast #acc-panel { background-color: #000; border: 2px solid #fff; }
html.acc-contrast #acc-panel h3 { color: #ffff00; }
html.acc-contrast .acc-option { background-color: #333; color: #fff; border: 1px solid #fff; }
html.acc-contrast .acc-option.active { background-color: #ffff00; color: #000; }

/* 3. Enlaces */
html.acc-links a { text-decoration: underline !important; font-weight: bold !important; background-color: yellow !important; color: black !important; }

/* 4. Fuente */
html.acc-font body, html.acc-font * { font-family: Arial, Helvetica, sans-serif !important; line-height: 1.8 !important; }

/* 5. Pausar Animación */
html.acc-motion *, html.acc-motion *::before, html.acc-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* 6. Cursor Grande (SVG Embed) */
html.acc-cursor, html.acc-cursor * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewport="0 0 48 48" style="fill:black;stroke:white;stroke-width:2px;"><path d="M12 4l-8 28 12-6 8 16 6-4-8-16 12-4z"/></svg>'), auto !important;
}

/* 7. Guía de Lectura */
#acc-reading-line {
    position: fixed; left: 0; top: -100px; width: 100%; height: 5px;
    background-color: rgba(255, 255, 0, 0.4); border-top: 3px solid red;
    z-index: 2147483647; pointer-events: none; display: none;
}
html.acc-guide #acc-reading-line { display: block; }

/* 8. Espaciado */
html.acc-spacing body, html.acc-spacing * { letter-spacing: 2px !important; word-spacing: 5px !important; line-height: 2 !important; }