/** * UXDivi · LearnDash Player Theme * Versión: 1.1.1 (rewrite quirúrgico · solo colores + tipografía) * * Reglas duras: * - SOLO: background-color, color, border-color, font-family. * - NO tocar: padding, margin, max-width, gap, height, width, * border-width, border-radius, box-shadow, display, position. * - !important sólo donde el child theme lo usa para imponerse * (la mayoría de selectores LD lo hace). * - Scope: body.ld-in-focus-mode (no afecta otras pantallas). */ /* ============================================================ 1 · Tokens ============================================================ */ body.ld-in-focus-mode { --ux-brand: #014DFD; --ux-brand-light: #4A7EFF; --ux-cyan: #62E5FF; --ux-cyan-2: #8CEEFF; --ux-ink: #F5F8FF; --ux-ink-2: #C6D2E8; --ux-ink-3: #8894B3; --ux-ink-4: #566080; --ux-bg: #040814; --ux-bg-2: #070C1C; --ux-surface: #0A0F1E; --ux-surface-2: #10172B; --ux-line: rgba(98, 229, 255, 0.10); --ux-line-strong: rgba(98, 229, 255, 0.25); --ux-success: #42BC42; --ux-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; --ux-body: 'Inter', system-ui, -apple-system, sans-serif; --ux-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; } /* ============================================================ 2 · Body / wrapper ============================================================ */ body.ld-in-focus-mode { background-color: var(--ux-bg) !important; color: var(--ux-ink-2); font-family: var(--ux-body); } body.ld-in-focus-mode .learndash-wrapper { color: var(--ux-ink-2); font-family: var(--ux-body); } body.ld-in-focus-mode .ld-focus, body.ld-in-focus-mode .ld-focus-main { background-color: var(--ux-bg) !important; } /* Contexto paywall: WC Memberships sustituye el contenido del topic por el restricted message, pero el wrapper LD focus mode se queda con el background del tema legacy (brand azul plano) → el paywall queda "encuadrado" en azul brillante. Forzamos bg dark en todos los wrappers posibles cuando body tiene access-restricted/membership-content. Jefferson 2026-05-20 · bug reportado con topic Divi 5 Completo. */ body.ld-in-focus-mode.access-restricted, body.ld-in-focus-mode.membership-content, body.access-restricted.ld-in-focus-mode, body.access-restricted.ld-in-focus-mode main, body.access-restricted.ld-in-focus-mode article, body.access-restricted.ld-in-focus-mode .ld-focus-content, body.access-restricted.ld-in-focus-mode .ld-focus-main, body.access-restricted.ld-in-focus-mode .learndash-wrapper, body.access-restricted.ld-in-focus-mode .et_pb_section, body.access-restricted.ld-in-focus-mode .et_pb_row, body.access-restricted.ld-in-focus-mode #main-content, body.access-restricted.ld-in-focus-mode #et-main-area, body.access-restricted.ld-in-focus-mode #page-container, body.access-restricted.ld-in-focus-mode .container { background: var(--ux-bg) !important; background-color: var(--ux-bg) !important; } body.ld-in-focus-mode h1, body.ld-in-focus-mode h2, body.ld-in-focus-mode h3, body.ld-in-focus-mode h4, body.ld-in-focus-mode h5, body.ld-in-focus-mode h6 { font-family: var(--ux-display); color: var(--ux-ink); } body.ld-in-focus-mode .ld-focus-content { background-color: var(--ux-bg) !important; color: var(--ux-ink-2); } body.ld-in-focus-mode .ld-focus-content p, body.ld-in-focus-mode .ld-focus-content li { color: var(--ux-ink-2); } body.ld-in-focus-mode .ld-focus-content strong, body.ld-in-focus-mode .ld-focus-content b { color: var(--ux-ink); } body.ld-in-focus-mode .ld-focus-content a { color: var(--ux-cyan); } body.ld-in-focus-mode .ld-focus-content a:hover { color: var(--ux-cyan-2); } /* Embed fallback · cuando el oEmbed no resolvió, el wrapper trae un estilizado como link de bloque (más visible que un link normal inline) para que el usuario sepa que es clickeable. Inyectado por el mu-plugin uxdivi-embed-fallback.php. */ body.ld-in-focus-mode .ld-focus-content .uxdivi-embed-fallback { padding: 14px 18px; background: rgba(98, 229, 255, 0.06); border: 1px solid rgba(98, 229, 255, 0.25); border-radius: 12px; margin: 24px 0 14px; } body.ld-in-focus-mode .ld-focus-content .uxdivi-embed-fallback-link { color: var(--ux-cyan) !important; text-decoration: underline; text-decoration-color: rgba(98, 229, 255, 0.55); text-decoration-thickness: 1.5px; text-underline-offset: 3px; word-break: break-all; font-weight: 500; } body.ld-in-focus-mode .ld-focus-content .uxdivi-embed-fallback-link:hover { color: var(--ux-cyan-2) !important; text-decoration-color: var(--ux-cyan); } /* ============================================================ 3 · Topbar ============================================================ */ body.ld-in-focus-mode #ld-focus-header.ld-focus-header, body.ld-in-focus-mode .ld-focus-header, body.ld-in-focus-mode #ld-focus-header { background-color: var(--ux-bg-2) !important; border-color: var(--ux-line) !important; color: var(--ux-ink-2) !important; } body.ld-in-focus-mode .ld-focus-header *, body.ld-in-focus-mode .ld-focus-header .ld-text, body.ld-in-focus-mode .ld-focus-header .ld-user-welcome-text { color: var(--ux-ink-2); } body.ld-in-focus-mode .ld-focus-header .ld-breadcrumbs, body.ld-in-focus-mode .ld-focus-header .ld-breadcrumbs * { color: var(--ux-ink-3) !important; } body.ld-in-focus-mode .ld-focus-header .ld-breadcrumbs a:hover { color: var(--ux-cyan) !important; } /* Dropdown del avatar (hover sobre la foto del user) · alinear con DS UXDivi 2026. IMPORTANTE: los estilos visuales (fondo dark, border, radius) van SOLO al PANEL del dropdown (`.ld-user-menu-items`), no al wrapper (`.ld-user-menu`) que envuelve también al avatar. Si se aplicara al wrapper, el avatar quedaría con fondo dark + border + el panel cortado por overflow:hidden. */ /* Wrapper · sin cambios visuales, solo asegurar position context. */ body.ld-in-focus-mode .ld-focus-header .ld-user-menu, body.ld-in-focus-mode .ld-focus-header #ld-focus-user-menu, body.ld-in-focus-mode .bb-rl-user-menu { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } /* Panel del dropdown · acá sí van los estilos del DS UXDivi 2026. */ body.ld-in-focus-mode .ld-focus-header .ld-user-menu-items, body.ld-in-focus-mode #ld-focus-header .ld-user-menu-items, body.ld-in-focus-mode .bb-rl-user-menu-items { background: var(--ux-surface) !important; background-color: var(--ux-surface) !important; border: 1px solid var(--ux-line) !important; border-radius: 12px !important; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(98, 229, 255, 0.06) !important; padding: 6px 0 !important; overflow: hidden; } body.ld-in-focus-mode .ld-focus-header .ld-user-menu-items a, body.ld-in-focus-mode .ld-focus-header .ld-user-menu-items li, body.ld-in-focus-mode .ld-focus-header .ld-user-menu-items li a, body.ld-in-focus-mode #ld-focus-header .ld-user-menu-items a, body.ld-in-focus-mode .bb-rl-user-menu a, body.ld-in-focus-mode .bb-rl-user-menu-items a { color: var(--ux-ink-2) !important; background: transparent !important; background-color: transparent !important; font-family: var(--ux-body, 'Inter'), system-ui, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; padding: 10px 18px !important; letter-spacing: 0 !important; text-transform: none !important; border: 0 !important; transition: color 0.18s ease, background 0.18s ease !important; } body.ld-in-focus-mode .ld-focus-header .ld-user-menu-items a:hover, body.ld-in-focus-mode .ld-focus-header .ld-user-menu-items li a:hover, body.ld-in-focus-mode #ld-focus-header .ld-user-menu-items a:hover, body.ld-in-focus-mode .bb-rl-user-menu a:hover { color: var(--ux-cyan) !important; background: rgba(98, 229, 255, 0.08) !important; background-color: rgba(98, 229, 255, 0.08) !important; } /* Flechita ::before que apunta al avatar */ body.ld-in-focus-mode .ld-focus-header .ld-user-menu-items::before, body.ld-in-focus-mode #ld-focus-header .ld-user-menu-items::before { border-bottom-color: var(--ux-surface) !important; border-bottom-width: 8px !important; filter: drop-shadow(0 -1px 0 rgba(98, 229, 255, 0.18)); } body.ld-in-focus-mode .ld-focus-header .ld-trigger-mobile-nav, body.ld-in-focus-mode .ld-focus-header .ld-mobile-nav { color: var(--ux-ink) !important; } /* Logo wrapper · el child theme le pone bg blanco · transparente */ body.ld-in-focus-mode .ld-focus-header .ld-brand-logo, body.ld-in-focus-mode #ld-focus-header .ld-brand-logo { background-color: transparent !important; } body.ld-in-focus-mode .ld-focus-header .ld-brand-logo a { background-color: transparent !important; } /* Separadores entre secciones del topbar · el child theme usa borders blancos por default · los pasamos al token line del DS */ body.ld-in-focus-mode .ld-focus-header *, body.ld-in-focus-mode #ld-focus-header * { border-color: var(--ux-line) !important; } /* Anchor menu links del topbar · sin border-bottom blanco al hover */ body.ld-in-focus-mode .ld-focus-header .ld-focus-menu-link { border-color: transparent !important; } body.ld-in-focus-mode .ld-focus-header .ld-focus-menu-link:hover { border-color: var(--ux-cyan) !important; } /* ============================================================ 4 · Mark complete + lesson nav del topbar · gradient brand→cyan ============================================================ */ body.ld-in-focus-mode .sfwd-mark-complete .learndash_mark_complete_button:not(.learndash_mark_incomplete_button), body.ld-in-focus-mode form.sfwd-mark-complete input[type="submit"]:not(.learndash_mark_incomplete_button) { background-color: var(--ux-brand) !important; background-image: linear-gradient(90deg, var(--ux-brand) 0%, var(--ux-cyan) 100%) !important; color: #FFFFFF !important; border-color: transparent !important; } body.ld-in-focus-mode .sfwd-mark-complete .learndash_mark_complete_button:not(.learndash_mark_incomplete_button):hover, body.ld-in-focus-mode form.sfwd-mark-complete input[type="submit"]:not(.learndash_mark_incomplete_button):hover { filter: brightness(1.08); } /* "Marcar como incompleto" · estado ya completado · sutil */ body.ld-in-focus-mode .sfwd-mark-incomplete .learndash_mark_incomplete_button { background-color: var(--ux-surface) !important; background-image: none !important; color: var(--ux-ink-2) !important; border-color: var(--ux-line-strong) !important; } body.ld-in-focus-mode .sfwd-mark-incomplete .learndash_mark_incomplete_button:hover { background-color: var(--ux-surface-2) !important; color: var(--ux-cyan) !important; border-color: var(--ux-cyan) !important; } body.ld-in-focus-mode .ld-course-step-back, body.ld-in-focus-mode .learndash-wrapper .ld-course-step-back { color: var(--ux-ink-3) !important; } body.ld-in-focus-mode .ld-course-step-back:hover { color: var(--ux-cyan) !important; } body.ld-in-focus-mode .ld-focus-header .sfwd-mark-complete:after { color: var(--ux-success) !important; } /* ============================================================ 5 · Sidebar (LD usa id="ld-focus-sidebar") ============================================================ */ body.ld-in-focus-mode #ld-focus-sidebar.ld-focus-sidebar, body.ld-in-focus-mode .ld-focus-sidebar, body.ld-in-focus-mode .ld-focus-sidebar-wrapper { background-color: var(--ux-bg-2) !important; border-color: var(--ux-line) !important; color: var(--ux-ink-2) !important; } body.ld-in-focus-mode #ld-focus-sidebar .ld-course-navigation-heading, body.ld-in-focus-mode .ld-focus-mode-course-heading-wrapper, body.ld-in-focus-mode .ld-focus-sidebar .ld-course-navigation-heading { background-color: transparent !important; color: var(--ux-ink) !important; } body.ld-in-focus-mode .ld-focus-sidebar .ld-course-navigation-heading h2, body.ld-in-focus-mode .ld-focus-mode-course-heading-wrapper h2 { color: var(--ux-ink) !important; font-family: var(--ux-display); } /* Sidebar trigger · botón circular para colapsar/expandir el sidebar. Cubrimos ambos estados (aria-expanded true/false) y forzamos el bg con box-shadow inset porque el child theme pinta blanco al collapsed con !important profundo (mismo patrón que .ld-primary-background). */ body.ld-in-focus-mode .ld-focus-sidebar-trigger, body.ld-in-focus-mode #ld-focus-sidebar-toggle, body.ld-in-focus-mode .ld-focus-sidebar-trigger[aria-expanded="true"], body.ld-in-focus-mode .ld-focus-sidebar-trigger[aria-expanded="false"] { background-color: var(--ux-surface) !important; background-image: none !important; box-shadow: inset 0 0 0 50px var(--ux-surface) !important; color: var(--ux-cyan) !important; border-color: var(--ux-line-strong) !important; } body.ld-in-focus-mode .ld-focus-sidebar-trigger:hover, body.ld-in-focus-mode #ld-focus-sidebar-toggle:hover { box-shadow: inset 0 0 0 50px var(--ux-surface-2) !important; color: var(--ux-cyan-2) !important; border-color: var(--ux-cyan) !important; } body.ld-in-focus-mode .ld-focus-sidebar-trigger .ld-icon, body.ld-in-focus-mode #ld-focus-sidebar-toggle .ld-icon { color: var(--ux-cyan) !important; } /* ============================================================ 6 · Progress ============================================================ */ body.ld-in-focus-mode .ld-focus-sidebar .ld-progress, body.ld-in-focus-mode .ld-progress { background-color: transparent !important; } body.ld-in-focus-mode .ld-progress-label { color: var(--ux-ink-3) !important; } body.ld-in-focus-mode .ld-progress-percentage, body.ld-in-focus-mode .ld-progress-percentage.ld-secondary-color { color: var(--ux-cyan) !important; } body.ld-in-focus-mode .ld-progress-steps { color: var(--ux-ink-3) !important; } body.ld-in-focus-mode .ld-progress-bar { background-color: var(--ux-surface-2) !important; } body.ld-in-focus-mode .ld-progress-bar-percentage, body.ld-in-focus-mode .ld-progress-bar-percentage.ld-secondary-background { background-color: var(--ux-cyan) !important; background-image: linear-gradient(90deg, var(--ux-brand) 0%, var(--ux-cyan) 100%) !important; } /* ============================================================ 7 · Course navigation ============================================================ */ body.ld-in-focus-mode .ld-course-navigation, body.ld-in-focus-mode .ld-course-navigation-list, body.ld-in-focus-mode .ld-lesson-items { background-color: transparent !important; color: var(--ux-ink-2); } body.ld-in-focus-mode .ld-lesson-item, body.ld-in-focus-mode .learndash-wrapper .ld-lesson-item { background-color: transparent !important; border-color: transparent !important; } body.ld-in-focus-mode .ld-lesson-item:hover, body.ld-in-focus-mode .learndash-wrapper .ld-lesson-item:hover { background-color: var(--ux-surface) !important; } body.ld-in-focus-mode .ld-lesson-item.ld-is-current-lesson, body.ld-in-focus-mode .learndash-wrapper .ld-lesson-item.ld-is-current-lesson { background-color: var(--ux-surface) !important; border-color: var(--ux-line-strong) !important; } body.ld-in-focus-mode .ld-lesson-item-preview-heading, body.ld-in-focus-mode .ld-lesson-item-preview-heading.ld-primary-color-hover { color: var(--ux-ink-2) !important; background-color: transparent !important; } body.ld-in-focus-mode .ld-lesson-item-preview-heading:hover { color: var(--ux-cyan) !important; } /* Lesson actual · cyan en lugar del brand original */ body.ld-in-focus-mode .ld-lesson-item.ld-is-current-lesson .ld-lesson-item-preview-heading, body.ld-in-focus-mode .ld-lesson-item.ld-is-current-lesson .ld-lesson-title { color: var(--ux-cyan) !important; } /* Utilities ld-primary-color y current/active · cyan en lugar de brand */ body.ld-in-focus-mode .ld-primary-color, body.ld-in-focus-mode .learndash-wrapper .ld-primary-color, body.ld-in-focus-mode .ld-primary-color-hover:hover, body.ld-in-focus-mode .ld-table-list-item-preview.ld-current-step, body.ld-in-focus-mode .ld-table-list-item.ld-current-step .ld-table-list-item-preview { color: var(--ux-cyan) !important; } body.ld-in-focus-mode .ld-lesson-title { color: inherit !important; font-family: var(--ux-display); } body.ld-in-focus-mode .ld-expand-button, body.ld-in-focus-mode .ld-expand-button.ld-button-alternate { background-color: transparent !important; border-color: transparent !important; color: var(--ux-ink-3) !important; } body.ld-in-focus-mode .ld-expand-button:hover { color: var(--ux-cyan) !important; } body.ld-in-focus-mode .ld-expand-text, body.ld-in-focus-mode .ld-expand-text.ld-primary-color { color: inherit !important; } /* `.ld-primary-background` (utility LD) viene brand desde stylesheets externos del child theme con !important profundo · NO se puede pisar con specificity normal. Truco: usamos `box-shadow: inset` para tapar visualmente el bg-color con surface-2 dark. El icono interno queda sobre el shadow. */ body.ld-in-focus-mode .ld-icon-arrow-down.ld-primary-background, body.ld-in-focus-mode .ld-icon-arrow-left.ld-primary-background, body.ld-in-focus-mode .ld-icon-arrow-right.ld-primary-background, body.ld-in-focus-mode .ld-icon.ld-primary-background { box-shadow: inset 0 0 0 50px var(--ux-surface-2) !important; color: var(--ux-cyan) !important; } body.ld-in-focus-mode .ld-icon-arrow-down, body.ld-in-focus-mode .ld-icon-arrow-left, body.ld-in-focus-mode .ld-icon-arrow-right { color: var(--ux-cyan) !important; } /* Estado expandido · color cyan-2 más brillante */ body.ld-in-focus-mode .ld-expand-button.ld-expanded .ld-icon-arrow-down.ld-primary-background { color: var(--ux-cyan-2) !important; } /* ============================================================ 8 · Status icons ============================================================ */ body.ld-in-focus-mode .ld-status-icon.ld-status-incomplete, body.ld-in-focus-mode .ld-status.ld-status-incomplete, body.ld-in-focus-mode .learndash-wrapper .ld-status-icon.ld-status-incomplete, body.ld-in-focus-mode .learndash-wrapper .ld-status.ld-status-incomplete, body.ld-in-focus-mode .learndash-wrapper .ld-course-navigation .ld-lesson-item.ld-is-current-lesson .ld-status-incomplete, body.ld-in-focus-mode .learndash-wrapper .ld-table-list-item.learndash-incomplete .ld-status-icon.ld-status-incomplete { background-color: transparent !important; border-color: var(--ux-ink-4) !important; } body.ld-in-focus-mode .ld-status-icon.ld-status-complete, body.ld-in-focus-mode .ld-status.ld-status-complete, body.ld-in-focus-mode .ld-status-icon.ld-status-complete.ld-secondary-background, body.ld-in-focus-mode .ld-status.ld-status-complete.ld-secondary-background { background-color: var(--ux-success) !important; border-color: transparent !important; } body.ld-in-focus-mode .ld-status-icon .ld-icon-checkmark, body.ld-in-focus-mode .ld-status .ld-icon-checkmark { color: #FFFFFF !important; } /* ============================================================ 9 · Topic list ============================================================ */ body.ld-in-focus-mode .ld-lesson-item-expanded, body.ld-in-focus-mode .ld-lesson-item-expanded.ld-expandable { background-color: transparent !important; } /* Triángulos blancos (pseudo ::before) que apuntan al lesson actual · el child theme los pinta con border blanco · los ocultamos */ body.ld-in-focus-mode .ld-lesson-item-expanded.ld-expandable::before, body.ld-in-focus-mode .ld-lesson-item-expanded::before, body.ld-in-focus-mode .ld-table-list.ld-topic-list::before, body.ld-in-focus-mode .ld-table-list::before { display: none !important; content: none !important; } body.ld-in-focus-mode .ld-table-list, body.ld-in-focus-mode .ld-table-list.ld-topic-list, body.ld-in-focus-mode .ld-table-list-items, body.ld-in-focus-mode .learndash-wrapper .ld-table-list, body.ld-in-focus-mode .learndash-wrapper .ld-table-list.ld-topic-list, body.ld-in-focus-mode .learndash-wrapper .ld-table-list-items { background-color: transparent !important; border-color: var(--ux-line) !important; } body.ld-in-focus-mode .ld-table-list-header, body.ld-in-focus-mode .ld-table-list-header.ld-primary-background, body.ld-in-focus-mode .learndash-wrapper .ld-table-list-header, body.ld-in-focus-mode .learndash-wrapper .ld-table-list-header.ld-primary-background { background-color: transparent !important; color: var(--ux-ink-3) !important; } body.ld-in-focus-mode .ld-table-list-item, body.ld-in-focus-mode .learndash-wrapper .ld-table-list-item { background-color: transparent !important; border-color: var(--ux-line) !important; } body.ld-in-focus-mode .ld-table-list-item:hover, body.ld-in-focus-mode .learndash-wrapper .ld-table-list-item:hover { background-color: var(--ux-surface-2) !important; } body.ld-in-focus-mode .ld-table-list-item-preview, body.ld-in-focus-mode .ld-table-list-item-preview.ld-topic-row, body.ld-in-focus-mode .ld-table-list-item-preview.ld-primary-color-hover { color: var(--ux-ink-2) !important; background-color: transparent !important; } body.ld-in-focus-mode .ld-table-list-item-preview:hover { color: var(--ux-cyan) !important; } /* Topic actual · misma marca cyan que el lesson actual */ body.ld-in-focus-mode .ld-table-list-item-preview.ld-is-current-item, body.ld-in-focus-mode .ld-table-list-item-preview.bb-rl-current-topic-anchor, body.ld-in-focus-mode a.ld-topic-row.ld-is-current-item, body.ld-in-focus-mode a.ld-topic-row[aria-current="page"], body.ld-in-focus-mode .ld-table-list-item-preview[aria-current="page"] { color: var(--ux-cyan) !important; } body.ld-in-focus-mode .ld-table-list-item-preview.ld-is-current-item .ld-topic-title, body.ld-in-focus-mode .ld-table-list-item-preview.bb-rl-current-topic-anchor .ld-topic-title, body.ld-in-focus-mode .ld-table-list-item-preview[aria-current="page"] .ld-topic-title { color: var(--ux-cyan) !important; } body.ld-in-focus-mode .ld-topic-title { color: inherit !important; } body.ld-in-focus-mode .ld-table-list-footer { background-color: transparent !important; color: var(--ux-ink-3) !important; } /* ============================================================ 10 · Lesson navigation buttons ============================================================ */ body.ld-in-focus-mode .ld-lesson-navigation, body.ld-in-focus-mode .ld-content-actions, body.ld-in-focus-mode .ld-content-action { background-color: transparent !important; } body.ld-in-focus-mode .ld-button, body.ld-in-focus-mode .learndash-wrapper .ld-button { background-color: var(--ux-surface) !important; color: var(--ux-ink) !important; border-color: var(--ux-line-strong) !important; } body.ld-in-focus-mode .ld-button:hover { background-color: var(--ux-surface-2) !important; color: var(--ux-cyan) !important; border-color: var(--ux-cyan) !important; } body.ld-in-focus-mode .ld-button.ld-button-transparent, body.ld-in-focus-mode .ld-button.ld-button-alternate { background-color: transparent !important; color: var(--ux-ink-2) !important; border-color: var(--ux-line-strong) !important; } /* ============================================================ 11 · Wrappers internos blancos de LD (algunos viven fuera de .ld-focus-content · scope abierto a focus mode) ============================================================ */ body.ld-in-focus-mode .learndash-wrapper--lesson, body.ld-in-focus-mode .learndash-wrapper--topic, body.ld-in-focus-mode .learndash-wrapper--quiz, body.ld-in-focus-mode .learndash-wrap, body.ld-in-focus-mode .learndash-shortcode-wrap, body.ld-in-focus-mode [class*="learndash-shortcode-wrap-"] { background-color: transparent !important; color: var(--ux-ink-2) !important; } body.ld-in-focus-mode .ld-focus-content .ld-lesson-status, body.ld-in-focus-mode .ld-focus-content .ld-breadcrumbs { background-color: var(--ux-surface) !important; color: var(--ux-ink-2) !important; border-color: var(--ux-line) !important; } body.ld-in-focus-mode .ld-focus-content .ld-breadcrumbs *, body.ld-in-focus-mode .ld-focus-content .ld-breadcrumbs a { color: var(--ux-ink-2) !important; } body.ld-in-focus-mode .ld-focus-content .ld-breadcrumbs a:hover { color: var(--ux-cyan) !important; } body.ld-in-focus-mode .ld-focus-content .ld-status.ld-status-complete, body.ld-in-focus-mode .ld-focus-content .ld-status.ld-status-complete.ld-secondary-background { background-color: rgba(66, 188, 66, 0.15) !important; color: var(--ux-success) !important; border-color: rgba(66, 188, 66, 0.35) !important; } body.ld-in-focus-mode .ld-focus-content .ld-status.ld-status-incomplete { background-color: var(--ux-surface) !important; color: var(--ux-ink-3) !important; border-color: var(--ux-line-strong) !important; } /* ============================================================ 12 · Tabs ============================================================ */ body.ld-in-focus-mode .ld-tabs { background-color: transparent !important; border-color: var(--ux-line) !important; } body.ld-in-focus-mode .ld-tabs .ld-tabs-navigation .ld-tab { color: var(--ux-ink-3) !important; background-color: transparent !important; border-color: transparent !important; } body.ld-in-focus-mode .ld-tabs .ld-tabs-navigation .ld-tab:hover { color: var(--ux-cyan) !important; } body.ld-in-focus-mode .ld-tabs .ld-tabs-navigation .ld-tab.ld-active { color: var(--ux-ink) !important; border-color: var(--ux-cyan) !important; } body.ld-in-focus-mode .ld-tab-content { background-color: transparent !important; color: var(--ux-ink-2) !important; } /* ============================================================ 13 · Selección ============================================================ */ body.ld-in-focus-mode ::selection { background-color: rgba(98, 229, 255, 0.28); color: var(--ux-ink); } /* ============================================================ 14 · Scrollbar dark consistente (sidebar + main) ============================================================ */ body.ld-in-focus-mode .ld-focus-sidebar::-webkit-scrollbar, body.ld-in-focus-mode .ld-focus-sidebar-wrapper::-webkit-scrollbar, body.ld-in-focus-mode .ld-focus-main::-webkit-scrollbar, body.ld-in-focus-mode .ld-focus-content::-webkit-scrollbar, body.ld-in-focus-mode #ld-focus-sidebar::-webkit-scrollbar { background-color: var(--ux-bg-2); } body.ld-in-focus-mode .ld-focus-sidebar::-webkit-scrollbar-track, body.ld-in-focus-mode .ld-focus-sidebar-wrapper::-webkit-scrollbar-track, body.ld-in-focus-mode .ld-focus-main::-webkit-scrollbar-track, body.ld-in-focus-mode .ld-focus-content::-webkit-scrollbar-track, body.ld-in-focus-mode #ld-focus-sidebar::-webkit-scrollbar-track { background-color: var(--ux-bg-2); } body.ld-in-focus-mode .ld-focus-sidebar::-webkit-scrollbar-thumb, body.ld-in-focus-mode .ld-focus-sidebar-wrapper::-webkit-scrollbar-thumb, body.ld-in-focus-mode .ld-focus-main::-webkit-scrollbar-thumb, body.ld-in-focus-mode .ld-focus-content::-webkit-scrollbar-thumb, body.ld-in-focus-mode #ld-focus-sidebar::-webkit-scrollbar-thumb { background-color: var(--ux-surface-2); border-color: var(--ux-bg-2); } body.ld-in-focus-mode .ld-focus-sidebar::-webkit-scrollbar-thumb:hover, body.ld-in-focus-mode .ld-focus-sidebar-wrapper::-webkit-scrollbar-thumb:hover, body.ld-in-focus-mode .ld-focus-main::-webkit-scrollbar-thumb:hover, body.ld-in-focus-mode #ld-focus-sidebar::-webkit-scrollbar-thumb:hover { background-color: var(--ux-surface-3, #18213E); } /* Firefox · scrollbar-color */ body.ld-in-focus-mode .ld-focus-sidebar, body.ld-in-focus-mode .ld-focus-sidebar-wrapper, body.ld-in-focus-mode #ld-focus-sidebar, body.ld-in-focus-mode .ld-focus-main, body.ld-in-focus-mode .ld-focus-content { scrollbar-color: var(--ux-surface-2) var(--ux-bg-2); scrollbar-width: thin; }