/* ============================================
   SISTEMA DE TEMAS - INKABOX EXPRESS
   Colores sólidos, sin gradientes
   ============================================ */

/* TEMA NORMAL (Por defecto - Colores del Logo) */
:root[data-theme="normal"],
:root {
    /* Colores Principales */
    --color-primary: #f39200;
    --color-primary-dark: #d98200;
    --color-primary-light: #ffa726;
    
    --color-secondary: #325aa6;
    --color-secondary-dark: #284a8c;
    --color-secondary-light: #4a6fb8;
    
    --color-accent: #f39200;
    --color-accent-dark: #d98200;
    --color-accent-light: #ffa726;
    
    /* Colores de Texto */
    --text-dark: #1a202c;
    --text-medium: #4a5568;
    --text-light: #718096;
    --text-white: #ffffff;
    
    /* Fondos */
    --bg-white: #ffffff;
    --bg-light: #f7fafc;
    --bg-gray: #edf2f7;
    --bg-dark: #2d3748;
    
    /* Estados */
    --success: #48bb78;
    --warning: #ed8936;
    --error: #f56565;
    --info: #4299e1;
    
    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    /* Bordes */
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    
    /* Transiciones */
    --transition: all 0.3s ease;
}

/* TEMA OSCURO (Dark Mode) */
:root[data-theme="dark"] {
    --color-primary: #FF8C5F;
    --color-primary-dark: #FF6B35;
    --color-primary-light: #FFA07A;
    
    --color-secondary: #1A659E;
    --color-secondary-dark: #004E89;
    --color-secondary-light: #3A7CA5;
    
    --color-accent: #FFB84D;
    --color-accent-dark: #FFA630;
    --color-accent-light: #FFC870;
    
    --text-dark: #f7fafc;
    --text-medium: #cbd5e0;
    --text-light: #a0aec0;
    --text-white: #1a202c;
    
    --bg-white: #1a202c;
    --bg-light: #2d3748;
    --bg-gray: #4a5568;
    --bg-dark: #f7fafc;
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4);
}

/* TEMA AZUL (Blue Theme) */
:root[data-theme="blue"] {
    --color-primary: #004E89;
    --color-primary-dark: #003D6B;
    --color-primary-light: #1A659E;
    
    --color-secondary: #3A7CA5;
    --color-secondary-dark: #1A659E;
    --color-secondary-light: #5A9BC5;
    
    --color-accent: #00A8E8;
    --color-accent-dark: #0088C0;
    --color-accent-light: #33B9ED;
    
    --text-dark: #1a202c;
    --text-medium: #4a5568;
    --text-light: #718096;
    --text-white: #ffffff;
    
    --bg-white: #ffffff;
    --bg-light: #f0f8ff;
    --bg-gray: #e6f2ff;
    --bg-dark: #2d3748;
}

/* TEMA NARANJA (Orange Theme) */
:root[data-theme="orange"] {
    --color-primary: #FFA630;
    --color-primary-dark: #E69420;
    --color-primary-light: #FFB84D;
    
    --color-secondary: #FF6B35;
    --color-secondary-dark: #E55A2B;
    --color-secondary-light: #FF8C5F;
    
    --color-accent: #FFD23F;
    --color-accent-dark: #E6BD2F;
    --color-accent-light: #FFE066;
    
    --text-dark: #1a202c;
    --text-medium: #4a5568;
    --text-light: #718096;
    --text-white: #ffffff;
    
    --bg-white: #ffffff;
    --bg-light: #fffaf0;
    --bg-gray: #fff5e6;
    --bg-dark: #2d3748;
}

/* TEMA VERDE (Green Theme) */
:root[data-theme="green"] {
    --color-primary: #48bb78;
    --color-primary-dark: #38a169;
    --color-primary-light: #68d391;
    
    --color-secondary: #2f855a;
    --color-secondary-dark: #276749;
    --color-secondary-light: #48bb78;
    
    --color-accent: #9ae6b4;
    --color-accent-dark: #68d391;
    --color-accent-light: #c6f6d5;
    
    --text-dark: #1a202c;
    --text-medium: #4a5568;
    --text-light: #718096;
    --text-white: #ffffff;
    
    --bg-white: #ffffff;
    --bg-light: #f0fff4;
    --bg-gray: #e6ffed;
    --bg-dark: #2d3748;
}

/* ============================================
   APLICACIÓN DE COLORES SÓLIDOS
   ============================================ */

/* Títulos principales - azul */
h1, h2,
.section-title, 
.slide-title,
.pricing-hero h2,
.faq .section-title {
    color: var(--color-secondary) !important;
}

/* Subtítulos - naranja */
.section-subtitle,
.slide-subtitle,
.calculator-subtitle,
.pricing-tagline {
    color: var(--color-primary) !important;
}

/* Otros títulos */
h3, h4, h5, h6,
.testimonial h4,
.step-content h3 {
    color: var(--color-secondary) !important;
}

/* Iconos de servicios - naranja */
.service-icon {
    background-color: var(--color-primary) !important;
    background-image: none !important;
}

/* Iconos de pasos "Cómo Funciona" - azul sólido */
.step-icon {
    background-color: var(--color-secondary) !important;
    background-image: none !important;
}

/* Otros iconos */
.benefit-icon,
.faq-number {
    background-color: var(--color-primary) !important;
    background-image: none !important;
}

/* Número de paso - naranja con degradado de texto */
.step-number {
    background: transparent !important;
    background-image: none !important;
    color: var(--color-primary) !important;
    -webkit-text-fill-color: var(--color-primary) !important;
}

/* Iconos dentro de círculos - blancos */
.service-icon i,
.step-icon i,
.benefit-icon i,
.step-icon-wrapper i {
    color: var(--text-white) !important;
}

/* Iconos sueltos - naranja */
.service-card i:not(.service-icon i),
.step-card i:not(.step-icon i),
i.fas:not(.service-icon i):not(.step-icon i):not(.benefit-icon i), 
i.far:not(.service-icon i):not(.step-icon i):not(.benefit-icon i), 
i.fab:not(.service-icon i):not(.step-icon i):not(.benefit-icon i) {
    color: var(--color-primary) !important;
}

/* Botones */
.btn-primary {
    background-color: var(--color-primary) !important;
    background-image: none !important;
    color: var(--text-white);
    border: none;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark) !important;
    box-shadow: 0 10px 20px rgba(255, 107, 53, 0.3);
}

.btn-secondary {
    background-color: var(--color-secondary) !important;
    background-image: none !important;
    color: var(--text-white);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-dark) !important;
}

.btn-outline {
    background: transparent !important;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary) !important;
    color: var(--text-white);
}

/* Slides del Hero - COLORES SÓLIDOS */
.slide:nth-child(1) .slide-bg {
    background: var(--color-primary) !important;
    background-image: none !important;
}

.slide:nth-child(2) .slide-bg {
    background: var(--color-secondary) !important;
    background-image: none !important;
}

.slide:nth-child(3) .slide-bg {
    background: var(--color-accent) !important;
    background-image: none !important;
}

/* Iconos de Servicios */
.service-icon {
    background-color: var(--color-primary) !important;
    background-image: none !important;
    color: var(--text-white);
}

.service-card:hover {
    border-top-color: var(--color-primary);
}

/* Steps - regla eliminada, ya está definida arriba */

/* FAQ Numbers */
.faq-number {
    background-color: var(--color-primary) !important;
    background-image: none !important;
    color: var(--text-white);
}

/* Links */
a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-dark);
}

/* Top Banner */
.top-ad-banner {
    background-color: var(--color-secondary);
    color: var(--text-white);
}

.ad-cta {
    background-color: var(--color-primary);
    color: var(--text-white);
}

.ad-cta:hover {
    background-color: var(--color-primary-dark);
}

/* Navbar - COMENTADO para usar estilos originales limpios
.navbar {
    background-color: var(--color-secondary);
    box-shadow: var(--shadow-md);
}
*/

/* Botones del Navbar - COMENTADO para usar estilos originales limpios
.btn-login {
    color: var(--color-primary);
    border: 2px solid var(--color-secondary);
}

.btn-login:hover {
    background-color: var(--color-secondary);
    color: var(--text-white);
}

.btn-register {
    background-color: var(--color-secondary);
    color: var(--text-white);
}

.btn-register:hover {
    background-color: var(--color-secondary);
}
*/

/* Pricing Badge */
.pricing-badge {
    background-color: var(--color-accent);
    color: var(--text-dark);
}

/* Benefit Icons */
.benefit-icon {
    background-color: var(--text-white);
    color: var(--text-white);
}

/* Store Logos Hover */
.store-logo:hover {
    background-color: var(--color-primary) !important;
    background-image: none !important;
}

/* Tracking Form */
.tracking-form .btn-primary {
    background-color: var(--color-primary);
}

/* Calculator Button */
.calculator-form .btn-primary {
    background-color: var(--color-primary);
}

/* ============================================
   TRANSICIÓN SUAVE ENTRE TEMAS
   ============================================ */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}

/* Excepciones (no animar) */
.slide-bg,
.carousel-track,
img {
    transition: none;
}


/* Sección de Carrusel - Fondo azul con texto blanco */
.stores-carousel-section {
    background-color: var(--color-secondary) !important;
}

.stores-carousel-section .section-title,
.stores-carousel-section .section-subtitle {
    color: var(--text-white) !important;
}