/* ========================================================= MB Dark / Light Mode - El modo oscuro se activa cuando tiene la clase .mb-dark - Los estilos del toggle aplican SIEMPRE; el resto solo en oscuro ========================================================= */ /* ---------- TOGGLE (conmutador) ---------- */ .mb-dlm-toggle{ background:transparent; border:0; padding:4px; margin:0; cursor:pointer; line-height:0; display:inline-flex; vertical-align:middle; } .mb-dlm-toggle:focus-visible{ outline:2px solid #f97316; outline-offset:3px; border-radius:999px; } .mb-dlm-track{ position:relative; display:inline-flex; align-items:center; width:54px; height:28px; border-radius:999px; background:#e2e8f0; border:1px solid rgba(15,23,42,.14); padding:3px; transition:background .2s ease, border-color .2s ease; box-sizing:border-box; } .mb-dlm-thumb{ width:22px; height:22px; border-radius:50%; background:#ffffff; box-shadow:0 1px 3px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; transition:transform .22s ease, color .2s ease; color:#f59e0b; } .mb-dlm-i{ width:14px; height:14px; position:absolute; transition:opacity .18s ease; } .mb-dlm-i-sun{ opacity:1; } .mb-dlm-i-moon{ opacity:0; } html.mb-dark .mb-dlm-track{ background:#334155; border-color:rgba(255,255,255,.16); } html.mb-dark .mb-dlm-thumb{ transform:translateX(26px); color:#fbbf24; } html.mb-dark .mb-dlm-i-sun{ opacity:0; } html.mb-dark .mb-dlm-i-moon{ opacity:1; } /* Botón flotante */ .mb-dlm-float{ position:fixed; z-index:99990; } .mb-dlm-float .mb-dlm-track{ box-shadow:0 6px 20px rgba(2,6,23,.22); } .mb-dlm-pos-br{ bottom:20px; right:20px; } .mb-dlm-pos-bl{ bottom:20px; left:20px; } .mb-dlm-pos-tr{ top:30px; right:20px; } .mb-dlm-pos-tl{ top:30px; left:20px; } .mb-dlm-pos-tc{ top:30px; left:50%; transform:translateX(-50%); } /* ========================================================= MODO OSCURO — TEMA BLOCKSY Blocksy define su paleta con variables CSS. Redefiniéndolas bajo .mb-dark, gran parte del tema cambia automáticamente. ⚠️ IMPORTANTE: los nombres exactos pueden variar según tu instalación. Verifícalos inspeccionando tu web (botón derecho → Inspeccionar sobre el / y mira las variables "--theme-..."). Ajusta los valores de abajo a tu gusto. ========================================================= */ html.mb-dark{ color-scheme: dark; /* Paleta global de Blocksy. OJO: NO redefinimos color-1 ni color-2 (tu acento naranja) para que el naranja quede EXACTAMENTE igual que en claro. */ --theme-palette-color-3:#e2e8f0; /* texto que antes era oscuro -> claro */ --theme-palette-color-4:#94a3b8; --theme-palette-color-5:#243044; /* bordes / superficies suaves */ --theme-palette-color-6:#16202e; --theme-palette-color-7:#0f1828; --theme-palette-color-8:#0b1220; /* blanco que antes era fondo -> oscuro */ /* Variables de texto/fondo del tema (revisar nombres) */ --theme-text-color:#cbd5e1; --theme-headings-color:#f8fafc; --theme-link-initial-color:#cbd5e1; /* enlaces en claro; el naranja queda para acento/hover */ --theme-link-hover-color:#f97316; /* tu naranja, sin cambiar */ --theme-border-color:#243044; --theme-content-area-background:#0b1220; --theme-content-background-color:#0b1220; } /* Red de seguridad: por si algún contenedor no usa variables. Mantenlo ligero para no romper el diseño del tema. */ html.mb-dark body{ background-color:#0b1220; color:#cbd5e1; } /* ========================================================= MODO OSCURO — CONTENIDO DEL SITIO (LearnDash, cabecera…) ========================================================= */ /* ---------- Tarjetas de cursos (LearnDash Course Grid) — VERIFICADO ---------- El blanco lo pinta ".grid-2 .post" (4 clases). Hay que igualar/superar esa especificidad, por eso el selector es largo. */ html.mb-dark .learndash-course-grid .items-wrapper .grid-2 .post{ background:#111a2b !important; border-color:#243044 !important; } html.mb-dark .learndash-course-grid .entry-title, html.mb-dark .learndash-course-grid .entry-title a, html.mb-dark .learndash-course-grid .content{ color:#e2e8f0 !important; } /* ---------- Interior del curso (LearnDash) — VERIFICADO ---------- Bloques/lecciones, barra de progreso y temas. El naranja de LearnDash (botones "Expandir"/"Expandir todo") se mantiene intacto. */ html.mb-dark .learndash-wrapper .ld-item-list-item{ background:#111a2b !important; border-color:#243044 !important; } html.mb-dark .learndash-wrapper .ld-course-status{ background:#0e1828 !important; } html.mb-dark .learndash-wrapper .ld-pages{ background:#243044 !important; } html.mb-dark .learndash-wrapper .ld-item-title, html.mb-dark .learndash-wrapper .ld-item-name{ color:#f1f5f9 !important; } html.mb-dark .learndash-wrapper .ld-item-components, html.mb-dark .learndash-wrapper .ld-item-component{ color:#94a3b8 !important; } /* Círculo de estado (lección incompleta) para que no sea un punto blanco */ html.mb-dark .learndash-wrapper .ld-status-icon.ld-status-incomplete{ background:#1a2536 !important; } /* Filas de temas al expandir un bloque (fondo transparente; solo texto) */ html.mb-dark .learndash-wrapper .ld-table-list-item-preview, html.mb-dark .learndash-wrapper .ld-table-list-item .ld-topic-title, html.mb-dark .learndash-wrapper .ld-table-list-item .ld-item-title{ color:#e2e8f0 !important; } html.mb-dark .learndash-wrapper .ld-table-list-item{ border-color:#243044 !important; } /* Título de la página (lecciones, temas y páginas en general): que no quede negro */ html.mb-dark .entry-header .page-title, html.mb-dark h1.page-title{ color:#f8fafc !important; } /* Barra de progreso de lección/tema + breadcrumb (LearnDash) */ html.mb-dark .learndash-wrapper .ld-lesson-status, html.mb-dark .learndash-wrapper .ld-topic-status, html.mb-dark .learndash-wrapper .ld-breadcrumbs{ background:#0e1828 !important; } html.mb-dark .learndash-wrapper .ld-breadcrumbs, html.mb-dark .learndash-wrapper .ld-breadcrumbs a, html.mb-dark .learndash-wrapper .ld-breadcrumbs span{ color:#94a3b8 !important; } /* Barra lateral del modo enfoque: lista de temas expandida del bloque actual */ html.mb-dark .ld-lesson-item-expanded{ background:#0e1828 !important; } html.mb-dark .ld-lesson-item-expanded a, html.mb-dark .ld-lesson-item-expanded .ld-topic-title{ color:#cbd5e1 !important; } /* ---------- Desplegable de la cuenta (Blocksy) ---------- */ html.mb-dark .ct-header-account-dropdown{ background:#111a2b !important; border-color:#243044 !important; } html.mb-dark .ct-header-account-dropdown a{ color:#e2e8f0; } /* ---------- Pie de página (Blocksy) ---------- */ html.mb-dark footer.ct-footer [data-row="bottom"]{ background-color:#0b1220 !important; } /* ---------- Cabecera (Blocksy) ---------- */ html.mb-dark header.ct-header [data-row="middle"]{ background-color:#0b1220 !important; } /* Menú en claro */ html.mb-dark header.ct-header [data-row="middle"] .ct-menu-link{ color:#e2e8f0; } /* Ítem activo (página actual): mismo naranja que en modo claro (#cc4e00) */ html.mb-dark header.ct-header [data-row="middle"] .current-menu-item > .ct-menu-link, html.mb-dark header.ct-header [data-row="middle"] .current-menu-ancestor > .ct-menu-link, html.mb-dark header.ct-header [data-row="middle"] .current-page-item > .ct-menu-link, html.mb-dark header.ct-header [data-row="middle"] .current-page-ancestor > .ct-menu-link{ color:#cc4e00 !important; } /* LOGO en oscuro. APAÑO ACTUAL: ponemos el logo en blanco con un filtro (scoped SOLO al logo, para no afectar a los avatares de cuenta). Esto pierde el naranja del logo. MEJOR OPCIÓN (recomendada): sube un logo claro propio (texto blanco + ACADEMY en naranja) a Medios, y cambia este bloque por la versión con content:url(). */ html.mb-dark header.ct-header .site-logo-container img{ filter:brightness(0) invert(1); } /* Versión con logo claro real (descomenta y pon tu URL; comenta el filter de arriba): html.mb-dark header.ct-header .site-logo-container img{ content:url('https://learning.marketbreakers.academy/wp-content/uploads/XXXX/logo-claro.png'); filter:none; } */ /* ========================================================= MODO OSCURO — PLUGINS PROPIOS ========================================================= */ /* ---------- Colaboraciones MB (adaptado) ---------- */ html.mb-dark .cmb-wrap{ --cmb-ink:#f1f5f9; --cmb-muted:#94a3b8; --cmb-card:#111a2b; --cmb-border:#243044; --cmb-shadow:0 14px 40px rgba(0,0,0,.5); } html.mb-dark .cmb-card__media{ background:#0b1220; } html.mb-dark .cmb-group__empty{ background:#0e1828; border-color:#243044; color:#94a3b8; } html.mb-dark .cmb-video-list::-webkit-scrollbar-track{ background:#0e1828; } /* Aviso de login (Colaboraciones) */ html.mb-dark .cmb-login{ --cmb-ink:#f1f5f9; --cmb-muted:#94a3b8; --cmb-border:#243044; background:#111a2b; } /* ---------- Reproductor YouTube (HTML personalizado) ---------- */ html.mb-dark .yt-playlist-wrapper{ background:#111a2b; border-color:#243044; box-shadow:0 8px 26px rgba(0,0,0,.5); } html.mb-dark .yt-player-section{ background:#111a2b; } html.mb-dark .yt-sidebar{ background:#0e1828; border-left-color:#243044; } html.mb-dark .yt-sidebar-header{ background:#111a2b; color:#f1f5f9; border-bottom-color:#243044; } html.mb-dark .yt-mobile-toggle{ background:#0e1828; color:#f1f5f9; border-top-color:#243044; } html.mb-dark .yt-video-item .yt-item-title{ color:#e2e8f0; } html.mb-dark .yt-video-item.yt-active .yt-item-title{ color:#ffffff; } /* ---------- Tracker (TrackerFondeo) — VERIFICADO ---------- Usa variables --wmb-*. Redefinimos texto/bordes y oscurecemos las superficies blancas (tarjetas, paneles, pills, chips). El naranja de acento (--wmb-accent) y los estados activos NO se tocan. NOTA: el interior del GRÁFICO (líneas/ejes/áreas) lo dibuja Chart.js por código, no por CSS → se ajusta aparte en TrackerFondeo.php. */ html.mb-dark .wmb-app{ --wmb-text:#e2e8f0; --wmb-muted:#94a3b8; --wmb-border:rgba(255,255,255,.12); --wmb-shadow:0 8px 26px rgba(0,0,0,.45); --wmb-danger:#f87171; } html.mb-dark .wmb-app .wmb-tabs, html.mb-dark .wmb-app .wmb-chip--filters, html.mb-dark .wmb-app .wmb-chip--dates, html.mb-dark .wmb-app .wmb-chip--ghost, html.mb-dark .wmb-app .wmb-kpi, html.mb-dark .wmb-app .wmb-mini-kpi, html.mb-dark .wmb-app .wmb-point-card, html.mb-dark .wmb-app .wmb-panel, html.mb-dark .wmb-app .wmb-chart-half, html.mb-dark .wmb-app .wmb-legend-pill, html.mb-dark .wmb-app .wmb-pill, html.mb-dark .wmb-app .wmb-chart-currency-toggle, /* Pestañas "Registro de cuentas" y "Calculadora CFDs": */ html.mb-dark .wmb-app .wmb-currency-toggle, html.mb-dark .wmb-app .wmb-form, html.mb-dark .wmb-app .wmb-table, html.mb-dark .wmb-app .wmb-chip--btn, html.mb-dark .wmb-app .tb-calc-card{ background:#111a2b !important; border-color:#243044 !important; } /* Campos de formulario (inputs, selects, textareas) */ html.mb-dark .wmb-app input, html.mb-dark .wmb-app select, html.mb-dark .wmb-app textarea{ background:#0e1828 !important; color:#e2e8f0 !important; border-color:#243044 !important; } /* Tabla de cuentas: cabecera con TINTE naranja + línea de acento (como el crema del modo claro), para que destaque del cuerpo. Celdas transparentes. */ html.mb-dark .wmb-app .wmb-table th{ background:rgba(249,115,22,.10) !important; color:#f8fafc !important; border-bottom:2px solid rgba(249,115,22,.35) !important; } html.mb-dark .wmb-app .wmb-table td{ background:transparent !important; border-color:#243044 !important; } /* Botones outline del calculador (Calcular/Reiniciar): fondo transparente, conservan su borde y texto naranja */ html.mb-dark .wmb-app .tb-calculadora .wmb-btn, html.mb-dark .wmb-app .tb-calculadora .wmb-btn--ghost{ background:transparent !important; } /* ========================================================= MODO OSCURO — CALENDARIO (WMB Live Calendar / FullCalendar) — VERIFICADO Inspirado en el dark de Google Calendar: celdas oscuras, texto claro, líneas sutiles y "hoy" con tinte naranja. Los eventos conservan su color. ========================================================= */ html.mb-dark .wmb-livecal-wrap{ --wmb-ink:#e2e8f0; --wmb-muted:#94a3b8; --wmb-card:#111a2b; --wmb-border:#243044; --wmb-shadow:0 14px 40px rgba(0,0,0,.45); background:#111a2b !important; } html.mb-dark .wmb-livecal-wrap .fc{ --fc-border-color:#243044; --fc-today-bg-color:rgba(249,115,22,.12); --fc-page-bg-color:#111a2b; --fc-neutral-bg-color:#0e1828; background:transparent !important; } html.mb-dark .wmb-livecal-wrap .fc th, html.mb-dark .wmb-livecal-wrap .fc td{ border-color:#243044 !important; background:transparent !important; } html.mb-dark .wmb-livecal-wrap .fc .fc-col-header-cell-cushion, html.mb-dark .wmb-livecal-wrap .fc .fc-daygrid-day-number, html.mb-dark .wmb-livecal-wrap .fc-toolbar-title{ color:#e2e8f0 !important; } /* Botones de navegación (Hoy, ‹, ›) y "Copiar enlace": pasaban a pastillas blancas (texto invisible) al cambiar de mes. Los dejamos oscuros en todos los estados. */ html.mb-dark .wmb-livecal-wrap .fc .fc-button{ background:#1a2438 !important; border-color:#243044 !important; color:#e2e8f0 !important; } html.mb-dark .wmb-livecal-wrap .fc .fc-button:hover{ background:#243044 !important; } html.mb-dark .wmb-livecal-wrap .fc .fc-button:disabled{ background:#0e1828 !important; color:#64748b !important; opacity:1 !important; } html.mb-dark .wmb-livecal-wrap .wmb-livecal-btn-secondary{ background:#1a2438 !important; border-color:#243044 !important; color:#e2e8f0 !important; } /* Botón primario "Suscribirme (Google)": su fondo es var(--wmb-ink), que en oscuro pasa a claro -> con texto blanco quedaba invisible. Lo dejamos NARANJA (acento) + texto blanco como CTA principal, en todos los estados. */ html.mb-dark .wmb-livecal-wrap .wmb-livecal-btn:not(.wmb-livecal-btn-secondary), html.mb-dark .wmb-livecal-wrap .wmb-livecal-btn:not(.wmb-livecal-btn-secondary):hover, html.mb-dark .wmb-livecal-wrap .wmb-livecal-btn:not(.wmb-livecal-btn-secondary):focus-visible{ background:var(--wmb-accent, #f97316) !important; border-color:var(--wmb-accent, #f97316) !important; color:#fff !important; } /* Modal de evento (popup al clicar un evento). Está fuera de .wmb-livecal-wrap. */ html.mb-dark .wmb-livecal-modal__card{ background:#111a2b !important; border-color:#243044 !important; } html.mb-dark .wmb-livecal-modal__title{ color:#f1f5f9 !important; } html.mb-dark .wmb-livecal-modal__close{ color:#94a3b8 !important; } /* Botón "Descargar .ics": oscuro que casa con el fondo (el "Añadir a Google" se queda naranja). Hereda de .wmb-livecal-btn-secondary, reforzamos por si el modal va fuera del wrap. */ html.mb-dark .wmb-livecal-modal .wmb-livecal-btn-secondary{ background:#1a2438 !important; border-color:#243044 !important; color:#e2e8f0 !important; } html.mb-dark .wmb-livecal-modal .wmb-livecal-btn:not(.wmb-livecal-btn-secondary){ background:var(--wmb-accent, #f97316) !important; border-color:var(--wmb-accent, #f97316) !important; color:#fff !important; } /* ---------- Journal (JournalTB) — POR AJUSTAR ---------- Igual que el Tracker: confirmamos clases/variables al inspeccionar. */