/* * ======================================================= * LIBRERÍA DE TEMAS PUNKU - NEUROMARKETING GASTRONÓMICO * ======================================================= * NOTA: El tema por defecto (Rosa/Turquesa) reside en style.css. * Estos temas sobreescriben los colores solo si la etiqueta * tiene el atributo data-theme asignado. */ /* 1. TEMA ACTUAL: FOOD OPTIMIZADO (Coral y Menta) */ [data-theme="food-optimizado"] { --color-primary: #FF6F61; --color-primary-dark: #E55A4D; --color-secondary: #0D9488; /* Equivalente visual a teal-600 */ --color-secondary-dark: #0F766E; --color-bg-light: #F0FDFA; /* Fondo fresco menta */ } /* 2. PIZZERÍA: HORNO A LEÑA (Rústico) */ [data-theme="horno-lena"] { --color-primary: #D32F2F; /* Rojo tomate */ --color-primary-dark: #B71C1C; --color-secondary: #2E7D32; /* Verde albahaca */ --color-secondary-dark: #1B5E20; --color-bg-light: #FEFAEE; /* Crema masa */ } /* 3. PIZZERÍA: URBANA (Dark Mode) */ [data-theme="pizza-urbana"] { --color-primary: #FBC02D; /* Amarillo queso */ --color-primary-dark: #F57F17; --color-secondary: #F57C00; /* Naranja fuego */ --color-secondary-dark: #E65100; --color-bg-light: #1C1C1C; /* Gris carbón */ --color-text-primary: #F5F5F5; /* Texto claro para fondo oscuro */ } /* 4. CHIFA: DRAGÓN IMPERIAL (Tradicional) */ [data-theme="dragon-imperial"] { --color-primary: #C62828; /* Rojo carmesí suerte */ --color-primary-dark: #8E0000; --color-secondary: #F9A825; /* Oro / Mostaza */ --color-secondary-dark: #F57F17; --color-bg-light: #FFF8F0; /* Blanco marfil */ } /* 5. CHIFA: FUSIÓN WOK (Moderno Dark) */ [data-theme="fusion-wok"] { --color-primary: #E65100; /* Naranja wok */ --color-primary-dark: #BF360C; --color-secondary: #43A047; /* Verde bambú */ --color-secondary-dark: #2E7D32; --color-bg-light: #121212; /* Negro asfalto */ --color-text-primary: #EEEEEE; } /* 6. HEALTHY & GREEN (Orgánico / Juguerías) */ [data-theme="healthy-green"] { --color-primary: #558B2F; /* Verde palta */ --color-primary-dark: #33691E; --color-secondary: #8D6E63; /* Tostado / Nuez */ --color-secondary-dark: #5D4037; --color-bg-light: #F1F8E9; } /* 7. GOURMET ELEGANCE (Pastelería / Parrillas Premium) */ [data-theme="gourmet-elegance"] { --color-primary: #212121; /* Negro ónice */ --color-primary-dark: #000000; --color-secondary: #BCAAA4; /* Oro rosa / Cobre */ --color-secondary-dark: #8D6E63; --color-bg-light: #FAFAFA; } /* 8. PASSION FRESA (Fresa & Crema / Pastelerías y Postres) */ [data-theme="passion-fresa"] { --color-primary: #E11D48; /* Rojo Fresa intenso */ --color-primary-dark: #BE123C; --color-secondary: #DB2777; /* Fucsia / Rosa Frambuesa */ --color-secondary-dark: #9D174D; --color-bg-light: #FFF1F2; /* Fondo rosa pastel muy suave */ } /* 10. Excepción: Botones de cerrar (X) sobre fondos blancos/translúcidos */ [data-theme="pizza-urbana"] #closeModernProductBtn, [data-theme="fusion-wok"] #closeModernProductBtn, [data-theme="pizza-urbana"] #closeProductBtn, [data-theme="fusion-wok"] #closeProductBtn, [data-theme="pizza-urbana"] #closeCartBtn, [data-theme="fusion-wok"] #closeCartBtn, [data-theme="pizza-urbana"] #closeLoginBtn, [data-theme="fusion-wok"] #closeLoginBtn { color: #333333 !important; } /* ======================================================= CORRECCIONES VISUALES PARA DARK MODE (Pizza Urbana & Fusión Wok) Transforma clases estáticas claras de Tailwind a oscuras ======================================================= */ /* 1. Cabecera Principal (Header) - Sincronizado con el color del pie de página */ [data-theme="pizza-urbana"] .sticky-header, [data-theme="fusion-wok"] .sticky-header { background: #242424 !important; border-bottom-color: #333 !important; } /* 2. Barra flotante de categorías (Sobrescribe el bg-[#F0FDFA] quemado) */ [data-theme="pizza-urbana"] .\bg-\[\#F0FDFA\], [data-theme="fusion-wok"] .\bg-\[\#F0FDFA\] { background-color: #1A1A1A !important; border-bottom-color: #333 !important; } /* 3. Fondos blancos estáticos (Tarjetas, Botones de Categorías, Footer) */ [data-theme="pizza-urbana"] .bg-white, [data-theme="fusion-wok"] .bg-white { background-color: #242424 !important; border-color: #333 !important; } /* 4. Fondos gris claro (Iconos de pago, Redes sociales, Buscador modal) */ [data-theme="pizza-urbana"] .bg-gray-50, [data-theme="fusion-wok"] .bg-gray-50 { background-color: #2A2A2A !important; border-color: #444 !important; color: #E0E0E0 !important; } /* 5. Textos grises que se pierden en fondo oscuro */ [data-theme="pizza-urbana"] .text-gray-700, [data-theme="fusion-wok"] .text-gray-700, [data-theme="pizza-urbana"] .text-gray-600, [data-theme="fusion-wok"] .text-gray-600, [data-theme="pizza-urbana"] .text-gray-500, [data-theme="fusion-wok"] .text-gray-500, [data-theme="pizza-urbana"] .text-slate-500, [data-theme="fusion-wok"] .text-slate-500, [data-theme="pizza-urbana"] .text-slate-400, [data-theme="fusion-wok"] .text-slate-400 { color: #B3B3B3 !important; } /* 6. Títulos principales oscuros pasarlos a claros */ [data-theme="pizza-urbana"] .text-slate-800, [data-theme="fusion-wok"] .text-slate-800, [data-theme="pizza-urbana"] .text-gray-900, [data-theme="fusion-wok"] .text-gray-900, [data-theme="pizza-urbana"] .text-gray-800, [data-theme="fusion-wok"] .text-gray-800, [data-theme="pizza-urbana"] h1, [data-theme="pizza-urbana"] h2, [data-theme="pizza-urbana"] h3, [data-theme="fusion-wok"] h1, [data-theme="fusion-wok"] h2, [data-theme="fusion-wok"] h3 { color: var(--color-text-primary) !important; } /* 7. Bordes claros pasarlos a oscuros */ [data-theme="pizza-urbana"] .border-gray-200, [data-theme="fusion-wok"] .border-gray-200, [data-theme="pizza-urbana"] .border-gray-100, [data-theme="fusion-wok"] .border-gray-100 { border-color: #333 !important; } /* 8. Inputs y Buscador Inteligente */ [data-theme="pizza-urbana"] input, [data-theme="fusion-wok"] input { background-color: #2A2A2A !important; color: #FFF !important; border-color: #444 !important; } [data-theme="pizza-urbana"] input::placeholder, [data-theme="fusion-wok"] input::placeholder { color: #888 !important; } /* 9. Modificadores sutiles para fondos de imagen rotos o vacíos */ [data-theme="pizza-urbana"] .bg-rose-50, [data-theme="fusion-wok"] .bg-rose-50 { background-color: #202020 !important; } /* ======================================================= CORRECCIÓN DEFINITIVA DE FONDO PARA LA BARRA FLOTANTE ======================================================= */ /* 1. Temas Claros */ [data-theme="passion-fresa"] .max-w-7xl.mx-auto.px-4.sm\:px-8.mt-4.sticky, [data-theme="food-optimizado"] .max-w-7xl.mx-auto.px-4.sm\:px-8.mt-4.sticky, [data-theme="horno-lena"] .max-w-7xl.mx-auto.px-4.sm\:px-8.mt-4.sticky, [data-theme="dragon-imperial"] .max-w-7xl.mx-auto.px-4.sm\:px-8.mt-4.sticky, [data-theme="healthy-green"] .max-w-7xl.mx-auto.px-4.sm\:px-8.mt-4.sticky, [data-theme="gourmet-elegance"] .max-w-7xl.mx-auto.px-4.sm\:px-8.mt-4.sticky { background-color: var(--color-bg-light) !important; } /* 2. Temas Oscuros (Dark Mode) */ [data-theme="pizza-urbana"] .max-w-7xl.mx-auto.px-4.sm\:px-8.mt-4.sticky, [data-theme="fusion-wok"] .max-w-7xl.mx-auto.px-4.sm\:px-8.mt-4.sticky { background-color: var(--color-bg-light) !important; } /* ======================================================= EXCEPCIÓN PARA EL GLOBO DE WHATSAPP (Mantiene legibilidad en Dark Mode) ======================================================= */ [data-theme="pizza-urbana"] .globo-whatsapp-texto, [data-theme="fusion-wok"] .globo-whatsapp-texto { color: #1f2937 !important; /* Gris muy oscuro, casi negro */ } [data-theme="pizza-urbana"] .globo-whatsapp-tiempo, [data-theme="fusion-wok"] .globo-whatsapp-tiempo { color: #9ca3af !important; /* Gris claro original */ }