/* ============================================================================ simahelp-a11y.css · Visibilidad y accesibilidad (Fase 1 auditoría UX 2026-09) - Escala tipográfica: base 15px (ajustable A−/A+ vía html[data-escala]) y ningún texto por debajo de 12px (0.8rem). - Objetivos táctiles ≥ 44px en pantallas táctiles; casillas y radios grandes. - Foco visible fuerte, enlace "saltar al contenido", contraste de badges. Carga DESPUÉS de simahelp.css. Se apoya en tokens del tema. ============================================================================ */ :root{--fs-base:15px} html[data-escala="2"]{--fs-base:17px} html[data-escala="3"]{--fs-base:19px} html[data-escala="0"]{--fs-base:14px} body{font-size:var(--fs-base);line-height:1.6} h1{font-size:1.45rem} h2{font-size:1.2rem} h3{font-size:1.02rem} /* --- piso de 12px (0.8rem) para TODO texto secundario del kit --- */ .eyebrow,.nota,.celda-sub,.fila .sub,.dato .k,.metrica .delta,.paginacion,.badge,.certeza,.tarjeta-h .cuenta, .nav-i .conteo,.cajon-h .enlinea,.hito,.hito .fecha,.paleta-lista .grupo,.nav-grupo,.marca small,.comando kbd, .btn-cab .globo,.pestanas .pin,.anillo .centro span,.regresiva .u,.accion-ia em,.fuentes span,.sugerencias button, .paso .punto,.paso .rotulo,.cat-tabla th,.cat-pill,.cat-form .ayuda,.cat-form .err,.cat-card .cat-num,.cat-card .cat-tt small, .usuario small,.silencio,.msj,.badge-rojo,.badge-amarillo,.badge-verde,.badge-gris,.badge-info,th{font-size:.8rem} .eyebrow{letter-spacing:.12em} .nav-grupo{letter-spacing:.1em;padding-top:16px} .badge{padding:5px 11px;line-height:1.35} td{font-size:.9rem;padding:12px 14px} th{padding:12px 14px} .btn{font-size:.9rem} .btn.sm{font-size:.84rem;padding:8px 14px;min-height:40px} .entrada,.forma input:not([type=checkbox]):not([type=radio]),.forma select,.forma textarea{font-size:.95rem;min-height:44px} .forma label,label.campo-l,.cat-form label{font-size:.86rem;color:var(--tx-2)} .nav-i{font-size:.93rem;min-height:44px;padding:10px 14px} .fila .txt{font-size:.9rem} .metrica .etiqueta{font-size:.9rem} .dato .v{font-size:.95rem} .resumen-ia p{font-size:1rem} .accion-ia{font-size:.86rem} .pastilla{font-size:.84rem} .pestanas button{font-size:.88rem;min-height:40px} .opciones button{font-size:.84rem;min-height:40px} .vacio h3{font-size:1rem} .vacio p{font-size:.9rem} .buscador input,.comando{font-size:.9rem} .aviso{font-size:.9rem} .paleta-lista button{font-size:.92rem} /* estilos inline heredados con texto diminuto (hasta migrarlos a componentes) */ [style*="font-size:.6"],[style*="font-size:.7"],[style*="font-size: .6"],[style*="font-size: .7"], [style*="font-size:9px"],[style*="font-size:10px"],[style*="font-size:11px"]{font-size:.8rem!important} [style*="font-size:.8rem"],[style*="font-size:.82rem"]{font-size:.86rem!important} /* --- contraste de badges neutros y texto terciario sobre glass --- */ .badge.neutro,.badge-gris{color:var(--tx-2)} .paginacion{color:var(--tx-2)} .nota{color:var(--tx-3)} .cabecera span[style*="color:var(--tx-2)"]{font-size:.84rem!important} /* --- foco visible fuerte y consistente --- */ :focus-visible{outline:3px solid var(--foco,var(--ia));outline-offset:3px;border-radius:8px} .entrada:focus-visible,.forma input:focus-visible,.forma select:focus-visible,.forma textarea:focus-visible{outline-offset:0} .nav-i:focus-visible,.btn:focus-visible{outline-offset:2px} /* --- enlace para saltar al contenido (teclado / lector de pantalla) --- */ .saltar{position:absolute;left:-9999px;top:8px;z-index:200;padding:10px 16px;border-radius:999px; background:var(--brand);color:#fff;font-weight:700;font-size:.9rem} .saltar:focus{left:12px} /* --- casillas y radios grandes, con color de marca --- */ input[type=checkbox],input[type=radio]{width:22px;height:22px;accent-color:var(--brand);cursor:pointer;flex:none;vertical-align:middle} .radio-chip{min-height:48px;font-size:.95rem} /* --- objetivos táctiles --- */ @media (pointer:coarse){ .btn,.btn.sm{min-height:44px;padding-top:10px;padding-bottom:10px} .btn-cab{width:44px;height:44px} .btn-cab[style]{width:44px!important;height:44px!important} .cat-acc a,.tabla-marco td a.btn-cab,td .btn-cab{width:44px!important;height:44px!important} .nav-i{min-height:48px} .pestanas button,.opciones button,.sugerencias button,.fuentes span{min-height:44px;padding-top:10px;padding-bottom:10px} td a.vinculo,td .badge{padding-top:8px;padding-bottom:8px} .usuario summary{min-height:44px} } /* --- control "Aa" (tamaño de texto / contraste) --- */ .a11y-menu{position:relative} .a11y-menu summary{list-style:none;font-family:var(--f-display);font-weight:800;font-size:.95rem;letter-spacing:-.02em} .a11y-menu summary::-webkit-details-marker{display:none} .a11y-pop{position:absolute;right:0;top:50px;z-index:35;min-width:250px;padding:12px 14px!important;display:flex;flex-direction:column;gap:10px} .a11y-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--tx)} .a11y-fila .grp{display:flex;gap:6px} .a11y-fila button{min-width:44px;min-height:40px;border:1px solid var(--linea-2);border-radius:10px;background:var(--glass); color:var(--tx);font-weight:700;font-size:1rem} .a11y-fila button:hover{border-color:var(--brand);color:var(--brand-2)} .a11y-fila .nivel{font-family:var(--f-dato);font-size:.8rem;color:var(--tx-3);min-width:2ch;text-align:center} .a11y-pop .btn{align-self:flex-start} .publico .a11y-menu{position:fixed;top:12px;right:12px;z-index:30} .publico .a11y-menu summary{width:44px;height:44px;border-radius:999px;border:1px solid var(--linea);background:var(--glass);display:grid;place-items:center;cursor:pointer} .publico .a11y-pop{top:50px} /* --- tamaño mínimo cómodo en móvil sin que crezca la maqueta --- */ @media (max-width:720px){ html:not([data-escala]) {--fs-base:15px} .metrica .valor{font-size:1.9rem} } .cab-sub{display:block;font-size:.84rem;color:var(--tx-2)} /* --- tinta legible sobre fondos tintados (badges de semáforo/prioridad) --- */ [data-theme="light"]{--ok-ink:#0a5a32;--warn-ink:#6b4200;--bad-ink:#8f2a1f;--brand-ink:#5a0f60} [data-theme="dark"],:root:not([data-theme="light"]){--ok-ink:#8ff0bf;--warn-ink:#ffd78a;--bad-ink:#ffb3ab;--brand-ink:#e2b3e2} .badge.ok,.badge-verde,.cat-pill.si,.certeza.exacta,.badge.ia-verificado{color:var(--ok-ink)} .badge.aviso,.badge-amarillo,.certeza.parecido,.badge.ia-sugiere{color:var(--warn-ink)} .badge.grave,.badge-rojo,.certeza.tu-decides,.kprio-critical{color:var(--bad-ink)} .badge.marca,.badge-info{color:var(--brand-ink)} .kprio-high{color:var(--warn-ink)} /* --- Kanban (tablero.html trae su propio