/* ============================================================================
   THE WIN CAPITAL S.A. - buttons.css
   Sistema completo de botones
   ============================================================================ */

/* =======================================================================
   BOTON BASE
   ======================================================================= */

.twc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--twc-space-2);
    padding: 14px 28px;
    font-family: var(--twc-font-primary);
    font-size: var(--twc-text-sm);
    font-weight: var(--twc-font-semibold);
    line-height: 1;
    letter-spacing: var(--twc-tracking-wide);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--twc-radius-lg);
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    isolation: isolate;
    transition: all var(--twc-duration-300) var(--twc-ease-default);
}

.twc-btn:focus-visible {
    outline: 2px solid var(--twc-primary);
    outline-offset: 3px;
}

.twc-btn:active {
    transform: scale(0.97);
}

/* Efecto shimmer sutil al hover */
.twc-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.15) 50%,
        transparent 100%
    );
    z-index: -1;
    transition: left var(--twc-duration-500) var(--twc-ease-default);
}

.twc-btn:hover::before {
    left: 100%;
}


/* =======================================================================
   VARIANTES DE COLOR
   ======================================================================= */

/* -- Dorado (CTA principal) -- */
.twc-btn--gold {
    background: var(--twc-grad-gold);
    color: var(--twc-gray-900);
    box-shadow: var(--twc-shadow-gold);
}

.twc-btn--gold:hover {
    color: var(--twc-gray-900);
    box-shadow: 0 12px 32px -4px rgba(var(--twc-primary-rgb), 0.5);
    transform: translateY(-2px);
}

/* -- Negro -- */
.twc-btn--dark {
    background: var(--twc-gray-900);
    color: var(--twc-gray-0);
    box-shadow: var(--twc-shadow-dark);
}

.twc-btn--dark:hover {
    background: var(--twc-gray-800);
    color: var(--twc-gray-0);
    box-shadow: 0 12px 32px -4px rgba(var(--twc-dark-rgb), 0.5);
    transform: translateY(-2px);
}

/* -- Blanco -- */
.twc-btn--white {
    background: var(--twc-gray-0);
    color: var(--twc-gray-900);
    box-shadow: var(--twc-shadow-md);
}

.twc-btn--white:hover {
    color: var(--twc-gray-900);
    box-shadow: var(--twc-shadow-xl);
    transform: translateY(-2px);
}

/* -- Verde (Exoneracion / Exito) -- */
.twc-btn--green {
    background: var(--twc-grad-green);
    color: var(--twc-gray-0);
    box-shadow: var(--twc-shadow-green);
}

.twc-btn--green:hover {
    color: var(--twc-gray-0);
    box-shadow: 0 12px 32px -4px rgba(var(--twc-success-rgb), 0.5);
    transform: translateY(-2px);
}

/* -- Purpura (VIP) -- */
.twc-btn--purple {
    background: var(--twc-grad-purple);
    color: var(--twc-gray-0);
    box-shadow: var(--twc-shadow-purple);
}

.twc-btn--purple:hover {
    color: var(--twc-gray-0);
    box-shadow: 0 12px 32px -4px rgba(var(--twc-vip-rgb), 0.5);
    transform: translateY(-2px);
}


/* =======================================================================
   VARIANTES OUTLINE
   ======================================================================= */

.twc-btn--outline-gold {
    background: transparent;
    color: var(--twc-primary);
    border-color: var(--twc-primary);
}

.twc-btn--outline-gold:hover {
    background: var(--twc-primary);
    color: var(--twc-gray-900);
    box-shadow: var(--twc-shadow-gold);
    transform: translateY(-2px);
}

.twc-btn--outline-white {
    background: transparent;
    color: var(--twc-gray-0);
    border-color: rgba(255,255,255,0.3);
}

.twc-btn--outline-white:hover {
    background: var(--twc-gray-0);
    color: var(--twc-gray-900);
    border-color: var(--twc-gray-0);
    box-shadow: var(--twc-shadow-md);
    transform: translateY(-2px);
}

.twc-btn--outline-dark {
    background: transparent;
    color: var(--twc-gray-900);
    border-color: var(--twc-gray-300);
}

.twc-btn--outline-dark:hover {
    background: var(--twc-gray-900);
    color: var(--twc-gray-0);
    border-color: var(--twc-gray-900);
    transform: translateY(-2px);
}


/* =======================================================================
   VARIANTE GHOST (Sin borde ni fondo)
   ======================================================================= */

.twc-btn--ghost {
    background: transparent;
    color: var(--twc-primary);
    padding: 14px 20px;
    box-shadow: none;
}

.twc-btn--ghost:hover {
    background: rgba(var(--twc-primary-rgb), 0.08);
    color: var(--twc-primary-hover);
    transform: none;
}

.twc-btn--ghost::before {
    display: none;
}

.twc-btn--ghost-white {
    background: transparent;
    color: var(--twc-gray-0);
}

.twc-btn--ghost-white:hover {
    background: rgba(255,255,255,0.1);
    color: var(--twc-gray-0);
}


/* =======================================================================
   TAMANOS
   ======================================================================= */

.twc-btn--xs {
    padding: 8px 16px;
    font-size: var(--twc-text-xs);
    border-radius: var(--twc-radius-md);
    gap: var(--twc-space-1);
}

.twc-btn--sm {
    padding: 10px 20px;
    font-size: var(--twc-text-xs);
    border-radius: var(--twc-radius-md);
}

.twc-btn--lg {
    padding: 18px 36px;
    font-size: var(--twc-text-base);
    border-radius: var(--twc-radius-xl);
}

.twc-btn--xl {
    padding: 22px 44px;
    font-size: var(--twc-text-md);
    border-radius: var(--twc-radius-xl);
    letter-spacing: var(--twc-tracking-wider);
}

.twc-btn--block {
    display: flex;
    width: 100%;
}


/* =======================================================================
   FORMA PILL
   ======================================================================= */

.twc-btn--pill {
    border-radius: var(--twc-radius-full);
}


/* =======================================================================
   ICON BUTTON
   ======================================================================= */

.twc-btn--icon {
    padding: 12px;
    gap: 0;
}

.twc-btn--icon.twc-btn--sm {
    padding: 8px;
}

.twc-btn--icon.twc-btn--lg {
    padding: 16px;
}

.twc-btn__icon {
    font-size: 1.1em;
    line-height: 1;
    display: inline-flex;
}

/* Flecha que se mueve al hover */
.twc-btn__arrow {
    display: inline-flex;
    transition: transform var(--twc-transition-fast);
}

.twc-btn:hover .twc-btn__arrow {
    transform: translateX(4px);
}


/* =======================================================================
   ESTADOS
   ======================================================================= */

.twc-btn:disabled,
.twc-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.twc-btn.is-loading {
    color: transparent;
    pointer-events: none;
}

.twc-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: twcSpin 0.6s linear infinite;
    color: var(--twc-gray-0);
}

.twc-btn--gold.is-loading::after,
.twc-btn--white.is-loading::after {
    color: var(--twc-gray-900);
    border-color: rgba(0,0,0,0.15);
    border-top-color: var(--twc-gray-900);
}


/* =======================================================================
   GRUPO DE BOTONES
   ======================================================================= */

.twc-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--twc-space-4);
    align-items: center;
}

.twc-btn-group--center {
    justify-content: center;
}

.twc-btn-group--sm-stack {
    flex-direction: row;
}

@media (max-width: 575.98px) {
    .twc-btn-group--sm-stack {
        flex-direction: column;
    }

    .twc-btn-group--sm-stack .twc-btn {
        width: 100%;
    }
}


/* =======================================================================
   WHATSAPP BOTON ESPECIAL
   ======================================================================= */

.twc-btn--whatsapp {
    background: #25d366;
    color: var(--twc-gray-0);
    box-shadow: 0 8px 24px -4px rgba(37, 211, 102, 0.35);
}

.twc-btn--whatsapp:hover {
    background: #20bd5a;
    color: var(--twc-gray-0);
    box-shadow: 0 12px 32px -4px rgba(37, 211, 102, 0.5);
    transform: translateY(-2px);
}