/** * Palettes CSS - Sistema de paletas de colores * /shared/palettes.css * * Uso: agregar data-palette="nombre" en el o * Ejemplo: */ /* ======================================== PALETAS CÁLIDAS ======================================== */ /* Espiritual - Dorado y verde profundo (iglesias, eventos religiosos) */ [data-palette="espiritual"] { --primary: #C9A961; --primary-rgb: 201, 169, 97; --primary-glow: rgba(201, 169, 97, 0.5); --secondary: #2E7D32; --secondary-rgb: 46, 125, 50; --accent: #1B5E20; --accent-rgb: 27, 94, 32; --bg-dark: #0D1B0F; --bg-darker: #080F09; --bg-light: #F5F3EE; --bg-card: rgba(201, 169, 97, 0.08); --border-color: rgba(201, 169, 97, 0.2); --border-accent: rgba(201, 169, 97, 0.4); --gradient-primary: linear-gradient(135deg, #C9A961 0%, #2E7D32 100%); --gradient-dark: linear-gradient(135deg, #0D1B0F 0%, #1B5E20 50%, #080F09 100%); } /* Romántico - Rosa empolvado y borgoña */ [data-palette="romantico"] { --primary: #D4A5A5; --primary-rgb: 212, 165, 165; --primary-glow: rgba(212, 165, 165, 0.5); --secondary: #8B4557; --secondary-rgb: 139, 69, 87; --accent: #F8E1E1; --accent-rgb: 248, 225, 225; --bg-dark: #1A0A10; --bg-darker: #0F0508; --bg-light: #FDF8F8; --bg-card: rgba(212, 165, 165, 0.08); --border-color: rgba(212, 165, 165, 0.2); --border-accent: rgba(212, 165, 165, 0.4); --gradient-primary: linear-gradient(135deg, #D4A5A5 0%, #8B4557 100%); --gradient-dark: linear-gradient(135deg, #1A0A10 0%, #2D1520 100%); } /* Cálido - Terracota y crema */ [data-palette="calido"] { --primary: #C4A484; --primary-rgb: 196, 164, 132; --primary-glow: rgba(196, 164, 132, 0.5); --secondary: #8B5A2B; --secondary-rgb: 139, 90, 43; --accent: #D4A574; --accent-rgb: 212, 165, 116; --bg-dark: #1A140E; --bg-darker: #0F0A06; --bg-light: #FAF6F1; --bg-card: rgba(196, 164, 132, 0.08); --border-color: rgba(196, 164, 132, 0.2); --border-accent: rgba(196, 164, 132, 0.4); --gradient-primary: linear-gradient(135deg, #C4A484 0%, #8B5A2B 100%); --gradient-dark: linear-gradient(135deg, #1A140E 0%, #2D2318 100%); } /* Sunset - Naranja y coral */ [data-palette="sunset"] { --primary: #FF8C69; --primary-rgb: 255, 140, 105; --primary-glow: rgba(255, 140, 105, 0.5); --secondary: #E85D4C; --secondary-rgb: 232, 93, 76; --accent: #FFB088; --accent-rgb: 255, 176, 136; --bg-dark: #1A0F0A; --bg-darker: #0F0805; --bg-light: #FFF8F5; --bg-card: rgba(255, 140, 105, 0.08); --border-color: rgba(255, 140, 105, 0.2); --border-accent: rgba(255, 140, 105, 0.4); --gradient-primary: linear-gradient(135deg, #FF8C69 0%, #E85D4C 100%); --gradient-dark: linear-gradient(135deg, #1A0F0A 0%, #2D1A12 100%); } /* ======================================== PALETAS FRÍAS ======================================== */ /* Nocturno - Azul oscuro y plata */ [data-palette="nocturno"] { --primary: #C0C0C0; --primary-rgb: 192, 192, 192; --primary-glow: rgba(192, 192, 192, 0.5); --secondary: #1E3A5F; --secondary-rgb: 30, 58, 95; --accent: #4A90A4; --accent-rgb: 74, 144, 164; --bg-dark: #0A0E14; --bg-darker: #05080C; --bg-light: #F0F4F8; --bg-card: rgba(192, 192, 192, 0.06); --border-color: rgba(192, 192, 192, 0.15); --border-accent: rgba(192, 192, 192, 0.3); --gradient-primary: linear-gradient(135deg, #C0C0C0 0%, #1E3A5F 100%); --gradient-dark: linear-gradient(135deg, #0A0E14 0%, #1E3A5F 100%); } /* Océano - Azul profundo y turquesa */ [data-palette="oceano"] { --primary: #64B5C6; --primary-rgb: 100, 181, 198; --primary-glow: rgba(100, 181, 198, 0.5); --secondary: #1A4B6E; --secondary-rgb: 26, 75, 110; --accent: #87CEEB; --accent-rgb: 135, 206, 235; --bg-dark: #0A1520; --bg-darker: #050A10; --bg-light: #F0FAFF; --bg-card: rgba(100, 181, 198, 0.08); --border-color: rgba(100, 181, 198, 0.2); --border-accent: rgba(100, 181, 198, 0.4); --gradient-primary: linear-gradient(135deg, #64B5C6 0%, #1A4B6E 100%); --gradient-dark: linear-gradient(135deg, #0A1520 0%, #1A4B6E 100%); } /* Fresco - Celeste y blanco */ [data-palette="fresco"] { --primary: #87CEEB; --primary-rgb: 135, 206, 235; --primary-glow: rgba(135, 206, 235, 0.5); --secondary: #5BA4C9; --secondary-rgb: 91, 164, 201; --accent: #E0F4FF; --accent-rgb: 224, 244, 255; --bg-dark: #0C1A24; --bg-darker: #060D12; --bg-light: #F5FBFF; --bg-card: rgba(135, 206, 235, 0.08); --border-color: rgba(135, 206, 235, 0.2); --border-accent: rgba(135, 206, 235, 0.4); --gradient-primary: linear-gradient(135deg, #87CEEB 0%, #5BA4C9 100%); --gradient-dark: linear-gradient(135deg, #0C1A24 0%, #1A3040 100%); } /* ======================================== PALETAS NATURALES ======================================== */ /* Natural - Verde salvia y beige */ [data-palette="natural"] { --primary: #A8B5A0; --primary-rgb: 168, 181, 160; --primary-glow: rgba(168, 181, 160, 0.5); --secondary: #6B705C; --secondary-rgb: 107, 112, 92; --accent: #D4C5B5; --accent-rgb: 212, 197, 181; --bg-dark: #1A1A18; --bg-darker: #0F0F0D; --bg-light: #F7F5F2; --bg-card: rgba(168, 181, 160, 0.08); --border-color: rgba(168, 181, 160, 0.2); --border-accent: rgba(168, 181, 160, 0.4); --gradient-primary: linear-gradient(135deg, #A8B5A0 0%, #6B705C 100%); --gradient-dark: linear-gradient(135deg, #1A1A18 0%, #2D2D28 100%); } /* Bosque - Verde intenso y musgo */ [data-palette="bosque"] { --primary: #5D8A66; --primary-rgb: 93, 138, 102; --primary-glow: rgba(93, 138, 102, 0.5); --secondary: #2D4A32; --secondary-rgb: 45, 74, 50; --accent: #8FBC8F; --accent-rgb: 143, 188, 143; --bg-dark: #0D150E; --bg-darker: #060A07; --bg-light: #F2F7F3; --bg-card: rgba(93, 138, 102, 0.08); --border-color: rgba(93, 138, 102, 0.2); --border-accent: rgba(93, 138, 102, 0.4); --gradient-primary: linear-gradient(135deg, #5D8A66 0%, #2D4A32 100%); --gradient-dark: linear-gradient(135deg, #0D150E 0%, #1A2A1C 100%); } /* Lavanda - Lila y gris suave */ [data-palette="lavanda"] { --primary: #B8A9C9; --primary-rgb: 184, 169, 201; --primary-glow: rgba(184, 169, 201, 0.5); --secondary: #7B6D8D; --secondary-rgb: 123, 109, 141; --accent: #E6DFF0; --accent-rgb: 230, 223, 240; --bg-dark: #15121A; --bg-darker: #0A090D; --bg-light: #FAF8FC; --bg-card: rgba(184, 169, 201, 0.08); --border-color: rgba(184, 169, 201, 0.2); --border-accent: rgba(184, 169, 201, 0.4); --gradient-primary: linear-gradient(135deg, #B8A9C9 0%, #7B6D8D 100%); --gradient-dark: linear-gradient(135deg, #15121A 0%, #251F2D 100%); } /* ======================================== PALETAS ELEGANTES ======================================== */ /* Clásico - Blanco, negro y dorado */ [data-palette="clasico"] { --primary: #D4AF37; --primary-rgb: 212, 175, 55; --primary-glow: rgba(212, 175, 55, 0.5); --secondary: #1C1C1C; --secondary-rgb: 28, 28, 28; --accent: #F5F5F5; --accent-rgb: 245, 245, 245; --bg-dark: #0A0A0A; --bg-darker: #050505; --bg-light: #FFFFFF; --bg-card: rgba(212, 175, 55, 0.06); --border-color: rgba(212, 175, 55, 0.2); --border-accent: rgba(212, 175, 55, 0.5); --gradient-primary: linear-gradient(135deg, #D4AF37 0%, #FFE55C 50%, #D4AF37 100%); --gradient-dark: linear-gradient(135deg, #0A0A0A 0%, #1C1C1C 100%); } /* Glam - Rosa fucsia y dorado */ [data-palette="glam"] { --primary: #FF69B4; --primary-rgb: 255, 105, 180; --primary-glow: rgba(255, 105, 180, 0.5); --secondary: #FFD700; --secondary-rgb: 255, 215, 0; --accent: #FFC0CB; --accent-rgb: 255, 192, 203; --bg-dark: #1A0A14; --bg-darker: #0D050A; --bg-light: #FFF5F8; --bg-card: rgba(255, 105, 180, 0.08); --border-color: rgba(255, 105, 180, 0.2); --border-accent: rgba(255, 215, 0, 0.4); --gradient-primary: linear-gradient(135deg, #FF69B4 0%, #FFD700 100%); --gradient-dark: linear-gradient(135deg, #1A0A14 0%, #2D1020 100%); } /* Vintage - Burgundy y crema envejecido */ [data-palette="vintage"] { --primary: #8B4557; --primary-rgb: 139, 69, 87; --primary-glow: rgba(139, 69, 87, 0.5); --secondary: #D4B896; --secondary-rgb: 212, 184, 150; --accent: #F5E6D3; --accent-rgb: 245, 230, 211; --bg-dark: #1A1210; --bg-darker: #0D0908; --bg-light: #FAF5EF; --bg-card: rgba(139, 69, 87, 0.08); --border-color: rgba(212, 184, 150, 0.25); --border-accent: rgba(139, 69, 87, 0.4); --gradient-primary: linear-gradient(135deg, #8B4557 0%, #D4B896 100%); --gradient-dark: linear-gradient(135deg, #1A1210 0%, #2D1F1A 100%); } /* ======================================== PALETAS VIBRANTES / FESTIVAS ======================================== */ /* Vibrante - Fucsia y naranja */ [data-palette="vibrante"] { --primary: #FF1493; --primary-rgb: 255, 20, 147; --primary-glow: rgba(255, 20, 147, 0.5); --secondary: #FF6B35; --secondary-rgb: 255, 107, 53; --accent: #FFE66D; --accent-rgb: 255, 230, 109; --bg-dark: #1A0510; --bg-darker: #0D0308; --bg-light: #FFF5F9; --bg-card: rgba(255, 20, 147, 0.08); --border-color: rgba(255, 20, 147, 0.2); --border-accent: rgba(255, 107, 53, 0.4); --gradient-primary: linear-gradient(135deg, #FF1493 0%, #FF6B35 100%); --gradient-dark: linear-gradient(135deg, #1A0510 0%, #2D0A1A 100%); } /* Neón - Colores eléctricos */ [data-palette="neon"] { --primary: #00FFFF; --primary-rgb: 0, 255, 255; --primary-glow: rgba(0, 255, 255, 0.6); --secondary: #FF00FF; --secondary-rgb: 255, 0, 255; --accent: #00FF00; --accent-rgb: 0, 255, 0; --bg-dark: #0A0A1A; --bg-darker: #05050D; --bg-light: #F0F0FF; --bg-card: rgba(0, 255, 255, 0.06); --border-color: rgba(0, 255, 255, 0.3); --border-accent: rgba(255, 0, 255, 0.4); --gradient-primary: linear-gradient(135deg, #00FFFF 0%, #FF00FF 100%); --gradient-dark: linear-gradient(135deg, #0A0A1A 0%, #1A0A2A 100%); } /* Tropical - Verde lima y coral */ [data-palette="tropical"] { --primary: #32CD32; --primary-rgb: 50, 205, 50; --primary-glow: rgba(50, 205, 50, 0.5); --secondary: #FF7F50; --secondary-rgb: 255, 127, 80; --accent: #FFD700; --accent-rgb: 255, 215, 0; --bg-dark: #0A1A0A; --bg-darker: #050D05; --bg-light: #F5FFF5; --bg-card: rgba(50, 205, 50, 0.08); --border-color: rgba(50, 205, 50, 0.2); --border-accent: rgba(255, 127, 80, 0.4); --gradient-primary: linear-gradient(135deg, #32CD32 0%, #FF7F50 100%); --gradient-dark: linear-gradient(135deg, #0A1A0A 0%, #1A2A10 100%); } /* ======================================== PALETAS ESPECIALES ======================================== */ /* Princesa - Rosa y dorado suave (15 años) */ [data-palette="princesa"] { --primary: #FFB6C1; --primary-rgb: 255, 182, 193; --primary-glow: rgba(255, 182, 193, 0.5); --secondary: #DDA0DD; --secondary-rgb: 221, 160, 221; --accent: #FFD700; --accent-rgb: 255, 215, 0; --bg-dark: #1A0F14; --bg-darker: #0D0509; --bg-light: #FFF9FB; --bg-card: rgba(255, 182, 193, 0.1); --border-color: rgba(255, 182, 193, 0.25); --border-accent: rgba(255, 215, 0, 0.4); --gradient-primary: linear-gradient(135deg, #FFB6C1 0%, #DDA0DD 100%); --gradient-dark: linear-gradient(135deg, #1A0F14 0%, #251520 100%); } /* Masculino - Azul oscuro y gris acero (18 hombres) */ [data-palette="masculino"] { --primary: #4682B4; --primary-rgb: 70, 130, 180; --primary-glow: rgba(70, 130, 180, 0.5); --secondary: #2F4F4F; --secondary-rgb: 47, 79, 79; --accent: #708090; --accent-rgb: 112, 128, 144; --bg-dark: #0D1117; --bg-darker: #060A0D; --bg-light: #F4F6F8; --bg-card: rgba(70, 130, 180, 0.08); --border-color: rgba(70, 130, 180, 0.2); --border-accent: rgba(112, 128, 144, 0.4); --gradient-primary: linear-gradient(135deg, #4682B4 0%, #2F4F4F 100%); --gradient-dark: linear-gradient(135deg, #0D1117 0%, #1A2530 100%); } /* Rústico - Marrón y verde oliva */ [data-palette="rustico"] { --primary: #8B7355; --primary-rgb: 139, 115, 85; --primary-glow: rgba(139, 115, 85, 0.5); --secondary: #556B2F; --secondary-rgb: 85, 107, 47; --accent: #DEB887; --accent-rgb: 222, 184, 135; --bg-dark: #1A1610; --bg-darker: #0D0B08; --bg-light: #F9F6F2; --bg-card: rgba(139, 115, 85, 0.08); --border-color: rgba(139, 115, 85, 0.2); --border-accent: rgba(85, 107, 47, 0.4); --gradient-primary: linear-gradient(135deg, #8B7355 0%, #556B2F 100%); --gradient-dark: linear-gradient(135deg, #1A1610 0%, #2A241C 100%); } /* Boho - Terracota y mostaza */ [data-palette="boho"] { --primary: #CD853F; --primary-rgb: 205, 133, 63; --primary-glow: rgba(205, 133, 63, 0.5); --secondary: #DAA520; --secondary-rgb: 218, 165, 32; --accent: #F4A460; --accent-rgb: 244, 164, 96; --bg-dark: #1A140A; --bg-darker: #0D0A05; --bg-light: #FDF8F0; --bg-card: rgba(205, 133, 63, 0.08); --border-color: rgba(205, 133, 63, 0.2); --border-accent: rgba(218, 165, 32, 0.4); --gradient-primary: linear-gradient(135deg, #CD853F 0%, #DAA520 100%); --gradient-dark: linear-gradient(135deg, #1A140A 0%, #2D2010 100%); } /* Playa - Arena y turquesa */ [data-palette="playa"] { --primary: #40E0D0; --primary-rgb: 64, 224, 208; --primary-glow: rgba(64, 224, 208, 0.5); --secondary: #F4A460; --secondary-rgb: 244, 164, 96; --accent: #FFFACD; --accent-rgb: 255, 250, 205; --bg-dark: #0A1A1A; --bg-darker: #050D0D; --bg-light: #F5FFFF; --bg-card: rgba(64, 224, 208, 0.08); --border-color: rgba(64, 224, 208, 0.2); --border-accent: rgba(244, 164, 96, 0.4); --gradient-primary: linear-gradient(135deg, #40E0D0 0%, #F4A460 100%); --gradient-dark: linear-gradient(135deg, #0A1A1A 0%, #1A2A2A 100%); }