/* ===================================================== AW Accesibilidad HUS — widget.css v2.0 ===================================================== */ /* ── CONTRASTE: se aplica a , NO a body ── El widget se re-invierte para permanecer visible */ html.aw-contrast-high { filter: contrast(1.75) !important; } html.aw-contrast-invert { filter: invert(1) hue-rotate(180deg) !important; } html.aw-contrast-invert #aw-bar, html.aw-contrast-invert #aw-bar * { filter: invert(1) hue-rotate(180deg) !important; } /* ── Barra ── */ #aw-bar { position: fixed; z-index: 2147483647; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 7px; border-radius: var(--aw-radius, 14px); background: var(--aw-primary, #1a5fa8); box-shadow: 0 8px 28px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.14); } /* ── Posiciones ── */ #aw-bar.pos-right-center { right:0; top:50%; transform:translateY(-50%); border-radius:var(--aw-radius) 0 0 var(--aw-radius); animation:aw-in-right .35s cubic-bezier(.34,1.56,.64,1) both; } #aw-bar.pos-left-center { left:0; top:50%; transform:translateY(-50%); border-radius:0 var(--aw-radius) var(--aw-radius) 0; animation:aw-in-left .35s cubic-bezier(.34,1.56,.64,1) both; } #aw-bar.pos-right-top { right:16px; top:80px; border-radius:var(--aw-radius); animation:aw-in-right .35s cubic-bezier(.34,1.56,.64,1) both; } #aw-bar.pos-right-bottom { right:16px; bottom:24px; border-radius:var(--aw-radius); animation:aw-in-right .35s cubic-bezier(.34,1.56,.64,1) both; } #aw-bar.pos-left-top { left:16px; top:80px; border-radius:var(--aw-radius); animation:aw-in-left .35s cubic-bezier(.34,1.56,.64,1) both; } #aw-bar.pos-left-bottom { left:16px; bottom:24px; border-radius:var(--aw-radius); animation:aw-in-left .35s cubic-bezier(.34,1.56,.64,1) both; } @keyframes aw-in-right { from{opacity:0;transform:translateX(28px) translateY(-50%)} to{opacity:1} } @keyframes aw-in-left { from{opacity:0;transform:translateX(-28px) translateY(-50%)} to{opacity:1} } /* ── Botones ── */ .aw-btn { position: relative; width: var(--aw-btn, 44px); height: var(--aw-btn, 44px); border: none; border-radius: var(--aw-btn-r, 9px); background: var(--aw-secondary, #ffffff); color: var(--aw-icon-color, #1a5fa8); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; outline: none; transition: transform .15s, box-shadow .15s, background .15s; box-shadow: 0 2px 6px rgba(0,0,0,.12); -webkit-tap-highlight-color: transparent; user-select: none; flex-shrink: 0; /* CRÍTICO: tamaño fijo, inmune al resize de fuente */ font-size: var(--aw-icon, 21px) !important; font-weight: 800 !important; line-height: 1 !important; } .aw-btn:hover, .aw-btn:focus-visible { transform: scale(1.1); box-shadow: 0 4px 14px rgba(0,0,0,.2); background: #e0edfb; outline: 2px solid rgba(255,255,255,.6); outline-offset: 1px; } .aw-btn:active { transform: scale(.93); } .aw-btn.aw-active { background: var(--aw-primary, #1a5fa8) !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(255,255,255,.35); } /* Pulsando TTS */ @keyframes aw-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,.0); } } .aw-btn.aw-speaking { background: #ef4444 !important; color: #fff !important; animation: aw-pulse .85s ease-in-out infinite; } /* Etiquetas */ .aw-label { display: none; font-size: 9px !important; font-weight: 600 !important; letter-spacing: .02em; line-height: 1; pointer-events: none; text-transform: uppercase; } #aw-bar.aw-show-labels .aw-label { display: block; } #aw-bar.aw-show-labels .aw-btn { height: calc(var(--aw-btn, 44px) + 13px); padding-bottom: 3px; } /* SVG icon */ .aw-icon { width: var(--aw-icon, 21px); height: var(--aw-icon, 21px); pointer-events: none; flex-shrink: 0; overflow: visible; } /* Tooltip */ .aw-btn::after { content: attr(data-tip); position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(5px); background: #1e293b; color: #fff; font-size: 12px !important; font-weight: 500 !important; white-space: nowrap; padding: 5px 10px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; z-index: 1; } .aw-btn:hover::after, .aw-btn:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); } #aw-bar.pos-left-center .aw-btn::after, #aw-bar.pos-left-top .aw-btn::after, #aw-bar.pos-left-bottom .aw-btn::after { right: auto; left: calc(100% + 10px); transform: translateY(-50%) translateX(-5px); } #aw-bar.pos-left-center .aw-btn:hover::after, #aw-bar.pos-left-top .aw-btn:hover::after, #aw-bar.pos-left-bottom .aw-btn:hover::after { transform: translateY(-50%) translateX(0); } /* Responsive */ @media (max-width:480px) { .aw-btn { width:38px !important; height:38px !important; } #aw-bar { gap:5px; padding:8px 5px; } }