/** * Modern News UI — Modo oscuro. * Se activa con las clases mnui-dark / mnui-dark-full en . * Sin esas clases, este archivo no cambia absolutamente nada. */ html.mnui-dark { color-scheme: dark; --mnui-color-surface: var(--mnui-dark-surface); --mnui-color-surface-alt: var(--mnui-dark-bg); --mnui-color-text: var(--mnui-dark-text); --mnui-color-text-muted: var(--mnui-dark-muted); --mnui-color-border: var(--mnui-dark-border); --mnui-header-bg: var(--mnui-dark-surface); } /* Alcance: todo el sitio. */ html.mnui-dark-full body { background-color: var(--mnui-dark-bg) !important; color: var(--mnui-dark-text) !important; } /* Los contenedores del tema dejan ver el fondo oscuro del body. */ html.mnui-dark-full :is(#page, .site, #content, #primary, #main, .site-content, .content-area, main, article, section, aside, .entry-content, .container, .wrapper, .row, [class*="-wrap"], [class*="-container"], [class*="-content"], [class*="-inner"]) { background-color: transparent !important; color: inherit; } html.mnui-dark-full :is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, blockquote, figcaption, label, cite) { color: inherit; } html.mnui-dark-full :is(.mnui-header, .site-header, #masthead, .site-footer, #colophon, .mnui-footer) { background-color: var(--mnui-dark-surface) !important; color: var(--mnui-dark-text) !important; border-color: var(--mnui-dark-border) !important; } html.mnui-dark-full :is(.mnui-card-item, .mnui-widget, .widget, .card, .mnui-hero__item--small) { background-color: var(--mnui-dark-surface) !important; color: var(--mnui-dark-text) !important; border-color: var(--mnui-dark-border) !important; } html.mnui-dark-full a:not(.mnui-btn):not(.mnui-to-top):not(.mnui-scheme) { color: inherit; } /* Red de seguridad: si algo se queda con fondo claro, su texto sigue siendo legible. */ html.mnui-dark-full :is([style*="background"], .has-background) :is(p, li, h1, h2, h3, h4, h5, h6) { color: inherit; } html.mnui-dark-full a:not(.mnui-btn):not(.mnui-to-top):hover { color: var(--mnui-color-accent); } html.mnui-dark-full :is(input, textarea, select) { background-color: var(--mnui-dark-bg) !important; color: var(--mnui-dark-text) !important; border-color: var(--mnui-dark-border) !important; } html.mnui-dark-full :is(hr, table, td, th) { border-color: var(--mnui-dark-border) !important; } html.mnui-dark-full .sub-menu { background-color: var(--mnui-dark-surface) !important; } html.mnui-dark-dim img:not(.mnui-scheme img), html.mnui-dark-dim video { filter: brightness(0.88) contrast(1.02); } /* Interruptor. */ .mnui-scheme[hidden] { display: none; } .mnui-scheme { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--mnui-radius-button); background: transparent; color: currentColor; cursor: pointer; transition: background-color var(--mnui-transition), color var(--mnui-transition); } .mnui-scheme:hover, .mnui-scheme:focus-visible { background: var(--mnui-color-accent-soft, rgba(26, 86, 219, 0.12)); color: var(--mnui-color-accent); } .mnui-scheme svg { width: 20px; height: 20px; } .mnui-scheme__icon { display: none; line-height: 0; } .mnui-scheme__icon--moon { display: inline-flex; } html.mnui-dark .mnui-scheme__icon--moon { display: none; } html.mnui-dark .mnui-scheme__icon--sun { display: inline-flex; } .mnui-scheme--floating { position: fixed; bottom: 78px; z-index: 9980; width: 44px; height: 44px; border-radius: 50%; background: var(--mnui-color-surface); color: var(--mnui-color-text); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22); } .mnui-top-right .mnui-scheme--floating { right: 24px; } .mnui-top-left .mnui-scheme--floating { left: 24px; } @media (max-width: 600px) { .mnui-scheme--floating { bottom: 64px; width: 40px; height: 40px; } .mnui-top-right .mnui-scheme--floating { right: 16px; } .mnui-top-left .mnui-scheme--floating { left: 16px; } }