/* ═══════════════════════════════════════════════════════════════ SISTEMA DE TEMAS - FarmaSoft Colombia IA 3 temas: xp (Windows clásico), neon (Dark verde), blanco (SaaS) Uso: ═══════════════════════════════════════════════════════════════ */ /* ── TEMA XP: Windows Clásico (por defecto) ──────────────────── */ [data-tema="xp"], .tema-xp { --t-fondo: #d4d0c8; --t-fondo2: #eef2f7; --t-fondo3: #c8d4e8; --t-sidebar: linear-gradient(to bottom, #0a4d9e, #1a6bc6 50%, #0a4d9e); --t-header: linear-gradient(to bottom, #0a4d9e, #1a6bc6 50%, #0a4d9e); --t-primario: #0a4d9e; --t-secundario: #3b7dd8; --t-acento: #28a745; --t-peligro: #e74c3c; --t-advertencia: #f39c12; --t-texto: #000000; --t-texto2: #333333; --t-texto-inv: #ffffff; --t-borde: #7a91b0; --t-borde2: #9bb8dc; --t-tabla-head: linear-gradient(to bottom, #bcd0ec, #9bb8dc); --t-tabla-par: #f0f4f8; --t-tabla-hover: #d8e8f8; --t-btn-prim: linear-gradient(to bottom, #3b7dd8, #0a4d9e); --t-btn-ok: linear-gradient(to bottom, #28a745, #1a6b2e); --t-btn-danger: linear-gradient(to bottom, #e74c3c, #a52214); --t-btn-warn: linear-gradient(to bottom, #f39c12, #c07d09); --t-input-bg: #ffffff; --t-input-border: #0a4d9e; --t-sombra: 4px 4px 8px rgba(0,0,0,0.3); --t-radius: 3px; --t-font: 'Tahoma', 'Segoe UI', Arial, sans-serif; --t-font-size: 12px; } /* ── TEMA NEÓN: Dark Verde ───────────────────────────────────── */ [data-tema="neon"], .tema-neon { --t-fondo: #050f0a; --t-fondo2: #0a1a10; --t-fondo3: #0f2018; --t-sidebar: #050f0a; --t-header: #050f0a; --t-primario: #00ff88; --t-secundario: #00e07a; --t-acento: #00ccff; --t-peligro: #ff4466; --t-advertencia: #ffcc00; --t-texto: #c8ffe0; --t-texto2: #7ab890; --t-texto-inv: #050f0a; --t-borde: rgba(0,255,136,0.3); --t-borde2: rgba(0,255,136,0.15); --t-tabla-head: #0f2018; --t-tabla-par: rgba(0,255,136,0.03); --t-tabla-hover: rgba(0,255,136,0.08); --t-btn-prim: #00ff88; --t-btn-ok: #00ff88; --t-btn-danger: rgba(255,68,102,0.2); --t-btn-warn: rgba(255,204,0,0.2); --t-input-bg: #0f2018; --t-input-border: rgba(0,255,136,0.4); --t-sombra: 0 0 20px rgba(0,255,136,0.15); --t-radius: 6px; --t-font: 'Share Tech Mono', 'Courier New', monospace; --t-font-size: 12px; } /* ── TEMA BLANCO: SaaS Moderno ───────────────────────────────── */ [data-tema="blanco"], .tema-blanco { --t-fondo: #f8fafc; --t-fondo2: #ffffff; --t-fondo3: #f1f5f9; --t-sidebar: #1e293b; --t-header: #ffffff; --t-primario: #4f46e5; --t-secundario: #6366f1; --t-acento: #10b981; --t-peligro: #ef4444; --t-advertencia: #f59e0b; --t-texto: #1e293b; --t-texto2: #64748b; --t-texto-inv: #ffffff; --t-borde: #e2e8f0; --t-borde2: #f1f5f9; --t-tabla-head: #f8fafc; --t-tabla-par: #f8fafc; --t-tabla-hover: #f1f5f9; --t-btn-prim: #4f46e5; --t-btn-ok: #10b981; --t-btn-danger: #ef4444; --t-btn-warn: #f59e0b; --t-input-bg: #ffffff; --t-input-border: #e2e8f0; --t-sombra: 0 1px 3px rgba(0,0,0,0.1); --t-radius: 8px; --t-font: 'Inter', 'Segoe UI', Arial, sans-serif; --t-font-size: 13px; } /* ═══════════════════════════════════════════════════════════════ CLASES REUTILIZABLES QUE USAN LAS VARIABLES Agregar estas clases a los elementos HTML de cada módulo ═══════════════════════════════════════════════════════════════ */ /* Fondos */ .t-fondo { background: var(--t-fondo) !important; } .t-fondo2 { background: var(--t-fondo2) !important; } .t-fondo3 { background: var(--t-fondo3) !important; } /* Textos */ .t-texto { color: var(--t-texto) !important; } .t-texto2 { color: var(--t-texto2) !important; } .t-texto-prim { color: var(--t-primario) !important; } .t-texto-inv { color: var(--t-texto-inv) !important; } /* Bordes */ .t-borde { border-color: var(--t-borde) !important; } .t-borde2 { border-color: var(--t-borde2) !important; } /* Botones */ .t-btn-prim { background: var(--t-btn-prim) !important; color: var(--t-texto-inv) !important; border-radius: var(--t-radius) !important; font-family: var(--t-font) !important; } .t-btn-ok { background: var(--t-btn-ok) !important; color: var(--t-texto-inv) !important; border-radius: var(--t-radius) !important; } .t-btn-danger { background: var(--t-btn-danger) !important; color: var(--t-peligro) !important; border-radius: var(--t-radius) !important; } /* Inputs */ .t-input { background: var(--t-input-bg) !important; border-color: var(--t-input-border) !important; color: var(--t-texto) !important; border-radius: var(--t-radius) !important; font-family: var(--t-font) !important; } /* Tablas */ .t-tabla thead th { background: var(--t-tabla-head) !important; color: var(--t-texto) !important; border-color: var(--t-borde) !important; } .t-tabla tbody td { border-color: var(--t-borde2) !important; color: var(--t-texto) !important; } .t-tabla tbody tr:nth-child(even) td { background: var(--t-tabla-par) !important; } .t-tabla tbody tr:hover td { background: var(--t-tabla-hover) !important; } /* Cards */ .t-card { background: var(--t-fondo2) !important; border: 1px solid var(--t-borde) !important; border-radius: var(--t-radius) !important; box-shadow: var(--t-sombra) !important; } /* Header/Titlebar */ .t-header { background: var(--t-header) !important; color: var(--t-texto-inv) !important; } /* Font global */ .t-font { font-family: var(--t-font) !important; font-size: var(--t-font-size) !important; } /* ═══════════════════════════════════════════════════════════════ SELECTOR DE TEMAS FLOTANTE ═══════════════════════════════════════════════════════════════ */ #selector-tema { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } #selector-tema .tema-toggle { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--t-borde, #ccc); background: var(--t-fondo2, #fff); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--t-sombra, 0 2px 8px rgba(0,0,0,0.2)); transition: transform 0.2s; } #selector-tema .tema-toggle:hover { transform: scale(1.1); } #panel-temas { background: var(--t-fondo2, #fff); border: 1px solid var(--t-borde, #ccc); border-radius: 12px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); display: none; flex-direction: column; gap: 8px; min-width: 180px; } #panel-temas.abierto { display: flex; } #panel-temas .tema-opcion { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: background 0.15s; border: 2px solid transparent; font-size: 13px; font-weight: 500; } #panel-temas .tema-opcion:hover { background: rgba(0,0,0,0.05); } #panel-temas .tema-opcion.activo { border-color: var(--t-primario, #0a4d9e); } .preview-xp { width:20px;height:20px;border-radius:3px;background:linear-gradient(135deg,#0a4d9e,#d4d0c8); } .preview-neon { width:20px;height:20px;border-radius:3px;background:linear-gradient(135deg,#050f0a,#00ff88); } .preview-blanco { width:20px;height:20px;border-radius:3px;background:linear-gradient(135deg,#4f46e5,#f8fafc); } #panel-temas p.tema-titulo { font-size: 11px; font-weight: 700; color: var(--t-texto2, #666); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; padding: 0 12px; }