/* Modo oscuro: valores de las variables --si4-fg-* / --si4-bg-* (ver README.md) */
html[data-theme="dark"] {
  --si4-fg-000000: #ededed;
  --si4-fg-0a000f: #ecddf4;
  --si4-fg-1f2124: #d6d8dc;
  --si4-fg-333333: #cfcfcf;
  --si4-fg-33373d: #c7cbd0;
  --si4-fg-3f444b: #bfc3c9;
  --si4-fg-494c4f: #bdc0c2;
  --si4-bg-eeeeee: #191919;
  --si4-bg-ffffff: #0f0f0f;
}

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"], html[data-theme="dark"] body { background-color: #0f0f0f; }

/* Fondos que el JS de cada página pinta según la URL */
html[data-theme="dark"] #proyectos-seleccionados,
html[data-theme="dark"] #piemenu { background-color: #0f0f0f !important; color: #ededed; }

/* Texto que se revela con GSAP (lo anima el JS en negro): se invierte entero */
html[data-theme="dark"] #gsaptext { filter: invert(1) hue-rotate(180deg); }

/* Menú desplegable: el texto claro puede quedar sobre fotos claras */
html[data-theme="dark"] .elementor-nav-menu--dropdown a { text-shadow: 0 1px 14px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.5); }

/* Flecha negra en SVG */
html[data-theme="dark"] img[src*="Group-583-1"] { filter: invert(1); }

/* SVG incrustados con relleno/trazo negro */
html[data-theme="dark"] [fill="#0A000F"] { fill: var(--si4-fg-0a000f, #0A000F); }
html[data-theme="dark"] [fill="black"] { fill: var(--si4-fg-000000, black); }
html[data-theme="dark"] [stroke="black"] { stroke: var(--si4-fg-000000, black); }

/* ---- Interruptor de tema ---- */
.si4-theme-toggle {
    position: fixed; left: 55px; bottom: 55px; z-index: 10;
    width: 50px; height: 50px; padding: 0 !important; border-radius: 50% !important;
    display: flex; align-items: center; justify-content: center;
    background: #000 !important; color: #DBCFFF !important; border: 1px solid rgba(255,255,255,.55) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
    transition: transform .25s ease, border-color .25s ease;
}
.si4-theme-toggle:hover { transform: scale(1.06); border-color: #fff !important; }
.si4-theme-toggle:focus-visible { outline: 2px solid #C6FF00; outline-offset: 3px; }
.si4-theme-toggle svg { width: 22px; height: 22px; display: block; }
.si4-theme-toggle .si4-moon { display: block; }
.si4-theme-toggle .si4-sun { display: none; }
html[data-theme="dark"] .si4-theme-toggle .si4-moon { display: none; }
html[data-theme="dark"] .si4-theme-toggle .si4-sun { display: block; }
@media (max-width: 768px) {
    .si4-theme-toggle { left: 16px; bottom: 66px; width: 40px; height: 40px; z-index: 11; }
    .si4-theme-toggle svg { width: 18px; height: 18px; }
}

/* Transición circular al cambiar de tema */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }