@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* Avantgarde — Tipografía primaria */ @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: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f172a; color: #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', 'IBM Plex Sans', 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: #1e293b; } ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Loading screen */ .loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; gap: 16px; color: #94a3b8; } .spinner { width: 40px; height: 40px; border: 3px solid #334155; border-top-color: #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; } select option { background-image: none !important; padding-right: 0 !important; } /* Focus styles */ :focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; } /* Selection */ ::selection { background: rgba(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-bg-input: #0f172a; --a11y-text-primary: #e2e8f0; --a11y-text-secondary: #94a3b8; --a11y-text-muted: #64748b; --a11y-text-bright: #f1f5f9; --a11y-border: #334155; --a11y-border-light: #475569; --a11y-accent: #0891b2; --a11y-accent-rgb: 8, 145, 178; --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; --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-text-primary-rgb: 226, 232, 240; --a11y-success-rgb: 34, 197, 94; --a11y-warning-rgb: 245, 158, 11; --a11y-error-rgb: 239, 68, 68; } /* ============================================================ 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: #222222; --a11y-bg-card: #111111; --a11y-bg-dropdown: #111111; --a11y-bg-modal: #111111; --a11y-bg-sidebar: #111111; --a11y-bg-input: #000000; --a11y-code-bg: #111111; --a11y-divider: #555555; --a11y-text-primary: #ffffff; --a11y-text-secondary: #e0e0e0; --a11y-text-muted: #b0b0b0; --a11y-text-bright: #ffffff; --a11y-border: #555555; --a11y-border-light: #777777; --a11y-accent: #00d4ff; --a11y-accent-hover: #33ddff; --a11y-accent-rgb: 0, 212, 255; --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.2); --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-text-primary-rgb: 255, 255, 255; --a11y-success-rgb: 0, 255, 0; --a11y-warning-rgb: 255, 255, 0; --a11y-error-rgb: 255, 68, 68; } /* --- 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-bg-input: #1a1f2e; --a11y-code-bg: #222838; --a11y-divider: #2c3344; --a11y-text-primary: #b8c4d4; --a11y-text-secondary: #8898ac; --a11y-text-muted: #667788; --a11y-text-bright: #c8d4e4; --a11y-border: #2c3344; --a11y-border-light: #3a4458; --a11y-accent: #5da8c0; --a11y-accent-hover: #6bb8d0; --a11y-accent-rgb: 93, 168, 192; --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.4); --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-text-primary-rgb: 184, 196, 212; --a11y-success-rgb: 107, 196, 128; --a11y-warning-rgb: 196, 160, 80; --a11y-error-rgb: 192, 96, 96; } /* --- SEPIA --- */ html[data-a11y-mode="sepia"] { --a11y-bg-primary: #f4ecd8; --a11y-bg-secondary: #e8dcc8; --a11y-bg-tertiary: #ddd0b8; --a11y-bg-hover: #d4c8b0; --a11y-bg-card: #faf5e8; --a11y-bg-dropdown: #faf5e8; --a11y-bg-modal: #f4ecd8; --a11y-bg-sidebar: #e8dcc8; --a11y-bg-input: #faf5e8; --a11y-code-bg: #e8dcc8; --a11y-divider: #c4b898; --a11y-text-primary: #433422; --a11y-text-secondary: #6b5a44; --a11y-text-muted: #8a7a64; --a11y-text-bright: #2d2010; --a11y-border: #c4b898; --a11y-border-light: #b0a488; --a11y-accent: #8b6914; --a11y-accent-hover: #a07a1a; --a11y-accent-rgb: 139, 105, 20; --a11y-link: #6b4e0a; --a11y-success: #4a7a2a; --a11y-warning: #8b6914; --a11y-error: #a03030; --a11y-shadow: rgba(67, 52, 34, 0.08); --a11y-shadow-lg: rgba(67, 52, 34, 0.14); --a11y-bg-primary-rgb: 244, 236, 216; --a11y-bg-secondary-rgb: 232, 220, 200; --a11y-bg-tertiary-rgb: 221, 208, 184; --a11y-border-rgb: 196, 184, 152; --a11y-text-primary-rgb: 67, 52, 34; --a11y-success-rgb: 74, 122, 42; --a11y-warning-rgb: 139, 105, 20; --a11y-error-rgb: 160, 48, 48; } /* --- CLARO (Luz Natural / Papel Montessori) --- WCAG AA verificado: #111827 sobre #f9fafb = ~18:1 ✓ #374151 sobre #f9fafb = ~10:1 ✓ #6b7280 sobre #f9fafb = ~5.5:1 ✓ #4f46e5 sobre #f9fafb = ~5.2:1 ✓ --- */ html[data-a11y-mode="light"] { --a11y-bg-primary: #f9fafb; --a11y-bg-secondary: #f3f4f6; --a11y-bg-tertiary: #e5e7eb; --a11y-bg-hover: #e5e7eb; --a11y-bg-card: #ffffff; --a11y-bg-dropdown: #ffffff; --a11y-bg-modal: #ffffff; --a11y-bg-sidebar: #f9fafb; --a11y-bg-input: #ffffff; --a11y-code-bg: #f3f4f6; --a11y-divider: #e5e7eb; --a11y-text-primary: #111827; --a11y-text-secondary: #374151; --a11y-text-muted: #6b7280; --a11y-text-bright: #030712; --a11y-border: #e5e7eb; --a11y-border-light: #9ca3af; --a11y-accent: #4f46e5; --a11y-accent-hover: #4338ca; --a11y-accent-rgb: 79, 70, 229; --a11y-link: #4338ca; --a11y-success: #15803d; --a11y-warning: #92400e; --a11y-error: #b91c1c; --a11y-shadow: rgba(0, 0, 0, 0.08); --a11y-shadow-lg: rgba(0, 0, 0, 0.12); --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-text-primary-rgb: 17, 24, 39; --a11y-success-rgb: 21, 128, 61; --a11y-warning-rgb: 146, 64, 14; --a11y-error-rgb: 185, 28, 28; } /* --- COSTA — v3 (Mediterráneo: arena cálida + océano turquesa) --- Inspiración: Costa mediterránea — arena cálida, agua turquesa cristalina, edificios encalados, horizonte azul profundo, acentos de coral. Fondos arenas cálidas (crema/marfil), sidebar océano profundo, turquesa como acento. WCAG AA verificado: #1a2d3d sobre #f5f1ec = ~12.3:1 ✓ AAA #3d5668 sobre #f5f1ec = ~7.1:1 ✓ AA #546b7a sobre #f5f1ec = ~4.8:1 ✓ AA #0c7da3 sobre #f5f1ec = ~4.8:1 ✓ AA --- */ html[data-a11y-mode="costa"] { --a11y-bg-aside: #faf8f5; --a11y-bg-primary: #f5f1ec; --a11y-bg-secondary: #ece7e0; --a11y-bg-tertiary: #e0dbd3; --a11y-bg-hover: #d6d0c8; --a11y-bg-card: #ffffff; --a11y-bg-dropdown: #ffffff; --a11y-bg-modal: #f5f1ec; --a11y-bg-sidebar: #1b3b5e; --a11y-bg-input: #ffffff; --a11y-code-bg: #e8e2da; --a11y-divider: #c5bdb2; --a11y-text-primary: #1a2d3d; --a11y-text-secondary: #3d5668; --a11y-text-muted: #546b7a; --a11y-text-bright: #0e1f2d; --a11y-border: #c5bdb2; --a11y-border-light: #9e958a; --a11y-accent: #0c7da3; --a11y-accent-hover: #096585; --a11y-accent-rgb: 12, 125, 163; --a11y-link: #096585; --a11y-success: #18795c; --a11y-warning: #a67b14; --a11y-error: #c24040; --a11y-shadow: rgba(42, 32, 20, 0.08); --a11y-shadow-lg: rgba(42, 32, 20, 0.14); --a11y-bg-primary-rgb: 245, 241, 236; --a11y-bg-secondary-rgb: 236, 231, 224; --a11y-bg-tertiary-rgb: 224, 219, 211; --a11y-border-rgb: 197, 189, 178; --a11y-text-primary-rgb: 26, 45, 61; --a11y-success-rgb: 24, 121, 92; --a11y-warning-rgb: 166, 123, 20; --a11y-error-rgb: 194, 64, 64; } /* --- BOSQUE — v2 (Bosque templado europeo: musgo, corteza, luz filtrada) --- Inspiración: Bosque de hoja caduca — musgo sobre piedra, corteza de roble, luz dorada filtrada por el dosel, helechos, suelo del bosque, pergamino de abedul. Sidebar verde bosque profundo para inmersión total. WCAG AA verificado: #1e1a10 sobre #f0f4ec = ~15.8:1 ✓ AAA #4a3f30 sobre #f0f4ec = ~9.3:1 ✓ AAA #6d6050 sobre #f0f4ec = ~5.5:1 ✓ AA #2a7e48 sobre #f0f4ec = ~5.0:1 ✓ AA --- */ html[data-a11y-mode="bosque"] { --a11y-bg-aside: #f7faf5; --a11y-bg-primary: #f0f4ec; --a11y-bg-secondary: #f5f7f2; --a11y-bg-tertiary: #dce6d6; --a11y-bg-hover: #d0dcc8; --a11y-bg-card: #faf7f2; --a11y-bg-dropdown: #faf7f2; --a11y-bg-modal: #f2ede4; --a11y-bg-sidebar: #2b4630; --a11y-bg-input: #fdfcfa; --a11y-code-bg: #e4eadf; --a11y-divider: #bcc8b4; --a11y-text-primary: #1e1a10; --a11y-text-secondary: #4a3f30; --a11y-text-muted: #6d6050; --a11y-text-bright: #110e06; --a11y-border: #b8c8b0; --a11y-border-light: #92a68a; --a11y-accent: #2a7e48; --a11y-accent-hover: #1d6636; --a11y-accent-rgb: 42, 126, 72; --a11y-link: #1d6636; --a11y-success: #2a8a40; --a11y-warning: #9a6a08; --a11y-error: #b83828; --a11y-shadow: rgba(30, 26, 16, 0.07); --a11y-shadow-lg: rgba(30, 26, 16, 0.13); --a11y-bg-primary-rgb: 240, 244, 236; --a11y-bg-secondary-rgb: 245, 247, 242; --a11y-bg-tertiary-rgb: 220, 230, 214; --a11y-border-rgb: 184, 200, 176; --a11y-text-primary-rgb: 30, 26, 16; --a11y-success-rgb: 42, 138, 64; --a11y-warning-rgb: 154, 106, 8; --a11y-error-rgb: 184, 56, 40; } /* ============================================================ 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(8, 145, 178, 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 para colores hardcodeados * * Estrategia: Solo sobrescribir elementos HTML semanticos y * componentes especificos. Los styled-components se capturan * via selectores [class*="X"][class*="sc-"]. * * Solo se activan cuando el usuario elige un modo distinto de "default". */ /* ============================================================ 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:not([class*="sc-"]) { 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; } 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; } /* ============================================================ 3. BORDES ============================================================ */ html:not([data-a11y-mode="default"]) nav, html:not([data-a11y-mode="default"]) header, html:not([data-a11y-mode="default"]) aside, html:not([data-a11y-mode="default"]) section, html:not([data-a11y-mode="default"]) article { border-color: var(--a11y-border) !important; } /* ============================================================ 4. TEXTOS SEMANTICOS ============================================================ */ 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:not([class*="sc-"]), html:not([data-a11y-mode="default"]) dt, html:not([data-a11y-mode="default"]) dd { color: var(--a11y-text-primary) !important; } 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; } /* Links */ html:not([data-a11y-mode="default"]) a:not([role="button"]):not([class*="Button"]):not([class*="Nav"]) { color: var(--a11y-link) !important; } /* ============================================================ 5. INPUTS Y FORMULARIOS ============================================================ */ html:not([data-a11y-mode="default"]) input, html:not([data-a11y-mode="default"]) textarea, html:not([data-a11y-mode="default"]) select { 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, html[data-a11y-mode="costa"] select, html[data-a11y-mode="bosque"] select { appearance: none !important; -webkit-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; padding-right: 32px !important; } html:not([data-a11y-mode="default"]) option { background: var(--a11y-bg-dropdown) !important; color: var(--a11y-text-primary) !important; } /* ============================================================ 6. 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; color: var(--a11y-text-primary) !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; } /* ============================================================ 7. 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; } /* ============================================================ 8. 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; } /* ============================================================ 9. 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; } /* ============================================================ 10. FOCUS VISIBLE ============================================================ */ html:not([data-a11y-mode="default"]) :focus-visible { outline-color: var(--a11y-accent) !important; } /* ============================================================ 11. SELECTION ============================================================ */ html:not([data-a11y-mode="default"]) ::selection { background: color-mix(in srgb, var(--a11y-accent) 30%, transparent) !important; } /* ============================================================ 12. KBD ============================================================ */ 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; } /* ============================================================ 13. HR / DIVIDERS ============================================================ */ html:not([data-a11y-mode="default"]) hr { background: var(--a11y-divider) !important; border-color: var(--a11y-divider) !important; } /* ============================================================ 14. LOGO — Compensacion optica para modos claros ============================================================ */ /* Logo oscuro recortado — ya no necesita compensación óptica */ /* ============================================================ 15. COLOR SCHEME (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; } /* ============================================================ 16. 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; } /* ============================================================ 17. GRADIENTES — Aplanar en modos claros Los gradientes oscuros (linear-gradient #1e293b -> #0f172a) se ven mal sobre fondo claro. ============================================================ */ 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; } /* ============================================================ 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; } /* ============================================================ 19. BOTONES Solo color de texto — no fondo (los botones primary/accent necesitan mantener sus colores de acento). ============================================================ */ /* Solo botones sin styled-components — los sc- tienen su propio color (primary = blanco, danger = rojo, etc.) que no debe sobreescribirse */ html:not([data-a11y-mode="default"]) button:not([class*="sc-"]) { color: var(--a11y-text-primary) !important; } /* ============================================================ 20. BLOCKQUOTE ============================================================ */ html:not([data-a11y-mode="default"]) blockquote { color: var(--a11y-text-secondary) !important; border-color: var(--a11y-border) !important; } /* ============================================================ 21. DETAILS / SUMMARY ============================================================ */ 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; } /* ============================================================ 22. MARK ============================================================ */ html:not([data-a11y-mode="default"]) mark { background: color-mix(in srgb, var(--a11y-warning) 30%, transparent) !important; color: var(--a11y-text-primary) !important; } /* ============================================================ 23. STYLED-COMPONENTS — Red de seguridad Cubre patrones comunes de styled-components no migrados. ============================================================ */ /* Contenedores principales */ 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 */ 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 */ 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; } /* Sidebars */ html:not([data-a11y-mode="default"]) [class*="Sidebar"][class*="sc-"] { background: var(--a11y-bg-sidebar) !important; border-color: var(--a11y-border) !important; } /* Dropdowns */ html:not([data-a11y-mode="default"]) [class*="Dropdown"][class*="sc-"]:not(button) { background: var(--a11y-bg-dropdown) !important; border-color: var(--a11y-border) !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; } /* Wrappers y secciones */ 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; } /* 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 */ html:not([data-a11y-mode="default"]) [class*="Empty"][class*="sc-"] { color: var(--a11y-text-muted) !important; } /* Listas */ 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; } /* 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; }