/* =====================================================================
   MODO OSCURO — página de inicio pública (welcome.blade.php)
   Paleta "Pizarra azulada" (tokens en pos-theme.css)
   ===================================================================== */

.dark-mode {
    --pos-dark: var(--ui-title);
    --pos-blue: var(--pos-primary-action);
    --pos-blue-hover: #3a8a88;
    --pos-blue-light: var(--pos-dark-card);
    --pos-green: var(--pos-dashboard-success);
    --pos-green-light: var(--pos-dark-content);
    --pos-bg: var(--pos-dark-page);
    --pos-card-border: var(--pos-dark-border);
    --pos-text-main: var(--ui-text);
    --pos-text-muted: var(--pos-dark-muted);
}

.dark-mode body { background-color: var(--pos-bg); color: var(--pos-text-main); }

/* Navbar */
.dark-mode .pos-navbar { background-color: var(--pos-dark-navbar); border-bottom-color: var(--pos-card-border); box-shadow: none; }
.dark-mode .brand-logo { border-color: var(--pos-card-border); }
.dark-mode .brand-title { color: var(--ui-title); }
.dark-mode .brand-subtitle { color: var(--ui-link); }

/* Idioma y botón de modo */
.lang-badge, .dark-mode-toggle-btn { color: var(--ui-body); }
.dark-mode .lang-badge { background-color: var(--pos-dark-card); border-color: var(--pos-card-border); color: var(--pos-text-muted); }
.dark-mode .lang-badge.active { background-color: var(--pos-primary-action); color: #fff; border-color: var(--pos-primary-action); }
.dark-mode .lang-badge:hover:not(.active) { background-color: var(--pos-dark-pagination-hover); color: var(--ui-title); }

.dark-mode-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px;
    border: 1px solid var(--pos-card-border);
    background-color: #ffffff; text-decoration: none; transition: all .2s ease;
}
.dark-mode-toggle-btn:hover { background-color: #ebe7e1; color: var(--ui-title); }
.dark-mode .dark-mode-toggle-btn { background-color: var(--pos-dark-card); border-color: var(--pos-card-border); color: var(--ui-text); }
.dark-mode .dark-mode-toggle-btn:hover { background-color: var(--pos-dark-pagination-hover); }

/* Hero */
.dark-mode .pos-hero { background: linear-gradient(180deg, var(--pos-dark-content) 0%, var(--pos-dark-page) 100%); border-bottom-color: var(--pos-card-border); }
.dark-mode .hero-title { color: var(--ui-title) !important; }
.dark-mode .hero-title span { color: var(--ui-link) !important; }
.dark-mode .hero-description { color: var(--pos-text-muted); }
.dark-mode .btn-pos-outline { background-color: var(--pos-dark-card); color: var(--ui-text); border-color: var(--pos-dark-input-border); }
.dark-mode .btn-pos-outline:hover { background-color: var(--pos-dark-pagination-hover); border-color: var(--ui-link); color: #fff; }

/* Módulos */
.dark-mode #modulos h2, .dark-mode #modulos h2.text-dark { color: var(--ui-title) !important; }
.dark-mode #modulos .text-muted { color: var(--pos-text-muted) !important; }
.dark-mode .feature-card { background-color: var(--pos-dark-card) !important; border-color: var(--pos-card-border) !important; box-shadow: 0 4px 12px rgba(0,0,0,.3) !important; }
.dark-mode .feature-card:hover { border-color: var(--ui-link) !important; box-shadow: 0 12px 24px -8px rgba(0,0,0,.5) !important; }
.dark-mode .feature-title { color: var(--ui-title); }
.dark-mode .feature-desc { color: var(--pos-text-muted); }
.dark-mode .icon-blue   { background-color: var(--pos-primary-action); color: #fff; }
.dark-mode .icon-green  { background-color: var(--pos-success); color: #fff; }
.dark-mode .icon-amber  { background-color: var(--pos-dark-content); color: #e0b455; }
.dark-mode .icon-purple { background-color: var(--pos-dark-sidebar); color: var(--ui-link); }

/* Banner de acceso */
.dark-mode .pos-info-banner { border-color: var(--pos-dark-input-border); background-color: var(--pos-dark-sidebar); color: var(--ui-text); }

/* Footer */
.dark-mode .pos-footer { background-color: var(--pos-dark-page); border-top-color: var(--pos-card-border); color: var(--pos-text-muted); }
.dark-mode .pos-footer .text-muted { color: var(--pos-text-muted) !important; }