/* ════════════════════════════════════════════════════════════ DARK MODE — Iglesia Nueva Vida Archivo: darkmode.css Uso: Se carga en index.html y admin/index.html ════════════════════════════════════════════════════════════ */ /* ── VARIABLES DARK MODE ── */ :root { --dm-bg-primary: #0F172A; --dm-bg-secondary: #18181B; --dm-bg-card: #1E1E24; --dm-bg-elevated: #23232B; --dm-text-primary: #E5E7EB; --dm-text-secondary: #9CA3AF; --dm-border: rgba(255,255,255,0.08); --dm-border-hover: rgba(255,255,255,0.16); --dm-gold: #C9A227; --dm-gold-hover: #E6C75A; --dm-shadow: 0 4px 24px rgba(0,0,0,0.4); --dm-shadow-lg: 0 20px 60px rgba(0,0,0,0.6); } /* ════════════════════════════════════════════════════════════ TOGGLE BUTTON — en el navbar, junto al hamburger ════════════════════════════════════════════════════════════ */ #theme-toggle { background: none; border: 1.5px solid rgba(0,48,135,0.2); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; color: #003087; flex-shrink: 0; padding: 0; } #theme-toggle:hover { background: rgba(0,48,135,0.08); border-color: rgba(0,48,135,0.4); transform: rotate(15deg); } #theme-toggle svg { width: 18px; height: 18px; transition: all 0.3s ease; } .icon-moon { display: block; } .icon-sun { display: none; } /* ════════════════════════════════════════════════════════════ DARK MODE ACTIVO — clase en ════════════════════════════════════════════════════════════ */ html.dark { color-scheme: dark; } /* Toggle en dark mode */ html.dark #theme-toggle { border-color: var(--dm-border-hover); color: var(--dm-gold); } html.dark #theme-toggle:hover { background: rgba(201,162,39,0.1); border-color: var(--dm-gold); } html.dark .icon-moon { display: none; } html.dark .icon-sun { display: block; } /* ── BODY ── */ html.dark body { background: var(--dm-bg-primary); color: var(--dm-text-primary); } /* ── PANTALLA DE CARGA ── */ html.dark .loading-screen { background: var(--dm-bg-primary); } html.dark .loading-text-main { color: var(--dm-text-primary) !important; } html.dark .loading-text-sub { color: var(--dm-text-secondary) !important; } html.dark .loading-logo-img { border-color: var(--dm-gold) !important; } html.dark .loading-logo-ring { border-color: rgba(201,162,39,0.2) !important; } /* ── HEADER ── */ html.dark header { background: rgba(15,23,42,0.97); box-shadow: 0 2px 20px rgba(0,0,0,0.4); border-bottom: 1px solid var(--dm-border); } html.dark .logo { color: var(--dm-text-primary); } html.dark .logo img { border-color: var(--dm-gold); } html.dark nav a { color: var(--dm-text-secondary); } html.dark nav a:hover, html.dark nav a.active { color: var(--dm-text-primary); } html.dark .hamburger span { background: var(--dm-text-primary); } /* Mobile nav */ html.dark nav { background: var(--dm-bg-secondary) !important; border-right: 1px solid var(--dm-border); } /* ── HERO PRINCIPAL ── */ html.dark .hero-overlay { background: linear-gradient(to bottom, rgba(15,23,42,0.7) 0%, rgba(0,0,0,0.45) 50%, rgba(15,23,42,0.75) 100%); } /* ── STATS BAR ── */ html.dark .stats-bar { background: linear-gradient(135deg, #111827 0%, #1a2744 100%); } html.dark .stat-item { border-color: var(--dm-border); } /* ── SECTIONS ── */ html.dark .section-alt { background: var(--dm-bg-secondary); } html.dark .section-title { color: var(--dm-text-primary); } html.dark .section-sub { color: var(--dm-text-secondary); } /* ── CARDS (inicio) ── */ html.dark .card { background: var(--dm-bg-card); box-shadow: var(--dm-shadow); border: 1px solid var(--dm-border); } html.dark .card:hover { box-shadow: var(--dm-shadow-lg); border-color: var(--dm-border-hover); } html.dark .card h3 { color: var(--dm-text-primary); } html.dark .card p { color: var(--dm-text-secondary); } html.dark .card a { color: var(--dm-gold); } html.dark .card strong { color: var(--dm-text-secondary); } html.dark .pastor-divider { background: var(--dm-border); } /* ── SCHEDULE ── */ html.dark .schedule { background: var(--dm-bg-card); box-shadow: var(--dm-shadow-lg); border: 1px solid var(--dm-border); } html.dark .schedule h3 { color: var(--dm-text-secondary); } html.dark .time-slot { color: var(--dm-text-primary); border-color: var(--dm-border); } html.dark .time-slot:hover { color: var(--dm-gold); } html.dark .verse { color: var(--dm-text-secondary); } /* ── MISIÓN Y VISIÓN ── */ html.dark .mv-card { background: var(--dm-bg-card); box-shadow: var(--dm-shadow); border: 1px solid var(--dm-border); } html.dark .mv-card h3 { color: var(--dm-text-primary); } html.dark .mv-card p { color: var(--dm-text-secondary); } /* ── HISTORIA ── */ html.dark .history-text p { color: var(--dm-text-secondary); } /* ── VALORES ── */ html.dark .value-card { background: var(--dm-bg-card); box-shadow: var(--dm-shadow); border: 1px solid var(--dm-border); } html.dark .value-card h3 { color: var(--dm-text-primary); } html.dark .value-card p { color: var(--dm-text-secondary); } /* ── PASTOR ── */ html.dark .pastor-hero-section { background: var(--dm-bg-primary); } html.dark .pastor-name-display h2 { color: var(--dm-text-primary); } html.dark .pastor-photo-ring-2 { background: var(--dm-bg-primary); } html.dark .pastor-info-card { background: var(--dm-bg-card); box-shadow: var(--dm-shadow); border-color: var(--dm-border); } html.dark .pastor-info-card h4 { color: var(--dm-text-primary); } html.dark .pastor-info-card p { color: var(--dm-text-secondary); } html.dark .hito-item { background: var(--dm-bg-card); box-shadow: var(--dm-shadow); border-left-color: var(--dm-gold); } html.dark .hito-item h4 { color: var(--dm-text-primary); } html.dark .hito-item p { color: var(--dm-text-secondary); } html.dark .pastor-versiculo { background: var(--dm-bg-secondary); border-color: var(--dm-border); } html.dark .pastor-versiculo blockquote { color: var(--dm-text-primary); } html.dark .pastor-versiculo cite { color: var(--dm-text-secondary); } /* ── CONTACTO ── */ html.dark .contact-form-box { background: var(--dm-bg-card); box-shadow: var(--dm-shadow-lg); border: 1px solid var(--dm-border); } html.dark .form-group label { color: var(--dm-text-secondary); } html.dark .form-group input, html.dark .form-group textarea { background: var(--dm-bg-secondary); border-color: var(--dm-border); color: var(--dm-text-primary); } html.dark .form-group input::placeholder, html.dark .form-group textarea::placeholder { color: var(--dm-text-secondary); } html.dark .form-group input:focus, html.dark .form-group textarea:focus { border-color: var(--dm-gold); background: var(--dm-bg-elevated); box-shadow: 0 0 0 4px rgba(201,162,39,0.1); } html.dark .form-group input.error, html.dark .form-group textarea.error { border-color: #e55252 !important; background: rgba(229,82,82,0.08) !important; } html.dark .form-group input.valid, html.dark .form-group textarea.valid { border-color: var(--dm-gold) !important; } html.dark .form-error { color: #f87171; } html.dark .form-success { background: rgba(46,125,50,0.12); border-color: rgba(46,125,50,0.3); } html.dark .form-success p { color: #4ade80; } html.dark .btn-submit:disabled { opacity: 0.5; } html.dark .info-item:hover { background: var(--dm-bg-card); } html.dark .info-text h4 { color: var(--dm-text-primary); } html.dark .info-text p { color: var(--dm-text-secondary); } /* ── PRIVACIDAD ── */ html.dark .privacy-intro { background: var(--dm-bg-card); border-color: var(--dm-gold); } html.dark .privacy-intro p { color: var(--dm-text-secondary); } html.dark .privacy-card { background: var(--dm-bg-card); border-color: var(--dm-border); box-shadow: var(--dm-shadow); } html.dark .privacy-card h3 { color: var(--dm-text-primary); border-color: var(--dm-border); } html.dark .privacy-card p, html.dark .privacy-card li { color: var(--dm-text-secondary); } html.dark .arco-box { background: rgba(201,162,39,0.08); border: 1px solid rgba(201,162,39,0.2); } html.dark .arco-box p { color: var(--dm-gold); } html.dark .privacy-date-box { background: var(--dm-bg-elevated); border: 1px solid var(--dm-border); } html.dark .privacy-date-box p { color: var(--dm-text-secondary); } /* ── CAROUSEL ── */ html.dark .carousel-dot { background: rgba(255,255,255,0.25); } html.dark .carousel-dot.active { background: white; } /* ── EVENTOS ── */ html.dark .evento-card { background: var(--dm-bg-card); border: 1px solid var(--dm-border); box-shadow: var(--dm-shadow); } html.dark .evento-info { background: var(--dm-bg-card); } html.dark .evento-title { color: var(--dm-text-primary); } html.dark .evento-desc { color: var(--dm-text-secondary); } /* ── MARQUEE ── */ html.dark .marquee-section { background: linear-gradient(135deg, rgba(15,23,42,0.7) 0%, rgba(24,24,27,0.5) 50%, rgba(15,23,42,0.6) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top-color: rgba(201,168,76,0.12); border-bottom-color: rgba(201,168,76,0.12); } html.dark .marquee-section::before { background: linear-gradient(90deg, var(--dm-bg-primary) 0%, transparent 100%); } html.dark .marquee-section::after { background: linear-gradient(270deg, var(--dm-bg-primary) 0%, transparent 100%); } /* ── INSTAGRAM GRID ── */ html.dark .ig-iframe-wrap { background: var(--dm-bg-card); border: 1px solid var(--dm-border); } /* ── COOKIE BANNER ── */ html.dark .cookie-banner { background: #0F172A; border-top-color: var(--dm-gold); } /* ── BACK TO TOP ── */ html.dark .back-to-top { background: var(--dm-bg-elevated); border: 1px solid var(--dm-border); box-shadow: var(--dm-shadow); } html.dark .back-to-top:hover { background: var(--dm-gold); border-color: var(--dm-gold); } /* ════════════════════════════════════════════════════════════ ADMIN PANEL — DARK MODE ════════════════════════════════════════════════════════════ */ html.dark .admin-sidebar, html.dark #adminSidebar { background: var(--dm-bg-secondary) !important; border-right: 1px solid var(--dm-border) !important; } html.dark .admin-topbar, html.dark #adminTopbar { background: var(--dm-bg-secondary) !important; border-bottom: 1px solid var(--dm-border) !important; } html.dark .admin-main, html.dark #adminContent, html.dark .admin-content { background: var(--dm-bg-primary) !important; } html.dark .admin-card, html.dark .cms-section, html.dark .admin-section { background: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } html.dark .admin-input, html.dark .cms-input, html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="password"], html.dark input[type="url"], html.dark input[type="number"], html.dark textarea, html.dark select { background: var(--dm-bg-secondary) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html.dark input:focus, html.dark textarea:focus, html.dark select:focus { border-color: var(--dm-gold) !important; box-shadow: 0 0 0 3px rgba(201,162,39,0.15) !important; outline: none !important; } html.dark label { color: var(--dm-text-secondary) !important; } html.dark h1, html.dark h2, html.dark h3, html.dark h4 { color: var(--dm-text-primary); } html.dark p { color: var(--dm-text-secondary); } html.dark table { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } html.dark th { background: var(--dm-bg-elevated) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } html.dark td { color: var(--dm-text-secondary) !important; border-color: var(--dm-border) !important; } html.dark tr:hover td { background: var(--dm-bg-elevated) !important; } /* Login screen */ html.dark #loginScreen { background: var(--dm-bg-primary) !important; } html.dark .login-box, html.dark .login-card { background: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; } /* Modal / Dialog */ html.dark .modal-overlay, html.dark .modal-backdrop { background: rgba(0,0,0,0.75) !important; } html.dark .modal-content, html.dark .modal-box { background: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; } /* Dropdown menu */ html.dark .dropdown, html.dark .dropdown-menu { background: var(--dm-bg-elevated) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow-lg) !important; } html.dark .dropdown-item:hover { background: var(--dm-bg-card) !important; } /* Sidebar nav links */ html.dark .sidebar-link, html.dark .nav-link { color: var(--dm-text-secondary) !important; } html.dark .sidebar-link:hover, html.dark .sidebar-link.active, html.dark .nav-link:hover { color: var(--dm-text-primary) !important; background: rgba(255,255,255,0.06) !important; } /* Badges / Tags */ html.dark .badge-success { background: rgba(46,125,50,0.2) !important; color: #4ade80 !important; } html.dark .badge-danger { background: rgba(220,38,38,0.2) !important; color: #f87171 !important; } html.dark .badge-warning { background: rgba(201,162,39,0.2) !important; color: var(--dm-gold) !important; } /* ── Scrollbar personalizada en dark mode ── */ html.dark ::-webkit-scrollbar { width: 8px; height: 8px; } html.dark ::-webkit-scrollbar-track { background: var(--dm-bg-secondary); } html.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); } /* ════════════════════════════════════════════════════════════ VERSÍCULO DEL DÍA — DARK MODE ════════════════════════════════════════════════════════════ */ html.dark .versiculo-dia-section { background: linear-gradient(135deg, #0F172A 0%, #1a2744 100%) !important; } html.dark .versiculo-dia-section .section-title { color: var(--dm-text-primary) !important; } html.dark .versiculo-dia-section .section-sub { color: var(--dm-text-secondary) !important; } html.dark .vd-card { background: var(--dm-bg-card) !important; box-shadow: var(--dm-shadow-lg) !important; border-color: var(--dm-border) !important; } html.dark .vd-text { color: var(--dm-text-primary) !important; } html.dark .vd-quote-open, html.dark .vd-quote-close { color: var(--dm-gold) !important; opacity: 0.35 !important; } html.dark .vd-nav-btn { border-color: var(--dm-border-hover) !important; color: var(--dm-text-primary) !important; } html.dark .vd-nav-btn:hover { background: var(--dm-gold) !important; border-color: var(--dm-gold) !important; color: #000 !important; } html.dark .vd-dot { background: var(--dm-border-hover) !important; } html.dark .vd-dot.active { background: var(--dm-gold) !important; } /* ── TOGGLE: posición correcta en el navbar ── */ #theme-toggle { margin-left: 16px; flex-shrink: 0; } /* ── LOADING SCREEN: figuras visibles en dark mode ── */ html.dark .loading-figure svg circle, html.dark .loading-figure svg path, html.dark .loading-figure svg line { stroke: rgba(255,255,255,0.65) !important; } html.dark .loading-figure svg path[fill] { fill: rgba(255,255,255,0.3) !important; }