/* ============================================================================= MegaCity Platform — themes.css Definición de todos los temas de color mediante CSS variables. Aplicar el atributo data-theme="" en el elemento . ============================================================================= */ /* ============================================================================= BLOQUE 1 — DEFINICIÓN DE VARIABLES POR TEMA ============================================================================= */ /* ─────────────────────────────── BLUE (default) ──────────────────────────── */ [data-theme="blue"], :root { --primary: #3b82f6; --primary-dark: #2563eb; --primary-light: #dbeafe; --primary-rgb: 59, 130, 246; --primary-gradient: linear-gradient(135deg, #3b82f6, #1d4ed8); --primary-glow: 0 0 20px rgba(59, 130, 246, .35); --navbar-bg: #2563eb; --navbar-bg-end: #1d4ed8; /* Bootstrap sync */ --bs-primary: #3b82f6; --bs-primary-rgb: 59, 130, 246; --bs-link-color: #3b82f6; --bs-link-hover-color: #2563eb; } /* ─────────────────────────────── PURPLE ──────────────────────────────────── */ [data-theme="purple"] { --primary: #8b5cf6; --primary-dark: #7c3aed; --primary-light: #ede9fe; --primary-rgb: 139, 92, 246; --primary-gradient: linear-gradient(135deg, #8b5cf6, #6d28d9); --primary-glow: 0 0 20px rgba(139, 92, 246, .35); --navbar-bg: #7c3aed; --navbar-bg-end: #6d28d9; --bs-primary: #8b5cf6; --bs-primary-rgb: 139, 92, 246; --bs-link-color: #8b5cf6; --bs-link-hover-color: #7c3aed; } /* ─────────────────────────────── GREEN ───────────────────────────────────── */ [data-theme="green"] { --primary: #10b981; --primary-dark: #059669; --primary-light: #d1fae5; --primary-rgb: 16, 185, 129; --primary-gradient: linear-gradient(135deg, #10b981, #047857); --primary-glow: 0 0 20px rgba(16, 185, 129, .35); --navbar-bg: #059669; --navbar-bg-end: #047857; --bs-primary: #10b981; --bs-primary-rgb: 16, 185, 129; --bs-link-color: #10b981; --bs-link-hover-color: #059669; } /* ─────────────────────────────── ORANGE ──────────────────────────────────── */ [data-theme="orange"] { --primary: #f97316; --primary-dark: #ea580c; --primary-light: #ffedd5; --primary-rgb: 249, 115, 22; --primary-gradient: linear-gradient(135deg, #f97316, #c2410c); --primary-glow: 0 0 20px rgba(249, 115, 22, .35); --navbar-bg: #ea580c; --navbar-bg-end: #c2410c; --bs-primary: #f97316; --bs-primary-rgb: 249, 115, 22; --bs-link-color: #f97316; --bs-link-hover-color: #ea580c; } /* ─────────────────────────────── RED ─────────────────────────────────────── */ [data-theme="red"] { --primary: #ef4444; --primary-dark: #dc2626; --primary-light: #fee2e2; --primary-rgb: 239, 68, 68; --primary-gradient: linear-gradient(135deg, #ef4444, #b91c1c); --primary-glow: 0 0 20px rgba(239, 68, 68, .35); --navbar-bg: #dc2626; --navbar-bg-end: #b91c1c; --bs-primary: #ef4444; --bs-primary-rgb: 239, 68, 68; --bs-link-color: #ef4444; --bs-link-hover-color: #dc2626; } /* ─────────────────────────────── TEAL ────────────────────────────────────── */ [data-theme="teal"] { --primary: #14b8a6; --primary-dark: #0d9488; --primary-light: #ccfbf1; --primary-rgb: 20, 184, 166; --primary-gradient: linear-gradient(135deg, #14b8a6, #0f766e); --primary-glow: 0 0 20px rgba(20, 184, 166, .35); --navbar-bg: #0d9488; --navbar-bg-end: #0f766e; --bs-primary: #14b8a6; --bs-primary-rgb: 20, 184, 166; --bs-link-color: #14b8a6; --bs-link-hover-color: #0d9488; } /* ─────────────────────────────── PINK ────────────────────────────────────── */ [data-theme="pink"] { --primary: #ec4899; --primary-dark: #db2777; --primary-light: #fce7f3; --primary-rgb: 236, 72, 153; --primary-gradient: linear-gradient(135deg, #ec4899, #be185d); --primary-glow: 0 0 20px rgba(236, 72, 153, .35); --navbar-bg: #db2777; --navbar-bg-end: #be185d; --bs-primary: #ec4899; --bs-primary-rgb: 236, 72, 153; --bs-link-color: #ec4899; --bs-link-hover-color: #db2777; } /* ============================================================================= BLOQUE 2 — ESTILOS THEMING (usan las variables definidas arriba) ============================================================================= */ /* ── NAVBAR TEMÁTICA ─────────────────────────────────────────────────────── */ /* La navbar top por defecto es blanca (main.css). Si el admin quiere navbar coloreada, añade clase .navbar-themed. */ .navbar-themed { background: linear-gradient(135deg, var(--navbar-bg), var(--navbar-bg-end)) !important; border-bottom: none !important; } .navbar-themed *, .navbar-themed .navbar-action-btn, .navbar-themed .navbar-toggler-btn { color: rgba(255, 255, 255, .85) !important; } .navbar-themed .navbar-action-btn:hover, .navbar-themed .navbar-toggler-btn:hover { background: rgba(255, 255, 255, .15) !important; color: #fff !important; } .navbar-themed .navbar-search input { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .2); color: #fff; } .navbar-themed .navbar-search input::placeholder { color: rgba(255, 255, 255, .55); } .navbar-themed .navbar-search input:focus { background: rgba(255, 255, 255, .25); border-color: rgba(255, 255, 255, .5); box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); } .navbar-themed .action-badge { border-color: var(--navbar-bg) !important; } /* ── SIDEBAR — estados con el color del tema ─────────────────────────────── */ /* Active link */ .sidebar-nav .nav-link.active { background: rgba(var(--primary-rgb), .18); border-left-color: var(--primary); color: #fff; } .sidebar-nav .nav-link.active .nav-icon { color: var(--primary); } /* Hover */ .sidebar-nav .nav-link:hover { border-left-color: rgba(var(--primary-rgb), .6); } .sidebar-nav .nav-link:hover .nav-icon { color: var(--primary); } /* Nav badge */ .sidebar-nav .nav-link .nav-badge { background: rgba(var(--primary-rgb), .25); color: var(--primary); } /* Brand icon */ .sidebar-brand-icon { background: var(--primary-gradient); box-shadow: 0 4px 12px rgba(var(--primary-rgb), .4); } /* ── BOTONES ─────────────────────────────────────────────────────────────── */ .btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: 0 2px 8px rgba(var(--primary-rgb), .3); } .btn-primary:hover, .btn-primary:focus { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 4px 16px rgba(var(--primary-rgb), .4); } .btn-primary:focus { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .3); } .btn-outline-primary { border-color: var(--primary); color: var(--primary); } .btn-outline-primary:hover { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(var(--primary-rgb), .3); } .btn-outline-primary:focus { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .2); } /* ── LINKS ───────────────────────────────────────────────────────────────── */ a { color: var(--primary); } a:hover { color: var(--primary-dark); } /* Link underline */ .link-primary { color: var(--primary) !important; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(var(--primary-rgb), .4); } .link-primary:hover { color: var(--primary-dark) !important; text-decoration-color: var(--primary-dark); } /* ── CARDS ───────────────────────────────────────────────────────────────── */ .card { border-left-color: var(--primary); } .card-border-top { border-top-color: var(--primary); border-left-color: var(--border-color); } /* Card accent line superior */ .card-accent::before { content: ''; display: block; height: 3px; background: var(--primary-gradient); } /* ── BADGES ──────────────────────────────────────────────────────────────── */ .badge-primary, .badge-custom { background: rgba(var(--primary-rgb), .15); color: var(--primary); } .badge-solid-primary { background: var(--primary); color: #fff; } /* ── PROGRESS BARS ───────────────────────────────────────────────────────── */ .progress-bar { background: var(--primary-gradient); } .progress-bar-solid { background: var(--primary); } /* ── CHECKBOXES / RADIOS ─────────────────────────────────────────────────── */ input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); } /* ── TOGGLE SWITCH ───────────────────────────────────────────────────────── */ .toggle-switch input:checked + .toggle-switch-track { background: var(--primary); } /* ── FOCUS RINGS ─────────────────────────────────────────────────────────── */ .form-control:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); } *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ── TABS ────────────────────────────────────────────────────────────────── */ .tabs-modern .tab-link:hover { color: var(--primary); background: rgba(var(--primary-rgb), .06); } .tabs-modern .tab-link.active { color: var(--primary); border-bottom-color: var(--primary); background: rgba(var(--primary-rgb), .06); } /* ── PAGINATION ──────────────────────────────────────────────────────────── */ .page-item.active .page-link { background: var(--primary); border-color: var(--primary); box-shadow: 0 2px 8px rgba(var(--primary-rgb), .3); } .page-link:hover { border-color: rgba(var(--primary-rgb), .4); color: var(--primary); background: rgba(var(--primary-rgb), .08); } /* ── DROPDOWN ────────────────────────────────────────────────────────────── */ .dropdown-item:hover { background: rgba(var(--primary-rgb), .08); color: var(--primary); } .dropdown-item.active { background: rgba(var(--primary-rgb), .1); color: var(--primary); } /* ── ALERTS ──────────────────────────────────────────────────────────────── */ .alert-primary { background: rgba(var(--primary-rgb), .1); border-left-color: var(--primary); color: var(--primary-dark); } /* ── SCROLLBAR ───────────────────────────────────────────────────────────── */ ::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), .35); } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb), .6); } /* ── STAT CARD ───────────────────────────────────────────────────────────── */ .stat-card-icon { background: rgba(var(--primary-rgb), .12); color: var(--primary); } .stat-card:hover .stat-card-icon { background: var(--primary); color: #fff; } .stat-card::before { background: var(--primary-gradient); } /* ── HIGHLIGHT BOX ───────────────────────────────────────────────────────── */ .highlight-box { background: rgba(var(--primary-rgb), .07); border: 1px solid rgba(var(--primary-rgb), .2); } /* ── SELECTION ───────────────────────────────────────────────────────────── */ ::selection { background: rgba(var(--primary-rgb), .2); } /* ── SPINNER ─────────────────────────────────────────────────────────────── */ .spinner { border-color: rgba(var(--primary-rgb), .2); border-top-color: var(--primary); } /* ── NAVBAR ACTION BADGE ─────────────────────────────────────────────────── */ .action-badge { background: var(--primary); } /* ── SIDEBAR BRAND ───────────────────────────────────────────────────────── */ .sidebar-avatar, .navbar-avatar, .avatar { background: var(--primary-gradient); } /* ── BREADCRUMB ACTIVE ───────────────────────────────────────────────────── */ .breadcrumb-item a:hover { color: var(--primary); } /* ── FOOTER BRAND ────────────────────────────────────────────────────────── */ .footer-brand { color: var(--primary); } /* ── SIDEBAR USER AVATAR ─────────────────────────────────────────────────── */ .sidebar-user-avatar { background: var(--primary-gradient); } /* ── TOAST INFO ──────────────────────────────────────────────────────────── */ .toast-info::before { background: var(--primary); } .toast-info .toast-icon { background: rgba(var(--primary-rgb), .12); color: var(--primary); } .toast-progress { background: var(--primary); } /* ── EMPTY STATE ICON ────────────────────────────────────────────────────── */ .empty-state-icon { background: rgba(var(--primary-rgb), .08); color: rgba(var(--primary-rgb), .5); } /* ── CONFIRM DIALOG ──────────────────────────────────────────────────────── */ .confirm-dialog-icon { background: rgba(239, 68, 68, .1); color: #ef4444; } /* ── NAVBAR SEARCH FOCUS ─────────────────────────────────────────────────── */ .navbar-search input:focus { border-color: rgba(var(--primary-rgb), .4); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .1); } /* ── FORM CHECK MODERN HOVER ─────────────────────────────────────────────── */ .form-check-modern:hover { background: rgba(var(--primary-rgb), .06); } /* ── CODE ────────────────────────────────────────────────────────────────── */ code { background: rgba(var(--primary-rgb), .08); color: var(--primary-dark); } /* ── LOADING OVERLAY ─────────────────────────────────────────────────────── */ .skeleton { background: linear-gradient( 90deg, rgba(var(--primary-rgb), .04) 25%, rgba(var(--primary-rgb), .09) 50%, rgba(var(--primary-rgb), .04) 75% ); background-size: 200% 100%; } /* ============================================================================= BLOQUE 3 — SWATCH SELECTOR (panel de selección de temas visual) ============================================================================= */ .theme-swatch-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px; } .theme-swatch { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; outline: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; box-shadow: 0 2px 6px rgba(0,0,0,.15); position: relative; } .theme-swatch:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,.2); } .theme-swatch.active { border-color: #fff; box-shadow: 0 0 0 3px var(--primary); transform: scale(1.1); } .theme-swatch.active::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .8rem; font-weight: 700; } /* Colores de cada swatch */ .theme-swatch[data-value="blue"] { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .theme-swatch[data-value="purple"] { background: linear-gradient(135deg, #8b5cf6, #6d28d9); } .theme-swatch[data-value="green"] { background: linear-gradient(135deg, #10b981, #047857); } .theme-swatch[data-value="orange"] { background: linear-gradient(135deg, #f97316, #c2410c); } .theme-swatch[data-value="red"] { background: linear-gradient(135deg, #ef4444, #b91c1c); } .theme-swatch[data-value="teal"] { background: linear-gradient(135deg, #14b8a6, #0f766e); } .theme-swatch[data-value="pink"] { background: linear-gradient(135deg, #ec4899, #be185d); } /* Panel de configuración de tema */ .theme-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); padding: 20px; min-width: 240px; } .theme-panel-title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 12px; } .theme-panel-section { margin-bottom: 16px; } .theme-panel-section:last-child { margin-bottom: 0; } /* Dark mode toggle dentro del panel */ .dark-toggle-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f1f5f9; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--text-secondary); transition: var(--transition-fast); font-family: var(--font-family); } .dark-toggle-btn:hover { background: rgba(var(--primary-rgb), .08); border-color: rgba(var(--primary-rgb), .3); color: var(--primary); } .dark-toggle-btn.active { background: rgba(var(--primary-rgb), .12); border-color: rgba(var(--primary-rgb), .4); color: var(--primary); } .dark-toggle-icon { font-size: 1.1rem; } /* Color preview circle grande */ .theme-preview-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--primary-gradient); box-shadow: var(--primary-glow); transition: var(--transition); }