/* Estilos base. No interfieren con el editor. Aplican cuando */ html[data-kpdark="on"] { color-scheme: dark; } html[data-kpdark="on"] body { background-color: #0f172a; /* azul gris oscuro estilo Fedora */ color: #e5e7eb; } html[data-kpdark="on"] a { color: #8ab4f8; } html[data-kpdark="on"] a:hover { color: #b6ceff; } html[data-kpdark="on"] img, html[data-kpdark="on"] video { filter: brightness(0.9) contrast(1.05); } html[data-kpdark="on"] input, html[data-kpdark="on"] select, html[data-kpdark="on"] textarea { background: #0b1222; color: #e5e7eb; border-color: #1f2937; } html[data-kpdark="on"] table { color: inherit; } /* Botón */ .kpdark-toggle { display:inline-flex; align-items:center; gap:.5rem; border:1px solid #1f2937; background:#111827; color:#e5e7eb; padding:.5rem .75rem; border-radius:999px; cursor:pointer; font:inherit; } .kpdark-toggle:hover { background:#0b1222; } .kpdark-toggle .icon-sun { display:none; } html[data-kpdark="on"] .kpdark-toggle .icon-moon { display:none; } html[data-kpdark="on"] .kpdark-toggle .icon-sun { display:inline; } .kpdark-toggle-floating { position:fixed; right:1rem; bottom:1rem; z-index:99999; box-shadow:0 10px 15px rgba(0,0,0,.25); } /* Clase auxiliar por si un tema aplica colores fuertes */ html[data-kpdark="on"] .has-background { background-color: #0f172a !important; color: #e5e7eb !important; }