/* ============================================================================= SKINS DEL DASHBOARD ADMIN/SUPERVISOR - NEC SFA ============================================================================= 10 temas claros + 10 oscuros. Cada uno define color Y FORMA: radio, borde, sombra, tipografia, forma de boton, tracking de labels y hover - no es solo un recolor de la misma tarjeta plana. Basado en como se ven de verdad los estilos (glassmorphism, claymorphism, neumorphism, brutalism, bento, etc.) revisando el demo real de UI/UX Pro Max, no solo su paleta. Uso: y el resto del CSS del panel consume estas variables (--bg, --radius, --btn-radius, --label-transform, etc.) en vez de valores fijos. Cada admin/supervisor guarda su tema en la tabla `preferencias_usuario` (pendiente). ============================================================================= */ :root { --radius: 12px; --shadow: 0 4px 6px rgba(0,0,0,0.05); --shadow-hover: 0 8px 16px rgba(0,0,0,0.08); --blur: 0px; --border-w: 1px; --border-style: solid; --btn-radius: 8px; --label-transform: none; --label-tracking: 0em; --heading-weight: 700; --hover-lift: -2px; --font-heading: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; } /* ─────────────────────────── CLAROS (LIGHT) ─────────────────────────── */ /* 1. Minimal Clean - Swiss Modernism: blanco/negro, tipografia gigante como acento */ [data-theme="minimal-clean"] { --bg: #FFFFFF; --surface: #FFFFFF; --text: #000000; --text-muted: #6B6B6B; --accent: #2563EB; --accent-2: #1D4ED8; --border: #E5E5E5; --radius: 4px; --shadow: none; --shadow-hover: 0 1px 0 var(--text); --border-w: 1px; --btn-radius: 2px; --label-transform: uppercase; --label-tracking: 0.08em; --heading-weight: 800; --hover-lift: 0px; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } /* 2. Editorial Warm - serif protagonista, sin sombras, borde fino inferior */ [data-theme="editorial-warm"] { --bg: #FAF7F2; --surface: #FFF9F2; --text: #241F1A; --text-muted: #7A6F63; --accent: #C24A1F; --accent-2: #8F3714; --border: #DCCFBB; --radius: 2px; --shadow: none; --shadow-hover: none; --border-w: 1px; --btn-radius: 999px; --label-transform: none; --label-tracking: 0.02em; --heading-weight: 500; --hover-lift: 0px; --font-heading: 'Playfair Display', serif; --font-body: 'Source Sans 3', sans-serif; } /* 3. Corporate SaaS - azul limpio, cards con sombra suave uniforme */ [data-theme="corporate-saas"] { --bg: #F8FAFC; --surface: #FFFFFF; --text: #0F172A; --text-muted: #64748B; --accent: #2563EB; --accent-2: #0EA5E9; --border: #E2E8F0; --radius: 10px; --shadow: 0 1px 2px rgba(15,23,42,0.06); --shadow-hover: 0 6px 16px rgba(15,23,42,0.10); --border-w: 1px; --btn-radius: 8px; --label-transform: uppercase; --label-tracking: 0.04em; --heading-weight: 700; --hover-lift: -2px; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } /* 4. Glassmorphism Light - vidrio translucido + blur real sobre gradiente, sombra tintada */ [data-theme="glass-light"] { --bg: #E8EFFB; --bg-gradient: radial-gradient(circle at 15% 10%, #E4EEFF 0%, transparent 45%), radial-gradient(circle at 85% 85%, #F1E5FF 0%, transparent 45%), linear-gradient(180deg, #EFF3FC 0%, #E6ECFA 100%); --surface: rgba(255,255,255,0.55); --text: #1B2430; --text-muted: #52607A; --accent: #6D6AF7; --accent-2: #A66DF7; --border: rgba(255,255,255,0.6); --radius: 20px; --shadow: 0 8px 24px rgba(90,100,220,0.14); --shadow-hover: 0 14px 32px rgba(90,100,220,0.22); --blur: 14px; --border-w: 1px; --btn-radius: 999px; --label-transform: uppercase; --label-tracking: 0.06em; --heading-weight: 700; --hover-lift: -4px; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } /* 5. Claymorphism - muy redondeado, sombra doble tipo plastilina, sin bordes duros */ [data-theme="clay-soft"] { --bg: #F4F1FA; --surface: #FDFBFF; --text: #332F3A; --text-muted: #635F69; --accent: #7C3AED; --accent-2: #DB2777; --border: transparent; --radius: 32px; --shadow: 8px 8px 20px rgba(124,58,237,0.14), -6px -6px 16px rgba(255,255,255,0.9); --shadow-hover: 10px 10px 24px rgba(124,58,237,0.20), -6px -6px 16px rgba(255,255,255,0.95); --blur: 0px; --border-w: 0px; --btn-radius: 999px; --label-transform: none; --label-tracking: 0em; --heading-weight: 800; --hover-lift: -3px; --font-heading: 'Nunito', sans-serif; --font-body: 'DM Sans', sans-serif; } /* 6. Neumorphism Soft - mismo color que el fondo, solo sombras dobles la definen */ [data-theme="neu-soft"] { --bg: #E9EDF1; --surface: #E9EDF1; --text: #2B333B; --text-muted: #6B7684; --accent: #3B82F6; --accent-2: #06B6D4; --border: transparent; --radius: 18px; --shadow: 7px 7px 14px #C8D0D9, -7px -7px 14px #FFFFFF; --shadow-hover: inset 4px 4px 8px #C8D0D9, inset -4px -4px 8px #FFFFFF; --blur: 0px; --border-w: 0px; --btn-radius: 14px; --label-transform: none; --label-tracking: 0.02em; --heading-weight: 600; --hover-lift: 0px; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } /* 7. Bento Fresh - grid de bloques grandes, radio pronunciado, lift fuerte al hover */ [data-theme="bento-fresh"] { --bg: #F2F2F4; --surface: #FFFFFF; --text: #111318; --text-muted: #6E7178; --accent: #16A34A; --accent-2: #059669; --border: #EDEDEF; --radius: 28px; --shadow: 0 2px 4px rgba(0,0,0,0.04); --shadow-hover: 0 16px 28px rgba(0,0,0,0.10); --border-w: 1px; --btn-radius: 16px; --label-transform: uppercase; --label-tracking: 0.05em; --heading-weight: 800; --hover-lift: -6px; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } /* 8. Luxury Ivory - marfil, filete dorado fino, sin sombra fuerte, serif elegante */ [data-theme="luxury-ivory"] { --bg: #FBF8F1; --surface: #FFFFFF; --text: #1C1A16; --text-muted: #7A7365; --accent: #A9822F; --accent-2: #6B5217; --border: #D8C58E; --radius: 2px; --shadow: 0 1px 0 #D8C58E; --shadow-hover: 0 2px 0 #A9822F; --border-w: 1px; --btn-radius: 0px; --label-transform: uppercase; --label-tracking: 0.16em; --heading-weight: 500; --hover-lift: 0px; --font-heading: 'Cormorant Garamond', serif; --font-body: 'Inter', sans-serif; } /* 9. Nature Sage - organico, radios asimetricos suaves, terroso */ [data-theme="nature-sage"] { --bg: #F1F5EE; --surface: #FFFFFF; --text: #23291F; --text-muted: #616B57; --accent: #4D7C4A; --accent-2: #2F5233; --border: #DCE5D6; --radius: 20px 8px 20px 8px; --shadow: 0 2px 8px rgba(35,41,31,0.06); --shadow-hover: 0 8px 18px rgba(35,41,31,0.12); --border-w: 1px; --btn-radius: 999px; --label-transform: none; --label-tracking: 0.02em; --heading-weight: 600; --hover-lift: -2px; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } /* 10. Coral Bright - bloques francos, radio medio, energico */ [data-theme="coral-bright"] { --bg: #FFF5EE; --surface: #FFFFFF; --text: #2B1B14; --text-muted: #8A6C5C; --accent: #EA580C; --accent-2: #DC2626; --border: #FBDCC4; --radius: 14px; --shadow: 0 4px 0 #FBDCC4; --shadow-hover: 0 6px 0 #EA580C; --border-w: 2px; --btn-radius: 999px; --label-transform: uppercase; --label-tracking: 0.05em; --heading-weight: 800; --hover-lift: -2px; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } /* ─────────────────────────── OSCUROS (DARK) ─────────────────────────── */ /* 1. Dark Tech - terminal: mono, bordes finos verdes, glow sutil */ [data-theme="dark-tech"] { --bg: #0B0F14; --surface: #10151C; --text: #E6EDF3; --text-muted: #8B98A5; --accent: #22D3EE; --accent-2: #34D399; --border: #1E2833; --radius: 6px; --shadow: 0 0 0 1px #1E2833, 0 8px 20px rgba(0,0,0,0.5); --shadow-hover: 0 0 0 1px #22D3EE55, 0 8px 20px rgba(0,0,0,0.5); --border-w: 1px; --btn-radius: 4px; --label-transform: uppercase; --label-tracking: 0.1em; --heading-weight: 600; --hover-lift: 0px; --font-heading: 'JetBrains Mono', monospace; --font-body: 'Inter', sans-serif; } /* 2. Midnight Corporate - azul marino, cards solidas con radio moderado */ [data-theme="midnight-corporate"] { --bg: #0F172A; --surface: #17233C; --text: #F1F5F9; --text-muted: #94A3B8; --accent: #3B82F6; --accent-2: #60A5FA; --border: #263449; --radius: 12px; --shadow: 0 4px 16px rgba(0,0,0,0.35); --shadow-hover: 0 10px 24px rgba(59,130,246,0.18); --border-w: 1px; --btn-radius: 8px; --label-transform: uppercase; --label-tracking: 0.04em; --heading-weight: 700; --hover-lift: -2px; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } /* 3. Brutalist Dark - 0 radio, bordes gruesos, sombra offset dura, sin blur */ [data-theme="brutalist-dark"] { --bg: #09090B; --surface: #0F0F12; --text: #FAFAFA; --text-muted: #A1A1AA; --accent: #DFE104; --accent-2: #FACC15; --border: #FAFAFA; --radius: 0px; --shadow: 6px 6px 0 #DFE104; --shadow-hover: 3px 3px 0 #DFE104; --border-w: 2px; --btn-radius: 0px; --label-transform: uppercase; --label-tracking: 0.02em; --heading-weight: 900; --hover-lift: 3px; --font-heading: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; } /* 4. Glass Dark - vidrio oscuro + blur real, glow morado, sin bordes duros */ [data-theme="glass-dark"] { --bg: #0D1120; --bg-gradient: radial-gradient(circle at 20% 15%, #241436 0%, transparent 50%), radial-gradient(circle at 80% 80%, #14203A 0%, transparent 50%), linear-gradient(180deg, #0D1120 0%, #0A0D18 100%); --surface: rgba(255,255,255,0.06); --text: #EDEFF7; --text-muted: #9AA0BC; --accent: #8B7CF6; --accent-2: #C084FC; --border: rgba(255,255,255,0.12); --radius: 20px; --shadow: 0 10px 30px rgba(139,124,246,0.15); --shadow-hover: 0 16px 40px rgba(139,124,246,0.25); --blur: 14px; --border-w: 1px; --btn-radius: 999px; --label-transform: uppercase; --label-tracking: 0.06em; --heading-weight: 700; --hover-lift: -4px; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } /* 5. Cyberpunk - bordes neon finos, glow doble color, esquinas cortadas */ [data-theme="cyberpunk"] { --bg: #0D0D12; --surface: #14141D; --text: #F5F3FF; --text-muted: #9B93B8; --accent: #F472B6; --accent-2: #22D3EE; --border: #F472B655; --radius: 2px; --shadow: 0 0 0 1px #F472B640, 0 0 24px rgba(34,211,238,0.10); --shadow-hover: 0 0 0 1px #22D3EE80, 0 0 30px rgba(244,114,182,0.25); --border-w: 1px; --btn-radius: 2px; --label-transform: uppercase; --label-tracking: 0.12em; --heading-weight: 700; --hover-lift: 0px; --font-heading: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; } /* 6. Charcoal Minimal - gris carbon, plano, sin sombra, un solo acento */ [data-theme="charcoal-minimal"] { --bg: #18181B; --surface: #1E1E22; --text: #F4F4F5; --text-muted: #A1A1AA; --accent: #E4E4E7; --accent-2: #3B82F6; --border: #2E2E33; --radius: 6px; --shadow: none; --shadow-hover: 0 1px 0 var(--accent-2); --border-w: 1px; --btn-radius: 4px; --label-transform: uppercase; --label-tracking: 0.08em; --heading-weight: 700; --hover-lift: 0px; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } /* 7. Forest Dark - organico, radios suaves, glow verde tenue */ [data-theme="forest-dark"] { --bg: #0C1512; --surface: #12201A; --text: #E8F5EE; --text-muted: #8FAE9F; --accent: #34D399; --accent-2: #10B981; --border: #1F332A; --radius: 18px 8px 18px 8px; --shadow: 0 4px 16px rgba(0,0,0,0.4); --shadow-hover: 0 8px 24px rgba(52,211,153,0.18); --border-w: 1px; --btn-radius: 999px; --label-transform: none; --label-tracking: 0.02em; --heading-weight: 600; --hover-lift: -3px; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } /* 8. Luxury Onyx - grafito, filete dorado fino, serif, sin radios grandes */ [data-theme="luxury-onyx"] { --bg: #121110; --surface: #191713; --text: #F3EFE6; --text-muted: #A79A82; --accent: #C9A24B; --accent-2: #E8C874; --border: #4A3E24; --radius: 2px; --shadow: 0 1px 0 #4A3E24; --shadow-hover: 0 2px 0 #C9A24B; --border-w: 1px; --btn-radius: 0px; --label-transform: uppercase; --label-tracking: 0.16em; --heading-weight: 500; --hover-lift: 0px; --font-heading: 'Cormorant Garamond', serif; --font-body: 'Inter', sans-serif; } /* 9. Slate Editorial - pizarra oscura, serif + sans, borde inferior fino */ [data-theme="slate-editorial"] { --bg: #14161A; --surface: #191C21; --text: #F5F1EA; --text-muted: #9D9C97; --accent: #FB923C; --accent-2: #F97316; --border: #2A2D33; --radius: 2px; --shadow: none; --shadow-hover: none; --border-w: 1px; --btn-radius: 999px; --label-transform: none; --label-tracking: 0.02em; --heading-weight: 500; --hover-lift: 0px; --font-heading: 'Playfair Display', serif; --font-body: 'Source Sans 3', sans-serif; } /* 10. Deep Ocean - teal profundo, radios redondeados, glow cian */ [data-theme="deep-ocean"] { --bg: #071A21; --surface: #0D242D; --text: #E4F4F8; --text-muted: #86AAB4; --accent: #22D3EE; --accent-2: #0EA5E9; --border: #163943; --radius: 16px; --shadow: 0 4px 16px rgba(0,0,0,0.4); --shadow-hover: 0 10px 26px rgba(34,211,238,0.20); --border-w: 1px; --btn-radius: 999px; --label-transform: uppercase; --label-tracking: 0.05em; --heading-weight: 700; --hover-lift: -3px; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; }