:root { --bg: #f8fafc; --card-bg: #ffffff; --border: #e2e8f0; --text: #1e293b; --muted: #64748b; --primary: #2563eb; --primary-2: #1d4ed8; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); } .navbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: #0f172a; color: #e2e8f0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .navbar a { color: #e2e8f0; text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 8px; transition: background 0.2s; } .navbar a:hover { background: rgba(255, 255, 255, 0.08); } .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06); padding: 20px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border: none; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.2s; } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; } .btn-secondary { background: #475569; color: #fff; } .btn-success { background: var(--success); color: #fff; } .btn-danger { background: var(--danger); color: #fff; } .input, .select, .textarea { width: 100%; padding: 10px 12px; border: 2px solid var(--border); border-radius: 10px; font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s; background: #fff; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .table-modern { width: 100%; border-collapse: collapse; } .table-modern th { background: #f8fafc; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; color: var(--muted); padding: 12px; text-align: left; border-bottom: 1px solid var(--border); } .table-modern td { padding: 12px; border-bottom: 1px solid var(--border); } .pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 12px; } .pill.admin { background: #e0e7ff; color: #1e3a8a; } .pill.reader { background: #dcfce7; color: #166534; } .modal-base { position: fixed; inset: 0; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.45); padding: 16px; z-index: 1000; } .modal-base.active { display: flex; } .modal-panel { background: #fff; border-radius: 14px; width: 100%; max-width: 800px; max-height: 90vh; overflow-y: auto; padding: 20px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18); } /* ============================================================ TEMA OSCURO / FUTURISTA del panel (acoplado a .panel-dark en ) No afecta a la pantalla de login ni a páginas sin esa clase. ============================================================ */ .panel-dark { background: radial-gradient(1200px 600px at 15% -10%, rgba(56,189,248,.10), transparent 60%), radial-gradient(1000px 500px at 110% 8%, rgba(139,92,246,.10), transparent 55%), #070b14 !important; color: #c7d2e1 !important; min-height: 100vh; } .panel-dark header { background: linear-gradient(180deg, #0b1322 0%, #0a0f1c 100%) !important; border-bottom: 1px solid #1b2740 !important; box-shadow: 0 1px 0 rgba(56,189,248,.08), 0 10px 30px rgba(0,0,0,.5) !important; } .panel-dark .card, .panel-dark .filter-card { background: linear-gradient(180deg, #0f1626 0%, #0c1320 100%) !important; border: 1px solid #1b2740 !important; box-shadow: 0 0 0 1px rgba(56,189,248,.03), 0 10px 30px rgba(0,0,0,.45) !important; color: #c7d2e1 !important; } .panel-dark .card:hover, .panel-dark .filter-card:hover { border-color: #25406b !important; box-shadow: 0 0 24px rgba(56,189,248,.12) !important; transform: none !important; } .panel-dark .card[class*="border-b-4"] { border-bottom-width: 1px !important; } .panel-dark .text-slate-800, .panel-dark .text-slate-700, .panel-dark .text-slate-900 { color: #e8eefb !important; } .panel-dark .text-slate-600, .panel-dark .text-slate-500, .panel-dark .text-slate-400 { color: #8696b0 !important; } .panel-dark .card h2, .panel-dark .card h3 { letter-spacing: -.02em; text-shadow: 0 0 22px rgba(56,189,248,.12); } .panel-dark table thead th { background: #0a1120 !important; color: #9fb3d1 !important; border-bottom: 1px solid #1b2740 !important; } .panel-dark thead th.sortable:hover { background: #0d1830 !important; } .panel-dark td { border-bottom: 1px solid #16203a !important; color: #c7d2e1 !important; } .panel-dark #listingsTable tbody tr:nth-child(odd) td { background: #0c1320 !important; } .panel-dark #listingsTable tbody tr:nth-child(even) td { background: #0f1626 !important; } .panel-dark #listingsTable tbody tr:hover td { background: #15233f !important; } .panel-dark #listingsTable tbody tr.seller-shop td { background: rgba(239,68,68,.07) !important; } .panel-dark #listingsTable tbody tr.seller-individual td { background: rgba(16,185,129,.07) !important; } .panel-dark #listingsTable tbody tr.seller-shop:hover td, .panel-dark #listingsTable tbody tr.seller-individual:hover td { background: #15233f !important; } .panel-dark th { color: #9fb3d1 !important; } .panel-dark tbody tr:hover td { background: #15233f !important; } .panel-dark .filter-group { background: #0b1220 !important; border-color: #1b2740 !important; border-left-color: #38bdf8 !important; } .panel-dark .filter-group:hover { background: #0e1729 !important; border-left-color: #7dd3fc !important; } .panel-dark .filter-label { color: #8696b0 !important; } .panel-dark .filter-group:hover .filter-label { color: #7dd3fc !important; } .panel-dark .multiselect-btn, .panel-dark .input-enhanced, .panel-dark input, .panel-dark select, .panel-dark textarea { background: #0a1120 !important; border-color: #1f2c49 !important; color: #dbe6f5 !important; } .panel-dark .multiselect-btn .multiselect-text { color: #dbe6f5 !important; } .panel-dark input::placeholder, .panel-dark .input-enhanced::placeholder { color: #5b6b87 !important; } .panel-dark .multiselect-btn:hover, .panel-dark .input-enhanced:hover, .panel-dark input:focus, .panel-dark select:focus, .panel-dark textarea:focus { border-color: #38bdf8 !important; box-shadow: 0 0 0 3px rgba(56,189,248,.12) !important; } .panel-dark .multiselect-dropdown { background: #0c1320 !important; border-color: #1f2c49 !important; color: #dbe6f5 !important; } .panel-dark .multiselect-dropdown label { color: #c7d2e1 !important; } .panel-dark .multiselect-dropdown label:hover { background: #15233f !important; color: #7dd3fc !important; } .panel-dark .btn-filter-reset, .panel-dark .btn-filter-columns, .panel-dark .btn-filter-download { background: #0a1120 !important; border-color: #1f2c49 !important; color: #9fb3d1 !important; } .panel-dark .btn-filter-reset:hover, .panel-dark .btn-filter-columns:hover, .panel-dark .btn-filter-download:hover { background: #15233f !important; color: #e8eefb !important; } .panel-dark .bg-white { background: #0f1626 !important; } .panel-dark .bg-slate-50 { background: #0b1220 !important; } .panel-dark .border-slate-200, .panel-dark .border-slate-300 { border-color: #1b2740 !important; } .panel-dark .hover\:bg-slate-100:hover, .panel-dark .hover\:bg-slate-50:hover { background: #15233f !important; } .panel-dark .modal { background: #0f1626 !important; color: #c7d2e1 !important; border: 1px solid #1b2740; } .panel-dark .modal input, .panel-dark .modal select, .panel-dark .modal textarea { background: #0a1120 !important; } .panel-dark .text-blue-600 { color: #5cc6ff !important; } .panel-dark a.text-blue-600:hover { color: #93dbff !important; } .panel-dark ::-webkit-scrollbar { height: 10px; width: 10px; } .panel-dark ::-webkit-scrollbar-track { background: #0a1120; } .panel-dark ::-webkit-scrollbar-thumb { background: #1f2c49; border-radius: 6px; } .panel-dark ::-webkit-scrollbar-thumb:hover { background: #2a3c63; }