/*
 * Professional Theme - Main Styles
 * Estilos principales del tema con colores dinámicos
 */

/* ==========================================================================
   VARIABLES CSS DINÁMICAS (se inyectan desde el panel de admin)
   ========================================================================== */

/* 
 * NOTA: Las variables CSS dinámicas se inyectan automáticamente via wp_head
 * desde el panel de administración. No hardcodeamos valores aquí.
 * 
 * Variables disponibles dinámicamente:
 * --professional-primary
 * --professional-secondary  
 * --professional-success
 * --professional-warning
 * --professional-light
 * --professional-dark
 */

:root {
    /* Variables de tipografía */
    --font-primary: 'Montserrat', 'Open Sans', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;
    
    /* Variables de espaciado */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 3rem;
    
    /* Variables de sombras */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    
    /* Variables de transiciones */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ==========================================================================
   TIPOGRAFÍA
   ========================================================================== */

body {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1.2;
}

.font-primary { font-family: var(--font-primary) !important; }
.font-secondary { font-family: var(--font-secondary) !important; }

/* ==========================================================================
   COLORES DINÁMICOS
   ========================================================================== */

.text-professional-primary { color: var(--professional-primary) !important; }
.text-professional-secondary { color: var(--professional-secondary) !important; }
.text-professional-success { color: var(--professional-success) !important; }
.text-professional-warning { color: var(--professional-warning) !important; }
.text-professional-light { color: var(--professional-light) !important; }
.text-professional-dark { color: var(--professional-dark) !important; }

.bg-professional-primary { background-color: var(--professional-primary) !important; }
.bg-professional-secondary { background-color: var(--professional-secondary) !important; }
.bg-professional-success { background-color: var(--professional-success) !important; }
.bg-professional-warning { background-color: var(--professional-warning) !important; }
.bg-professional-light { background-color: var(--professional-light) !important; }
.bg-professional-dark { background-color: var(--professional-dark) !important; }

/* ==========================================================================
   UTILIDADES DE ESPACIADO
   ========================================================================== */

/* Padding */
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }

/* Margin */
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }

/* ==========================================================================
   UTILIDADES DE SOMBRAS
   ========================================================================== */

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* ==========================================================================
   UTILIDADES DE TRANSICIONES
   ========================================================================== */

.transition-fast { transition: all var(--transition-fast) !important; }
.transition-normal { transition: all var(--transition-normal) !important; }
.transition-slow { transition: all var(--transition-slow) !important; }

/* ==========================================================================
   UTILIDADES DE DISPLAY
   ========================================================================== */

.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }

/* Flexbox */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }

.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }
.align-stretch { align-items: stretch !important; }

/* ==========================================================================
   UTILIDADES DE POSICIONAMIENTO
   ========================================================================== */

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* ==========================================================================
   UTILIDADES DE BORDES
   ========================================================================== */

.rounded { border-radius: 0.375rem !important; }
.rounded-sm { border-radius: 0.125rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-xl { border-radius: 1rem !important; }
.rounded-full { border-radius: 50% !important; }

/* ==========================================================================
   UTILIDADES DE ANCHO Y ALTO
   ========================================================================== */

.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }

/* ==========================================================================
   UTILIDADES DE TEXTO
   ========================================================================== */

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.font-weight-light { font-weight: 300 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-medium { font-weight: 500 !important; }
.font-weight-semibold { font-weight: 600 !important; }
.font-weight-bold { font-weight: 700 !important; }

/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */

@media (max-width: 576px) {
    .text-sm-center { text-align: center !important; }
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
}

@media (max-width: 768px) {
    .text-md-center { text-align: center !important; }
    /* d-md-none se muestra en móvil (oculto en desktop), NO ocultarlo aquí */
    /* .d-md-none { display: none !important; } */
    .d-md-block { display: block !important; }
}

/* d-md-none: mostrar en móvil, ocultar en desktop */
@media (min-width: 768px) {
    .d-md-none { display: none !important; }
}

@media (max-width: 992px) {
    .text-lg-center { text-align: center !important; }
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
}