/* --- Botón flotante y Menú de Accesibilidad (texto blanco integrado) --- */ :root { --a11y-font-scale: 1; } html { font-size: calc(16px * var(--a11y-font-scale)); } /* --- Fuente Poppins para el menú de accesibilidad --- */ /* Opción CSS directa (sirve si no agregas en el ) */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* Fuerza Poppins en el botón y en TODO el contenido del menú */ .a11y-btn, .a11y-menu, .a11y-menu * { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif !important; } /* Asegura que los botones internos hereden la tipografía correctamente */ .a11y-menu button, .a11y-menu [role="menuitem"], .a11y-menu [role="menuitemcheckbox"] { font: inherit; } /* Incluso si activas el modo dislexia, el MENÚ mantiene Poppins */ body.a11y-dyslexic .a11y-btn, body.a11y-dyslexic .a11y-menu, body.a11y-dyslexic .a11y-menu * { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif !important; } .a11y-launcher { position: fixed; bottom: 70px; right: 1rem; z-index: 1006; } .a11y-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; border: none; cursor: pointer; background: var(--navy-deep); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.25); transition: transform .2s ease, background-color .2s ease; } .a11y-btn:hover { background: var(--blue-primary-subtle); transform: translateY(-2px); } .a11y-btn:focus { outline: 3px solid var(--color-acento); outline-offset: 2px; } /* Menú */ .a11y-menu { position: absolute; right: 0; bottom: 60px; min-width: 260px; background: var(--navy-deep); color: #fff; /* base: blanco */ border-radius: 12px; padding: .75rem; box-shadow: 0 10px 28px rgba(0,0,0,.45); z-index: 1005; transform-origin: bottom right; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; /* Oculto por defecto */ visibility: hidden; opacity: 0; transform: scale(.95); } /* Todo lo interno hereda el blanco (evita grises por reglas globales) */ .a11y-menu * { color: inherit; } /* Mostrar cuando el botón está expandido */ .a11y-btn[aria-expanded="true"] + .a11y-menu:not([hidden]) { visibility: visible; opacity: 1; transform: scale(1); } /* Si el launcher está colapsado, oculta */ .a11y-launcher[aria-expanded="false"] .a11y-menu { visibility: hidden; opacity: 0; transform: scale(.95); } /* Ítems */ .a11y-item { width: 100%; text-align: left; padding: .75rem 1rem; background: transparent; border: 0; color: inherit; /* <- blanco */ cursor: pointer; border-radius: 8px; font-size: .95rem; display: flex; align-items: center; gap: 12px; transition: background-color .2s ease, color .2s ease, opacity .2s ease; opacity: 1; /* nunca atenuado */ } /* Hover/focus: mantenemos texto blanco y solo cambiamos el fondo */ .a11y-item:hover, .a11y-item:focus { background: rgba(255,255,255,.12); color: inherit; /* sigue blanco */ outline: none; } /* Grupo de A-, A, A+ */ .a11y-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .5rem 0 .75rem; padding: 0 .25rem; } .a11y-group .a11y-item { background: var(--blue-primary-subtle); color: #fff; font-weight: 600; justify-content: center; } .a11y-group .a11y-item:hover, .a11y-group .a11y-item:focus { background: var(--blue-accent-subtle); color: #fff; } /* Separador */ .a11y-sep { border: none; border-top: 1px solid rgba(255,255,255,.25); margin: .75rem 0; } /* Botón de reset: también blanco por consistencia */ .a11y-reset { color: inherit; font-weight: 500; } .a11y-reset:hover, .a11y-reset:focus { background: rgba(255,255,255,.12); color: inherit; } /* “Checkbox” visual */ .a11y-item[role="menuitemcheckbox"] { justify-content: space-between; } .a11y-item[role="menuitemcheckbox"]::after{ content:''; display:inline-block; width:18px; height:18px; border:1px solid rgba(255,255,255,.8); border-radius:4px; background-color: transparent; margin-left:10px; flex-shrink:0; background-size:60%; background-repeat:no-repeat; background-position:center; } .a11y-item[role="menuitemcheckbox"][aria-checked="true"]::after { background-color: var(--color-acento); border-color: var(--color-acento); background-image: url("data:image/svg+xml;utf8,"); background-size: 70%; background-position: center; background-repeat: no-repeat; } /* Clase utilitaria para texto solo-lector */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ========================= MODO ALTO CONTRASTE ========================= */ body.a11y-contrast { color-scheme: dark; background:#000 !important; color:#fff !important; } body.a11y-contrast .app-topbar, body.a11y-contrast .container, body.a11y-contrast .header-bar, body.a11y-contrast .stat-card, body.a11y-contrast .data-table, body.a11y-contrast .skin-modal__dialog, body.a11y-contrast .a11y-menu, body.a11y-contrast .file-drop-area, body.a11y-contrast .file-preview, body.a11y-contrast .signature-pad-container{ background:#000 !important; border:2px solid #fff !important; box-shadow:none !important; } body.a11y-contrast h1, body.a11y-contrast h2, body.a11y-contrast h3, body.a11y-contrast .header-subtitle, body.a11y-contrast .stat-label, body.a11y-contrast .stat-value{ color:#fff !important; text-shadow:none !important; } body.a11y-contrast .submit-btn, body.a11y-contrast .back-btn, body.a11y-contrast .menu-btn, body.a11y-contrast .search-btn, body.a11y-contrast .action-btn, body.a11y-contrast .a11y-item{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; box-shadow:none !important; } body.a11y-contrast .submit-btn:hover, body.a11y-contrast .back-btn:hover, body.a11y-contrast .menu-btn:hover, body.a11y-contrast .search-btn:hover, body.a11y-contrast .action-btn:hover, body.a11y-contrast .a11y-item:hover{ background:#111 !important; } body.a11y-contrast a, body.a11y-contrast a:visited{ color:#fff !important; text-decoration:underline !important; } body.a11y-contrast input, body.a11y-contrast select, body.a11y-contrast textarea{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; box-shadow:none !important; } body.a11y-contrast ::placeholder{ color:#ddd !important; } body.a11y-contrast table.data-table{ border-collapse:separate !important; border-spacing:0; } body.a11y-contrast table.data-table thead th{ background:#000 !important; color:#fff !important; border-bottom:3px solid #fff !important; } body.a11y-contrast table.data-table tbody td, body.a11y-contrast table.data-table tbody th{ border-top:2px solid #fff !important; } body.a11y-contrast i[class^="fa"]{ color:#fff !important; filter:none !important; } body.a11y-contrast img{ outline:2px solid #fff !important; } body.a11y-contrast :focus{ outline:3px solid #ff0 !important; outline-offset:2px !important; box-shadow:none !important; } body.a11y-contrast .bud-overlay, body.a11y-contrast .skin-modal__backdrop{ background:rgba(0,0,0,.9) !important; } body.a11y-contrast .nav-arrow, body.a11y-contrast #prev-btn, body.a11y-contrast #next-btn{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; } body.a11y-contrast .faq-question{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; } body.a11y-contrast .spinner, body.a11y-contrast .bud-spinner{ border-color:#fff #000 #000 #000 !important; } body.a11y-contrast .loader-text, body.a11y-contrast #submit-overlay-msg{ color:#fff !important; } body.a11y-contrast .a11y-btn{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; } body.a11y-contrast .a11y-menu{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; } body.a11y-contrast .a11y-sep{ border-top:2px solid #fff !important; } /* ========================= MODO MÁS ESPACIADO ========================= */ body.a11y-spacing { line-height:1.8 !important; letter-spacing:.06em !important; word-spacing:.12em !important; } body.a11y-spacing button, body.a11y-spacing input, body.a11y-spacing select, body.a11y-spacing textarea{ line-height:normal !important; letter-spacing:normal !important; word-spacing:normal !important; } /* ========================= FUENTE AMIGABLE DISLEXIA ========================= */ body.a11y-dyslexic{ font-family:"Atkinson Hyperlegible","Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif !important; line-height:1.6 !important; letter-spacing:.02em !important; word-spacing:.08em !important; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; hyphens:manual; } body.a11y-dyslexic button, body.a11y-dyslexic input, body.a11y-dyslexic select, body.a11y-dyslexic textarea{ letter-spacing:normal !important; word-spacing:normal !important; line-height:normal !important; } body.a11y-dyslexic *, body.a11y-dyslexic *::before, body.a11y-dyslexic *::after{ font-variant-ligatures:none; } body.a11y-contrast.a11y-dyslexic{ /* sin cambios de color */ } /* ===== Subrayar enlaces (accesibilidad) ===== */ /* Exclusiones: no subrayar elementos que son botones o controles */ body.a11y-underline-links a[href].btn, a[href][role="button"], a[href].button, a[href].menu-btn, a[href].nav-arrow, .a11y-menu a[href], .a11y-item a[href], .skip-link, .back-btn { text-decoration: none !important; } body.a11y-underline a[href]{ text-decoration-line: underline !important; text-decoration-thickness: 2px; text-underline-offset: .15em; } /* Exclusiones */ body.a11y-underline a[href].btn, body.a11y-underline a[href][role="button"], body.a11y-underline a[href].button, body.a11y-underline a[href].menu-btn, body.a11y-underline a[href].nav-arrow, body.a11y-underline .a11y-menu a[href], body.a11y-underline .a11y-item a[href], body.a11y-underline .skip-link, body.a11y-underline .back-btn { text-decoration: none !important; } body.a11y-underline a[href]:focus-visible{ outline: 3px solid var(--color-acento); outline-offset: 2px; } body.a11y-underline a[href]:hover{ text-decoration-thickness: 3px; } /* ✅ CONTRASTE GLOBAL: afecta TODO (incluye contenido nuevo) */ body.a11y-contrast { color-scheme: dark; background:#000 !important; color:#fff !important; } /* Texto y fondos base en cualquier elemento */ body.a11y-contrast :where(*){ color: inherit; } /* Contenedores “tipo tarjeta / sección” (muy genérico) */ body.a11y-contrast :where(section, article, main, aside, header, footer, nav, div){ border-color:#fff; } /* Links */ body.a11y-contrast a, body.a11y-contrast a:visited{ color:#fff !important; text-decoration: underline !important; } /* Inputs */ body.a11y-contrast :where(input, select, textarea, button){ background:#000 !important; color:#fff !important; border:2px solid #fff !important; box-shadow:none !important; } /* Imágenes con borde visible */ body.a11y-contrast img{ outline:2px solid #fff !important; outline-offset: 3px; } /* Focus universal, incluyendo contenido nuevo */ body.a11y-contrast :focus-visible{ outline: 3px solid #ff0 !important; outline-offset: 2px !important; } /* ========================= FUENTE GLOBAL CONTROLADA (para que dislexia aplique en TODO) ========================= */ /* Fuente normal del sitio */ body{ --site-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* Fuente dislexia */ body.a11y-dyslexic{ --site-font: "Atkinson Hyperlegible","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; } /* Aplica la fuente a TODO el contenido del sitio */ body :where(*):not(svg):not(path):not(code):not(pre){ font-family: var(--site-font) !important; } /* No romper iconos tipo FontAwesome */ body :where(i[class^="fa"], i[class*=" fa-"]) { font-family: inherit !important; } html { font-size: calc(16px * var(--a11y-font-scale, 1)); } /* ============================= ALTO CONTRASTE REAL ============================= */ html.a11y-contrast, html.a11y-contrast body { background-color: #000 !important; color: #fff !important; } /* Cards, secciones, contenedores */ html.a11y-contrast .card, html.a11y-contrast .cards, html.a11y-contrast .card-item, html.a11y-contrast [class*="card"], html.a11y-contrast section, html.a11y-contrast article, html.a11y-contrast main, html.a11y-contrast div { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } /* Títulos */ html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4, html.a11y-contrast h5, html.a11y-contrast h6 { color: #fff !important; } /* Textos secundarios */ html.a11y-contrast p, html.a11y-contrast span, html.a11y-contrast li { color: #fff !important; } /* Enlaces */ html.a11y-contrast a { color: #00ffff !important; text-decoration: underline !important; } /* Íconos */ html.a11y-contrast svg, html.a11y-contrast i { fill: #fff !important; color: #fff !important; } html.a11y-underline-links a { text-decoration: underline !important; } html.a11y-dyslexia { font-family: 'OpenDyslexic', Arial, sans-serif; } html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation: none !important; transition: none !important; } /* =================================================== MODO ALTO CONTRASTE REFORZADO =================================================== */ body.a11y-contrast { background-color: #000 !important; color: #fff !important; } /* 1. Forzar fondos negros y bordes blancos en contenedores principales */ body.a11y-contrast section, body.a11y-contrast article, body.a11y-contrast main, body.a11y-contrast .card, /* Clase común */ body.a11y-contrast [class*="card"] { /* Cualquier clase que contenga 'card' */ background-color: #000 !important; color: #fff !important; border: 2px solid #fff !important; box-shadow: none !important; } /* 2. Arreglar los círculos de los iconos (los de tu imagen) */ /* Buscamos divs redondos o con fondos de colores dentro de las cards */ body.a11y-contrast [class*="card"] div, body.a11y-contrast [class*="card"] span { background-color: transparent !important; /* Quitamos el rosa/azul/verde */ border: 1px solid #fff !important; /* Les damos un borde fino blanco */ color: #fff !important; } /* 3. Forzar que todos los textos sean blancos */ body.a11y-contrast h1, body.a11y-contrast h2, body.a11y-contrast h3, body.a11y-contrast h4, body.a11y-contrast p, body.a11y-contrast span, body.a11y-contrast li, body.a11y-contrast strong { color: #fff !important; } /* 4. Íconos (SVG o FontAwesome) */ body.a11y-contrast i, body.a11y-contrast svg { color: #fff !important; fill: #fff !important; } /* 5. Inputs y botones */ body.a11y-contrast button, body.a11y-contrast input, body.a11y-contrast select, body.a11y-contrast textarea { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } /* 6. Enlaces (Amarillo o Cyan para que resalten) */ body.a11y-contrast a { color: #b6b666 !important; /* Amarillo eléctrico es estándar en accesibilidad */ text-decoration: underline !important; } /* 7. El Panel de accesibilidad propiamente */ body.a11y-contrast .a11y-panel, body.a11y-contrast .a11y-menu { background: #000 !important; border: 3px solid #fff !important; } /* ============================================= ALTO CONTRASTE UNIVERSAL (Agresivo) ============================================= */ /* 1. Forzar fondo negro en los cimientos del sitio */ body.a11y-contrast, body.a11y-contrast .wrap, body.a11y-contrast main, body.a11y-contrast header, body.a11y-contrast footer, body.a11y-contrast section, body.a11y-contrast .hero, /* <--- Esta es la que falla en Estadísticos */ body.a11y-contrast .topbar, body.a11y-contrast .gd-footer { background-color: #000 !important; background-image: none !important; /* ELIMINA DEGRADADOS Y MANCHAS */ color: #fff !important; border-color: #fff !important; } /* 2. Arreglar las CARDS y contenedores internos */ body.a11y-contrast .ap-card-note, body.a11y-contrast .card, body.a11y-contrast [class*="card"], body.a11y-contrast .topbar__inner, body.a11y-contrast .ap-container { background: #000 !important; border: 2px solid #fff !important; box-shadow: none !important; } /* 3. Evitar el amarillo sobre blanco (Links) */ /* Forzamos que si hay un link amarillo, su contenedor sea negro */ body.a11y-contrast a { color: #ffff00 !important; /* Amarillo solo sobre negro */ text-decoration: underline !important; } /* 4. Forzar que los textos dentro de la zona blanca de 'Estadísticos' cambien */ body.a11y-contrast h1, body.a11y-contrast h2, body.a11y-contrast h3, body.a11y-contrast p, body.a11y-contrast span, body.a11y-contrast strong { color: #fff !important; } /* 5. Los botones de 'Ingresa con tu clave' y 'Descargar' */ body.a11y-contrast .tb-link[data-variant="primary"], body.a11y-contrast .btn, body.a11y-contrast button { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } /* 6. Iconos y SVGs */ body.a11y-contrast svg, body.a11y-contrast i, body.a11y-contrast .icon-box { fill: #fff !important; color: #fff !important; background: transparent !important; } /* 7. Limpiar el Logo (si el logo es oscuro, esto le pone fondo blanco para que se vea) */ body.a11y-contrast .topbar__brand-logo, body.a11y-contrast .gd-footer__logo { filter: brightness(0) invert(1); /* Vuelve el logo blanco */ } /* --- ESCALA DE TEXTO INTELIGENTE --- */ :root { --a11y-font-scale: 1; /* Valor por defecto */ } /* Cambiamos el tamaño del HTML usando un porcentaje. Esto hará que TODO lo que no tenga un tamaño fijo en PX se mueva suavemente. */ html { font-size: calc(100% * var(--a11y-font-scale)) !important; } /* ¿Qué pasa con los textos que NO cambian? Seguramente tienen el tamaño en "px" en tus otros archivos CSS. Para esos, vamos a usar esta regla que hereda el tamaño pero lo escala: */ body.a11y-scaling-active p, body.a11y-scaling-active span, body.a11y-scaling-active a, body.a11y-scaling-active li, body.a11y-scaling-active h1, body.a11y-scaling-active h2, body.a11y-scaling-active h3 { /* En lugar de fijar un número, le decimos que use tamaños relativos */ /* Si tus fuentes ya están en 'rem' o 'em', no necesitas esto */ }