/**
 * UNIFIED BUTTON SYSTEM - Bimmer Modular
 * ======================================
 * Sistema único de botones que reemplaza 12+ clases inconsistentes
 * 
 * Uso:
 * <button class="btn btn-primary">Click me</button>
 * <button class="btn btn-secondary btn-lg">Large</button>
 * <button class="btn btn-danger btn-sm">Delete</button>
 */

/* ==================== BASE BUTTON STYLES - MODERN ==================== */
.btn,
.btn-welcome-pill,
.btn-hero,
.btn-nuevo,
.btn-guardar,
.btn-export,
.btn-cliente,
.btn-historial,
.btn-start-app,
.hub-button,
.hub-button-secondary,
.hub-button-tertiary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    
    min-height: var(--btn-height-md);
    padding: var(--btn-padding-md);
    border-radius: var(--radius-lg);
    border: none;
    
    font-family: var(--font-family-ui);
    font-size: inherit;
    font-weight: var(--font-weight-semibold);
    
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    text-align: center;
    
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
    
    line-height: 1.15;
    white-space: normal;
    letter-spacing: 0.3px;
}

/* ==================== BUTTON SIZES ==================== */
.btn-xs {
    min-height: var(--btn-height-xs);
    padding: var(--btn-padding-xs);
    font-size: 0.75rem;
}

.btn-sm {
    min-height: var(--btn-height-sm);
    padding: var(--btn-padding-sm);
    font-size: 0.875rem;
}

.btn-md {
    min-height: var(--btn-height-md);
    padding: var(--btn-padding-md);
    font-size: 0.95rem;
}

.btn-lg {
    min-height: var(--btn-height-lg);
    padding: var(--btn-padding-lg);
    font-size: 1rem;
}

.btn-xl {
    min-height: var(--btn-height-xl);
    padding: var(--btn-padding-xl);
    font-size: 1.1rem;
}

.btn-full { width: 100%; }
.btn-pill { border-radius: var(--radius-full); }

/* ==================== BUTTON VARIANTS - PRIMARY ==================== */
.btn-primary,
.btn-welcome-primary,
.btn-nuevo {
    color: white;
    background: var(--gradient-sunset);
    border: none;
    box-shadow: 0 8px 24px rgba(255, 107, 107, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-primary::before,
.btn-welcome-primary::before,
.btn-nuevo::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-primary:hover:not(:disabled),
.btn-welcome-primary:hover:not(:disabled),
.btn-nuevo:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255, 107, 107, 0.4);
}

.btn-primary:hover:not(:disabled)::before,
.btn-welcome-primary:hover:not(:disabled)::before,
.btn-nuevo:hover:not(:disabled)::before {
    left: 100%;
}
.btn:not(:disabled) {
    cursor: pointer;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn:active:not(:disabled) {
    transform: scale(0.98);
}
.btn-primary:active:not(:disabled),
.btn-welcome-primary:active:not(:disabled),
.btn-nuevo:active:not(:disabled) {
    transform: translateY(0);
}

/* ==================== BUTTON VARIANTS - SECONDARY ==================== */
.btn-secondary,
.btn-welcome-secondary,
.btn-guardar {
    color: var(--color-ink);
    background: var(--color-surface-alt);
    border: 1.5px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

.btn-secondary:hover:not(:disabled),
.btn-welcome-secondary:hover:not(:disabled),
.btn-guardar:hover:not(:disabled) {
    background: white;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.btn-secondary:active:not(:disabled),
.btn-welcome-secondary:active:not(:disabled),
.btn-guardar:active:not(:disabled) {
    transform: translateY(0);
}

/* ==================== BUTTON VARIANTS - SUCCESS ==================== */
.btn-success,
.btn-export {
    color: white;
    background: linear-gradient(135deg, #00D084 0%, #00B871 100%);
    border: none;
    box-shadow: 0 8px 24px rgba(0, 208, 132, 0.3);
}

.btn-success:hover:not(:disabled),
.btn-export:hover:not(:disabled) {
    background: linear-gradient(135deg, #00E096 0%, #00C880 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 208, 132, 0.4);
}

.btn-success:active:not(:disabled),
.btn-export:active:not(:disabled) {
    transform: translateY(0);
}

/* ==================== BUTTON VARIANTS - DANGER ==================== */
.btn-danger {
    color: white;
    background: linear-gradient(135deg, #FF4757 0%, #FF3838 100%);
    border: none;
    box-shadow: 0 8px 24px rgba(255, 71, 87, 0.3);
}

.btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #FF6B7A 0%, #FF5555 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255, 71, 87, 0.4);
}

.btn-danger:active:not(:disabled) {
    transform: translateY(0);
}

/* ==================== BUTTON VARIANTS - INFO ==================== */
.btn-info,
.btn-cliente {
    color: white;
    background: linear-gradient(135deg, #00BCD4 0%, #0097A7 100%);
    border: none;
    box-shadow: 0 8px 24px rgba(0, 188, 212, 0.3);
}

.btn-info:hover:not(:disabled),
.btn-cliente:hover:not(:disabled) {
    background: linear-gradient(135deg, #26C6DA 0%, #00ACC1 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 188, 212, 0.4);
}

.btn-info:active:not(:disabled),
.btn-cliente:active:not(:disabled) {
    transform: translateY(0);
}

/* ==================== BUTTON VARIANTS - GHOST ==================== */
.btn-ghost {
    color: var(--color-ink);
    background: transparent;
    border: 1.5px solid var(--color-border);
    box-shadow: none;
    transition: var(--transition-base);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--color-surface);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-primary);
}

.btn-ghost:active:not(:disabled) {
    transform: translateY(0);
}

/* ==================== BUTTON VARIANTS - GRADIENT ==================== */
.btn-gradient,
.btn-welcome-ai,
.btn-start-app,
.hub-button {
    color: white;
    background: var(--gradient-cool);
    border: none;
    box-shadow: 0 12px 32px rgba(0, 188, 212, 0.3);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.5px;
    position: relative;
}

.btn-gradient::after,
.btn-welcome-ai::after,
.btn-start-app::after,
.hub-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease-out;
}

.btn-gradient:hover:not(:disabled),
.btn-welcome-ai:hover:not(:disabled),
.btn-start-app:hover:not(:disabled),
.hub-button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 188, 212, 0.4);
}

.btn-gradient:hover:not(:disabled)::after,
.btn-welcome-ai:hover:not(:disabled)::after,
.btn-start-app:hover:not(:disabled)::after,
.hub-button:hover:not(:disabled)::after {
    left: 100%;
}

.btn-gradient:active:not(:disabled),
.btn-welcome-ai:active:not(:disabled),
.btn-start-app:active:not(:disabled),
.hub-button:active:not(:disabled) {
    transform: translateY(-1px);
}

/* ==================== BUTTON STATE - DISABLED ==================== */
.btn:disabled,
.btn-welcome-pill:disabled,
.btn-hero:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==================== BUTTON STATE - FOCUS (ACCESSIBILITY) ==================== */
.btn:focus-visible,
.btn-welcome-pill:focus-visible,
.btn-hero:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-success:focus-visible,
.btn-info:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: 2px;
}

/* ==================== BUTTON GROUP ==================== */
.btn-group {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ==================== ICON BUTTONS ==================== */
.btn-icon,
.btn-details-sm,
.btn-details-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-height-sm);
    height: var(--btn-height-sm);
    padding: 0;
    border-radius: 50%;
    font-size: 1rem;
}

.btn-icon-sm {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
}

.btn-icon-lg {
    width: 36px;
    height: 36px;
}

/* ==================== DARK MODE OVERRIDES ==================== */
body.dark-mode .btn-secondary,
body.dark-mode .btn-ghost {
    color: var(--color-dark-ink);
    background: var(--color-dark-surface);
    border-color: var(--color-dark-border);
}

body.dark-mode .btn-secondary:hover:not(:disabled),
body.dark-mode .btn-ghost:hover:not(:disabled) {
    background: var(--color-dark-border);
    border-color: var(--color-dark-ink);
}

body.dark-mode .btn-details-inline {
    color: var(--color-primary-light);
}

body.dark-mode .btn-details-inline:hover {
    color: var(--color-primary);
}

/* ==================== LEGACY COMPATIBILITY ALIASES ==================== */
/* Mapeo de clases antiguas a nuevas para backward compatibility */
.btn-cliente { --btn-color: #3b82f6; }
.btn-historial { 
    color: white;
    background: #8b5cf6;
    border-color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.btn-historial:hover:not(:disabled) {
    background: #7c3aed;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(139, 92, 246, 0.4);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 640px) {
    .btn {
        width: 100%;
        padding: var(--btn-padding-md);
    }
    
    .btn-group {
        flex-direction: column;
    }
    
    .btn-group-vertical .btn {
        width: 100%;
    }
}