/* Botões com semântica visual consistente em todo o Meu Palcco. */
.button.ui-button-with-icon,
.btn.ui-button-with-icon,
button.ui-button-with-icon,
a.ui-button-with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .48rem;
}

.ui-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 1.05rem;
    line-height: 0;
}

.ui-button-icon svg,
.ui-symbol-button svg {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ui-symbol-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.ui-symbol-button > .ui-button-icon {
    width: 1rem;
    height: 1rem;
    flex-basis: 1rem;
}

.button.ui-button-with-icon:disabled,
button.ui-button-with-icon:disabled {
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .button.ui-button-with-icon,
    .btn.ui-button-with-icon,
    button.ui-button-with-icon,
    a.ui-button-with-icon {
        gap: .4rem;
    }
}

/* Componentes de calendário preservam sua estrutura própria, sem ícones automáticos. */
.palcco-datepicker .ui-button-icon,
[data-period-popover] .ui-button-icon,
[data-period-calendar] .ui-button-icon,
.period-filter-calendar .ui-button-icon {
    display: none !important;
}

.palcco-datepicker .ui-button-with-icon,
[data-period-popover] .ui-button-with-icon,
[data-period-calendar] .ui-button-with-icon,
.period-filter-calendar .ui-button-with-icon {
    gap: 0;
}