/* ========================================
   TEMAS DE COLOR - PORTAFOLIO MARK ORSINI
   Autor: Mark Orsini Carrillo
   Descripción: Sistema de temas personalizables
   ======================================== */

/* ============ TEMA OSCURO (Predeterminado) ============ */
.theme-dark {
    --color-primario: #6366f1;
    --color-secundario: #ec4899;
    --color-fondo: #0f172a;
    --color-superficie: #1e293b;
    --color-texto: #f1f5f9;
    --color-texto-secundario: #94a3b8;
    --color-border: rgba(255, 255, 255, 0.1);
}

/* ============ TEMA CLARO ============ */
.theme-light {
    --color-primario: #4f46e5;
    --color-secundario: #db2777;
    --color-fondo: #f8fafc;
    --color-superficie: #ffffff;
    --color-texto: #0f172a;
    --color-texto-secundario: #475569;
    --color-border: rgba(0, 0, 0, 0.1);
}

/* ============ TEMA AZUL OSCURO ============ */
.theme-dark-blue {
    --color-primario: #3b82f6;
    --color-secundario: #06b6d4;
    --color-fondo: #0c1e4a;
    --color-superficie: #1e3a8a;
    --color-texto: #dbeafe;
    --color-texto-secundario: #93c5fd;
    --color-border: rgba(147, 197, 253, 0.2);
}

/* ============ TEMA AZUL ============ */
.theme-blue {
    --color-primario: #2563eb;
    --color-secundario: #0ea5e9;
    --color-fondo: #eff6ff;
    --color-superficie: #dbeafe;
    --color-texto: #1e3a8a;
    --color-texto-secundario: #3b82f6;
    --color-border: rgba(37, 99, 235, 0.2);
}

/* ============ TEMA ROJO ============ */
.theme-red {
    --color-primario: #ef4444;
    --color-secundario: #f97316;
    --color-fondo: #fef2f2;
    --color-superficie: #fee2e2;
    --color-texto: #7f1d1d;
    --color-texto-secundario: #dc2626;
    --color-border: rgba(239, 68, 68, 0.2);
}

/* ============ TEMA ROJO OSCURO ============ */
.theme-dark-red {
    --color-primario: #dc2626;
    --color-secundario: #f87171;
    --color-fondo: #450a0a;
    --color-superficie: #7f1d1d;
    --color-texto: #fee2e2;
    --color-texto-secundario: #fca5a5;
    --color-border: rgba(252, 165, 165, 0.2);
}

/* ============ TEMA DORADO ============ */
.theme-gold {
    --color-primario: #f59e0b;
    --color-secundario: #eab308;
    --color-fondo: #fffbeb;
    --color-superficie: #fef3c7;
    --color-texto: #78350f;
    --color-texto-secundario: #d97706;
    --color-border: rgba(245, 158, 11, 0.2);
}

/* ============ TEMA VERDE ============ */
.theme-green {
    --color-primario: #10b981;
    --color-secundario: #14b8a6;
    --color-fondo: #ecfdf5;
    --color-superficie: #d1fae5;
    --color-texto: #064e3b;
    --color-texto-secundario: #059669;
    --color-border: rgba(16, 185, 129, 0.2);
}

/* ============ TEMA VERDE OSCURO ============ */
.theme-dark-green {
    --color-primario: #22c55e;
    --color-secundario: #10b981;
    --color-fondo: #022c22;
    --color-superficie: #064e3b;
    --color-texto: #d1fae5;
    --color-texto-secundario: #86efac;
    --color-border: rgba(134, 239, 172, 0.2);
}

/* ============ TEMA CELESTE ============ */
.theme-sky-blue {
    --color-primario: #0ea5e9;
    --color-secundario: #06b6d4;
    --color-fondo: #f0f9ff;
    --color-superficie: #e0f2fe;
    --color-texto: #0c4a6e;
    --color-texto-secundario: #0284c7;
    --color-border: rgba(14, 165, 233, 0.2);
}

/* ============ TEMA PÚRPURA ============ */
.theme-purple {
    --color-primario: #a855f7;
    --color-secundario: #d946ef;
    --color-fondo: #faf5ff;
    --color-superficie: #f3e8ff;
    --color-texto: #581c87;
    --color-texto-secundario: #9333ea;
    --color-border: rgba(168, 85, 247, 0.2);
}

/* ============ TEMA PÚRPURA OSCURO ============ */
.theme-dark-purple {
    --color-primario: #a855f7;
    --color-secundario: #c084fc;
    --color-fondo: #3b0764;
    --color-superficie: #581c87;
    --color-texto: #f3e8ff;
    --color-texto-secundario: #d8b4fe;
    --color-border: rgba(216, 180, 254, 0.2);
}

/* ============ TRANSICIONES DE TEMA ============ */
body,
.barra-lateral,
.contenido-principal,
.seccion-hero,
.seccion-contenido,
.tarjeta-servicio,
.tarjeta-cliente,
.habilidades-categoria,
.timeline-contenido,
.info-contacto,
.formulario-contacto,
.footer,
.tema-card,
.idioma-card,
.opcion-item {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============ EFECTOS ESPECIALES POR TEMA ============ */

/* Efecto de gradiente animado para tema oscuro */
.theme-dark .hero-nombre::after,
.theme-dark-blue .hero-nombre::after,
.theme-dark-red .hero-nombre::after,
.theme-dark-green .hero-nombre::after,
.theme-dark-purple .hero-nombre::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Sombras más suaves para temas claros */
.theme-light .tarjeta-servicio:hover,
.theme-blue .tarjeta-servicio:hover,
.theme-red .tarjeta-servicio:hover,
.theme-gold .tarjeta-servicio:hover,
.theme-green .tarjeta-servicio:hover,
.theme-sky-blue .tarjeta-servicio:hover,
.theme-purple .tarjeta-servicio:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Ajuste de opacidad de overlays según tema */
.theme-light .overlay-fondo,
.theme-blue .overlay-fondo,
.theme-red .overlay-fondo,
.theme-gold .overlay-fondo,
.theme-green .overlay-fondo,
.theme-sky-blue .overlay-fondo,
.theme-purple .overlay-fondo {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Ajuste de contraste para formularios en temas claros */
.theme-light .form-control,
.theme-blue .form-control,
.theme-red .form-control,
.theme-gold .form-control,
.theme-green .form-control,
.theme-sky-blue .form-control,
.theme-purple .form-control {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
}

.theme-light .form-control:focus,
.theme-blue .form-control:focus,
.theme-red .form-control:focus,
.theme-gold .form-control:focus,
.theme-green .form-control:focus,
.theme-sky-blue .form-control:focus,
.theme-purple .form-control:focus {
    background-color: rgba(0, 0, 0, 0.08);
}

/* Ajuste de scrollbar por tema */
.theme-light::-webkit-scrollbar-track,
.theme-blue::-webkit-scrollbar-track,
.theme-red::-webkit-scrollbar-track,
.theme-gold::-webkit-scrollbar-track,
.theme-green::-webkit-scrollbar-track,
.theme-sky-blue::-webkit-scrollbar-track,
.theme-purple::-webkit-scrollbar-track {
    background: var(--color-superficie);
}

/* ============ PERSONALIZACIÓN DE PARTÍCULAS POR TEMA ============ */
.theme-dark-blue .seccion-hero::before {
    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
}

.theme-dark-blue .seccion-hero::after {
    background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
}

.theme-red .seccion-hero::before,
.theme-dark-red .seccion-hero::before {
    background: radial-gradient(circle, #ef4444 0%, transparent 70%);
}

.theme-red .seccion-hero::after,
.theme-dark-red .seccion-hero::after {
    background: radial-gradient(circle, #f97316 0%, transparent 70%);
}

.theme-gold .seccion-hero::before {
    background: radial-gradient(circle, #f59e0b 0%, transparent 70%);
}

.theme-gold .seccion-hero::after {
    background: radial-gradient(circle, #eab308 0%, transparent 70%);
}

.theme-green .seccion-hero::before,
.theme-dark-green .seccion-hero::before {
    background: radial-gradient(circle, #10b981 0%, transparent 70%);
}

.theme-green .seccion-hero::after,
.theme-dark-green .seccion-hero::after {
    background: radial-gradient(circle, #14b8a6 0%, transparent 70%);
}

.theme-purple .seccion-hero::before,
.theme-dark-purple .seccion-hero::before {
    background: radial-gradient(circle, #a855f7 0%, transparent 70%);
}

.theme-purple .seccion-hero::after,
.theme-dark-purple .seccion-hero::after {
    background: radial-gradient(circle, #d946ef 0%, transparent 70%);
}

/* ============ MODO DE ALTO CONTRASTE ============ */
@media (prefers-contrast: high) {
    :root {
        --color-border: rgba(255, 255, 255, 0.3);
    }
    
    .theme-light {
        --color-border: rgba(0, 0, 0, 0.3);
    }
    
    .nav-item,
    .tarjeta-servicio,
    .tarjeta-cliente,
    .tema-card,
    .idioma-card {
        border-width: 3px;
    }
}

/* ============ PREFERENCIA DE ESQUEMA DE COLOR ============ */
@media (prefers-color-scheme: dark) {
    /* Si el usuario prefiere modo oscuro y no ha seleccionado tema, usar oscuro */
    body:not([class*="theme-"]) {
        --color-primario: #6366f1;
        --color-secundario: #ec4899;
        --color-fondo: #0f172a;
        --color-superficie: #1e293b;
        --color-texto: #f1f5f9;
        --color-texto-secundario: #94a3b8;
    }
}

@media (prefers-color-scheme: light) {
    /* Si el usuario prefiere modo claro y no ha seleccionado tema, usar claro */
    body:not([class*="theme-"]) {
        --color-primario: #4f46e5;
        --color-secundario: #db2777;
        --color-fondo: #f8fafc;
        --color-superficie: #ffffff;
        --color-texto: #0f172a;
        --color-texto-secundario: #475569;
    }
}

/* ============ EFECTOS GLASSMORPHISM POR TEMA ============ */
.theme-dark .barra-lateral,
.theme-dark-blue .barra-lateral,
.theme-dark-red .barra-lateral,
.theme-dark-green .barra-lateral,
.theme-dark-purple .barra-lateral {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
}

.theme-light .barra-lateral,
.theme-blue .barra-lateral,
.theme-red .barra-lateral,
.theme-gold .barra-lateral,
.theme-green .barra-lateral,
.theme-sky-blue .barra-lateral,
.theme-purple .barra-lateral {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* ============ ANIMACIONES DE CAMBIO DE TEMA ============ */
@keyframes themeTransition {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.2);
    }
    100% {
        filter: brightness(1);
    }
}

body.changing-theme {
    animation: themeTransition 0.5s ease;
}

/* ============ ACCESIBILIDAD - REDUCCIÓN DE MOVIMIENTO ============ */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}