/*
|--------------------------------------------------------------------------
| Matec Scoped Component Reset
|--------------------------------------------------------------------------
| Evita contaminación visual desde theme, Elementor o WooCommerce.
|--------------------------------------------------------------------------
*/

[class^="mtc-"],
[class*=" mtc-"],
[class^="mtc-"]::before,
[class^="mtc-"]::after,
[class*=" mtc-"]::before,
[class*=" mtc-"]::after {
    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| Links / Buttons base
|--------------------------------------------------------------------------
*/

button[class^="mtc-"],
button[class*=" mtc-"],
a[class^="mtc-"],
a[class*=" mtc-"],
[type="button"][class^="mtc-"],
[type="button"][class*=" mtc-"],
[type="submit"][class^="mtc-"],
[type="submit"][class*=" mtc-"] {
    font-family: inherit;
}

:where(button[class^="mtc-"]),
:where(button[class*=" mtc-"]),
:where([type="button"][class^="mtc-"]),
:where([type="button"][class*=" mtc-"]),
:where([type="submit"][class^="mtc-"]),
:where([type="submit"][class*=" mtc-"]) {
    appearance: none;
    -webkit-appearance: none;

    width: auto;
    margin: 0;

    font: inherit;
    line-height: inherit;
    text-transform: none;

    background: transparent;
    color: inherit;

    border-style: solid;
    border-color: transparent;

    box-shadow: none;
    text-align: inherit;
    cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/

a[class^="mtc-"],
a[class*=" mtc-"] {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

a[class^="mtc-"]:hover,
a[class*=" mtc-"]:hover,
a[class^="mtc-"]:focus,
a[class*=" mtc-"]:focus,
a[class^="mtc-"]:active,
a[class*=" mtc-"]:active {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

/*
|--------------------------------------------------------------------------
| Focus / Hover reset
|--------------------------------------------------------------------------
| Pisa reglas globales de Hello Elementor:
| button:focus,
| button:hover,
| [type=button]:focus,
| [type=submit]:focus, etc.
|--------------------------------------------------------------------------
*/

button[class^="mtc-"]:hover,
button[class*=" mtc-"]:hover,
button[class^="mtc-"]:focus,
button[class*=" mtc-"]:focus,
button[class^="mtc-"]:active,
button[class*=" mtc-"]:active,
[type="button"][class^="mtc-"]:hover,
[type="button"][class*=" mtc-"]:hover,
[type="button"][class^="mtc-"]:focus,
[type="button"][class*=" mtc-"]:focus,
[type="button"][class^="mtc-"]:active,
[type="button"][class*=" mtc-"]:active,
[type="submit"][class^="mtc-"]:hover,
[type="submit"][class*=" mtc-"]:hover,
[type="submit"][class^="mtc-"]:focus,
[type="submit"][class*=" mtc-"]:focus,
[type="submit"][class^="mtc-"]:active,
[type="submit"][class*=" mtc-"]:active {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
    box-shadow: none;
    outline: none;
}

/*
|--------------------------------------------------------------------------
| Accessible focus
|--------------------------------------------------------------------------
*/

button[class^="mtc-"]:focus-visible,
button[class*=" mtc-"]:focus-visible,
a[class^="mtc-"]:focus-visible,
a[class*=" mtc-"]:focus-visible,
[type="button"][class^="mtc-"]:focus-visible,
[type="button"][class*=" mtc-"]:focus-visible,
[type="submit"][class^="mtc-"]:focus-visible,
[type="submit"][class*=" mtc-"]:focus-visible {
    outline: 2px solid var(--mtc-color-focus, var(--mtc-color-primary, currentColor));
    outline-offset: 3px;
}