/**
 * Wapu UI Kit · wapu-segment
 *
 * Pills segmentadas estilo iOS / Notion. Para 2-4 opciones discretas.
 * Reemplaza gradualmente:
 *   - .pg-segment (Playground editor)
 *   - .pg-pills / .pg-pill (Playground legacy)
 *
 * Usado típicamente cuando un select tiene pocas options visibles.
 * Si el field tiene 5+ options, usar wapu-input / select nativo.
 *
 * Diseño: pills horizontales con wrap automático, active state contrastado.
 * Variantes BEM: --stacked (vertical en lugar de horizontal)
 *
 * Tokens:
 *   --wapu-segment-bg-active
 *   --wapu-segment-text-active
 *
 * @package WapuCore
 * @since   5.7.0
 */

/* ── Container ──────────────────────────────────────────────────── */
.wapu-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    background: rgba(15, 23, 42, .04);
    border-radius: 10px;
}

/* ── Stacked (vertical) ─────────────────────────────────────────── */
.wapu-segment--stacked {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* ── Botones / pills ────────────────────────────────────────────── */
.wapu-segment__btn {
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: rgba(15, 23, 42, .65);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    line-height: 1.3;
    white-space: normal;     /* permite wrap a 2 líneas si label es largo */
    text-align: center;
}
.wapu-segment__btn:hover {
    color: rgba(15, 23, 42, .92);
    background: rgba(15, 23, 42, .04);
}
.wapu-segment__btn:focus-visible {
    outline: 2px solid var(--wapu-cta-color, #6366f1);
    outline-offset: 1px;
}

/* ── Estado activo ──────────────────────────────────────────────── */
.wapu-segment__btn--active,
.wapu-segment__btn[aria-pressed="true"],
.wapu-segment__btn[aria-selected="true"] {
    background: var(--wapu-segment-bg-active, #fff);
    color: var(--wapu-segment-text-active, rgba(15, 23, 42, .92));
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

/* ── Disabled ───────────────────────────────────────────────────── */
.wapu-segment__btn:disabled,
.wapu-segment__btn[aria-disabled="true"] {
    opacity: .4;
    cursor: not-allowed;
}