/* ========================================================================== darkmode.css — Tema oscuro (se activa con [data-theme="dark"] en ) ========================================================================== */ [data-theme="dark"] body, [data-theme="dark"] body.loggedin, [data-theme="dark"] body.error { background-color: #1a1d23; color: #e0e0e0; } /* ── Navbar ── */ [data-theme="dark"] .navtop, [data-theme="dark"] .navbar-dark.bg-dark { background-color: #111318 !important; } /* ── Contenido principal ── */ [data-theme="dark"] .content > p, [data-theme="dark"] .content > div { background-color: #22262e; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); } [data-theme="dark"] .content h2 { color: #c8cdd5; border-bottom-color: #333840; } /* ── Tablas profesionales ── */ [data-theme="dark"] .pro-table-wrap { background: #22262e; box-shadow: 0 2px 12px rgba(0,0,0,0.2); } [data-theme="dark"] .pro-table thead th { background: linear-gradient(135deg, #111318 0%, #1a1e26 100%); } [data-theme="dark"] .pro-table tbody tr { border-bottom-color: #2d3240; } [data-theme="dark"] .pro-table tbody tr:nth-child(even) { background: #262a33; } [data-theme="dark"] .pro-table tbody tr:hover { background: #2a3042; } [data-theme="dark"] .pro-table tbody td { color: #d0d4dc; } /* ── Toolbar ── */ [data-theme="dark"] .pro-toolbar { background: #1e222a; border-bottom-color: #2d3240; } [data-theme="dark"] .pro-toolbar .search-box input { background: #2a2e38; border-color: #3a3f4a; color: #e0e0e0; } [data-theme="dark"] .pro-toolbar .search-box input::placeholder { color: #777; } [data-theme="dark"] .pro-toolbar .btn-clear { background: #333840; color: #bbb; } /* ── Filter tabs ── */ [data-theme="dark"] .filter-tabs { background: #1e222a; border-bottom-color: #2d3240; } [data-theme="dark"] .filter-tab { background: #2a2e38; border-color: #3a3f4a; color: #bbb; } [data-theme="dark"] .filter-tab:hover { border-color: #5b9cf6; color: #5b9cf6; } [data-theme="dark"] .filter-tab.activo { background: #3274d6; border-color: #3274d6; color: #fff; } /* ── Badges ── */ [data-theme="dark"] .badge-almacen { background: #1e3a5f; color: #7bb8f5; } [data-theme="dark"] .badge-perfil.badge-admin { background: #3d3000; color: #f5c842; } [data-theme="dark"] .badge-perfil.badge-user { background: #1a3d25; color: #6fcf8a; } /* ── Acciones ── */ [data-theme="dark"] .pro-actions .btn-edit { background: #1a2e45; color: #5b9cf6; } [data-theme="dark"] .pro-actions .btn-delete { background: #3d1a1a; color: #f27a7a; } /* ── Celdas ── */ [data-theme="dark"] .cell-id { color: #6b7280; } [data-theme="dark"] .cell-date { color: #8891a0; } /* ── Estado vacío ── */ [data-theme="dark"] .pro-empty { color: #777; } [data-theme="dark"] .pro-empty i { color: #444; } /* ── Home cards (almacén) ── */ [data-theme="dark"] .alm-card { background: #22262e; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } [data-theme="dark"] .alm-sep { background: #333840; } [data-theme="dark"] .alm-thumb strong { color: #c8cdd5; } [data-theme="dark"] .bar-track { background: #333840; } [data-theme="dark"] .bar-val { color: #c8cdd5; } [data-theme="dark"] .total-card { background: #1e222a; border-top-color: #5b9cf6; } /* ── Security alert banner ── */ [data-theme="dark"] .alm-card.total-card { background: #1a1e26; } /* ── Toast ── */ [data-theme="dark"] .pro-toast { box-shadow: 0 6px 20px rgba(0,0,0,0.4); } /* ── Modal imagen ── */ [data-theme="dark"] .img-modal-overlay { background: rgba(0,0,0,0.85); } /* ── 2FA pages ── */ [data-theme="dark"] .setup-container, [data-theme="dark"] .twofa-container { background: #22262e; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } [data-theme="dark"] .setup-container h1, [data-theme="dark"] .twofa-container h1 { color: #c8cdd5; } [data-theme="dark"] .setup-container p, [data-theme="dark"] .twofa-container p { color: #999; } [data-theme="dark"] .secret-key { background: #2a2e38; color: #e0e0e0; } [data-theme="dark"] .steps { background: #1e222a; } [data-theme="dark"] .steps li { color: #bbb; } /* ── Login/Register ── */ [data-theme="dark"] .login, [data-theme="dark"] .register { background-color: #22262e; box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.5); } [data-theme="dark"] .login h1, [data-theme="dark"] .register h1 { color: #c8cdd5; border-bottom-color: #333840; } [data-theme="dark"] .login form input[type="password"], [data-theme="dark"] .login form input[type="text"], [data-theme="dark"] .login form input[type="email"], [data-theme="dark"] .register form input[type="password"], [data-theme="dark"] .register form input[type="text"], [data-theme="dark"] .register form input[type="email"] { background: #2a2e38; border-color: #3a3f4a; color: #e0e0e0; } /* ── Pagination ── */ [data-theme="dark"] .pro-pagination { background: #1e222a; border-top-color: #2d3240; } [data-theme="dark"] .pro-pagination a { background: #2a2e38; border-color: #3a3f4a; color: #bbb; } [data-theme="dark"] .pro-pagination a:hover { background: #3274d6; color: #fff; } /* ── Security alerts page ── */ [data-theme="dark"] .alert-table { background: #22262e; } [data-theme="dark"] .alert-table th { background: #111318; } [data-theme="dark"] .alert-table td { border-bottom-color: #2d3240; color: #d0d4dc; } [data-theme="dark"] .alert-table tr:hover { background: #2a3042; } /* ── Scrollbar dark ── */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1d23; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3f4a; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #555; } /* ── Toggle switch ── */ .theme-toggle { display: flex; align-items: center; gap: 6px; margin-left: 12px; } .theme-switch { position: relative; width: 48px; height: 26px; background: #3a3f4a; border-radius: 13px; cursor: pointer; transition: background 0.3s; border: none; padding: 0; } .theme-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .theme-switch.dark { background: #3274d6; } .theme-switch.dark::after { transform: translateX(22px); } .theme-icon { font-size: 0.9rem; color: #f5c842; } [data-theme="dark"] .theme-icon { color: #5b9cf6; }