/* ==========================================================
   TEJIDOTECA · SISTEMA GLOBAL DE INTERACCIÓN v0.5.8

   Norma:
   - Todo control con apariencia de botón reacciona al hover/foco.
   - El color final depende de la superficie: clara, oscura o rosa.
   - No se aplica a enlaces corrientes, menús ni anuncios.
   ========================================================== */

:root{
    --tejidoteca-pink:#e6007e;
    --tejidoteca-black:#111;
    --tejidoteca-white:#fff;
    --tejidoteca-transition:.18s ease;
}

/* Transición y cursor para botones estándar de WordPress/Divi
   y para todos los controles creados por TEJIDOTECA CORE. */
:where(
    .et_pb_button,
    .wp-block-button__link,
    a.button,
    button.button,
    input[type="submit"],
    button[type="submit"],
    .ths__search button,
    .ths__calculator>a,
    .ths__all a,
    .ths__family-button,
    .thi__filter-grid button,
    .thi__letter,
    .thi__page,
    .thcta__button,
    .thaz__letters a,
    .thp__clear,
    .thp__letter,
    .thp__calc-button
){
    cursor:pointer;
    transition:
        background-color var(--tejidoteca-transition),
        color var(--tejidoteca-transition),
        border-color var(--tejidoteca-transition),
        transform var(--tejidoteca-transition),
        box-shadow var(--tejidoteca-transition),
        opacity var(--tejidoteca-transition)!important;
}

/* Respuesta mínima global para botones antiguos de Divi/WordPress.
   No impone un color arbitrario: añade elevación y un halo magenta,
   por lo que funciona sobre blanco, negro o rosa. */
:where(
    .et_pb_button,
    .wp-block-button__link,
    a.button,
    button.button,
    input[type="submit"],
    button[type="submit"]
):hover{
    transform:translateY(-2px);
    box-shadow:0 0 0 2px rgba(230,0,126,.55),0 7px 15px rgba(0,0,0,.13);
}

/* Foco accesible para teclado */
:where(
    .et_pb_button,
    .wp-block-button__link,
    a.button,
    button.button,
    input[type="submit"],
    button[type="submit"],
    .ths__search button,
    .ths__calculator>a,
    .ths__all a,
    .ths__family-button,
    .thi__filter-grid button,
    .thi__letter,
    .thi__page,
    .thcta__button,
    .thaz__letters a,
    .thp__clear,
    .thp__letter,
    .thp__calc-button
):focus-visible{
    outline:3px solid var(--tejidoteca-pink)!important;
    outline-offset:3px!important;
}

/* UTILIDADES PARA TODOS LOS MÓDULOS FUTUROS ------------------
   Estas clases dejan fijada la norma contextual de TEJIDOTECA. */

/* Botón en superficie clara */
.tejidoteca-surface--light .tejidoteca-button,
.tejidoteca-button--on-light{
    background:var(--tejidoteca-pink)!important;
    color:var(--tejidoteca-white)!important;
    -webkit-text-fill-color:var(--tejidoteca-white)!important;
}
.tejidoteca-surface--light .tejidoteca-button:hover,
.tejidoteca-button--on-light:hover{
    background:var(--tejidoteca-black)!important;
    color:var(--tejidoteca-white)!important;
    -webkit-text-fill-color:var(--tejidoteca-white)!important;
    transform:translateY(-2px);
}

/* Botón en superficie oscura */
.tejidoteca-surface--dark .tejidoteca-button,
.tejidoteca-button--on-dark{
    background:var(--tejidoteca-pink)!important;
    color:var(--tejidoteca-white)!important;
    -webkit-text-fill-color:var(--tejidoteca-white)!important;
}
.tejidoteca-surface--dark .tejidoteca-button:hover,
.tejidoteca-button--on-dark:hover{
    background:var(--tejidoteca-white)!important;
    color:var(--tejidoteca-black)!important;
    -webkit-text-fill-color:var(--tejidoteca-black)!important;
    transform:translateY(-2px);
}

/* Botón en superficie rosa */
.tejidoteca-surface--pink .tejidoteca-button,
.tejidoteca-button--on-pink{
    background:var(--tejidoteca-black)!important;
    color:var(--tejidoteca-white)!important;
    -webkit-text-fill-color:var(--tejidoteca-white)!important;
}
.tejidoteca-surface--pink .tejidoteca-button:hover,
.tejidoteca-button--on-pink:hover{
    background:var(--tejidoteca-white)!important;
    color:var(--tejidoteca-black)!important;
    -webkit-text-fill-color:var(--tejidoteca-black)!important;
    transform:translateY(-2px);
}