/* ============================================
   THEMES.CSS - Sistema de temas claro/oscuro
   Consultora Creativa - consultoracreativa.com
   ============================================ */

/* Variables de tema OSCURO (por defecto) */
:root,
[data-theme="dark"] {
    /* Colores principales */
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-tertiary: #1a1a1a;
    --bg-card: #1f1f1f;
    --bg-card-hover: #2a2a2a;
    
    /* Textos */
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --text-muted: #808080;
    
    /* Acentos - Colores de marca (cyan/turquesa del logo) */
    --accent-primary: #00b4d8;
    --accent-secondary: #0077b6;
    --accent-gradient: linear-gradient(135deg, #00b4d8, #0077b6);
    
    /* Bordes y sombras */
    --border-color: #2a2a2a;
    --border-light: #333333;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-glow: rgba(0, 180, 216, 0.15);
    
    /* Formularios */
    --input-bg: #1a1a1a;
    --input-border: #333333;
    --input-focus: #00b4d8;
    
    /* Botones */
    --btn-primary-bg: var(--accent-gradient);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: #00b4d8;
    
    /* Header */
    --header-bg: rgba(10, 10, 10, 0.95);
    
    /* Footer */
    --footer-bg: #0a0a0a;
}

/* Variables de tema CLARO */
[data-theme="light"] {
    /* Colores principales */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f7;
    --bg-tertiary: #e8e8ed;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f0f5;
    
    /* Textos */
    --text-primary: #1d1d1f;
    --text-secondary: #515154;
    --text-muted: #86868b;
    
    /* Acentos - Se mantienen igual */
    --accent-primary: #0077b6;
    --accent-secondary: #005f8e;
    --accent-gradient: linear-gradient(135deg, #0077b6, #005f8e);
    
    /* Bordes y sombras */
    --border-color: #d2d2d7;
    --border-light: #e5e5ea;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-glow: rgba(0, 119, 182, 0.1);
    
    /* Formularios */
    --input-bg: #ffffff;
    --input-border: #d2d2d7;
    --input-focus: #0077b6;
    
    /* Botones */
    --btn-primary-bg: var(--accent-gradient);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: #0077b6;
    
    /* Header */
    --header-bg: rgba(255, 255, 255, 0.95);
    
    /* Footer */
    --footer-bg: #f5f5f7;
}

/* Transición suave al cambiar de tema */
body,
body * {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Botón de toggle tema */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: background-color 0.2s ease;
}

.theme-toggle:hover {
    background-color: var(--bg-tertiary);
}

.theme-toggle svg {
    width: 24px;
    height: 24px;
}

/* Iconos del tema - mostrar/ocultar según el tema */
[data-theme="dark"] .icon-sun {
    display: block;
}

[data-theme="dark"] .icon-moon {
    display: none;
}

[data-theme="light"] .icon-sun {
    display: none;
}

[data-theme="light"] .icon-moon {
    display: block;
}