/* Ajustes de accesibilidad «A mi manera» (2026-11-01, como en mika.loaneth.tech). Último tramo: le gana a los demás
   por orden y especificidad (clase en <html>), sin !important. js/accesibilidad.js pone las clases acc-*. */

/* Botón de la cabecera y panel */
.boton-accesibilidad { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin-left: .5rem; padding: 0; border: 1px solid var(--linea); border-radius: 50%; background: var(--blanco);
  color: var(--coral); cursor: pointer; flex: none; }
.boton-accesibilidad:hover { background: var(--fondo); }
.boton-accesibilidad:focus-visible, .accesibilidad :focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
/* margin: auto devuelve el centrado del <dialog> modal (la base pone margin: 0 a todo) */
.accesibilidad { margin: auto; border: 0; border-radius: 18px; padding: 0; width: min(92vw, 380px); background: var(--blanco);
  color: var(--tinta); box-shadow: 0 20px 60px rgba(32, 32, 57, .25); }
.accesibilidad::backdrop { background: rgba(20, 18, 40, .45); }
.accesibilidad__caja { padding: 1.25rem 1.4rem 1.4rem; display: grid; gap: .5rem; }
.accesibilidad__cabeza { display: flex; justify-content: space-between; align-items: center; }
.accesibilidad__cabeza h2 { font-size: 1.25rem; }
.accesibilidad__cerrar { border: 0; background: none; font-size: 1.1rem; color: var(--tinta-suave); cursor: pointer;
  width: 44px; height: 44px; }
.accesibilidad fieldset { border: 0; padding: 0; margin: .4rem 0 0; display: grid; }
.accesibilidad legend { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--coral); margin-bottom: .2rem; }
.accesibilidad label { display: flex; align-items: center; gap: .65rem; min-height: 44px; border-bottom: 1px solid var(--linea);
  cursor: pointer; font-weight: 600; }
.accesibilidad input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--coral); flex: none; }
.accesibilidad__pie { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .6rem; }

/* Texto más grande: todo está en rem, así que basta la raíz */
html.acc-texto-grande { font-size: 118.75%; }
/* Más espaciado (WCAG 1.4.12: interlineado 1,5+, letras 0,12 em, palabras 0,16 em) */
html.acc-espaciado body { line-height: 1.9; letter-spacing: .06em; word-spacing: .16em; }
html.acc-espaciado p, html.acc-espaciado li { margin-bottom: .5em; }
/* Tipografía de lectura fácil: sin serifa, letras bien distintas */
html.acc-letra-facil body, html.acc-letra-facil button, html.acc-letra-facil input, html.acc-letra-facil textarea,
html.acc-letra-facil select { font-family: Verdana, Tahoma, "Segoe UI", sans-serif; }
html.acc-subrayar a { text-decoration: underline; text-underline-offset: .2em; }

/* Alto contraste: textos más oscuros, bordes visibles y sin vidrio translúcido */
html.acc-contraste { --tinta: #000; --mika-text: #000; --tinta-suave: #2b2b3d; --mika-muted: #2b2b3d; --linea: #55536b;
  --vidrio: #fff; --vidrio-fuerte: #fff; --vidrio-borde: #55536b; --coral: #3d1fd1; --coral-oscuro: #2a129e; }
html.acc-contraste a { text-decoration: underline; }

/* Modo oscuro: se redefinen los tokens; la vista previa (la página del cliente) no cambia */
html.acc-oscuro { color-scheme: dark; --fondo: #13111f; --mika-background: #13111f; --blanco: #1d1a2d; --mika-surface: #1d1a2d;
  --tinta: #f3f1fc; --mika-text: #f3f1fc; --tinta-suave: #b2acc5; --mika-muted: #b2acc5; --linea: #363047; --suave: #2a2341;
  --menta: #234a3d; --coral: #a18aff; --coral-oscuro: #c7bdff; --verde: #8edcbd; --aviso: #ff9b8f; --aviso-fondo: #3a1d22;
  --vidrio: rgba(29, 26, 45, .78); --vidrio-fuerte: rgba(29, 26, 45, .92); --vidrio-borde: rgba(255, 255, 255, .08); }
html.acc-oscuro body::before { opacity: .35; }
/* el vidrio de 5-marca.css pone blancos semitransparentes a mano: en oscuro se reemplazan */
html.acc-oscuro .boton--secundario, html.acc-oscuro .barra .boton--secundario {
  background: rgba(255, 255, 255, .06); color: var(--tinta); border-color: var(--linea); }
html.acc-oscuro textarea, html.acc-oscuro select, html.acc-oscuro .campo input, html.acc-oscuro .usuarios__filtros input,
html.acc-oscuro .carga-creditos input, html.acc-oscuro input[type="text"], html.acc-oscuro input[type="email"],
html.acc-oscuro input[type="password"] { background: #171426; color: var(--tinta); border-color: var(--linea); }
html.acc-oscuro ::placeholder { color: #8f8daa; }
html.acc-oscuro .chat__entrada, html.acc-oscuro .chat__costo, html.acc-oscuro .asistente__botones { background: transparent; }
html.acc-oscuro .msj--usuario { color: #13111f; }   /* sobre el violeta claro del modo oscuro: 8:1 */
html.acc-oscuro .previa__pie .boton--clic[aria-pressed="true"],
html.acc-oscuro .previa__pie .boton--clic[aria-pressed="true"]:hover:not(:disabled) { color: #13111f; }   /* ídem */
html.acc-oscuro .msj__version--ok { color: #8fe0b8; }   /* sobre la burbuja verde oscura: 6:1 */
/* Planes y pago (2026-11-08): --blanco es oscuro aquí, así que el texto sobre el color del plan salía negro; el título,
   violeta oscuro sobre tarjeta oscura; y el aviso amarillo dejaba el texto claro sobre fondo claro. Contrastes medidos en prueba_accesibilidad. */
html.acc-oscuro { --plan-plus: #5b5780; }
html.acc-oscuro .tarjeta-plan__precio, html.acc-oscuro .tarjeta-plan__boton, html.acc-oscuro .tarjeta-plan__marca { color: #fff; }
html.acc-oscuro .tarjeta-plan__cabeza h3, html.acc-oscuro .tarjeta-plan__cabeza small { color: color-mix(in srgb, var(--plan) 45%, white); }
html.acc-oscuro .pago__red, html.acc-oscuro .revision .sugerencia { background: #3a3016; color: #ffe3a0; }
/* el logo en oscuro conserva su burbuja morada y su punto verde: solo la palabra va en blanco
   (marca/mika-logo-oscuro.png, de herramientas/logo_oscuro.py); antes un filtro lo volvía todo blanco */
.marca .marca__oscuro, html.acc-oscuro .marca .marca__claro { display: none; }   /* le ganan a «.marca img» */
html.acc-oscuro .marca .marca__oscuro { display: block; }

/* Reducir movimiento */
html.acc-sin-movimiento *, html.acc-sin-movimiento *::before, html.acc-sin-movimiento *::after {
  animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; scroll-behavior: auto; }