@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* A Inter que o Google Fonts serve (acima) tem o dígito "1" com uma base/serifa
   embaixo. A InterVariable oficial (github.com/rsms/inter) já corrigiu esse
   desenho, então usamos ela só pros dígitos 0-9 (via unicode-range), mantendo
   o resto do texto na Inter de sempre — usar a build estática "v4.1" pros
   dígitos deixava eles com aparência esticada/distorcida em tamanho real de
   UI; a variable font não tem esse problema. Um only face cobre todos os
   pesos (100-900), o navegador escolhe o corte certo sozinho. Tem que vir
   DEPOIS das faces acima no arquivo: pra um caractere coberto por mais de uma
   face do mesmo peso, o navegador usa a última declarada. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable-Digits.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+30-39;
}

:root {
  --green: #2c9f72;
  --green-dark: #2fae59;
  --green-text: #fff;
  --bg: #f3ede2;
  --card-bg: #ffffff;
  --field-bg: #f1f1f1;
  --text: #0B2012;
  --muted: #8a8a8a;
  --border: #1c1c1c;
  --radius-lg: 12px;
  --radius-pill: 999px;
  /* Todos os botões: o mesmo canto dos ícones de editar (.icon-button). */
  --radius-botao: 8px;
  /* Barra de abas do celular (sem a margem da barra de gestos do iPhone). */
  --barra-abas-altura: 62px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Onest', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.03em;
  color: var(--text);
  background-color: #f9f9f9;
}

.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 208px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  padding: 32px 12px;
  background: #ffffff;
  border-right: 1px solid #e5e5e5;
  box-sizing: border-box;
}

.sidebar-logo {
  width: 90px;
  height: auto;
  margin: 0 8px 36px;
  color: var(--green);
}

.tab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* No desktop o agrupador não interfere no layout (os itens continuam sendo
   filhos diretos do flex da sidebar); no celular ele vira a barra de abas de baixo. */
.sidebar-menu {
  display: contents;
}

/* Só no celular: título da página na barra do topo e faixa de número fora do ar. */
.sidebar-titulo,
.aviso-numeros {
  display: none;
}

.tab[hidden] {
  display: none !important;
}

.page {
  flex: 1;
  min-width: 0;
  padding: 64px 20px 80px;
}

.layout {
  display: flex;
  justify-content: center;
  width: 100%;
}

.content-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 8px;
  padding: 11px 14px;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.03em;
  cursor: pointer;
  background: transparent;
  color: #545454;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Página atual: verde da marca. */
.tab--active {
  background: color-mix(in srgb, var(--green) 11%, #ffffff);
  color: var(--green);
  font-weight: 600;
  box-shadow: none;
}

.tab--active svg {
  color: var(--green);
}

.tab:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Separa as páginas de rotina (disparos) das de cadastro (públicos, grupos). */
.sidebar-separador {
  flex: none;
  margin: 10px 14px;
  border: none;
  border-top: 1px solid #eeeeee;
}

.tab--sair {
  margin-top: auto;
}

.tab:not(.tab--active):hover {
  background: #f0f0f0;
  color: #0B2012;
}

.main-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
}

.card {
  width: 100%;
  max-width: 710px;
  background: var(--card-bg);
  border: 1px solid #ddd;
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.card:has(> [data-panel="lista-disparos"].tab-panel--active),
.card:has(> [data-panel="publicos"].tab-panel--active),
.card:has(> [data-panel="grupos"].tab-panel--active),
.card:has(> [data-panel="contatos"].tab-panel--active),
.card:has(> [data-panel="templates"].tab-panel--active),
.card:has(> [data-panel="integracoes"].tab-panel--active) {
  max-width: 1200px;
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 20px;
}

.page-header {
  width: 100%;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: #0B2012;
  letter-spacing: -0.03em;
  text-align: left;
}

.tab-panel {
  display: none;
}

.tab-panel--active {
  display: block;
  /* Sem fill-mode "forwards"/"both" de propósito: deixar transform aplicado no
     painel depois da animação quebraria elementos position:fixed dentro dele
     (ex: barra de formatação de texto). */
  animation: tela-entrada 0.2s ease;
}

@keyframes tela-entrada {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.disparos-tabela tbody tr {
  animation: linha-entrada 0.15s ease;
}

@keyframes linha-entrada {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Quem ativou "reduzir movimento" no sistema vê tudo sem animação. Duração
   0.01ms (e não 0) pra transitionend continuar disparando — os modais e o
   dropdown dependem dele pra esconder o elemento depois de fechar. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.placeholder {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.placeholder-td {
  padding: 40px 0 !important;
}

.placeholder-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

/* Ícone em "caixa" arredondada, no mesmo estilo do modal de excluir, mas cinza. */
.placeholder-vazio > svg {
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  padding: 14px;
  margin-bottom: 4px;
  border-radius: 16px;
  background: #f0f0f0;
  color: #9a9a9a;
}

.placeholder-vazio p {
  margin: 0;
  font-size: 14px;
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 8px;
}

.field input[type='text'],
.field input[type='password'],
.field input[type='number'],
.field input[type='datetime-local'],
.field select,
.field textarea {
  width: 100%;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background: #f7f7f7;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: -0.03em;
  color: var(--text);
  appearance: none;
  outline: none !important;
}

.field input[type='text'],
.field input[type='password'],
.field input[type='number'],
.field input[type='datetime-local'],
.field select {
  height: 44px;
}

/* Campo numérico sem as setinhas do navegador (digita-se o número). */
.field input[type='number'] {
  -moz-appearance: textfield;
}
.field input[type='number']::-webkit-inner-spin-button,
.field input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 13px;
  background-position: right 16px center;
  padding-right: 38px;
}

.field select:invalid {
  color: #787878;
  font-weight: 500;
}

.custom-select {
  position: relative;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 44px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background: #f7f7f7;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: -0.03em;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  outline: none !important;
}

.custom-select-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-trigger--placeholder span {
  color: #787878;
  font-weight: 500;
}

.custom-select-trigger svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #555555;
  transition: transform 0.15s ease;
}

.custom-select.custom-select--aberto .custom-select-trigger svg {
  transform: rotate(180deg);
}

.custom-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.custom-select--aberto .custom-select-panel {
  opacity: 1;
  transform: translateY(0);
}

.custom-select-panel[hidden] {
  display: none !important;
}

.custom-select-option {
  padding: 10px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.custom-select-option:hover {
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.custom-select-option--selecionado {
  background: var(--green);
  color: #ffffff;
  font-weight: 600;
}

.custom-select-option--selecionado:hover {
  background: color-mix(in srgb, var(--green) 85%, black);
}

.custom-select-option--vazio {
  padding: 10px;
  color: #787878;
  font-size: 13px;
  cursor: default;
}

.custom-select-option--desabilitada {
  color: #a8a8a8;
  cursor: not-allowed;
}

.custom-select-option--desabilitada:hover {
  background: transparent;
}

.field-date-input {
  width: 100%;
  height: 44px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background-color: #f7f7f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: right 14px center;
  padding: 6px 44px 6px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none !important;
  cursor: pointer;
}

.field-date-input::placeholder {
  color: #787878;
  font-weight: 500;
}

.flatpickr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 3100;
}

.flatpickr-overlay--active {
  opacity: 1;
  pointer-events: auto;
}

.flatpickr-calendar,
.flatpickr-calendar * {
  font-family: 'Onest', system-ui, -apple-system, sans-serif !important;
}

.flatpickr-calendar {
  border-radius: 12px;
  border: 1px solid #dddddd;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  padding: 22px;
  width: var(--calendario-largura, 408px) !important;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  z-index: 3101;
}

.flatpickr-calendar.open {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(calc(-50% + var(--centro-desvio, 0px)), -50%) !important;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  display: none;
}

/* .cal-header */
/* Cabeçalho em flex (seta, título, seta), no lugar do posicionamento absoluto
   do flatpickr: setas e título centralizam juntos em qualquer largura. No
   calendário largo, .cal-duas-colunas reordena (título à esquerda). */
.flatpickr-months {
  position: relative;
  display: flex;
  align-items: center;
  /* Respiro entre o título (data) e os dias da semana. */
  margin-bottom: 22px;
}

.flatpickr-months .flatpickr-month {
  flex: 1;
  height: auto !important;
  overflow: visible !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  position: static !important;
  height: auto !important;
  transform: none !important;
  color: #22c55e;
  fill: none;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: #f0fdf4;
}

/* O flatpickr some com a seta quando não dá pra navegar mais pra trás (ex.: já
   está no mês de hoje, com minDate:'today'); prefiro sempre visível, só cinza
   e sem clique — senão parece que falta um botão. */
/* Mesma caixa pras duas setas, ativas ou não — antes a desabilitada era
   inline-flex e a ativa block, e ficavam em alturas diferentes. */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  color: #d1d5db;
  pointer-events: none;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: none;
}

/* .cal-titulo */
.flatpickr-current-month {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  padding: 0;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 600;
  appearance: none;
  border: none;
  background: transparent;
  color: #1f2937;
}

.flatpickr-current-month input.cur-year {
  font-weight: 600;
  color: #1f2937;
}

/* .cal-semana */
.flatpickr-weekdays {
  margin-bottom: 12px;
}

.flatpickr-weekdaycontainer {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  width: 100% !important;
}

span.flatpickr-weekday {
  color: var(--green);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  padding: 4px 0;
}

/* .cal-dias */
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.dayContainer {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* .cal-dia */
.flatpickr-day {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex-basis: auto !important;
  height: auto !important;
  line-height: 1.5 !important;
  padding: 10px 2px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 2px solid transparent !important;
  background: none !important;
  color: #1f2937 !important;
  font-size: 13px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Dias de outro mês: clicáveis, então num cinza médio (os bloqueados, abaixo,
   ficam bem mais claros). */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #8b9099 !important;
  cursor: pointer !important;
}

.flatpickr-day.flatpickr-disabled {
  color: #e5e7eb !important;
  cursor: not-allowed !important;
}

.flatpickr-day:hover:not(.flatpickr-disabled) {
  background: color-mix(in srgb, var(--green) 15%, transparent) !important;
  color: var(--green) !important;
}

.flatpickr-day.today:not(.selected) {
  border-color: var(--green) !important;
  color: var(--green) !important;
  font-weight: 600 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* .cal-hora */
.flatpickr-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: none !important;
  height: auto !important;
  overflow: visible !important;
  box-sizing: border-box;
}

.flatpickr-time .numInputWrapper {
  width: 100%;
  height: auto !important;
  overflow: visible !important;
  background: none;
  position: relative;
}

.flatpickr-time .numInputWrapper span {
  display: block !important;
  opacity: 1 !important;
  right: 6px !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  cursor: pointer;
}

.flatpickr-time .numInputWrapper span:hover {
  background: color-mix(in srgb, var(--green) 10%, transparent) !important;
  border-radius: 4px !important;
}

.flatpickr-time .numInputWrapper span.arrowUp {
  top: 4px !important;
}

.flatpickr-time .numInputWrapper span.arrowDown {
  top: auto !important;
  bottom: 4px !important;
}

.flatpickr-time .numInputWrapper span:after {
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  top: 6px !important;
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom: 4px solid var(--green) !important;
  border-top: none !important;
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top: 4px solid var(--green) !important;
  border-bottom: none !important;
}

.flatpickr-time input {
  width: 100%;
  min-width: 0;
  height: 44px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 0 22px 0 4px;
  outline: none;
  box-sizing: border-box;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: none !important;
  border: 2px solid var(--green) !important;
  outline: none !important;
}

.flatpickr-time .flatpickr-time-separator {
  font-size: 20px;
  font-weight: 600;
  color: var(--green);
  flex-shrink: 0;
}

/* .cal-confirmar */
/* Pílula como os outros botões de ação; 44px = altura dos campos de hora logo acima. */
.flatpickr-confirm {
  width: 100%;
  margin-top: 20px;
  height: 44px;
  max-height: none; /* o CSS do flatpickr limita em 40px */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #ffffff;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  padding: 0 20px;
  border-radius: var(--radius-botao);
  box-sizing: border-box;
  fill: #ffffff;
  transition: 0.3s;
}

.flatpickr-confirm:hover {
  background: color-mix(in srgb, var(--green) 85%, black);
  transform: scale(1.01);
}

.field textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #787878;
  font-weight: 500;
}

.file-input {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.file-input .file-button {
  background: #111111;
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.03em;
  cursor: pointer;
}

.file-button:hover {
  background: #2a2a2a;
}

.file-name {
  font-size: 13px;
  color: var(--muted);
}

.submit-button {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: var(--radius-botao);
  padding: 0 20px;
  background: var(--green);
  color: var(--green-text);
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.03em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.submit-button:hover {
  background: color-mix(in srgb, var(--green) 85%, black);
}

.submit-button:active {
  transform: scale(0.99);
}

/* Ícones dos botões principais: 18px (sem isso o Lucide fica nos 24px), traço 2. */
.submit-button svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.modal-box--confirmar {
  text-align: center;
}

.modal-subtitulo {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.controle-grupo-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.controle-grupo-stat {
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 14px 16px;
}

.controle-grupo-stat-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.controle-grupo-stat-valor {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #0B2012;
}

.controle-grupo-legenda {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 8px;
}

.controle-grupo-legenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.controle-grupo-legenda-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.controle-grupo-legenda-dot--entrada {
  background: var(--green);
}

.controle-grupo-legenda-dot--saida {
  background: #c0392b;
}

.controle-grupo-grafico-wrap {
  background: #f5f5f5;
  border: 1px dashed #ddd;
  border-radius: 12px;
  padding: 20px;
}

.controle-grupo-grafico-wrap .controle-grupo-vazio {
  position: absolute;
  inset: 0;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* No mobile o gráfico encolhe bastante; sem dados, a caixa ganha altura
   suficiente pro ícone + texto ficarem centralizados com folga. */
.controle-grupo-grafico-wrap:has(.controle-grupo-vazio:not([hidden])) {
  min-height: 160px;
}

.controle-grupo-grafico-wrap .controle-grupo-vazio[hidden] {
  display: none;
}

/* .chart-wrap svg estica o gráfico pra 100%; aqui o ícone volta ao tamanho fixo. */
.chart-wrap .placeholder-vazio > svg {
  width: 24px;
  height: 24px;
  background: #e8e8e8;
}

@media (max-width: 700px) {
  .controle-grupo-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.modal-confirmar-icone {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 16px;
  background: #fdeaea;
  color: #c0392b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-confirmar-icone svg {
  width: 26px;
  height: 26px;
}

.modal-confirmar-titulo {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  text-wrap: balance;
}

.modal-confirmar-texto {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  text-wrap: balance;
}

.modal-confirmar-botoes {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-confirmar-botoes #modal-confirmar-cancelar {
  flex: 1;
  color: var(--muted);
}

.modal-confirmar-botoes #modal-confirmar-confirmar {
  flex: 2;
}

/* Segunda ação, só ícone (ex.: abrir o outro contato no aviso de Juntar). */
.modal-confirmar-botoes #modal-confirmar-extra {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.modal-confirmar-botoes #modal-confirmar-extra[hidden] {
  display: none;
}

.modal-confirmar-botoes .submit-button--danger {
  width: auto;
  height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  background: #c0392b;
  color: #ffffff;
  font-size: 14px;
}

.modal-confirmar-botoes .submit-button--danger:hover {
  background: #a53125;
}

.submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Enviando: o verde normal enche um fundo verde-claro (iniciarProgressoBotao).
   --progresso vai de 0 a 1. */
.submit-button.submit-button--progresso,
.submit-button.submit-button--progresso:hover {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--green) 22%, white);
  color: color-mix(in srgb, var(--green) 62%, black);
}

.submit-button.submit-button--progresso:disabled {
  opacity: 1;
  cursor: progress;
}

.progresso-texto {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.progresso-preenchimento {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: var(--green-text);
  clip-path: inset(0 calc((1 - var(--progresso, 0)) * 100%) 0 0);
  transition: clip-path 0.25s linear;
}

.submit-button--progresso-concluido .progresso-preenchimento {
  transition: clip-path 0.35s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .progresso-preenchimento,
  .submit-button--progresso-concluido .progresso-preenchimento {
    transition: none;
  }
}

.check {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.spin {
  animation: girar 0.8s linear infinite;
}

@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.feedback {
  font-size: 13px;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
}

.feedback--success {
  background: #e3f8ea;
  color: #1e8a4c;
}

.feedback--error {
  background: #fdeaea;
  color: #c0392b;
}

.feedback--info {
  background: #f2f2f2;
  color: var(--text);
}

/* Rascunho recuperado: "Descartar" à direita, neutro (verde é das ações que
   criam ou confirmam; apagar um rascunho não é perigoso a ponto de ir no vermelho). */
.feedback:has(.feedback-descartar) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
}

.feedback .feedback-descartar {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.feedback .feedback-descartar:hover {
  color: #545454;
}

.feedback .feedback-descartar:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 2px;
}

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.login-wrap {
  width: 100%;
  max-width: 440px;
}

.login-card {
  background: var(--card-bg);
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 40px 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.login-logo {
  width: 90px;
  height: auto;
  margin: 0 auto 8px;
  color: var(--green);
}

.login-titulo {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #0B2012;
}

.login-sub {
  margin: 0 0 28px;
  font-size: 14px;
  color: var(--muted);
}

.login-card .field {
  text-align: left;
}

.input-com-icone {
  position: relative;
}

.input-com-icone input {
  padding-right: 44px !important;
}

.botao-olho {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
}

.botao-olho svg {
  width: 18px;
  height: 18px;
}

.botao-olho:hover {
  color: #0B2012;
}

#publico_grupos_busca {
  margin-bottom: 8px;
}

.checkbox-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background: #f7f7f7;
  padding: 0;
}

.checkbox-list-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f7f7f7;
  padding: 8px;
  border-radius: 8px 8px 0 0;
}

.checkbox-list-busca {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background: #ffffff !important;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none !important;
  box-sizing: border-box;
}

.checkbox-list-busca::placeholder {
  color: #787878;
  font-weight: 500;
}

.checkbox-list-itens {
  padding: 0 8px 8px 8px;
}

.checkbox-list-resultado {
  margin: 8px 0 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #787878;
}

.checkbox-list .placeholder {
  margin: 8px 0;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 14px;
}

.checkbox-item:last-child {
  border-bottom: none;
}

.checkbox-item[hidden] {
  display: none !important;
}

.checkbox-visual {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.checkbox-visual input[type='checkbox'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.checkbox-box {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background: #ffffff;
  pointer-events: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.checkbox-box svg {
  width: 13px;
  height: 13px;
  color: #ffffff;
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.checkbox-visual input[type='checkbox']:checked ~ .checkbox-box {
  background: var(--green);
  border-color: var(--green);
}

.checkbox-visual input[type='checkbox']:checked ~ .checkbox-box svg {
  opacity: 1;
}

.checkbox-item label {
  cursor: pointer;
  margin: 0;
  font-weight: 400;
}

.field-checkbox {
  margin-top: -10px;
}

.checkbox-inline {
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  margin: 0;
}

.checkbox-item .checkbox-item-membros {
  color: #787878;
  font-size: 12px;
}

.selecao-contador {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.grupos-busca {
  height: 44px;
  margin-bottom: 8px;
  background: #f7f7f7 !important;
}

#grupos_resultado {
  margin-bottom: 16px;
  color: var(--muted);
  font-weight: 500;
}

#grupos_resultado:empty {
  display: none;
}

#publicos_resultado {
  margin-bottom: 24px;
}

#publicos_resultado:empty {
  display: none;
}

.icon-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-botao);
  background: #f1f1f1;
  color: #4a4a4a;
  cursor: pointer;
}

.icon-button:hover {
  background: #e5e5e5;
}

.icon-button svg {
  width: 16px;
  height: 16px;
}

.icon-button--danger:hover {
  background: #fdeaea;
  color: #c0392b;
}

/* O par verde do --danger (ex.: "Abrir no WhatsApp"). */
.icon-button--sucesso:hover {
  background: color-mix(in srgb, var(--green) 14%, #ffffff);
  color: #1f5f45;
}

/* Âmbar, entre o verde e o vermelho: ação de cuidado que não apaga nada (ex.: Descadastrar). */
.icon-button--aviso:hover {
  background: #fff1e0;
  color: #b45309;
}

.disparos-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.disparos-subtab {
  border: none;
  background: #f2f2f2;
  color: var(--text);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
}

.disparos-subtab--active {
  background: var(--green);
  color: var(--green-text);
}

/* Variante de tabs em estilo sublinhado (sem fundo, linha embaixo da ativa) —
   usada onde não faz sentido o pill-cheio padrão (.disparos-subtab). */
.tabs-underline {
  gap: 24px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 20px;
}

.tabs-underline .disparos-subtab {
  background: none;
  color: var(--muted);
  padding: 0 0 12px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tabs-underline .disparos-subtab--active {
  background: none;
  color: var(--green);
  border-bottom-color: var(--green);
}

.historico-status-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

.historico-status-tabs .disparos-subtab {
  background: none;
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
}

.historico-status-tabs .disparos-subtab--active {
  font-weight: 600;
  background: color-mix(in srgb, var(--green) 10%, transparent);
  color: var(--green);
}

.disparos-tabela-wrap {
  width: 100%;
  overflow-x: auto;
}

.paginacao {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 28px;
  font-size: 13px;
  color: var(--muted);
}

.paginacao button {
  background: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

.paginacao button:hover:not(:disabled) {
  background: #f2f2f2;
}

.paginacao button:disabled {
  opacity: 0.4;
  cursor: default;
}

.disparos-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

[data-panel="publicos"] .disparos-tabela {
  table-layout: fixed;
}

[data-panel="publicos"] .disparos-tabela th:nth-child(3),
[data-panel="publicos"] .disparos-tabela td:nth-child(3) {
  width: 120px;
}

[data-panel="publicos"] .disparos-tabela th:last-child,
[data-panel="publicos"] .disparos-tabela td:last-child {
  width: 90px;
  text-align: right;
}

[data-panel="publicos"] .disparos-tabela td:last-child .disparo-item-acoes {
  justify-content: flex-end;
}

/* Com table-layout: fixed + nowrap, texto longo invadia a coluna do lado. */
[data-panel="publicos"] .disparos-tabela td:nth-child(1),
[data-panel="publicos"] .disparos-tabela td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Histórico (disparos e alterações de grupo) no mobile: as duas tabelas têm a
   mesma ordem de colunas (data, título, info, número, ações, status), então
   viram o mesmo card — título + status, data + ações, e "info · número". */
@media (max-width: 700px) {
  [data-panel="lista-disparos"] .disparos-tabela thead {
    display: none;
  }

  [data-panel="lista-disparos"] .disparos-tabela,
  [data-panel="lista-disparos"] .disparos-tabela tbody {
    display: block;
  }

  [data-panel="lista-disparos"] .disparos-tabela tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      'titulo titulo status'
      'data data acoes'
      'info numero acoes';
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
  }

  [data-panel="lista-disparos"] .disparos-tabela tbody tr:last-child {
    border-bottom: none;
  }

  [data-panel="lista-disparos"] .disparos-tabela td,
  [data-panel="lista-disparos"] .disparos-tabela td.disparos-tabela-campanha {
    min-width: 0;
    max-width: none;
    padding: 0;
    border: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  [data-panel="lista-disparos"] .disparos-tabela td:nth-child(1) {
    grid-area: data;
    font-size: 13px;
    color: var(--muted);
  }

  [data-panel="lista-disparos"] .disparos-tabela td:nth-child(2) {
    grid-area: titulo;
    font-weight: 600;
  }

  [data-panel="lista-disparos"] .disparos-tabela td:nth-child(3) {
    grid-area: info;
    font-size: 13px;
    color: var(--muted);
  }

  [data-panel="lista-disparos"] .disparos-tabela td:nth-child(4) {
    grid-area: numero;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  [data-panel="lista-disparos"] .disparos-tabela td:nth-child(4)::before {
    content: '·';
    margin-right: 8px;
  }

  [data-panel="lista-disparos"] .disparos-tabela td:nth-child(5) {
    grid-area: acoes;
    justify-self: end;
    align-self: end;
  }

  /* Título fica um pouco mais afastado das linhas de detalhe. */
  [data-panel="lista-disparos"] .disparos-tabela td:nth-child(2) {
    margin-bottom: 2px;
  }

  [data-panel="lista-disparos"] .disparos-tabela td:nth-child(6) {
    grid-area: status;
    justify-self: end;
  }

  /* Estado vazio (1 célula só) e skeleton: linha inteira, sem o grid de card. */
  [data-panel="lista-disparos"] .disparos-tabela td.placeholder-td {
    grid-column: 1 / -1;
  }



  /* Título do dia vira um separador entre os cards. */
  [data-panel="lista-disparos"] .disparos-tabela tbody tr.dia-separador {
    display: block;
    padding: 18px 0 6px;
  }

  [data-panel="lista-disparos"] .disparos-tabela tbody tr.dia-separador:first-child {
    padding-top: 4px;
  }

  [data-panel="lista-disparos"] .disparos-tabela tr.dia-separador td {
    display: block;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
  }

  /* A célula da campanha é o título (negrito) do card; a quantidade de grupos
     embaixo dela volta ao peso normal. */
  [data-panel="lista-disparos"] .disparos-tabela .disparo-subinfo {
    font-weight: 400;
  }

  [data-panel="lista-disparos"] .disparos-tabela .disparo-hora-relativa {
    display: inline;
    margin: 0 0 0 6px;
  }

  [data-panel="lista-disparos"] .disparos-tabela .disparo-hora-relativa::before {
    content: '· ';
  }

  [data-panel="lista-disparos"] .disparos-tabela tbody tr.skeleton-linha {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  [data-panel="lista-disparos"] .disparos-tabela .skeleton-linha td:nth-child(n + 3) {
    display: none;
  }
}

/* No mobile a tabela vira uma lista de cards: nome + ações na primeira linha,
   descrição embaixo e "N grupos · número" como rodapé. */
@media (max-width: 700px) {
  [data-panel="publicos"] .disparos-tabela thead {
    display: none;
  }

  [data-panel="publicos"] .disparos-tabela,
  [data-panel="publicos"] .disparos-tabela tbody {
    display: block;
  }

  [data-panel="publicos"] .disparos-tabela tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid #e5e5e5;
  }

  [data-panel="publicos"] .disparos-tabela tbody tr:last-child {
    border-bottom: none;
  }

  [data-panel="publicos"] .disparos-tabela td,
  [data-panel="publicos"] .disparos-tabela td:nth-child(3),
  [data-panel="publicos"] .disparos-tabela td:last-child {
    width: auto;
    padding: 0;
    border: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  [data-panel="publicos"] .disparos-tabela td:nth-child(1) {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    font-weight: 600;
  }

  [data-panel="publicos"] .disparos-tabela td:nth-child(5) {
    order: 2;
    flex: none;
  }

  [data-panel="publicos"] .disparos-tabela td:nth-child(2) {
    order: 3;
    flex-basis: 100%;
    font-size: 13px;
    color: var(--muted);
  }

  /* Some visualmente, mas continua ocupando a linha inteira (altura 0) pra
     manter "grupos · número" na linha de baixo. */
  [data-panel="publicos"] .disparos-tabela td.sem-descricao {
    height: 0;
    overflow: hidden;
    font-size: 0;
    margin-top: -4px;
  }

  [data-panel="publicos"] .disparos-tabela td:nth-child(3),
  [data-panel="publicos"] .disparos-tabela td:nth-child(4) {
    font-size: 13px;
    color: var(--muted);
  }

  [data-panel="publicos"] .disparos-tabela td:nth-child(3) {
    order: 4;
  }

  [data-panel="publicos"] .disparos-tabela td:nth-child(4) {
    order: 5;
  }

  [data-panel="publicos"] .disparos-tabela td:nth-child(4)::before {
    content: '·';
    margin-right: 12px;
  }

  /* Estado vazio (1 célula só) e skeleton: ocupam a linha inteira. */
  [data-panel="publicos"] .disparos-tabela td.placeholder-td,
  [data-panel="publicos"] .disparos-tabela .skeleton-linha td {
    flex-basis: 100%;
  }

  [data-panel="publicos"] .disparos-tabela .skeleton-linha td:nth-child(n + 3) {
    display: none;
  }

  [data-panel="publicos"] .disparos-tabela .skeleton-linha td:nth-child(4)::before {
    content: none;
  }
}

/* Próximos disparos (Visão geral) no mobile: mesmo card do Histórico —
   campanha + status, data, e "público · número". */
@media (max-width: 700px) {
  #vg-proximos-tabela thead {
    display: none;
  }

  #vg-proximos-tabela,
  #vg-proximos-tabela tbody {
    display: block;
  }

  #vg-proximos-tabela tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      'titulo titulo status'
      'data data data'
      'info numero numero';
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
  }

  #vg-proximos-tabela tbody tr:last-child {
    border-bottom: none;
  }

  #vg-proximos-tabela td,
  #vg-proximos-tabela td.disparos-tabela-campanha {
    min-width: 0;
    max-width: none;
    padding: 0;
    border: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #vg-proximos-tabela td:nth-child(1) {
    grid-area: data;
    font-size: 13px;
    color: var(--muted);
  }

  #vg-proximos-tabela td:nth-child(2) {
    grid-area: titulo;
    margin-bottom: 2px;
    font-weight: 600;
  }

  #vg-proximos-tabela td:nth-child(3),
  #vg-proximos-tabela td:nth-child(4) {
    font-size: 13px;
    color: var(--muted);
  }

  #vg-proximos-tabela td:nth-child(3) {
    grid-area: info;
  }

  #vg-proximos-tabela td:nth-child(4) {
    grid-area: numero;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #vg-proximos-tabela td:nth-child(4)::before {
    content: '·';
    margin-right: 8px;
  }

  #vg-proximos-tabela td:nth-child(5) {
    grid-area: status;
    justify-self: end;
  }

  #vg-proximos-tabela .campanha-curta {
    display: none;
  }

  #vg-proximos-tabela .campanha-completa {
    display: inline;
  }

  /* Estado vazio / carregando (1 célula só): linha inteira. */
  #vg-proximos-tabela td[colspan] {
    grid-column: 1 / -1;
  }
}

/* Grupos no mobile: checkbox à esquerda (centralizado no card), nome + ações
   na primeira linha e "tipo · membros · números · comunidade" embaixo. */
@media (max-width: 700px) {
  #grupos_tabela thead {
    display: none;
  }

  #grupos_tabela,
  #grupos_tabela tbody {
    display: block;
  }

  #grupos_tabela tbody tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    padding: 12px 0 12px 36px;
    border-bottom: 1px solid #e5e5e5;
  }

  #grupos_tabela tbody tr:last-child {
    border-bottom: none;
  }

  /* Quebra de linha entre "nome + ações" e os detalhes; a margem negativa
     compensa o row-gap extra dessa linha de altura 0. */
  #grupos_tabela tbody tr::after {
    content: '';
    order: 3;
    flex-basis: 100%;
    margin-top: -4px;
  }

  #grupos_tabela td {
    min-width: 0;
    max-width: none;
    padding: 0;
    border: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #grupos_tabela td.col-checkbox {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
  }

  #grupos_tabela td:nth-child(2) {
    order: 1;
    flex: 1 1 0;
    font-weight: 600;
  }

  #grupos_tabela td:nth-child(9) {
    order: 2;
    flex: none;
  }

  /* Segunda quebra: "números · comunidade" vão pra uma terceira linha. */
  #grupos_tabela tbody tr::before {
    content: '';
    order: 5;
    flex-basis: 100%;
    margin-top: -4px;
  }

  #grupos_tabela td:nth-child(n + 3):nth-child(-n + 8) {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
  }

  /* Linha 2: tipo · membros · movimento · grupos (comunidade). */
  #grupos_tabela td:nth-child(3),
  #grupos_tabela td:nth-child(4),
  #grupos_tabela td.col-movimento,
  #grupos_tabela td.col-grupos-filhos {
    order: 4;
  }

  /* Linha 3: números · comunidade (a comunidade corta com reticências). */
  #grupos_tabela td:nth-child(6) {
    order: 6;
  }

  #grupos_tabela td.col-comunidade {
    order: 7;
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #grupos_tabela td:nth-child(4)::before,
  #grupos_tabela td.col-movimento::before,
  #grupos_tabela td.col-grupos-filhos::before,
  #grupos_tabela td.col-comunidade::before {
    content: '·';
    margin-right: 8px;
  }

  #grupos_tabela td.col-vazia + td.col-comunidade::before {
    content: none;
  }

  #grupos_tabela .sufixo-mobile {
    display: inline;
  }

  #grupos_tabela td.col-vazia {
    display: none;
  }

  /* Estado vazio (1 célula só) e skeleton: linha inteira, sem o recuo do checkbox. */
  #grupos_tabela tbody tr:has(> td[colspan]),
  #grupos_tabela tbody tr.skeleton-linha {
    padding-left: 0;
  }

  #grupos_tabela td[colspan],
  #grupos_tabela .skeleton-linha td {
    position: static;
    transform: none;
    flex-basis: 100%;
  }

  #grupos_tabela .skeleton-linha td:nth-child(n + 3) {
    display: none;
  }

  #grupos_tabela .skeleton-linha td::before,
  #grupos_tabela .skeleton-linha td::after {
    content: none;
  }

  #grupos_selecionar_todos,
  #grupos_lote_cancelar {
    white-space: nowrap;
  }

  /* Barra de seleção em lote: contador em cima, botões embaixo ocupando a largura. */
  [data-panel="grupos"] .grupos-lote-bar {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  [data-panel="grupos"] .grupos-lote-bar .selecao-contador {
    flex-basis: 100%;
  }

  [data-panel="grupos"] .grupos-lote-botoes {
    flex: 1 1 100%;
    justify-content: space-between;
    flex-shrink: 1;
  }
}

.disparos-tabela th {
  text-align: left;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #787878;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #e5e5e5;
  white-space: nowrap;
}

.disparos-tabela td {
  padding: 12px;
  border-bottom: 1px solid #e5e5e5;
  color: var(--text);
  white-space: nowrap;
}

.disparos-tabela tbody tr:last-child td {
  border-bottom: none;
}

#grupos_tabela tbody tr {
  cursor: pointer;
}

/* ===== Histórico: busca + filtros numa linha só ===== */

.historico-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.historico-filtros .grupos-busca {
  flex: 1 1 260px;
  width: auto;
  margin-bottom: 0;
}

/* Busca com uma ação dentro do campo (ex.: "Criar tag" logo depois do texto digitado).
   O left do botão e o padding-right do campo (quando ele encosta na direita) vêm do JS. */
.busca-com-acao {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}

.historico-filtros .busca-com-acao .grupos-busca {
  width: 100%;
}

.busca-acao {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px 0 8px;
  border: 1px solid rgba(44, 159, 114, 0.35);
  border-radius: var(--radius-botao);
  background: #ffffff;
  color: var(--green);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.busca-acao[hidden] {
  display: none;
}

.busca-acao:hover {
  background: #eef8f3;
}

.busca-acao:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.busca-acao:disabled {
  opacity: 0.6;
  cursor: default;
}

.busca-acao svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Nome comprido da tag nova: corta com reticências. */
.busca-acao span {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Busca com X pra limpar (o app.js põe o campo dentro do .busca-limpavel). O lugar do
   campo na linha passa pro embrulho, e o X só aparece com algo digitado. */
.busca-limpavel {
  position: relative;
  margin-bottom: 8px;
}

.busca-limpavel > input.grupos-busca {
  width: 100%;
  margin: 0;
  padding-right: 44px;
}

.historico-filtros > .busca-limpavel {
  flex: 1 1 260px;
  min-width: 0;
  margin-bottom: 0;
}

.contatos-topo > .busca-limpavel {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.conversas-lista-topo > .busca-limpavel {
  margin: 8px 0 0;
}

.busca-limpar {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-botao);
  background: transparent;
  color: #787878;
  cursor: pointer;
}

.busca-limpar:hover {
  background: #ececec;
  color: var(--text);
}

.busca-limpar:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.busca-limpar svg {
  width: 16px;
  height: 16px;
}

.busca-limpavel:has(> input:placeholder-shown) > .busca-limpar {
  display: none;
}

.historico-filtro {
  flex: 0 1 190px;
  min-width: 0;
}

.historico-filtro .custom-select-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historico-limpar-filtros {
  display: block;
  margin: 0 0 8px auto;
}

.historico-limpar-filtros[hidden] {
  display: none;
}

/* No mobile: busca na linha toda, número + período dividindo a de baixo e
   público (nomes longos) numa linha inteira por último. Fica logo depois das
   regras de desktop pra sobrescrevê-las. */
@media (max-width: 700px) {
  .historico-filtros .grupos-busca,
  .historico-filtros > .busca-limpavel {
    flex-basis: 100%;
  }

  .historico-filtro {
    flex: 1 1 0;
  }

  .historico-filtro:has(#filtro_publico_trigger) {
    order: 1;
    flex-basis: 100%;
  }

  .historico-filtro .custom-select-trigger {
    font-size: 13px;
    padding: 6px 10px;
  }

  /* O menu pode ficar mais largo que o botão, sem quebrar as opções em duas
     linhas; o do período (coluna da direita) abre alinhado à direita. */
  .historico-filtro .custom-select-panel {
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: calc(100vw - 64px);
  }

  #filtro_periodo_panel {
    left: auto;
    right: 0;
  }
}

/* ===== Histórico de disparos: agrupado por dia ===== */

.dia-separador td {
  padding: 22px 12px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.disparos-tabela tbody tr.dia-separador:first-child td {
  padding-top: 12px;
}

#disparos_tabela tbody tr.disparo-linha {
  cursor: pointer;
}

#disparos_tabela tbody tr.disparo-linha:hover td {
  background: #fafafa;
}

.disparo-hora-relativa {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.disparo-campanha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.disparo-tipo {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted);
}

.disparo-tipo svg {
  width: 16px;
  height: 16px;
}

.disparo-subinfo {
  display: block;
  margin: 2px 0 0 24px;
  font-size: 12px;
  color: var(--muted);
}

.disparo-status-discreto {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--muted);
}

.disparo-status-discreto svg {
  width: 14px;
  height: 14px;
}

.subtab-contador {
  margin-left: 2px;
  opacity: 0.75;
}

.subtab-contador:empty {
  display: none;
}

.placeholder-vazio .btn-header-acao {
  margin-top: 8px;
}

#grupos_tabela tbody tr .icon-button {
  cursor: pointer;
}

.disparos-tabela td.disparos-tabela-campanha {
  white-space: normal;
  max-width: 260px;
}

.disparo-item-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
}

.disparo-status {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}

.disparo-status--pendente {
  background: #fff4e0;
  color: #9a6700;
}

.disparo-status--processando {
  background: #e0f2fe;
  color: #0369a1;
}

.disparo-status--enviado {
  background: #e3f8ea;
  color: #1c7a41;
}

.disparo-status--erro {
  background: #fdeaea;
  color: #c0392b;
}

.disparo-status--concluido {
  background: #e3f8ea;
  color: #1c7a41;
}

#historico-bloco-grupo-alteracoes[hidden],
#historico-bloco-disparos[hidden] {
  display: none !important;
}

.grupo-tipo-pill {
  flex-shrink: 0;
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}

.grupo-tipo-pill--grupo {
  background: #dbeafe;
  color: #1d4ed8;
}

.grupo-tipo-pill--comunidade {
  background: #fdf0e3;
  color: #b7591b;
}

.editar-grupo-imagem-preview {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin-top: 12px;
  border: 1px solid #ddd;
}

.editar-grupo-imagem-preview[hidden] {
  display: none !important;
}

/* Texto extra ("membros", "grupos") que só aparece nos cards do mobile. */
.sufixo-mobile,
.campanha-completa {
  display: none;
}

.col-comunidade {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#grupos_tabela.tabela-grupos--comunidade .col-comunidade {
  display: none;
}

#grupos_tabela:not(.tabela-grupos--comunidade) .col-grupos-filhos {
  display: none;
}

.col-checkbox {
  width: 36px;
}

td.col-checkbox {
  vertical-align: middle;
}

.grupos-lote-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #f7f7f7;
  border-radius: 12px;
  margin-bottom: 12px;
}

.grupos-lote-bar[hidden] {
  display: none !important;
}

.grupos-lote-bar .selecao-contador {
  margin: 0;
}

.grupos-lote-botoes {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.grupos-lote-aviso {
  margin: -8px 0 16px;
  font-size: 12px;
  color: var(--muted);
}

.grupos-lote-aviso[hidden] {
  display: none !important;
}

/* Dentro de um .field (tags de entrada e saída do grupo/público): respiro em cima, sem o recuo do aviso solto. */
.field > .grupos-lote-aviso {
  margin: 6px 0 0;
}

#alteracao_preview_itens {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#alteracao_preview_itens:empty {
  display: none;
}

.vg-panel {
  width: 100%;
}

.content-row:not(:has(.tab-panel--active)) {
  display: none;
}

.dash-card {
  background: var(--card-bg);
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  min-width: 0;
}

.dash-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dash-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #0B2012;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  cursor: pointer;
}

.card-link svg {
  width: 14px;
  height: 14px;
}
.card-link:hover {
  text-decoration: underline;
}

.alert-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fbe9e6;
  border: 1px solid rgba(192, 57, 43, 0.3);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.alert-bar[hidden] {
  display: none !important;
}
.alert-bar svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #c0392b;
}
.alert-bar p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  flex: 1;
}
.alert-bar strong {
  color: #c0392b;
  font-weight: 600;
}
.alert-link {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #c0392b;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.alert-link:hover {
  text-decoration: underline;
}
.alert-bar .alert-link svg {
  width: 14px;
  height: 14px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.stat-tile {
  padding: 14px 20px 12px;
}

.stat-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 1px;
}

.stat-value {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #0B2012;
  line-height: 0.6;
}

.stat-value.is-danger {
  color: #c0392b;
}

.stat-caption {
  margin: 1px 0 0;
  font-size: 13px;
  color: var(--muted);
  min-height: 16px;
}

.stat-caption.is-danger {
  color: #c0392b;
  font-weight: 500;
}

.stat-caption.is-up {
  color: var(--green-dark);
  font-weight: 500;
}

.vg-content-row {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
}

.vg-content-row > .dash-card {
  display: flex;
  flex-direction: column;
}

.numero-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.numero-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eee;
}
.numero-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.numero-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.numero-info {
  flex: 1;
  min-width: 0;
}
.numero-nome {
  font-size: 14px;
  font-weight: 600;
  color: #0B2012;
  margin: 0 0 2px;
}
.numero-sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.numero-status-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  background: #fdeaea;
  color: #c0392b;
  vertical-align: middle;
}

.numero-stats {
  text-align: right;
  flex-shrink: 0;
}
.numero-stats strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #0B2012;
}
.numero-stats span {
  font-size: 11px;
  color: var(--muted);
}

.chart-wrap {
  position: relative;
  width: 100%;
}
.chart-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.chart-wrap svg[hidden] {
  display: none;
}

.chart-grid-line {
  stroke: #eee;
  stroke-width: 1;
}
.chart-axis-label {
  fill: var(--muted);
  font-size: var(--fonte-eixo, 10.5px);
  font-family: inherit;
}
.chart-linha {
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-ponto {
  fill: var(--green);
}

.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--card-bg);
  border: 1px solid #ddd;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  color: #0B2012;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 5;
}
.chart-tooltip.is-visible {
  opacity: 1;
}
.chart-tooltip small {
  display: block;
  font-weight: 500;
  color: var(--muted);
  font-size: 10.5px;
}

@media (max-width: 980px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .vg-content-row {
    grid-template-columns: 1fr;
  }
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.field-label-row label {
  margin-bottom: 0;
}

.field-label-row .selecao-contador {
  margin: 0;
}

#btn-abrir-modal-publico,
#modal_publico_selecionar_todos,
#editar_publico_selecionar_todos,
#grupos_selecionar_todos {
  color: var(--green);
}

.link-button {
  background: none;
  border: none;
  color: var(--green-dark);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.link-button:hover {
  text-decoration: underline;
}

.link-button--danger {
  color: #c0392b;
}

.btn-header-acao {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--green);
  border: none;
  border-radius: var(--radius-botao);
  color: var(--green-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  padding: 10px 20px;
}

.btn-header-acao svg {
  width: 16px;
  height: 16px;
}

.btn-header-acao[hidden] {
  display: none !important;
}

.btn-header-acao:hover {
  filter: brightness(0.96);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 3000;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.modal-overlay--aberto {
  opacity: 1;
}

.skeleton-linha td {
  padding-top: 14px;
  padding-bottom: 14px;
}

.skeleton-bar {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.checkbox-item-skeleton {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid #e5e5e5;
}

.checkbox-item-skeleton:last-child {
  border-bottom: none;
}

.skeleton-quadrado {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

/* Aviso no cartão branco do painel, com o ícone num círculo da cor do tipo e a
   barra de tempo embaixo. Erro: vermelho; sucesso: verde. */
.toast {
  --toast-cor: #c0392b;
  --toast-fundo-icone: #fdeaea;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 380px;
  max-width: calc(100vw - 40px);
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-lg);
  padding: 12px 10px 14px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  font-size: 14px;
  line-height: 1.45;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.toast--sucesso {
  --toast-cor: var(--green);
  --toast-fundo-icone: #e3f4ec;
}

.toast--visivel {
  opacity: 1;
  transform: none;
}

.toast-icone {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--toast-fundo-icone);
  color: var(--toast-cor);
}

.toast-icone svg {
  width: 16px;
  height: 16px;
}

.toast-texto {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
  overflow-wrap: anywhere;
}

.toast-fechar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.toast-fechar:hover {
  background: #f2f2f2;
  color: var(--text);
}

.toast-fechar:focus-visible {
  outline: 2px solid var(--toast-cor);
  outline-offset: 1px;
}

.toast-fechar svg {
  width: 16px;
  height: 16px;
}

.toast-tempo {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--toast-cor);
  opacity: 0.5;
  transform-origin: left;
  animation: toast-tempo 5s linear forwards;
}

.toast:hover .toast-tempo {
  animation-play-state: paused;
}

@keyframes toast-tempo {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transform: none;
    transition: opacity 0.2s ease;
  }
}

@media (max-width: 700px) {
  #toast-container {
    top: 12px;
    left: 16px;
    right: 16px;
  }

  .toast {
    width: 100%;
    max-width: none;
  }
}

.modal-box:not(.modal-box--drawer) {
  transform: translateX(var(--centro-desvio, 0px)) translateY(8px) scale(0.97);
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.modal-overlay--aberto .modal-box:not(.modal-box--drawer) {
  transform: translateX(var(--centro-desvio, 0px)) translateY(0) scale(1);
  opacity: 1;
}

.modal-overlay[hidden] {
  display: none !important;
}

.modal-overlay--drawer {
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
  transition: opacity var(--gaveta-fechar);
}

/* Gaveta: entra rápido e pousa devagar; sai mais curta, acelerando. O fundo
   acompanha o tempo dela (o fecharModal espera o transitionend do fundo). */
:root {
  --gaveta-abrir: 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  --gaveta-fechar: 0.18s cubic-bezier(0.4, 0, 1, 1);
}

.modal-overlay--drawer.modal-overlay--aberto {
  transition: opacity var(--gaveta-abrir);
}

.modal-box {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 12px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}

.modal-box--confirmar {
  max-width: 380px;
}

.modal-box--controle-grupo {
  max-width: 1040px;
}

.grupos-varios-selecionados [data-action="editar-grupo"] {
  display: none;
}

.modal-overlay--aberto .modal-box--drawer {
  transform: translateX(0);
  transition: transform var(--gaveta-abrir);
}

.modal-box--drawer {
  max-width: 420px;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  overflow-y: auto;
  padding-bottom: 0;
  transform: translateX(100%);
  transition: transform var(--gaveta-fechar);
  display: flex;
  flex-direction: column;
}

.modal-box--drawer form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* A lista de grupos cresce com a tela; em tela baixa, nada encolhe abaixo do
   conteúdo e a gaveta rola (a caixa já tem overflow-y). */
#form-publico-editar,
#editar_publico_grupos_campo {
  min-height: auto;
}

#editar_publico_grupos_campo {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#editar_publico_grupos_campo .checkbox-list {
  flex: 1;
  /* Em tela baixa a gaveta rola em vez de espremer a lista até sumir. O contain
     faz a lista não puxar a altura dos 500+ grupos: ela ocupa o espaço livre
     (no mínimo 60% da tela, entre 320 e 640px) e rola por dentro; a gaveta rola
     pra chegar nas tags e no Salvar. */
  min-height: clamp(320px, 60vh, 640px);
  max-height: none;
  contain: size;
}

/* Ordem de envio: na aba Selecionados, os grupos marcados ganham posição e alça de arrastar. */
.grupo-ordem-alca,
.grupo-ordem-pos {
  display: none;
}

.lista-ordenavel .checkbox-item--marcado .grupo-ordem-alca {
  display: inline-flex;
}

.lista-ordenavel .checkbox-item--marcado .grupo-ordem-pos {
  display: inline-block;
}

.grupo-ordem-alca {
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 28px;
  margin-right: -4px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-botao);
  background: none;
  color: #9a9a9a;
  cursor: grab;
  touch-action: none;
}

.grupo-ordem-alca:hover {
  color: var(--text);
  background: #ececec;
}

.grupo-ordem-alca:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.grupo-ordem-alca svg {
  width: 16px;
  height: 16px;
}

.grupo-ordem-pos {
  flex-shrink: 0;
  min-width: 20px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: #787878;
}

.checkbox-item--arrastando {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #dddddd, 0 6px 16px rgba(11, 32, 18, 0.12);
}

body.arrastando-grupo,
body.arrastando-grupo * {
  cursor: grabbing !important;
  user-select: none;
}

#editar_publico_grupos_campo.campo-vazio {
  flex: 0 0 auto;
}

#editar_publico_grupos_campo.campo-vazio .checkbox-list {
  flex: 0 0 auto;
  min-height: 0;
  contain: none;
}

.modal-box--drawer form .submit-button {
  margin-top: auto;
  flex-shrink: 0;
}

.modal-box--drawer form::after {
  content: '';
  display: block;
  flex-shrink: 0;
  height: 32px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.03em;
}

.modal-close {
  background: none;
  border: none;
  color: #6b6b6b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-botao);
}

.modal-close:hover {
  background: #f1f1f1;
}

.modal-close svg {
  width: 18px;
  height: 18px;
}

.preview {
  width: 100%;
  max-width: 466px;
  position: sticky;
  top: 48px;
}

.preview:not(:has(.tab-panel--active)) {
  display: none;
}

.preview-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
}

.preview-phone {
  background-color: #e5ddd5;
  background-image: url('/img/whatsapp-wallpapers.webp');
  background-size: 300px;
  background-repeat: repeat;
  border: 1px solid #dddddd;
  border-radius: 12px;
  padding: 20px 14px;
  min-height: 240px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.preview-bubble {
  background: #d9fdd3;
  border-radius: 8px;
  max-width: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.preview-image {
  width: 100%;
  display: block;
}

.preview-image[hidden] {
  display: none !important;
}

.preview-video {
  width: 100%;
  display: block;
}

.preview-video[hidden] {
  display: none !important;
}

.preview-audio-wrap {
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  margin-bottom: 8px;
}

.preview-audio-wrap[hidden] {
  display: none !important;
}

.preview-audio {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}

.preview-content {
  padding: 8px 8px 18px 8px;
}

.preview-text {
  margin: 0;
  font-size: 14px;
  color: #111b21;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  line-height: 1.4;
  letter-spacing: -0.03em;
}

.preview-text--placeholder {
  color: #787878;
}

.preview-text code {
  font-family: 'Courier New', ui-monospace, monospace;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 13px;
}

.preview-text .wa-quote {
  display: block;
  border-left: 3px solid #8696a0;
  padding-left: 8px;
  color: #667781;
}

.preview-text .wa-bullet,
.preview-text .wa-numbered {
  display: block;
}

.preview-meta {
  position: absolute;
  bottom: 4px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #667781;
}

.preview-check {
  width: 14px;
  height: 14px;
  color: #53bdeb;
}

.text-toolbar {
  position: fixed;
  display: flex;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #dddddd;
  padding: 6px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 3200;
}

.text-toolbar[hidden] {
  display: none !important;
}

.text-toolbar-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-botao);
  color: var(--text);
  cursor: pointer;
}

.text-toolbar-btn:hover {
  background: #f1f1f1;
}

.text-toolbar-btn--active {
  color: #6b6b6b;
  background: #f0f0f0;
}

.text-toolbar-btn--active:hover {
  background: #e5e5e5;
}

.text-toolbar-btn svg {
  width: 16px;
  height: 16px;
}

.text-toolbar-btn i {
  font-size: 14px;
}

.text-toolbar-divider {
  width: 1px;
  margin: 4px 2px;
  background: #e5e5e5;
}

@media (max-width: 900px) {
  .preview {
    position: static;
    max-width: 488px;
  }

  .app-shell {
    flex-direction: column;
  }

  /* Barra do topo: logo (ou o título da página, depois de rolar) e o Sair.
     A faixa de número desconectado, quando tem, entra numa segunda linha. */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: auto;
    min-height: 56px;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
    padding: 8px 16px;
    box-sizing: border-box;
  }

  .sidebar-logo {
    width: 60px;
    margin: 0;
    flex: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .sidebar-titulo {
    display: block;
    position: absolute;
    left: 16px;
    right: 72px;
    top: 28px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    opacity: 0;
    transform: translateY(calc(-50% + 6px));
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  /* Rolou até o título da página sumir: ele entra no lugar do logo. */
  .sidebar--com-titulo .sidebar-logo {
    opacity: 0;
    transform: translateY(-6px);
  }

  .sidebar--com-titulo .sidebar-titulo {
    opacity: 1;
    transform: translateY(-50%);
  }

  /* Sair: só o ícone, no canto direito da barra do topo. */
  .sidebar .tab--sair {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    justify-content: center;
    border: 1px solid #e5e5e5;
    border-radius: var(--radius-botao);
  }

  .sidebar .tab--sair span {
    display: none;
  }

  /* A lista de números é do desktop; aqui quem caiu vira a faixa vermelha. */
  .sidebar .sidebar-numeros {
    display: none;
  }

  .sidebar .aviso-numeros:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex-basis: calc(100% + 32px);
    margin: 8px -16px -8px;
    background: #fdecea;
    border-top: 1px solid #f5c6c0;
  }

  .aviso-numero {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 13px;
    line-height: 1.3;
    color: #8f2318;
  }

  .aviso-numero + .aviso-numero {
    border-top: 1px solid #f5c6c0;
  }

  .aviso-numero svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: #c0392b;
  }

  .aviso-numero-texto {
    flex: 1;
    min-width: 0;
  }

  .aviso-numero-texto strong {
    font-weight: 600;
  }

  .aviso-numero-reconectar {
    flex: none;
    padding: 7px 12px;
    border: none;
    border-radius: var(--radius-botao);
    background: #c0392b;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.02em;
    cursor: pointer;
  }

  .aviso-numero-reconectar:focus-visible {
    outline: 2px solid #c0392b;
    outline-offset: 2px;
  }

  /* Barra de abas presa no rodapé, com "Novo disparo" no meio. */
  .sidebar-menu {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    height: calc(var(--barra-abas-altura) + env(safe-area-inset-bottom));
    padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    background: #ffffff;
    border-top: 1px solid #e5e5e5;
  }

  .sidebar-menu .sidebar-separador {
    display: none;
  }

  .sidebar-menu .tab {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0 2px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #6b6b6b;
    -webkit-tap-highlight-color: transparent;
  }

  .sidebar-menu .tab span {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Ícone dentro de uma pílula: é ela que fica verde na aba atual. */
  .sidebar-menu .tab svg {
    box-sizing: content-box;
    width: 22px;
    height: 22px;
    padding: 4px 14px;
    border-radius: 999px;
    transition: background-color 0.15s ease;
  }

  .sidebar-menu .tab:not(.tab--active):hover {
    background: transparent;
    color: #6b6b6b;
  }

  /* Sem negrito: o rótulo mais largo cortaria "Novo disparo" em 360px. */
  .sidebar-menu .tab--active {
    background: transparent;
    color: var(--green);
    font-weight: 500;
  }

  .sidebar-menu .tab--active svg {
    background: color-mix(in srgb, var(--green) 13%, #ffffff);
  }

  .sidebar-menu .tab:focus-visible {
    outline-offset: -4px;
  }

  .sidebar-menu .tab[data-tab="visao-geral"] { order: 1; }
  .sidebar-menu .tab[data-tab="lista-disparos"] { order: 2; }
  .sidebar-menu .tab[data-tab="agendar"] { order: 3; }
  .sidebar-menu .tab[data-tab="publicos"] { order: 4; }
  .sidebar-menu .tab[data-tab="grupos"] { order: 5; }

  .sidebar-menu .tab[data-tab="agendar"] svg {
    background: var(--green);
    color: #ffffff;
  }

  .sidebar-menu .tab[data-tab="agendar"].tab--active svg {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, #ffffff);
  }

  .page {
    padding-top: 24px;
    padding-bottom: calc(var(--barra-abas-altura) + env(safe-area-inset-bottom) + 48px);
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .sidebar-logo,
  .sidebar-titulo {
    transition: none;
  }
}

@media (max-width: 480px) {
  .card {
    padding: 22px;
  }
}

/* ===== Novo disparo ===== */

/* Formulário mais estreito com a prévia fixa ao lado (desktop). */
.content-row:has([data-panel="agendar"].tab-panel--active),
.content-row:has(.pagina-editor.tab-panel--active) {
  flex-wrap: nowrap;
}

.card:has(> [data-panel="agendar"].tab-panel--active),
.card:has(> .pagina-editor.tab-panel--active) {
  flex: 1 1 auto;
  max-width: 600px;
  min-width: 0;
}

.preview:has([data-panel="agendar"].tab-panel--active),
.preview:has([data-panel="template-editor"].tab-panel--active),
.preview:has([data-panel="campanha-editor"].tab-panel--active) {
  flex: 0 0 340px;
  max-width: 340px;
  top: 24px;
}

/* "Voltar para Templates/Campanhas", no topo das páginas de edição: em cinza, como
   as ações mais calmas. */
.pagina-voltar {
  margin-bottom: 12px;
}

.link-button.pagina-voltar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 14px;
  color: #3d3d3d;
}

.pagina-voltar-link svg {
  width: 16px;
  height: 16px;
}

.pagina-editor .submit-button {
  margin-top: 8px;
}

.pagina-editor-nota {
  margin: 10px 0 0;
  text-align: center;
}

/* Separa número/público, a mensagem e a data, sem título. */
.form-divisor {
  border: none;
  border-top: 1px solid #eeeeee;
  margin: 28px 0 24px;
}

/* Arquivo: área de arrastar e, depois de escolhido, miniatura + nome.
   (.field na frente pra vencer o ".field label" genérico.) */
.field .dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 16px;
  border: 1.5px dashed #cfcfcf;
  border-radius: 12px;
  background: #fafafa;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.field .dropzone:hover,
.field .dropzone--ativa {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 6%, #ffffff);
}

.field .dropzone[hidden] {
  display: none;
}

.dropzone svg {
  width: 26px;
  height: 26px;
  margin-bottom: 4px;
  color: var(--muted);
}

.dropzone-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.dropzone-dica {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

/* "Trocar" é um <label> dentro do .field: volta a ser link inline. */
.field .arquivo-escolhido .link-button {
  display: inline;
  margin: 0;
  font-size: 13px;
  color: var(--green-dark);
}

.field .arquivo-escolhido .link-button--danger {
  color: #c0392b;
}

.arquivo-escolhido {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}

.arquivo-escolhido[hidden] {
  display: none;
}

.arquivo-miniatura {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #f2f2f2;
  color: var(--muted);
  overflow: hidden;
}

.arquivo-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arquivo-miniatura svg {
  width: 20px;
  height: 20px;
}

.arquivo-escolhido .file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--text);
}

.arquivo-escolhido .link-button {
  flex-shrink: 0;
}

/* Data e hora: atalhos, resumo "Sai ... (em 2h)" e aviso de horário ocupado. */
.atalhos-data {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.atalhos-data:empty {
  display: none;
}

.atalho-data {
  padding: 6px 12px;
  border: 1px solid #dddddd;
  border-radius: var(--radius-botao);
  background: #ffffff;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.atalho-data:hover {
  border-color: var(--green);
  color: var(--green);
}

.data-resumo {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.data-resumo[hidden] {
  display: none;
}

.data-resumo-aviso {
  display: block;
  margin-top: 4px;
  color: #9a6700;
}

/* Erro no próprio campo. */
.field-erro {
  margin: 6px 0 0;
  font-size: 13px;
  color: #c0392b;
}

.field-erro[hidden] {
  display: none;
}

.field--erro input,
.field--erro .custom-select-trigger,
.field--erro .field-date-input,
.field--erro textarea,
.field--erro .checkbox-list {
  border-color: #c0392b !important;
}

/* A busca dentro da lista de grupos não é o campo com erro. */
.field--erro .checkbox-list-busca {
  border-color: #dddddd !important;
}

/* Botão de fechar e "Ver prévia" só existem no modo celular/tablet. */
.preview-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.preview-fechar,
.btn-ver-previa {
  display: none;
}

@media (max-width: 1100px) {
  /* A prévia vira uma folha que abre por cima da tela. */
  .preview:has([data-panel="agendar"].tab-panel--active) {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    max-width: none;
    padding: 16px;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  .preview.preview--aberta:has([data-panel="agendar"].tab-panel--active) {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .preview > [data-panel="agendar"] {
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 16px;
    border-radius: 16px;
    background: #ffffff;
  }

  .preview-fechar {
    display: flex;
  }

  .btn-ver-previa {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: none;
    border-radius: var(--radius-botao);
    background: #0b2012;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    cursor: pointer;
  }

  .btn-ver-previa svg {
    width: 18px;
    height: 18px;
  }

  .card:has(> [data-panel="agendar"].tab-panel--active) {
    max-width: 640px;
  }
}

/* Celular: acima da barra de abas do rodapé. */
@media (max-width: 900px) {
  .btn-ver-previa {
    bottom: calc(var(--barra-abas-altura) + env(safe-area-inset-bottom) + 12px);
  }
}

/* ===== Visão geral: próximo disparo no topo + 3 números ===== */

.vg-proximo {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 20px 24px;
  border-color: color-mix(in srgb, var(--green) 35%, #dddddd);
  background: color-mix(in srgb, var(--green) 5%, #ffffff);
}

.vg-proximo-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--green);
  color: #ffffff;
}

.vg-proximo-icone svg {
  width: 20px;
  height: 20px;
}

.vg-proximo-texto {
  flex: 1;
  min-width: 0;
}

.vg-proximo-rotulo {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
}

.vg-proximo-titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #0b2012;
}

.vg-proximo-detalhe {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.vg-proximo-detalhe:empty {
  display: none;
}

.vg-proximo-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.vg-proximo-acoes:empty {
  display: none;
}

.vg-proximo-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #dddddd;
  border-radius: var(--radius-botao);
  background: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.vg-proximo-botao:hover {
  border-color: var(--green);
  color: var(--green);
}

.vg-proximo-botao svg {
  width: 15px;
  height: 15px;
}

/* Três números em vez de quatro, e rótulos sem caixa alta. */
.stat-grid {
  grid-template-columns: repeat(3, 1fr);
}

.stat-label {
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 13px;
  margin-bottom: 8px;
}

.stat-value {
  line-height: 1.2;
}

.stat-value.is-up {
  color: var(--green);
}

/* O card "Com erro" é um botão (leva ao Histórico) quando há erro. */
.stat-tile--link {
  display: block;
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.stat-tile--link:disabled {
  cursor: default;
}

.stat-tile--link:not(:disabled):hover {
  border-color: #c0392b;
}

.stat-tile p {
  margin-top: 0;
}

.vg-proximos-vazio {
  padding: 24px 12px !important;
  color: var(--muted);
  text-align: center;
}

#vg-proximos-tabela tbody tr.disparo-linha {
  cursor: pointer;
}

@media (max-width: 980px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .vg-proximo {
    flex-wrap: wrap;
    padding: 18px;
  }

  .vg-proximo-texto {
    flex-basis: calc(100% - 62px);
  }

  .vg-proximo-acoes {
    flex-basis: 100%;
  }
}

/* Botão centraliza o conteúdo na vertical por padrão; aqui alinha em cima
   como os outros cards. */
.stat-tile--link {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (max-width: 700px) {
  #vg-proximos-tabela .disparo-subinfo {
    font-weight: 400;
  }

  /* "Hoje, 17:00 · em 2h 8min" numa linha só, igual ao card do Histórico. */
  #vg-proximos-tabela .disparo-hora-relativa {
    display: inline;
    margin: 0 0 0 6px;
  }

  #vg-proximos-tabela .disparo-hora-relativa::before {
    content: '· ';
  }
}

/* ===== Visão geral: entradas e saídas nos grupos ===== */

.vg-movimentacao,
.vz-card {
  margin-bottom: 20px;
}

.vg-movimentacao .controle-grupo-legenda {
  margin-bottom: 0;
}

.vg-movimentacao .chart-wrap:has(.controle-grupo-vazio:not([hidden])),
.vg-movimentacao .chart-wrap:has(#vg-mov-vazio:not([hidden])) {
  min-height: 160px;
}

#vg-mov-vazio {
  padding: 32px 0;
}

.vg-saidas {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eeeeee;
}

.vg-saidas[hidden] {
  display: none;
}

.vg-saidas-titulo {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.vg-saida-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 8px;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.vg-saida-linha:last-child {
  border-bottom: none;
}

.vg-saida-linha:hover {
  background: #fafafa;
}

.vg-saida-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vg-saida-numeros {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--muted);
}

.vg-saida-saidas {
  color: #c0392b;
  font-weight: 500;
}

.vg-saida-linha > svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--muted);
}

@media (max-width: 700px) {
  .vg-movimentacao .dash-card-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .vg-saida-linha {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .vg-saida-nome {
    flex-basis: calc(100% - 28px);
  }

  .vg-saida-numeros {
    order: 3;
    flex-basis: 100%;
  }
}

#vg-mov-vazio[hidden] {
  display: none;
}

/* Tooltip do gráfico de entradas x saídas: uma linha por série. */
.chart-tooltip-linha {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-tooltip-linha + .chart-tooltip-linha {
  margin-top: 2px;
}

.chart-tooltip small {
  margin-top: 2px;
}

@media (max-width: 700px) {
  /* No celular a caixa cinza do gráfico do Controle de Grupo rouba menos largura. */
  .controle-grupo-grafico-wrap {
    padding: 10px 8px;
  }
}

/* Controle de Grupo: escolha de período à esquerda, legenda à direita. */
.controle-grupo-grafico-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.controle-grupo-grafico-topo .controle-grupo-legenda {
  margin-bottom: 0;
}

/* Gráfico de envios: título à esquerda, medida e período à direita. */
.vg-envios-topo {
  flex-wrap: wrap;
  /* Título no topo, como nos outros cards (centralizado, ele descia até o meio
     dos botões do gráfico, que são mais altos). */
  align-items: flex-start;
  gap: 12px;
}

.vg-envios-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 700px) {
  .vg-envios-topo {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Próximos disparos sem nada agendado: sem cabeçalho de colunas, só frase +
   botão, centralizados. */
#vg-proximos-tabela.vg-proximos-tabela--vazia thead {
  display: none;
}

.vg-proximos-vazio {
  border-bottom: none !important;
}

.vg-proximos-vazio p {
  margin: 0 0 12px;
  color: var(--muted);
}

.vg-proximos-vazio .btn-header-acao {
  display: inline-flex;
}

/* Versão secundária (contorno) do botão verde: usada nos cards vazios, pra não
   competir com o "+ Novo disparo" principal do topo. */
.btn-header-acao.btn-header-acao--contorno {
  background: #ffffff;
  border: 1px solid var(--green);
  color: var(--green);
}

.btn-header-acao.btn-header-acao--contorno:hover {
  background: color-mix(in srgb, var(--green) 8%, #ffffff);
}

/* Editar público: abas Selecionados/Todos acima da lista e resumo do que mudou. */
.publico-grupos-filtro {
  margin-bottom: 10px;
}

/* Grupos específicos do Novo agendamento: as abas Selecionados | Todos ficam
   dentro do card, acima da busca, pra o "Selecionar todos" ficar na linha do
   rótulo encostado no card (como o "+ Criar público"). */
.grupos-filtro-no-card {
  display: flex;
  width: fit-content;
  margin-bottom: 10px;
  background: #ffffff;
}

.publico-mudancas {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: #9a6700;
}

.publico-mudancas[hidden] {
  display: none;
}

/* ===== Públicos: título por número, coluna de uso e linha clicável ===== */

[data-panel="publicos"] .disparos-tabela tbody tr.publico-linha {
  cursor: pointer;
}

[data-panel="publicos"] .disparos-tabela tbody tr.publico-linha:hover td {
  background: #fafafa;
}

.separador-contagem {
  margin-left: 6px;
  font-weight: 400;
  color: var(--muted);
}

.publico-uso {
  color: var(--muted);
}

.publico-uso--agendado {
  color: var(--green);
  font-weight: 500;
}

.publico-uso--nunca {
  font-style: normal;
  color: #b0b0b0;
}

@media (max-width: 700px) {
  [data-panel="publicos"] .disparos-tabela tbody tr.dia-separador {
    display: block;
    padding: 18px 0 6px;
    border-bottom: 1px solid #e5e5e5;
  }

  [data-panel="publicos"] .disparos-tabela tbody tr.dia-separador:first-child {
    padding-top: 4px;
  }

  [data-panel="publicos"] .disparos-tabela tr.dia-separador td {
    display: block;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
  }
}

/* O título por número é a última (e única) célula da linha: sem isto herdava o
   alinhamento à direita da coluna de ações. */
[data-panel="publicos"] .disparos-tabela tbody tr.dia-separador td,
[data-panel="publicos"] .disparos-tabela tbody tr.dia-separador td:last-child {
  width: auto;
  text-align: left;
}

[data-panel="publicos"] .disparos-tabela td.publico-uso {
  color: var(--muted);
}

[data-panel="publicos"] .disparos-tabela td.publico-uso--agendado {
  color: var(--green);
  font-weight: 500;
}

[data-panel="publicos"] .disparos-tabela td.publico-uso--nunca {
  color: #b0b0b0;
}

.publico-indisponiveis {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff4e0;
  font-size: 13px;
  color: #9a6700;
}

.publico-indisponiveis[hidden] {
  display: none;
}

/* Na aba "Todos" de Públicos, o número aparece embaixo do nome (os nomes se
   repetem entre números). */
.publico-numero {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

/* O plugin confirmDate limita o botão a 40px quando visível (.visible); aqui
   ele fica com os 44px dos campos de hora. */
.flatpickr-calendar .flatpickr-confirm.visible {
  height: 44px;
  max-height: 44px;
}

/* ===== Grupos: tabela cabendo no card (botões sempre visíveis) ===== */

/* No desktop a comunidade vai pra uma linha embaixo do nome e a coluna some;
   no celular o card já mostra a comunidade na linha de detalhes. */
@media (min-width: 701px) {
  #grupos_tabela th.col-comunidade,
  #grupos_tabela td.col-comunidade {
    display: none;
  }
}

.grupo-comunidade-linha {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 420px;
  font-size: 12px;
  color: var(--muted);
}

/* Números como selos pequenos lado a lado. */
.grupo-numero-selo {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: #f2f2f2;
  font-size: 12px;
  color: var(--text);
}

@media (max-width: 700px) {
  .grupo-comunidade-linha {
    display: none;
  }

  /* No card, os números voltam a ser texto: "JV, Me Company". */
  .grupo-numero-selo {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
    font-size: inherit;
    color: inherit;
  }

  .grupo-numero-selo + .grupo-numero-selo::before {
    content: ', ';
  }
}

/* Nome do grupo pode quebrar linha (os nomes longos alargavam a tabela). */
@media (min-width: 701px) {
  #grupos_tabela td:nth-child(2) {
    white-space: normal;
    min-width: 220px;
  }
}

/* Em telas médias (notebook pequeno) a tabela ainda pode rolar pro lado: a
   coluna de botões fica presa na direita, sempre visível. */
@media (min-width: 701px) {
  #grupos_tabela th:last-child,
  #grupos_tabela td:last-child {
    position: sticky;
    right: 0;
    background: var(--card-bg);
    box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
  }

  #grupos_tabela tbody tr:hover td:last-child {
    background: var(--card-bg);
  }
}

/* Grupos: nome de comunidade é longo, o filtro dela ganha mais espaço. */
.historico-filtros .grupos-filtro-comunidade {
  flex-basis: 260px;
}

@media (max-width: 700px) {
  .historico-filtros .grupos-filtro-comunidade {
    order: 1;
    flex-basis: 100%;
  }
}

/* Editar grupo: foto atual acima da nova e dica da descrição pré-preenchida. */
.grupo-atual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}

.grupo-atual[hidden],
.grupo-atual-dica[hidden] {
  display: none;
}

.grupo-atual img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e5e5e5;
}

.grupo-atual-rotulo {
  font-size: 13px;
  color: var(--muted);
}

.grupo-atual-dica {
  margin: -4px 0 8px;
  font-size: 12px;
  color: var(--muted);
}

/* O display do .link-button venceria o atributo hidden (ex.: "Desfazer troca"
   só aparece depois de trocar o arquivo). */
.arquivo-escolhido [hidden] {
  display: none !important;
}

/* Prévia e nome do arquivo também abrem a escolha de outro arquivo. */
#editar_grupo_imagem_preview,
#editar_grupo_imagem_nome {
  cursor: pointer;
}

/* ===== Grupos: movimento dos últimos 7 dias e ordenação ===== */

#grupos_tabela .col-movimento {
  white-space: nowrap;
}

.mov-entradas {
  color: var(--green);
  font-weight: 600;
}

.mov-saidas {
  margin-left: 6px;
  color: #c0392b;
  font-weight: 600;
}

.mov-entradas.mov-zero,
.mov-saidas.mov-zero {
  color: var(--muted);
  font-weight: 400;
}

#grupos_tabela td.col-movimento.col-vazia {
  color: var(--muted);
}

.historico-filtros .grupos-ordenar {
  flex-basis: 200px;
}

/* Busca + 3 dropdowns numa linha só em notebook (918px de card). */
@media (min-width: 701px) {
  .historico-filtros:has(.grupos-ordenar) .grupos-busca,
  .historico-filtros:has(.grupos-ordenar) > .busca-limpavel {
    flex-basis: 200px;
  }

  .historico-filtros:has(.grupos-ordenar) .grupos-filtro-comunidade {
    flex-basis: 230px;
  }
}

/* No celular, ordenar divide a linha com o filtro de número (comunidade fica
   numa linha inteira embaixo). */
@media (max-width: 700px) {
  .historico-filtros .grupos-ordenar {
    flex: 1 1 0;
  }
}

/* Editar grupo: em quais públicos o grupo está. */
.grupo-publicos {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f5f5f5;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.grupo-publicos[hidden] {
  display: none;
}

.grupo-publicos svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.grupo-publicos strong {
  font-weight: 600;
  color: var(--text);
}

/* Dropdown com busca: topo igual ao da lista de grupos do público
   (.checkbox-list-header + .checkbox-list-busca), preso no alto do painel. */
.custom-select-panel--busca {
  max-height: 340px;
  padding: 0;
}

.custom-select-busca-topo {
  border-bottom: 1px solid #e5e5e5;
}

.custom-select-busca-lista {
  padding: 6px;
}

.custom-select-panel .custom-select-option[hidden],
.custom-select-panel .custom-select-option--vazio[hidden] {
  display: none;
}

.historico-filtros .custom-select[hidden] {
  display: none;
}

/* "Limpar filtros": ação secundária, em cinza (verde é das ações principais,
   vermelho das que apagam). */
.link-button.historico-limpar-filtros {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #6b6b6b;
}

.link-button.historico-limpar-filtros[hidden] {
  display: none;
}

.link-button.historico-limpar-filtros:hover {
  color: var(--text);
  text-decoration: none;
}

.historico-limpar-filtros svg {
  width: 14px;
  height: 14px;
}

/* ===== Sidebar: situação dos números (acima do Sair) ===== */

.sidebar-numeros {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding: 12px 0 4px;
  border-top: 1px solid #eeeeee;
}

.sidebar-numeros[hidden] {
  display: none;
}

/* Com os números no rodapé, é o bloco deles que empurra pro fim, não o Sair. */
.sidebar-numeros:not([hidden]) + .tab--sair {
  margin-top: 0;
}

.sidebar-numero {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Avatar de 32px centrado na mesma coluna dos ícones do menu. */
  padding: 6px 14px 6px 7px;
  font-size: 13px;
  color: #545454;
}

.sidebar-numero-avatar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
}

.sidebar-numero-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Situação: pontinho no canto da foto. */
.sidebar-numero-bolinha {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid #ffffff;
}

.sidebar-numero-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.sidebar-numero-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text);
}

.sidebar-numero-status {
  font-size: 12px;
  color: var(--muted);
}

.sidebar-numero--desconectado .sidebar-numero-bolinha {
  background: #c0392b;
}

.sidebar-numero--desconectado .sidebar-numero-status {
  color: #c0392b;
  font-weight: 600;
}

/* Visão geral, card "Por número": foto do WhatsApp no lugar das iniciais. */
.numero-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ===== Visão geral: skeleton da primeira carga ===== */

.skeleton-bar.vg-skel-titulo,
.skeleton-bar.vg-skel-detalhe,
.skeleton-bar.vg-skel-valor,
.skeleton-bar.vg-skel-legenda,
.skeleton-bar.vg-skel-nome,
.skeleton-bar.vg-skel-sub {
  display: block;
  max-width: 100%;
}

.vg-skel-titulo {
  width: 220px;
  height: 22px;
  margin: 4px 0 6px;
}

.vg-skel-detalhe {
  width: 380px;
  height: 14px;
}

.vg-skel-valor {
  width: 120px;
  height: 30px;
  margin: 2px 0;
}

.vg-skel-legenda {
  width: 75%;
  height: 12px;
}

.vg-skel-numero {
  pointer-events: none;
}

.skeleton-bar.vg-skel-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.vg-skel-nome {
  width: 90px;
  height: 14px;
  margin-bottom: 8px;
}

.vg-skel-sub {
  width: 160px;
  height: 12px;
}

/* Bloco com brilho por cima da área (vazia) do gráfico. */
.skeleton-bar.vg-skel-grafico {
  position: absolute;
  inset: 8px 0;
  height: auto;
  border-radius: 10px;
}

@media (max-width: 700px) {
  /* Skeleton da tabela no card do celular: sem o "·" entre as informações. */
  #vg-proximos-tabela .skeleton-linha td::before,
  #vg-proximos-tabela .skeleton-linha td::after {
    content: none;
  }

  /* No celular o gráfico real tem 260px de altura; o bloco de carregamento
     ocupa o mesmo espaço pra página não pular quando os dados chegam. */
  .chart-wrap:has(> .vg-skel-grafico) {
    min-height: 260px;
  }
}

/* Segunda linha (menor) de uma célula no skeleton das tabelas. */
.skeleton-bar.skeleton-bar--sub {
  height: 10px;
  margin-top: 8px;
}

/* Sidebar: skeleton dos números até a primeira resposta. */
.skeleton-bar.sidebar-skel-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.skeleton-bar.sidebar-skel-nome,
.skeleton-bar.sidebar-skel-status {
  display: block;
}

.sidebar-skel-nome {
  width: 70px;
  height: 12px;
  margin: 3px 0 6px;
}

.sidebar-skel-status {
  width: 56px;
  height: 10px;
  margin-bottom: 2px;
}

.custom-select-busca-topo[hidden] {
  display: none;
}

/* ===== Login: painel da marca + formulário (telas largas) ===== */

.login-marca {
  display: none;
}

.login-lado-form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.login-capslock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #a16207;
}

.login-capslock[hidden] {
  display: none;
}

.login-capslock svg {
  width: 14px;
  height: 14px;
}

@media (min-width: 900px) {
  .login-body {
    display: grid;
    /* Verde com 70%; o formulário nunca fica com menos de 440px. */
    grid-template-columns: minmax(0, 70%) minmax(440px, 1fr);
    align-items: stretch;
    padding: 0;
  }

  /* Verde da marca com a seta da logo em tamanho grande, saindo pela direita:
     o disparo "em movimento". Único elemento gráfico da tela. */
  .login-marca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100vh;
    padding: 56px;
    overflow: hidden;
    background: var(--green);
    color: #ffffff;
  }

  .login-marca-texto {
    position: relative;
    max-width: 300px;
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.92);
  }

  .login-lado-form {
    min-height: 100vh;
    padding: 40px;
    background: #ffffff;
  }

  /* Sem cartão: o formulário fica solto no lado branco, alinhado à esquerda. */
  .login-lado-form .login-card {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    text-align: left;
  }

  .login-lado-form .login-wrap {
    max-width: 360px;
  }

  .login-lado-form .login-logo {
    margin: 0 0 10px;
  }
}

/* Exemplo de mensagem agendada no painel verde do login. */
@media (min-width: 900px) {
  .login-exemplo {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    width: min(400px, 70%);
    transform: translate(-50%, -58%);
    animation: login-balao-chega 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
  }

  /* Balão de mensagem enviada: canto de cima à direita sem arredondar. */
  .login-balao {
    position: relative;
    width: 100%;
    padding: 14px 16px 10px;
    border-radius: 14px 4px 14px 14px;
    background: #ffffff;
    color: #4d4d4d;
    font-size: 15px;
    line-height: 1.45;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  }

  .login-balao p {
    margin: 0 0 6px;
  }

  /* Título quase preto, texto em cinza escuro: hierarquia de mensagem. */
  .login-balao strong {
    font-weight: 700;
    color: #1f2a24;
  }

  .login-balao-hora {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 12px;
    color: #8a8a8a;
  }

  /* Números não descem abaixo da linha de base: o centro visual de "09:00"
     fica acima do centro da caixa do texto, então o ícone sobe um pouco. */
  .login-balao-hora svg {
    display: block;
    width: 13px;
    height: 13px;
    transform: translateY(-1px);
  }

  .login-exemplo-grupos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
  }

  .login-exemplo-grupos svg {
    width: 14px;
    height: 14px;
  }
}

/* Um único movimento: a mensagem chega quando a página abre. */
@keyframes login-balao-chega {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-58% + 14px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -58%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-exemplo {
    animation: none;
  }
}

/* Monitor grande: o exemplo cresce um pouco pra não ficar perdido no verde. */
@media (min-width: 1600px) {
  .login-exemplo {
    width: 500px;
  }

  .login-balao {
    padding: 18px 20px 12px;
    font-size: 17px;
  }

  .login-exemplo-grupos {
    font-size: 14px;
  }

  .login-marca-texto {
    font-size: 22px;
  }
}

/* ===== Calendário de agendamento: horários, resumo e pontinhos ===== */

/* Horários que a equipe mais usa, logo abaixo da hora. */
.cal-horarios {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.cal-horario {
  padding: 8px 0;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-botao);
  background: #ffffff;
  color: #374151;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cal-horario:hover:not(:disabled) {
  border-color: var(--green);
  color: var(--green);
}

.cal-horario--ativo,
.cal-horario--ativo:hover:not(:disabled) {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, #ffffff);
  color: var(--green);
  font-weight: 600;
}

.cal-horario:disabled {
  color: #d1d5db;
  cursor: not-allowed;
}

.cal-horario:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* "Sai quinta, 1 de outubro às 09:00 (em 4 dias)." acima do Confirmar. */
.cal-resumo {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #4d4d4d;
  text-align: center;
}

.cal-resumo[hidden] {
  display: none;
}

.cal-resumo-aviso {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff7e6;
  color: #92400e;
  text-align: left;
}

/* Com o resumo, o Confirmar chega um pouco mais perto. */
.cal-resumo:not([hidden]) + .flatpickr-confirm {
  margin-top: 12px;
}

/* Pontinhos embaixo do número: verde = disparo, cinza = alteração de grupo. */
.flatpickr-day {
  position: relative;
}

.cal-pontos {
  position: absolute;
  left: 50%;
  bottom: 3px;
  display: flex;
  gap: 3px;
  transform: translateX(-50%);
  pointer-events: none;
}

.cal-ponto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.cal-ponto--disparo {
  background: var(--green);
}

.cal-ponto--alteracao {
  background: #9ca3af;
}

/* No dia selecionado (fundo verde) os pontinhos ficam brancos. */
.flatpickr-day.selected .cal-ponto {
  background: #ffffff;
}

.flatpickr-day.selected .cal-ponto--alteracao {
  background: rgba(255, 255, 255, 0.6);
}

.flatpickr-day.flatpickr-disabled .cal-pontos {
  opacity: 0.4;
}

/* O flatpickr limita o calendário aberto a 640px de altura; com os horários,
   o resumo e o aviso de choque passava disso e o Confirmar encostava na borda.
   Limite pela altura da tela, rolando por dentro se precisar. */
.flatpickr-calendar.open {
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow-y: auto !important;
}

/* ===== Calendário largo: hora numa coluna ao lado dos dias =====
   Só quando há espaço (JS decide, ver atualizarCentroCard); nas drawers
   estreitas e no celular o layout continua empilhado, como antes. */
.cal-duas-colunas .flatpickr-calendar {
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 210px;
  column-gap: 20px;
  grid-template-areas:
    'header horaTitulo'
    'days   time'
    'days   chips'
    'resumo resumo'
    'confirm confirm';
}

/* Título do mês só acima dos dias (não estica pela coluna da hora): texto à
   esquerda, as duas setas juntas à direita — em vez do padrão do flatpickr
   (título centralizado, uma seta em cada ponta). */
.cal-duas-colunas .flatpickr-months {
  grid-area: header;
  display: flex;
  align-items: center;
  /* Altura pelo próprio conteúdo (o título ficou maior que os 34px fixados
     antes): com altura fixa, as setas centralizavam nela, não no texto. */
  height: auto;
  min-height: 30px;
}

.cal-duas-colunas .flatpickr-month {
  order: 1;
  flex: 1;
  /* O flatpickr limita essa caixa a uma altura fixa com overflow:hidden (pensada
     pro "Setembro 2026" original, mais baixo) — cortava o "g" de "Domingo" no
     texto novo, maior. */
  height: auto !important;
  overflow: visible !important;
  /* Sobrescreve o text-align:center padrão do flatpickr, que centralizava o
     título dentro dessa caixa mesmo com .flatpickr-current-month à esquerda. */
  text-align: left;
}

/* Some da vista (o <select> de mês e o <input> de ano continuam no DOM
   funcionando — a navegação por mês depende deles); o texto visível vira o
   .cal-titulo-data logo abaixo. */
.cal-mes-original-oculto {
  display: none;
}

/* "Set, 28" em negrito e maior, "Segunda" ao lado, mais leve — mesmo peso
   visual da referência que o cliente mandou. */
.cal-titulo-data {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
}

.cal-titulo-data strong {
  font-weight: 600;
}

.cal-titulo-semana {
  font-weight: 400;
  color: var(--muted);
}

.cal-duas-colunas .flatpickr-prev-month,
.cal-duas-colunas .flatpickr-next-month {
  position: static;
  left: auto;
  right: auto;
  /* Cancela o transform: translateY(-50%) da regra base (pensado pra posição
     absoluta): aqui as setas já centralizam com align-items:center do flex. */
  transform: none !important;
}

.cal-duas-colunas .flatpickr-prev-month {
  order: 2;
}

.cal-duas-colunas .flatpickr-next-month {
  order: 3;
}

.cal-duas-colunas .flatpickr-innerContainer {
  grid-area: days;
}

/* "Horário", mesmo peso/tamanho do título de data ao lado (.cal-titulo-data). */
.cal-hora-titulo {
  grid-area: horaTitulo;
  margin: 12px 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  align-self: center;
}

/* Mesma linha do título de data: à esquerda da coluna e no topo da linha (o
   cabeçalho dos dias tem margem embaixo; centralizado, "Horário" descia). */
.cal-duas-colunas .cal-hora-titulo {
  /* 4px: mesma linha de base do título de data, que centraliza nas setas. */
  margin: 4px 0 0;
  text-align: left;
  align-self: start;
}

.cal-duas-colunas .flatpickr-time {
  grid-area: time;
  align-self: start;
  margin-top: 4px;
}

.cal-duas-colunas .cal-horarios {
  grid-area: chips;
  grid-template-columns: 1fr;
  align-self: start;
}

.cal-duas-colunas .cal-resumo {
  grid-area: resumo;
}

.cal-duas-colunas .flatpickr-confirm {
  grid-area: confirm;
}

/* "Horários mais usados" acima dos botões: linha inteira da grade (5 colunas
   no celular, 1 no calendário largo). */
.cal-horarios-rotulo {
  grid-column: 1 / -1;
  margin: 4px 0 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.cal-duas-colunas .cal-horarios-rotulo {
  text-align: left;
}

/* Fechado, o flatpickr continua no DOM (invisível) com position:absolute logo
   abaixo do campo de data — e esticava a página uns 480px pra baixo, fazendo a
   sidebar (sticky) "subir" junto ao rolar. Fixo, ele não conta na altura.
   O calendário fixo na página (.inline, ex.: período de cadastro) fica de fora. */
.flatpickr-calendar:not(.open):not(.inline) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
}

/* E invisível de verdade: o plugin de Confirmar deixa o botão com
   visibility:visible (showAlways), e aí ele ficava clicável mesmo com o
   calendário fechado — uma faixa invisível no alto da tela roubava cliques
   (itens de dropdown que caíam ali não marcavam). */
.flatpickr-calendar:not(.open):not(.inline),
.flatpickr-calendar:not(.open):not(.inline) * {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===== Reconectar número (QR code / código de 8 dígitos) ===== */

.modal-box--conectar {
  max-width: 420px;
}

.conectar-abas {
  margin: 4px 0 16px;
}

.conectar-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 272px;
  padding: 16px;
  border-radius: 12px;
  background: #f7f7f7;
  text-align: center;
}

.conectar-qrcode {
  display: block;
  width: 240px;
  height: 240px;
  border-radius: 8px;
  background: #ffffff;
}

/* "1234-5678" grande e espaçado, fácil de ler e digitar no celular. */
.conectar-codigo {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
}

.conectar-area .link-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.conectar-area .link-button svg {
  width: 14px;
  height: 14px;
}

.conectar-carregando p,
.conectar-aviso p {
  margin: 0;
  font-size: 14px;
  color: #4d4d4d;
  max-width: 300px;
}

.skeleton-bar.conectar-skel {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 8px;
}

.conectar-carregando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.conectar-aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.conectar-aviso > svg {
  width: 32px;
  height: 32px;
  color: var(--muted);
}

.conectar-aviso--ok > svg {
  color: var(--green);
}

.conectar-aviso--ok p {
  font-weight: 600;
  color: #1f2937;
}

.conectar-passos {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

/* Link "Reconectar" embaixo de "Desconectado" na sidebar. */
.sidebar-numero-reconectar,
.numero-reconectar {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  cursor: pointer;
  text-align: left;
}

/* Pílula com fundo verde claro (o mesmo verde do texto, bem mais leve). */
.sidebar-numero-reconectar,
.numero-reconectar {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-botao);
  background: color-mix(in srgb, var(--green) 12%, #ffffff);
  line-height: 1.4;
  transition: background-color 0.15s ease;
}

.sidebar-numero-reconectar:hover,
.numero-reconectar:hover {
  background: color-mix(in srgb, var(--green) 20%, #ffffff);
}

/* Card "Por número" fora do ar: igual à sidebar — foto em cinza com bolinha
   vermelha no canto e o "Reconectar" à direita, antes dos públicos. */
.numero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.numero-avatar-bolinha {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #c0392b;
  border: 2px solid #ffffff;
}

.numero-row--desconectado .numero-avatar img {
  filter: grayscale(1);
  opacity: 0.7;
}

.numero-reconectar {
  display: block;
  margin: 2px 0 0;
  padding: 1px 10px;
}

/* Número fora: foto em cinza (a queda aparece de relance, antes de ler) e o
   botão logo abaixo do nome, sem espaço extra — mesma altura da linha de cima. */
.sidebar-numero--desconectado .sidebar-numero-avatar img {
  filter: grayscale(1);
  opacity: 0.7;
}

.sidebar-numero .sidebar-numero-reconectar {
  margin-top: 2px;
  padding: 1px 10px;
}

/* ===== Dropdown de vários (públicos do disparo) ===== */

.custom-select-option--multi {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Caixa de marcar: vazia com borda; marcada, verde com o check branco. */
.custom-select-caixa {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid #cfd4da;
  border-radius: 5px;
  background: #ffffff;
  color: transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.custom-select-caixa svg {
  width: 12px;
  height: 12px;
}

.custom-select-option--marcada .custom-select-caixa {
  border-color: var(--green);
  background: var(--green);
  color: #ffffff;
}

.custom-select-option--marcada {
  font-weight: 600;
}

/* Etiquetas dos públicos escolhidos, embaixo do campo (a partir de dois). */
.custom-select-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.custom-select-chips[hidden] {
  display: none;
}

.custom-select-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--green) 12%, #ffffff);
  color: #1f5f45;
  font-size: 13px;
  font-weight: 500;
}

.custom-select-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.custom-select-chip button:hover {
  background: color-mix(in srgb, var(--green) 22%, #ffffff);
}

.custom-select-chip button svg {
  width: 12px;
  height: 12px;
}

/* "31 grupos no total. 4 estão em mais de um público e recebem uma vez só." */
.publicos-resumo {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.publicos-resumo[hidden] {
  display: none;
}

/* ===== Evento (convite do WhatsApp) ===== */

.campos-evento-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field-dica {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.evento-aviso {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f5f5f5;
  font-size: 12px;
  line-height: 1.45;
  color: #545454;
}

.evento-aviso svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--muted);
}

/* Variáveis do grupo no Novo agendamento: botões ao lado do rótulo do Texto e,
   com variável no texto, a lista do nome que cada grupo vai levar. */
.variaveis-grupo-botoes {
  display: inline-flex;
  gap: 14px;
}

.variaveis-grupo {
  margin-top: 12px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background: #f7f7f7;
}

.variaveis-grupo[hidden] {
  display: none;
}

.variaveis-grupo-topo {
  padding: 10px 12px 8px;
  border-bottom: 1px solid #e6e6e6;
}

.variaveis-grupo-titulo {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.variaveis-grupo-topo .field-dica {
  margin-top: 2px;
}

.variaveis-grupo-aviso {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 12px 0;
  font-size: 12px;
  font-weight: 500;
  color: #c0392b;
}

.variaveis-grupo-aviso[hidden] {
  display: none;
}

.variaveis-grupo-aviso svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.variaveis-grupo-lista {
  max-height: 280px;
  overflow-y: auto;
  padding: 0 8px 8px;
}

.variaveis-grupo-lista .placeholder {
  margin: 8px 4px;
}

.variaveis-grupo-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(var(--colunas, 1), 140px);
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid #ececec;
}

.variaveis-grupo-item:last-child {
  border-bottom: 0;
}

/* Rótulos das colunas: fica no topo enquanto a lista rola. */
.variaveis-grupo-cabecalho {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-top: 8px;
  background: #f7f7f7;
  font-size: 12px;
  font-weight: 500;
  color: #787878;
}

.variaveis-grupo-grupo-titulo {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.field .variaveis-grupo-item input[type='text'] {
  height: 34px;
  padding: 4px 10px;
  background: #fff;
}

.field .variaveis-grupo-item input.variaveis-grupo-campo--falta {
  border-color: #c0392b;
}

@media (max-width: 700px) {
  .variaveis-grupo-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .variaveis-grupo-cabecalho {
    display: none;
  }
}

/* Prévia: o cartão do convite como aparece no grupo. */
.preview-evento-wrap {
  width: 100%;
}

.preview-evento-wrap[hidden],
.preview-bubble[hidden] {
  display: none;
}

.preview-evento {
  overflow: hidden;
  border-radius: 8px;
  background: #d9fdd3;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.preview-evento-citado {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 6px 0;
  padding: 8px 10px;
  border-left: 3px solid #1f7a4f;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 12px;
  color: #545454;
}

.preview-evento-citado svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.preview-evento-cartao {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 6px;
  padding: 12px 12px 18px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
}

.preview-evento-icone {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  color: #3b4a54;
}

.preview-evento-icone svg {
  width: 20px;
  height: 20px;
}

.preview-evento-info {
  min-width: 0;
}

.preview-evento-nome {
  margin: 2px 0 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #111b21;
  overflow-wrap: anywhere;
}

.preview-evento-vazio {
  font-weight: 500;
  color: var(--muted);
}

.preview-evento-quando {
  margin: 0;
  font-size: 13px;
  color: #54656f;
}

.preview-evento-hora {
  position: absolute;
  right: 8px;
  bottom: 4px;
  font-size: 11px;
  color: #667781;
}

.preview-evento-acao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 14px;
  font-weight: 600;
  color: #1f7a4f;
}

.preview-evento-acao svg {
  width: 16px;
  height: 16px;
}

.preview-evento--cancelado .preview-evento-acao {
  font-weight: 500;
  color: #8696a0;
}

.preview-evento-detalhes {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  line-height: 1.45;
  color: #3b4a54;
}

.preview-evento-detalhes p {
  margin: 0;
}

.preview-evento-detalhes p + p {
  margin-top: 8px;
}

.preview-evento-detalhes .preview-evento-detalhes-titulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.preview-evento-descricao {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.preview-evento-link span {
  color: #1f7a4f;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.preview-evento-lembrete {
  display: flex;
  align-items: center;
  gap: 6px;
}

.preview-evento-lembrete svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 480px) {
  .campos-evento-linha {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ===== Alteração de grupo (Novo agendamento) ===== */

.alvo-grupos-abas {
  margin-bottom: 0;
}

.campos-alteracao .field-dica {
  margin-top: 8px;
}

/* Prévia: o topo da tela de dados do grupo no WhatsApp. */
.preview-grupo-wrap {
  width: 100%;
}

.preview-grupo-wrap[hidden] {
  display: none;
}

.preview-grupo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 18px 18px;
  border-radius: 10px;
  background: #ffffff;
  text-align: center;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.preview-grupo-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 50%;
  background: #dfe5e7;
  color: #ffffff;
}

.preview-grupo-foto svg {
  width: 44px;
  height: 44px;
}

.preview-grupo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Imagem é o que muda: um anel verde marca que é a nova. */
.preview-grupo-foto--nova:has(img) {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--green);
}

.preview-grupo-nome {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #111b21;
  overflow-wrap: anywhere;
}

.preview-grupo-outros,
.preview-grupo-dica {
  margin: 4px 0 0;
  font-size: 13px;
  color: #667781;
}

.preview-grupo-descricao {
  width: 100%;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e9edef;
  text-align: left;
}

.preview-grupo-descricao-rotulo {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #1f7a4f;
}

.preview-grupo-descricao-texto {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #111b21;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Grupos específicos (alteração): mesma altura do painel de Públicos com busca. */
#grupos_especificos_campo .checkbox-list,
#evento_grupos_campo .checkbox-list {
  max-height: 340px;
}

/* Grupos do evento: Só alguns. */
.evento-grupos-escolha {
  margin-top: 12px;
}

.evento-grupos-escolha .field-label-row {
  margin-bottom: 8px;
}

.evento-grupos-escolha .field-dica {
  margin: 0;
}

/* Prévia com grupos específicos: pra onde a mensagem ou o evento vai. */
.preview-destino {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background: #ffffff;
  font-size: 13px;
}

.preview-destino[hidden] {
  display: none;
}

.preview-destino-titulo {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--text);
}

/* Na prévia a lista muda a cada grupo marcado: em vez de "Ver os outros", rola. */
.preview-destino .lista-grupos {
  margin-top: 0;
}

.preview-destino .lista-grupos ul {
  max-height: 200px;
  overflow-y: auto;
  color: var(--text);
}

/* Agenda do dia, embaixo da prévia: o que ainda sai no dia escolhido, em
   linha do tempo (horário à esquerda, ligado ao cartão de cada agendamento). */
.agenda-dia {
  margin-top: 24px;
  padding: 20px 16px 16px;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #ffffff;
}

.agenda-dia[hidden] {
  display: none;
}

.agenda-dia-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.agenda-dia-cabecalho .preview-label {
  margin-bottom: 0;
}

.agenda-dia-contagem {
  font-size: 13px;
  color: var(--muted);
}

.agenda-dia-data {
  margin: 2px 0 14px;
  font-size: 13px;
  color: #545454;
}

.agenda-dia-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 -8px 0 0;
  padding: 0 8px 0 0;
  list-style: none;
  max-height: 380px;
  overflow-y: auto;
}

/* Tem mais embaixo: o pé da lista esmaece (a barra fina quase não aparece). */
.agenda-dia-lista--mais {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
}

@supports not selector(::-webkit-scrollbar) {
  .agenda-dia-lista {
    scrollbar-width: thin;
    scrollbar-color: #d6d6d6 transparent;
  }
}

.agenda-dia-lista::-webkit-scrollbar {
  width: 6px;
}

.agenda-dia-lista::-webkit-scrollbar-button {
  display: none;
}

.agenda-dia-lista::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #d6d6d6;
}

.agenda-dia-lista::-webkit-scrollbar-thumb:hover {
  background: #b5b5b5;
}

/* Cada linha: horário | ponto e traço até o cartão | cartão (selo + texto).
   A cor do cartão diz o que ele é: normal, este agendamento (verde) ou choque
   de horário (âmbar); o ponto e o traço seguem a mesma cor. */
.agenda-dia-item {
  --agenda-cor: #cfcfcf;
  --agenda-fundo: #fafafa;
  --agenda-borda: #e5e5e5;
  display: grid;
  grid-template-columns: 38px 20px minmax(0, 1fr);
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
}

.agenda-dia-item:focus-visible {
  outline: none;
}

.agenda-dia-item:focus-visible .agenda-dia-cartao {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.agenda-dia-quando {
  display: flex;
  flex-direction: column;
}

.agenda-dia-hora {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: #545454;
}

.agenda-dia-falta {
  font-size: 11px;
  line-height: 14px;
  color: var(--muted);
}

/* Ponto encostado no horário e traço até o cartão. */
.agenda-dia-ligacao {
  position: relative;
  height: 7px;
}

.agenda-dia-ligacao::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--agenda-cor);
}

.agenda-dia-ligacao::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 8px;
  right: 0;
  height: 1px;
  background: var(--agenda-cor);
}

.agenda-dia-cartao {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--agenda-borda);
  border-radius: 10px;
  background: var(--agenda-fundo);
  transition: border-color 0.15s ease;
}

.agenda-dia-item:hover .agenda-dia-cartao {
  border-color: #cfcfcf;
}

.agenda-dia-selo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e8e8e8;
  color: #545454;
}

.agenda-dia-selo svg {
  width: 14px;
  height: 14px;
}

.agenda-dia-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.agenda-dia-titulo {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: var(--text);
}

.agenda-dia-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 12px;
  line-height: 16px;
  color: #545454;
}

.agenda-dia-alvo {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.agenda-dia-numero {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  color: var(--muted);
}

.agenda-dia-numero svg {
  width: 12px;
  height: 12px;
}

/* Este agendamento: verde do painel; não abre nada. */
.agenda-dia-item--novo {
  --agenda-cor: var(--green);
  --agenda-fundo: color-mix(in srgb, var(--green) 8%, #ffffff);
  --agenda-borda: color-mix(in srgb, var(--green) 35%, #ffffff);
  cursor: default;
}

.agenda-dia-item--novo .agenda-dia-selo {
  background: var(--green);
  color: #ffffff;
}

.agenda-dia-item--novo:hover .agenda-dia-cartao {
  border-color: var(--agenda-borda);
}

.agenda-dia-item--novo .agenda-dia-hora,
.agenda-dia-item--novo .agenda-dia-titulo {
  color: #1f7a55;
}

/* Choque de horário (mesma regra do aviso da data): o envio que bate fica âmbar. */
.agenda-dia-item--choque {
  --agenda-cor: #c9971c;
  --agenda-fundo: #fff8e6;
  --agenda-borda: #f0d58a;
}

.agenda-dia-item--choque:not(.agenda-dia-item--novo) .agenda-dia-selo {
  background: #fdecc0;
  color: #9a6700;
}

.agenda-dia-item--choque .agenda-dia-hora {
  color: #9a6700;
}

.agenda-dia-aviso {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: #9a6700;
}

.agenda-dia-aviso svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 1.5px;
}

.agenda-dia-vazio {
  padding: 14px;
  border: 1px dashed #dcdcdc;
  border-radius: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* ===== Novo agendamento: várias partes ===== */

/* "O que vai neste agendamento": liga e desliga cada parte; o check aparece
   nas marcadas (é seleção múltipla, não abas). */
.tipos-envio {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Linhas iguais: um nome que quebra em duas linhas não deixa um cartão maior. */
  grid-auto-rows: 1fr;
  gap: 8px;
}

.tipo-envio {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-botao);
  background: #ffffff;
  color: #545454;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.tipo-envio svg {
  width: 18px;
  height: 18px;
}

.tipo-envio span {
  line-height: 1.25;
}

.tipo-envio:hover {
  border-color: #cfcfcf;
}

.tipo-envio--ativo {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 7%, #ffffff);
  color: var(--green);
  font-weight: 600;
}

.tipo-envio--ativo:hover {
  border-color: var(--green);
}

/* Item aberto (os campos na tela são dele): borda dupla e fundo mais forte. */
.tipo-envio--vista {
  background: color-mix(in srgb, var(--green) 14%, #ffffff);
  box-shadow: inset 0 0 0 1px var(--green);
}

/* Item marcado com campo faltando (e fechado): borda vermelha até abrir. */
.tipo-envio--erro,
.tipo-envio--erro:hover {
  border-color: #c0392b;
  box-shadow: inset 0 0 0 1px #c0392b;
}

/* Item aberto (com outros marcados): ao passar o mouse, o ✓ vira ✕ vermelho,
   porque clicar de novo tira do agendamento. */
.tipo-envio .tipo-envio-tirar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  padding: 2px;
  border-radius: 50%;
  background: #c0392b;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.tipo-envio--removivel:hover .tipo-envio-check,
.tipo-envio--removivel:focus-visible .tipo-envio-check {
  opacity: 0;
}

.tipo-envio--removivel:hover .tipo-envio-tirar,
.tipo-envio--removivel:focus-visible .tipo-envio-tirar {
  opacity: 1;
}

.tipo-envio--removivel:hover {
  border-color: #c0392b;
  background: color-mix(in srgb, #c0392b 8%, #ffffff);
  color: #c0392b;
  box-shadow: inset 0 0 0 1px #c0392b;
}

.tipo-envio:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.tipo-envio .tipo-envio-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  padding: 2px;
  border-radius: 50%;
  background: var(--green);
  color: #ffffff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.tipo-envio--ativo .tipo-envio-check {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .tipo-envio,
  .tipo-envio .tipo-envio-check,
  .tipo-envio .tipo-envio-tirar {
    transition: none;
  }
}

@media (max-width: 480px) {
  .tipos-envio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.campos-alteracao-nome {
  margin: -8px 0 20px;
}

/* Prévia com várias partes: grupo, mensagem e evento, um embaixo do outro. */
.preview-phone {
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 10px;
}

.disparo-subinfo--solta {
  margin-left: 0;
}

/* ===== Agendamentos (lista única) ===== */

.agendamento-subinfo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* O que vai no agendamento: um ícone por parte. */
.agendamento-partes {
  display: inline-flex;
  gap: 3px;
}

.agendamento-parte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #f1f1f1;
  color: #545454;
}

.agendamento-parte svg {
  width: 13px;
  height: 13px;
}

/* Detalhe do agendamento (gaveta). */
.modal-box--agendamento {
  max-width: 460px;
}

.agendamento-conteudo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 24px;
}

/* Resumo do agendamento: rótulo à esquerda, valor e detalhe à direita. */
.agendamento-resumo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #f7f7f7;
  font-size: 13px;
  color: var(--text);
}

.agendamento-resumo-linha {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
}

.agendamento-resumo dt {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.agendamento-resumo dd {
  min-width: 0;
  margin: 0;
  color: #111b21;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Lista de grupos específicos (gaveta do agendamento e prévia): o começo igual de
   todos uma vez só e um grupo por linha. */
.lista-grupos {
  margin-top: 10px;
}

.lista-grupos-comeco {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}

.lista-grupos ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.lista-grupos li {
  padding: 7px 10px;
  font-weight: 400;
  line-height: 1.4;
}

.lista-grupos li + li {
  border-top: 1px solid #efefef;
}

.lista-grupos li[hidden] {
  display: none;
}

.lista-grupos-mais .link-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

.lista-grupos-mais .link-button:hover {
  color: var(--text);
}

.lista-grupos-mais .link-button svg {
  width: 14px;
  height: 14px;
}

.agendamento-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}

.agendamento-item-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agendamento-item-nome {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.agendamento-item-nome svg {
  width: 17px;
  height: 17px;
  color: #545454;
}

.agendamento-item-situacao {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.agendamento-item-situacao--processando {
  color: #b7791f;
}

.agendamento-item-situacao--erro {
  color: #c0392b;
  font-weight: 600;
}

.agendamento-previa {
  min-height: 0;
  padding: 12px;
  box-shadow: none;
}

.agendamento-foto {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.agendamento-texto {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f7f7f7;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agendamento-grupos-titulo {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #c0392b;
}

.agendamento-grupos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  font-size: 13px;
}

.agendamento-grupos li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
}

.agendamento-grupos li span {
  flex: none;
  font-size: 12px;
  color: var(--muted);
}

.agendamento-grupos .agendamento-grupo--erro,
.agendamento-grupos .agendamento-grupo--erro span {
  color: #c0392b;
}

.agendamento-item-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Ações da parte (Editar, Avisar cancelamento): botão cinza discreto, no
   mesmo tom do .icon-button, em vez de link verde. */
.agendamento-item-acoes .link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 auto;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-botao);
  background: #f1f1f1;
  color: #3d3d3d;
  font-size: 13px;
  font-weight: 500;
}

.agendamento-item-acoes .link-button:hover {
  background: #e5e5e5;
  text-decoration: none;
}

.agendamento-item-acoes .link-button:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
}

.agendamento-item-acoes svg {
  width: 14px;
  height: 14px;
}

/* Rodapé fixo da gaveta: a ação principal ocupa a largura; as outras são ícones. */
.agendamento-rodape {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -32px;
  padding: 14px 32px 20px;
  border-top: 1px solid #eeeeee;
  background: #ffffff;
}

.agendamento-rodape[hidden] {
  display: none;
}

.agendamento-rodape-principal {
  flex: 1;
  justify-content: center;
  /* Mesma altura do "Confirmar" do calendário de data e hora. */
  height: 44px;
  padding: 0 20px;
  white-space: nowrap;
}

.agendamento-rodape .agendamento-rodape-icone {
  flex: none;
  width: 44px;
  height: 44px;
  /* Quadrado arredondado, como os ícones de editar. */
  border-radius: var(--radius-botao);
}

/* O display: flex do .icon-button passava por cima do hidden. */
.agendamento-rodape .agendamento-rodape-icone[hidden] {
  display: none;
}

.agendamento-rodape-icone svg {
  width: 18px;
  height: 18px;
}

/* Menu: "Agendamentos" não cabe na barra de abas do celular; lá vai "Agenda". */
.tab-rotulo-curto {
  display: none;
}

@media (max-width: 900px) {
  .sidebar-menu .tab .tab-rotulo {
    display: none;
  }

  .sidebar-menu .tab .tab-rotulo-curto {
    display: inline;
  }
}

/* ===== Editar agendamento (o formulário do Novo agendamento numa gaveta) ===== */

/* Mesma largura das outras gavetas; os cartões vão em 2 linhas de 2. */
#editar_agendamento_corpo .tipos-envio {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editar-agendamento-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 24px;
}

/* Na edição o número fica travado. */
.form-disparo--edicao #numero_id_trigger:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Gavetas de agendamento: só o conteúdo rola (o título e o ✕ ficam no topo);
   sem isso, a caixa e o conteúdo mostravam duas barras. */
.modal-box--agendamento,
.modal-box--editar-agendamento {
  overflow: hidden;
}

/* Barra de rolagem fina e discreta. No Chrome, scrollbar-width faz ele ignorar
   o ::-webkit-scrollbar (e voltar as setinhas): o padrão fica só pro Firefox. */
@supports not selector(::-webkit-scrollbar) {
  .agendamento-conteudo,
  .editar-agendamento-corpo {
    scrollbar-width: thin;
    scrollbar-color: #d6d6d6 transparent;
  }
}

.agendamento-conteudo::-webkit-scrollbar,
.editar-agendamento-corpo::-webkit-scrollbar {
  width: 8px;
}

.agendamento-conteudo::-webkit-scrollbar-button,
.editar-agendamento-corpo::-webkit-scrollbar-button {
  display: none;
}

.agendamento-conteudo::-webkit-scrollbar-thumb,
.editar-agendamento-corpo::-webkit-scrollbar-thumb {
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #d6d6d6;
}

.agendamento-conteudo::-webkit-scrollbar-thumb:hover,
.editar-agendamento-corpo::-webkit-scrollbar-thumb:hover {
  background: #b5b5b5;
}

/* Com uma janela ou gaveta aberta, a página atrás não rola (senão aparecem
   duas barras: a da página e a da gaveta). */
html:has(.modal-overlay:not([hidden])) {
  overflow: hidden;
}

/* Sem a barra, a página ficava mais larga e o conteúdo pulava pro lado ao
   abrir. Se ela tinha barra (abrirModal mede), o body ganha a largura dela à
   direita. Não é scrollbar-gutter: esse encolhe também a área dos fixos e a
   gaveta deixava uma faixa vazia na borda. */
html.pagina-com-barra body {
  padding-right: var(--largura-barra, 0px);
}

/* A área que rola vai até a borda da gaveta (a barra encosta na extremidade);
   o respiro do conteúdo continua por dentro. */
.agendamento-conteudo,
.editar-agendamento-corpo {
  margin-right: calc(-1 * var(--gaveta-respiro, 32px));
  padding-right: calc(var(--gaveta-respiro, 32px) - 8px);
}

/* A confirmação (excluir, tirar, avisar cancelamento) abre por cima de qualquer
   janela ou gaveta — senão, aberta de dentro de uma gaveta, ficava atrás dela. */
#modal-confirmar-overlay {
  z-index: 3050;
}

/* Aviso de que só a aba ativa (Públicos ou Grupos específicos) vale. */
.alvo-grupos-aviso {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #545454;
}

.alvo-grupos-aviso[hidden] {
  display: none;
}

.alvo-grupos-aviso svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: var(--muted);
}

/* ===== Contatos ===== */

/* Só no computador por enquanto: no celular a aba não aparece. */
@media (max-width: 900px) {
  .sidebar-menu .tab--so-computador,
  .page-header-acoes {
    display: none !important;
  }
}

.page-header-acoes {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

[data-panel="contatos"] .link-button svg {
  width: 15px;
  height: 15px;
}

#contatos_tags_em_massa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-header-acoes[hidden] {
  display: none;
}

.historico-filtros .contatos-filtro-tags {
  flex: 0 1 200px;
}

.contatos-chips-sem .custom-select-chip {
  background: #fdecec;
  color: #9b2c2c;
}

#contatos_tabela tbody tr[data-contato-id] {
  cursor: pointer;
}

.contato-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.contato-tag {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: #f2f2f2;
  font-size: 12px;
  color: var(--text);
}

.contato-tag--mais {
  color: var(--muted);
}

.contatos-vazio {
  color: var(--muted);
}

.contato-selo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: #fdecec;
  color: #9b2c2c;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

/* Descadastrado: âmbar como o botão Descadastrar (pausa, não erro), com o sino cortado. */
.contato-selo--descadastrado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 9px;
  background: #fff4e6;
  color: #9a4a0b;
  box-shadow: inset 0 0 0 1px #f6dcbc;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}

.contato-selo--descadastrado svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Na gaveta, o selo fica numa linha só dele, em cima do texto de entrada. */
.contato-resumo .contato-selo.contato-selo--descadastrado {
  display: flex;
  width: fit-content;
  margin: 6px 0 8px;
}

.contato-selo--principal {
  margin-left: 0;
  background: color-mix(in srgb, var(--green) 12%, #ffffff);
  color: #1f5f45;
}

.contato-gaveta-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 16px;
}

.contato-telefones,
.contato-campos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

/* Mesma altura dos campos (44px); o texto alinha com o dos inputs (12px). */
.contato-telefone {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px 0 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-sizing: border-box;
}

.contato-telefone > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contato-telefone > :not(:first-child) {
  flex-shrink: 0;
}

/* Confirmar ao lado do campo: quadrado na altura dele. */
.contato-linha-adicionar .icon-button {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.contato-linha-adicionar,
.contato-campo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contato-linha-adicionar input,
.contato-campo input {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.contato-tags-chips {
  margin: 0 0 8px;
}

.contato-tag-criar {
  margin-top: 8px;
}

.contato-gaveta-acoes {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.contato-gaveta-acoes[hidden] {
  display: none;
}

#modal-contato-overlay .link-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#modal-contato-overlay .link-button svg {
  width: 15px;
  height: 15px;
}

#tags_tabela td:nth-child(3) {
  white-space: nowrap;
}

#tags_tabela .col-checkbox {
  padding-right: 0;
  overflow: visible;
}

#tags_tabela tr.contato-linha--marcada td {
  background: #f1f8f1;
}

#tag_renomear_aviso {
  color: #9a6700;
}

#tags_tabela th:last-child,
#tags_tabela td:last-child {
  width: 1%;
}

.modal-box--importar {
  max-width: 760px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

.importar-arquivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 24px;
  border: 1px dashed #ccc;
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
}

.importar-arquivo:hover {
  background: #fafafa;
}

.importar-arquivo svg {
  width: 32px;
  height: 32px;
}

.importar-arquivo-titulo {
  font-weight: 600;
}

.importar-colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin-bottom: 20px;
}

.importar-coluna {
  display: flex;
  align-items: center;
  gap: 8px;
}

.importar-coluna-nome {
  flex: 0 0 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}

.importar-coluna .custom-select {
  flex: 1;
  min-width: 0;
}

.importar-previa td {
  font-size: 13px;
}

.importar-invalido {
  color: #9b2c2c;
}

.importar-botoes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.importar-botoes .submit-button {
  width: auto;
  margin-left: auto;
}

.importar-status {
  font-weight: 600;
}

.importar-barra {
  height: 8px;
  border-radius: var(--radius-pill);
  background: #eee;
  overflow: hidden;
  margin: 12px 0;
}

.importar-barra-preenchimento {
  height: 100%;
  width: 0;
  background: var(--green);
  transition: width 0.3s ease;
}

.importar-resumo ul {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.8;
}

/* Fim da importação: só a quantidade de conflitos e o caminho pra aba Conflitos. */
.importar-conflitos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fbf3e4;
  color: #5c4010;
  font-size: 14px;
  line-height: 1.45;
}

.importar-conflitos > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #a86c12;
}

.importar-conflitos > span {
  flex: 1;
  min-width: 200px;
}

.importar-conflitos .link-button {
  font-size: 14px;
  color: #5c4010;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.importar-botoes .submit-button[hidden] {
  display: none;
}

/* ===== Templates ===== */

.tpl-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff7e6;
  color: #7a4b00;
  font-size: 14px;
}

.tpl-aviso[hidden] {
  display: none;
}

.tpl-aviso svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

#templates_tabela tbody tr[data-template-id] {
  cursor: pointer;
}

.tpl-selo {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.tpl-selo--verde { background: color-mix(in srgb, var(--green) 14%, #ffffff); color: #1f5f45; }
.tpl-selo--amarelo { background: #fff4d6; color: #7a5a00; }
.tpl-selo--vermelho { background: #fdecec; color: #9b2c2c; }
.tpl-selo--cinza { background: #efefef; color: #555555; }

.tpl-motivo {
  margin: 4px 0 0;
  color: #9b2c2c;
  font-size: 12px;
}

.tpl-gaveta-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 16px;
}

.tpl-gaveta-selos {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.tpl-previa {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.tpl-previa-cabecalho {
  margin: 0 0 4px;
  font-weight: 700;
}

.tpl-previa-midia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 140px;
  background: #cfe9c7;
  color: #3f6b37;
}

.tpl-previa-midia--doc {
  height: 64px;
  justify-content: flex-start;
  padding: 0 14px;
}

.tpl-previa-rodape {
  margin: 4px 0 0;
  color: #667781;
  font-size: 12px;
}

.tpl-previa-botoes {
  display: flex;
  flex-direction: column;
}

/* Como no WhatsApp: dentro do balão, separados por linha fina, texto verde. */
.tpl-previa-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: #008069;
  font-size: 14px;
  font-weight: 500;
}

.tpl-previa-botao svg {
  width: 15px;
  height: 15px;
}

.tpl-corpo-rodape {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
}

.tpl-subtitulo {
  margin: 0 0 2px;
  font-weight: 600;
}

/* Botões do editor: um card por botão, em linhas (Tipo | Texto | ícones), como na Meta. */
.tpl-botoes-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tpl-botoes-total {
  font-size: 13px;
  color: var(--muted);
}

#tpl_botoes_campo .tpl-botoes-dica {
  margin: -2px 0 10px;
}

.tpl-botao {
  position: relative;
  margin-bottom: 10px;
  padding: 14px 14px 6px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}

.tpl-botao-linha {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tpl-botao .field {
  margin-bottom: 8px;
}

.tpl-botao .field label {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #555555;
}

.tpl-botao-col-tipo {
  flex: 0 0 175px;
  min-width: 0;
}

/* "Muda a cada campanha" precisa caber inteiro no gatilho. */
.tpl-botao-col-url {
  flex-basis: 220px;
}

.tpl-botao-col-texto {
  flex: 1;
  min-width: 0;
}

/* Links rastreados: opção no editor e destino/lista na gaveta. */
.tpl-botao-rastrear { margin: 4px 0 10px; font-size: 14px; }
.tpl-link-destino { display: flex; gap: 8px; }
.tpl-link-destino input { flex: 1; min-width: 0; }
/* Quem clicou: uma pessoa por linha, nome e telefone à esquerda, quando e quantas vezes à direita. */
.cliques-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cliques-resumo { margin: 0; font-size: 14px; color: var(--muted); }
.cliques-resumo strong { color: var(--text); font-weight: 600; }
.cliques-exportar { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius-botao); color: #3d3d3d; font-size: 14px; font-weight: 500; }
.cliques-exportar:hover { background: #eeeeee; text-decoration: none; }
.cliques-exportar svg { width: 15px; height: 15px; }
.cliques-lista { margin: 0; padding: 0; list-style: none; }
.cliques-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.cliques-item:last-child { border-bottom: 0; }
.cliques-pessoa, .cliques-quando { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cliques-pessoa .conflito-abrir { padding: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliques-pessoa span, .cliques-quando span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cliques-quando { align-items: flex-end; flex-shrink: 0; }
.cliques-quando span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.cliques-quando .tpl-selo { font-size: 12px; }

/* Contador "13/25" dentro do campo, à direita. */
.tpl-botao-texto {
  position: relative;
}

.tpl-botao .tpl-botao-texto input {
  padding-right: 54px;
}

.tpl-botao-contador {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 12px;
  color: #8a8a8a;
  pointer-events: none;
}

/* Centrados no campo (rótulo + metade do campo de 50px), mesmo com aviso de erro embaixo. */
.tpl-botao-icones {
  display: flex;
  gap: 2px;
  margin-top: 33px;
}

#form-template .tpl-botao-icones .icon-button {
  width: 30px;
  height: 30px;
  background: transparent;
  color: #6b6b6b;
}

#form-template .tpl-botao-icones .icon-button:not(:disabled):hover {
  background: #eeeeee;
  color: #3d3d3d;
}

#form-template .tpl-botao-icones .icon-button:disabled {
  color: #cfcfcf;
  cursor: default;
}

/* "+ Adicionar botão": secundário cinza, abre o menu dos tipos. */
.tpl-botoes-adicionar {
  position: relative;
  display: inline-block;
}

.tpl-botao-adicionar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #ffffff;
  color: #3d3d3d;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.tpl-botao-adicionar:not(:disabled):hover {
  background: #f1f1f1;
}

.tpl-botao-adicionar:disabled {
  color: #a8a8a8;
  cursor: not-allowed;
}

.tpl-botao-adicionar svg {
  width: 15px;
  height: 15px;
}

.tpl-menu-botao {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 380px;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 6px;
  animation: tpl-menu-abrir 0.15s ease;
}

.tpl-menu-botao[hidden] {
  display: none;
}

@keyframes tpl-menu-abrir {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.tpl-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  outline: none;
}

.tpl-menu-item:not(:disabled):hover,
.tpl-menu-item:not(:disabled):focus-visible {
  background: #f1f1f1;
}

.tpl-menu-item:disabled {
  cursor: not-allowed;
}

.tpl-menu-item > svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  color: #555555;
}

.tpl-menu-item-textos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.tpl-menu-item-titulo {
  font-size: 14px;
  font-weight: 600;
}

.tpl-menu-item-descricao {
  font-size: 12px;
  color: var(--muted);
}

.tpl-menu-item-uso {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 12px;
  color: #8a8a8a;
}

.tpl-menu-item:disabled .tpl-menu-item-titulo,
.tpl-menu-item:disabled > svg {
  color: #a8a8a8;
}

#tpl_corpo_contador {
  flex-shrink: 0;
  white-space: nowrap;
}

#form-template input:disabled,
#form-template .custom-select-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Nome de template é uma palavra só e comprida: quebra em qualquer ponto em vez de
   empurrar o botão de fechar pra fora (barra de rolagem horizontal na gaveta). */
#modal-template-titulo {
  min-width: 0;
  overflow-wrap: anywhere;
}

#modal-template-overlay .modal-close {
  flex-shrink: 0;
}

/* O horário fica no fim do texto, acima dos botões (o .preview-meta é absolute). */
.tpl-previa .preview-content {
  position: relative;
}

/* Prévia de template como o contato vê no WhatsApp: mensagem recebida, balão
   branco com a pontinha no canto de cima à esquerda, mídia com margem e cantos
   arredondados. (O Novo agendamento continua com o balão verde de quem envia.) */
.tpl-previa .preview-bubble {
  position: relative;
  overflow: visible;
  background: #ffffff;
  border-top-left-radius: 0;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.tpl-previa .preview-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 13px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.tpl-previa .preview-image,
.tpl-previa .preview-video,
.tpl-previa .tpl-previa-midia {
  display: block;
  width: calc(100% - 6px);
  margin: 3px 3px 0;
  border-radius: 6px;
}

.tpl-previa .tpl-previa-botao {
  border-top-color: #e9edef;
}

/* Prévia da gaveta de Agendamentos: balão branco, como a prévia de templates. */
.agendamento-previa .preview-bubble {
  background: #ffffff;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

/* ===== Desempenho do template (gaveta) ===== */

.tpl-desempenho {
  margin-top: 20px;
}

.tpl-desempenho[hidden] {
  display: none;
}

.tpl-desempenho-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tpl-desempenho-topo h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}


/* Uma faixa só, dividida em três, no lugar de três cartões soltos. */
.tpl-desempenho-numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #eeeeee;
  border-radius: 12px;
}

.tpl-desempenho-numero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
}

.tpl-desempenho-numero + .tpl-desempenho-numero {
  border-left: 1px solid #eeeeee;
}

.tpl-desempenho-numero strong {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}

.tpl-desempenho-numero span {
  font-size: 13px;
  color: var(--text);
}

.tpl-desempenho-numero small {
  font-size: 12px;
  color: var(--muted);
}

.tpl-desempenho-vazio {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px;
  font-size: 13px;
  color: var(--muted);
}

.tpl-previa-botao-rotulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

/* Contagem de cliques no próprio botão da prévia: segunda linha embaixo do texto
   e fundo verde claro na largura da fatia do botão no total de cliques. */
.tpl-previa-botao--cliques {
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(to right, rgba(0, 128, 105, 0.09) var(--fatia, 0%), transparent 0);
}

.tpl-previa-cliques {
  font-size: 11px;
  font-weight: 500;
  color: #667781;
}

/* Área que rola dentro de uma gaveta (.modal-box--drawer): a barra fica fina e
   encostada na borda da gaveta, não colada no conteúdo, que mantém o respiro de
   sempre por dentro. Toda gaveta nova usa esta classe na área que rola (ver CLAUDE.md).
   A gaveta em si não rola (overflow hidden), senão aparecem duas barras. */
.modal-box--drawer:has(.gaveta-rolagem) {
  overflow: hidden;
}

.gaveta-rolagem {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-right: calc(-1 * var(--gaveta-respiro, 32px));
  padding-right: calc(var(--gaveta-respiro, 32px) - 8px);
}

@supports not selector(::-webkit-scrollbar) {
  .gaveta-rolagem {
    scrollbar-width: thin;
    scrollbar-color: #d6d6d6 transparent;
  }
}

.gaveta-rolagem::-webkit-scrollbar {
  width: 8px;
}

.gaveta-rolagem::-webkit-scrollbar-button {
  display: none;
}

.gaveta-rolagem::-webkit-scrollbar-thumb {
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #d6d6d6;
}

.gaveta-rolagem::-webkit-scrollbar-thumb:hover {
  background: #b5b5b5;
}

.tpl-desempenho-numero small {
  white-space: nowrap;
}

.tpl-desempenho-rodape {
  margin: 8px 0 0;
}

.tpl-desempenho-topo .icon-button svg {
  width: 15px;
  height: 15px;
}

/* Ícone do "Buscar os números novos" girando enquanto a Meta responde. */
.tpl-girando svg {
  animation: tpl-girar 0.9s linear infinite;
}

@keyframes tpl-girar {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tpl-girando svg {
    animation: none;
  }
}

/* Botão do cabeçalho enquanto trabalha (Atualizar templates). */
.btn-header-acao:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ===== Gaveta do contato (resumo no topo, tags recolhidas, campos legíveis) ===== */

.contato-cabecalho {
  min-width: 0;
}

.contato-cabecalho h3 {
  overflow-wrap: anywhere;
}

.contato-resumo {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.contato-resumo:empty {
  display: none;
}

.contato-resumo .contato-selo {
  margin: 0 4px 0 0;
}

.contato-tags-total {
  font-weight: 400;
  color: var(--muted);
}

#contato_tag_dropdown {
  margin-bottom: 10px;
}

#importar_tags_extras_chips,
#tags_massa_adicionar_chips {
  margin-top: 10px;
}

.contato-tags-chips {
  margin: 0;
}

/* Só muda a visualização: cinza e sublinhado, sem o verde das ações. */
.link-button.contato-tags-mais {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-button.contato-tags-mais:hover {
  color: var(--text);
}

.contato-tags-mais[hidden] {
  display: none;
}

/* Antes era uma linha com chave e valor lado a lado (o valor cortava). */
.contato-campo {
  display: block;
  margin-bottom: 10px;
}

.contato-campo-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.contato-campo-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.contato-campo-topo .contato-campo-chave {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.contato-campo-topo .icon-button {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.contato-campo .contato-campo-valor {
  width: 100%;
  margin-bottom: 0;
}

/* Link do perfil embaixo do campo instagram (um por perfil). */
.contato-campo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.contato-campo-links:not(:empty) {
  margin-top: 6px;
}

.contato-campo-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 13px;
  color: var(--green);
  text-decoration: none;
}

.contato-campo-links a:hover {
  text-decoration: underline;
}

.contato-campo-links a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contato-campo-links svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* Opção "Criar a tag …" no fim do dropdown com busca. */
.custom-select-option--criar {
  color: var(--green);
  font-weight: 500;
}

/* Tags do contato são dado, não seleção: cinza neutro, como na tabela de contatos
   (o verde do .custom-select-chip fica pros filtros e escolhas). */
#contato_tags_chips .custom-select-chip {
  background: #f2f2f2;
  color: var(--text);
}

#contato_tags_chips .custom-select-chip button:hover {
  background: #e4e4e4;
}

/* "+46": as outras tags do contato, abre a lista inteira. */
#contato_tags_chips .contato-tags-resto {
  padding: 4px 12px;
  border: none;
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
}

#contato_tags_chips .contato-tags-resto:hover {
  background: #e4e4e4;
  color: var(--text);
}

/* O inline-flex dos botões-link da gaveta (seletor com id) vencia o [hidden]. */
#modal-contato-overlay .link-button[hidden] {
  display: none;
}

.tags-massa-corpo {
  padding-top: 4px;
  padding-bottom: 24px;
}

/* Reserva o espaço da barra mesmo sem rolagem: o conteúdo não muda de largura e
   fica alinhado com o rodapé, com ou sem barra. */
.gaveta-rolagem {
  scrollbar-gutter: stable;
}

/* Formulário com o rodapé fixo (.agendamento-rodape): o respiro de 32px do
   form::after sobrava embaixo do botão. */
.modal-box--drawer form:has(> .agendamento-rodape)::after {
  content: none;
}

/* ===== Editor de template: exemplos ===== */

/* Cabeçalho de texto com o mesmo recuo do corpo do balão. */
.tpl-previa-cabecalho {
  margin: 0;
  padding: 8px 8px 0;
}

/* Valores de exemplo: um bloco só, logo abaixo do texto, com uma linha por variável. */
.tpl-exemplos {
  margin: -4px 0 20px;
  padding: 14px 16px 6px;
  border-radius: 12px;
  background: #f6f6f6;
}

.tpl-exemplos[hidden] {
  display: none;
}

.tpl-exemplos-titulo {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.tpl-exemplos > .field-dica {
  margin: 2px 0 10px;
}

/* Variáveis do editor de template: rótulo à esquerda, "De onde vem" e o texto fixo à direita. */
#tpl_variaveis .tpl-variavel {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  margin-bottom: 8px;
}

#tpl_variaveis .tpl-variavel > label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}

.tpl-variavel-linha {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.tpl-variavel-linha .custom-select,
.tpl-variavel-linha input {
  flex: 1 1 0;
  min-width: 0;
}

.tpl-variavel-linha input {
  height: 44px;
  margin: 0;
  background: #ffffff;
}

.tpl-variavel-linha input[hidden] {
  display: none;
}

#tpl_variaveis .tpl-variavel .field-erro {
  grid-column: 2;
  margin: 0;
}

.tpl-adicionar-variavel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tpl-adicionar-variavel svg {
  width: 15px;
  height: 15px;
}

/* Tags na lista de contatos: uma linha só. ajustarTagsNaLinha (contatos.js) esconde
   as que não cabem e o "+N" conta o resto. A caixa não empurra a largura da coluna
   (width 0 + min-width 100%): a coluna tem a largura dela e as tags se ajustam. */
#contatos_tabela .contato-tags {
  flex-wrap: nowrap;
  overflow: hidden;
  width: 0;
  min-width: 100%;
}

/* Colunas com largura definida: com a largura automática, a coluna de tags (que
   não empurra a largura) ficava estreita. Nome e e-mail compridos ganham reticências. */
#contatos_tabela {
  table-layout: fixed;
}

#contatos_tabela th:nth-child(1) { width: 44px; }
#contatos_tabela th:nth-child(2) { width: 24%; }
#contatos_tabela th:nth-child(3) { width: 150px; }
#contatos_tabela th:nth-child(4) { width: 26%; }
#contatos_tabela th:nth-child(6) { width: 110px; }

#contatos_tabela td {
  overflow: hidden;
  text-overflow: ellipsis;
}

#contatos_tabela .contato-tag {
  flex-shrink: 0;
}

#contatos_tabela .contato-tag[hidden] {
  display: none;
}

/* Sobrou uma tag só e ela não cabe: encurta com reticências. */
#contatos_tabela .contato-tags--uma .contato-tag:first-child {
  flex-shrink: 1;
  min-width: 0;
}

/* Gasto: a quarta linha da faixa de desempenho, de ponta a ponta. */
.tpl-desempenho-gasto {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid #eeeeee;
}

.tpl-desempenho-gasto strong {
  display: block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}

.tpl-desempenho-gasto span {
  font-size: 13px;
  color: var(--text);
}

.tpl-desempenho-gasto-detalhes {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.tpl-desempenho-gasto small {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.tpl-desempenho-gasto-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Números do desempenho um pouco menores (eram 22px). */
.tpl-desempenho-numero strong,
.tpl-desempenho-gasto strong {
  font-size: 18px;
}

/* ===== Menu em duas áreas ===== */

/* Barra estreita à esquerda: Grupos (uazapi) ou API oficial. A larga (.sidebar)
   mostra só os itens da área escolhida (definirArea, app.js). */
.sidebar-areas { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 64px; flex-shrink: 0; position: sticky; top: 0; align-self: flex-start; height: 100vh; padding: 32px 0; background: #f6f6f6; border-right: 1px solid #e5e5e5; box-sizing: border-box; }
.area-botao { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: var(--radius-botao); background: transparent; color: #545454; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.area-botao svg { width: 20px; height: 20px; }
.area-botao:hover { background: #e9e9e9; color: #0B2012; }
.area-botao--ativa, .area-botao--ativa:hover { background: color-mix(in srgb, var(--green) 14%, #ffffff); color: var(--green); }
.area-botao:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Título de grupo de itens na área API oficial ("Atendimento", "Disparos"). */
.sidebar-secao { margin: 14px 14px 4px; font-size: 12px; font-weight: 600; color: #8a8a8a; }
/* "Disparos" vem depois de Visão geral e Contatos: mantém o respiro de cima. */

.fora-da-area { display: none !important; }
/* Área escolhida no <head> (index.html) e mantida por definirArea: o menu já nasce certo.
   Na API oficial, a Visão geral de Grupos (aberta por padrão no HTML) não pisca na tela. */
html[data-area="grupos"] .sidebar [data-area="api"],
html[data-area="api"] .sidebar [data-area="grupos"],
html[data-area="api"] [data-panel="visao-geral"] { display: none !important; }

/* Na área API o bloco de números some; o Sair continua empurrado pro rodapé
   (a regra de .sidebar-numeros:not([hidden]) mais acima o colaria nos itens). */
.sidebar-numeros.fora-da-area + .tab--sair { margin-top: auto; }

/* Celular: sem barra estreita, só a área Grupos (Contatos, Campanhas e Templates
   já são só de computador). */
@media (max-width: 900px) {
  .sidebar-areas { display: none; }
  .sidebar [data-area="api"] { display: none !important; }
}

/* ===== Campanhas ===== */

.card:has(> [data-panel="campanhas"].tab-panel--active) {
  max-width: 1200px;
}

#campanhas_tabela tbody tr[data-campanha-id] {
  cursor: pointer;
}

#campanhas_tabela {
  table-layout: fixed;
}

#campanhas_tabela td {
  overflow: hidden;
  text-overflow: ellipsis;
}

#campanhas_tabela th:nth-child(4) { width: 150px; }
#campanhas_tabela th:nth-child(5) { width: 150px; }
#campanhas_tabela th:nth-child(6) { width: 170px; }
#campanhas_tabela th:nth-child(7) { width: 96px; }
/* Lixeira no fim da linha (o clique nela não abre a gaveta). */
#campanhas_tabela td.campanha-acoes {
  overflow: visible;
  text-align: right;
}
#campanhas_tabela td.campanha-acoes .icon-button {
  display: inline-flex;
}

.campanha-tags-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Rótulo no começo de uma dica da campanha ("Quem recebe:", "Custo estimado:"). */
.campanha-rotulo {
  font-weight: 600;
  color: #5f5f5f;
}

/* "Qualquer uma / Todas" embaixo das tags de quem recebe (só com 2+ tags). */
.campanha-tags-modo {
  margin-top: 8px;
}

.campanha-tags-modo[hidden] {
  display: none;
}

.campanha-variavel {
  margin-bottom: 10px;
}

.campanha-variavel-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.campanha-variavel-linha input {
  height: 44px;
  background: #ffffff;
}

.campanha-variavel-linha input[hidden] {
  display: none;
}

.campanha-quando {
  margin-bottom: 8px;
}

#campanha_data_campo[hidden] {
  display: none;
}

.campanha-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #eeeeee;
  border-radius: 12px;
}

.campanha-lista li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-size: 13px;
}

.campanha-lista li + li {
  border-top: 1px solid #eeeeee;
}

.btn-header-acao--perigo {
  background: #c0392b;
  color: #ffffff;
}

.btn-header-acao--perigo:hover {
  background: color-mix(in srgb, #c0392b 85%, black);
}

.tpl-gaveta-corpo > .preview-phone {
  margin: 12px 0 16px;
}

/* ===== Barra das áreas verde ===== */

.sidebar-areas {
  background: var(--green);
  border-right: none;
}

.area-botao {
  color: rgba(255, 255, 255, 0.75);
}

.area-botao:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.area-botao--ativa,
.area-botao--ativa:hover,
html[data-area="api"] .area-botao[data-area-botao="api"] {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

/* Antes do app.js rodar, o HTML marca Grupos como ativa: na área API ela fica como as outras. */
html[data-area="api"] .area-botao[data-area-botao="grupos"]:not(:hover) {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
}

.area-botao:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ===== Ações nos botões e histórico ===== */

/* Ações nos botões (gaveta do template). */
.tpl-acao-botao {
  padding: 12px 0;
}

.tpl-acao-botao + .tpl-acao-botao {
  border-top: 1px solid #eeeeee;
}

.tpl-acao-botao-nome {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #008069;
}

.tpl-acao-botao-nome svg {
  width: 15px;
  height: 15px;
}

.tpl-acao-nova {
  margin-top: 8px;
}

/* Histórico do contato. */
/* Linha como a do .form-divisor: separa os campos editáveis do histórico (só leitura). */
.contato-historico {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eeeeee;
}

/* Mesmo título dos campos ("Campos extras"). */
.contato-historico > label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.03em;
  color: var(--text);
}

.contato-historico[hidden] {
  display: none;
}

.contato-historico-lista {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* Um bloco por dia; dentro, a linha do tempo liga os marcadores. */
.hist-dia + .hist-dia {
  margin-top: 14px;
}

.hist-dia-titulo {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.hist-eventos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hist-evento {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 10px;
  padding: 5px 0;
  font-size: 13px;
}

/* Trecho da linha vertical: começa no marcador do primeiro e termina no do último. */
.hist-evento::before {
  content: '';
  position: absolute;
  left: 11.5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e6e6e6;
}

.hist-evento:first-child::before {
  top: 17px;
}

.hist-evento:last-child::before {
  bottom: calc(100% - 17px);
}

.hist-marcador {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f1f1f1;
  color: #6b6b6b;
  box-shadow: 0 0 0 3px var(--card-bg);
}

.hist-marcador svg {
  width: 13px;
  height: 13px;
}

.hist-marcador--envio { background: #e6f4ee; color: var(--green); }
.hist-marcador--fluxo { background: #eeeafc; color: #6a4fd1; }
.hist-marcador--tag { background: #fdf2e0; color: #b4730f; }
.hist-marcador--link { background: #e7f0fd; color: #2a66d9; }
.hist-marcador--alerta { background: #fdeaea; color: #cf3e3e; }

.hist-conteudo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 3px;
}

.hist-titulo {
  color: var(--text);
  line-height: 1.45;
}

.hist-detalhe {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Texto que o contato mandou, como citação curta (até 3 linhas). */
.hist-citacao {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  padding-left: 8px;
  border-left: 2px solid #e2e2e2;
  color: #4a4a4a;
  overflow-wrap: anywhere;
  quotes: none;
}

.hist-selo {
  display: inline-block;
  max-width: 100%;
  margin-left: 2px;
  padding: 0 7px;
  border: 1px solid #e6e6e6;
  border-radius: var(--radius-pill);
  background: #f7f7f7;
  font-size: 12px;
  line-height: 17px;
  vertical-align: 1px;
  overflow-wrap: anywhere;
}

.hist-selo--riscado {
  text-decoration: line-through;
  color: var(--muted);
}

.hist-hora {
  padding-top: 4px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* Títulos dos grupos do menu ("ATENDIMENTO", "DISPAROS"): caixa alta e espaçados. */
.sidebar-secao {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ===== Campanhas: filtros e ações ===== */

#campanhas_tabela th:nth-child(6) { width: 230px; }
#campanhas_tabela td:nth-child(6) { white-space: normal; line-height: 1.35; }

.campanha-resultado-falhas {
  color: var(--muted);
  font-size: 12px;
}

/* ===== Ações dos botões no editor e na campanha ===== */

/* Dentro do card do botão de resposta rápida, no editor do template. */
.tpl-botao-acoes {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #dddddd;
}

.tpl-acao-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #008069;
}

.tpl-acao-titulo svg {
  width: 14px;
  height: 14px;
}

/* Resumo na Nova campanha, logo abaixo do Template. */
.camp-acoes {
  margin-top: 8px;
  padding: 10px 12px;
  background: #f7f8f8;
  border: 1px solid #eeeeee;
  border-radius: 8px;
}

.camp-acoes[hidden] {
  display: none;
}

.camp-acoes-lista {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.camp-acoes-lista li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.camp-acoes-lista svg {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex-shrink: 0;
  color: #008069;
}

.camp-acoes-vazio {
  margin: 0 0 6px;
  font-size: 13px;
}

.camp-acoes .field-dica {
  margin: 0;
}

/* O card do botão tem só 4px embaixo (o campo de texto já traz margem); com as
   ações por último, completa até os 12px do topo do card. */
.tpl-botao-acoes {
  padding-bottom: 8px;
}

/* Dropdown sem espaço embaixo abre pra cima (posicionarPainel, app.js). */
.custom-select-panel--acima {
  top: auto;
  bottom: calc(100% + 6px);
  transform: translateY(4px);
}

/* Botão secundário do header (Importar CSV, Atualizar): verde-claro sem borda. A
   borda verde sobre branco, em cima do fundo cinza da página, parecia desativado.
   Dentro dos cartões brancos (estados vazios) o contorno continua. */
.page-header-acoes .btn-header-acao.btn-header-acao--contorno {
  background: color-mix(in srgb, var(--green) 12%, #ffffff);
  border-color: transparent;
  color: color-mix(in srgb, var(--green) 85%, black);
}

.page-header-acoes .btn-header-acao.btn-header-acao--contorno:hover {
  background: color-mix(in srgb, var(--green) 20%, #ffffff);
}

/* ===== Contatos: seleção em lote ===== */
#contatos_tabela .col-checkbox {
  padding-right: 0;
  overflow: visible;
}

#contatos_tabela tr.contato-linha--marcada td {
  background: #f1f8f1;
}

.contatos-selecao-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #eef6ee;
}

.contatos-selecao-barra[hidden] {
  display: none;
}

.contatos-selecao-texto {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.contatos-selecao-acoes {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.contatos-selecao-barra .link-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.contatos-selecao-barra .link-button svg {
  width: 15px;
  height: 15px;
}

.contatos-selecao-barra .link-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.contatos-selecao-barra .contatos-selecao-excluir {
  color: #c0392b;
}

.modal-digitar-campo {
  width: 100%;
  margin: 0 0 20px;
  text-align: center;
}

#modal-digitar-overlay {
  z-index: 3050;
}

#modal-digitar-overlay .modal-confirmar-botoes #modal-digitar-cancelar {
  flex: 1;
  color: var(--muted);
}

#modal-digitar-overlay .modal-confirmar-botoes #modal-digitar-confirmar {
  flex: 2;
}

/* Seleção em lote mais calma: o verde fica só no checkbox marcado. Barra e linhas
   em cinza, ações em cinza escuro (Excluir em vermelho), e o "Tags nos filtrados"
   some enquanto há seleção (a barra já tem Tags). */
#contatos_tabela tr.contato-linha--marcada td {
  background: #f6f6f6;
}

.contatos-selecao-barra {
  background: #f3f3f3;
  border: 1px solid #e8e8e8;
}

.contatos-selecao-barra .link-button {
  color: #3d3d3d;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
}

.contatos-selecao-barra .link-button:not(:disabled):hover {
  background: #e7e7e7;
  text-decoration: none;
}

.contatos-selecao-barra #contatos_selecao_limpar {
  color: var(--muted);
}

.contatos-selecao-barra .contatos-selecao-excluir {
  color: #c0392b;
}

.contatos-selecao-barra .contatos-selecao-excluir:not(:disabled):hover {
  background: #fbe9e7;
}

.field-label-row:has(+ .contatos-selecao-barra:not([hidden])) #contatos_tags_em_massa {
  visibility: hidden;
}

/* Gaveta do contato: texto dos campos e das listas (e-mails, telefones) em 14px.
   Padrão do painel pra texto de campo: 14px (só computador; no celular o iOS
   amplia campos abaixo de 16px). */
#modal-contato-overlay input[type='text'],
#modal-contato-overlay input[type='text']::placeholder,
#modal-contato-overlay .contato-telefone > span:first-child {
  font-size: 14px;
}

/* ===== Conversas (caixa de entrada) ===== */
/* Conversas ocupa a tela toda, como o editor de automações: sem o limite de 1200px da coluna
   e com margens menores na página (só no computador; no celular a página já é cheia). */
@media (min-width: 901px) {
  .page:has(.card > [data-panel="conversas"].tab-panel--active) { padding: 20px 24px; }
  .main-column:has(.card > [data-panel="conversas"].tab-panel--active) { max-width: none; }
  .tab-panel .conversas { height: calc(100vh - 100px); }
}

/* Templates, Campanhas, Automações, Contatos e Integrações também ocupam a largura toda, como Conversas
   (só no computador): sem o limite de 1200px da coluna e do card, margens menores na página. */
@media (min-width: 901px) {
  .page:has(.card > [data-panel="templates"].tab-panel--active),
  .page:has(.card > [data-panel="campanhas"].tab-panel--active),
  .page:has(.card > [data-panel="automacoes"].tab-panel--active),
  .page:has(.card > [data-panel="integracoes"].tab-panel--active),
  .page:has(.card > [data-panel="contatos"].tab-panel--active) { padding: 20px 24px; }
  .main-column:has(.card > [data-panel="templates"].tab-panel--active),
  .main-column:has(.card > [data-panel="campanhas"].tab-panel--active),
  .main-column:has(.card > [data-panel="automacoes"].tab-panel--active),
  .main-column:has(.card > [data-panel="integracoes"].tab-panel--active),
  .main-column:has(.card > [data-panel="contatos"].tab-panel--active) { max-width: none; }
  .main-column .card:has(> [data-panel="templates"].tab-panel--active),
  .main-column .card:has(> [data-panel="campanhas"].tab-panel--active),
  .main-column .card:has(> [data-panel="automacoes"].tab-panel--active),
  .main-column .card:has(> [data-panel="integracoes"].tab-panel--active),
  .main-column .card:has(> [data-panel="contatos"].tab-panel--active) { max-width: none; }
  /* Visão geral da API: o painel fica direto na coluna (fora do .card). */
  .page:has(.main-column > [data-panel="visao-api"].tab-panel--active) { padding: 20px 24px; }
  .main-column:has(> [data-panel="visao-api"].tab-panel--active) { max-width: none; }
}
.card:has(> [data-panel="conversas"].tab-panel--active) {
  max-width: none;
  padding: 0;
  overflow: hidden;
}

.tab-contagem {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--green-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.tab-contagem[hidden] { display: none; }

.conversas {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) auto;
  height: calc(100vh - 170px);
  min-height: 520px;
}

.conversas-lista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid #ececec;
}

.conversas-lista-topo { padding: 12px 16px 8px; }
.conversas-lista-topo .grupos-busca { margin: 8px 0 0; }
/* "Resolver todas": linha curta embaixo da busca, alinhada à direita (o padding do link
   encosta o texto na borda da busca). */
.conversas-resolver-todas { display: flex; justify-content: flex-end; margin: 4px -6px -4px 0; }
.conversas-resolver-todas[hidden] { display: none; }

.resolver-todas-corpo { display: flex; flex-direction: column; gap: 20px; }
.resolver-todas-texto { margin: 0; font-size: 14px; line-height: 1.5; color: #3d3d3d; }
.resolver-todas-corpo .field-checkbox { margin: 0; }
.resolver-todas-dica { margin: 4px 0 0 30px; font-size: 13px; color: var(--muted); }
.resolver-todas-aviso { margin: 0; padding: 10px 12px; border-radius: 8px; background: #f5f5f5; font-size: 13px; line-height: 1.45; color: #3d3d3d; }
.resolver-todas-aviso[hidden] { display: none; }

.conversas-itens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d6d6d6 transparent;
}

.conversa-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid #f2f2f2;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.conversa-item:hover { background: #f7f7f7; }
.conversa-item--ativa, .conversa-item--ativa:hover { background: color-mix(in srgb, var(--green) 10%, white); }

.conversa-item-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.conversa-item-nome {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversa-item-hora { flex-shrink: 0; font-size: 12px; color: var(--muted); }
.conversa-item--nao-lida .conversa-item-hora { color: var(--green); font-weight: 600; }

.conversa-item-previa {
  overflow: hidden;
  font-size: 13px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversa-item--nao-lida .conversa-item-previa { color: var(--text); }

.conversa-item-contador {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--green-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.conversas-vazio, .conversa-vazia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.conversa-vazia { height: 100%; }
.conversa-vazia[hidden] { display: none; }
.conversas-mais { display: block; margin: 12px auto; }

.conversa { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f4f2ee; }
.conversa-aberta { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.conversa-aberta[hidden] { display: none; }

.conversa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #ececec;
  background: #ffffff;
}

.conversa-topo-nome { display: flex; flex-direction: column; min-width: 0; }
.conversa-topo-nome strong { font-size: 15px; font-weight: 600; }
.conversa-topo-nome span { font-size: 13px; color: var(--muted); }
.conversa-topo-nome .conversa-janela { margin-top: 2px; font-size: 12px; color: #3d3d3d; }
.conversa-topo-nome .conversa-janela[hidden] { display: none; }
.conversa-topo-nome .conversa-janela--alerta { color: #b45309; font-weight: 500; }
.conversa-topo-nome .conversa-janela--fechada { color: var(--muted); }
.conversa-topo-acoes { display: flex; align-items: center; gap: 8px; }

.conversa-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dddddd;
  border-radius: var(--radius-botao);
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.conversa-botao:hover { background: #f5f5f5; }
.conversa-botao svg { width: 16px; height: 16px; }

.conversa-aviso {
  margin: 0;
  padding: 8px 16px;
  background: #fff5e6;
  font-size: 13px;
  color: #7a4b00;
}

.conversa-aviso[hidden] { display: none; }

.conversa-mensagens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px;
  scrollbar-width: thin;
  scrollbar-color: #cfcac2 transparent;
}

.cv-dia { margin: 12px 0; text-align: center; }
.cv-dia span { padding: 4px 10px; border-radius: 8px; background: #ffffff; font-size: 12px; color: var(--muted); }
.cv-anteriores { display: block; margin: 0 auto 8px; }

.cv-linha { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.cv-linha--minha { justify-content: flex-end; }

.cv-balao {
  position: relative;
  max-width: min(560px, 75%);
  padding: 8px 10px 6px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  font-size: 14px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.cv-balao--minha { background: #d9fdd3; }
.cv-balao--campanha { border: 1px dashed color-mix(in srgb, var(--green) 45%, transparent); }
.cv-texto { white-space: pre-wrap; }

.cv-rodape-balao {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.cv-tique { width: 14px; height: 14px; }
.cv-tique--lida { color: #34b7f1; }
.cv-tique--falha { color: #c0392b; }

.cv-reacao {
  position: absolute;
  bottom: -12px;
  left: 8px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  font-size: 13px;
}

.cv-linha:has(.cv-reacao) { margin-bottom: 16px; }

.cv-citada {
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-left: 3px solid var(--green);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 13px;
}

.cv-citada span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

.cv-acoes { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.cv-linha:hover .cv-acoes, .cv-acoes:focus-within { opacity: 1; }

.cv-acao {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-botao);
  background: rgba(255, 255, 255, 0.8);
  color: var(--muted);
  cursor: pointer;
}

.cv-acao:hover { color: var(--text); }
.cv-acao svg { width: 16px; height: 16px; }

.cv-imagem { display: block; padding: 0; border: none; background: none; cursor: zoom-in; }
.cv-imagem img { display: block; max-width: 280px; max-height: 320px; border-radius: 8px; }
.cv-video { display: block; max-width: 320px; border-radius: 8px; }
.cv-audio { display: block; width: 260px; }

.cv-documento {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
  text-decoration: none;
}

.cv-documento span, .cv-documento div { display: flex; flex-direction: column; min-width: 0; }
.cv-documento small { font-size: 12px; color: var(--muted); }
.cv-documento svg { flex-shrink: 0; width: 22px; height: 22px; }

.cv-arquivo-aviso { margin: 0; font-size: 13px; font-style: italic; color: var(--muted); }

/* Texto corrido (não flex): com o balão estreito, "Template", o nome e a campanha
   quebram como frase, em vez de cada pedaço virar uma coluna espremida. */
.cv-template-rotulo, .cv-template-botao {
  display: block;
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.cv-template-rotulo svg, .cv-template-botao svg {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}

/* Template da campanha como o contato recebeu, entre o rótulo e o "Tocou em".
   Largura fixa (a da mídia): o texto quebra dentro dela, como na prévia de templates. */
.cv-balao--template { width: 340px; }
.cv-template-enviado { margin: 6px 0 8px; }
.cv-template-enviado .cv-imagem { width: 100%; margin-bottom: 6px; }
.cv-template-enviado .cv-imagem img, .cv-template-enviado .cv-video { width: 100%; max-width: none; max-height: none; }
.cv-template-enviado .cv-documento { margin-bottom: 6px; }
/* Botões na largura do balão (encostam nas bordas), separados por linha fina. */
.cv-template-botoes { display: flex; flex-direction: column; margin: 8px -10px 0; }
.cv-template-botoes .tpl-previa-botao { padding: 8px 10px; border-top-color: rgba(0, 0, 0, 0.08); }
.cv-template-cabecalho { margin: 0 0 4px; font-weight: 600; overflow-wrap: anywhere; }
.cv-template-rodape { margin: 4px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

.cv-falha { margin: 2px 0 8px; font-size: 12px; color: #c0392b; text-align: right; }

.conversa-novas {
  position: absolute;
  right: 24px;
  bottom: 88px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-botao);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.conversa-novas[hidden] { display: none; }
.conversa-novas svg { width: 14px; height: 14px; }

.conversa-rodape-area { position: relative; border-top: 1px solid #ececec; background: #ffffff; }

.conversa-rodape, .conversa-gravando {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 12px;
}

.conversa-rodape[hidden], .conversa-gravando[hidden], .conversa-fechada[hidden],
.conversa-respondendo[hidden], .conversa-anexo-previa[hidden] { display: none; }

/* Anexo, emoji, campo e enviar na mesma altura (40px). */
.conversa-rodape .icon-button {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.conversa-rodape .icon-button svg {
  width: 18px;
  height: 18px;
}

.conversa-rodape textarea {
  flex: 1;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  max-height: 140px;
  padding: 9px 12px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background: #f7f7f7;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
}

.cv-enviar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-botao);
  background: var(--green);
  color: var(--green-text);
  cursor: pointer;
}

.cv-enviar[hidden] { display: none; }
.cv-enviar svg { width: 18px; height: 18px; }

.conversa-gravando { align-items: center; }
.cv-gravando-ponto { width: 10px; height: 10px; border-radius: 50%; background: #c0392b; animation: cv-pulsar 1s infinite; }
#conversa_gravacao_tempo { flex: 1; font-size: 14px; font-variant-numeric: tabular-nums; }

@keyframes cv-pulsar { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .cv-gravando-ponto { animation: none; } }

.conversa-fechada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}

.conversa-fechada p { margin: 0; font-size: 14px; color: var(--muted); }

.conversa-respondendo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 12px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--green);
  border-radius: 6px;
  background: #f4f4f4;
  font-size: 13px;
}

.conversa-respondendo div { display: flex; flex-direction: column; min-width: 0; }
.conversa-respondendo span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

.conversa-anexo-previa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid #ececec;
}

.cv-anexo-info { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cv-anexo-info svg { width: 16px; height: 16px; }
.conversa-anexo-previa input { height: 40px; padding: 0 12px; border: 1px solid #dddddd; border-radius: 8px; font-family: inherit; font-size: 14px; }
.conversa-anexo-previa input[hidden] { display: none; }
.cv-anexo-botoes { display: flex; justify-content: flex-end; gap: 8px; }

.cv-emoji-area { position: relative; }

.cv-emoji-painel {
  position: absolute;
  bottom: 48px;
  left: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(6, 36px);
  gap: 2px;
  padding: 8px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.cv-emoji-painel[hidden] { display: none; }

.cv-emoji-painel button, .cv-reacoes-painel button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-botao);
  background: none;
  font-size: 20px;
  cursor: pointer;
}

.cv-emoji-painel button:hover, .cv-reacoes-painel button:hover { background: #f2f2f2; }

.cv-linha { position: relative; }

.cv-reacoes-painel {
  position: absolute;
  top: -44px;
  z-index: 5;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-botao);
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.cv-reacoes-painel svg { width: 16px; height: 16px; }

.conversa-contato {
  width: 280px;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  border-left: 1px solid #ececec;
  background: #ffffff;
}

.conversa-contato[hidden] { display: none; }
.cv-contato-topo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.cv-contato-topo strong { font-size: 15px; font-weight: 600; }
.cv-contato-topo span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.cv-contato-titulo { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.cv-contato-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
/* Tag comprida quebra a linha (em vez de cortar com reticências e esconder o "x" de tirar). */
.cv-contato-tags .contato-tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.cv-contato-tags .contato-tag button { margin-left: 4px; vertical-align: -1px; padding: 0; border: none; background: none; cursor: pointer; }
.cv-contato-tags .contato-tag svg { width: 12px; height: 12px; }
/* "+N": as outras tags do contato, abre a lista inteira (como na gaveta do contato). */
.cv-contato-tags .cv-contato-tags-resto { border: none; font-family: inherit; color: var(--muted); cursor: pointer; }
.cv-contato-tags .cv-contato-tags-resto:hover { background: #e4e4e4; color: var(--text); }
/* Visual vem do .contato-tags-mais (cinza e sublinhado, igual ao da gaveta do contato). */
.cv-contato-tags-menos { margin-bottom: 8px; }
.cv-contato-nova-tag { margin: 0; }
.cv-contato-abrir { width: 100%; justify-content: center; margin-top: 16px; }

.conversa-template-corpo { padding-bottom: 16px; }
.cv-template-previa { margin-top: 12px; }

/* ===== Editor de automações ===== */
.card:has(> [data-panel="automacao-editor"].tab-panel--active) { max-width: none; padding: 0; overflow: hidden; }
/* O editor ocupa a tela toda: sem o limite de 1200px da coluna e com margens menores na página. */
.page:has(.card > [data-panel="automacao-editor"].tab-panel--active) { padding: 20px 24px; }
.main-column:has(.card > [data-panel="automacao-editor"].tab-panel--active) { max-width: none; }
.fx-editor { display: flex; flex-direction: column; height: calc(100vh - 100px); min-height: 560px; }
.fx-topo { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #ececec; }
.fx-topo .btn-header-acao { flex-shrink: 0; }
.fx-nome { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #dddddd; border-radius: 8px; background: #f7f7f7; font-family: inherit; font-size: 14px; }
.fx-chave { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; cursor: pointer; }
/* Liga/desliga do editor (Ativa): trilho cinza, verde quando ligado; a bolinha corre pra direita. */
.fx-interruptor { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; cursor: pointer; user-select: none; }
.fx-interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.fx-interruptor-trilho { position: relative; flex-shrink: 0; width: 36px; height: 20px; border-radius: var(--radius-pill); background: #d4d4d4; transition: background 0.15s ease; }
.fx-interruptor-bolinha { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.15s ease; }
.fx-interruptor--ligado .fx-interruptor-trilho { background: var(--green); }
.fx-interruptor--ligado .fx-interruptor-bolinha { transform: translateX(16px); }
.fx-interruptor input:focus-visible + .fx-interruptor-trilho { outline: 2px solid var(--green); outline-offset: 2px; }
.fx-chave--bloco { display: flex; margin-top: 14px; }
.fx-avisos { margin: 0; padding: 8px 16px; list-style: none; border-bottom: 1px solid #ececec; background: #fffaf0; max-height: 96px; overflow-y: auto; }
.fx-aviso { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 13px; color: #7a4b00; }
.fx-aviso svg { width: 14px; height: 14px; flex-shrink: 0; }
.fx-aviso--erro { color: #c0392b; }
.fx-aviso--link { cursor: pointer; }
.fx-aviso--link:hover { text-decoration: underline; }
.fx-corpo { flex: 1; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; min-height: 0; }
.fx-paleta { padding: 12px; border-right: 1px solid #ececec; overflow-y: auto; }
.fx-paleta-titulo, .fx-config-titulo { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.fx-config-titulo { display: flex; align-items: center; gap: 8px; }
.fx-config-titulo svg { width: 16px; height: 16px; color: var(--muted); }
.fx-paleta .fx-dica { margin: 0 0 10px; font-size: 12px; }
.fx-paleta-item { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 6px; padding: 8px 10px; border: 1px solid #dddddd; border-radius: var(--radius-botao); background: #ffffff; font-family: inherit; font-size: 13px; color: var(--text); text-align: left; cursor: grab; }
.fx-paleta-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }
.fx-paleta-item:hover { background: #f5f5f5; }
.fx-quadro { position: relative; min-width: 0; background: #f7f7f5; }
.fx-config { width: 300px; padding: 16px; border-left: 1px solid #ececec; overflow-y: auto; }
.fx-rotulo { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--muted); }
.fx-campo { width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 12px; border: 1px solid #dddddd; border-radius: 8px; background: #f7f7f7; font-family: inherit; font-size: 14px; color: var(--text); }
textarea.fx-campo { resize: vertical; }
.fx-campo--numero { flex: 0 0 84px; width: 84px; }
.fx-linha { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.fx-escolha { margin-top: 6px; }
.fx-escolha .custom-select-trigger { height: 40px; }
.fx-linha .fx-escolha { flex: 1; min-width: 0; margin-top: 0; }
.fx-dica { margin: 6px 0; font-size: 13px; color: var(--muted); }
.fx-dica--alerta { color: #7a4b00; }
.fx-mais, .fx-apagar { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.fx-mais svg, .fx-apagar svg { width: 14px; height: 14px; }
.fx-apagar { margin-top: 24px; }
.fx-arquivo { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid #dddddd; border-radius: 8px; background: #f7f7f7; font-size: 13px; }
.fx-arquivo > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }
.fx-arquivo span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-botao-arquivo { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px dashed #cccccc; border-radius: var(--radius-botao); background: #ffffff; font-size: 13px; cursor: pointer; }
.fx-botao-arquivo svg { width: 14px; height: 14px; color: var(--muted); }
.fx-botao-arquivo:hover { background: #f5f5f5; }
.fx-botao-arquivo--enviando { opacity: 0.6; cursor: progress; }
.fx-previa { min-height: 0; margin-top: 4px; padding: 14px 10px; box-shadow: none; }
.fx-erros { margin: 4px 0 0; padding: 0; list-style: none; }
.fx-erros li { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.fx-erros span { color: #c0392b; overflow-wrap: anywhere; }
.fx-bloco { position: relative; min-width: 200px; max-width: 260px; padding: 10px 12px 0; border: 1px solid #dddddd; border-radius: 10px; background: #ffffff; font-size: 13px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.fx-bloco--gatilho { border-color: var(--green); }
.fx-bloco--atendimento { padding-bottom: 2px; }
.fx-bloco:not(:has(.fx-saidas)) { padding-bottom: 2px; }
.fx-bloco--selecionado { box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 40%, transparent); }
.fx-bloco--erro { border-color: #c0392b; }
/* Arrastando uma ligação: o bloco sob o mouse (que vai receber) fica com a borda verde. */
.fx-quadro--ligando .vue-flow__node:hover .fx-bloco:not(.fx-bloco--gatilho) { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }
.fx-bloco-titulo { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.fx-bloco-titulo svg { width: 13px; height: 13px; }
.fx-bloco-resumo { margin: 4px 0 8px; overflow-wrap: anywhere; color: var(--text); }
.fx-bloco-numeros { margin: 0 0 8px; font-size: 11px; color: var(--muted); }
.fx-bloco-numeros-erro { color: #c0392b; }
.fx-saidas { display: flex; flex-direction: column; margin: 0 -12px; padding: 2px 0; border-top: 1px solid #f0f0f0; }
.fx-saida { position: relative; padding: 5px 18px 5px 12px; font-size: 11px; color: var(--muted); text-align: right; }
/* Conexões em círculo nas laterais (como no n8n): miolo branco, borda cinza; verde ao passar o mouse. */
.fx-bloco .vue-flow__handle { width: 14px; height: 14px; border: 2px solid #c4c4c4; border-radius: 50%; background: #ffffff; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.fx-bloco .vue-flow__handle-right { background: #c4c4c4; }
.fx-bloco .vue-flow__handle:hover { border-color: var(--green); background: var(--green); transform: translate(var(--fx-handle-x, 0), -50%) scale(1.15); }
/* Centro da bolinha em cima da linha da borda do bloco (o padrão do Vue Flow, -4px, é pra alça de 6px). */
.fx-bloco .vue-flow__handle-left { --fx-handle-x: -50%; left: -0.5px; transform: translate(-50%, -50%); }
.fx-bloco .vue-flow__handle-right { --fx-handle-x: 50%; right: -0.5px; transform: translate(50%, -50%); }
/* Ligações: linha mais grossa; com o mouse em cima fica verde e mostra a lixeira no meio. */
.fx-quadro .vue-flow__edge-path { stroke: #c4c4c4; stroke-width: 2px; transition: stroke 0.15s ease; }
.fx-quadro .fx-ligacao--foco .vue-flow__edge-path { stroke: var(--green); }
.fx-ligacao-acoes { position: absolute; pointer-events: all; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; }
.fx-ligacao-acoes--visivel { opacity: 1; visibility: visible; }
.fx-ligacao-excluir { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid #e0e0e0; border-radius: var(--radius-botao); background: #ffffff; color: #c0392b; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.fx-ligacao-excluir:hover { background: #fdecea; border-color: #f3c2bc; }
.fx-ligacao-excluir svg { width: 18px; height: 18px; }
/* Guias de alinhamento ao arrastar um bloco (linha verde tracejada de ponta a ponta do quadro). */
.fx-guia { position: absolute; z-index: 5; pointer-events: none; }
.fx-guia--vertical { top: 0; bottom: 0; border-left: 1px dashed var(--green); }
.fx-guia--horizontal { left: 0; right: 0; border-top: 1px dashed var(--green); }
/* Barrinha de ações do bloco (pausar/excluir), acima dele, só com o mouse em cima. O padding de
   baixo faz a ponte até o bloco, pra ela não sumir no caminho do mouse. */
.fx-bloco-acoes { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding-bottom: 6px; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; }
.vue-flow__node:hover .fx-bloco-acoes { opacity: 1; visibility: visible; }
.fx-bloco-acao { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid #e0e0e0; border-radius: var(--radius-botao); background: #ffffff; color: var(--muted); cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.fx-bloco-acao:hover { color: var(--text); background: #f5f5f5; }
.fx-bloco-acao--excluir:hover { color: #c0392b; background: #fdecea; border-color: #f3c2bc; }
.fx-bloco-acao svg { width: 15px; height: 15px; }
/* Bloco pausado: apagado, com selo; o fluxo passa direto por ele. */
.fx-bloco--pausado { border-style: dashed; background: #fafafa; }
.fx-bloco--pausado .fx-bloco-resumo, .fx-bloco--pausado .fx-bloco-titulo > svg { opacity: 0.5; }
.fx-bloco-selo-pausado { margin-left: auto; padding: 0 8px; border-radius: var(--radius-pill); background: #efefef; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 15px; }
/* Gatilho de template: prévia do template no bloco (o balão das Conversas, menor) e um botão por
   linha, cada botão de resposta rápida com a sua saída na borda direita. */
.fx-bloco--gatilho-template { width: 280px; max-width: 280px; padding-bottom: 0; }
.fx-gatilho-previa { margin: 0 -4px; }
.fx-gatilho-previa .preview-bubble { max-width: none; margin: 0; padding: 4px; border-radius: 8px; background: #dcf8c6; box-shadow: none; font-size: 12px; }
.fx-gatilho-previa .preview-image { display: block; width: 100%; height: auto; border-radius: 6px; }
.fx-gatilho-previa .preview-content { padding: 6px 6px 2px; }
.fx-gatilho-previa .preview-text { margin: 0; font-size: 12px; line-height: 1.4; max-height: 150px; overflow: hidden; }
.fx-gatilho-previa .preview-meta { display: none; }
.fx-gatilho-botoes { display: flex; flex-direction: column; margin: 8px -12px 0; border-top: 1px solid #f0f0f0; }
.fx-gatilho-botao { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-bottom: 1px solid #f0f0f0; color: #027eb5; font-size: 12px; font-weight: 500; text-align: center; }
.fx-gatilho-botao:last-child { border-bottom: 0; }
.fx-gatilho-botao svg { width: 13px; height: 13px; flex-shrink: 0; }
.fx-gatilho-botao--sem-saida { color: var(--muted); }
.fx-quadro .vue-flow__minimap { border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; }

/* Padrão do painel: texto e placeholder de campos em 14px (inputs, textareas e o
   gatilho dos dropdowns, que tem cara de campo). Só no computador: no celular o
   iOS amplia a tela ao focar campo com menos de 16px. */
@media (min-width: 901px) {
  input:not([type='checkbox']):not([type='radio']):not([type='file']),
  input::placeholder,
  textarea,
  textarea::placeholder,
  .custom-select-trigger,
  .field-date-input {
    font-size: 14px;
  }
}

/* Gaveta do contato: e-mails e telefones sem verde. "Principal" em selo cinza e as
   ações de linha (Adicionar, Tornar principal) em cinza escuro; o verde fica no Salvar. */
#modal-contato-overlay .contato-selo--principal {
  background: #efefef;
  color: #4a4a4a;
}

#modal-contato-overlay .contato-telefone .link-button,
#modal-contato-overlay .contato-linha-adicionar .link-button {
  color: #3d3d3d;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
}

#modal-contato-overlay .contato-telefone .link-button:hover,
#modal-contato-overlay .contato-linha-adicionar .link-button:hover {
  background: #eeeeee;
  text-decoration: none;
}

#modal-contato-overlay #contato_campo_adicionar {
  color: #3d3d3d;
  font-weight: 500;
}

#modal-contato-overlay .contato-telefones .contatos-vazio {
  margin: 0 0 4px;
  font-size: 14px;
}

/* Erro da seção inteira de botões (ex.: grupos intercalados): só o aviso embaixo
   fica vermelho, não todos os campos dos cards. O erro de um campo do card continua. */
#tpl_botoes_campo.field--erro .tpl-botao input,
#tpl_botoes_campo.field--erro .tpl-botao .custom-select-trigger {
  border-color: #dddddd !important;
}

#tpl_botoes_campo #tpl_botoes .field--erro input,
#tpl_botoes_campo #tpl_botoes .field--erro .custom-select-trigger {
  border-color: #c0392b !important;
}

/* Dropdown com busca: só a lista rola (o painel inteiro rolando punha a barra grossa
   por cima dos cantos arredondados). Busca fixa no topo, barra fina na lista. */
.custom-select-panel.custom-select-panel--busca {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.custom-select-panel--busca .custom-select-busca-topo {
  flex: none;
}

.custom-select-panel--busca .custom-select-busca-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

@supports not selector(::-webkit-scrollbar) {
  .custom-select-panel--busca .custom-select-busca-lista {
    scrollbar-width: thin;
    scrollbar-color: #d6d6d6 transparent;
  }
}

.custom-select-panel--busca .custom-select-busca-lista::-webkit-scrollbar {
  width: 8px;
}

.custom-select-panel--busca .custom-select-busca-lista::-webkit-scrollbar-button {
  display: none;
}

.custom-select-panel--busca .custom-select-busca-lista::-webkit-scrollbar-thumb {
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #d6d6d6;
}

/* "+ Adicionar botão" como link de texto, igual ao "+ Adicionar variável" do mesmo
   formulário (o botão com borda pesava mais do que precisava). */
.tpl-botao-adicionar {
  gap: 4px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 600;
}

.tpl-botao-adicionar:not(:disabled):hover {
  background: none;
  text-decoration: underline;
}

/* "Quando alguém tocar" é título de seção, não ação: cinza escuro como os rótulos,
   ícone em cinza (o #008069 do WhatsApp destoava do verde do painel). */
.tpl-acao-titulo {
  color: var(--text);
}

.tpl-acao-titulo svg {
  color: var(--muted);
}

/* Cabeçalho ordenável (Contatos): o rótulo vira botão com seta. Seta cinza clara
   quando a coluna não está ordenando; escura (↑ ou ↓) na coluna ativa. */
.coluna-ordem {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.coluna-ordem svg {
  width: 13px;
  height: 13px;
  color: #c4c4c4;
}

.coluna-ordem:hover,
.coluna-ordem--ativa {
  color: var(--text);
}

.coluna-ordem:hover svg,
.coluna-ordem--ativa svg {
  color: var(--text);
}

.coluna-ordem:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== Contatos > Conflitos =====
   Os dois contatos lado a lado; a seta mostra quem fica ao juntar e o e-mail em
   disputa é a única cor da linha (âmbar: pede atenção, não é erro). Ações em cinza
   escuro, como na seleção em lote. */
.subtab-contagem {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: #f4e4c6;
  color: #6b4a0e;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  vertical-align: 1px;
}

.subtab-contagem[hidden] {
  display: none;
}

.conflitos-explicacao {
  max-width: 72ch;
  margin: 0 0 14px;
  color: #555;
  font-size: 14px;
  line-height: 1.55;
}

#conflitos_tabela {
  table-layout: fixed;
  width: 100%;
}

#conflitos_tabela th:nth-child(1) { width: 44px; }
#conflitos_tabela th:nth-child(3) { width: 44px; }
#conflitos_tabela th:nth-child(5) { width: 220px; }

#conflitos_tabela .col-checkbox {
  padding-right: 0;
  overflow: visible;
}

#conflitos_tabela td {
  vertical-align: top;
  padding-top: 16px;
  padding-bottom: 16px;
}

#conflitos_tabela .col-checkbox .checkbox-visual {
  margin-top: 1px;
}

.conflito-ficha {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.conflito-nome {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.conflito-abrir {
  overflow: hidden;
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.conflito-abrir:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.conflito-nome .contato-selo {
  margin-left: 0;
  flex-shrink: 0;
}

.conflito-linha {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 13px;
  color: #3d3d3d;
}

.conflito-linha > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conflito-linha svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #b0b0b0;
}

.conflito-chegou {
  padding: 1px 6px;
  border-radius: 5px;
  background: #fbefd6;
  color: #6b4a0e;
}

.conflito-mais,
.conflito-meta {
  color: var(--muted);
}

.conflito-meta {
  font-size: 12px;
}

td.conflito-col-seta {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

td.conflito-col-seta svg {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: #c4c4c4;
}

.conflito-acoes {
  text-align: right;
}

.conflito-origem {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.conflito-botoes {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-right: -8px;
}

.conflito-botoes .link-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  color: #3d3d3d;
  font-weight: 500;
}

.conflito-botoes .link-button:hover {
  background: #efefef;
  text-decoration: none;
}

.conflito-botoes .link-button:focus-visible,
.conflito-abrir:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.conflito-botoes .link-button svg {
  width: 14px;
  height: 14px;
}

#conflitos_tabela tr.conflito--resolvendo td {
  opacity: 0.45;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #conflitos_tabela tr.conflito--resolvendo td {
    transition: none;
  }
}

#conflitos_tabela tbody tr:has([data-marcar-conflito]:checked) td {
  background: #f6f6f6;
}

/* Confirmação de ação que não apaga nada (tom: 'neutro'): ícone em cinza e o botão
   verde de ação principal; o vermelho fica pra excluir e descadastrar. */
.modal-confirmar--neutro .modal-confirmar-icone {
  background: #f1f3f2;
  color: #3d4a43;
}

.modal-confirmar--neutro .modal-confirmar-botoes .submit-button--danger {
  background: var(--green);
}

.modal-confirmar--neutro .modal-confirmar-botoes .submit-button--danger:hover {
  background: #258a62;
}

/* Lápis ao lado do nome: abre a gaveta do contato pra editar. */
.conflito-editar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: #9a9a9a;
  cursor: pointer;
}

.conflito-editar:hover {
  background: #efefef;
  color: #3d3d3d;
}

.conflito-editar:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.conflito-editar svg {
  width: 14px;
  height: 14px;
}

/* O dado da linha que é do outro contato: mesma cor, tracejado (não é deste contato). */
.conflito-junto {
  padding: 0 5px;
  border: 1px dashed #d9b46a;
  border-radius: 5px;
  color: #6b4a0e;
}

.conflito-linha--junto svg {
  color: #d9b46a;
}

/* Igual nos dois contatos (nome, Instagram, campo importado): forte sinal de que é a
   mesma pessoa. */
.conflito-igual {
  padding: 1px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--green) 13%, #ffffff);
  color: #1f5f45;
}

/* A nota "preenchido junto com…" quebra linha em vez de ser cortada. */
.conflito-linha--junto {
  align-items: flex-start;
}

.conflito-linha--junto svg {
  margin-top: 2px;
}

.conflito-linha--junto > span {
  white-space: normal;
  overflow: visible;
}

/* Conflitos: filtro por motivo, motivo no topo das ações e a busca girando. */
.conflitos-filtros {
  display: flex;
  margin-bottom: 4px;
}

.conflitos-filtros .historico-filtro {
  width: 280px;
  flex: none;
}

.conflito-motivo {
  display: block;
  margin-bottom: 2px;
  color: #3d3d3d;
  font-size: 12px;
  font-weight: 600;
}

/* Suspeitos e Domínio errado (mesmo molde da aba Conflitos). */
.suspeita-linha {
  cursor: pointer;
}

.suspeita-detalhe {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.suspeita-campo {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
}

.suspeita-motivo {
  color: #3d3d3d;
}

.suspeitas-topo-acoes {
  display: flex;
  gap: 16px;
}

#dominios_corrigir_todos,
#dominios_procurar,
#suspeitos_procurar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Gaveta de suspeito/domínio no padrão da gaveta do contato (.field): rótulo 14px/600 na cor
   do texto, 8px até o conteúdo e 20px entre as seções; valores e campo em 14px. */
.suspeita-gaveta {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.suspeita-gaveta-rotulo {
  display: block;
  margin: 20px 0 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.suspeita-gaveta > .suspeita-gaveta-rotulo:first-child {
  margin-top: 0;
}

/* Campo "E-mail certo": o mesmo campo do painel (.field), sem a margem de baixo dele. */
.suspeita-gaveta-campo {
  margin: 0;
}

.suspeita-gaveta-valor {
  margin: 0;
  word-break: break-all;
}

.suspeita-gaveta-motivo {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.suspeita-gaveta-contato .suspeita-detalhe {
  font-size: 13px;
}

.suspeita-gaveta-contato .conflito-abrir {
  padding: 0;
}

#conflitos_procurar,
#suspeitos_procurar,
#dominios_procurar,
#dominios_corrigir_todos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  color: #3d3d3d;
  font-weight: 500;
}

#conflitos_procurar:not(:disabled):hover,
#suspeitos_procurar:not(:disabled):hover,
#dominios_procurar:not(:disabled):hover,
#dominios_corrigir_todos:not(:disabled):hover {
  background: #eeeeee;
  text-decoration: none;
}

#conflitos_procurar svg,
#suspeitos_procurar svg,
#dominios_procurar svg,
#dominios_corrigir_todos svg {
  width: 15px;
  height: 15px;
}

#conflitos_procurar:disabled,
#suspeitos_procurar:disabled,
#dominios_procurar:disabled,
#dominios_corrigir_todos:disabled {
  opacity: 0.6;
  cursor: progress;
}

.conflitos-girando {
  animation: conflitos-girar 0.9s linear infinite;
}

@keyframes conflitos-girar {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .conflitos-girando {
    animation: none;
  }
}

/* Contatos: busca e o botão que abre a gaveta de filtros avançados. */
.contatos-topo {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.contatos-topo .grupos-busca {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.contatos-filtros-abrir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #dddddd;
  border-radius: var(--radius-botao);
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.contatos-filtros-abrir:hover {
  background: #f5f5f5;
}

.contatos-filtros-abrir svg {
  width: 16px;
  height: 16px;
}

/* Quantos filtros avançados estão valendo. */
.contatos-filtros-contagem {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--green-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.contatos-filtros-contagem[hidden] {
  display: none;
}

.contatos-lista-acoes {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contatos-lista-acoes .historico-limpar-filtros {
  margin: 0;
}

.contatos-filtros-corpo {
  padding-top: 4px;
  padding-bottom: 8px;
}

.contatos-filtros-grupo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
}

.contatos-filtros-grupo + .contatos-filtros-grupo {
  border-top: 1px solid #ececec;
}

.contatos-filtros-titulo {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

#modal-contatos-filtros-overlay .custom-select-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#modal-contatos-filtros-overlay .custom-select-chips {
  margin: 0;
}

.contatos-periodo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Sem o ícone do calendário: a data inteira cabe nas duas colunas. */
/* De/Até: só mostram o período escolhido no calendário (não são digitáveis). */
.contatos-periodo-valor {
  display: block;
  width: 100%;
  height: 44px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0 12px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background: #f7f7f7;
  font-size: 14px;
  line-height: 42px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
}

/* O campo que o próximo clique no calendário vai preencher. */
.contatos-periodo-valor--ativo {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
  background: #ffffff;
}

.contatos-periodo-valor:focus-visible {
  border-color: var(--green);
  outline: none;
}

.contatos-periodo-valor:empty::before {
  content: attr(data-vazio);
  color: #787878;
  font-weight: 500;
}

.contatos-periodo-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.contatos-periodo-campo > span {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.contatos-periodo-atalhos {
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
}

.contatos-periodo-atalhos .atalho-data {
  flex: 1 1 0;
  padding: 5px 4px;
  font-size: 12px;
  white-space: nowrap;
}

.contatos-filtros-rodape {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  padding-bottom: 24px;
  border-top: 1px solid #ececec;
}

.contatos-filtros-resultado {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.contatos-filtros-total {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  transition: opacity 0.15s;
}

.contatos-filtros-total strong {
  font-size: 18px;
  font-weight: 600;
}

/* Contando de novo: o número anterior fica apagado até a resposta chegar. */
.contatos-filtros-total--contando {
  opacity: 0.45;
}

.contatos-filtros-pendente {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.contatos-filtros-pendente[hidden] {
  display: none;
}

.contatos-filtrar {
  gap: 8px;
  font-size: 14px;
}

/* Filtros marcados e ainda não aplicados: anel em volta do botão. */
.contatos-filtrar--pendente {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 28%, white);
}

.contatos-exportar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  border: 1px solid #dddddd;
  border-radius: var(--radius-botao);
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.contatos-exportar:not(:disabled):hover {
  background: #f5f5f5;
}

.contatos-exportar:disabled {
  opacity: 0.6;
  cursor: progress;
}

.contatos-exportar svg {
  width: 18px;
  height: 18px;
}

.link-button.contatos-limpar {
  width: 100%;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-botao);
  background: #f2f2f2;
  text-align: center;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.link-button.contatos-limpar:hover {
  background: #e7e7e7;
  color: var(--text);
  text-decoration: none;
}

.link-button.contatos-limpar[hidden] {
  display: none;
}

.contatos-calendario {
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #ffffff;
}

.contatos-calendario[hidden] {
  display: none;
}

/* "Clique no dia de início" / "Agora clique no dia de fim" + Fechar. */
.contatos-calendario-dica {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid #ececec;
  font-size: 13px;
  font-weight: 500;
  color: #3d3d3d;
}

.contatos-calendario-fechar {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.contatos-calendario-fechar:hover {
  background: #f2f2f2;
  color: var(--text);
}

/* Campo interno do calendário (o flatpickr o deixa visível): o período aparece em De/Até. */
#contatos_cadastro_periodo {
  display: none !important;
}

/* Calendário do período de cadastro: dentro da gaveta, só os dias (sem a coluna
   de horários nem o fundo escuro dos calendários que abrem por cima da tela). */
.contatos-calendario .flatpickr-calendar,
.cal-duas-colunas .contatos-calendario .flatpickr-calendar,
.va-periodo-calendario .flatpickr-calendar {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  display: block;
  width: 100% !important;
  max-width: 100%;
  padding: 14px 12px 10px;
  border: none !important;
  border-radius: 12px;
  box-shadow: none !important;
  z-index: auto;
}

/* Hoje: só a borda fina e o número verde, sem fundo (não confundir com dia escolhido). */
.contatos-calendario .flatpickr-day.today:not(.selected):not(.inRange):not(:hover),
.va-periodo-calendario .flatpickr-day.today:not(.selected):not(.inRange):not(:hover) {
  background: none !important;
  border-color: color-mix(in srgb, var(--green) 45%, transparent) !important;
  font-weight: 500 !important;
}

.contatos-calendario .flatpickr-day:focus:not(.selected):not(.inRange):not(:hover),
.va-periodo-calendario .flatpickr-day:focus:not(.selected):not(.inRange):not(:hover) {
  background: none !important;
}

.contatos-calendario .flatpickr-months,
.va-periodo-calendario .flatpickr-months {
  margin-bottom: 12px;
}

.contatos-calendario .cal-titulo-data,
.va-periodo-calendario .cal-titulo-data {
  font-size: 18px;
}

.contatos-calendario .flatpickr-day,
.va-periodo-calendario .flatpickr-day {
  padding: 7px 0 !important;
}

/* Início e fim vizinhos (15 e 16): o flatpickr liga os dois com uma faixa azul padrão
   (box-shadow #569ff7). Aqui cada dia é um quadrado separado, como os do meio do período. */
.contatos-calendario .flatpickr-day.startRange,
.contatos-calendario .flatpickr-day.endRange,
.va-periodo-calendario .flatpickr-day.startRange,
.va-periodo-calendario .flatpickr-day.endRange {
  box-shadow: none !important;
}

/* Dias entre o início e o fim do período. */
.contatos-calendario .flatpickr-day.inRange,
.contatos-calendario .flatpickr-day.inRange:hover,
.va-periodo-calendario .flatpickr-day.inRange,
.va-periodo-calendario .flatpickr-day.inRange:hover {
  background: color-mix(in srgb, var(--green) 14%, transparent) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--green) 70%, black) !important;
}

/* Motivo e origem quebram linha dentro da coluna de ações (sem rolagem lateral). */
#conflitos_tabela td.conflito-acoes {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Gaveta do contato: "+ Adicionar" ao lado do título de E-mails e Telefones; o campo
   aparece embaixo da lista ao clicar. */
.contato-linha-adicionar[hidden] {
  display: none;
}

#modal-contato-overlay .contato-telefones + .contato-linha-adicionar {
  margin-top: 8px;
}

#modal-contato-overlay .contato-mostrar-adicionar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  margin-right: -8px;
  border-radius: 6px;
  color: #3d3d3d;
  font-size: 13px;
  font-weight: 500;
}

#modal-contato-overlay .contato-mostrar-adicionar:hover {
  background: #efefef;
  text-decoration: none;
}

#modal-contato-overlay .contato-mostrar-adicionar svg {
  width: 14px;
  height: 14px;
}

#modal-contato-overlay .contato-linha-adicionar .icon-button {
  flex-shrink: 0;
}

/* Filtro desligado (DDD com país de fora do Brasil). */
.custom-select--desligado .custom-select-trigger {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Importar contatos: exemplo das colunas, análise do arquivo e prévia ===== */
.importar-coluna-rotulo {
  display: flex;
  flex: 0 0 40%;
  flex-direction: column;
  min-width: 0;
}

.importar-coluna-rotulo .importar-coluna-nome {
  flex: none;
}

.importar-coluna-exemplo {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O que vai entrar: lista curta com os números em destaque; o que pede atenção em âmbar. */
.importar-analise {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 20px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f6f6f6;
  list-style: none;
  font-size: 13px;
  color: #3d3d3d;
}

.importar-analise li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}

.importar-analise svg {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  flex-shrink: 0;
  color: #9a9a9a;
}

.importar-analise strong {
  color: var(--text);
  font-weight: 600;
}

.importar-analise .importar-analise-aviso {
  color: #6b4a0e;
}

.importar-analise .importar-analise-aviso svg {
  color: #c08a2b;
}

.importar-pais {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: #f1f1f1;
  color: #5a5a5a;
  font-size: 11px;
}

/* Prévia: tags pelo nome numa linha só, como na lista de contatos. */
.importar-previa {
  table-layout: fixed;
  width: 100%;
}

.importar-previa th:nth-child(1) { width: 17%; }
.importar-previa th:nth-child(2) { width: 25%; }
.importar-previa th:nth-child(3) { width: 23%; }
.importar-previa th:nth-child(5) { width: 15%; }

.importar-previa td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.importar-previa .contato-tags {
  flex-wrap: nowrap;
  overflow: hidden;
  width: 0;
  min-width: 100%;
}

.importar-previa .contato-tag {
  flex-shrink: 0;
}

.importar-previa .contato-tag[hidden] {
  display: none;
}

.importar-previa .contato-tags--uma .contato-tag:first-child {
  flex-shrink: 1;
  min-width: 0;
}

#modal-importar-overlay .modal-subtitulo {
  max-width: 560px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .importar-analise {
    grid-template-columns: 1fr;
  }
}

/* Linha da prévia que fica de fora (sem telefone nem e-mail válido). */
.importar-previa tr.importar-pulada td {
  opacity: 0.45;
}

.modal-box--importar {
  scrollbar-width: thin;
}

/* Rodapé do modal de importação: botão principal na altura do "Salvar" das gavetas
   e a troca de arquivo em cinza, como as ações secundárias. */
.importar-botoes .submit-button {
  height: 44px;
  padding: 0 22px;
  font-size: 15px;
}

.importar-botoes .importar-voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: -8px;
  padding: 6px 8px;
  border-radius: 6px;
  color: #3d3d3d;
  font-size: 14px;
  font-weight: 500;
}

.importar-botoes .importar-voltar:hover {
  background: #efefef;
  text-decoration: none;
}

.importar-botoes .importar-voltar svg {
  width: 15px;
  height: 15px;
}

/* ===== Importar contatos: primeira etapa (escolher o arquivo) ===== */
.modal-box--importar.modal-box--importar-arquivo {
  max-width: 560px;
}

.importar-arquivo {
  gap: 10px;
  padding: 36px 24px 32px;
  border: 1.5px dashed #d4d4d4;
  border-radius: 14px;
  background: #fbfbfb;
  cursor: default;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.importar-arquivo:hover {
  background: #fbfbfb;
}

.importar-arquivo-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #ececec;
  color: #3d3d3d;
}

.importar-arquivo .importar-arquivo-icone svg {
  width: 24px;
  height: 24px;
}

.importar-arquivo-titulo {
  font-size: 15px;
  color: var(--text);
}

.importar-arquivo-botao {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #dcdcdc;
  border-radius: var(--radius-botao);
  background: #ffffff;
  color: #3d3d3d;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.importar-arquivo-botao:hover {
  background: #f3f3f3;
}

/* O input do arquivo é escondido: o foco do teclado fica visível no rótulo. */
#importar_arquivo:focus-visible + .importar-arquivo-botao,
.importar-arquivo-botao:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.importar-arquivo--arrastando {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 6%, #ffffff);
}

.importar-arquivo--arrastando .importar-arquivo-icone {
  color: var(--green);
}

@media (prefers-reduced-motion: reduce) {
  .importar-arquivo {
    transition: none;
  }
}

.importar-requisitos {
  margin-top: 18px;
}

.importar-requisitos-titulo {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.importar-requisitos-colunas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.importar-requisitos-colunas .contato-tag {
  font-size: 13px;
  padding: 3px 10px;
}

.importar-requisitos .field-dica {
  display: block;
  margin: 0 0 4px;
  line-height: 1.5;
}

/* ===== Automações ===== */
.auto-selo { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); background: #f2f2f2; font-size: 12px; color: var(--muted); }
.auto-selo--ativa { background: color-mix(in srgb, var(--green) 14%, white); color: color-mix(in srgb, var(--green) 70%, black); }
/* Gaveta da automação: mesmo molde dos cartões de Desempenho dos templates. */
#automacao_gaveta_corpo > .tpl-desempenho:first-of-type { margin-top: 16px; }
.auto-gaveta-gatilho { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #eeeeee; border-radius: 12px; }
.auto-gaveta-gatilho p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.auto-gaveta-gatilho-icone { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: #f2f2f2; color: var(--text); }
.auto-gaveta-gatilho-icone svg { width: 16px; height: 16px; }
.auto-gaveta-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auto-gaveta-regras { margin: 0; border: 1px solid #eeeeee; border-radius: 12px; }
.auto-gaveta-regras > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; }
.auto-gaveta-regras > div + div { border-top: 1px solid #eeeeee; }
.auto-gaveta-regras dt { font-size: 13px; color: var(--muted); }
.auto-gaveta-regras dd { margin: 0; font-size: 13px; color: var(--text); text-align: right; }
.card:has(> [data-panel="automacoes"].tab-panel--active) { max-width: 1200px; }
#automacoes_tabela tbody tr { cursor: pointer; }
/* Colunas fixas como na lista de campanhas: nome e gatilho dividem o que sobra e quebram linha; os números não. */
#automacoes_tabela { table-layout: fixed; }
#automacoes_tabela td { overflow: hidden; text-overflow: ellipsis; }
#automacoes_tabela td:nth-child(-n+2) { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
#automacoes_tabela th:nth-child(3) { width: 100px; }
#automacoes_tabela th:nth-child(4) { width: 130px; }
#automacoes_tabela th:nth-child(5) { width: 110px; }
#automacoes_tabela th:nth-child(6) { width: 170px; }
#automacoes_tabela th:nth-child(7) { width: 96px; }
/* Editar e excluir no fim da linha (o clique neles não abre a gaveta). */
#automacoes_tabela td.auto-acoes { overflow: visible; text-align: right; white-space: nowrap; }
#automacoes_tabela td.auto-acoes .icon-button { display: inline-flex; }

.cv-automatica { display: block; margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.cv-automatica svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }
.cv-botao-fluxo { display: inline-block; margin: 6px 6px 0 0; padding: 4px 10px; border: 1px solid #cfe9d9; border-radius: 8px; font-size: 13px; color: color-mix(in srgb, var(--green) 70%, black); background: #ffffff; }
.conversa-item-selo { flex-shrink: 0; padding: 0 8px; border-radius: var(--radius-pill); background: #fff1e0; color: #b45309; font-size: 11px; font-weight: 500; line-height: 18px; }
.cv-fluxo-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 13px; }
#cv_contato_fluxos { margin-top: 16px; }

/* ===== Visão geral da API oficial ===== */
/* Quatro números (a de Grupos tem três). */
.stat-grid.stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .stat-grid.stat-grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* "Conversas esperando resposta" leva pra Conversas: contorno verde no hover (o "Com erro" de Grupos é vermelho). */
.stat-tile--link-verde:not(:disabled):hover { border-color: var(--green); }
.stat-tile--link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Aviso amarelo: qualidade média (o vermelho fica pro que impede o envio). */
.alert-bar.alert-bar--atencao { background: #fff7e0; border-color: rgba(180, 120, 0, 0.3); }
.alert-bar.alert-bar--atencao svg, .alert-bar.alert-bar--atencao strong { color: #8a5a00; }

#va-campanhas-tabela tbody tr.va-campanha-linha { cursor: pointer; }
#va-campanhas-tabela tbody tr.va-campanha-linha:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
#va-campanhas-tabela.vg-proximos-tabela--vazia thead { display: none; }
.va-campanha-nome { font-weight: 500; }

/* Cartão "Número": identidade, régua de qualidade e os dados da Meta. */
.va-numero { display: flex; flex-direction: column; gap: 18px; }
.va-numero-topo { display: flex; align-items: center; gap: 12px; }
.va-numero-avatar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green);
  font-size: 13px; font-weight: 600;
}
.va-numero-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.va-numero-identidade { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.va-numero-identidade strong { font-size: 15px; font-weight: 600; color: var(--text); }
.va-numero-identidade span { font-size: 13px; color: var(--muted); }

.va-qualidade { --va-cor: var(--muted); }
.va-qualidade--alta { --va-cor: var(--green); }
.va-qualidade--media { --va-cor: #c98a00; }
.va-qualidade--baixa { --va-cor: #c0392b; }
.va-qualidade-linha { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.va-qualidade-linha strong { font-size: 15px; font-weight: 600; color: var(--va-cor); }
.va-qualidade-regua { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
/* Os três níveis sempre à vista, apagados; o atual acende na cor dele. */
.va-qualidade-segmento { height: 8px; border-radius: 4px; opacity: 0.18; }
.va-qualidade-segmento--baixa { background: #c0392b; }
.va-qualidade-segmento--media { background: #c98a00; }
.va-qualidade-segmento--alta { background: var(--green); }
.va-qualidade-segmento--atual { opacity: 1; }

.va-numero-dados { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.va-numero-dados div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.va-numero-dados dt { color: var(--muted); }
.va-numero-dados dd { margin: 0; font-weight: 500; color: var(--text); text-align: right; }
.va-numero-dados dd.va-numero-ruim { color: #c0392b; }
.va-numero-rodape { margin: auto 0 0; font-size: 12px; color: var(--muted); }

.va-fonte { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* Selo do número da API no rodapé da sidebar (mesmo desenho das linhas dos números de grupos). */
.sidebar-numero-api {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin-top: auto; padding: 18px 14px 10px 7px;
  border: none; border-top: 1px solid #eeeeee; background: none;
  font-family: inherit; font-size: 13px; color: #545454; text-align: left; cursor: pointer;
}
.sidebar-numero-api[hidden] { display: none; }
.sidebar-numero-api:hover .sidebar-numero-nome { color: var(--green); }
.sidebar-numero-api:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 8px; }
.sidebar-numero-api--atencao .sidebar-numero-bolinha { background: #e0a100; }
.sidebar-numero-api--atencao .sidebar-numero-status { color: #8a5a00; font-weight: 600; }
.sidebar-numero-api--problema .sidebar-numero-bolinha { background: #c0392b; }
.sidebar-numero-api--problema .sidebar-numero-status { color: #c0392b; font-weight: 600; }
/* Com o selo à vista, é ele que empurra pro rodapé, e o Sair fica colado embaixo dele. */
.sidebar:has(.sidebar-numero-api:not([hidden]):not(.fora-da-area)) .tab--sair { margin-top: 0; }
@media (max-width: 900px) { .sidebar .sidebar-numero-api { display: none; } }
/* Resultado quebra linha em vez de cortar; o template fica alinhado ao nome. */
#va-campanhas-tabela td { white-space: normal; vertical-align: top; line-height: 1.4; }
#va-campanhas-tabela td:nth-child(2) { white-space: nowrap; }
#va-campanhas-tabela .disparo-subinfo { margin-left: 0; overflow-wrap: anywhere; }

/* ===== Visão geral da API: período (botão no topo + painel com atalhos e calendário) ===== */
.va-periodo {
  position: relative;
}

/* Botão do período: branco com borda (é um filtro, não uma ação). A borda entra no lugar
   de 1px do padding, pra ficar da altura dos outros botões do topo. */
.btn-header-acao.va-periodo-botao {
  padding: 9px 14px 9px 16px;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: var(--text);
}

.btn-header-acao.va-periodo-botao:hover,
.btn-header-acao.va-periodo-botao[aria-expanded="true"] {
  filter: none;
  border-color: #c4c4c4;
  background: #fafafa;
}

.va-periodo-botao svg {
  color: var(--muted);
}

.va-periodo-botao svg:last-child {
  margin-left: -2px;
}

/* Filtro de templates: com a cara do botão do período (branco com borda, da altura dos
   botões do topo). Com algum template escolhido, fica verde, pra não esquecer que os
   números da página são só desses. */
.va-templates {
  width: 230px;
}

.va-templates .custom-select-trigger {
  height: auto;
  padding: 9px 12px 9px 14px;
  background: #ffffff;
  letter-spacing: normal;
}

.va-templates .custom-select-trigger:hover,
.va-templates.custom-select--aberto .custom-select-trigger {
  border-color: #c4c4c4;
  background: #fafafa;
}

.va-templates .custom-select-trigger span {
  flex: 1;
}

.va-templates .custom-select-trigger--placeholder span {
  color: var(--text);
  font-weight: 400;
}

.va-templates .custom-select-trigger svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.va-templates .custom-select-trigger svg:first-child,
.va-templates.custom-select--aberto .custom-select-trigger svg:first-child {
  transform: none;
}

.va-templates--ativo .custom-select-trigger,
.va-templates--ativo .custom-select-trigger:hover,
.va-templates--ativo.custom-select--aberto .custom-select-trigger {
  border-color: color-mix(in srgb, var(--green) 45%, #ffffff);
  background: color-mix(in srgb, var(--green) 10%, #ffffff);
  color: color-mix(in srgb, var(--green) 85%, black);
}

.va-templates--ativo .custom-select-trigger svg {
  color: currentColor;
}

/* Painel mais largo que o botão (alinhado pela direita dele, pra não passar do período), e o
   nome que não cabe quebra linha: os nomes da Meta usam _ no lugar do espaço, que o
   navegador não quebra sozinho. */
.va-templates .custom-select-panel {
  left: auto;
  width: 420px;
}

.va-templates .custom-select-option--multi {
  align-items: flex-start;
  line-height: 1.35;
}

.va-templates .custom-select-option--multi > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.va-templates .custom-select-option--multi .custom-select-caixa {
  margin-top: 1px;
}

/* Rodapé do painel: quantos estão marcados à esquerda e "Limpar seleção" à direita,
   neutro (cinza), pra não competir com as caixas marcadas. */
.va-templates-rodape {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border-top: 1px solid #ececec;
  background: #fafafa;
}

.va-templates-marcados {
  font-size: 13px;
  color: var(--muted);
}

/* Link de texto sublinhado (não botão), pra ações secundárias: "Limpar seleção" do filtro de
   templates, "Resolver todas" das conversas. */
.link-sublinhado {
  padding: 4px 6px;
  border: none;
  border-radius: 4px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: #555555;
  text-decoration: underline;
  text-decoration-color: #b5b5b5;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-sublinhado:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

.link-sublinhado:focus-visible {
  outline: 2px solid #9a9a9a;
  outline-offset: 1px;
}

.va-templates-rodape[hidden] {
  display: none;
}

.va-periodo-painel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: flex;
  width: 500px;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.va-periodo-painel[hidden] {
  display: none;
}

.va-periodo-atalhos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  width: 150px;
  padding: 10px 8px;
  border-right: 1px solid #ececec;
  background: #fafafa;
}

.va-periodo-atalho {
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-botao);
  background: none;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.va-periodo-atalho:hover {
  background: #efefef;
}

.va-periodo-atalho--ativo,
.va-periodo-atalho--ativo:hover {
  background: color-mix(in srgb, var(--green) 12%, #ffffff);
  color: color-mix(in srgb, var(--green) 85%, black);
  font-weight: 500;
}

.va-periodo-calendario {
  flex: 1;
  min-width: 0;
}

.va-periodo-dica {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid #ececec;
  font-size: 13px;
  font-weight: 500;
  color: #3d3d3d;
}

/* Campo interno do calendário (o flatpickr o deixa visível): o período aparece no botão. */
#va_periodo_input,
#vz_periodo_input {
  display: none !important;
}

/* Gráfico sem nenhum dia com número (período só com hoje). */
#va-grafico-wrap {
  position: relative;
}

.va-grafico-vazio {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.va-grafico-vazio[hidden] {
  display: none;
}

/* Integrações: link cortado com reticências e o botão de copiar ao lado. */
.integracao-link-celula {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 380px;
}

.integracao-link-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
}

#integracoes_tabela tbody tr {
  cursor: pointer;
}

.integracao-link-campo {
  max-width: none;
  min-height: 44px;
  padding: 0 6px 0 12px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background: #f7f7f7;
}

.integracao-aguardando {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 8px 0 20px;
  padding: 14px 16px;
  border: 1px dashed rgba(44, 159, 114, 0.45);
  border-radius: 8px;
  background: #f3faf6;
}

.integracao-aguardando svg {
  flex-shrink: 0;
  color: var(--green);
}

.integracao-aguardando p {
  margin: 4px 0 0;
  color: var(--muted);
}

.integracao-campo-extra {
  display: grid;
  grid-template-columns: 200px 1fr 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.integracao-campo-extra .field {
  margin: 0;
}

.integracao-evento {
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

.integracao-evento-topo {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.integracao-rodape {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* "Adicionar campo extra": ícone do tamanho do texto e centrado com ele (como os links da aba Contatos). */
#integracao_add_campo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#integracao_add_campo svg {
  width: 15px;
  height: 15px;
}

/* Sem o margin-top do .pagina-editor: o botão fica na mesma linha dos ícones. */
.integracao-rodape .submit-button {
  flex: 1;
  margin-top: 0;
}

.integracao-previa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #ffffff;
}

.integracao-previa-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.integracao-previa-item span {
  color: var(--muted);
  font-size: 12px;
}

.integracao-previa-item small {
  color: var(--muted);
  font-size: 12px;
}

.integracao-corpo {
  margin: 0;
  padding: 16px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.integracao-rodape .agendamento-rodape-icone {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-botao);
}

.integracao-rodape .agendamento-rodape-icone[hidden] {
  display: none;
}

.integracao-rodape .agendamento-rodape-icone svg {
  width: 18px;
  height: 18px;
}

.integracao-rodape {
  margin-top: 20px;
}

.integracao-previa-item strong {
  overflow-wrap: anywhere;
}

.integracao-aguardando[hidden] {
  display: none;
}

/* Leituras nos grupos: campos do Novo agendamento (spec 2026-10-29-leituras-grupos-design.md). */
.leitura-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.leitura-campos[hidden] {
  display: none;
}

.leitura-campos #campo_prazo_nao_leu,
.leitura-campos-dica {
  grid-column: 1 / -1;
}

.leitura-dica {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.leitura-campos-dica {
  margin: -6px 0 12px;
}

@media (max-width: 700px) {
  .leitura-campos {
    grid-template-columns: 1fr;
  }
}

/* Novo agendamento: nome do link rastreado (aparece com "Rastrear cliques" marcado). */
.link-nome-campo {
  margin-top: 16px;
}

.link-nome-campo[hidden] {
  display: none;
}

/* Um campo por link do texto; com mais de um, o link original aparece em cima de cada caixa. */
.link-nomes-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.link-nome-destino {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
}

.link-nome-destino svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.link-nome-destino span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Link de cada grupo": uma caixa com a cara do campo normal (borda, fundo, raio; como nos outros campos,
   o foco não muda a caixa, só aparece o cursor), com o começo fixo (endereço e sufixo de exemplo) em cinza e o nome depois. */
.link-campo {
  display: flex;
  align-items: center;
  height: 44px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background: #f7f7f7;
  padding: 0 12px;
  font-size: 14px;
  letter-spacing: -0.03em;
  cursor: text;
}

.link-campo-prefixo {
  flex-shrink: 0;
  color: var(--muted);
  white-space: nowrap;
  user-select: none;
}

.link-campo-prefixo-curto {
  display: none;
}

.field .link-campo input[type='text'] {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0 0 0 2px;
}

/* Link completo de exemplo embaixo da caixa: só no celular, onde o prefixo encurta. */
.link-campo-completo {
  display: none;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .link-campo-prefixo-longo {
    display: none;
  }

  .link-campo-prefixo-curto {
    display: inline;
  }

  .link-campo-completo {
    display: block;
  }

}

/* Gaveta do agendamento: blocos "Visualizações" e "Links rastreados", no visual do Desempenho da
   gaveta de template (.tpl-desempenho, .cliques-*). */
.agendamento-item .tpl-desempenho {
  margin-top: 6px;
}

.leitura-numeros--dois {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leitura-numeros--carregando {
  grid-template-columns: minmax(0, 1fr);
}

/* Faixa das tags, no lugar da do gasto: uma regra por linha. */
.leitura-tags {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Detalhes dos números quebram linha ("ganha a tag hoje às 06:20") em vez de vazar. */
.leitura-bloco .tpl-desempenho-numero small {
  white-space: normal;
}

.leitura-tag-regra {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.leitura-grupos {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.leitura-grupo {
  border-bottom: 1px solid #f0f0f0;
}

.leitura-grupo:last-child {
  border-bottom: 0;
}

.leitura-grupo-botao {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.leitura-grupo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.leitura-grupo-nome {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.leitura-grupo-numeros {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.leitura-grupo-detalhe {
  font-size: 12px;
  color: var(--muted);
}

.leitura-grupo-numeros svg {
  width: 15px;
  height: 15px;
  transition: transform 0.15s ease;
}

.leitura-grupo-botao[aria-expanded="true"] .leitura-grupo-seta {
  transform: rotate(180deg);
}

.leitura-barra {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: #e9e9e9;
  overflow: hidden;
}

.leitura-barra span {
  display: block;
  height: 100%;
  background: var(--green);
}

.leitura-pessoas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0 14px;
}

.leitura-pessoas[hidden] {
  display: none;
}

/* Visualizaram | Não visualizaram: na largura toda do grupo aberto, duas metades iguais, o ativo em destaque. */
.leitura-abas.disparos-subtabs {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 3px;
  gap: 2px;
  border-radius: var(--radius-botao);
}

.leitura-abas .disparos-subtab {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
}

.leitura-pessoas-caixa {
  max-height: 320px;
}

.leitura-pessoas-caixa .cliques-lista {
  padding: 0 12px;
}

.leitura-pessoas-caixa .cliques-item {
  border-bottom-color: #e5e5e5;
}

.leitura-pessoas-caixa .cliques-item:last-child {
  border-bottom: 0;
}

.leitura-pessoa-telefone {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.leitura-vazio {
  font-size: 13px;
  color: var(--muted);
}

/* Links rastreados: o link de cada grupo. */
.links-grupo + .links-grupo {
  margin-top: 12px;
}

.links-grupo-nome {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* O link inteiro, quebrando onde precisar: o fim (o sufixo) é o que diferencia os grupos. */
.links-url {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Link de grupo arquivado aos 12 meses: não abre mais, só os cliques ficam. */
.links-url--expirado {
  color: var(--muted);
}

.cliques-pessoa .links-url + span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.links-acoes {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
}

.links-cliques {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.links-acoes .icon-button svg {
  width: 15px;
  height: 15px;
}

/* Celular: números mais apertados. */
@media (max-width: 700px) {
  .leitura-bloco .tpl-desempenho-numero {
    padding: 10px;
  }
}

/* ===== Visão geral de Grupos: visualizações dos disparos (public/js/visualizacoes.js) ===== */
/* Filtros embaixo do título: período e agendamentos, com a cara dos da Visão geral da API. */
/* As abas não precisam da margem de baixo: os filtros vêm logo depois do título. */
.vz-card .vg-envios-topo .disparos-subtabs {
  margin-bottom: 0;
}

.vz-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* O painel do período e o dos agendamentos abrem pela esquerda do botão (aqui eles ficam à esquerda do card). */
.vz-periodo .va-periodo-painel {
  right: auto;
  left: 0;
}

.vz-agendamentos {
  width: 260px;
  min-width: 0;
}

/* Nome longo no botão: corta com reticências (o nome inteiro fica no title). */
.vz-agendamentos .custom-select-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vz-agendamentos .custom-select-panel {
  left: 0;
  right: auto;
}

.vz-card .chart-wrap:has(#vz-vazio:not([hidden])) {
  min-height: 160px;
}

#vz-vazio {
  padding: 32px 0;
  text-align: center;
}

#vz-vazio[hidden] {
  display: none;
}

.skeleton-bar.vz-skel-grafico {
  position: absolute;
  inset: 8px 0;
  height: auto;
  border-radius: 10px;
}

/* Tooltip: o total do dia e, embaixo, cada agendamento com o seu número (nome longo cortado). */
.vz-tooltip {
  z-index: 5;
}

.vz-tooltip-lista {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #eeeeee;
}

.vz-tooltip-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 500;
}

.vz-tooltip-item + .vz-tooltip-item {
  margin-top: 2px;
}

.vz-tooltip-nome {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vz-tooltip-mais {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  color: var(--muted);
}

/* Ranking: título e data à esquerda (nome longo quebra), números à direita, barra fina embaixo. */
.vz-ranking {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eeeeee;
}

.vz-ranking[hidden] {
  display: none;
}

.vz-linha {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 10px 8px;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.vz-linha:last-child {
  border-bottom: none;
}

.vz-linha:hover {
  background: #fafafa;
}

.vz-linha--abrindo {
  cursor: progress;
  opacity: 0.6;
}

.vz-linha-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.vz-linha-nome {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.vz-linha-data {
  margin-left: 8px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.vz-linha-numeros {
  display: flex;
  flex: none;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.vz-linha-numeros strong {
  font-weight: 600;
  color: var(--text);
}

.vz-ver-mais {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px 8px 0;
  color: var(--muted);
}

.vz-ver-mais:hover {
  color: var(--text);
}

.vz-ver-mais svg {
  width: 15px;
  height: 15px;
}

.vz-ver-mais[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .vz-filtros > * {
    flex: 1 1 100%;
  }

  .vz-periodo .va-periodo-botao {
    width: 100%;
  }

  .vz-periodo .va-periodo-botao span {
    flex: 1;
    text-align: left;
  }

  .vz-agendamentos {
    width: auto;
  }

  /* No celular o painel do período ocupa a largura do card, com os atalhos numa faixa em cima. */
  .vz-periodo .va-periodo-painel,
  .vz-agendamentos .custom-select-panel {
    width: 100%;
  }

  .vz-periodo .va-periodo-painel {
    flex-direction: column;
  }

  .vz-periodo .va-periodo-atalhos {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    border-right: none;
    border-bottom: 1px solid #ececec;
  }

  .vz-linha-topo {
    flex-direction: column;
    gap: 4px;
  }

  .vz-linha-numeros {
    flex-wrap: wrap;
    row-gap: 2px;
  }
}