/* =========================================
   BUTTON SYSTEM — STREAMING UI
   Sistema global táctil moderno
   ========================================= */

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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:12px 18px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    border:none;
    cursor:pointer;
    font-family:inherit;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .2s ease;
}

/* ===== HOVER TACTIL ===== */

.btn:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* ===== ACTIVE PRESS ===== */

.btn:active{
    transform:translateY(1px);
    box-shadow:0 2px 8px rgba(0,0,0,.4);
}

/* ===== FOCUS ACCESSIBILITY ===== */

.btn:focus-visible{
    outline:2px solid #f59e0b;
    outline-offset:2px;
}

/* ===== DISABLED ===== */

.btn:disabled{
    opacity:.5;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

/* =========================================
   GOLD — BRANDING
   ========================================= */

.btn-gold{
    background:#f59e0b;
    color:#000;
}

.btn-gold:hover{
    background:#d97706;
}

/* =========================================
   GREEN — ACCION
   ========================================= */

.btn-green{
    background:#22c55e;
    color:white;
}

.btn-green:hover{
    background:#16a34a;
}

/* =========================================
   DARK — SECUNDARIO
   ========================================= */

.btn-dark{
    background:#111827;
    border:1px solid #1a2030;
    color:#cbd5e1;
}

.btn-dark:hover{
    background:#1a2030;
    color:white;
}

/* =========================================
   DANGER — ALERTA
   ========================================= */

.btn-danger{
    background:#ef4444;
    color:white;
}

.btn-danger:hover{
    background:#dc2626;
}

/* =========================================
   BLUE — SISTEMA
   ========================================= */

.btn-blue{
    background:#3b82f6;
    color:white;
}

.btn-blue:hover{
    background:#2563eb;
}

/* =========================================
   PREMIUM — FUTURO MEMBERSHIP
   ========================================= */

.btn-premium{
    background:#7c3aed;
    color:white;
}

.btn-premium:hover{
    background:#6d28d9;
}

/* =========================================
   DISABLED LINK STATE — STREAMING
   Para <a> que actúan como botón
   ========================================= */

.btn-disabled{
    opacity:.45;
    cursor:default;
    pointer-events:none;
    transform:none !important;
    box-shadow:none !important;
    filter:grayscale(.3);
}

/* =========================================
   SIZE SYSTEM
   ========================================= */

.btn-lg{
    padding:16px 26px;
    font-size:16px;
}

.btn-sm{
    padding:8px 14px;
    font-size:13px;
}

/* =========================================
   MOBILE OPTIMIZATION
   ========================================= */

@media (max-width:768px){

    .btn{
        padding:10px 14px;
        font-size:14px;
    }

}