/* ============================================================ THEME DEFINITIONS — 4 professional themes via CSS custom properties Applied via data-theme attribute on ============================================================ */ /* THEME: Slate (default) — Dark navy, clinical & corporate */ :root, [data-theme="slate"] { --bg: #0d1117; --bg-2: #161b22; --bg-3: #21262d; --border: #30363d; --border-light: rgba(240,246,252,0.07); --primary: #2563eb; --primary-dim: rgba(37,99,235,0.15); --accent: #58a6ff; --success: #3fb950; --success-dim: rgba(63,185,80,0.15); --warning: #d29922; --warning-dim: rgba(210,153,34,0.15); --danger: #f85149; --danger-dim: rgba(248,81,73,0.15); --info: #58a6ff; --text: #e6edf3; --text-muted: #7d8590; --text-subtle: #4d5566; --sidebar-bg: #161b22; --panel-bg: #161b22; --panel-hover: #1c2128; --input-bg: #0d1117; --input-border: #30363d; --scrollbar: #30363d; } /* THEME: Carbon — Near-black, high contrast, Bloomberg-style */ [data-theme="carbon"] { --bg: #0a0a0a; --bg-2: #111111; --bg-3: #1a1a1a; --border: #2a2a2a; --border-light: rgba(255,255,255,0.05); --primary: #e07b00; --primary-dim: rgba(224,123,0,0.15); --accent: #f0a020; --success: #00c853; --success-dim: rgba(0,200,83,0.12); --warning: #e07b00; --warning-dim: rgba(224,123,0,0.12); --danger: #ff3d3d; --danger-dim: rgba(255,61,61,0.12); --info: #5eb8ff; --text: #e8e8e8; --text-muted: #686868; --text-subtle: #3d3d3d; --sidebar-bg: #0f0f0f; --panel-bg: #111111; --panel-hover: #181818; --input-bg: #0a0a0a; --input-border: #2a2a2a; --scrollbar: #2a2a2a; } /* THEME: Forest — Dark green, wealth management / private banking */ [data-theme="forest"] { --bg: #0b1512; --bg-2: #111f1a; --bg-3: #182821; --border: #243d34; --border-light: rgba(52,211,153,0.07); --primary: #059669; --primary-dim: rgba(5,150,105,0.18); --accent: #34d399; --success: #34d399; --success-dim: rgba(52,211,153,0.15); --warning: #fbbf24; --warning-dim: rgba(251,191,36,0.15); --danger: #f87171; --danger-dim: rgba(248,113,113,0.12); --info: #67e8f9; --text: #d1fae5; --text-muted: #6b9e8a; --text-subtle: #2d5c4a; --sidebar-bg: #0b1512; --panel-bg: #111f1a; --panel-hover: #162620; --input-bg: #0b1512; --input-border: #243d34; --scrollbar: #243d34; } /* THEME: Light — Clean white, professional & modern */ [data-theme="light"] { --bg: #f5f7fa; --bg-2: #ffffff; --bg-3: #eef1f5; --border: #dde1e7; --border-light: rgba(0,0,0,0.06); --primary: #2563eb; --primary-dim: rgba(37,99,235,0.1); --accent: #1d4ed8; --success: #059669; --success-dim: rgba(5,150,105,0.1); --warning: #b45309; --warning-dim: rgba(180,83,9,0.1); --danger: #dc2626; --danger-dim: rgba(220,38,38,0.1); --info: #0284c7; --text: #111827; --text-muted: #6b7280; --text-subtle: #9ca3af; --sidebar-bg: #1e293b; --panel-bg: #ffffff; --panel-hover: #f8fafc; --input-bg: #ffffff; --input-border: #d1d5db; --scrollbar: #d1d5db; } /* Light theme: sidebar uses dark navy for contrast */ [data-theme="light"] .sidebar { background: #1e293b !important; border-right-color: #0f172a !important; } [data-theme="light"] .nav-link { color: #94a3b8 !important; } [data-theme="light"] .nav-link:hover { background: #334155 !important; color: #f1f5f9 !important; } [data-theme="light"] .nav-link.active { background: rgba(37,99,235,0.25) !important; color: #93c5fd !important; } [data-theme="light"] .theme-switcher { border-top-color: #334155; } [data-theme="light"] .theme-switcher-label { color: #64748b; } /* Light theme — force dark text across all content */ [data-theme="light"] body, [data-theme="light"] article.content, [data-theme="light"] article.content * { color: var(--text) !important; } /* Re-allow colored elements to keep their colors */ [data-theme="light"] .text-success, [data-theme="light"] article.content .text-success { color: var(--success) !important; } [data-theme="light"] .text-warning, [data-theme="light"] article.content .text-warning { color: var(--warning) !important; } [data-theme="light"] .text-danger, [data-theme="light"] article.content .text-danger { color: var(--danger) !important; } [data-theme="light"] .text-info, [data-theme="light"] article.content .text-info { color: var(--info) !important; } [data-theme="light"] .text-muted, [data-theme="light"] article.content .text-muted { color: var(--text-muted) !important; } [data-theme="light"] .text-primary { color: var(--primary) !important; } /* Keep action buttons white text on colored backgrounds */ [data-theme="light"] .btn-primary-glow, [data-theme="light"] .btn-success-solid, [data-theme="light"] .car-badge { color: #ffffff !important; } /* Glass panels / cards */ [data-theme="light"] .glass-panel { box-shadow: 0 1px 4px rgba(0,0,0,0.08); } /* Tables */ [data-theme="light"] .modern-table td, [data-theme="light"] .table-custom td, [data-theme="light"] .modern-table th, [data-theme="light"] .table-custom th { color: var(--text) !important; } /* Modal / colilla overlay */ [data-theme="light"] .modal-content { background: #ffffff !important; border-color: var(--border) !important; color: var(--text) !important; } [data-theme="light"] .modal-content span, [data-theme="light"] .modal-content div, [data-theme="light"] .modal-content h4, [data-theme="light"] .modal-content small { color: var(--text) !important; } [data-theme="light"] .modal-content span[style*="#10b981"], [data-theme="light"] .modal-content span[style*="10b981"] { color: var(--success) !important; } [data-theme="light"] .modal-content span[style*="#ef4444"], [data-theme="light"] .modal-content span[style*="ef4444"] { color: var(--danger) !important; } /* Dashboard metric cards */ [data-theme="light"] .display-value, [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: var(--text) !important; } /* Inputs */ [data-theme="light"] .form-input, [data-theme="light"] input.form-input, [data-theme="light"] select.form-input, [data-theme="light"] .form-control, [data-theme="light"] .form-select { background: #ffffff !important; border-color: #d1d5db !important; color: #111827 !important; } [data-theme="light"] .form-input::placeholder, [data-theme="light"] .form-control::placeholder { color: #9ca3af !important; } /* Tab buttons */ [data-theme="light"] .planilla-tab, [data-theme="light"] button.planilla-tab { color: var(--text-muted) !important; background: transparent; border-color: var(--border); } [data-theme="light"] .planilla-tab.active { color: var(--primary) !important; border-bottom-color: var(--primary) !important; } /* Preserve colored badges/status text */ [data-theme="light"] .text-success { color: var(--success) !important; } [data-theme="light"] .text-warning { color: var(--warning) !important; } [data-theme="light"] .text-danger { color: var(--danger) !important; } [data-theme="light"] .text-info { color: var(--info) !important; } /* Fix gradient text headers — webkit-text-fill-color: transparent makes them invisible on light */ [data-theme="light"] .action-header h1, [data-theme="light"] h1[style*="background-clip"], [data-theme="light"] h2[style*="background-clip"], [data-theme="light"] h1[style*="text-fill"], [data-theme="light"] h2[style*="text-fill"] { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; } /* Fix Home & dashboard header buttons with light-on-dark inline styles */ [data-theme="light"] .dashboard-header button[style*="rgba(255,255,255"] { background: var(--bg-3) !important; color: var(--text) !important; border-color: var(--border) !important; } /* ============================================================ BASE STYLES ============================================================ */ * { box-sizing: border-box; } html { scrollbar-color: var(--scrollbar) transparent; scrollbar-width: thin; } body { background-color: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; min-height: 100vh; transition: background-color 0.3s ease, color 0.3s ease; font-size: 14px; line-height: 1.5; } a { color: var(--accent); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--text); } /* ============================================================ LAYOUT ============================================================ */ .page { display: flex; flex-direction: row; min-height: 100vh; } .sidebar { width: 240px; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; transition: background-color 0.3s ease; } main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .top-row { height: 56px; display: flex; align-items: center; justify-content: flex-end; background: var(--bg-2); border-bottom: 1px solid var(--border); padding: 0 1.5rem; gap: 12px; } .content { padding: 2rem; flex: 1; } /* ============================================================ PANELS / CARDS ============================================================ */ .glass-panel { background: var(--panel-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: background-color 0.3s ease; } .dashboard-header h1, .dashboard-header-title { font-size: 1.85rem; font-weight: 700; color: var(--text); margin: 0; } .dashboard-header p { color: var(--text-muted); margin: 0; font-size: 13px; } .btn-settings { font-size: 13px; font-weight: 500; background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; transition: background 0.2s, color 0.2s; } .btn-settings:hover { background: var(--bg-3); color: var(--text); } /* ============================================================ FORM INPUTS ============================================================ */ .form-input, input.form-input, select.form-input, textarea.form-input, .form-control, .form-select { display: block; width: 100%; padding: 8px 12px; background: var(--input-bg) !important; border: 1px solid var(--input-border) !important; border-radius: 6px !important; color: var(--text) !important; font-size: 13px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .form-input:focus, input.form-input:focus, select.form-input:focus, textarea.form-input:focus, .form-control:focus, .form-select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-dim) !important; color: var(--text) !important; } .form-input::placeholder, .form-control::placeholder { color: var(--text-subtle) !important; } .form-input option, select.form-input option, .form-select option { background-color: var(--bg-3) !important; color: var(--text) !important; } /* ============================================================ BUTTONS ============================================================ */ .btn-primary-glow { width: 100%; padding: 10px 16px; background: var(--primary); color: white; border: none; border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; transition: opacity 0.2s, transform 0.15s; } .btn-primary-glow:hover { opacity: 0.88; transform: translateY(-1px); } .btn-success-solid { padding: 8px 18px; background: var(--success); color: #fff; border: none; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; transition: opacity 0.2s; display: inline-flex; align-items: center; } .btn-success-solid:hover { opacity: 0.85; } /* ============================================================ TABLES ============================================================ */ .modern-table, .table-custom { width: 100%; border-collapse: collapse; color: var(--text); } .modern-table th, .table-custom th { background: var(--bg-3) !important; color: var(--text-muted) !important; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } .modern-table td, .table-custom td { padding: 11px 14px; border-bottom: 1px solid var(--border-light); font-size: 13px; color: var(--text); vertical-align: middle; } .modern-table tbody tr:hover, .table-custom tbody tr:hover { background: var(--panel-hover) !important; } .modern-table tbody tr:last-child td, .table-custom tbody tr:last-child td { border-bottom: none; } /* ============================================================ SIDEBAR / NAV ============================================================ */ .nav-scrollable { overflow-y: auto; flex: 1; } .top-row.ps-3 { padding-left: 1rem !important; } .nav-link { display: flex; align-items: center; padding: 9px 15px; border-radius: 7px; margin: 2px 8px; color: var(--text-muted) !important; font-size: 13.5px; font-weight: 500; transition: background 0.15s, color 0.15s; text-decoration: none; } .nav-link:hover { background: var(--bg-3); color: var(--text) !important; } .nav-link.active { background: var(--primary-dim) !important; color: var(--accent) !important; font-weight: 600; } /* ============================================================ THEME SWITCHER WIDGET (in sidebar bottom) ============================================================ */ .theme-switcher { padding: 12px 16px; border-top: 1px solid var(--border); margin-top: auto; } .theme-switcher-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-subtle); margin-bottom: 8px; } .theme-dots { display: flex; gap: 8px; } .theme-dot { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.15s, border-color 0.15s; position: relative; } .theme-dot:hover { transform: scale(1.18); } .theme-dot.active { border-color: var(--text); } .theme-dot[data-t="slate"] { background: #2563eb; } .theme-dot[data-t="carbon"] { background: #e07b00; } .theme-dot[data-t="forest"] { background: #059669; } .theme-dot[data-t="light"] { background: #f0f4f8; border: 1px solid #9ca3af; } /* ============================================================ COLOR UTILITIES (used across pages) ============================================================ */ .text-info { color: var(--info) !important; } .text-success{ color: var(--success) !important; } .text-warning{ color: var(--warning) !important; } .text-danger { color: var(--danger) !important; } .text-muted { color: var(--text-muted) !important; } /* ============================================================ TOAST ============================================================ */ .toast-container { position: fixed; bottom: 28px; right: 28px; padding: 14px 20px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); border-left: 4px solid transparent; color: var(--text); transform: translateX(120%); transition: transform 0.35s cubic-bezier(0.175,0.885,0.32,1.275); z-index: 1050; pointer-events: none; } .toast-container.show { transform: translateX(0); } .toast-container.toast-success { border-left-color: var(--success); } .toast-container.toast-error { border-left-color: var(--danger); } .toast-content { display: flex; align-items: center; gap: 14px; } .toast-content i { font-size: 1.3rem; } .toast-success i { color: var(--success); } .toast-error i { color: var(--danger); } .toast-text strong { display: block; font-size: 0.95rem; margin-bottom: 2px; } .toast-text p { margin: 0; font-size: 0.85rem; color: var(--text-muted); } /* ============================================================ LOGIN PAGE ============================================================ */ .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; background: var(--bg); } .login-card { width: 100%; max-width: 410px; padding: 40px; background: var(--panel-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.5); text-align: center; } .brand-header { margin-bottom: 28px; } .brand-header h2 { margin: 0 0 8px; font-weight: 700; font-size: 22px; color: var(--text); } .brand-header p { color: var(--text-muted); margin: 0; font-size: 13px; } .logo-circle { width: 58px; height: 58px; background: var(--primary-dim); border: 2px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 26px; color: var(--accent); } .form-field-group { text-align: left; margin-bottom: 18px; } .form-field-group label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted); } .form-field-group input, .form-field-group select { width: 100%; padding: 10px 14px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; color: var(--text); font-size: 13px; outline: none; transition: all 0.2s; } .form-field-group input:focus, .form-field-group select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); } .form-field-group select option { background: var(--bg-3); color: var(--text); } .login-footer { margin-top: 24px; font-size: 12px; color: var(--text-muted); } /* Bootstrap input-group overrides */ .fields-grid .input-group, .form-container .input-group, .retoma-details .input-group { display: block !important; width: 100% !important; flex-wrap: unset !important; align-items: unset !important; } .fields-grid .input-group label, .form-container .input-group label, .retoma-details .input-group label { display: block !important; margin-bottom: 6px !important; font-size: 13px !important; color: var(--text-muted) !important; font-weight: 500 !important; text-align: left !important; width: 100% !important; } /* Search */ .search-input { width: 100%; padding: 10px 14px; background: var(--input-bg) !important; border: 1px solid var(--input-border) !important; border-radius: 7px !important; color: var(--text) !important; font-size: 13px; outline: none; transition: all 0.2s; } .search-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-dim) !important; } /* Vehicles */ .vehicles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; } .vehicle-card { display: flex; flex-direction: column; overflow: hidden; transition: transform 0.2s, border-color 0.2s; } .vehicle-card:hover { transform: translateY(-3px); border-color: var(--primary) !important; } .card-image-placeholder { height: 170px; background: var(--bg-3); display: flex; justify-content: center; align-items: center; position: relative; font-size: 60px; } .car-badge { position: absolute; top: 12px; right: 12px; background: var(--primary); color: white; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } .vehicle-info { padding: 16px; } .vehicle-info h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--text); } .model-year { color: var(--text-muted); font-size: 12px; margin: 0 0 12px; } .specs-grid { display: flex; gap: 12px; font-size: 13px; color: var(--text-muted); margin-bottom: 16px; } .price-box { background: var(--bg-3); border: 1px solid var(--border); border-radius: 7px; padding: 10px; } .price-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 2px; } .price-value { font-size: 18px; font-weight: 700; color: var(--success); } .card-actions { display: flex; gap: 8px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { .table-custom { display: block; width: 100%; } .table-custom thead { display: none; } .table-custom tbody, .table-custom tr, .table-custom td { display: block; width: 100%; } .table-custom tr { background: var(--bg-3) !important; border: 1px solid var(--border) !important; border-radius: 10px; margin-bottom: 12px; padding: 8px; } .table-custom td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--border-light); font-size: 13px; display: flex; justify-content: space-between; align-items: center; } .table-custom td:last-child { border-bottom: 0; } .table-custom td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); text-align: left; margin-right: 12px; } } @media (max-width: 640px) { .page { flex-direction: column !important; } .sidebar { width: 100% !important; height: auto !important; position: relative !important; z-index: 100 !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; } .content { padding: 1.25rem !important; } } @media print { .sidebar, .top-row, .no-print, .navbar, .navbar-toggler, .btn, button, nav { display: none !important; } .page { display: block !important; background: white !important; color: black !important; } main { margin: 0 !important; padding: 0 !important; } .content { padding: 0 !important; margin: 0 !important; } .glass-panel { background: transparent !important; border: none !important; box-shadow: none !important; } body, html, .page, main, .content, td, th, span, div, h1, h2, h3, h4, h5, h6, p { background: transparent !important; color: #000 !important; text-shadow: none !important; box-shadow: none !important; } } /* ============================================================ COMPARTIDOS ENTRE PÁGINAS Estas clases se usan en varias pantallas (Clientes, Prendas, Agencias, Historial). En CSS aislado solo aplican a su propia página, por eso viven aquí: así se ven igual en todas. ============================================================ */ .inventory-header, .prendas-header, .page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; } .inventory-header h1, .prendas-header h1, .page-header h1 { font-size: 28px; font-weight: 700; margin: 0; color: var(--text); } .search-bar-container { padding: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 15px; } .search-bar-container > * { min-width: 200px; } .empty-state { padding: 50px; color: var(--text-muted); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; background: var(--bg-3); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .btn-secondary:hover { background: var(--panel-hover); color: var(--text); border-color: var(--accent); } .back-link .btn-secondary { display: inline-flex; } /* ============================================================ REVISIÓN TÉCNICA (DEKRA): colores por estado Se usan en el control de revisión y en el aviso del Dashboard. ============================================================ */ .rtv-atrasada { --rtv: var(--danger); --rtv-dim: var(--danger-dim); } .rtv-reinspeccion { --rtv: #f97316; --rtv-dim: rgba(249, 115, 22, 0.15); } .rtv-este-mes { --rtv: var(--warning); --rtv-dim: var(--warning-dim); } .rtv-adelantar { --rtv: var(--info); --rtv-dim: var(--primary-dim); } .rtv-aprobada { --rtv: var(--success); --rtv-dim: var(--success-dim); } .rtv-neutra { --rtv: var(--text-muted); --rtv-dim: var(--bg-3); } .rtv-pill { display: inline-flex; align-items: center; white-space: nowrap; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--rtv); background: var(--rtv-dim); border: 1px solid var(--rtv); } .rtv-aviso { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 10px; background: var(--rtv-dim); border: 1px solid var(--rtv); color: var(--text) !important; text-decoration: none; } .rtv-aviso > i { font-size: 26px; color: var(--rtv); } .rtv-aviso:hover { filter: brightness(1.1); } /* Avisos de las pantallas de acceso (recuperar / restablecer contraseña) */ .aviso { text-align: left; font-size: 13px; line-height: 1.5; padding: 12px 14px; border-radius: 8px; margin-bottom: 18px; } .aviso-ok { background: var(--success-dim); border: 1px solid var(--success); color: var(--success); } .aviso-info { background: var(--primary-dim); border: 1px solid var(--accent); color: var(--accent); } .aviso-error { background: var(--danger-dim); border: 1px solid var(--danger); color: var(--danger); } /* Logo de la pantalla de inicio de sesión (wwwroot/img/logo-autos506.png) */ .login-logo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; /* Un aro tenue: el logo es azul oscuro y se confundiría con el panel */ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 20px rgba(0, 0, 0, 0.35); }