/* Contenedor base: el modo oscuro se aplica cuando el body tiene esta clase */
body.orbes-dark-mode {
    background-color: #050712;
    color: #e5f2ff;
}

/* Texto general */
body.orbes-dark-mode,
body.orbes-dark-mode p,
body.orbes-dark-mode li,
body.orbes-dark-mode span {
    color: #e5f2ff;
}

/* Encabezados */
body.orbes-dark-mode h1,
body.orbes-dark-mode h2,
body.orbes-dark-mode h3,
body.orbes-dark-mode h4,
body.orbes-dark-mode h5,
body.orbes-dark-mode h6 {
    color: #ffffff;
}

/* Enlaces */
body.orbes-dark-mode a {
    color: #7ae2ff;
}

body.orbes-dark-mode a:hover,
body.orbes-dark-mode a:focus {
    color: #9af5c9;
}

/* Fondos de bloques frecuentes (tarjetas, widgets, etc.) */
body.orbes-dark-mode .site,
body.orbes-dark-mode .site-main,
body.orbes-dark-mode .content-area,
body.orbes-dark-mode .widget,
body.orbes-dark-mode article,
body.orbes-dark-mode .entry-content,
body.orbes-dark-mode .sidebar,
body.orbes-dark-mode .site-footer,
body.orbes-dark-mode .site-header,
body.orbes-dark-mode .nav,
body.orbes-dark-mode nav {
    background-color: #070a18;
    border-color: #1a2238;
}

/* Bordes suaves */
body.orbes-dark-mode .widget,
body.orbes-dark-mode article,
body.orbes-dark-mode .card,
body.orbes-dark-mode .box {
    border-color: #1a2238 !important;
}

/* Formularios */
body.orbes-dark-mode input,
body.orbes-dark-mode textarea,
body.orbes-dark-mode select {
    background-color: #0d1224;
    color: #e5f2ff;
    border-color: #28314a;
}

body.orbes-dark-mode input::placeholder,
body.orbes-dark-mode textarea::placeholder {
    color: #9ba5c4;
}

/* Tablas */
body.orbes-dark-mode table {
    background-color: #070a18;
    color: #e5f2ff;
}

body.orbes-dark-mode th,
body.orbes-dark-mode td {
    border-color: #1a2238;
}

/* Código/pre */
body.orbes-dark-mode code,
body.orbes-dark-mode pre {
    background-color: #101427;
    color: #e5f2ff;
}

/* Botón flotante del modo oscuro */
.orbes-dark-toggle {
    position: fixed;
    right: 15px;
    bottom: 20px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, #0f1729, #19213a);
    color: #e5f2ff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.orbes-dark-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    background: linear-gradient(135deg, #121a33, #1f2944);
}

.orbes-dark-toggle:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.orbes-dark-toggle-icon {
    font-size: 14px;
}

.orbes-dark-toggle-text {
    white-space: nowrap;
}

/* Estado cuando el modo oscuro está activo (se usa para cambiar icono/colores via JS añadiendo clase extra) */
.orbes-dark-toggle.is-dark {
    background: linear-gradient(135deg, #00c2ff, #34e89e);
    color: #041018;
    border-color: rgba(0, 0, 0, 0.2);
}

.orbes-dark-toggle.is-dark .orbes-dark-toggle-icon {
    /* sol */
}

@media (max-width: 600px) {
    .orbes-dark-toggle {
        right: 10px;
        bottom: 10px;
        padding: 7px 10px;
        font-size: 12px;
    }
}