/* client-theme.css — Modo oscuro para páginas públicas sin login
   (factura.php, demo.php). client-theme.js fija data-theme="dark"/"light"
   en <html> según lo guardado en localStorage o, si no hay nada guardado,
   según prefers-color-scheme del sistema. Estas reglas anulan las
   variables de color que cada página ya declara en su propio <style>. */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --acento: #4aa3e8; --acento-osc: #7cc4f2; --pizarra: #e6edf1;
        --linea: #2b3640; --suave: #20282e; --bg: #0f1519; --muted: #8ea0a8;
        --card: #1a2126;
    }
    :root:not([data-theme="light"]) .delivery__box--locked { background: #2a2419; border-color: #5c4f2e; }
    :root:not([data-theme="light"]) .delivery__box--unlocked { background: #16281c; border-color: #2f6b45; }
    :root:not([data-theme="light"]) .delivery__box--unlocked .delivery__h { color: #5fcf87; }
}
:root[data-theme="dark"] {
    --acento: #4aa3e8; --acento-osc: #7cc4f2; --pizarra: #e6edf1;
    --linea: #2b3640; --suave: #20282e; --bg: #0f1519; --muted: #8ea0a8;
    --card: #1a2126;
}
:root[data-theme="dark"] .delivery__box--locked { background: #2a2419; border-color: #5c4f2e; }
:root[data-theme="dark"] .delivery__box--unlocked { background: #16281c; border-color: #2f6b45; }
:root[data-theme="dark"] .delivery__box--unlocked .delivery__h { color: #5fcf87; }

/* Botón flotante para alternar tema */
.theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 50;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--linea);
    background: var(--card, #fff);
    color: var(--pizarra);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    transition: background .15s ease, border-color .15s ease;
    padding: 0;
}
.theme-toggle:hover { border-color: var(--acento); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
