/*
|--------------------------------------------------------------------------
| Matec Component: Button
|--------------------------------------------------------------------------
| Sistema base de botones Matec.
|
| Objetivo:
| - Evitar contaminación visual de Hello Elementor / Elementor / Woo.
| - Centralizar variantes reutilizables.
| - Mantener accesibilidad con focus-visible.
| - Usar Design Tokens como source of truth.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Base
|--------------------------------------------------------------------------
*/

.mtc-btn,
.mtc-button {
    --mtc-btn-height: var(--mtc-size-button-height, 48px);
    --mtc-btn-padding-x: var(--mtc-space-lg, 24px);
    --mtc-btn-gap: var(--mtc-space-xs, 8px);

    --mtc-btn-bg: var(--mtc-color-button-primary-bg, var(--mtc-color-primary));
    --mtc-btn-bg-hover: var(--mtc-color-button-primary-bg-hover, var(--mtc-color-primary-hover));
    --mtc-btn-text: var(--mtc-color-button-primary-text, var(--mtc-color-text-inverse));
    --mtc-btn-border: transparent;
    --mtc-btn-border-hover: transparent;
    --mtc-btn-shadow: none;
    --mtc-btn-shadow-hover: var(--mtc-shadow-buy, var(--mtc-shadow-brand, none));

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mtc-btn-gap);

    width: auto;
    min-width: 0;
    min-height: var(--mtc-btn-height);
    padding-block: 0;
    padding-inline: var(--mtc-btn-padding-x);

    border: 1px solid var(--mtc-btn-border);
    border-radius: var(--mtc-radius-pill, 999px);

    appearance: none;
    -webkit-appearance: none;

    background: var(--mtc-btn-bg);
    color: var(--mtc-btn-text);

    font-family: var(--mtc-font-family-base, inherit);
    font-size: var(--mtc-font-size-sm, 14px);
    font-weight: var(--mtc-font-weight-bold, 700);
    line-height: var(--mtc-line-height-none, 1);
    letter-spacing: var(--mtc-letter-spacing-normal, 0);

    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;

    box-shadow: var(--mtc-btn-shadow);
    cursor: pointer;
    user-select: none;

    transition:
        background-color var(--mtc-transition-fast, 0.15s ease),
        border-color var(--mtc-transition-fast, 0.15s ease),
        color var(--mtc-transition-fast, 0.15s ease),
        box-shadow var(--mtc-transition-fast, 0.15s ease),
        transform var(--mtc-transition-fast, 0.15s ease),
        opacity var(--mtc-transition-fast, 0.15s ease);
}

/*
|--------------------------------------------------------------------------
| Hardening contra themes
|--------------------------------------------------------------------------
*/

button.mtc-btn,
button.mtc-button,
a.mtc-btn,
a.mtc-button,
input[type="button"].mtc-btn,
input[type="button"].mtc-button,
input[type="submit"].mtc-btn,
input[type="submit"].mtc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-height: var(--mtc-btn-height);

    padding-block: 0;
    padding-inline: var(--mtc-btn-padding-x);

    border: 1px solid var(--mtc-btn-border);
    border-radius: var(--mtc-radius-pill, 999px);

    background: var(--mtc-btn-bg);
    color: var(--mtc-btn-text);

    font: inherit;
    font-family: var(--mtc-font-family-base, inherit);
    font-size: var(--mtc-font-size-sm, 14px);
    font-weight: var(--mtc-font-weight-bold, 700);
    line-height: var(--mtc-line-height-none, 1);

    text-decoration: none;
    text-transform: none;

    box-shadow: var(--mtc-btn-shadow);
    outline: none;
}

a.mtc-btn,
a.mtc-button {
    color: var(--mtc-btn-text);
    text-decoration: none;
}

/*
|--------------------------------------------------------------------------
| States
|--------------------------------------------------------------------------
*/

.mtc-btn:hover,
.mtc-button:hover,
button.mtc-btn:hover,
button.mtc-button:hover,
a.mtc-btn:hover,
a.mtc-button:hover,
input[type="button"].mtc-btn:hover,
input[type="submit"].mtc-btn:hover {
    border-color: var(--mtc-btn-border-hover);
    background: var(--mtc-btn-bg-hover);
    color: var(--mtc-btn-text);
    text-decoration: none;
    box-shadow: var(--mtc-btn-shadow-hover);
    transform: translateY(-1px);
}

.mtc-btn:active,
.mtc-button:active,
button.mtc-btn:active,
button.mtc-button:active,
a.mtc-btn:active,
a.mtc-button:active,
input[type="button"].mtc-btn:active,
input[type="submit"].mtc-btn:active {
    transform: translateY(0);
    box-shadow: var(--mtc-btn-shadow);
}

.mtc-btn:focus,
.mtc-button:focus,
button.mtc-btn:focus,
button.mtc-button:focus,
a.mtc-btn:focus,
a.mtc-button:focus {
    outline: none;
}

.mtc-btn:focus-visible,
.mtc-button:focus-visible,
button.mtc-btn:focus-visible,
button.mtc-button:focus-visible,
a.mtc-btn:focus-visible,
a.mtc-button:focus-visible {
    outline: 2px solid var(--mtc-color-focus, currentColor);
    outline-offset: 3px;
    box-shadow:
        0 0 0 4px var(--mtc-color-focus-soft, transparent),
        var(--mtc-btn-shadow-hover);
}

.mtc-btn:disabled,
.mtc-button:disabled,
.mtc-btn[disabled],
.mtc-button[disabled],
.mtc-btn[aria-disabled="true"],
.mtc-button[aria-disabled="true"],
.mtc-btn.is-disabled,
.mtc-button.is-disabled {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/*
|--------------------------------------------------------------------------
| Variants
|--------------------------------------------------------------------------
*/

.mtc-btn--primary,
.mtc-button--primary {
    --mtc-btn-bg: var(--mtc-color-button-primary-bg, var(--mtc-color-primary));
    --mtc-btn-bg-hover: var(--mtc-color-button-primary-bg-hover, var(--mtc-color-primary-hover));
    --mtc-btn-text: var(--mtc-color-button-primary-text, var(--mtc-color-text-inverse));
    --mtc-btn-border: transparent;
    --mtc-btn-border-hover: transparent;
    --mtc-btn-shadow-hover: var(--mtc-shadow-buy, var(--mtc-shadow-brand, none));
}

.mtc-btn--secondary,
.mtc-button--secondary {
    --mtc-btn-bg: var(--mtc-color-button-secondary-bg, var(--mtc-color-secondary));
    --mtc-btn-bg-hover: var(--mtc-color-button-secondary-bg-hover, var(--mtc-color-secondary-hover));
    --mtc-btn-text: var(--mtc-color-button-secondary-text, var(--mtc-color-text-inverse));
    --mtc-btn-border: transparent;
    --mtc-btn-border-hover: transparent;
    --mtc-btn-shadow-hover: var(--mtc-shadow-brand, none);
}

.mtc-btn--accent,
.mtc-button--accent {
    --mtc-btn-bg: var(--mtc-color-button-accent-bg, var(--mtc-color-accent));
    --mtc-btn-bg-hover: var(--mtc-color-button-accent-bg-hover, var(--mtc-color-accent-hover));
    --mtc-btn-text: var(--mtc-color-button-accent-text, var(--mtc-color-text-inverse));
    --mtc-btn-border: transparent;
    --mtc-btn-border-hover: transparent;
}

.mtc-btn--buy,
.mtc-button--buy {
    --mtc-btn-bg: var(--mtc-color-buy, var(--mtc-color-primary));
    --mtc-btn-bg-hover: var(--mtc-color-buy-hover, var(--mtc-color-primary-hover));
    --mtc-btn-text: var(--mtc-color-cta-contrast, var(--mtc-color-text-inverse));
    --mtc-btn-border: transparent;
    --mtc-btn-border-hover: transparent;
    --mtc-btn-shadow-hover: var(--mtc-shadow-buy, var(--mtc-shadow-brand, none));
}

.mtc-btn--sale,
.mtc-button--sale {
    --mtc-btn-bg: var(--mtc-color-sale, var(--mtc-color-danger));
    --mtc-btn-bg-hover: var(--mtc-color-sale-hover, var(--mtc-color-danger-hover));
    --mtc-btn-text: var(--mtc-color-text-inverse);
    --mtc-btn-border: transparent;
    --mtc-btn-border-hover: transparent;
    --mtc-btn-shadow-hover: 0 18px 60px var(--mtc-color-sale-soft, rgba(229, 72, 77, 0.16));
}

.mtc-btn--dark,
.mtc-button--dark {
    --mtc-btn-bg: var(--mtc-color-button-dark-bg, var(--mtc-color-text));
    --mtc-btn-bg-hover: var(--mtc-color-button-dark-bg-hover, #000);
    --mtc-btn-text: var(--mtc-color-button-dark-text, #fff);
    --mtc-btn-border: transparent;
    --mtc-btn-border-hover: transparent;
}

.mtc-btn--light,
.mtc-button--light {
    --mtc-btn-bg: var(--mtc-color-button-light-bg, var(--mtc-color-surface));
    --mtc-btn-bg-hover: var(--mtc-color-button-light-bg-hover, var(--mtc-color-surface-muted));
    --mtc-btn-text: var(--mtc-color-button-light-text, var(--mtc-color-text));
    --mtc-btn-border: var(--mtc-color-border, #e5e5e5);
    --mtc-btn-border-hover: var(--mtc-color-border-strong, #d0d0d0);
    --mtc-btn-shadow-hover: var(--mtc-shadow-xs, none);
}

.mtc-btn--ghost,
.mtc-button--ghost {
    --mtc-btn-bg: transparent;
    --mtc-btn-bg-hover: var(--mtc-color-primary-soft, transparent);
    --mtc-btn-text: var(--mtc-color-primary, currentColor);
    --mtc-btn-border: var(--mtc-color-border, transparent);
    --mtc-btn-border-hover: var(--mtc-color-primary, currentColor);
    --mtc-btn-shadow-hover: none;
}

.mtc-btn--soft,
.mtc-button--soft {
    --mtc-btn-bg: var(--mtc-color-primary-soft, transparent);
    --mtc-btn-bg-hover: var(--mtc-color-primary-subtle, transparent);
    --mtc-btn-text: var(--mtc-color-primary, currentColor);
    --mtc-btn-border: transparent;
    --mtc-btn-border-hover: transparent;
    --mtc-btn-shadow-hover: none;
}

.mtc-btn--link,
.mtc-button--link {
    --mtc-btn-height: auto;
    --mtc-btn-padding-x: 0;
    --mtc-btn-bg: transparent;
    --mtc-btn-bg-hover: transparent;
    --mtc-btn-text: var(--mtc-color-link, currentColor);
    --mtc-btn-border: transparent;
    --mtc-btn-border-hover: transparent;
    --mtc-btn-shadow-hover: none;

    min-height: auto;
    border-radius: 0;
    font-weight: var(--mtc-font-weight-semibold, 600);
}

.mtc-btn--link:hover,
.mtc-button--link:hover {
    color: var(--mtc-color-link-hover, currentColor);
    transform: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
|--------------------------------------------------------------------------
| Sizes
|--------------------------------------------------------------------------
*/

.mtc-btn--sm,
.mtc-button--sm {
    --mtc-btn-height: var(--mtc-size-button-height-sm, 40px);
    --mtc-btn-padding-x: var(--mtc-space-md, 16px);
    --mtc-btn-gap: var(--mtc-space-2xs, 4px);

    font-size: var(--mtc-font-size-xs, 12px);
}

.mtc-btn--md,
.mtc-button--md {
    --mtc-btn-height: var(--mtc-size-button-height, 48px);
    --mtc-btn-padding-x: var(--mtc-space-lg, 24px);

    font-size: var(--mtc-font-size-sm, 14px);
}

.mtc-btn--lg,
.mtc-button--lg {
    --mtc-btn-height: var(--mtc-size-button-height-lg, 56px);
    --mtc-btn-padding-x: var(--mtc-space-xl, 32px);

    font-size: var(--mtc-font-size-md, 16px);
}

.mtc-btn--xl,
.mtc-button--xl {
    --mtc-btn-height: 64px;
    --mtc-btn-padding-x: var(--mtc-space-xl, 32px);

    font-size: var(--mtc-font-size-lg, 18px);
}

/*
|--------------------------------------------------------------------------
| Layout modifiers
|--------------------------------------------------------------------------
*/

.mtc-btn--full,
.mtc-button--full {
    display: flex;
    width: 100%;
}

button.mtc-btn--full,
button.mtc-button--full,
a.mtc-btn--full,
a.mtc-button--full {
    display: flex;
    width: 100%;
}

.mtc-btn--wide,
.mtc-button--wide {
    min-width: 180px;
}

.mtc-btn--compact,
.mtc-button--compact {
    --mtc-btn-padding-x: var(--mtc-space-md, 16px);
}

.mtc-btn--square,
.mtc-button--square {
    width: var(--mtc-btn-height);
    min-width: var(--mtc-btn-height);
    padding-inline: 0;
}

/*
|--------------------------------------------------------------------------
| Icon support
|--------------------------------------------------------------------------
*/

.mtc-btn__icon,
.mtc-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--mtc-size-icon-sm, 18px);
    height: var(--mtc-size-icon-sm, 18px);

    flex: 0 0 auto;
    line-height: 1;
}

.mtc-btn__icon svg,
.mtc-button__icon svg,
.mtc-btn svg,
.mtc-button svg {
    display: block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
}

.mtc-btn--icon-left .mtc-btn__icon,
.mtc-button--icon-left .mtc-button__icon {
    margin-inline-start: calc(var(--mtc-space-2xs, 4px) * -1);
}

.mtc-btn--icon-right .mtc-btn__icon,
.mtc-button--icon-right .mtc-button__icon {
    margin-inline-end: calc(var(--mtc-space-2xs, 4px) * -1);
}

/*
|--------------------------------------------------------------------------
| Icon Button
|--------------------------------------------------------------------------
*/

.mtc-icon-btn,
.mtc-icon-button {
    --mtc-icon-btn-size: var(--mtc-size-icon-button, 44px);
    --mtc-icon-btn-bg: transparent;
    --mtc-icon-btn-bg-hover: var(--mtc-color-primary-soft, transparent);
    --mtc-icon-btn-text: var(--mtc-color-text, currentColor);
    --mtc-icon-btn-text-hover: var(--mtc-color-primary, currentColor);
    --mtc-icon-btn-border: transparent;
    --mtc-icon-btn-border-hover: var(--mtc-color-border-subtle, transparent);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--mtc-icon-btn-size);
    height: var(--mtc-icon-btn-size);
    min-width: var(--mtc-icon-btn-size);
    min-height: var(--mtc-icon-btn-size);

    padding: 0;
    margin: 0;

    border: 1px solid var(--mtc-icon-btn-border);
    border-radius: var(--mtc-radius-full, 9999px);

    appearance: none;
    -webkit-appearance: none;

    background: var(--mtc-icon-btn-bg);
    color: var(--mtc-icon-btn-text);

    font: inherit;
    line-height: 1;
    text-align: center;
    text-decoration: none;

    box-shadow: none;
    cursor: pointer;
    user-select: none;

    transition:
        background-color var(--mtc-transition-fast, 0.15s ease),
        border-color var(--mtc-transition-fast, 0.15s ease),
        color var(--mtc-transition-fast, 0.15s ease),
        box-shadow var(--mtc-transition-fast, 0.15s ease),
        transform var(--mtc-transition-fast, 0.15s ease);
}

button.mtc-icon-btn,
button.mtc-icon-button,
a.mtc-icon-btn,
a.mtc-icon-button {
    border: 1px solid var(--mtc-icon-btn-border);
    background: var(--mtc-icon-btn-bg);
    color: var(--mtc-icon-btn-text);
    box-shadow: none;
    text-decoration: none;
}

.mtc-icon-btn:hover,
.mtc-icon-button:hover,
button.mtc-icon-btn:hover,
button.mtc-icon-button:hover,
a.mtc-icon-btn:hover,
a.mtc-icon-button:hover {
    border-color: var(--mtc-icon-btn-border-hover);
    background: var(--mtc-icon-btn-bg-hover);
    color: var(--mtc-icon-btn-text-hover);
    text-decoration: none;
    box-shadow: none;
    transform: translateY(-1px);
}

.mtc-icon-btn:active,
.mtc-icon-button:active {
    transform: translateY(0);
}

.mtc-icon-btn:focus,
.mtc-icon-button:focus {
    outline: none;
}

.mtc-icon-btn:focus-visible,
.mtc-icon-button:focus-visible {
    outline: 2px solid var(--mtc-color-focus, currentColor);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px var(--mtc-color-focus-soft, transparent);
}

.mtc-icon-btn svg,
.mtc-icon-button svg {
    display: block;
    width: var(--mtc-size-icon-md, 24px);
    height: var(--mtc-size-icon-md, 24px);
    stroke: currentColor;
    fill: none;
}

/*
|--------------------------------------------------------------------------
| Icon Button variants
|--------------------------------------------------------------------------
*/

.mtc-icon-btn--primary,
.mtc-icon-button--primary {
    --mtc-icon-btn-bg: var(--mtc-color-primary-soft, transparent);
    --mtc-icon-btn-bg-hover: var(--mtc-color-primary, currentColor);
    --mtc-icon-btn-text: var(--mtc-color-primary, currentColor);
    --mtc-icon-btn-text-hover: var(--mtc-color-text-inverse, #fff);
    --mtc-icon-btn-border: transparent;
    --mtc-icon-btn-border-hover: transparent;
}

.mtc-icon-btn--light,
.mtc-icon-button--light {
    --mtc-icon-btn-bg: var(--mtc-color-surface, #fff);
    --mtc-icon-btn-bg-hover: var(--mtc-color-surface-muted, #f7f7f8);
    --mtc-icon-btn-text: var(--mtc-color-text, currentColor);
    --mtc-icon-btn-text-hover: var(--mtc-color-primary, currentColor);
    --mtc-icon-btn-border: var(--mtc-color-border-subtle, transparent);
    --mtc-icon-btn-border-hover: var(--mtc-color-border-strong, transparent);
}

.mtc-icon-btn--dark,
.mtc-icon-button--dark {
    --mtc-icon-btn-bg: var(--mtc-color-text, #222);
    --mtc-icon-btn-bg-hover: var(--mtc-color-primary, currentColor);
    --mtc-icon-btn-text: var(--mtc-color-text-inverse, #fff);
    --mtc-icon-btn-text-hover: var(--mtc-color-text-inverse, #fff);
    --mtc-icon-btn-border: transparent;
    --mtc-icon-btn-border-hover: transparent;
}

/*
|--------------------------------------------------------------------------
| Loading state
|--------------------------------------------------------------------------
*/

.mtc-btn.is-loading,
.mtc-button.is-loading,
.mtc-icon-btn.is-loading,
.mtc-icon-button.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.mtc-btn.is-loading::after,
.mtc-button.is-loading::after,
.mtc-icon-btn.is-loading::after,
.mtc-icon-button.is-loading::after {
    content: "";

    position: absolute;
    inset: auto;

    width: 1em;
    height: 1em;

    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;

    color: var(--mtc-btn-text, var(--mtc-icon-btn-text, currentColor));

    animation: mtc-button-spin 0.65s linear infinite;
}

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

/*
|--------------------------------------------------------------------------
| Component-specific hardening
|--------------------------------------------------------------------------
| Mantiene compatibilidad con componentes existentes.
|--------------------------------------------------------------------------
*/

.mtc-offcanvas__close {
    --mtc-icon-btn-size: var(--mtc-size-button-height-lg, 56px);
    --mtc-icon-btn-bg: var(--mtc-color-primary);
    --mtc-icon-btn-bg-hover: var(--mtc-color-primary-hover);
    --mtc-icon-btn-text: var(--mtc-color-text-inverse);
    --mtc-icon-btn-text-hover: var(--mtc-color-text-inverse);
    --mtc-icon-btn-border: transparent;
    --mtc-icon-btn-border-hover: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--mtc-icon-btn-size);
    height: var(--mtc-icon-btn-size);
    min-width: var(--mtc-icon-btn-size);
    min-height: var(--mtc-icon-btn-size);

    padding: 0;
    border-radius: var(--mtc-radius-pill, 999px);

    background: var(--mtc-icon-btn-bg);
    color: var(--mtc-icon-btn-text);
    border-color: var(--mtc-icon-btn-border);
    box-shadow: none;
}

button.mtc-offcanvas__close,
a.mtc-offcanvas__close {
    background: var(--mtc-icon-btn-bg);
    color: var(--mtc-icon-btn-text);
    border-color: var(--mtc-icon-btn-border);
    box-shadow: none;
}

.mtc-offcanvas__close:hover,
button.mtc-offcanvas__close:hover,
a.mtc-offcanvas__close:hover {
    background: var(--mtc-icon-btn-bg-hover);
    color: var(--mtc-icon-btn-text-hover);
    border-color: var(--mtc-icon-btn-border-hover);
    box-shadow: none;
    transform: translateY(-1px);
}

.mtc-offcanvas__close svg {
    width: var(--mtc-size-icon-md, 24px);
    height: var(--mtc-size-icon-md, 24px);
    stroke: currentColor;
}

/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .mtc-btn,
    .mtc-button,
    .mtc-icon-btn,
    .mtc-icon-button {
        transition-duration: 1ms !important;
    }

    .mtc-btn:hover,
    .mtc-button:hover,
    .mtc-icon-btn:hover,
    .mtc-icon-button:hover {
        transform: none;
    }

    .mtc-btn.is-loading::after,
    .mtc-button.is-loading::after,
    .mtc-icon-btn.is-loading::after,
    .mtc-icon-button.is-loading::after {
        animation-duration: 1.2s;
    }
}