/* ============================================
   CAB GLOBAL — Componente: Botón
   --------------------------------------------
   Usa tokens de tokens.css. Clases:
     .btn                 → base
     .btn--primary        → variante verde relleno
     .btn--secondary      → variante oscura → verde en hover
     .btn--ghost          → variante transparente con borde
     .btn--sm / md / lg   → tamaños
     .btn--has-icon       → si lleva icono
   ============================================ */

.btn {
    /* Reset + layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    vertical-align: middle;

    /* Tipografía */
    font-family: var(--btn-font-family);
    font-weight: var(--btn-font-weight);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    /* Forma */
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    cursor: pointer;
    user-select: none;

    /* Animación + hover shine */
    position: relative;
    overflow: hidden;
    transition: var(--btn-transition);
}

/* Efecto brillo (shine) al pasar el ratón */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transition: left 0.5s ease;
    pointer-events: none;
}
.btn:hover::before {
    left: 100%;
}

/* Texto e icono van por encima del shine */
.btn__label,
.btn__icon {
    position: relative;
    z-index: 1;
}

.btn__icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.btn:hover .btn__icon {
    transform: translateX(4px);
}


/* ========================================
   TAMAÑOS
   ======================================== */
.btn--sm {
    padding: var(--btn-padding-sm);
    font-size: var(--btn-text-sm);
}
.btn--md {
    padding: var(--btn-padding-md);
    font-size: var(--btn-text-md);
}
.btn--lg {
    padding: var(--btn-padding-lg);
    font-size: var(--btn-text-lg);
}


/* ========================================
   VARIANTE · PRIMARY (verde relleno)
   ======================================== */
.btn--primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    border-color: var(--btn-primary-bg);
}
.btn--primary:hover,
.btn--primary:focus-visible {
    transform: scale(1.05);
    box-shadow: var(--btn-primary-shadow);
}


/* ========================================
   VARIANTE · SECONDARY (dark → verde hover)
   ======================================== */
.btn--secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-color);
    border-color: var(--btn-secondary-border);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
    background: var(--btn-secondary-bg-hover);
    color: var(--btn-secondary-color-hover);
    border-color: var(--btn-secondary-bg-hover);
    transform: scale(1.05);
    box-shadow: var(--shadow-glow);
}


/* ========================================
   VARIANTE · GHOST (transparente con borde)
   ======================================== */
.btn--ghost {
    background: var(--btn-ghost-bg);
    color: var(--btn-ghost-color);
    border-color: var(--btn-ghost-border);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
    color: var(--btn-ghost-color-hover);
    border-color: var(--btn-ghost-border-hover);
    transform: scale(1.05);
}


/* ========================================
   ESTADO · FOCUS VISIBLE (accesibilidad)
   ======================================== */
.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}


/* ========================================
   ESTADO · DISABLED
   ======================================== */
.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}