/* PP Accesibilidad — estilos del widget flotante */ :root { --ppa11y-accent: #0a3d62; --ppa11y-accent-contrast: #ffffff; } #ppa11y-root, #ppa11y-root * { box-sizing: border-box; } .ppa11y-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 999999; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--ppa11y-accent); color: var(--ppa11y-accent-contrast); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease; } .ppa11y-toggle:hover, .ppa11y-toggle:focus-visible { transform: scale(1.06); } .ppa11y-toggle:focus-visible { outline: 3px solid #ffbb33; outline-offset: 2px; } .ppa11y-toggle svg { width: 28px; height: 28px; fill: currentColor; } .ppa11y-panel { position: fixed; left: 16px; bottom: 82px; z-index: 999999; width: 340px; max-width: calc(100vw - 32px); max-height: min(640px, calc(100vh - 110px)); overflow-y: auto; background: #ffffff; color: #1a1a1a; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); padding: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.4; } .ppa11y-panel[hidden] { display: none; } .ppa11y-panel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .ppa11y-panel__header h2 { font-size: 17px; margin: 0; color: #1a1a1a; } .ppa11y-panel__close { background: transparent; border: none; cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 8px; color: #1a1a1a; border-radius: 6px; } .ppa11y-panel__close:hover, .ppa11y-panel__close:focus-visible { background: #eee; } .ppa11y-section { margin-bottom: 14px; } .ppa11y-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #555; margin: 0 0 8px; } .ppa11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ppa11y-btn { display: flex; align-items: center; gap: 8px; width: 100%; background: #f2f4f7; border: 1px solid #dde1e7; border-radius: 8px; padding: 8px 10px; font-size: 13px; cursor: pointer; color: #1a1a1a; text-align: left; } .ppa11y-btn:hover, .ppa11y-btn:focus-visible { background: #e6e9ee; } .ppa11y-btn[aria-pressed="true"] { background: var(--ppa11y-accent); color: var(--ppa11y-accent-contrast); border-color: var(--ppa11y-accent); } .ppa11y-btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; } .ppa11y-reader { display: flex; flex-direction: column; gap: 8px; } .ppa11y-reader__controls { display: flex; gap: 8px; } .ppa11y-reader__controls .ppa11y-btn { width: auto; flex: 1; justify-content: center; } .ppa11y-reader__status { font-size: 12px; color: #555; min-height: 16px; } .ppa11y-reader__speed { display: flex; align-items: center; gap: 8px; font-size: 13px; } .ppa11y-reader__speed input { flex: 1; } .ppa11y-reset { width: 100%; background: #fdecea; border: 1px solid #f5c2c0; color: #a12622; border-radius: 8px; padding: 8px 10px; font-size: 13px; cursor: pointer; } .ppa11y-reset:hover, .ppa11y-reset:focus-visible { background: #f9d8d5; } /* Estados aplicados al del sitio */ html.ppa11y-contrast { filter: invert(1) hue-rotate(180deg); background: #000 !important; } html.ppa11y-contrast img, html.ppa11y-contrast video, html.ppa11y-contrast picture, html.ppa11y-contrast svg { filter: invert(1) hue-rotate(180deg); } html.ppa11y-grayscale { filter: grayscale(1); } html.ppa11y-contrast.ppa11y-grayscale { filter: invert(1) hue-rotate(180deg) grayscale(1); } html.ppa11y-underline a { text-decoration: underline !important; } html.ppa11y-readable-font, html.ppa11y-readable-font body, html.ppa11y-readable-font p, html.ppa11y-readable-font li, html.ppa11y-readable-font span, html.ppa11y-readable-font div { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.01em; word-spacing: 0.05em; } html.ppa11y-big-cursor, html.ppa11y-big-cursor * { cursor: url("../img/cursor-big.svg") 4 4, auto !important; } html.ppa11y-pause-animations *, html.ppa11y-pause-animations *::before, html.ppa11y-pause-animations *::after { animation-play-state: paused !important; transition: none !important; } .ppa11y-reading-active { outline: 3px solid #ffbb33 !important; outline-offset: 2px; border-radius: 2px; } @media (max-width: 480px) { .ppa11y-panel { left: 8px; right: 8px; width: auto; bottom: 76px; } .ppa11y-toggle { left: 10px; bottom: 10px; } }