/*
|--------------------------------------------------------------------------
| Formulários
|--------------------------------------------------------------------------
|
| Campo = rótulo + controle + (ajuda | erro | sucesso):
|
|   <div class="ds-field">
|     <label class="ds-label" for="nome">Nome <span class="ds-req" aria-hidden="true">*</span></label>
|     <input class="ds-input" id="nome" name="nome" required aria-describedby="nome-ajuda nome-erro">
|     <p class="ds-help" id="nome-ajuda">Como aparece nos relatórios.</p>
|     <p class="ds-error" id="nome-erro"></p>
|   </div>
|
| Obrigatório: asterisco no rótulo + atributo required no campo.
| Opcional: só marcar "(opcional)" quando a maioria dos campos for obrigatória.
| Erro: classe .is-invalid (ou aria-invalid="true") + texto em .ds-error.
| Somente leitura: atributo readonly (fundo neutro, sem borda de controle).
|
*/

/*
|--------------------------------------------------------------------------
| Campo e textos de apoio
|--------------------------------------------------------------------------
*/

.ds-field {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1-5);

    min-width: 0;
}

.ds-label {
    display: block;
    margin: 0; /* o tema antigo dá margem a <label>; <span class="ds-label"> ficava desalinhado */

    color: var(--ds-color-text);

    font: var(--ds-text-label);
}

.ds-req {
    margin-left: 2px;

    color: var(--ds-color-danger-fg);

    font-weight: var(--ds-font-weight-semibold);
}

.ds-opt {
    margin-left: var(--ds-space-1);

    color: var(--ds-color-text-muted);

    font-weight: var(--ds-font-weight-regular);
}

.ds-help {
    color: var(--ds-color-text-muted);

    font: var(--ds-text-helper);
}

.ds-error,
.ds-success-msg {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-1);

    font: var(--ds-text-helper);
    font-weight: var(--ds-font-weight-medium);
}

.ds-error {
    color: var(--ds-color-danger-fg);
}

.ds-success-msg {
    color: var(--ds-color-success-fg);
}

.ds-error:empty,
.ds-success-msg:empty {
    display: none;
}

/*
 * Ícone antes da mensagem (a cor nunca é o único sinal).
 * Máscara SVG: herda a cor do texto e não depende da fonte de ícones.
 */
.ds-error::before,
.ds-success-msg::before {
    content: "";

    flex: 0 0 auto;

    width: 14px;
    height: 14px;
    margin-top: 1px;

    background: currentColor;

    -webkit-mask: var(--ds-msg-icon) center / contain no-repeat;
    mask: var(--ds-msg-icon) center / contain no-repeat;
}

.ds-error {
    --ds-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zM7.25 4.25h1.5v5h-1.5zM8 10.4a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}

.ds-success-msg {
    --ds-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zM6.8 10.9 4.2 8.3l1.06-1.06L6.8 8.78l3.94-3.94 1.06 1.06z'/%3E%3C/svg%3E");
}

/*
|--------------------------------------------------------------------------
| Controles de texto: input, select, textarea
|--------------------------------------------------------------------------
*/

.ds-input,
.ds-select,
.ds-textarea {
    display: block;

    width: 100%;
    min-height: var(--ds-control-height);
    padding: 7px var(--ds-control-padding-x);

    border: var(--ds-border-width) solid var(--ds-color-border-control);
    border-radius: var(--ds-radius-md);

    background-color: var(--ds-color-surface);

    color: var(--ds-color-text);

    font: var(--ds-text-body);

    appearance: none;

    transition:
        border-color var(--ds-duration-fast) var(--ds-ease-standard),
        box-shadow var(--ds-duration-fast) var(--ds-ease-standard);
}

.ds-input::placeholder,
.ds-textarea::placeholder {
    color: var(--ds-color-text-placeholder);

    opacity: 1;
}

.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover {
    border-color: var(--ds-color-text-muted);
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
    border-color: var(--ds-color-border-focus);
    outline: none;

    box-shadow: var(--ds-focus-ring);
}

.ds-textarea {
    min-height: calc(var(--ds-control-height) * 2.6);

    resize: vertical;
}

.ds-select {
    padding-right: 34px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%235A586B' d='M213.7 101.7l-80 80a8 8 0 0 1-11.4 0l-80-80a8 8 0 0 1 11.4-11.4L128 164.7l74.3-74.4a8 8 0 0 1 11.4 11.4z'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 16px;

    cursor: pointer;
}

/* Datas e horas nativas: mesmo visual dos demais */
.ds-input[type="date"],
.ds-input[type="datetime-local"],
.ds-input[type="time"],
.ds-input[type="month"] {
    font-variant-numeric: tabular-nums;
}

.ds-input[type="date"]::-webkit-calendar-picker-indicator,
.ds-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.ds-input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: .6;

    cursor: pointer;
}

/* Números, moeda e documentos: dígitos alinhados */
.ds-input--num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ds-input--doc {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* Tamanhos */

.ds-input--sm,
.ds-select.ds-input--sm {
    min-height: var(--ds-control-height-sm);
    padding-top: 4px;
    padding-bottom: 4px;

    font: var(--ds-text-body-sm);
}

/*
|--------------------------------------------------------------------------
| Estados
|--------------------------------------------------------------------------
*/

/* Somente leitura: é informação, não campo para preencher */
.ds-input[readonly],
.ds-textarea[readonly] {
    border-color: var(--ds-color-border);

    background-color: var(--ds-color-surface-readonly);

    color: var(--ds-color-text);

    cursor: default;
}

.ds-input[readonly]:hover,
.ds-textarea[readonly]:hover {
    border-color: var(--ds-color-border);
}

.ds-input[readonly]:focus,
.ds-textarea[readonly]:focus {
    border-color: var(--ds-color-border-strong);

    box-shadow: none;
}

/* Desabilitado: indisponível agora */
.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled {
    border-color: var(--ds-color-border);

    background-color: var(--ds-color-surface-sunken);

    color: var(--ds-color-text-disabled);

    cursor: not-allowed;
}

.ds-input:disabled::placeholder {
    color: var(--ds-color-text-disabled);
}

/* Erro */
.ds-input.is-invalid,
.ds-select.is-invalid,
.ds-textarea.is-invalid,
.ds-input[aria-invalid="true"],
.ds-select[aria-invalid="true"],
.ds-textarea[aria-invalid="true"] {
    border-color: var(--ds-color-danger-solid);

    background-image: none;
}

.ds-select.is-invalid,
.ds-select[aria-invalid="true"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%235A586B' d='M213.7 101.7l-80 80a8 8 0 0 1-11.4 0l-80-80a8 8 0 0 1 11.4-11.4L128 164.7l74.3-74.4a8 8 0 0 1 11.4 11.4z'/%3E%3C/svg%3E");
}

.ds-input.is-invalid:focus,
.ds-select.is-invalid:focus,
.ds-textarea.is-invalid:focus,
.ds-input[aria-invalid="true"]:focus,
.ds-select[aria-invalid="true"]:focus,
.ds-textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(184, 50, 28, .18);
}

/* Sucesso (ex.: CPF encontrado, código disponível) */
.ds-input.is-valid,
.ds-select.is-valid {
    border-color: var(--ds-color-success-solid);
}

/*
|--------------------------------------------------------------------------
| Indicador dentro do campo (buscando, verificado)
|--------------------------------------------------------------------------
|
|   <div class="ds-input-wrap">
|     <input class="ds-input">
|     <span class="ds-input-wrap__status"><span class="ds-spinner"></span></span>
|
*/

.ds-input-wrap {
    position: relative;
}

.ds-input-wrap > .ds-input {
    padding-right: 36px;
}

.ds-input-wrap__status {
    position: absolute;
    top: 50%;
    right: 10px;

    display: inline-flex;

    transform: translateY(-50%);

    pointer-events: none;
}

/* Controle + mensagem trocados juntos por AJAX */
.ds-control-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1-5);
}

/*
|--------------------------------------------------------------------------
| Grupo com prefixo/sufixo (R$, %, ícone de busca, botão)
|--------------------------------------------------------------------------
*/

.ds-input-group {
    position: relative;

    display: flex;
    align-items: stretch;
}

.ds-input-group__affix {
    display: inline-flex;
    align-items: center;

    padding: 0 10px;

    border: var(--ds-border-width) solid var(--ds-color-border-control);
    background: var(--ds-color-surface-subtle);

    color: var(--ds-color-text-secondary);

    font: var(--ds-text-body-sm);
    white-space: nowrap;
}

.ds-input-group__affix:first-child {
    border-right: 0;
    border-radius: var(--ds-radius-md) 0 0 var(--ds-radius-md);
}

.ds-input-group__affix:last-child {
    border-left: 0;
    border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
}

.ds-input-group > .ds-input:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ds-input-group > .ds-input:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Busca: ícone dentro do campo */
.ds-search {
    position: relative;
}

.ds-search > .ph {
    position: absolute;
    top: 50%;
    left: 10px;

    transform: translateY(-50%);

    color: var(--ds-color-text-muted);

    font-size: 16px;

    pointer-events: none;
}

.ds-search > .ds-input {
    padding-left: 32px;
}

.ds-search > .ds-input::-webkit-search-cancel-button {
    cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Checkbox, radio e switch
|--------------------------------------------------------------------------
*/

.ds-check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--ds-space-2);

    min-height: 24px;

    color: var(--ds-color-text);

    font: var(--ds-text-body);

    cursor: pointer;
}

.ds-check__input {
    flex: 0 0 auto;

    width: 16px;
    height: 16px;
    margin: 2px 0 0;

    border: var(--ds-border-width) solid var(--ds-color-border-control);
    border-radius: var(--ds-radius-sm);

    background: var(--ds-color-surface) center / 12px no-repeat;

    appearance: none;
    cursor: pointer;
}

.ds-check__input[type="radio"] {
    border-radius: 50%;
}

.ds-check__input:checked {
    border-color: var(--ds-color-primary);

    background-color: var(--ds-color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23fff' d='M229.7 77.7l-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4z'/%3E%3C/svg%3E");
}

.ds-check__input[type="radio"]:checked {
    background-image: radial-gradient(circle, var(--ds-color-on-primary) 0 3px, transparent 3.5px);
}

.ds-check__input:indeterminate {
    border-color: var(--ds-color-primary);

    background-color: var(--ds-color-primary);
    background-image: linear-gradient(var(--ds-color-on-primary), var(--ds-color-on-primary));
    background-size: 8px 2px;
}

.ds-check__input:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-offset);
}

.ds-check__input:disabled {
    border-color: var(--ds-color-border);

    background-color: var(--ds-color-surface-sunken);

    cursor: not-allowed;
}

.ds-check:has(.ds-check__input:disabled) {
    color: var(--ds-color-text-disabled);

    cursor: not-allowed;
}

.ds-check__input.is-invalid {
    border-color: var(--ds-color-danger-solid);
}

.ds-check__hint {
    display: block;

    color: var(--ds-color-text-muted);

    font: var(--ds-text-helper);
}

/* Switch: liga/desliga com efeito imediato (sem botão Salvar) */
.ds-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);

    font: var(--ds-text-body);

    cursor: pointer;
}

.ds-switch__input {
    position: relative;

    flex: 0 0 auto;

    width: 32px;
    height: 18px;
    margin: 0;

    border-radius: var(--ds-radius-full);

    background: var(--ds-color-border-control);

    appearance: none;
    cursor: pointer;

    transition: background-color var(--ds-duration-normal) var(--ds-ease-standard);
}

.ds-switch__input::after {
    content: "";

    position: absolute;
    top: 2px;
    left: 2px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: var(--ds-graphite-0);

    box-shadow: var(--ds-shadow-raised);

    transition: transform var(--ds-duration-normal) var(--ds-ease-standard);
}

.ds-switch__input:checked {
    background: var(--ds-color-primary);
}

.ds-switch__input:checked::after {
    transform: translateX(14px);
}

.ds-switch__input:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: var(--ds-focus-offset);
}

.ds-switch__input:disabled {
    opacity: .5;

    cursor: not-allowed;
}

/*
|--------------------------------------------------------------------------
| Layout de formulário
|--------------------------------------------------------------------------
|
|   <form class="ds-form ds-panel">
|     <fieldset class="ds-form-section">
|       <legend class="ds-form-section__title">Colaborador</legend>
|       <p class="ds-form-section__description">…</p>
|       <div class="ds-form-grid"> … .ds-field.ds-span-6 … </div>
|     </fieldset>
|     <div class="ds-form-footer"> legenda + ações </div>
|   </form>
|
| Grade de 12 colunas; abaixo de 768 px todo campo ocupa a linha inteira.
| Formulário simples: uma coluna (ds-span-12), largura máx. 720 px.
|
*/

.ds-form {
    display: flex;
    flex-direction: column;
}

.ds-form--narrow {
    max-width: 720px;
}

.ds-form-section {
    min-width: 0;
    margin: 0;
    padding: var(--ds-space-5) var(--ds-space-6);

    border: 0;
    border-top: var(--ds-border-width) solid var(--ds-color-border);
}

.ds-form-section:first-of-type {
    border-top: 0;
}

/* float + width 100%: a legenda sai da borda do fieldset */
.ds-form-section__title {
    float: left;

    width: 100%;
    margin: 0 0 2px;
    padding: 0;

    color: var(--ds-color-text);

    font: var(--ds-text-section-title);
    letter-spacing: var(--ds-text-section-title-tracking);
}

.ds-form-section__description {
    clear: left;

    max-width: 72ch;
    margin: 0 0 var(--ds-space-4);

    color: var(--ds-color-text-muted);

    font: var(--ds-text-body-sm);
}

.ds-form-section__title + .ds-form-grid {
    clear: left;

    padding-top: var(--ds-space-3);
}

.ds-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ds-field-gap) var(--ds-space-4);
}

.ds-form-grid > * {
    grid-column: span 12;
}

.ds-span-2 { grid-column: span 2; }
.ds-span-3 { grid-column: span 3; }
.ds-span-4 { grid-column: span 4; }
.ds-span-6 { grid-column: span 6; }
.ds-span-8 { grid-column: span 8; }
.ds-span-9 { grid-column: span 9; }
.ds-span-12 { grid-column: span 12; }

.ds-form-grid > .ds-span-2 { grid-column: span 2; }
.ds-form-grid > .ds-span-3 { grid-column: span 3; }
.ds-form-grid > .ds-span-4 { grid-column: span 4; }
.ds-form-grid > .ds-span-6 { grid-column: span 6; }
.ds-form-grid > .ds-span-8 { grid-column: span 8; }
.ds-form-grid > .ds-span-9 { grid-column: span 9; }

/*
 * Intervalo num campo só: "10:00 até 22:00", "01/09 até 30/09".
 * <div class="ds-range"><input class="ds-input"><span class="ds-range__sep">até</span><input class="ds-input"></div>
 */
.ds-range {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}

.ds-range > .ds-input {
    flex: 1 1 0;
    min-width: 0;
}

.ds-range__sep {
    color: var(--ds-color-text-muted);

    font: var(--ds-text-helper);
}

/* Rodapé fixo no fim do formulário: legenda à esquerda, ações à direita */
.ds-form-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3) var(--ds-space-4);

    padding: var(--ds-space-3) var(--ds-space-6);

    border-top: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: 0 0 var(--ds-radius-lg) var(--ds-radius-lg);

    background: color-mix(in srgb, var(--ds-color-surface) 96%, transparent);
}

.ds-form-footer__legend {
    color: var(--ds-color-text-muted);

    font: var(--ds-text-caption);
}

.ds-form-footer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);

    margin-left: auto;
}

/* Avisos no topo do formulário (ex.: por que campos estão travados) */
.ds-form-alerts {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);

    padding: var(--ds-space-5) var(--ds-space-6) 0;
}

/* Resumo de erros no topo (ligado a role="alert") */
.ds-form-errors {
    margin: 0;
    padding: var(--ds-space-3) var(--ds-space-6);

    border-bottom: var(--ds-border-width) solid var(--ds-color-danger-border);
    border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;

    background: var(--ds-color-danger-bg);

    color: var(--ds-color-danger-fg);

    font: var(--ds-text-body-sm);
    font-weight: var(--ds-font-weight-medium);
}

.ds-form-errors[hidden] {
    display: none;
}

@media (max-width: 767.98px) {
    .ds-form-grid > [class*="ds-span-"] {
        grid-column: span 12;
    }

    .ds-form-section,
    .ds-form-footer,
    .ds-form-errors {
        padding-right: var(--ds-space-4);
        padding-left: var(--ds-space-4);
    }

    .ds-form-footer__actions {
        width: 100%;
    }

    .ds-form-footer__actions > .ds-btn {
        flex: 1 1 auto;
    }
}

/* Tema escuro: a seta do select é imagem (não herda cor) */
:root[data-theme="dark"] .ds-select,
:root[data-theme="dark"] .ds-select.is-invalid,
:root[data-theme="dark"] .ds-select[aria-invalid="true"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23BDBBC9' d='M213.7 101.7l-80 80a8 8 0 0 1-11.4 0l-80-80a8 8 0 0 1 11.4-11.4L128 164.7l74.3-74.4a8 8 0 0 1 11.4 11.4z'/%3E%3C/svg%3E");
}

/* Arquivo: o botão nativo vira um botão secundário do DS */
.ds-input[type="file"] {
    padding: 3px;

    cursor: pointer;
}

.ds-input[type="file"]::file-selector-button {
    height: calc(var(--ds-control-height) - 10px);
    margin-right: var(--ds-space-3);
    padding: 0 var(--ds-space-3);

    border: 0;
    border-radius: calc(var(--ds-radius-md) - 2px);

    background: var(--ds-color-secondary);

    color: var(--ds-color-on-secondary);

    font: var(--ds-text-label);

    cursor: pointer;
}

.ds-input[type="file"]:hover::file-selector-button {
    background: var(--ds-color-secondary-hover);
}

/*
| Campo + ação ao lado (buscar por CPF, conferir código…)
|   <div class="ds-input-action"><input class="ds-input"> <button class="ds-btn">Buscar</button></div>
*/
.ds-input-action {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);

    max-width: 420px;
}

.ds-input-action > .ds-input {
    flex: 1 1 auto;
    min-width: 0;
}

.ds-input-action > .ds-btn {
    flex: none;
}

/* Duas grades seguidas na mesma seção (ex.: campo que revela outros) */
.ds-form-grid + .ds-form-grid {
    margin-top: var(--ds-space-4);
}

/* Valor negativo digitado (apuração, resultados) */
.ds-input.ds-input--negativo {
    color: var(--ds-color-danger-fg);
}

/* Variante larga: select múltiplo (Select2) + botão ocupando a linha toda */
.ds-input-action--largo {
    max-width: none;
}

.ds-input-action--largo > .ds-select,
.ds-input-action--largo > .select2-container {
    flex: 1 1 auto;
    min-width: 0;
}

/*
|--------------------------------------------------------------------------
| Autocomplete (busca com sugestões abaixo do campo)
|--------------------------------------------------------------------------
|
| <div class="ds-field ds-autocomplete">            (.is-loading mostra o spinner)
|   <div class="ds-autocomplete__campo"><i class="ds-autocomplete__icone"> <input class="ds-input"> <span class="ds-spinner ds-autocomplete__spinner"></div>
|   <div class="ds-autocomplete__menu" role="listbox">
|     <div class="ds-autocomplete__item [is-active]" role="option">
|       <div class="ds-autocomplete__nome">…<mark>termo</mark>…</div>
|       <div class="ds-autocomplete__sub">CPF · e-mail</div>
|     </div>
|   </div>
| </div>
| Teclado: ↑ ↓ escolhem, Enter confirma, Esc fecha.
*/

.ds-autocomplete {
    position: relative;
}

.ds-autocomplete__campo {
    position: relative;

    flex: 1 1 auto;
    min-width: 0;
}

.ds-autocomplete__campo > .ds-input {
    width: 100%;
    padding-left: 36px;
}

.ds-autocomplete__icone {
    position: absolute;
    top: 50%;
    left: 12px;

    color: var(--ds-color-text-muted);

    transform: translateY(-50%);
    pointer-events: none;
}

.ds-autocomplete__spinner {
    position: absolute;
    top: 50%;
    right: 12px;

    display: none;

    transform: translateY(-50%);
}

.ds-autocomplete:not(.is-loading) .ds-autocomplete__spinner {
    display: none;
}

.ds-autocomplete__menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: var(--ds-z-dropdown);

    max-height: 320px;
    margin-top: var(--ds-space-1);
    overflow-y: auto;

    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);

    background: var(--ds-color-surface);
    box-shadow: var(--ds-shadow-floating);
}

.ds-autocomplete__item {
    padding: var(--ds-space-2) var(--ds-space-3);

    border-top: var(--ds-border-width) solid var(--ds-color-border-subtle);

    cursor: pointer;
}

.ds-autocomplete__item:first-child {
    border-top: 0;
}

.ds-autocomplete__item:hover,
.ds-autocomplete__item.is-active {
    background: var(--ds-color-surface-subtle);
}

.ds-autocomplete__item.is-active {
    box-shadow: inset 3px 0 0 var(--ds-color-primary);
}

.ds-autocomplete__nome {
    color: var(--ds-color-text);

    font: var(--ds-text-body);
}

.ds-autocomplete__nome mark {
    padding: 0;

    background: var(--ds-color-selection-bg);
    color: var(--ds-color-selection-text);
}

.ds-autocomplete__sub,
.ds-autocomplete__vazio {
    color: var(--ds-color-text-muted);

    font: var(--ds-text-body-sm);
}

.ds-autocomplete__vazio {
    padding: var(--ds-space-3);
}

/* Participante escolhido logo abaixo da busca */
.ds-autocomplete + .ds-list__item--destaque {
    margin-top: var(--ds-space-3);
}

/*
|--------------------------------------------------------------------------
| Editor de texto rico (Quill) no padrão do DS
|--------------------------------------------------------------------------
| <div class="ds-editor"><div id="…"></div></div>  + variáveis em .ds-editor-variaveis
*/
.ds-editor {
    border: var(--ds-border-width) solid var(--ds-color-border-control, var(--ds-color-border));
    border-radius: var(--ds-radius-md);

    background: var(--ds-color-surface);
    color: var(--ds-color-text);
}

.ds-editor:focus-within {
    border-color: var(--ds-color-border-focus);
    box-shadow: var(--ds-focus-ring);
}

.ds-editor .ql-toolbar.ql-snow,
.ds-editor .ql-container.ql-snow {
    border: 0;
}

.ds-editor .ql-toolbar.ql-snow {
    border-bottom: var(--ds-border-width) solid var(--ds-color-border-subtle);
    border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;

    background: var(--ds-color-surface-subtle);
}

.ds-editor .ql-container.ql-snow {
    min-height: 260px;

    font: var(--ds-text-body);
}

.ds-editor .ql-editor.ql-blank::before {
    color: var(--ds-color-text-muted);
    font-style: normal;
}

.ds-editor .ql-snow .ql-stroke {
    stroke: var(--ds-color-text-secondary);
}

.ds-editor .ql-snow .ql-fill {
    fill: var(--ds-color-text-secondary);
}

.ds-editor .ql-snow .ql-picker {
    color: var(--ds-color-text-secondary);
}

.ds-editor-variaveis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);

    margin-bottom: var(--ds-space-3);
}

.ds-editor-variaveis .ds-btn {
    font-family: var(--ds-font-mono, ui-monospace, monospace);
}