/**
 * Componentes Refactorizados - Variavista Theme
 * 
 * Botones, Header, Formularios y componentes principales
 * utilizando variables CSS dinámicas con fallback.
 * 
 * @package Variavista
 * @version 3.0.0
 * @since 4.5.0
 */

/**
 * ============================================================================
 * 1. SISTEMA DE BOTONES REFACTORIZADO
 * ============================================================================
 */

/* Base para todos los botones */
.btn,
.wp-block-button__link,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs, var(--fallback-space-xs));
    
    /* Espaciado */
    padding: var(--button-padding-y) var(--button-padding-x);
    
    /* Tipografía */
    font-family: var(--font-primary, var(--fallback-font-primary));
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    line-height: 1.5;
    text-decoration: none !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    
    /* Apariencia */
    border: var(--border-width-thin, var(--fallback-border-width-thin)) solid transparent;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    user-select: none;
    transition: all var(--button-transition);
    
    /* Estados */
    &:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md, var(--fallback-shadow-md));
    }
    
    &:active {
        transform: translateY(0);
        box-shadow: var(--shadow-sm, var(--fallback-shadow-sm));
    }
    
    &:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(var(--color-primary-base, var(--fallback-primary)), 0.3);
    }
    
    &:disabled,
    &.disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }
    
    /* Icono */
    .btn-icon {
        width: 1em;
        height: 1em;
        fill: currentColor;
    }
}

/* Variantes de botón */
.btn-primary {
    background-color: var(--color-primary-base, var(--fallback-primary));
    color: var(--color-primary-text, var(--fallback-white));
    border-color: var(--color-primary-base, var(--fallback-primary));
    
    &:hover {
        background-color: var(--color-primary-hover, var(--fallback-primary));
        border-color: var(--color-primary-hover, var(--fallback-primary));
        color: var(--color-primary-text-hover, var(--fallback-white));
    }
    
    &:active {
        background-color: var(--color-primary-active, var(--fallback-primary));
        border-color: var(--color-primary-active, var(--fallback-primary));
    }
}

.btn-secondary {
    background-color: var(--color-secondary-base, var(--fallback-secondary));
    color: var(--color-secondary-text, var(--fallback-white));
    border-color: var(--color-secondary-base, var(--fallback-secondary));
    
    &:hover {
        background-color: var(--color-secondary-hover, var(--fallback-secondary));
        border-color: var(--color-secondary-hover, var(--fallback-secondary));
        color: var(--color-secondary-text-hover, var(--fallback-white));
    }
}

.btn-accent {
    background-color: var(--color-accent-base, var(--fallback-accent));
    color: var(--color-accent-text, var(--fallback-white));
    border-color: var(--color-accent-base, var(--fallback-accent));
    
    &:hover {
        background-color: var(--color-accent-hover, var(--fallback-accent));
        border-color: var(--color-accent-hover, var(--fallback-accent));
        color: var(--color-accent-text-hover, var(--fallback-white));
    }
}

/* Botón outline */
.btn-outline-primary {
    background-color: transparent;
    color: var(--color-primary-base, var(--fallback-primary));
    border-color: var(--color-primary-base, var(--fallback-primary));
    
    &:hover {
        background-color: var(--color-primary-base, var(--fallback-primary));
        color: var(--color-primary-text, var(--fallback-white));
    }
}

.btn-outline-secondary {
    background-color: transparent;
    color: var(--color-secondary-base, var(--fallback-secondary));
    border-color: var(--color-secondary-base, var(--fallback-secondary));
    
    &:hover {
        background-color: var(--color-secondary-base, var(--fallback-secondary));
        color: var(--color-secondary-text, var(--fallback-white));
    }
}

/* Botón ghost */
.btn-ghost {
    background-color: transparent;
    color: var(--color-primary-base, var(--fallback-primary));
    border-color: transparent;
    
    &:hover {
        background-color: rgba(var(--color-primary-base, var(--fallback-primary)), 0.1);
        color: var(--color-primary-hover, var(--fallback-primary));
    }
}

/* Tamaños de botón */
.btn-sm {
    --button-padding-y: var(--space-xs, var(--fallback-space-xs));
    --button-padding-x: var(--space-sm, var(--fallback-space-sm));
    --button-font-size: var(--text-sm, 0.75rem);
}

.btn-lg {
    --button-padding-y: var(--space-md, var(--fallback-space-md));
    --button-padding-x: var(--space-lg, var(--fallback-space-lg));
    --button-font-size: var(--text-lg, 1.125rem);
}

.btn-xl {
    --button-padding-y: var(--space-lg, var(--fallback-space-lg));
    --button-padding-x: var(--space-xl, var(--fallback-space-xl));
    --button-font-size: var(--text-xl, 1.25rem);
}

/* Botón con icono */
.btn-icon-left .btn-icon {
    margin-right: var(--space-xs, var(--fallback-space-xs));
}

.btn-icon-right .btn-icon {
    margin-left: var(--space-xs, var(--fallback-space-xs));
}

.btn-icon-only {
    padding: var(--button-padding-y);
    width: auto;
    min-width: auto;
    
    .btn-icon {
        margin: 0;
    }
}

/* Grupo de botones */
.btn-group {
    display: inline-flex;
    gap: 0;
    
    .btn {
        border-radius: 0;
        
        &:first-child {
            border-top-left-radius: var(--button-border-radius);
            border-bottom-left-radius: var(--button-border-radius);
        }
        
        &:last-child {
            border-top-right-radius: var(--button-border-radius);
            border-bottom-right-radius: var(--button-border-radius);
        }
        
        &:not(:last-child) {
            border-right: none;
        }
    }
}

/**
 * ============================================================================
 * 2. SISTEMA DE HEADER REFACTORIZADO
 * ============================================================================
 */

.site-header {
    /* Layout */
    position: relative;
    width: 100%;
    
    /* Colores */
    background-color: var(--color-primary-base, var(--fallback-primary));
    color: var(--color-primary-text, var(--fallback-white));
    
    /* Transición */
    transition: all var(--transition-base, var(--fallback-transition-base));
    
    /* Modificadores */
    &.header-transparent {
        background-color: transparent;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--z-fixed, var(--fallback-z-fixed));
    }
    
    &.header-sticky {
        position: sticky;
        top: 0;
        z-index: var(--z-fixed, var(--fallback-z-fixed));
        box-shadow: var(--shadow-md, var(--fallback-shadow-md));
    }
}

/* Contenedor del header */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md, var(--fallback-space-md));
    padding: var(--space-md, var(--fallback-space-md)) var(--space-lg, var(--fallback-space-lg));
    max-width: 1200px;
    margin: 0 auto;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm, var(--fallback-space-sm));
    text-decoration: none;
    color: inherit;
    
    &:hover {
        opacity: 0.9;
    }
}

.site-logo-image {
    max-height: 40px;
    width: auto;
}

.site-logo-text {
    font-size: var(--text-xl, 1.25rem);
    font-weight: 700;
    line-height: 1.2;
}

.site-tagline {
    font-size: var(--text-sm, 0.875rem);
    opacity: 0.8;
}

/* Navegación */
.site-navigation {
    display: flex;
    align-items: center;
    gap: var(--space-md, var(--fallback-space-md));
}

/* Menú principal */
.primary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-md, var(--fallback-space-md));
    
    /* Items */
    .menu-item {
        position: relative;
    }
    
    /* Links */
    .menu-link {
        display: flex;
        align-items: center;
        gap: var(--space-xs, var(--fallback-space-xs));
        padding: var(--space-sm, var(--fallback-space-sm)) var(--space-md, var(--fallback-space-md));
        color: inherit;
        text-decoration: none;
        font-weight: 500;
        border-radius: var(--border-radius-md, var(--fallback-border-radius-md));
        transition: all var(--transition-fast, var(--fallback-transition-fast));
        
        &:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        &:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
        }
        
        /* Icono */
        .menu-icon {
            width: 1em;
            height: 1em;
            fill: currentColor;
        }
    }
    
    /* Dropdown */
    .menu-item-has-children {
        .sub-menu {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 200px;
            background: var(--color-primary-base, var(--fallback-primary));
            border-radius: var(--border-radius-md, var(--fallback-border-radius-md));
            box-shadow: var(--shadow-lg, var(--fallback-shadow-lg));
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all var(--transition-base, var(--fallback-transition-base));
            z-index: var(--z-dropdown, var(--fallback-z-dropdown));
            
            .menu-item {
                width: 100%;
            }
            
            .menu-link {
                padding: var(--space-sm, var(--fallback-space-sm)) var(--space-md, var(--fallback-space-md));
                border-radius: 0;
                
                &:first-child {
                    border-top-left-radius: var(--border-radius-md, var(--fallback-border-radius-md));
                    border-top-right-radius: var(--border-radius-md, var(--fallback-border-radius-md));
                }
                
                &:last-child {
                    border-bottom-left-radius: var(--border-radius-md, var(--fallback-border-radius-md));
                    border-bottom-right-radius: var(--border-radius-md, var(--fallback-border-radius-md));
                }
            }
        }
        
        &:hover > .sub-menu,
        &.focus > .sub-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    }
}

/* Acciones del header */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm, var(--fallback-space-sm));
}

/* Botón de menú móvil */
.mobile-menu-toggle {
    display: none; /* Oculto en desktop */
    background: none;
    border: none;
    color: inherit;
    padding: var(--space-sm, var(--fallback-space-sm));
    cursor: pointer;
    
    .hamburger-icon {
        display: block;
        width: 24px;
        height: 2px;
        background: currentColor;
        position: relative;
        transition: all var(--transition-fast, var(--fallback-transition-fast));
        
        &::before,
        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: currentColor;
            transition: all var(--transition-fast, var(--fallback-transition-fast));
        }
        
        &::before {
            top: -8px;
        }
        
        &::after {
            top: 8px;
        }
    }
    
    &.active .hamburger-icon {
        background: transparent;
        
        &::before {
            top: 0;
            transform: rotate(45deg);
        }
        
        &::after {
            top: 0;
            transform: rotate(-45deg);
        }
    }
}

/**
 * ============================================================================
 * 3. SISTEMA DE FORMULARIOS REFACTORIZADO
 * ============================================================================
 */

/* Base para formularios */
.form-group {
    margin-bottom: var(--space-md, var(--fallback-space-md));
}

.form-label {
    display: block;
    margin-bottom: var(--space-xs, var(--fallback-space-xs));
    font-weight: 500;
    color: var(--color-neutral-base, var(--fallback-neutral));
}

/* Inputs base - Solo aplicar en frontend, no en wp-admin */
body:not(.wp-admin) .form-control,
body:not(.wp-admin) input[type="text"]:not(.components-text-control__input),
body:not(.wp-admin) input[type="email"],
body:not(.wp-admin) input[type="password"],
body:not(.wp-admin) input[type="number"],
body:not(.wp-admin) input[type="tel"],
body:not(.wp-admin) input[type="url"],
body:not(.wp-admin) input[type="search"],
body:not(.wp-admin) textarea:not(.components-textarea-control__input),
body:not(.wp-admin) select:not([id^="bulk-action"]):not(.attachment-filters) {
    /* Layout */
    display: block;
    width: 100%;
    
    /* Espaciado */
    padding: var(--input-padding-y) var(--input-padding-x);
    
    /* Tipografía */
    font-family: var(--font-primary, var(--fallback-font-primary));
    font-size: var(--input-font-size);
    line-height: 1.5;
    
    /* Apariencia */
    background-color: var(--fallback-white);
    border: var(--input-border-width) solid var(--color-neutral-tone-300, var(--fallback-gray-300));
    border-radius: var(--input-border-radius);
    color: var(--color-neutral-tone-800, var(--fallback-gray-800));
    transition: all var(--input-transition);
    
    /* Placeholder */
    &::placeholder {
        color: var(--color-neutral-tone-400, var(--fallback-gray-400));
        opacity: 1;
    }
    
    /* Estados */
    &:hover {
        border-color: var(--color-neutral-tone-500, var(--fallback-gray-500));
    }
    
    &:focus {
        outline: none;
        border-color: var(--color-primary-base, var(--fallback-primary));
        box-shadow: 0 0 0 3px rgba(var(--color-primary-base, var(--fallback-primary)), 0.1);
    }
    
    &:disabled,
    &[readonly] {
        background-color: var(--color-neutral-tone-100, var(--fallback-gray-100));
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    /* Validación */
    &.is-valid {
        border-color: var(--color-success-base, var(--fallback-success));
        
        &:focus {
            box-shadow: 0 0 0 3px rgba(var(--color-success-base, var(--fallback-success)), 0.1);
        }
    }
    
    &.is-invalid {
        border-color: var(--color-error-base, var(--fallback-error));
        
        &:focus {
            box-shadow: 0 0 0 3px rgba(var(--color-error-base, var(--fallback-error)), 0.1);
        }
    }
}

/* Textarea - Solo frontend */
body:not(.wp-admin) textarea {
    resize: vertical;
    min-height: 100px;
}

/* Select - Solo frontend */
body:not(.wp-admin) select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    appearance: none;
}

/* Checkbox y Radio */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-sm, var(--fallback-space-sm));
    margin-bottom: var(--space-sm, var(--fallback-space-sm));
}

.form-check-input {
    width: 1em;
    height: 1em;
    margin: 0;
    cursor: pointer;
    
    &[type="checkbox"] {
        border-radius: var(--border-radius-sm, var(--fallback-border-radius-sm));
    }
    
    &[type="radio"] {
        border-radius: 50%;
    }
}

.form-check-label {
    margin: 0;
    cursor: pointer;
    user-select: none;
}

/* Grupo de input con botón */
.input-group {
    display: flex;
    align-items: stretch;
    
    .form-control {
        flex: 1;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: none;
    }
}

/* Feedback de validación */
.form-feedback {
    display: block;
    margin-top: var(--space-xs, var(--fallback-space-xs));
    font-size: var(--text-sm, 0.875rem);
    
    &.feedback-valid {
        color: var(--color-success-base, var(--fallback-success));
    }
    
    &.feedback-invalid {
        color: var(--color-error-base, var(--fallback-error));
    }
}

/**
 * ============================================================================
 * 4. COMPONENTES ADICIONALES
 * ============================================================================
 */

/* Alertas */
.alert {
    padding: var(--space-md, var(--fallback-space-md));
    margin-bottom: var(--space-md, var(--fallback-space-md));
    border: var(--border-width-thin, var(--fallback-border-width-thin)) solid transparent;
    border-radius: var(--border-radius-md, var(--fallback-border-radius-md));
    
    &.alert-success {
        background-color: var(--color-success-tone-100, #d4edda);
        border-color: var(--color-success-tone-200, #c3e6cb);
        color: var(--color-success-tone-800, #155724);
    }
    
    &.alert-warning {
        background-color: var(--color-warning-tone-100, #fff3cd);
        border-color: var(--color-warning-tone-200, #ffeaa7);
        color: var(--color-warning-tone-800, #856404);
    }
    
    &.alert-error {
        background-color: var(--color-error-tone-100, #f8d7da);
        border-color: var(--color-error-tone-200, #f5c6cb);
        color: var(--color-error-tone-800, #721c24);
    }
    
    &.alert-info {
        background-color: var(--color-info-tone-100, #d1ecf1);
        border-color: var(--color-info-tone-200, #bee5eb);
        color: var(--color-info-tone-800, #0c5460);
    }
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs, var(--fallback-space-xs)) var(--space-sm, var(--fallback-space-sm));
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    line-height: 1;
    border-radius: var(--border-radius-full, var(--fallback-border-radius-full));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    
    &.badge-primary {
        background-color: var(--color-primary-base, var(--fallback-primary));
        color: var(--color-primary-text, var(--fallback-white));
    }
    
    &.badge-secondary {
        background-color: var(--color-secondary-base, var(--fallback-secondary));
        color: var(--color-secondary-text, var(--fallback-white));
    }
    
    &.badge-accent {
        background-color: var(--color-accent-base, var(--fallback-accent));
        color: var(--color-accent-text, var(--fallback-white));
    }
}

/* Tarjetas */
.card {
    background: var(--fallback-white);
    border: var(--border-width-thin, var(--fallback-border-width-thin)) solid var(--color-neutral-tone-200, var(--fallback-gray-200));
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: all var(--transition-base, var(--fallback-transition-base));
    
    &:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-2px);
    }
}

.card-body {
    padding: var(--card-padding);
}

.card-header {
    padding: var(--card-padding);
    background-color: var(--color-neutral-tone-50, var(--fallback-gray-50));
    border-bottom: var(--border-width-thin, var(--fallback-border-width-thin)) solid var(--color-neutral-tone-200, var(--fallback-gray-200));
}

.card-footer {
    padding: var(--card-padding);
    background-color: var(--color-neutral-tone-50, var(--fallback-gray-50));
    border-top: var(--border-width-thin, var(--fallback-border-width-thin)) solid var(--color-neutral-tone-200, var(--fallback-gray-200));
}

/* Spinner/Loading */
.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Utilidades de display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; }

/* Utilidades de 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-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }

/* Utilidades de espaciado */
.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }
.p-0 { padding: 0 !important; }

/* Width utilities */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* Position utilities */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
/* Fix for WordPress Admin Media Library Toolbar */
.media-toolbar select,
.media-toolbar input,
.media-toolbar .button,
.media-toolbar .media-button {
    display: inline-block !important;
    width: auto !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
}

.media-toolbar .media-button-select {
    float: none !important;
}