/* ===================================================================================================================
   componentes.css - biblioteca única de componentes do site (frente A "mais profissional", 25/10/2026)
   UMA definição visual por componente, só com tokens do :root do style.css. Carrega logo depois do style.css/janelas.css.
   Componente novo nasce AQUI (ou usa um destes) e aparece ao vivo na página /estilo (guia de estilo, só admin).
   - Abas e segmentado ......... .tabs  (+ .sub sublinhado · .pilulas pílulas soltas · .cheia ocupa a largura)   28 px
   - Chip / etiqueta ........... .chip  (+ .on · .ok .warn .danger .info · .n contador · .rem remover)           24 px, raio 99
   - Popover / menu ............ .pop   (+ .pop-item .pop-sep .pop-tit; helper tm.menu())                         itens 32 px
   - Diálogo ................... .modal (+ .modal-head .modal-body .modal-actions; helper tm.dialog())          principal à direita
   - Campo ..................... .campo (rótulo + controle; .linha = 28 px ao lado de botão, senão 32 px)
   - Cartão .................... .cartao (+ .dest .info .aviso)
   - Voltar .................... .voltar (canto superior esquerdo; .so = só a seta)
   Classes antigas (.seg, .chip-btn, .tag, .menu-pop, .field, .voltar…) continuam como GANCHO de JS e de layout e
   recebem a aparência por aqui (lista de seletores): não redefina altura, fonte, raio ou cor delas em outro arquivo.
   =================================================================================================================== */
:root {
  --h-aba: var(--h-btn);            /* aba, segmentado e pílula de fileira */
  --h-chip: var(--h-btn-sm);        /* chip e etiqueta */
  --r-chip: 99px;
  --h-pop-item: var(--h-item);      /* item de menu/popover */
  --r-pop: 12px;
  --r-dlg: 16px;
  --r-cartao: 14px;
}

/* ------------------------------------------------------------------ abas / segmentado (.tabs) */
.tabs, .seg, .ce-seg { display: flex; gap: 2px; padding: 2px; background: var(--bg-2); border: 1px solid var(--border); border-radius: calc(var(--r-btn) + 3px); }
.tabs > :is(button, a), .tab, .seg > button, .ce-seg > button, .msgs-tab, .wz-filtros button, .ts-abas button, .es-tabs button, .ce-abas button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--h-aba); padding: 0 12px; border: 0; border-radius: var(--r-btn);
  background: none; color: var(--muted); font: 600 var(--f-btn)/1 inherit; font-family: inherit; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.tabs > :is(button, a) svg, .tab svg, .seg > button svg, .ce-seg > button svg, .msgs-tab svg, .wz-filtros button svg, .ts-abas button svg, .es-tabs button svg, .ce-abas button svg { width: var(--i-btn); height: var(--i-btn); flex: none; }
.tabs > :is(button, a):hover, .tab:hover, .seg > button:hover, .ce-seg > button:hover, .msgs-tab:hover { color: var(--text); }
.tabs > .on, .tabs > .active, .tabs > [aria-selected="true"], .tabs > [aria-pressed="true"], .tabs > [aria-current="true"], .tab.active, .tab.on,
.seg > button.active, .seg > button.on, .ce-seg > button.on, .ce-seg > button.active { background: var(--surface-3); color: var(--text); }
.tabs.cheia, .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.tab b, .tabs > button b { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: calc(10px * var(--tl, 1)); font-weight: 800; }

/* sublinhado: o painel de mensagens da reunião */
.tabs.sub, .msgs-tabs { display: flex; gap: 2px; flex: none; padding: 0 8px; background: var(--bg-2); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.tabs.sub > :is(button, a), .msgs-tab { border-radius: var(--r-btn) var(--r-btn) 0 0; border-bottom: 2px solid transparent; padding: 0 11px; }
.tabs.sub > .on, .tabs.sub > .active, .tabs.sub > [aria-selected="true"], .msgs-tab.active { background: var(--surface-3); color: var(--text); border-bottom-color: var(--accent); }
.msgs-tabs > .msgs-tab { flex: 1 1 0; min-width: 0; padding: 0 8px; }

/* pílulas soltas (filtros e abas de fileira que rola): T_CHAT, configurações do T_CHAT, página de edição, editor do cartão */
.tabs.pilulas, .wz-filtros, .ts-abas, .es-tabs, .ce-abas { display: flex; gap: 6px; background: none; border: 0; border-radius: 0; }
.tabs.pilulas { padding: 0; }
.tabs.pilulas > :is(button, a), .wz-filtros > button, .ts-abas > button, .es-tabs > button, .ce-abas > button {
  border-radius: var(--r-chip); background: var(--surface-2); color: var(--text-soft); border: 1px solid transparent; padding: 0 13px; flex: none;
}
.tabs.pilulas > button:hover, .wz-filtros > button:hover, .ts-abas > button:hover, .es-tabs > button:hover, .ce-abas > button:hover { color: var(--text); }
.tabs.pilulas > .on, .tabs.pilulas > .active, .tabs.pilulas > [aria-selected="true"], .wz-filtros > button.on, .ts-abas > button.on, .es-tabs > button.active, .es-tabs > button.on, .ce-abas > button.on {
  background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.wz-filtros, .ts-abas { overflow-x: auto; scrollbar-width: none; }
.es-tabs { flex-wrap: wrap; margin-bottom: 16px; }
.ce-abas { flex-wrap: wrap; }
@media (max-width: 600px) { .ce-abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } }

/* ------------------------------------------------------------------ chip / etiqueta (.chip) */
.chip, .chip-btn, .g-chip, .kchip, .ce-chip, .ad-chip, .tag, .o-tag, .pill {
  display: inline-flex; align-items: center; gap: 5px; height: var(--h-chip); min-height: 0; padding: 0 10px; border-radius: var(--r-chip); line-height: 1;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); font: 600 var(--f-btn-sm)/1 var(--font); white-space: nowrap;
}
.chip svg, .chip-btn svg, .g-chip svg, .kchip svg, .tag svg, .pill svg { width: var(--i-btn-sm); height: var(--i-btn-sm); flex: none; }
button.chip, button.chip-btn, button.g-chip, button.kchip, button.ce-chip, button.tag, a.chip { cursor: pointer; }
button.chip:hover, button.chip-btn:hover, button.g-chip:hover, .ce-chip:hover { border-color: var(--border-2); color: var(--text); }
.chip.on, .chip.active, .chip[aria-pressed="true"], .chip[aria-selected="true"], .chip-btn.active, .ce-chip.on, .g-chip:not([style]).active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.chip.ok, .tag.open { border-color: color-mix(in srgb, var(--ok) 30%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok-text); }
.chip.warn { border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--tag-lock); }
.chip.danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); color: var(--danger-text); }
.chip.info, .ad-chip { border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); }
.chip .n, .g-chip small { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--surface-3); color: var(--text); font-size: calc(11px * var(--tl, 1)); font-weight: 700; }
.chip .rem, .ad-chip button { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: -4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .7; }
.chip .rem:hover, .ad-chip button:hover { opacity: 1; background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger-text); }
.chip .rem svg, .ad-chip button svg { width: 11px; height: 11px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------------ popover / menu (.pop) */
:where(.pop, .menu-pop, .wz-pop, .save-pop, .atv-pop, .more-sheet, .theme-pop, .chat-mod-pop) {   /* peso zero: a variante (react-pop, share-pop…) ajusta o que precisar */
  padding: 5px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-pop); box-shadow: var(--shadow);
}
.menu-pop, .tm-menu { min-width: 220px; }
.pop-item, .menu-pop > :is(button, a), .menu-pop .pop-item, .wz-mi, .save-pop button {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: var(--h-pop-item); padding: 4px 9px; border: 0; border-radius: 8px; background: none;
  color: var(--text); font: 500 var(--f-btn)/1.2 var(--font); text-align: left; text-decoration: none; cursor: pointer;
}
.pop-item:hover, .menu-pop > :is(button, a):hover, .wz-mi:hover, .save-pop button:hover { background: var(--surface-3); }
.pop-item:focus-visible, .menu-pop > :is(button, a):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pop-item svg, .menu-pop > :is(button, a) svg, .wz-mi > svg, .save-pop button > svg { width: var(--i-solo); height: var(--i-solo); color: var(--muted); flex: none; }
.pop-item.atual, .pop-item[aria-checked="true"], .menu-pop > button.atual, .wz-mi.on { background: var(--accent-soft); }
.pop-item.perigo, .pop-item.danger-item, .menu-pop .danger-item, .wz-mi.perigo { color: var(--danger-text); }
.pop-item.perigo svg, .menu-pop .danger-item svg { color: var(--danger-text); }
.pop-item[disabled], .pop-item[aria-disabled="true"] { opacity: .45; cursor: default; }
.pop-item kbd, .pop-item .k { margin-left: auto; color: var(--muted); font: 600 calc(11px * var(--tl, 1)) var(--font-mono); }
.pop-tit, .menu-pop .menu-sep { padding: 8px 10px 4px; font-size: calc(11.5px * var(--tl, 1)); font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.pop-sep { height: 1px; margin: 4px 2px; background: var(--border); }
.menu-pop .menu-sep { border-top: 1px solid var(--border); margin-top: 4px; }
.pop.tm-menu, .menu-pop.tm-menu { position: fixed; right: auto; z-index: 70; max-height: min(70vh, 420px); overflow-y: auto; }

/* 28/10 acabamento leve (dono: "leves efeitos visuais para deixar mais elegante"): menus e diálogos surgem com um deslize curto.
   translate/scale soltos (não o transform) para somar com o posicionamento de cada menu; some com "reduzir movimento" */
@keyframes tm-surgir { from { opacity: 0; translate: 0 4px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }
.tm-menu, .menu-pop, .theme-pop, .save-pop, .atv-pop { animation: tm-surgir .14s ease-out; }
.modal[open] { animation: tm-surgir .16s ease-out; }
@media (prefers-reduced-motion: reduce) { .tm-menu, .menu-pop, .theme-pop, .save-pop, .atv-pop, .modal[open] { animation: none; } }

/* ------------------------------------------------------------------ diálogo (.modal; helper tm.dialog())
   A base e os tamanhos têm peso zero (:where): a variante de cada diálogo (.atalhos-dlg, .vip-dlg, .ra-dlg…) só precisa de uma classe para mudar a largura. */
:where(.modal) { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-dlg); padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
.modal-inner { padding: 16px 18px 18px; display: grid; gap: 12px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }   /* 28/10: cabeçalho de diálogo com 40 px em todos */
.modal-head h2 { margin: 0; font-size: calc(16px * var(--tl, 1)); }
.modal-body { display: grid; gap: 12px; min-width: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.modal-actions .spacer { flex: 1; }
.modal-actions .btn-primary, .modal-actions .btn-danger { order: 2; }
.modal-actions .esq { margin-right: auto; }       /* a ação principal fica sempre à direita */
:where(.modal.ask-dlg, .modal.dlg-sm) { width: min(420px, calc(100vw - 32px)); }
.modal.dlg-md { width: min(560px, calc(100vw - 32px)); overflow-x: hidden; }
.modal.dlg-lg { width: min(760px, calc(100vw - 32px)); }
.modal.ask-dlg .modal-head h2 { font-size: calc(15.5px * var(--tl, 1)); }
.ask-txt { margin: 0; color: var(--muted); line-height: 1.5; }

/* ------------------------------------------------------------------ campo (.campo; .field é o nome antigo) */
.campo, .field { display: grid; gap: 6px; min-width: 0; }
.campo > span, .field > span { font-size: calc(12px * var(--tl, 1)); color: var(--muted); font-weight: 500; }
.campo > span b, .field > span b { color: var(--text); font-weight: 600; margin-left: 4px; }
:is(.campo, .field) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select) {
  width: 100%; height: var(--h-campo); padding: 0 12px; border-radius: var(--r-btn); background: var(--surface); border: 1px solid var(--border); color: var(--text); outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
:is(.campo, .field) textarea { width: 100%; padding: 8px 12px; border-radius: var(--r-btn); background: var(--surface); border: 1px solid var(--border); color: var(--text); outline: 0; transition: border-color .15s, box-shadow .15s; }
:is(.campo, .field) :is(input, select, textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); outline: 0; }
:is(.campo, .field) :is(input, select, textarea)[aria-invalid="true"], :is(.campo, .field).erro :is(input, select, textarea) { border-color: var(--danger); }
:is(.campo, .field) :is(input, select, textarea):disabled { opacity: .55; }
:is(.campo, .field) input[type="range"] { height: var(--h-btn); padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--accent); }
.campo-ajuda { font-size: calc(12px * var(--tl, 1)); color: var(--muted); }
.campo-erro { color: var(--danger-text); background: var(--danger-soft); padding: 8px 12px; border-radius: var(--r-btn); font-size: calc(13px * var(--tl, 1)); margin: 0; }
/* campo em linha com botão: mesma altura do botão (28) */
.campo.linha :is(input, select), .mk-row :is(input, select) { height: var(--h-btn); }

/* ------------------------------------------------------------------ cartão (.cartao) */
.cartao { display: grid; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-cartao); min-width: 0; }
.cartao-tit { margin: 0; font: 700 calc(14px * var(--tl, 1)) var(--font-display); letter-spacing: .01em; }
.cartao.dest { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.cartao.info { background: var(--bg-2); }
.cartao.aviso { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }

/* ------------------------------------------------------------------ voltar (.voltar): UM botão, no canto superior esquerdo de toda tela */
.voltar {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: var(--h-top); min-width: var(--h-top); padding: 0 12px 0 8px; border-radius: var(--r-btn);
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font: 600 var(--f-btn)/1 var(--font); text-decoration: none; cursor: pointer;
}
.voltar:hover { background: var(--surface-3); }
.voltar svg { width: var(--i-btn); height: var(--i-btn); }
.voltar [data-icon="arrow"] svg { transform: rotate(180deg); }
.voltar.so { padding: 0; justify-content: center; }
@media (max-width: 480px) { .voltar .vt-txt { display: none; } .voltar { padding: 0 10px; } }

/* ------------------------------------------------------------------ vazio (.estado-vazio): estado vazio com o OCTO pequeno, uma frase e UM botão (helper tm.estado-vazio) */
.estado-vazio { display: grid; justify-items: center; align-content: center; gap: 6px; padding: 22px 16px; text-align: center; color: var(--muted); min-width: 0; }
.vazio-octo { width: 72px; height: 72px; object-fit: contain; pointer-events: none; user-select: none; }
.estado-vazio.compacto { padding: 14px 10px; gap: 4px; }
.estado-vazio.compacto .vazio-octo { width: 48px; height: 48px; }
/* o OCTO da conta no Painel (js/octo-conta.js troca o octo.svg pelo visual dela) */
.dash-octo { width: 64px; height: 64px; flex: none; object-fit: contain; pointer-events: none; user-select: none; }
@media (max-width: 560px) { .dash-octo { display: none; } }
.vazio-tit { margin: 4px 0 0; font: 700 calc(14px * var(--tl, 1))/1.3 var(--font-display); color: var(--text); letter-spacing: .01em; }
.vazio-txt { margin: 0; max-width: 34ch; font-size: calc(13px * var(--tl, 1)); line-height: 1.5; text-wrap: balance; }
.estado-vazio .btn { margin-top: 8px; }
.estado-vazio.compacto .btn { margin-top: 4px; }
.estado-vazio .btn > svg { width: var(--i-btn); height: var(--i-btn); margin: 0; opacity: 1; flex: none; }
.estado-vazio .vazio-tit { margin: 4px 0 0; }
.estado-vazio .vazio-txt { margin: 0; }
.estado-vazio.sem-octo { padding: 12px 10px; }
.wz-msgs > .estado-vazio { margin: auto; }
.wz-boas > .vazio-octo { width: 88px; height: 88px; }

/* ------------------------------------------------------------------ esqueleto (.esq-lista/.esq-cartoes/.esq-texto): carregamento no lugar de "Carregando…" (helper tm.esqueleto) */
:is(.esq-lista, .esq-cartoes, .esq-texto) { display: grid; gap: 10px; width: 100%; padding: 6px 0; }
:is(.esq-lista, .esq-cartoes, .esq-texto) i {
  display: block; border-radius: 8px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%;
  animation: skel 1.3s ease-in-out infinite;
}
.esq-it { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 6px; }
.esq-it .esq-av { width: 36px; height: 36px; border-radius: 50%; }
.esq-it > span { display: grid; gap: 7px; }
.esq-it > span > i { height: 11px; width: 88%; }
.esq-it > span > i + i { height: 9px; width: 58%; }
.esq-texto > i { height: 13px; width: 90%; }
.esq-texto > i:nth-child(2n) { width: 72%; }
.esq-texto > i:nth-child(3n) { width: 55%; }
.esq-cartoes > .esq-bloco { height: 84px; border-radius: var(--r-cartao); }
@media (prefers-reduced-motion: reduce) { :is(.esq-lista, .esq-cartoes, .esq-texto) i { animation: none; } }

/* ------------------------------------------------------------------ toque (celular, tablet): os componentes novos crescem até 44 px */
/* ---------------------------------------------------------------- X de fechar (28/10, auditoria visual)
   Um só, vermelho, igual ao do programa: parado, X vermelho (--fechar); mouse em cima, fundo vermelho e X branco. Vale para todo botão
   de ícone que fecha (nome ou dica começando com "Fechar", data-close, value=close). Botão de texto "Fechar" (.btn) fica como está. */
:is(button, [role=button]):is([aria-label^="Fechar"], [title^="Fechar"], [data-close], [value=close]):not(.btn):not(.link-btn):not(.voltar):not(.pop-item) {
  color: var(--fechar); }
:is(button, [role=button]):is([aria-label^="Fechar"], [title^="Fechar"], [data-close], [value=close]):not(.btn):not(.link-btn):not(.voltar):not(.pop-item):hover:not(:disabled) {
  background: var(--fechar-fundo); color: var(--branco); }

@media (pointer: coarse), (max-width: 600px) {
  .tabs > :is(button, a), .tab, .chip, .pop-item, .voltar, .modal-actions .btn { min-height: var(--alvo-toque) !important; }
  .voltar { min-width: var(--alvo-toque) !important; }
  .campo :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select) { min-height: var(--alvo-toque); }
}