/* TH Split Button v5.0 */

/*
  Estructura final:
  .thsb-wrap          → display:inline-block, altura animada por JS, overflow:hidden
    .thsb-main        → position normal en el flujo
    .thsb-options     → position:absolute, top:0, left:0, width:100%
                        Así no ocupa espacio extra — el wrapper controla todo.
*/

.thsb-wrap {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: top;
    /* height se pone por JS */
    transition: height .34s cubic-bezier(.4,0,.2,1);
}

/* ── Botón principal ── */
.thsb-main {
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    width: 100%;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    transition:
        opacity      .2s ease,
        transform    .25s cubic-bezier(.4,0,.2,1),
        visibility   .2s ease;
}
.thsb-main:hover  { filter: brightness(.92); }
.thsb-main:active { filter: brightness(.82); }

/* Al abrir: overflow visible para que las opciones no queden cortadas */
.thsb-wrap.is-open {
    overflow: visible;
}

/* Al abrir: botón desaparece */
.thsb-wrap.is-open .thsb-main {
    opacity:         0;
    transform:       scale(.6);
    visibility:      hidden;
    pointer-events:  none;
}

/* Flecha */
.thsb-arrow {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    opacity: .75;
    transition: transform .3s ease;
}
.thsb-wrap.is-open .thsb-arrow { transform: rotate(180deg); }

/* ── Opciones: superpuestas, fuera del flujo ── */
.thsb-options {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
    visibility: hidden;
}

.thsb-options[hidden] { display: flex !important; }

.thsb-wrap.is-open .thsb-options {
    visibility: visible;
    pointer-events: auto;
}

/* ── Animación horizontal ── */
.thsb-options[data-dir="horizontal"],
.thsb-options:not([data-dir]) {
    flex-direction: row;
}
.thsb-options[data-dir="horizontal"] .thsb-option:first-child,
.thsb-options:not([data-dir]) .thsb-option:first-child {
    flex: 1;
    justify-content: center;
    transform: translateX(36px) scale(.78);
    opacity: 0;
    transition:
        transform .42s cubic-bezier(.34,1.3,.64,1) .16s,
        opacity   .28s ease .16s;
}
.thsb-options[data-dir="horizontal"] .thsb-option:last-child,
.thsb-options:not([data-dir]) .thsb-option:last-child {
    flex: 1;
    justify-content: center;
    transform: translateX(-36px) scale(.78);
    opacity: 0;
    transition:
        transform .44s cubic-bezier(.34,1.3,.64,1) .19s,
        opacity   .28s ease .19s;
}

/* ── Animación vertical ── */
.thsb-options[data-dir="vertical"] {
    flex-direction: column;
}
.thsb-options[data-dir="vertical"] .thsb-option {
    width: 100%;
    justify-content: center;
}
.thsb-options[data-dir="vertical"] .thsb-option:first-child {
    transform: translateY(14px) scale(.88);
    opacity: 0;
    transition:
        transform .4s cubic-bezier(.34,1.35,.64,1) .16s,
        opacity   .26s ease .16s;
}
.thsb-options[data-dir="vertical"] .thsb-option:last-child {
    transform: translateY(-14px) scale(.88);
    opacity: 0;
    transition:
        transform .42s cubic-bezier(.34,1.35,.64,1) .21s,
        opacity   .26s ease .21s;
}

/* Estado abierto: todas las opciones en su sitio */
.thsb-wrap.is-open .thsb-options .thsb-option {
    transform: none !important;
    opacity: 1 !important;
}

/* ── Cada opción ── */
.thsb-option {
    display: inline-flex !important;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .18s ease;
    will-change: transform, opacity;
}
.thsb-option:hover  { filter: brightness(.88); text-decoration: none; }
.thsb-option:active { filter: brightness(.75); }

/* ── Responsive mobile vertical ── */
@media (max-width: 767px) {
    .thsb-options[data-mobile="vertical"] {
        flex-direction: column;
    }
    .thsb-options[data-mobile="vertical"] .thsb-option {
        width: 100%; justify-content: center;
        flex: none;
    }
    .thsb-options[data-mobile="vertical"] .thsb-option:first-child {
        transform: translateY(14px) scale(.88) !important;
    }
    .thsb-options[data-mobile="vertical"] .thsb-option:last-child {
        transform: translateY(-14px) scale(.88) !important;
    }
}

/* ── Modo hover ── */
.thsb-wrap[data-expand="hover"]:hover .thsb-main,
.thsb-wrap[data-expand="hover"]:focus-within .thsb-main {
    opacity: 0; transform: scale(.6);
    visibility: hidden; pointer-events: none;
}
.thsb-wrap[data-expand="hover"]:hover .thsb-options,
.thsb-wrap[data-expand="hover"]:focus-within .thsb-options {
    visibility: visible; pointer-events: auto;
}
.thsb-wrap[data-expand="hover"]:hover .thsb-options .thsb-option,
.thsb-wrap[data-expand="hover"]:focus-within .thsb-options .thsb-option {
    transform: none !important; opacity: 1 !important;
}