@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Raleway:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap'); /* ========================================== FUENTES LOCALES - Avantgarde ========================================== */ @font-face { font-family: 'Avantgarde'; src: url('/fonts/avantgarde-bk-bt-2/AVGARDN_2.TTF') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Avantgarde'; src: url('/fonts/avantgarde-bk-bt-2/AVGARDD_2.TTF') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Avantgarde'; src: url('/fonts/avantgarde-bk-bt-2/AVGARDDO_2.TTF') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; } body { font-family: 'Raleway', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--a11y-bg-primary, #0f172a); color: var(--a11y-text-primary, #e2e8f0); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: 'Avantgarde', 'Avant Garde', 'Century Gothic', sans-serif; } #root { margin: 0; padding: 0; width: 100%; } code, pre { font-family: 'IBM Plex Mono', 'SF Mono', Consolas, monospace; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--a11y-bg-secondary, #1e293b); } ::-webkit-scrollbar-thumb { background: var(--a11y-border-light, #475569); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--a11y-text-muted, #64748b); } /* Loading screen */ .loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; gap: 16px; color: var(--a11y-text-secondary, #94a3b8); } .spinner { width: 40px; height: 40px; border: 3px solid var(--a11y-border, #334155); border-top-color: var(--a11y-accent, #0891b2); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Select — chevron personalizado */ select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px !important; padding-right: 36px !important; } /* Evitar que las opciones hereden el chevron SVG del select */ select option { background-image: none !important; padding-right: 0 !important; } /* Focus styles */ :focus-visible { outline: 2px solid var(--a11y-accent, #0891b2); outline-offset: 2px; } /* Selection */ ::selection { background: rgba(var(--a11y-accent-rgb, 8, 145, 178), 0.3); } /* * Sistema de Accesibilidad — Variables CSS y reglas funcionales * * Estrategia: atributos data-a11y-* en con selectores de alta * especificidad para sobreescribir los colores hardcodeados de * styled-components sin tocar cada componente individual. */ /* ============================================================ VARIABLES BASE (tema oscuro por defecto) ============================================================ */ :root { --a11y-bg-primary: #0f172a; --a11y-bg-secondary: #1e293b; --a11y-bg-tertiary: #334155; --a11y-bg-hover: #334155; --a11y-bg-card: #1e293b; --a11y-bg-dropdown: #1e293b; --a11y-bg-modal: #1e293b; --a11y-bg-sidebar: #1e293b; --a11y-sidebar-text: #e2e8f0; --a11y-sidebar-text-muted: #94a3b8; --a11y-sidebar-accent: #0891b2; --a11y-sidebar-hover: rgba(255, 255, 255, 0.08); --a11y-sidebar-border: rgba(255, 255, 255, 0.1); --a11y-bg-input: #0f172a; --a11y-text-primary: #e2e8f0; --a11y-text-secondary: #94a3b8; --a11y-text-secondary-rgb: 148, 163, 184; --a11y-text-muted: #64748b; --a11y-text-bright: #f1f5f9; --a11y-border: #334155; --a11y-border-light: #475569; --a11y-accent: #0891b2; --a11y-accent-hover: #06b6d4; --a11y-link: #0891b2; --a11y-success: #22c55e; --a11y-warning: #f59e0b; --a11y-error: #ef4444; --a11y-shadow: rgba(0, 0, 0, 0.3); --a11y-shadow-lg: rgba(0, 0, 0, 0.5); --a11y-divider: #334155; --a11y-code-bg: #1e293b; /* RGB companions para rgba() */ --a11y-bg-primary-rgb: 15, 23, 42; --a11y-bg-secondary-rgb: 30, 41, 59; --a11y-bg-tertiary-rgb: 51, 65, 85; --a11y-border-rgb: 51, 65, 85; --a11y-border-light-rgb: 71, 85, 105; --a11y-accent-rgb: 8, 145, 178; --a11y-success-rgb: 34, 197, 94; --a11y-warning-rgb: 245, 158, 11; --a11y-error-rgb: 239, 68, 68; --a11y-text-primary-rgb: 226, 232, 240; --a11y-text-muted-rgb: 100, 116, 139; /* Colores de acento extendidos */ --a11y-blue: #3b82f6; --a11y-blue-hover: #2563eb; --a11y-blue-rgb: 59, 130, 246; --a11y-purple: #8b5cf6; --a11y-purple-rgb: 139, 92, 246; --a11y-indigo: #6366f1; --a11y-indigo-rgb: 99, 102, 241; --a11y-cyan: #22d3ee; --a11y-cyan-rgb: 34, 211, 238; --a11y-yellow: #fbbf24; --a11y-yellow-rgb: 251, 191, 36; --a11y-pink: #ec4899; --a11y-pink-rgb: 236, 72, 153; --a11y-orange: #f89939; --a11y-orange-rgb: 248, 153, 57; --a11y-success-bright: #4ade80; --a11y-error-light: #f87171; /* Colores de sintaxis */ --a11y-syntax-keyword: #c084fc; --a11y-syntax-string: #4ade80; --a11y-syntax-comment: #64748b; --a11y-syntax-number: #fbbf24; --a11y-syntax-builtin: #38bdf8; --a11y-syntax-method: #f472b6; --a11y-syntax-decorator: #fb923c; --a11y-syntax-function: #60a5fa; --a11y-syntax-operator: #94a3b8; --a11y-syntax-default: #e2e8f0; /* Bloques destacados (guías, reflexiones, etc.) */ --a11y-block-accent-bg: rgba(8, 145, 178, 0.08); --a11y-block-accent-border: rgba(8, 145, 178, 0.2); --a11y-block-accent-border-hover: rgba(8, 145, 178, 0.4); --a11y-block-warning-bg: rgba(245, 158, 11, 0.06); --a11y-block-warning-border: rgba(245, 158, 11, 0.2); --a11y-block-warning-border-hover: rgba(245, 158, 11, 0.4); /* Tintes para elementos activos (tabs, badges, selecciones) */ --a11y-tint-accent: rgba(8, 145, 178, 0.15); --a11y-tint-success: rgba(34, 197, 94, 0.12); --a11y-tint-warning: rgba(245, 158, 11, 0.12); --a11y-tint-error: rgba(239, 68, 68, 0.12); --a11y-tint-purple: rgba(139, 92, 246, 0.15); /* Badges semánticos — fondo translúcido + texto vivo (oscuro) */ --a11y-badge-success-bg: rgba(34, 197, 94, 0.15); --a11y-badge-success-text: #4ade80; --a11y-badge-warning-bg: rgba(245, 158, 11, 0.15); --a11y-badge-warning-text: #fbbf24; --a11y-badge-error-bg: rgba(239, 68, 68, 0.15); --a11y-badge-error-text: #f87171; --a11y-badge-neutral-bg: rgba(100, 116, 139, 0.15); --a11y-badge-neutral-text: #94a3b8; --a11y-badge-accent-bg: rgba(8, 145, 178, 0.15); --a11y-badge-accent-text: #22d3ee; --a11y-badge-blue-bg: rgba(59, 130, 246, 0.15); --a11y-badge-blue-text: #60a5fa; --a11y-badge-purple-bg: rgba(139, 92, 246, 0.15); --a11y-badge-purple-text: #c084fc; } /* ============================================================ MODOS DE COLOR ============================================================ */ /* --- ALTO CONTRASTE --- */ html[data-a11y-mode="high-contrast"] { --a11y-bg-primary: #000000; --a11y-bg-secondary: #111111; --a11y-bg-tertiary: #222222; --a11y-bg-hover: #333333; --a11y-bg-card: #111111; --a11y-bg-dropdown: #111111; --a11y-bg-modal: #111111; --a11y-bg-sidebar: #111111; --a11y-sidebar-text: #ffffff; --a11y-sidebar-text-muted: #b0b0b0; --a11y-sidebar-accent: #00d4ff; --a11y-sidebar-hover: rgba(255, 255, 255, 0.1); --a11y-sidebar-border: rgba(255, 255, 255, 0.12); --a11y-bg-input: #000000; --a11y-text-primary: #ffffff; --a11y-text-secondary: #e0e0e0; --a11y-text-secondary-rgb: 224, 224, 224; --a11y-text-muted: #b0b0b0; --a11y-text-bright: #ffffff; --a11y-border: #555555; --a11y-border-light: #777777; --a11y-accent: #00d4ff; --a11y-accent-hover: #33ddff; --a11y-link: #ffff00; --a11y-success: #00ff00; --a11y-warning: #ffff00; --a11y-error: #ff4444; --a11y-shadow: rgba(255, 255, 255, 0.1); --a11y-shadow-lg: rgba(255, 255, 255, 0.15); --a11y-divider: #555555; --a11y-code-bg: #111111; --a11y-bg-primary-rgb: 0, 0, 0; --a11y-bg-secondary-rgb: 17, 17, 17; --a11y-bg-tertiary-rgb: 34, 34, 34; --a11y-border-rgb: 85, 85, 85; --a11y-border-light-rgb: 119, 119, 119; --a11y-accent-rgb: 0, 212, 255; --a11y-success-rgb: 0, 255, 0; --a11y-warning-rgb: 255, 255, 0; --a11y-error-rgb: 255, 68, 68; --a11y-text-primary-rgb: 255, 255, 255; --a11y-text-muted-rgb: 176, 176, 176; --a11y-blue: #66b3ff; --a11y-blue-hover: #3399ff; --a11y-blue-rgb: 102, 179, 255; --a11y-purple: #b794f6; --a11y-purple-rgb: 183, 148, 246; --a11y-indigo: #8b8ff8; --a11y-indigo-rgb: 139, 143, 248; --a11y-cyan: #44e8ff; --a11y-cyan-rgb: 68, 232, 255; --a11y-yellow: #ffdd44; --a11y-yellow-rgb: 255, 221, 68; --a11y-pink: #ff6eb4; --a11y-pink-rgb: 255, 110, 180; --a11y-orange: #ffaa55; --a11y-orange-rgb: 255, 170, 85; --a11y-success-bright: #44ff44; --a11y-error-light: #ff6666; --a11y-syntax-keyword: #e0aaff; --a11y-syntax-string: #66ff66; --a11y-syntax-comment: #b0b0b0; --a11y-syntax-number: #ffdd44; --a11y-syntax-builtin: #66ddff; --a11y-syntax-method: #ff88cc; --a11y-syntax-decorator: #ffaa66; --a11y-syntax-function: #88bbff; --a11y-syntax-operator: #e0e0e0; --a11y-syntax-default: #ffffff; --a11y-block-accent-bg: rgba(0, 212, 255, 0.1); --a11y-block-accent-border: rgba(0, 212, 255, 0.25); --a11y-block-accent-border-hover: rgba(0, 212, 255, 0.5); --a11y-block-warning-bg: rgba(255, 255, 0, 0.06); --a11y-block-warning-border: rgba(255, 255, 0, 0.2); --a11y-block-warning-border-hover: rgba(255, 255, 0, 0.4); --a11y-tint-accent: rgba(0, 212, 255, 0.15); --a11y-tint-success: rgba(0, 255, 0, 0.12); --a11y-tint-warning: rgba(255, 255, 0, 0.12); --a11y-tint-error: rgba(255, 0, 0, 0.12); --a11y-tint-purple: rgba(183, 148, 246, 0.15); --a11y-badge-success-bg: rgba(0, 255, 0, 0.18); --a11y-badge-success-text: #00ff00; --a11y-badge-warning-bg: rgba(255, 255, 0, 0.18); --a11y-badge-warning-text: #ffff00; --a11y-badge-error-bg: rgba(255, 0, 0, 0.18); --a11y-badge-error-text: #ff6666; --a11y-badge-neutral-bg: rgba(255, 255, 255, 0.12); --a11y-badge-neutral-text: #ffffff; --a11y-badge-accent-bg: rgba(0, 212, 255, 0.18); --a11y-badge-accent-text: #00d4ff; --a11y-badge-blue-bg: rgba(96, 165, 250, 0.2); --a11y-badge-blue-text: #93c5fd; --a11y-badge-purple-bg: rgba(192, 132, 252, 0.2); --a11y-badge-purple-text: #d8b4fe; } /* --- BAJO CONTRASTE --- */ html[data-a11y-mode="low-contrast"] { --a11y-bg-primary: #1a1f2e; --a11y-bg-secondary: #222838; --a11y-bg-tertiary: #2c3344; --a11y-bg-hover: #2c3344; --a11y-bg-card: #222838; --a11y-bg-dropdown: #222838; --a11y-bg-modal: #222838; --a11y-bg-sidebar: #222838; --a11y-sidebar-text: #b8c4d4; --a11y-sidebar-text-muted: #7788a0; --a11y-sidebar-accent: #5bc0d0; --a11y-sidebar-hover: rgba(255, 255, 255, 0.06); --a11y-sidebar-border: rgba(255, 255, 255, 0.08); --a11y-bg-input: #1a1f2e; --a11y-text-primary: #b8c4d4; --a11y-text-secondary: #8898ac; --a11y-text-secondary-rgb: 136, 152, 172; --a11y-text-muted: #667788; --a11y-text-bright: #c8d4e4; --a11y-border: #2c3344; --a11y-border-light: #3a4458; --a11y-accent: #5da8c0; --a11y-accent-hover: #6bb8d0; --a11y-link: #5da8c0; --a11y-success: #6bc480; --a11y-warning: #c4a050; --a11y-error: #c06060; --a11y-shadow: rgba(0, 0, 0, 0.2); --a11y-shadow-lg: rgba(0, 0, 0, 0.3); --a11y-divider: #2c3344; --a11y-code-bg: #222838; --a11y-bg-primary-rgb: 26, 31, 46; --a11y-bg-secondary-rgb: 34, 40, 56; --a11y-bg-tertiary-rgb: 44, 51, 68; --a11y-border-rgb: 44, 51, 68; --a11y-border-light-rgb: 58, 68, 88; --a11y-accent-rgb: 93, 168, 192; --a11y-success-rgb: 107, 196, 128; --a11y-warning-rgb: 196, 160, 80; --a11y-error-rgb: 192, 96, 96; --a11y-text-primary-rgb: 184, 196, 212; --a11y-text-muted-rgb: 102, 119, 136; --a11y-blue: #5b9bd5; --a11y-blue-hover: #4a8bc5; --a11y-blue-rgb: 91, 155, 213; --a11y-purple: #9b8ad5; --a11y-purple-rgb: 155, 138, 213; --a11y-indigo: #8b8fd5; --a11y-indigo-rgb: 139, 143, 213; --a11y-cyan: #5bc0d0; --a11y-cyan-rgb: 91, 192, 208; --a11y-yellow: #d5b050; --a11y-yellow-rgb: 213, 176, 80; --a11y-pink: #d58baa; --a11y-pink-rgb: 213, 139, 170; --a11y-orange: #d5a055; --a11y-orange-rgb: 213, 160, 85; --a11y-success-bright: #7dd4a0; --a11y-error-light: #d58080; --a11y-syntax-keyword: #b095e0; --a11y-syntax-string: #7dd4a0; --a11y-syntax-comment: #667788; --a11y-syntax-number: #d5b050; --a11y-syntax-builtin: #6bb8d0; --a11y-syntax-method: #d5a0c0; --a11y-syntax-decorator: #d5a870; --a11y-syntax-function: #7bb0d5; --a11y-syntax-operator: #8898ac; --a11y-syntax-default: #b8c4d4; --a11y-block-accent-bg: rgba(93, 168, 192, 0.08); --a11y-block-accent-border: rgba(93, 168, 192, 0.2); --a11y-block-accent-border-hover: rgba(93, 168, 192, 0.4); --a11y-block-warning-bg: rgba(196, 160, 80, 0.06); --a11y-block-warning-border: rgba(196, 160, 80, 0.2); --a11y-block-warning-border-hover: rgba(196, 160, 80, 0.4); --a11y-tint-accent: rgba(93, 168, 192, 0.15); --a11y-tint-success: rgba(94, 178, 106, 0.12); --a11y-tint-warning: rgba(196, 160, 80, 0.12); --a11y-tint-error: rgba(192, 100, 100, 0.12); --a11y-tint-purple: rgba(155, 138, 213, 0.15); --a11y-badge-success-bg: rgba(94, 178, 106, 0.15); --a11y-badge-success-text: #7ec88a; --a11y-badge-warning-bg: rgba(196, 160, 80, 0.15); --a11y-badge-warning-text: #c8a85a; --a11y-badge-error-bg: rgba(192, 100, 100, 0.15); --a11y-badge-error-text: #d08080; --a11y-badge-neutral-bg: rgba(140, 148, 160, 0.15); --a11y-badge-neutral-text: #8c94a0; --a11y-badge-accent-bg: rgba(100, 160, 200, 0.15); --a11y-badge-accent-text: #78b8d8; --a11y-badge-blue-bg: rgba(80, 120, 200, 0.15); --a11y-badge-blue-text: #7ea8d0; --a11y-badge-purple-bg: rgba(140, 100, 200, 0.15); --a11y-badge-purple-text: #a890c8; } /* --- SEPIA --- */ html[data-a11y-mode="sepia"] { --a11y-bg-primary: #e5d9c3; --a11y-bg-secondary: #ddd0b8; --a11y-bg-tertiary: #d4c7ae; --a11y-bg-hover: #ddd0b8; --a11y-bg-card: #f4ecd8; --a11y-bg-dropdown: #f4ecd8; --a11y-bg-modal: #f4ecd8; --a11y-bg-sidebar: #dfd3bd; --a11y-sidebar-text: #433422; --a11y-sidebar-text-muted: #6b5d4a; --a11y-sidebar-accent: #8a6420; --a11y-sidebar-hover: rgba(0, 0, 0, 0.06); --a11y-sidebar-border: rgba(0, 0, 0, 0.1); --a11y-bg-input: #f4ecd8; --a11y-text-primary: #433422; --a11y-text-secondary: #6b5a44; --a11y-text-secondary-rgb: 107, 90, 68; --a11y-text-muted: #8a7a64; --a11y-text-bright: #2d2010; --a11y-border: #c4b898; --a11y-border-light: #b0a488; --a11y-accent: #8b6914; --a11y-accent-hover: #a07a1a; --a11y-link: #6b4e0a; --a11y-success: #4a7a2a; --a11y-warning: #8b6914; --a11y-error: #a03030; --a11y-shadow: rgba(0, 0, 0, 0.08); --a11y-shadow-lg: rgba(0, 0, 0, 0.12); --a11y-divider: #c4b898; --a11y-code-bg: #e8dcc8; --a11y-bg-primary-rgb: 229, 217, 195; --a11y-bg-secondary-rgb: 221, 208, 184; --a11y-bg-tertiary-rgb: 212, 199, 174; --a11y-border-rgb: 196, 184, 152; --a11y-border-light-rgb: 176, 164, 136; --a11y-accent-rgb: 139, 105, 20; --a11y-success-rgb: 74, 122, 42; --a11y-warning-rgb: 139, 105, 20; --a11y-error-rgb: 160, 48, 48; --a11y-text-primary-rgb: 67, 52, 34; --a11y-text-muted-rgb: 138, 122, 100; --a11y-blue: #2d5a9e; --a11y-blue-hover: #244b85; --a11y-blue-rgb: 45, 90, 158; --a11y-purple: #6b4a9e; --a11y-purple-rgb: 107, 74, 158; --a11y-indigo: #5a5a9e; --a11y-indigo-rgb: 90, 90, 158; --a11y-cyan: #1a8a9e; --a11y-cyan-rgb: 26, 138, 158; --a11y-yellow: #9e7a14; --a11y-yellow-rgb: 158, 122, 20; --a11y-pink: #9e4a6e; --a11y-pink-rgb: 158, 74, 110; --a11y-orange: #9e6a1a; --a11y-orange-rgb: 158, 106, 26; --a11y-success-bright: #3a8a30; --a11y-error-light: #c04040; --a11y-infobox-tip-bg: rgba(74, 122, 42, 0.08); --a11y-infobox-warning-bg: rgba(139, 105, 20, 0.08); --a11y-infobox-danger-bg: rgba(160, 48, 48, 0.08); --a11y-question-bg: rgba(107, 74, 158, 0.08); --a11y-objectives-bg: rgba(74, 122, 42, 0.06); --a11y-code-inline-bg: transparent; --a11y-code-inline-color: #6b4e0a; --a11y-code-inline-border: transparent; --a11y-comparison-good-bg: rgba(74, 122, 42, 0.08); --a11y-comparison-bad-bg: rgba(160, 48, 48, 0.08); --a11y-syntax-keyword: #6b21a8; --a11y-syntax-string: #166534; --a11y-syntax-comment: #78716c; --a11y-syntax-number: #92400e; --a11y-syntax-builtin: #1e40af; --a11y-syntax-method: #9d174d; --a11y-syntax-decorator: #9a3412; --a11y-syntax-function: #1e40af; --a11y-syntax-operator: #57534e; --a11y-syntax-default: #433422; --a11y-block-accent-bg: #d9cdb5; --a11y-block-accent-border: #c4b898; --a11y-block-accent-border-hover: #a89870; --a11y-block-warning-bg: #e0d4be; --a11y-block-warning-border: #c8b88a; --a11y-block-warning-border-hover: #b0a06a; --a11y-tint-accent: #d4cbb2; --a11y-tint-success: #d0dcc0; --a11y-tint-warning: #e0d4be; --a11y-tint-error: #e0ccc0; --a11y-tint-purple: #d8d0c8; --a11y-badge-success-bg: #c8d8b8; --a11y-badge-success-text: #3d5a28; --a11y-badge-warning-bg: #e0d4a8; --a11y-badge-warning-text: #6b4f10; --a11y-badge-error-bg: #dcc0b0; --a11y-badge-error-text: #7a2e2e; --a11y-badge-neutral-bg: #d0c8bc; --a11y-badge-neutral-text: #5c5040; --a11y-badge-accent-bg: #c8d4c0; --a11y-badge-accent-text: #3a5830; --a11y-badge-blue-bg: #c8d4e0; --a11y-badge-blue-text: #2a4a7a; --a11y-badge-purple-bg: #d4c8e0; --a11y-badge-purple-text: #4a2a7a; } /* --- CLARO --- Jerarquía de capas (de más oscuro a más claro): Página (primary) → Secciones/paneles (secondary) → Cards elevadas (card) Esto crea el efecto "papel sobre mesa": el contenido flota visualmente sobre el fondo de la página, igual que en Notion, Linear o GitHub. Los rgba(--a11y-bg-tertiary-rgb, 0.4) usados en styled-components producen un tinte suave sobre las secciones blancas — perfecto para feature cards, bloques comparativos, etc. WCAG AA cumplido: text-primary (#1a202c) sobre secondary (#f0f3f7) = 14.5:1 text-secondary(#4a5568) sobre secondary (#f0f3f7) = 7.4:1 text-muted (#64748b) sobre secondary (#f0f3f7) = 4.6:1 ≥ 4.5 ✓ --- */ html[data-a11y-mode="light"] { /* ── "Luz Natural" ── * Inspirado en un aula Montessori: superficies cálidas de madera clara, * papel de calidad, luz natural. Blancos cálidos (Stone) en vez de * azul-grises fríos (Slate). Acento índigo = tinta sobre papel. * * WCAG AA verificado: * #1c1917 sobre #fdfcfa = ~17:1 ✓ * #57534e sobre #fdfcfa = ~7.5:1 ✓ * #78716c sobre #fdfcfa = ~4.8:1 ✓ * #4f46e5 sobre #fdfcfa = ~5.2:1 ✓ */ /* Fondos — blanco limpio (misma filosofía que Kobalto Escuela) */ --a11y-bg-primary: #ffffff; /* Página / fondo general — blanco puro */ --a11y-bg-secondary: #f9fafb; /* Secciones / paneles — Gray-50 */ --a11y-bg-tertiary: #f3f4f6; /* Hover, nested, zebra-rows — Gray-100 */ --a11y-bg-hover: #f3f4f6; /* Hover explícito — Gray-100 */ --a11y-bg-card: #ffffff; /* Cards elevadas — blanco puro */ --a11y-bg-dropdown: #ffffff; --a11y-bg-modal: #ffffff; /* Modales — blanco puro */ --a11y-bg-sidebar: #f9fafb; /* Sidebar — Gray-50 */ --a11y-sidebar-text: #111827; --a11y-sidebar-text-muted: #6b7280; --a11y-sidebar-accent: #4f46e5; --a11y-sidebar-hover: rgba(0, 0, 0, 0.05); --a11y-sidebar-border: rgba(0, 0, 0, 0.08); --a11y-bg-input: #ffffff; /* Inputs — blanco puro */ --a11y-code-bg: #f3f4f6; /* Code blocks — Gray-100 */ --a11y-divider: #e5e7eb; /* Gray-200 */ /* Texto — Gray neutro, máxima legibilidad */ --a11y-text-primary: #111827; /* Gray-900 */ --a11y-text-secondary: #374151; /* Gray-700 */ --a11y-text-secondary-rgb: 55, 65, 81; --a11y-text-muted: #6b7280; /* Gray-500 */ --a11y-text-bright: #030712; /* Gray-950 */ /* Bordes — Gray neutro, limpios */ --a11y-border: #e5e7eb; /* Gray-200 */ --a11y-border-light: #9ca3af; /* Gray-400 */ /* Acento — índigo refinado (tinta sobre papel) */ --a11y-accent: #4f46e5; /* Indigo-600 — elegante, profesional */ --a11y-accent-hover: #4338ca; /* Indigo-700 — oscurece al hover */ --a11y-link: #4338ca; /* Indigo-700 — distinguible pero no chillón */ --a11y-success: #15803d; --a11y-warning: #92400e; /* Amber-800 — más refinado */ --a11y-error: #b91c1c; /* Red-800 — serio pero no agresivo */ /* Sombras — neutras, con presencia real */ --a11y-shadow: rgba(0, 0, 0, 0.08); --a11y-shadow-lg: rgba(0, 0, 0, 0.12); /* RGB companions para rgba() */ --a11y-bg-primary-rgb: 255, 255, 255; --a11y-bg-secondary-rgb: 249, 250, 251; --a11y-bg-tertiary-rgb: 243, 244, 246; --a11y-border-rgb: 229, 231, 235; --a11y-border-light-rgb: 156, 163, 175; --a11y-accent-rgb: 79, 70, 229; --a11y-success-rgb: 21, 128, 61; --a11y-warning-rgb: 146, 64, 14; --a11y-error-rgb: 185, 28, 28; --a11y-text-primary-rgb: 17, 24, 39; --a11y-text-muted-rgb: 107, 114, 128; /* Colores de acento extendidos */ --a11y-blue: #2563eb; --a11y-blue-hover: #1d4ed8; --a11y-blue-rgb: 37, 99, 235; --a11y-purple: #7c3aed; --a11y-purple-rgb: 124, 58, 237; --a11y-indigo: #4f46e5; --a11y-indigo-rgb: 79, 70, 229; --a11y-cyan: #0891b2; --a11y-cyan-rgb: 8, 145, 178; --a11y-yellow: #a16207; --a11y-yellow-rgb: 161, 98, 7; --a11y-pink: #be185d; --a11y-pink-rgb: 190, 24, 93; --a11y-orange: #b45309; --a11y-orange-rgb: 180, 83, 9; --a11y-success-bright: #16a34a; --a11y-error-light: #ef4444; /* Bloques de contenido resaltados */ --a11y-infobox-tip-bg: #f0fdf4; --a11y-infobox-warning-bg: #fffbeb; --a11y-infobox-danger-bg: #fef2f2; --a11y-question-bg: #f5f3ff; --a11y-objectives-bg: #f0fdf4; /* Code inline — tinte índigo sutil, con personalidad */ --a11y-code-inline-bg: rgba(79, 70, 229, 0.06); --a11y-code-inline-color: #3730a3; /* Indigo-800 */ --a11y-code-inline-border: rgba(79, 70, 229, 0.12); /* Comparaciones — tinte semántico claro */ --a11y-comparison-good-bg: #f0fdf4; --a11y-comparison-bad-bg: #fef2f2; /* Sintaxis — ajustada para coherencia con acento índigo */ --a11y-syntax-keyword: #6d28d9; /* Violet-700 */ --a11y-syntax-string: #047857; --a11y-syntax-comment: #9ca3af; /* Gray-400 */ --a11y-syntax-number: #b45309; --a11y-syntax-builtin: #4f46e5; /* Indigo — coherente con acento */ --a11y-syntax-method: #be185d; --a11y-syntax-decorator: #b45309; --a11y-syntax-function: #1d4ed8; --a11y-syntax-operator: #6b7280; /* Gray-500 — más discreto */ --a11y-syntax-default: #111827; /* Gray-900 */ /* Bloques destacados — coherentes con acento índigo */ --a11y-block-accent-bg: #eef2ff; /* Indigo-50 */ --a11y-block-accent-border: #c7d2fe; /* Indigo-200 */ --a11y-block-accent-border-hover: #a5b4fc; /* Indigo-300 */ --a11y-block-warning-bg: #fefce8; --a11y-block-warning-border: #fde68a; /* Yellow-200 */ --a11y-block-warning-border-hover: #fbbf24; /* Yellow-400 */ /* Tintes para elementos activos — coherentes con índigo */ --a11y-tint-accent: #eef2ff; /* Indigo-50 */ --a11y-tint-success: #f0fdf4; /* Green-50 */ --a11y-tint-warning: #fefce8; /* Yellow-50 */ --a11y-tint-error: #fef2f2; --a11y-tint-purple: #f5f3ff; /* Badges — fondo saturado + texto oscuro para contraste sobre blanco */ --a11y-badge-success-bg: #dcfce7; /* Green-100 */ --a11y-badge-success-text: #166534; /* Green-800 */ --a11y-badge-warning-bg: #fef3c7; /* Amber-100 */ --a11y-badge-warning-text: #92400e; /* Amber-800 */ --a11y-badge-error-bg: #fee2e2; /* Red-100 */ --a11y-badge-error-text: #991b1b; /* Red-800 */ --a11y-badge-neutral-bg: #f3f4f6; /* Gray-100 */ --a11y-badge-neutral-text: #374151; /* Gray-700 */ --a11y-badge-accent-bg: #e0e7ff; /* Indigo-100 */ --a11y-badge-accent-text: #3730a3; /* Indigo-800 */ --a11y-badge-blue-bg: #dbeafe; /* Blue-100 */ --a11y-badge-blue-text: #1e40af; /* Blue-800 */ --a11y-badge-purple-bg: #ede9fe; /* Violet-100 */ --a11y-badge-purple-text: #5b21b6; /* Violet-800 */ } /* --- COSTA — Mar y arena --- */ html[data-a11y-mode="costa"] { /* ── "Costa" — v2 ── * Costa mediterránea al amanecer: arena blanca bajo los pies, bruma * azulada en el horizonte, el sonido de las olas, sal en el aire. * * Principios de diseño: * 1. Fondo arena blanca (cálido muy sutil) — NO azul saturado. * Evita "fatiga del azul" manteniendo calidez de playa. * 2. Azul presente en sidebar (bruma marina), bordes (sal/espuma), * code-bg (charco), acento — la identidad costera vive aquí. * 3. Arena dorada como complementario para warnings y estados. * 4. Texto azul marino profundo — legibilidad natural sobre arena. * * WCAG AA verificado: * #162c3a sobre #f4f7f9 = ~14:1 ✓ * #38545e sobre #f4f7f9 = ~7.3:1 ✓ * #566e78 sobre #f4f7f9 = ~5.0:1 ✓ (body text) * #0a6478 sobre #f4f7f9 = ~5.8:1 ✓ (accent) * #8a6828 sobre #f4f7f9 = ~4.5:1 ✓ (warning) */ /* Fondos — luz del mar reflejada: blancos con brisa azulada */ --a11y-bg-primary: #f4f7f9; /* Cielo pálido sobre arena mojada */ --a11y-bg-secondary: #eef2f5; /* Brisa suave — paneles */ --a11y-bg-tertiary: #e4e9ee; /* Espuma seca — zebra */ --a11y-bg-hover: #dae1e7; /* Ola suave — hover */ --a11y-bg-card: #ffffff; /* Espuma blanca — cards elevadas */ --a11y-bg-dropdown: #ffffff; --a11y-bg-modal: #f4f7f9; /* Cielo pálido — modales */ --a11y-bg-sidebar: #d0dce6; /* Bruma costera — azul-gris pálido */ --a11y-sidebar-text: #162c3a; --a11y-sidebar-text-muted: #3a5868; --a11y-sidebar-accent: #1a6898; --a11y-sidebar-hover: rgba(0, 0, 0, 0.05); --a11y-sidebar-border: rgba(0, 0, 0, 0.08); --a11y-bg-input: #ffffff; --a11y-code-bg: #e6ecf0; /* Charco de marea — azulado suave */ --a11y-divider: #c0cad2; /* Sal cristalizada */ /* Texto — azul marino profundo, alma del océano */ --a11y-text-primary: #162c3a; /* Azul noche de puerto — cuerpo */ --a11y-text-secondary: #38545e; /* Azul-gris de roca marina — secundario */ --a11y-text-secondary-rgb: 56, 84, 94; --a11y-text-muted: #566e78; /* Horizonte brumoso — muted (pasa AA) */ --a11y-text-bright: #0c1e2a; /* Abismo marino — headings */ /* Bordes — sal, espuma y brisa (tonos fríos marinos) */ --a11y-border: #c0ccd4; /* Espuma seca */ --a11y-border-light: #94aab6; /* Guijarro mojado */ /* Acento — azul lapislázuli (piedra preciosa del mar) */ --a11y-accent: #2563a8; /* Lapislázuli */ --a11y-accent-hover: #1d4f88; /* Lapislázuli profundo */ --a11y-link: #1d5090; /* Lapislázuli oscuro */ --a11y-success: #1a7a3a; /* Alga fresca */ --a11y-warning: #8a6828; /* Arena mojada dorada */ --a11y-error: #b03028; /* Coral rojo */ /* Sombras — reflejos en charco de marea */ --a11y-shadow: rgba(22, 44, 58, 0.07); --a11y-shadow-lg: rgba(22, 44, 58, 0.13); /* RGB companions */ --a11y-bg-primary-rgb: 244, 247, 249; --a11y-bg-secondary-rgb: 238, 242, 245; --a11y-bg-tertiary-rgb: 228, 233, 238; --a11y-border-rgb: 192, 202, 210; --a11y-border-light-rgb: 148, 170, 182; --a11y-accent-rgb: 37, 99, 168; --a11y-success-rgb: 26, 122, 58; --a11y-warning-rgb: 138, 104, 40; --a11y-error-rgb: 176, 48, 40; --a11y-text-primary-rgb: 22, 44, 58; --a11y-text-muted-rgb: 86, 110, 120; /* Colores extendidos — paleta del litoral */ --a11y-blue: #1a6898; /* Mar abierto */ --a11y-blue-hover: #155478; --a11y-blue-rgb: 26, 104, 152; --a11y-purple: #5a4a90; /* Erizo de mar */ --a11y-purple-rgb: 90, 74, 144; --a11y-indigo: #454a98; /* Crepúsculo sobre el mar */ --a11y-indigo-rgb: 69, 74, 152; --a11y-cyan: #0a6478; /* Océano */ --a11y-cyan-rgb: 10, 100, 120; --a11y-yellow: #8a6828; /* Arena mojada */ --a11y-yellow-rgb: 138, 104, 40; --a11y-pink: #904058; /* Anémona marina */ --a11y-pink-rgb: 144, 64, 88; --a11y-orange: #8a5a20; /* Madera varada */ --a11y-orange-rgb: 138, 90, 32; --a11y-success-bright: #1a9a42; /* Alga viva */ --a11y-error-light: #d04040; /* Coral claro */ /* Bloques de contenido — tonos costeros */ --a11y-infobox-tip-bg: #e2f0ea; /* Espuma sobre algas */ --a11y-infobox-warning-bg: #f6eeda;/* Luz de atardecer costero */ --a11y-infobox-danger-bg: #f4e0de; /* Coral triturado */ --a11y-question-bg: #e4e8f4; /* Cielo reflejado en el agua */ --a11y-objectives-bg: #e2f0ea; /* Code inline — tinte lapislázuli */ --a11y-code-inline-bg: rgba(37, 99, 168, 0.07); --a11y-code-inline-color: #1a4070; --a11y-code-inline-border: rgba(37, 99, 168, 0.14); /* Comparaciones */ --a11y-comparison-good-bg: #dcece2; --a11y-comparison-bad-bg: #f4dedd; /* Sintaxis — colores del litoral vivos sobre arena */ --a11y-syntax-keyword: #5a4a90; /* Erizo de mar */ --a11y-syntax-string: #1a7a3a; /* Alga fresca */ --a11y-syntax-comment: #8a9eaa; /* Bruma lejana */ --a11y-syntax-number: #8a5a20; /* Madera varada */ --a11y-syntax-builtin: #0a6478; /* Océano */ --a11y-syntax-method: #904058; /* Anémona marina */ --a11y-syntax-decorator: #8a6828; /* Arena mojada */ --a11y-syntax-function: #1a6898; /* Mar abierto */ --a11y-syntax-operator: #566e78; /* Horizonte brumoso */ --a11y-syntax-default: #162c3a; /* Azul noche */ /* Bloques destacados — azul lapislázuli */ --a11y-block-accent-bg: #d8e4f2; /* Bruma azulada */ --a11y-block-accent-border: #90b4d4; /* Ola de lapislázuli */ --a11y-block-accent-border-hover: #6898c0; /* Lapislázuli vivo */ --a11y-block-warning-bg: #f4ecda; /* Atardecer en la playa */ --a11y-block-warning-border: #d8c8a0; /* Arena dorada */ --a11y-block-warning-border-hover: #c4b078; /* Concha dorada */ /* Tintes — acuarela costera */ --a11y-tint-accent: #d0ddef; /* Brisa lapislázuli */ --a11y-tint-success: #d0e8da; /* Espuma verde */ --a11y-tint-warning: #f2eacc; /* Atardecer suave */ --a11y-tint-error: #f2dcdc; /* Coral rosado */ --a11y-tint-purple: #e0dcee; /* Medusa pálida */ --a11y-badge-success-bg: #c8ecd6; --a11y-badge-success-text: #185a2e; --a11y-badge-warning-bg: #f2e8c0; --a11y-badge-warning-text: #6a5018; --a11y-badge-error-bg: #f4d2d2; --a11y-badge-error-text: #7a2020; --a11y-badge-neutral-bg: #d4dce2; --a11y-badge-neutral-text: #2e4450; --a11y-badge-accent-bg: #c0d4ea; --a11y-badge-accent-text: #1a4070; --a11y-badge-blue-bg: #c8d8ee; --a11y-badge-blue-text: #1e3a6a; --a11y-badge-purple-bg: #d8cce8; --a11y-badge-purple-text: #3e2070; } /* --- BOSQUE — Claro de bosque encantado --- */ html[data-a11y-mode="bosque"] { /* ── "Bosque" — v2 ── * Sendero de bosque al atardecer: luz dorada filtrada por el dosel, * claros de marfil entre follaje esmeralda, corteza de roble y musgo. * * Principios de diseño (basados en investigación UX de interfaces verdes): * 1. Fondo principal neutro cálido (crema/marfil), NO verde — evita * fatiga visual por "todo verde" y proporciona jerarquía clara. * 2. Verde concentrado en sidebar, acento y elementos interactivos. * 3. Acento dorado/ámbar como complementario cálido del verde — * rompe la monotonía y destaca CTAs y estados de advertencia. * 4. Texto marrón cálido sobre fondos claros — máxima legibilidad natural. * * WCAG AA verificado: * #2a1f10 sobre #faf8f3 = ~16:1 ✓ * #4a3f30 sobre #faf8f3 = ~9.2:1 ✓ * #70665a sobre #faf8f3 = ~4.6:1 ✓ (body text) * #1b6b3a sobre #faf8f3 = ~5.5:1 ✓ (accent) * #8a6420 sobre #faf8f3 = ~4.6:1 ✓ (warning) */ /* Fondos — claros del bosque: marfil cálido con toques de verde */ --a11y-bg-primary: #faf8f3; /* Marfil — luz filtrada por las hojas */ --a11y-bg-secondary: #f4f2ec; /* Pergamino claro — paneles */ --a11y-bg-tertiary: #ede9e0; /* Lino natural — hover/zebra */ --a11y-bg-hover: #e6e1d6; /* Arena del sendero — hover */ --a11y-bg-card: #ffffff; /* Papel blanco — cards elevadas */ --a11y-bg-dropdown: #ffffff; --a11y-bg-modal: #faf8f3; /* Marfil — modales */ --a11y-bg-sidebar: #e0e8dc; /* Sotobosque suave — verde pálido tierra */ --a11y-sidebar-text: #2a1f10; --a11y-sidebar-text-muted: #70665a; --a11y-sidebar-accent: #1b6b3a; --a11y-sidebar-hover: rgba(0, 0, 0, 0.05); --a11y-sidebar-border: rgba(0, 0, 0, 0.08); --a11y-bg-input: #ffffff; --a11y-code-bg: #f0ede6; /* Corteza clara */ --a11y-divider: #ddd8cc; /* Rama seca */ /* Texto — marrones de madera noble, más contraste que v1 */ --a11y-text-primary: #2a1f10; /* Nogal profundo — cuerpo */ --a11y-text-secondary: #4a3f30; /* Roble oscuro — secundario */ --a11y-text-secondary-rgb: 74, 63, 48; --a11y-text-muted: #70665a; /* Madera envejecida — muted */ --a11y-text-bright: #1a1008; /* Ébano — headings */ /* Bordes — tronco y raíces */ --a11y-border: #d6d0c4; /* Corteza clara */ --a11y-border-light: #a89e90; /* Corteza media */ /* Acento — esmeralda profundo (vivo sobre fondos cálidos) */ --a11y-accent: #1b6b3a; /* Esmeralda bosque */ --a11y-accent-hover: #145530; /* Esmeralda sombrío */ --a11y-link: #145828; /* Hiedra oscura */ --a11y-success: #1a7a32; /* Hoja fresca */ --a11y-warning: #8a6420; /* Resina dorada */ --a11y-error: #a83020; /* Baya madura */ /* Sombras — luz entre ramas */ --a11y-shadow: rgba(42, 31, 16, 0.06); --a11y-shadow-lg: rgba(42, 31, 16, 0.12); /* RGB companions */ --a11y-bg-primary-rgb: 250, 248, 243; --a11y-bg-secondary-rgb: 244, 242, 236; --a11y-bg-tertiary-rgb: 237, 233, 224; --a11y-border-rgb: 214, 208, 196; --a11y-border-light-rgb: 168, 158, 144; --a11y-accent-rgb: 27, 107, 58; --a11y-success-rgb: 26, 122, 50; --a11y-warning-rgb: 138, 100, 32; --a11y-error-rgb: 168, 48, 32; --a11y-text-primary-rgb: 42, 31, 16; --a11y-text-muted-rgb: 112, 102, 90; /* Colores extendidos — paleta completa del bosque */ --a11y-blue: #2e6890; /* Arroyo profundo */ --a11y-blue-hover: #1e5270; --a11y-blue-rgb: 46, 104, 144; --a11y-purple: #6a4580; /* Violeta silvestre */ --a11y-purple-rgb: 106, 69, 128; --a11y-indigo: #4a4590; /* Anochecer */ --a11y-indigo-rgb: 74, 69, 144; --a11y-cyan: #1a706a; /* Musgo de río */ --a11y-cyan-rgb: 26, 112, 106; --a11y-yellow: #8a6420; /* Resina dorada */ --a11y-yellow-rgb: 138, 100, 32; --a11y-pink: #884050; /* Rosa silvestre */ --a11y-pink-rgb: 136, 64, 80; --a11y-orange: #8a5818; /* Castaña */ --a11y-orange-rgb: 138, 88, 24; --a11y-success-bright: #22983a; /* Hoja joven */ --a11y-error-light: #cc4040; /* Baya clara */ /* Bloques de contenido — verdes y ambarinos suaves */ --a11y-infobox-tip-bg: #e8f4ec; /* Rocío sobre hierba */ --a11y-infobox-warning-bg: #faf0dc; /* Luz de ámbar */ --a11y-infobox-danger-bg: #f8e4e0; /* Baya aplastada */ --a11y-question-bg: #eee6f4; /* Flor de lavanda */ --a11y-objectives-bg: #e8f4ec; /* Code inline — tinte esmeralda sobre marfil */ --a11y-code-inline-bg: rgba(27, 107, 58, 0.06); --a11y-code-inline-color: #104830; --a11y-code-inline-border: rgba(27, 107, 58, 0.12); /* Comparaciones */ --a11y-comparison-good-bg: #e0f0e4; --a11y-comparison-bad-bg: #f8e2e0; /* Sintaxis — colores vivos del bosque sobre fondo cálido */ --a11y-syntax-keyword: #6a4580; /* Violeta silvestre */ --a11y-syntax-string: #1b6b3a; /* Esmeralda */ --a11y-syntax-comment: #a09888; /* Corteza clara */ --a11y-syntax-number: #8a5818; /* Castaña */ --a11y-syntax-builtin: #1b6b3a; /* Esmeralda */ --a11y-syntax-method: #884050; /* Rosa silvestre */ --a11y-syntax-decorator: #8a6420; /* Resina dorada */ --a11y-syntax-function: #2e6890; /* Arroyo */ --a11y-syntax-operator: #70665a; /* Madera */ --a11y-syntax-default: #2a1f10; /* Nogal */ /* Bloques destacados */ --a11y-block-accent-bg: #dceee2; /* Claro entre helechos */ --a11y-block-accent-border: #8cc4a0; /* Musgo vivo */ --a11y-block-accent-border-hover: #60b080; --a11y-block-warning-bg: #faf0dc; /* Ámbar suave */ --a11y-block-warning-border: #dcc080; --a11y-block-warning-border-hover: #c8a858; /* Tintes para tabs y selecciones */ --a11y-tint-accent: #d8eee0; --a11y-tint-success: #d6f0dc; --a11y-tint-warning: #f6ecd0; --a11y-tint-error: #f4dcd8; --a11y-tint-purple: #e8def2; /* Badges — fondo saturado + texto oscuro para legibilidad */ --a11y-badge-success-bg: #c8e4d0; /* Musgo claro */ --a11y-badge-success-text: #145228; /* Bosque profundo */ --a11y-badge-warning-bg: #f4e4c0; /* Resina clara */ --a11y-badge-warning-text: #6a4a10; /* Ámbar oscuro */ --a11y-badge-error-bg: #f0ccc8; /* Baya pálida */ --a11y-badge-error-text: #7a2018; /* Baya oscura */ --a11y-badge-neutral-bg: #e4e0d6; /* Piedra */ --a11y-badge-neutral-text: #4a4030; /* Madera oscura */ --a11y-badge-accent-bg: #c4e0cc; /* Helecho */ --a11y-badge-accent-text: #144a28; /* Dosel */ --a11y-badge-blue-bg: #c8d8e4; /* Cielo entre ramas */ --a11y-badge-blue-text: #1a3860; /* Noche en el bosque */ --a11y-badge-purple-bg: #dcd0e8; /* Lavanda silvestre */ --a11y-badge-purple-text: #3a1860; /* Baya oscura */ } /* ============================================================ TAMANO DE FUENTE ============================================================ */ html[data-a11y-font="large"] { font-size: 18px !important; } html[data-a11y-font="x-large"] { font-size: 20px !important; } /* ============================================================ FUENTE PARA DISLEXIA ============================================================ */ html[data-a11y-dyslexia="true"] body, html[data-a11y-dyslexia="true"] body * { font-family: 'OpenDyslexic', 'IBM Plex Sans', -apple-system, sans-serif !important; } html[data-a11y-dyslexia="true"] code, html[data-a11y-dyslexia="true"] pre, html[data-a11y-dyslexia="true"] pre *, html[data-a11y-dyslexia="true"] .cm-editor, html[data-a11y-dyslexia="true"] .cm-editor * { font-family: 'OpenDyslexic Mono', 'IBM Plex Mono', monospace !important; } /* ============================================================ INTERLINEADO ============================================================ */ html[data-a11y-line-height="relaxed"] body, html[data-a11y-line-height="relaxed"] body p, html[data-a11y-line-height="relaxed"] body li, html[data-a11y-line-height="relaxed"] body span, html[data-a11y-line-height="relaxed"] body div { line-height: 1.8 !important; } html[data-a11y-line-height="loose"] body, html[data-a11y-line-height="loose"] body p, html[data-a11y-line-height="loose"] body li, html[data-a11y-line-height="loose"] body span, html[data-a11y-line-height="loose"] body div { line-height: 2.2 !important; } /* ============================================================ REDUCIR ANIMACIONES ============================================================ */ html[data-a11y-reduce-motion="true"] *, html[data-a11y-reduce-motion="true"] *::before, html[data-a11y-reduce-motion="true"] *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; } /* ============================================================ CURSOR GRANDE ============================================================ */ html[data-a11y-large-cursor="true"], html[data-a11y-large-cursor="true"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 2l18 14-8 2 5 10-4 2-5-10-6 6z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 5 2, auto !important; } html[data-a11y-large-cursor="true"] a, html[data-a11y-large-cursor="true"] button, html[data-a11y-large-cursor="true"] [role="button"], html[data-a11y-large-cursor="true"] input[type="submit"], html[data-a11y-large-cursor="true"] label, html[data-a11y-large-cursor="true"] select { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%23fff'/%3E%3C/svg%3E") 16 16, pointer !important; } /* ============================================================ RESALTAR ENLACES ============================================================ */ html[data-a11y-highlight-links="true"] a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; } html[data-a11y-highlight-links="true"] a:hover, html[data-a11y-highlight-links="true"] a:focus-visible { outline: 2px solid var(--a11y-accent) !important; outline-offset: 2px !important; background: rgba(var(--a11y-accent-rgb), 0.15) !important; border-radius: 3px !important; } /* ============================================================ MODO LECTURA ============================================================ */ html[data-a11y-reading="true"] main > div, html[data-a11y-reading="true"] article, html[data-a11y-reading="true"] [class*="MainContent"], html[data-a11y-reading="true"] [class*="TheoryContent"] { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; } /* ============================================================ SKIP LINKS ============================================================ */ .a11y-skip-link { position: absolute; top: -100px; left: 16px; z-index: 100000; padding: 12px 24px; background: var(--a11y-accent, #0891b2); color: #ffffff; font-size: 0.95rem; font-weight: 600; border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.15s ease; } .a11y-skip-link:focus { top: 0; outline: 3px solid #ffffff; outline-offset: 2px; } /* * Sobreescrituras de accesibilidad — Overrides estructurales * * Estrategia: Solo sobrescribir elementos HTML semanticos y * componentes especificos (inputs, code, tables, etc.). * Los styled-components se migran directamente con CSS vars. * * NO usar :where() nuclear — rompe colores de acento, hover states * y jerarquia visual de styled-components. */ /* ============================================================ 1. BODY Y ROOT ============================================================ */ html:not([data-a11y-mode="default"]) body { background: var(--a11y-bg-primary) !important; color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) #root { background: var(--a11y-bg-primary) !important; color: var(--a11y-text-primary) !important; } /* ============================================================ 2. ELEMENTOS SEMANTICOS ESTRUCTURALES ============================================================ */ html:not([data-a11y-mode="default"]) nav { background: var(--a11y-bg-primary) !important; color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) header { background: var(--a11y-bg-primary) !important; color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) main { background: var(--a11y-bg-primary) !important; color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) aside { background: var(--a11y-bg-sidebar) !important; color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) footer { background: var(--a11y-bg-primary) !important; color: var(--a11y-text-primary) !important; } /* ============================================================ 3. TEXTOS SEMANTICOS Solo elementos de contenido puro (nunca divs/spans/buttons que pueden tener colores de acento). ============================================================ */ html:not([data-a11y-mode="default"]) h1, html:not([data-a11y-mode="default"]) h2, html:not([data-a11y-mode="default"]) h3, html:not([data-a11y-mode="default"]) h4, html:not([data-a11y-mode="default"]) h5, html:not([data-a11y-mode="default"]) h6, html:not([data-a11y-mode="default"]) p, html:not([data-a11y-mode="default"]) li, html:not([data-a11y-mode="default"]) label, html:not([data-a11y-mode="default"]) dt, html:not([data-a11y-mode="default"]) dd { color: var(--a11y-text-primary) !important; } /* ============================================================ 4. INPUTS Y FORMULARIOS ============================================================ */ html:not([data-a11y-mode="default"]) input, html:not([data-a11y-mode="default"]) textarea, html:not([data-a11y-mode="default"]) select, html:not([data-a11y-mode="default"]) [contenteditable="true"] { background: var(--a11y-bg-input) !important; color: var(--a11y-text-primary) !important; border-color: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) input:focus, html:not([data-a11y-mode="default"]) textarea:focus, html:not([data-a11y-mode="default"]) select:focus { border-color: var(--a11y-accent) !important; } html:not([data-a11y-mode="default"]) input::placeholder, html:not([data-a11y-mode="default"]) textarea::placeholder { color: var(--a11y-text-muted) !important; } /* Select chevron oscuro para fondos claros */ html[data-a11y-mode="light"] select, html[data-a11y-mode="sepia"] select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px !important; } html[data-a11y-mode="light"] select option, html[data-a11y-mode="sepia"] select option { background-image: none !important; background-color: var(--a11y-bg-card) !important; color: var(--a11y-text-primary) !important; } /* ============================================================ 5. TABLAS ============================================================ */ html:not([data-a11y-mode="default"]) table { border-color: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) thead, html:not([data-a11y-mode="default"]) thead tr { background: var(--a11y-bg-tertiary) !important; } html:not([data-a11y-mode="default"]) th { border-color: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) td { color: var(--a11y-text-primary) !important; border-color: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) tr { border-color: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) tbody tr:hover { background: var(--a11y-bg-hover) !important; } /* Encabezados de tabla en teoría: gestionados por styled-components con fondo sólido del color del módulo y texto blanco. */ /* ============================================================ 6. CODE BLOCKS ============================================================ */ html:not([data-a11y-mode="default"]) pre { background: var(--a11y-code-bg) !important; border-color: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) code { background: var(--a11y-code-bg) !important; } html:not([data-a11y-mode="default"]) p > code, html:not([data-a11y-mode="default"]) li > code, html:not([data-a11y-mode="default"]) span > code { background: var(--a11y-bg-tertiary) !important; color: var(--a11y-text-primary) !important; } /* ============================================================ 7. CODEMIRROR / EDITOR ============================================================ */ html:not([data-a11y-mode="default"]) .cm-editor { background: var(--a11y-code-bg) !important; } html:not([data-a11y-mode="default"]) .cm-gutters { background: var(--a11y-bg-secondary) !important; border-color: var(--a11y-border) !important; color: var(--a11y-text-muted) !important; } html:not([data-a11y-mode="default"]) .cm-activeLineGutter, html:not([data-a11y-mode="default"]) .cm-activeLine { background: var(--a11y-bg-tertiary) !important; } html:not([data-a11y-mode="default"]) .cm-cursor { border-color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) .cm-content, html:not([data-a11y-mode="default"]) .cm-line { color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) .cm-selectionBackground { background: color-mix(in srgb, var(--a11y-accent) 20%, transparent) !important; } /* ============================================================ 8. SYNTAX HIGHLIGHTING — MODO CLARO ============================================================ */ html[data-a11y-mode="light"] .keyword { color: var(--a11y-syntax-keyword) !important; } html[data-a11y-mode="light"] .string, html[data-a11y-mode="light"] .fstring { color: var(--a11y-syntax-string) !important; } html[data-a11y-mode="light"] .comment { color: var(--a11y-syntax-comment) !important; } html[data-a11y-mode="light"] .number { color: var(--a11y-syntax-number) !important; } html[data-a11y-mode="light"] .builtin { color: var(--a11y-syntax-builtin) !important; } html[data-a11y-mode="light"] .method, html[data-a11y-mode="light"] .attribute { color: var(--a11y-syntax-method) !important; } html[data-a11y-mode="light"] .decorator { color: var(--a11y-syntax-decorator) !important; } html[data-a11y-mode="light"] .function { color: var(--a11y-syntax-function) !important; } html[data-a11y-mode="light"] .operator { color: var(--a11y-syntax-operator) !important; } /* ============================================================ 9. SYNTAX HIGHLIGHTING — MODO SEPIA ============================================================ */ html[data-a11y-mode="sepia"] .keyword { color: var(--a11y-syntax-keyword) !important; } html[data-a11y-mode="sepia"] .string, html[data-a11y-mode="sepia"] .fstring { color: var(--a11y-syntax-string) !important; } html[data-a11y-mode="sepia"] .comment { color: var(--a11y-syntax-comment) !important; } html[data-a11y-mode="sepia"] .number { color: var(--a11y-syntax-number) !important; } html[data-a11y-mode="sepia"] .builtin { color: var(--a11y-syntax-builtin) !important; } html[data-a11y-mode="sepia"] .method, html[data-a11y-mode="sepia"] .attribute { color: var(--a11y-syntax-method) !important; } html[data-a11y-mode="sepia"] .decorator { color: var(--a11y-syntax-decorator) !important; } html[data-a11y-mode="sepia"] .function { color: var(--a11y-syntax-function) !important; } html[data-a11y-mode="sepia"] .operator { color: var(--a11y-syntax-operator) !important; } /* ============================================================ 8b. SYNTAX HIGHLIGHTING — ALTO CONTRASTE Y BAJO CONTRASTE ============================================================ */ html[data-a11y-mode="high-contrast"] .keyword { color: var(--a11y-syntax-keyword) !important; } html[data-a11y-mode="high-contrast"] .string, html[data-a11y-mode="high-contrast"] .fstring { color: var(--a11y-syntax-string) !important; } html[data-a11y-mode="high-contrast"] .comment { color: var(--a11y-syntax-comment) !important; } html[data-a11y-mode="high-contrast"] .number { color: var(--a11y-syntax-number) !important; } html[data-a11y-mode="high-contrast"] .builtin { color: var(--a11y-syntax-builtin) !important; } html[data-a11y-mode="high-contrast"] .method, html[data-a11y-mode="high-contrast"] .attribute { color: var(--a11y-syntax-method) !important; } html[data-a11y-mode="high-contrast"] .decorator { color: var(--a11y-syntax-decorator) !important; } html[data-a11y-mode="high-contrast"] .function { color: var(--a11y-syntax-function) !important; } html[data-a11y-mode="high-contrast"] .operator { color: var(--a11y-syntax-operator) !important; } html[data-a11y-mode="low-contrast"] .keyword { color: var(--a11y-syntax-keyword) !important; } html[data-a11y-mode="low-contrast"] .string, html[data-a11y-mode="low-contrast"] .fstring { color: var(--a11y-syntax-string) !important; } html[data-a11y-mode="low-contrast"] .comment { color: var(--a11y-syntax-comment) !important; } html[data-a11y-mode="low-contrast"] .number { color: var(--a11y-syntax-number) !important; } html[data-a11y-mode="low-contrast"] .builtin { color: var(--a11y-syntax-builtin) !important; } html[data-a11y-mode="low-contrast"] .method, html[data-a11y-mode="low-contrast"] .attribute { color: var(--a11y-syntax-method) !important; } html[data-a11y-mode="low-contrast"] .decorator { color: var(--a11y-syntax-decorator) !important; } html[data-a11y-mode="low-contrast"] .function { color: var(--a11y-syntax-function) !important; } html[data-a11y-mode="low-contrast"] .operator { color: var(--a11y-syntax-operator) !important; } /* ============================================================ 10. SCROLLBAR ============================================================ */ html:not([data-a11y-mode="default"]) ::-webkit-scrollbar-track { background: var(--a11y-bg-secondary) !important; } html:not([data-a11y-mode="default"]) ::-webkit-scrollbar-thumb { background: var(--a11y-border-light) !important; } /* ============================================================ 11. FOCUS VISIBLE ============================================================ */ html:not([data-a11y-mode="default"]) :focus-visible { outline-color: var(--a11y-accent) !important; } /* ============================================================ 12. SELECTION ============================================================ */ html:not([data-a11y-mode="default"]) ::selection { background: color-mix(in srgb, var(--a11y-accent) 30%, transparent) !important; } /* ============================================================ 13. TOASTER (sonner) ============================================================ */ html:not([data-a11y-mode="default"]) [data-sonner-toaster] [data-sonner-toast] { background: var(--a11y-bg-card) !important; color: var(--a11y-text-primary) !important; border-color: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) [data-sonner-toast] [data-title] { color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) [data-sonner-toast] [data-description] { color: var(--a11y-text-secondary) !important; } /* ============================================================ 14. LOGO — Invertir para modos con fondo claro ============================================================ */ /* Logo: gestionado por useLogo() hook — swap dinámico de imagen. Compensación óptica: texto oscuro sobre fondo claro parece más pequeño que texto claro sobre fondo oscuro (efecto irradiación). */ html[data-a11y-mode="light"] img[alt="Kobalto"], html[data-a11y-mode="sepia"] img[alt="Kobalto"] { transform: scale(1.02); transform-origin: left center; } /* ============================================================ 15. KBD (atajos de teclado) ============================================================ */ html:not([data-a11y-mode="default"]) kbd { background: var(--a11y-bg-tertiary) !important; border-color: var(--a11y-border-light) !important; color: var(--a11y-text-muted) !important; } /* ============================================================ 16. HR / DIVIDERS ============================================================ */ html:not([data-a11y-mode="default"]) hr { background: var(--a11y-divider) !important; border-color: var(--a11y-divider) !important; } /* ============================================================ 17. LOADING / SPINNER ============================================================ */ html:not([data-a11y-mode="default"]) .loading-screen { color: var(--a11y-text-secondary) !important; } html:not([data-a11y-mode="default"]) .spinner { border-color: var(--a11y-border) !important; border-top-color: var(--a11y-accent) !important; } /* ============================================================ 18. DIALOGOS, MENUS, DROPDOWNS ============================================================ */ html:not([data-a11y-mode="default"]) [role="dialog"], html:not([data-a11y-mode="default"]) [role="alertdialog"] { background: var(--a11y-bg-modal) !important; color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) [role="menu"], html:not([data-a11y-mode="default"]) [role="listbox"], html:not([data-a11y-mode="default"]) [role="tooltip"] { background: var(--a11y-bg-dropdown) !important; color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) aside[role="dialog"] { background: var(--a11y-bg-card) !important; } /* ============================================================ 19. EDITORJS (Bitacora) ============================================================ */ html:not([data-a11y-mode="default"]) .ce-block__content, html:not([data-a11y-mode="default"]) .ce-toolbar__content { color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) .ce-block--selected .ce-block__content { background: var(--a11y-bg-tertiary) !important; } html:not([data-a11y-mode="default"]) .codex-editor { color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) .ce-popover { background: var(--a11y-bg-dropdown) !important; border-color: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) .ce-popover-item:hover { background: var(--a11y-bg-hover) !important; } html:not([data-a11y-mode="default"]) .ce-popover-item__title { color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) .ce-popover-item__icon { color: var(--a11y-text-secondary) !important; } html:not([data-a11y-mode="default"]) .ce-inline-toolbar { background: var(--a11y-bg-dropdown) !important; border-color: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) .ce-inline-tool { color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) .ce-inline-tool:hover { background: var(--a11y-bg-hover) !important; } /* ============================================================ 20. LEXICAL EDITOR (Study Rooms) ============================================================ */ html:not([data-a11y-mode="default"]) .lexical-editor, html:not([data-a11y-mode="default"]) .editor-shell { background: var(--a11y-bg-card) !important; color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) .toolbar { background: var(--a11y-bg-secondary) !important; border-color: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) .toolbar button { color: var(--a11y-text-secondary) !important; } html:not([data-a11y-mode="default"]) .toolbar button:hover { background: var(--a11y-bg-hover) !important; } /* ============================================================ 21. NOTIFICACIONES DROPDOWN ============================================================ */ html:not([data-a11y-mode="default"]) [data-notification-dropdown] { background: var(--a11y-bg-dropdown) !important; border-color: var(--a11y-border) !important; } /* ============================================================ 22. ELEMENTOS SEMANTICOS ADICIONALES ============================================================ */ html:not([data-a11y-mode="default"]) section { color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) article { color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) figure { color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) figcaption { color: var(--a11y-text-secondary) !important; } html:not([data-a11y-mode="default"]) blockquote { color: var(--a11y-text-secondary) !important; border-color: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) details { background: var(--a11y-bg-secondary) !important; border-color: var(--a11y-border) !important; color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) summary { color: var(--a11y-text-primary) !important; } /* ============================================================ 23. TEXTO INLINE SEMANTICO ============================================================ */ html:not([data-a11y-mode="default"]) strong, html:not([data-a11y-mode="default"]) em, html:not([data-a11y-mode="default"]) b, html:not([data-a11y-mode="default"]) i, html:not([data-a11y-mode="default"]) small { color: inherit !important; } html:not([data-a11y-mode="default"]) mark { background: color-mix(in srgb, var(--a11y-warning) 30%, transparent) !important; color: var(--a11y-text-primary) !important; } html:not([data-a11y-mode="default"]) abbr { color: var(--a11y-text-primary) !important; } /* ============================================================ 24. LINKS ============================================================ */ html:not([data-a11y-mode="default"]) a:not([role="button"]):not([class*="Button"]):not([class*="Nav"]) { color: var(--a11y-link) !important; } /* ============================================================ 25. FIELDSET / LEGEND ============================================================ */ html:not([data-a11y-mode="default"]) fieldset { border-color: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) legend { color: var(--a11y-text-primary) !important; } /* ============================================================ 26. SELECT OPTION (dropdown nativo) ============================================================ */ html:not([data-a11y-mode="default"]) option { background: var(--a11y-bg-dropdown) !important; color: var(--a11y-text-primary) !important; } /* ============================================================ 27. COLOR SCHEME (ayuda a elementos nativos del navegador) ============================================================ */ html[data-a11y-mode="light"], html[data-a11y-mode="sepia"], html[data-a11y-mode="costa"], html[data-a11y-mode="bosque"] { color-scheme: light !important; } html[data-a11y-mode="high-contrast"], html[data-a11y-mode="low-contrast"] { color-scheme: dark !important; } /* ============================================================ 28. MODAL BACKDROPS ============================================================ */ html[data-a11y-mode="light"] [class*="Overlay"], html[data-a11y-mode="sepia"] [class*="Overlay"], html[data-a11y-mode="costa"] [class*="Overlay"], html[data-a11y-mode="bosque"] [class*="Overlay"] { background: rgba(0, 0, 0, 0.5) !important; } /* ============================================================ 29. GRADIENTES — Aplanar en modos claro/sepia Los gradientes oscuros se ven mal sobre fondo claro. Solo afecta a elementos que usen linear-gradient con colores del tema oscuro como fondo de pagina. ============================================================ */ html[data-a11y-mode="light"] [style*="linear-gradient"], html[data-a11y-mode="sepia"] [style*="linear-gradient"], html[data-a11y-mode="costa"] [style*="linear-gradient"], html[data-a11y-mode="bosque"] [style*="linear-gradient"] { background: var(--a11y-bg-primary) !important; } /* ============================================================ 30. ACCESSIBILITY PANEL ============================================================ */ html:not([data-a11y-mode="default"]) [data-a11y-panel] { background: var(--a11y-bg-card) !important; border-color: var(--a11y-border) !important; color: var(--a11y-text-primary) !important; } /* ============================================================ 31. RECHARTS / GRAFICOS SVG ============================================================ */ html:not([data-a11y-mode="default"]) .recharts-text { fill: var(--a11y-text-secondary) !important; } html:not([data-a11y-mode="default"]) .recharts-cartesian-axis-line, html:not([data-a11y-mode="default"]) .recharts-cartesian-axis-tick-line { stroke: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) .recharts-tooltip-wrapper .recharts-default-tooltip { background: var(--a11y-bg-dropdown) !important; border-color: var(--a11y-border) !important; } /* ============================================================ 32. LOADING FALLBACK (Suspense) ============================================================ */ html:not([data-a11y-mode="default"]) [class*="LoadingFallback"], html:not([data-a11y-mode="default"]) [class*="loading-fallback"] { background: var(--a11y-bg-primary) !important; color: var(--a11y-text-secondary) !important; } /* ============================================================ 33. STYLED-COMPONENTS — Red de seguridad Cubre patrones comunes de styled-components en paginas no migradas (admin, teacher, secretaria, etc.) ============================================================ */ /* Contenedores principales con fondo oscuro */ html:not([data-a11y-mode="default"]) [class*="Container"][class*="sc-"] { background: var(--a11y-bg-primary) !important; color: var(--a11y-text-primary) !important; } /* Cards y paneles */ html:not([data-a11y-mode="default"]) [class*="Card"][class*="sc-"], html:not([data-a11y-mode="default"]) [class*="Panel"][class*="sc-"] { background: var(--a11y-bg-card) !important; border-color: var(--a11y-border) !important; color: var(--a11y-text-primary) !important; } /* Modals y overlays */ html:not([data-a11y-mode="default"]) [class*="Modal"][class*="sc-"]:not([class*="Overlay"]) { background: var(--a11y-bg-modal) !important; border-color: var(--a11y-border) !important; color: var(--a11y-text-primary) !important; } /* Tabs y navegacion interna */ html:not([data-a11y-mode="default"]) [class*="TabBar"][class*="sc-"], html:not([data-a11y-mode="default"]) [class*="Tabs"][class*="sc-"] { border-color: var(--a11y-border) !important; } /* Badges y tags */ html:not([data-a11y-mode="default"]) [class*="Badge"][class*="sc-"], html:not([data-a11y-mode="default"]) [class*="Tag"][class*="sc-"] { border-color: var(--a11y-border) !important; } /* Sidebars y aside panels */ html:not([data-a11y-mode="default"]) [class*="Sidebar"][class*="sc-"] { background: var(--a11y-bg-sidebar) !important; border-color: var(--a11y-border) !important; } /* Costa: sidebar claro (bruma costera) con texto oscuro */ html[data-a11y-mode="costa"] aside, html[data-a11y-mode="costa"] [class*="Sidebar"][class*="sc-"] { color: var(--a11y-sidebar-text, #162c3a) !important; border-color: rgba(0, 0, 0, 0.1) !important; } html[data-a11y-mode="costa"] aside a, html[data-a11y-mode="costa"] aside [class*="sc-"], html[data-a11y-mode="costa"] [class*="Sidebar"][class*="sc-"] a, html[data-a11y-mode="costa"] [class*="Sidebar"][class*="sc-"] [class*="sc-"] { color: var(--a11y-sidebar-text-muted, #3a5868) !important; border-color: rgba(0, 0, 0, 0.08) !important; } html[data-a11y-mode="costa"] aside a:hover, html[data-a11y-mode="costa"] [class*="Sidebar"][class*="sc-"] a:hover { color: var(--a11y-sidebar-text, #162c3a) !important; background: rgba(0, 0, 0, 0.05) !important; } html[data-a11y-mode="costa"] aside a.active, html[data-a11y-mode="costa"] [class*="Sidebar"][class*="sc-"] a.active { color: var(--a11y-sidebar-accent, #1a6898) !important; background: rgba(26, 104, 152, 0.1) !important; } /* Dropdowns de styled-components */ html:not([data-a11y-mode="default"]) [class*="Dropdown"][class*="sc-"]:not(button) { background: var(--a11y-bg-dropdown) !important; border-color: var(--a11y-border) !important; } /* Wrappers y secciones principales */ html:not([data-a11y-mode="default"]) [class*="Wrapper"][class*="sc-"], html:not([data-a11y-mode="default"]) [class*="Section"][class*="sc-"] { color: var(--a11y-text-primary) !important; } /* Headers de secciones */ html:not([data-a11y-mode="default"]) [class*="Header"][class*="sc-"] { color: var(--a11y-text-primary) !important; border-color: var(--a11y-border) !important; } /* Inputs en styled-components */ html:not([data-a11y-mode="default"]) [class*="Input"][class*="sc-"], html:not([data-a11y-mode="default"]) [class*="Textarea"][class*="sc-"] { background: var(--a11y-bg-input) !important; border-color: var(--a11y-border) !important; color: var(--a11y-text-primary) !important; } /* Empty states y placeholders */ html:not([data-a11y-mode="default"]) [class*="Empty"][class*="sc-"], html:not([data-a11y-mode="default"]) [class*="Placeholder"][class*="sc-"] { color: var(--a11y-text-muted) !important; } /* Listas y list items */ html:not([data-a11y-mode="default"]) [class*="List"][class*="sc-"] { border-color: var(--a11y-border) !important; } html:not([data-a11y-mode="default"]) [class*="ListItem"][class*="sc-"], html:not([data-a11y-mode="default"]) [class*="Item"][class*="sc-"]:not(button) { border-color: var(--a11y-border) !important; } /* ============================================================ 34. TEORÍA — Bloques resaltados en modos claro/sepia Los fondos se gestionan via variables CSS definidas por modo en accessibility.css (--a11y-infobox-*-bg, --a11y-question-bg, --a11y-objectives-bg). Los styled-components las consumen. ============================================================ */