/* ── Tema claro / oscuro — variables compartidas por todo el sitio ── */

/* Paleta CLARA (por defecto) */
:root {
    --bg: #ffffff;
    --text: #2d2d2d;
    --text-muted: #666666;
    --accent: #156995;
    --accent-hover: #105170;
    --on-accent: #ffffff;
    --header-bg: #ffffff;
    --header-text: #1a1a2e;
    --header-border: rgba(0, 0, 0, 0.08);
    --surface: #ffffff;
    --surface-2: #eceef3;
    --border: rgba(0, 0, 0, 0.12);
    --control-bg: rgba(0, 0, 0, 0.05);
    --control-bg-hover: rgba(0, 0, 0, 0.10);
    --shadow: rgba(0, 0, 0, 0.15);
}

/* Paleta OSCURA */
[data-theme="dark"] {
    --bg: #1a1a1a;
    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --accent: #4aa6cf;
    --accent-hover: #6bbbdd;
    --on-accent: #ffffff;
    --header-bg: #242424;
    --header-text: #ffffff;
    --header-border: rgba(255, 255, 255, 0.06);
    --surface: rgba(255, 255, 255, 0.05);
    --surface-2: #2d2d2d;
    --border: rgba(255, 255, 255, 0.12);
    --control-bg: rgba(255, 255, 255, 0.10);
    --control-bg-hover: rgba(255, 255, 255, 0.20);
    --shadow: rgba(0, 0, 0, 0.30);
}

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Botón de cambio de tema ── */
.tema-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--control-bg);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, transform 0.2s ease, color 0.25s ease;
}

.tema-toggle:hover {
    background: var(--control-bg-hover);
    transform: scale(1.08);
}

.tema-toggle svg {
    width: 20px;
    height: 20px;
}

/* En la barra superior de revista/visor, el texto es claro/oscuro según --header-text */
header .tema-toggle {
    color: var(--header-text);
}

/* En la portada (sin header): flotante arriba a la derecha */
.tema-toggle.floating {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 1000;
}

@media (max-width: 768px) {
    .tema-toggle.floating {
        top: 14px;
        right: 14px;
    }
}