/* Aularis Marketing — camada LOCAL, carregada por último (depois de builder.css) em components/ds_head.html.
 * Aqui entram as adições do projeto que não são do pacote DS Mosaico (static/css/ds/ fica só com a
 * tradução do pacote). Regras sempre escopadas; usar os tokens do DS (--text, --surface-2, --accent…).
 */

/* o atributo [hidden] sempre esconde: `.stack`, `.cluster`, `.btn`… (display explícito no DS)
 * vencem o `display: none` do navegador */
[hidden] { display: none !important; }

/* filtros das listas (busca + selects + Filtrar/Limpar): os selects ficam no conteúdo */
.search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.search-bar > .input-icon { flex: 1 1 260px; }
.search-bar > .input { width: auto; flex: 0 1 220px; }
.search-bar > .search-select { width: auto; flex: 0 1 220px; }
@media (max-width: 640px) { .search-bar > *, .search-bar > .input { flex: 1 1 100%; } .search-bar > .input { width: 100%; } }

/* coluna central estreita (formulários): largura de leitura */
.page-narrow { width: 100%; max-width: 760px; margin-inline: auto; }

/* célula principal das tabelas: título (link) + apoio; o título sublinha no hover */
.cell-link { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }
.cell-link > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell-link b { font-weight: 700; }
.cell-link:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* texto livre (observações, regras) preserva as quebras de linha */
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* pré-visualização de mídia (detalhe da peça) */
.image-preview { display: block; max-width: 100%; max-height: 480px; margin-inline: auto; border-radius: var(--r-mini); object-fit: contain; }
.thumb-preview { display: block; width: 160px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-mini); background: var(--surface-2); }
.cover-banner { display: block; width: 100%; max-height: 256px; object-fit: cover; border-radius: var(--r-card); }

/* notificação lida fica apagada */
.notif.is-read { opacity: .6; }

/* lista com marcadores (arquivos, regras) */
.bullets { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

/* chip de tag (tag_field) */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); font: 700 13px var(--font-text); color: var(--text); }
.tag button { background: none; border: 0; padding: 0; display: inline-flex; cursor: pointer; color: var(--text-muted); }
.tag button:hover { color: var(--text); }
.tag .lucide { width: 14px; height: 14px; }

/* select com busca (peça local components/marketing/search_select.html): substitui o
 * <select> nativo nas listas que crescem (campanha, responsável, tipo, evento, owner).
 * O gatilho reusa `.input` (poço do DS); o menu flutua ancorado no `.search-select`. */
.search-select { position: relative; min-width: 0; }
.search-select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
.search-select__trigger > .lucide { flex: none; color: var(--text-faint); transition: transform var(--d-2) var(--ease); }
.search-select__trigger[aria-expanded="true"] > .lucide { transform: rotate(180deg); }
.search-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-select__value--placeholder { color: var(--text-faint); }

.search-select__menu { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface-solid); border-radius: 16px; box-shadow: var(--shadow-float); overflow: hidden; }
.search-select__search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--surface-2); }
.search-select__search > .lucide { flex: none; color: var(--text-faint); }
.search-select__search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 400 15px var(--font-text); outline: none; }
.search-select__search input::placeholder { color: var(--text-faint); }

.search-select__list { margin: 0; padding: 6px; list-style: none; max-height: 280px; overflow-y: auto; }
.search-select__option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14.5px; font-weight: 700; color: var(--text); }
.search-select__option:hover, .search-select__option.is-active { background: var(--surface-2); }
.search-select__option[aria-selected="true"] { background: var(--surface-3); }
.search-select__option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-select__check { flex: none; color: var(--accent); }
.search-select__empty { padding: 14px; text-align: center; font-size: 13.5px; color: var(--text-muted); }