/* Componentes reutilizáveis — Check Audiências */

/* ---- Botões ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-primary-tint); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
}
.btn-ghost:hover { background: var(--color-surface-alt); }

.btn-danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);
}
.btn-danger:hover { filter: brightness(0.92); }

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Badge (status: audiência, convite, intimação, assinatura) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.badge-neutral  { background: var(--color-neutral-tint); color: var(--color-neutral); }
.badge-success  { background: var(--color-success-tint); color: var(--color-success); }
.badge-warning  { background: var(--color-warning-tint); color: var(--color-warning); }
.badge-danger   { background: var(--color-danger-tint);  color: var(--color-danger); }
.badge-info     { background: var(--color-info-tint);    color: var(--color-info); }
.badge-primary  { background: var(--color-primary-tint); color: var(--color-primary-active); }

/* Badge de horário (destaque no card de audiência) */
.badge-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  min-height: 3.5rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
}

/* ---- Card ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

/* Card de audiência (dashboard) */
.audiencia-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.audiencia-card__info {
  flex: 1;
  min-width: 0;
}

.audiencia-card__processo {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audiencia-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.audiencia-card__nome {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preso-tag {
  color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
}

.audiencia-card__linha2 {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.audiencia-card__linha2-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Mesma cor do badge-time (herda o mesmo estado do card: preso, tipo,
   revisão pendente etc. — ver regras logo abaixo de cada .badge-time
   correspondente, na mesma ordem, pra manter a mesma prioridade quando
   mais de um estado se aplica ao mesmo card). */
.audiencia-card__tag-tipo {
  flex-shrink: 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.menor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-warning);
  color: var(--color-text-inverse);
}

.menor-icon svg {
  width: 95%;
  height: 95%;
}

.audiencia-card--preso {
  border-left: 4px solid var(--color-danger);
}

.audiencia-card--preso .badge-time {
  background: var(--color-danger);
}

.audiencia-card--preso .audiencia-card__tag-tipo {
  background: var(--color-danger);
}

.audiencia-card--continuacao {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}

/* Cores por tipo de audiência */
.audiencia-card--tipo-instrucao .badge-time {
  background: var(--color-success);
}

.audiencia-card--tipo-instrucao .audiencia-card__tag-tipo {
  background: var(--color-success);
}

.audiencia-card--tipo-custodia .badge-time {
  background: var(--color-danger);
}

.audiencia-card--tipo-custodia .audiencia-card__tag-tipo {
  background: var(--color-danger);
}

.audiencia-card--tipo-custodia {
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
}

.audiencia-card--tipo-anpp .badge-time {
  background: var(--color-info);
}

.audiencia-card--tipo-anpp .audiencia-card__tag-tipo {
  background: var(--color-info);
}

/* Recém-importada e ainda não revisada — some assim que o servidor salvar a audiência */
.audiencia-card--revisao-pendente .badge-time {
  background: var(--color-neutral-dark);
}

.audiencia-card--revisao-pendente .audiencia-card__tag-tipo {
  background: var(--color-neutral-dark);
}

/* Audiência já passada (dia anterior, ou hoje com horário já vencido) */
.audiencia-card--passada {
  opacity: 0.55;
  filter: grayscale(0.35);
}

.tag-infancia {
  background: var(--color-lilac);
  color: var(--color-text-inverse);
}

.tag-depoimento-especial {
  background: var(--color-pink);
  color: var(--color-text-inverse);
}

.tag-continuacao {
  background: var(--color-neutral);
  color: var(--color-text-inverse);
}

/* ---- Botão "Entrar na sala virtual" (modal do dossiê) ---- */
.btn-sala-virtual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  background: var(--color-neutral);
  color: var(--color-text-inverse);
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.btn-sala-virtual:hover {
  filter: brightness(0.92);
  text-decoration: none;
}

.btn-sala-virtual--ativa {
  background: var(--color-success);
}

.audiencia-card__acoes {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

/* ---- Modal (dossiê da audiência) ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 48, 46, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  z-index: 100;
  overflow-y: auto;
}

.modal-dossie {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 80vw;
  max-width: 80vw;
  max-height: calc(100vh - var(--space-8));
  display: flex;
  flex-direction: column;
}

.modal-dossie__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.modal-dossie__acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: -4px;
}

.modal-dossie__body {
  padding: var(--space-5);
  overflow-y: auto;
}

.dossie-secao + .dossie-secao {
  margin-top: var(--space-5);
}

.dossie-secao h4 {
  margin: 0 0 var(--space-3);
  color: var(--color-primary);
}

.dossie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
}

.dossie-campo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dossie-campo__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
}

.dossie-campo__valor {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  overflow: hidden;
}

.icon-btn-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon-btn-inline svg {
  width: 14px;
  height: 14px;
}

.icon-btn-inline:hover {
  color: var(--color-primary-hover);
}

.dossie-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dossie-lista li {
  position: relative;
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3);
  padding-right: 44px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  border-left: 10px solid transparent;
}

.dossie-resumo {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: var(--font-size-sm);
  background: var(--color-surface-alt);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  margin: 0;
}

/* Divisor por dia (dashboard) */
.day-divider {
  margin: var(--space-7) 0 var(--space-4);
}

.day-divider__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.day-divider__titulo svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.day-divider__linha {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-3) 0;
}

.day-divider__resumo {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.day-divider__resumo strong {
  font-weight: var(--font-weight-bold);
}

/* ---- Formulário ---- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.field label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.field input,
.field select,
.field textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
  outline: none;
}

.field-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ---- Utilitários de layout ---- */
.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ---- Topbar (compartilhada entre páginas logadas) ---- */
.topbar-v2 {
  padding: var(--space-5) 0 var(--space-4);
}

.topbar-v2__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.topbar-v2__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
}

.topbar-brand:hover {
  text-decoration: none;
}

.topbar-brand__logo {
  height: 44px;
  width: auto;
}

.topbar-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  flex-wrap: wrap;
}

.topbar-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.topbar-meta__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.topbar-meta__sep {
  color: var(--color-border-strong);
}

.topbar-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.icon-btn svg {
  width: 21px;
  height: 21px;
}

.icon-btn:hover {
  background: var(--color-primary-tint);
  text-decoration: none;
}

.icon-btn.active {
  background: var(--color-primary-tint);
}

.icon-btn--whatsapp {
  color: #25D366;
}
.icon-btn--whatsapp:hover {
  background: rgba(37, 211, 102, 0.12);
}

/* ---- Barra de busca/filtro ---- */
.toolbar-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.toolbar-card__search-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.toolbar-card__search-row input[type="search"] {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

/* ---- Botão flutuante (Nova audiência) ---- */
.fab-btn {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  transition: transform var(--transition-fast);
}

.fab-btn:hover {
  transform: scale(1.06);
  text-decoration: none;
}

.fab-btn img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.toolbar-card__periodo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.toolbar-card__periodo label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.toolbar-card__periodo input[type="date"] {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.empty-state {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

/* ---- Chips removíveis (partes, testemunhas, defesa) ---- */
.chip-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-left: 10px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

/* Status de certidão/comparecimento (partes, testemunhas e, refletido,
   participantes): tarja de 10px no início da linha em vez de colorir o
   fundo inteiro. Precisa repetir a regra prefixada com ".dossie-lista li"
   porque a regra base ".dossie-lista li { border-left: ... transparent }"
   (elemento+classe, mais específica que uma classe sozinha) do contrário
   venceria e a cor nunca apareceria no modal. */
.chip-row--status-positivo,
.dossie-lista li.chip-row--status-positivo { border-left-color: var(--color-success); }
.chip-row--status-negativo,
.dossie-lista li.chip-row--status-negativo { border-left-color: var(--color-danger); }
.chip-row--status-alerta,
.dossie-lista li.chip-row--status-alerta { border-left-color: var(--color-warning); }
.chip-row--status-turvo,
.dossie-lista li.chip-row--status-turvo { border-left-color: #838387; }

.anotacoes-pessoa {
  flex: 1 1 100%;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border-strong);
  margin-top: var(--space-1);
}

.texto-certidao {
  font-size: var(--font-size-xs);
}

.dossie-lista li .texto-certidao {
  display: none;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border-strong);
}

.dossie-lista li .anotacao-toggle[open] ~ .texto-certidao {
  display: block;
}

/* Anotações de partes/testemunhas ficam ocultas por padrão — uma seta em
   círculo na cor padrão dos botões revela o texto (cadastro e modal). A
   mesma seta, no mesmo lugar, fecha de novo (só gira 180°). No modal isso é
   um <details>/<summary> (HTML estático, sem JS de wiring); no cadastro é
   um botão de verdade (.btn-toggle-anotacao). */
/* No modal, a seta fica position:absolute no canto superior direito do
   <li> (que reserva o espaço com padding-right), sempre no mesmo lugar,
   aberta ou fechada. O texto-certidao NÃO fica dentro do <details> — é um
   <div> irmão, escondido por padrão e revelado via seletor CSS
   ".anotacao-toggle[open] ~ .texto-certidao" — assim ele ocupa a largura
   inteira do item (alinhado à esquerda) sem afetar a posição da seta. */
.anotacao-toggle {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
}

.anotacao-toggle summary,
.btn-toggle-anotacao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  cursor: pointer;
  list-style: none;
}

.anotacao-toggle summary svg,
.btn-toggle-anotacao svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-fast);
}

.anotacao-toggle summary::-webkit-details-marker {
  display: none;
}

.anotacao-toggle[open] summary svg,
.btn-toggle-anotacao.aberto svg {
  transform: rotate(180deg);
}

.chip-row .chip-fields {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-2);
}

.chip-row input, .chip-row select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--color-surface);
}

.chip-row__handle {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  cursor: grab;
  flex-shrink: 0;
}

.chip-row__handle svg {
  width: 16px;
  height: 16px;
}

.chip-row--arrastando {
  opacity: 0.4;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

/* Cabeçalho do modal precisa poder quebrar linha — título e ações num único
   flex row sem wrap transbordava em telas estreitas. */
.modal-dossie__header {
  flex-wrap: wrap;
}

/* Logo alinhado com a margem interna dos cards (toolbar-card, audiencia-card
   etc. têm padding próprio — sem isso o logo ficava mais à esquerda que o
   conteúdo dos cards abaixo). */
.topbar-brand {
  padding-left: var(--space-5);
}

/* ---- Tabela simples (Equipe, Painel Admin) ---- */
.team-table { width: 100%; border-collapse: collapse; }
.team-table th, .team-table td {
  text-align: left; padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.team-table th { color: var(--color-text-muted); font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.03em; }
.team-table tbody tr { cursor: default; }
.team-table tbody tr[data-clicavel] { cursor: pointer; }
.team-table tbody tr[data-clicavel]:hover { background: var(--color-surface-alt); }
.team-empty { padding: var(--space-6); text-align: center; color: var(--color-text-muted); }

/* ---- Mensagem de formulário (Equipe, Painel Admin) ---- */
.form-message { font-size: var(--font-size-sm); padding: var(--space-3); border-radius: var(--radius-sm); display: none; margin-bottom: var(--space-4); }
.form-message.show { display: block; }
.form-message.error { background: var(--color-danger-tint); color: var(--color-danger); }
.form-message.success { background: var(--color-success-tint); color: var(--color-success); }

/* ---- Ajustes finos para mobile ---- */
@media (max-width: 640px) {
  /* Tabelas simples (Equipe) não tinham rolagem própria — em telas estreitas
     isso empurrava a página inteira pros lados. Só entra em telas estreitas:
     em telas largas, "display:block" com nowrap forçava o grid da página
     (.layout) a esticar a coluna da tabela e estourar o layout inteiro. */
  .team-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .topbar-brand {
    padding-left: var(--space-4);
  }

  .container {
    padding: 0 var(--space-3);
  }

  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }

  .card, .toolbar-card {
    padding: var(--space-4);
  }

  /* .row é usado pra várias fileiras de botões/inputs (ex.: upload +
     "Analisar" em Análise de Autos) e sem wrap estourava a largura da tela. */
  .row {
    flex-wrap: wrap;
  }

  input[type="file"] {
    max-width: 100%;
  }

  .modal-overlay {
    padding: var(--space-3) var(--space-2);
  }

  .modal-dossie {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - var(--space-4));
  }

  .modal-dossie__header {
    padding: var(--space-4) var(--space-4) var(--space-5);
  }

  .modal-dossie__body {
    padding: var(--space-4);
  }

  .modal-dossie__acoes {
    align-items: flex-start;
  }

  /* Topbar: espaço extra no topo da janela + logo 25% menor (mesma
     proporção, controlada pela altura já que a largura é auto). */
  .topbar-v2 {
    padding-top: calc(var(--space-5) + var(--space-4));
  }

  .topbar-brand__logo {
    height: 33px;
  }

  /* Tenant numa linha, nome do usuário embaixo, entrelinha simples (sem o
     separador "|", que só fazia sentido lado a lado). */
  .topbar-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.4;
  }

  .topbar-meta__sep {
    display: none;
  }

  /* Espaçamento mínimo entre os ícones pra caber tudo numa linha só,
     mesmo nas telas com mais ações (ex.: dashboard). */
  .topbar-icons {
    gap: 2px;
  }

  .icon-btn {
    width: 34px;
    height: 34px;
  }

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

  /* Card da audiência: mostra o texto inteiro (sem cortar com reticências)
     e empilha visualizar/editar em vez de lado a lado, já que o texto
     agora pode ocupar mais de uma linha. */
  .audiencia-card {
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }

  .audiencia-card__nome,
  .audiencia-card__linha2,
  .audiencia-card__linha2-texto {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .audiencia-card__acoes {
    flex-direction: column;
  }

  .badge-time {
    min-width: 3.5rem;
    min-height: 3rem;
    font-size: var(--font-size-sm);
    padding: var(--space-1) var(--space-2);
  }

  .fab-btn {
    right: var(--space-4);
    bottom: var(--space-4);
    width: 56px;
    height: 56px;
  }

  .dossie-grid {
    grid-template-columns: 1fr;
  }

  .digitos-grid {
    gap: var(--space-1);
  }

  /* .chip-fields tem flex:1 e disputava a mesma linha flex do botão
     "Remover" — sobrava só ~200px pros campos. Empilha tudo em coluna. */
  .chip-row {
    flex-direction: column;
    align-items: stretch;
  }

  .chip-row .chip-fields {
    grid-template-columns: 1fr;
  }

  .chip-row > button {
    align-self: flex-end;
  }

  .chip-row__handle {
    align-self: center;
  }
}