/* ============================================================ ODS Accesibilidad — Fase 7 (PR #6) WCAG 2.2 AA mínimo. Tres modos visuales: normal, alto contraste y oscuro. Lectura fácil con tipografía optimizada. Modo Ministro fullscreen. ============================================================ */ /* ---------------------------------------------- Toggles globales aplicados al ---------------------------------------------- */ /* Tamaño de letra (alto/medio/normal) */ html[data-ods-text="grande"] { font-size: 110%; } html[data-ods-text="enorme"] { font-size: 125%; } /* Modo alto contraste */ html[data-ods-contraste="alto"] { --gob-azul: #000000; --gob-azul-d: #000000; --gob-dorado: #b88a08; --gob-dorado-c: #f0c020; --gob-texto: #000000; --gob-texto-2: #1a1a1a; --gob-texto-3: #333333; --gob-bg: #ffffff; --gob-bg-2: #f0f0f0; --gob-borde: #555555; --gob-borde-2: #333333; background: #fff !important; color: #000 !important; } html[data-ods-contraste="alto"] body { background: #fff; color: #000; } html[data-ods-contraste="alto"] a { color: #0000ee !important; text-decoration: underline; } html[data-ods-contraste="alto"] a:visited { color: #551a8b !important; } html[data-ods-contraste="alto"] .ods-card, html[data-ods-contraste="alto"] .oa-panel, html[data-ods-contraste="alto"] .tb-card, html[data-ods-contraste="alto"] .feed-card, html[data-ods-contraste="alto"] .ai-card { border: 2px solid #000 !important; box-shadow: none !important; } html[data-ods-contraste="alto"] .ods-btn, html[data-ods-contraste="alto"] .oa-btn, html[data-ods-contraste="alto"] .ai-btn { border: 2px solid #000 !important; } html[data-ods-contraste="alto"] .ods-hero, html[data-ods-contraste="alto"] .oa-hero, html[data-ods-contraste="alto"] .tb-hero, html[data-ods-contraste="alto"] .inv-hero, html[data-ods-contraste="alto"] .fd-hero { background: #000 !important; color: #fff !important; } /* Modo oscuro */ html[data-ods-tema="oscuro"] { --gob-azul: #5b9bff; --gob-azul-d: #3a7bdb; --gob-azul-c: #8ec0ff; --gob-dorado: #d9ad2e; --gob-dorado-c: #f5d77d; --gob-texto: #f3f4f6; --gob-texto-2: #d1d5db; --gob-texto-3: #9ca3af; --gob-bg: #0f172a; --gob-bg-2: #1e293b; --gob-borde: #334155; --gob-borde-2: #475569; } html[data-ods-tema="oscuro"] body { background: #0f172a; color: #f3f4f6; } html[data-ods-tema="oscuro"] .oa, html[data-ods-tema="oscuro"] .ods-portal, html[data-ods-tema="oscuro"] .tb-pagina, html[data-ods-tema="oscuro"] .bu-pagina, html[data-ods-tema="oscuro"] .feed-pagina, html[data-ods-tema="oscuro"] .ai-pagina, html[data-ods-tema="oscuro"] .mapa-pagina, html[data-ods-tema="oscuro"] .fd-pagina { background: #0f172a; color: #f3f4f6; } html[data-ods-tema="oscuro"] .oa-panel, html[data-ods-tema="oscuro"] .ods-card, html[data-ods-tema="oscuro"] .tb-card, html[data-ods-tema="oscuro"] .feed-card, html[data-ods-tema="oscuro"] .ai-card, html[data-ods-tema="oscuro"] .bu-item, html[data-ods-tema="oscuro"] .inv-card, html[data-ods-tema="oscuro"] .mapa-canvas, html[data-ods-tema="oscuro"] .mapa-info, html[data-ods-tema="oscuro"] .mapa-toolbar, html[data-ods-tema="oscuro"] .feed-filtros, html[data-ods-tema="oscuro"] .oa-toolbar { background: #1e293b !important; border-color: #334155 !important; color: #f3f4f6 !important; } html[data-ods-tema="oscuro"] .oa-table thead th, html[data-ods-tema="oscuro"] .tb-comp-table th { background: #334155 !important; color: #cbd5e1 !important; } html[data-ods-tema="oscuro"] .oa-table tbody td { color: #e2e8f0 !important; border-color: #334155 !important; } html[data-ods-tema="oscuro"] h1, html[data-ods-tema="oscuro"] h2, html[data-ods-tema="oscuro"] h3, html[data-ods-tema="oscuro"] h4 { color: #93c5fd !important; } /* Modo lectura fácil — tipografía Atkinson Hyperlegible + interlineado amplio */ html[data-ods-lectura="facil"] { font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif !important; } html[data-ods-lectura="facil"] body { font-size: 17px; line-height: 1.85; letter-spacing: 0.01em; } html[data-ods-lectura="facil"] p, html[data-ods-lectura="facil"] li { max-width: 60ch; } html[data-ods-lectura="facil"] h1 { font-size: 32px; line-height: 1.2; } html[data-ods-lectura="facil"] h2 { font-size: 24px; line-height: 1.3; } html[data-ods-lectura="facil"] h3 { font-size: 19px; } html[data-ods-lectura="facil"] .feed-card-titulo, html[data-ods-lectura="facil"] .fd-titulo, html[data-ods-lectura="facil"] .tb-card-nom, html[data-ods-lectura="facil"] .ods-card-name { font-size: 17px; } /* ---------------------------------------------- Modo Ministro (fullscreen para conferencias) ---------------------------------------------- */ html[data-ods-modo="ministro"] body { background: #012845; color: #fff; font-size: 22px; } html[data-ods-modo="ministro"] .navbar-sigpret, html[data-ods-modo="ministro"] header, html[data-ods-modo="ministro"] footer, html[data-ods-modo="ministro"] .ods-portal-footer, html[data-ods-modo="ministro"] .oa-hero-acciones, html[data-ods-modo="ministro"] .ai-disclaimer, html[data-ods-modo="ministro"] .oa-hero { display: none !important; } html[data-ods-modo="ministro"] .ods-portal h1, html[data-ods-modo="ministro"] .tb-hero h1 { font-size: 64px !important; color: #fff !important; } html[data-ods-modo="ministro"] .tb-card { padding: 26px !important; font-size: 1.1em !important; } html[data-ods-modo="ministro"] .tb-gauge-num .big { font-size: 44px !important; } /* ---------------------------------------------- Skip link (saltar al contenido) ---------------------------------------------- */ .ods-skip-link { position: absolute; top: -100px; left: 0; background: #02395e; color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0; z-index: 100000; font-weight: 600; transition: top .2s; text-decoration: none; } .ods-skip-link:focus { top: 0; outline: 3px solid #d9ad2e; outline-offset: 2px; } /* ---------------------------------------------- Focus visible más prominente ---------------------------------------------- */ .ods-portal *:focus-visible, .oa *:focus-visible { outline: 3px solid #d9ad2e !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px rgba(217,173,46,0.25) !important; } /* ============================================================ Toolbar de accesibilidad premium ============================================================ */ .ods-a11y { position: fixed; bottom: 22px; right: 22px; z-index: 9999; display: flex; align-items: center; gap: 6px; padding: 6px; background: rgba(255, 255, 255, 0.96); border-radius: 999px; border: 1px solid rgba(2, 57, 94, 0.10); box-shadow: 0 1px 2px rgba(11, 37, 72, 0.05), 0 12px 32px rgba(11, 37, 72, 0.14), 0 4px 10px rgba(2, 57, 94, 0.06); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s; animation: a11yAparece .45s cubic-bezier(.2,.8,.2,1) .2s both; } @keyframes a11yAparece { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .ods-a11y:hover { box-shadow: 0 1px 2px rgba(11, 37, 72, 0.05), 0 18px 44px rgba(11, 37, 72, 0.18), 0 6px 14px rgba(2, 57, 94, 0.08); } /* Botón toggle (chevron) */ .ods-a11y-toggle { flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: 50%; background: linear-gradient(135deg, #02395e 0%, #1a65a3 100%); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(2, 57, 94, 0.25); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .2s; } .ods-a11y-toggle:hover { transform: scale(1.05); box-shadow: 0 8px 18px rgba(2, 57, 94, 0.32); } .ods-a11y-toggle:focus-visible { outline: 3px solid #d9ad2e; outline-offset: 2px; } .ods-a11y-toggle svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.2,.8,.2,1); } .ods-a11y.is-colapsada .ods-a11y-toggle svg { transform: rotate(180deg); } /* Grupo de botones */ .ods-a11y-grupo { display: flex; align-items: center; gap: 2px; overflow: hidden; max-width: 600px; opacity: 1; transition: max-width .35s cubic-bezier(.2,.8,.2,1), opacity .25s, padding .25s; } .ods-a11y.is-colapsada .ods-a11y-grupo { max-width: 0; opacity: 0; padding: 0; pointer-events: none; } /* Botón individual */ .ods-a11y-btn { position: relative; flex-shrink: 0; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 50%; color: #02395e; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .15s cubic-bezier(.2,.8,.2,1); } .ods-a11y-btn:hover { background: rgba(2, 57, 94, 0.08); transform: translateY(-1px); } .ods-a11y-btn:focus-visible { outline: 3px solid #d9ad2e; outline-offset: 2px; } .ods-a11y-btn .ods-a11y-ico { display: inline-flex; align-items: center; justify-content: center; pointer-events: none; } .ods-a11y-btn .ods-a11y-ico svg { width: 20px; height: 20px; } /* Estado activo: ring dorado + bg suave + indicador pill */ .ods-a11y-btn.is-active { background: rgba(217, 173, 46, 0.18); color: #6b4d00; box-shadow: inset 0 0 0 2px rgba(217, 173, 46, 0.55); } .ods-a11y-btn.is-active::after { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 18px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #d9ad2e, #f5d77d); animation: a11yPulseActivo 1.6s ease-in-out infinite; } @keyframes a11yPulseActivo { 0%, 100% { opacity: 1; transform: translateX(-50%) scaleX(1); } 50% { opacity: .6; transform: translateX(-50%) scaleX(.7); } } /* Tooltip propio (mejor que title) */ .ods-a11y-btn .ods-a11y-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 6px 10px; background: #02395e; color: #fff; border-radius: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .18s, transform .18s cubic-bezier(.2,.8,.2,1); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18); z-index: 2; } .ods-a11y-btn .ods-a11y-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #02395e; } .ods-a11y-btn:hover .ods-a11y-tip, .ods-a11y-btn:focus-visible .ods-a11y-tip { opacity: 1; transform: translateX(-50%) translateY(0); } /* Toast de aviso */ .ods-a11y-aviso { position: fixed; bottom: 80px; right: 22px; z-index: 10000; padding: 12px 20px; background: #02395e; color: #fff; border-radius: 12px; font-size: 13.5px; font-weight: 600; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s cubic-bezier(.2,.8,.2,1), transform .25s cubic-bezier(.2,.8,.2,1); } .ods-a11y-aviso.is-visible { opacity: 1; transform: translateY(0); } /* Modo oscuro adaptado */ html[data-ods-tema="oscuro"] .ods-a11y { background: rgba(30, 41, 59, 0.92); border-color: rgba(148, 163, 184, 0.25); } html[data-ods-tema="oscuro"] .ods-a11y-btn { color: #cbd5e1; } html[data-ods-tema="oscuro"] .ods-a11y-btn:hover { background: rgba(255, 255, 255, 0.08); } html[data-ods-tema="oscuro"] .ods-a11y-btn.is-active { background: rgba(217, 173, 46, 0.22); color: #f5d77d; box-shadow: inset 0 0 0 2px rgba(217, 173, 46, 0.65); } /* Alto contraste adaptado */ html[data-ods-contraste="alto"] .ods-a11y { background: #fff !important; border: 2px solid #000 !important; box-shadow: none !important; backdrop-filter: none !important; } html[data-ods-contraste="alto"] .ods-a11y-btn { color: #000 !important; } html[data-ods-contraste="alto"] .ods-a11y-btn.is-active { background: #ffe082 !important; color: #000 !important; box-shadow: inset 0 0 0 2px #000 !important; } html[data-ods-contraste="alto"] .ods-a11y-toggle { background: #000 !important; color: #fff !important; } /* Mobile: tip más compacto y toolbar más pequeña */ @media (max-width: 640px) { .ods-a11y { bottom: 14px; right: 14px; padding: 4px; } .ods-a11y-btn { width: 36px; height: 36px; } .ods-a11y-btn .ods-a11y-ico svg { width: 18px; height: 18px; } .ods-a11y-toggle { width: 32px; height: 32px; } .ods-a11y-aviso { right: 14px; bottom: 64px; font-size: 12.5px; } } /* Anuncio para lectores de pantalla solamente */ .ods-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; } /* Respetar prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .ods-a11y, .ods-a11y-btn, .ods-a11y-btn.is-active::after, .ods-a11y-aviso, .ods-card, .tb-card, .oa-ods-card, .feed-card, .oa-panel, .ods-btn, .oa-btn { transition: none !important; animation: none !important; } } /* Print friendly */ @media print { .ods-a11y, .ods-a11y-aviso { display: none !important; } .ods-portal { background: #fff !important; color: #000 !important; } }