/* Executive Backlog v2 — tema dark moderno.
   Referências: Synapse (grupos), Cocreate (violeta), Drank (anel de progresso/verde). */

:root {
  color-scheme: dark;
  --bg: #0d0f13;
  --surface: #16181e;
  --surface-2: #1c1f26;
  --surface-hover: #22262f;
  --borda: rgb(255 255 255 / 7%);
  --borda-forte: rgb(255 255 255 / 14%);
  --texto: #eceef2;
  --texto-sec: #9aa1ad;
  --texto-fraco: #676e7a;
  --acento: #8b7cf6;
  --acento-hover: #a394f8;
  --acento-suave: rgb(139 124 246 / 16%);
  --verde: #4ade80;
  --vermelho: #f87171;
  --vermelho-suave: rgb(248 113 113 / 12%);
  --ambar: #fbbf24;
  --ambar-suave: rgb(251 191 36 / 8%);
  --ciano: #22d3ee;
  --raio: 10px;
  --raio-p: 6px;
  --sombra: 0 12px 40px rgb(0 0 0 / 45%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

[x-cloak] {
  display: none !important;
}

h1 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ---------- Tela de autenticação ---------- */

.tela-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cartao-auth {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 32px;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--sombra);
}

.cartao-auth .subtitulo {
  margin: -8px 0 8px;
  color: var(--texto-sec);
  font-size: 13px;
}

.erro {
  color: var(--vermelho);
  font-size: 12px;
  margin: 0;
}

/* ---------- Layout geral ---------- */

.app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px;
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tag-v2 {
  font-size: 10px;
  font-weight: 600;
  color: var(--acento);
  background: var(--acento-suave);
  border-radius: 99px;
  padding: 2px 8px;
  vertical-align: middle;
  letter-spacing: 0.04em;
}

.barra-acoes {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

/* Segunda fileira: filtros e controles de visão, tudo em escala menor que a de criar */
.barra-filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

/* Fundo sólido (não transparente): o select nativo herda essa cor na lista de
   opções, e com transparência o contraste do texto ficava ruim. */
.filtro {
  padding: 5px 8px;
  font-size: 12px;
  color: var(--texto);
  background: var(--surface);
  max-width: 170px;
}

.filtro.ativo {
  border-color: var(--acento);
  color: var(--texto);
  background: var(--surface-2);
}

.separador-barra {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: var(--borda);
}

.input-nova {
  flex: 1;
}

.toggle-tipo {
  display: flex;
  align-items: center;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}

.toggle-tipo button {
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--texto-sec);
  padding: 8px 12px;
  font-size: 12px;
}

.toggle-tipo button.ativo {
  background: var(--acento-suave);
  color: var(--acento);
}

.barra-filtros .toggle-tipo button {
  padding: 5px 10px;
}

.nivel-atual {
  padding: 0 8px;
  font-size: 11px;
  color: var(--texto-fraco);
  white-space: nowrap;
}

.botao-fantasma.compacto {
  padding: 5px 10px;
  font-size: 12px;
}

.botao-fantasma.ativo {
  border-color: var(--acento);
  background: var(--acento-suave);
  color: var(--acento);
}

.carregando,
.lista-vazia,
.vazio {
  color: var(--texto-sec);
  padding: 24px 0;
  text-align: center;
}

/* ---------- Controles base ---------- */

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: 13px;
  color: var(--texto);
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  padding: 8px 10px;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--acento);
}

button {
  cursor: pointer;
}

.botao-primario {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--raio-p);
}

.botao-primario:hover {
  background: var(--acento-hover);
  border-color: var(--acento-hover);
}

.botao-fantasma {
  background: transparent;
  border-color: var(--borda);
  color: var(--texto-sec);
}

.botao-fantasma:hover {
  background: var(--surface);
  color: var(--texto);
}

.botao-perigo {
  background: transparent;
  border-color: rgb(248 113 113 / 40%);
  color: var(--vermelho);
  border-radius: var(--raio-p);
  padding: 7px 14px;
}

.botao-perigo:hover {
  background: var(--vermelho-suave);
}

/* ---------- Grade (lista) ---------- */

.grade {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: visible;
}

.linha {
  display: grid;
  grid-template-columns: 26px 34px minmax(0, 1fr) 100px 148px 112px 52px;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-bottom: 1px solid var(--borda);
  border-left: 3px solid transparent;
}

/* Cor da pasta: faixa lateral + leve tingimento da linha inteira, pra ler de longe */
.linha.linha-grupo {
  border-left-color: var(--pasta-cor, transparent);
}

.linha.linha-grupo[style*="--pasta-cor"] {
  background: color-mix(in srgb, var(--pasta-cor) 12%, var(--surface-2));
}

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

/* A indentação vai SÓ na coluna do título. Se fosse padding na linha inteira, todas
   as colunas seguintes (data, %, ações) sairiam do alinhamento entre os níveis.
   Usa --nivel (e não seletores por nível) porque a árvore tem profundidade livre. */
.col-titulo {
  padding-left: calc(var(--nivel, 0) * 18px);
}

.linha-grupo .celula-grupo {
  padding-left: calc(var(--nivel, 0) * 18px);
}

/* Prazo: âmbar pra hoje, vermelho pra atrasada (antes do :hover, que deve vencer) */
.linha.linha-hoje {
  background: var(--ambar-suave);
}

.linha.linha-atrasada {
  background: var(--vermelho-suave);
}

/* Urgente marca com BORDA (o fundo vermelho já é de "atrasada", e uma tarefa
   urgente também pode estar atrasada — as duas marcas precisam conviver). */
.linha.linha-urgente {
  border-left-color: var(--vermelho);
  box-shadow: inset 3px 0 14px -8px var(--vermelho);
}

.linha.linha-urgente .col-titulo input {
  font-weight: 600;
}

.linha:not(.cabecalho):not(.linha-grupo):hover {
  background: rgb(255 255 255 / 2%);
}

/* Wrapper dos <template x-if> de demanda/checklist: mantém as células no grid da linha */
.celulas {
  display: contents;
}

.cabecalho {
  color: var(--texto-fraco);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--borda);
}

.col-ordenavel {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.col-ordenavel:hover {
  color: var(--texto);
}

/* ---------- Linha de grupo (pasta / sem pasta) ---------- */

.linha-grupo {
  background: var(--surface-2);
}

/* Respiro antes de cada pasta de raiz, separando os blocos de verdade.
   O box-shadow pinta a faixa do vão com a cor do FUNDO DA PÁGINA — só a margem
   deixaria aparecer o cinza do próprio card, que não lê como separação.
   (box-shadow e não ::before: a linha é um grid container, e um pseudo-elemento
   viraria mais uma célula do grid.)
   Irmão adjacente em vez de :first-child porque o <template> do Alpine ocupa a
   primeira posição do container. */
.linha + .linha-grupo[data-profundidade="0"] {
  margin-top: 10px;
  box-shadow: 0 -10px 0 var(--bg);
}

.celula-grupo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  color: var(--texto-sec);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.celula-grupo.sem-pasta {
  color: var(--texto-fraco);
  padding: 4px 4px;
}

.pasta-icone {
  font-size: 13px;
}

.pasta-nome {
  background: transparent;
  border-color: transparent;
  color: var(--texto);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  padding: 4px 6px;
  min-width: 0;
  flex: 0 1 auto;
  width: 260px;
}

.pasta-nome:hover {
  border-color: var(--borda);
}

.pasta-contador {
  color: var(--texto-fraco);
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 99px;
  padding: 1px 8px;
  font-size: 11px;
}

.celula-grupo .anel-botao {
  margin-left: auto;
}

/* ---------- Células ---------- */

.col-arrastar {
  width: 26px;
}

.arrastar {
  cursor: grab;
  color: var(--texto-fraco);
}

.arrastar:hover {
  color: var(--texto);
}

.col-status {
  position: relative;
}

.col-titulo {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.col-titulo input {
  flex: 1;
  min-width: 0;
}

.linha input,
.linha select {
  background: transparent;
  border-color: transparent;
  width: 100%;
  padding: 6px 8px;
}

.linha input:hover,
.linha select:hover {
  border-color: var(--borda);
}

.linha input:focus,
.linha select:focus {
  border-color: var(--acento);
  background: var(--surface-2);
}

/* Botões pequenos de ação na linha: sempre acessíveis (touch), discretos até o hover */
.botao-chevron,
.botao-acao {
  flex: 0 0 auto;
  background: transparent;
  border-color: transparent;
  color: var(--texto-sec);
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: var(--raio-p);
}

/* Estreito de propósito: fica entre o emoji e o texto da tarefa, então cada px
   aqui vira folga extra antes do título. */
.col-titulo .botao-chevron {
  padding: 2px 2px;
}

.botao-chevron:hover,
.botao-acao:hover {
  background: var(--surface-hover);
  color: var(--texto);
}

.botao-acao {
  border-color: var(--borda);
  opacity: 0.5;
}

.linha:hover .botao-acao,
.botao-acao:focus {
  opacity: 1;
}

/* ---------- Coluna de detalhes (ícones "i" e "×", fim da linha) ---------- */

/* flex-end: o "×" fica na mesma coluna em tarefa (que tem "i" antes) e em
   subtarefa (que não tem), sem desalinhar */
.col-detalhes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* Âncora de popover: sem isso o menu absoluto escapa pro rodapé da página */
.ancora-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.botao-excluir:hover {
  border-color: var(--vermelho);
  color: var(--vermelho);
}

/* Subtarefa: o "×" já nasce avermelhado pra não ser confundido com o "+" */
.botao-excluir.sempre-vermelho {
  border-color: rgb(248 113 113 / 35%);
  color: var(--vermelho);
}

/* Confirmação compacta: abre PRA ESQUERDA do botão e centrada na própria linha,
   assim nunca cai fora da tela nem obriga a rolar a página. */
/* .menu-flutuante é declarado depois neste arquivo; sem a dupla classe aqui ele
   venceria na cascata e o popover voltaria a ser a caixa alta que abre pra baixo. */
.menu-flutuante.menu-excluir {
  flex-direction: row;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 4px 4px 4px 10px;
  border-radius: 99px;
  top: 50%;
  left: auto;
  right: calc(100% + 6px);
  transform: translateY(-50%);
  white-space: nowrap;
}

.menu-excluir-texto {
  color: var(--texto-sec);
  font-size: 12px;
  margin-right: 2px;
}

.botao-mini {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 50%;
  color: var(--texto-sec);
  font-size: 11px;
  line-height: 1;
}

.botao-mini:hover {
  background: var(--surface-hover);
  color: var(--texto);
}

.botao-mini.perigo {
  background: var(--vermelho-suave);
  border-color: rgb(248 113 113 / 45%);
  color: var(--vermelho);
}

.botao-mini.perigo:hover {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
}

/* Selo "1/3" de subtarefas, ao lado do nome. Ciano discreto com um leve brilho —
   aparece bem sem competir com o status. */
.selo-subtarefas {
  flex: 0 0 auto;
  margin-left: 10px;
  margin-right: 2px;
  color: var(--ciano);
  background: rgb(34 211 238 / 10%);
  border: 1px solid rgb(34 211 238 / 30%);
  border-radius: 99px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgb(34 211 238 / 45%);
}

.selo-subtarefas.completo {
  color: var(--verde);
  background: rgb(74 222 128 / 12%);
  border-color: rgb(74 222 128 / 40%);
  text-shadow: 0 0 8px rgb(74 222 128 / 45%);
}

.botao-detalhes {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 50%;
  color: var(--texto-sec);
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  opacity: 0.5;
}

.linha:hover .botao-detalhes,
.botao-detalhes:focus {
  opacity: 1;
}

.botao-detalhes:hover {
  background: var(--surface-hover);
  border-color: var(--acento);
  color: var(--acento);
}

/* ---------- Status (só emoji) ---------- */

.botao-status {
  background: transparent;
  border-color: transparent;
  font-size: 15px;
  padding: 4px 8px;
  border-radius: var(--raio-p);
  line-height: 1;
}

.botao-status:hover {
  background: var(--surface-hover);
}

/* ---------- Menus flutuantes ---------- */

.menu-flutuante {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  background: var(--surface-2);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 4px;
}

.opcao-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--texto);
  text-align: left;
  padding: 7px 10px;
  border-radius: var(--raio-p);
  white-space: nowrap;
}

.opcao-menu:hover {
  background: var(--surface-hover);
}

/* ---------- Popover de pasta (emoji + cor) ---------- */

.menu-pasta {
  min-width: 200px;
  gap: 8px;
  padding: 10px;
}

.menu-pasta .campo-emoji {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-pasta .campo-emoji span {
  color: var(--texto-fraco);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.menu-pasta .campo-emoji input {
  background: var(--surface);
  width: 100%;
}

.paleta-cores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.opcao-cor {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}

.opcao-cor.ativo {
  border-color: var(--texto);
}

/* Mostra exatamente o cinza que a pasta tem quando nasce, pra dar pra voltar a ele */
.opcao-cor.cor-padrao {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--borda-forte);
}

.opcao-fatia {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-sec);
  border-radius: var(--raio-p);
  padding: 5px 8px;
  font-size: 11px;
  white-space: nowrap;
}

.opcao-fatia:hover {
  border-color: var(--acento);
  color: var(--texto);
}

.opcao-fatia.ativo {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
}

/* ---------- Barra de progresso (linha da demanda) ---------- */

.col-progresso {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* !important necessário: a regra genérica ".linha input" (padding/background/border)
   tem mais especificidade que ".progresso-slider" e, sem isso, apaga o preenchimento. */
.progresso-slider {
  flex: 1;
  min-width: 0;
  height: 6px;
  padding: 0 !important;
  border: none !important;
  border-radius: 99px;
  background: linear-gradient(to right, var(--acento) var(--fill, 0%), var(--surface-2) var(--fill, 0%)) !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.progresso-slider.completo {
  background: linear-gradient(to right, var(--verde) var(--fill, 0%), var(--surface-2) var(--fill, 0%)) !important;
}

.progresso-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--texto);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--borda-forte);
  cursor: grab;
}

.progresso-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--texto);
  box-shadow: 0 0 0 1px var(--borda-forte);
  cursor: grab;
}

.progresso-slider::-moz-range-track {
  height: 6px;
  border-radius: 99px;
  background: transparent;
}

.progresso-valor {
  flex: 0 0 auto;
  width: 30px;
  color: var(--texto-sec);
  font-size: 11px;
  text-align: right;
}

/* ---------- Anel de progresso ---------- */

.anel-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border-color: transparent;
  color: var(--texto-sec);
  font-size: 12px;
  padding: 4px 6px;
  border-radius: var(--raio-p);
}

button.anel-botao:hover {
  background: var(--surface-hover);
  color: var(--texto);
}

.anel-botao.estatico {
  cursor: default;
}

.anel {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
}

.anel-fundo {
  fill: none;
  stroke: var(--borda-forte);
  stroke-width: 2.5;
}

.anel-valor {
  fill: none;
  stroke: var(--acento);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s ease;
}

.anel-valor.completo {
  stroke: var(--verde);
}

/* ---------- Data ---------- */

.col-data {
  position: relative;
}

.data-rotulo {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--raio-p);
  color: var(--texto-sec);
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.data-rotulo:hover {
  background: var(--surface-hover);
  color: var(--texto);
}

.data-rotulo.vencida {
  color: var(--vermelho);
}

.data-rotulo.hoje {
  color: var(--ambar);
  font-weight: 600;
}

.data-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  width: 100%;
}

/* ---------- Checklist ---------- */

/* Quadradinho arredondado (não bolha verde chapada): o "check" só aparece quando
   marcado, e em tom suave. */
.check {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--borda-forte);
  border-radius: 5px;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.check svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: transparent;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.check:hover {
  border-color: var(--verde);
}

.check:hover svg {
  stroke: rgb(74 222 128 / 45%);
}

.check.feito {
  background: rgb(74 222 128 / 16%);
  border-color: rgb(74 222 128 / 55%);
}

.check.feito svg {
  stroke: var(--verde);
}

.riscado {
  text-decoration: line-through;
  color: var(--texto-fraco) !important;
}

/* ---------- Drag and drop ---------- */

.sortable-ghost {
  opacity: 0.4;
}

/* ---------- Popup ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(0 0 0 / 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal {
  width: min(580px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--borda-forte);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-topo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.modal-titulo {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  background: transparent;
  border-color: transparent;
  resize: none;
  overflow: hidden;
  max-height: 40vh;
}

.modal-titulo:hover {
  border-color: var(--borda);
}

.botao-fechar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border-color: var(--borda);
  color: var(--texto-sec);
  border-radius: var(--raio-p);
}

.botao-fechar:hover {
  background: var(--surface-2);
  color: var(--texto);
}

.campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.campo > span {
  color: var(--texto-fraco);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.campo input,
.campo select {
  width: 100%;
  background: var(--surface-2);
}

.fatias {
  display: flex;
  gap: 6px;
}

/* ---------- Comentários ---------- */

.comentarios h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-sec);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comentarios .carregando,
.comentarios .vazio {
  padding: 8px 0;
  font-size: 13px;
}

.lista-comentarios {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lista-comentarios li {
  background: var(--surface-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  padding: 10px 12px;
}

.comentario-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
}

.comentario-meta strong {
  color: var(--acento);
}

.comentario-meta span {
  color: var(--texto-fraco);
}

.lista-comentarios p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.novo-comentario {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.novo-comentario textarea {
  resize: vertical;
  min-height: 64px;
  background: var(--surface-2);
}

.novo-comentario .botao-primario {
  align-self: flex-end;
}

.modal-rodape {
  border-top: 1px solid var(--borda);
  padding-top: 14px;
}

.confirmar-exclusao {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--texto-sec);
  flex-wrap: wrap;
}

/* ---------- Exportação pro WhatsApp ---------- */

.acoes-topo {
  display: flex;
  gap: 8px;
}

.botao-whats {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.icone-whats {
  width: 15px;
  height: 15px;
  fill: #25d366;
  flex: 0 0 auto;
}

.botao-whats:hover {
  border-color: rgb(37 211 102 / 45%);
}

.modal-export {
  width: min(620px, 100%);
}

.titulo-export {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.dica-export {
  margin: -8px 0 0;
  color: var(--texto-fraco);
  font-size: 12px;
}

.texto-export {
  width: 100%;
  min-height: 48vh;
  resize: vertical;
  background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.rodape-export {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.aviso-copiado {
  color: var(--verde);
  font-size: 12px;
}

/* ---------- Toast de erro ---------- */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--vermelho-suave);
  border: 1px solid rgb(248 113 113 / 40%);
  color: var(--vermelho);
  border-radius: var(--raio);
  padding: 10px 18px;
  font-size: 13px;
  box-shadow: var(--sombra);
}