/* Ajustes fora do build do Tailwind (carregado depois do tailwind.css). */
[data-flash] { transition: opacity 0.6s ease; }
.htmx-request .htmx-indicator { display: inline-flex; }
.htmx-indicator { display: none; }
dialog.modal { margin: auto; }

/* Efeitos (desligáveis em Configurações → Geral; body[data-efeitos="0"]) */
canvas.confete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 80; }
body[data-efeitos="1"] .lista .linha, body[data-efeitos="1"] .cartao-tarefa, body[data-efeitos="1"] .conversa-item { animation: aparecer 360ms cubic-bezier(0.22, 1, 0.36, 1) both; }
body[data-efeitos="1"] .lista .linha:nth-child(2), body[data-efeitos="1"] .cartao-tarefa:nth-child(2) { animation-delay: 30ms; }
body[data-efeitos="1"] .lista .linha:nth-child(3), body[data-efeitos="1"] .cartao-tarefa:nth-child(3) { animation-delay: 60ms; }
body[data-efeitos="1"] .lista .linha:nth-child(4), body[data-efeitos="1"] .cartao-tarefa:nth-child(4) { animation-delay: 90ms; }
body[data-efeitos="1"] .lista .linha:nth-child(5), body[data-efeitos="1"] .cartao-tarefa:nth-child(5) { animation-delay: 120ms; }
body[data-efeitos="1"] .lista .linha:nth-child(6), body[data-efeitos="1"] .cartao-tarefa:nth-child(6) { animation-delay: 150ms; }
body[data-efeitos="1"] .lista .linha:nth-child(n+7), body[data-efeitos="1"] .cartao-tarefa:nth-child(n+7) { animation-delay: 180ms; }
@keyframes aparecer { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
body[data-efeitos="1"] .linha.concluindo { animation: concluir 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
body[data-efeitos="1"] .linha.concluindo .marcador { background: var(--color-primary); border-color: var(--color-primary); color: var(--acao-texto); animation: marcador-pop 360ms cubic-bezier(0.22, 1, 0.36, 1); }
body[data-efeitos="1"] .linha.concluindo .marcador-check { opacity: 1; }
body[data-efeitos="1"] .linha.concluindo .principal { text-decoration: line-through; color: var(--cor-suave); }
@keyframes concluir { 0% { opacity: 1; } 70% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(18px); } }
@keyframes marcador-pop { 0% { transform: scale(0.7); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } }
body[data-efeitos="1"] .btn-acao:hover { box-shadow: 0 4px 14px color-mix(in oklab, var(--color-primary) 28%, transparent); }
body[data-efeitos="1"] .lateral-item.ativo { animation: aparecer 240ms both; }
@media (prefers-reduced-motion: reduce) { body[data-efeitos] * { animation: none !important; } }


/* ---------- barras de rolagem escondidas (Configurações → Geral). A rolagem continua: roda do mouse, toque, teclado. */
html[data-sem-barras="1"], html[data-sem-barras="1"] * { scrollbar-width: none; -ms-overflow-style: none; }
html[data-sem-barras="1"] ::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---------- menu lateral recolhido: só ícones (botão « no rodapé ou tecla [ ) */
.lateral { transition: width 200ms cubic-bezier(0.22, 1, 0.36, 1), padding 200ms ease; overflow-x: hidden; overflow-y: auto; }
.lateral-recolher svg { transition: transform 200ms ease; }
html[data-lateral="mini"] .lateral { width: 60px; padding: 20px 8px 16px; }
html[data-lateral="mini"] .lateral-rotulo, html[data-lateral="mini"] .lateral-status, html[data-lateral="mini"] .lateral .tecla { display: none; }
html[data-lateral="mini"] .lateral-logo { justify-content: center; padding: 0 0 18px; }
html[data-lateral="mini"] .lateral-item { justify-content: center; padding: 9px 0; position: relative; }
html[data-lateral="mini"] .lateral-item .contador { position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; margin: 0; }
html[data-lateral="mini"] .lateral-rodape { padding: 0; align-items: center; }
html[data-lateral="mini"] .lateral-botoes { flex-direction: column; gap: 2px; }
html[data-lateral="mini"] .lateral-botoes form { margin-left: 0 !important; }
html[data-lateral="mini"] .lateral-recolher svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .lateral, .lateral-recolher svg { transition: none; } }

/* conteúdo centralizado na área livre; com o menu recolhido a tela ganha a largura que o menu liberou */
.tela { margin-inline: auto; }
html[data-lateral="mini"] .tela:not(.tela-kanban) { max-width: 1660px; }

/* modal "Virar tarefa" (a Íris preenche) */
.tarefa-msg-modal { max-width: 44rem; width: 100%; }
.iris-preenchendo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cor-suave); padding: 6px 10px;
  border-radius: 8px; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); margin-bottom: 10px; }
.iris-preenchendo svg { color: var(--color-primary); flex: none; }
.iris-preenchendo[data-iris-estado="carregando"] svg { animation: iris-pulso 1.2s ease-in-out infinite; }
.iris-preenchendo[data-iris-estado="erro"] { background: color-mix(in oklab, var(--color-error) 10%, var(--color-base-100)); }
.preenchido-iris { box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 30%, transparent); }
@keyframes iris-pulso { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .iris-preenchendo svg { animation: none !important; } }

/* fundo do modal: o botão "fechar" só serve para clicar fora, sem texto aparecendo */
.modal-backdrop button { color: transparent; }


/* ================= Acabamento (lote de design, 02/10): tokens, foco, sombras, movimento ================= */
:root { --sombra-1: 0 1px 2px rgb(27 31 36 / 0.06); --sombra-2: 0 4px 14px rgb(27 31 36 / 0.09); --sombra-3: 0 12px 32px rgb(27 31 36 / 0.16);
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);
  --anel: 0 0 0 3px color-mix(in oklab, var(--color-primary) 28%, transparent); accent-color: var(--color-primary); }
[data-theme="cadernodark"] { --sombra-1: 0 1px 2px rgb(0 0 0 / 0.35); --sombra-2: 0 4px 16px rgb(0 0 0 / 0.45); --sombra-3: 0 12px 36px rgb(0 0 0 / 0.6);
  --acao-texto: color-mix(in oklab, var(--color-primary) 18%, #0d0f12); --acao-hover: color-mix(in oklab, var(--color-primary) 82%, white); }
::selection { background: var(--tinta-suave); }
.meta { font-size: 12.5px; color: var(--cor-suave); }
.titulo-pagina, .secao-titulo h2, .modal-box .titulo { text-wrap: balance; }
.texto-ajuda, .subtitulo-pagina, .bolha .texto { text-wrap: pretty; }

/* foco visível, um só anel */
:where(.btn-acao, .btn-neutro, .btn-leve, .btn-mini, .lateral-item, .aba, .cat-aba, .config-item, .conversa-item, .marcador, .ag-aba,
  .reacao, .menu-contexto button, .inbox-filtros .filtro, .alternar-modo a, .ag-botao, .cor-opcao):focus-visible { outline: 0; box-shadow: var(--anel); }
.campo-busca:focus-within { border-color: var(--color-primary); box-shadow: var(--anel); }
.cor-opcao:has(:focus-visible) { box-shadow: var(--anel); }
.alternar-modo { overflow: visible; }

/* apertar afunda, passar o mouse ergue */
:where(.btn-acao, .btn-neutro, .btn-leve, .btn-mini):active { scale: 0.97; }
.btn-acao:active { transform: none; }
body[data-efeitos="1"] .cartao-tarefa { transition: border-color var(--transicao), box-shadow var(--dur-2) var(--ease-saida), translate var(--dur-2) var(--ease-saida); }
body[data-efeitos="1"] .cartao-tarefa:hover { translate: 0 -1px; box-shadow: var(--sombra-2); }
body[data-efeitos="1"] .sortable-chosen { box-shadow: var(--sombra-3); rotate: 0.5deg; }
body[data-efeitos="1"] .lateral-item.ativo { animation: none; }

/* superfícies flutuantes: sombra em token (no escuro, sem isso, somem no fundo) */
.menu-contexto, .ag-lista, .ag-janela, dialog.modal .modal-box, .dropdown-content, .barra-selecao, .seletor-reacao { box-shadow: var(--sombra-3); }
body[data-efeitos="1"] :is(.menu-contexto, .dropdown-content, .ag-lista, .seletor-reacao) { animation: surgir var(--dur-2) var(--ease-saida) both; }
@keyframes surgir { from { opacity: 0; translate: 0 4px; } }
#toasts .alert { translate: 0 0; }
@keyframes surgir-toast { from { opacity: 0; translate: 0 -6px; } }
#toasts .alert { animation-name: surgir-toast; }

/* carregando */
.esqueleto { background: var(--color-base-200); border-radius: 8px; min-height: 3rem; animation: pulso 1.2s ease-in-out infinite; }
.chat-embutido .esqueleto { min-height: 16rem; }
@keyframes pulso { 50% { opacity: 0.45; } }
button.htmx-request, form.htmx-request button[type=submit] { opacity: 0.6; cursor: progress; }
button.htmx-request > svg:first-child { animation: girar 0.9s linear infinite; }
@keyframes girar { to { rotate: 360deg; } }

/* cabeçalhos presos no rolar; topo translúcido só onde tem função */
.kanban-coluna-titulo { position: sticky; top: 0; background: var(--color-base-100); z-index: 2; }
.tabela-lista thead th { position: sticky; top: 0; background: var(--color-base-100); z-index: 1; }
.topo-movel, .inbox-topo { background: color-mix(in oklab, var(--color-base-100) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* celular: controles de hover sempre visíveis, campos sem zoom do iPhone, área segura */
@media (hover: none) { .acao-menu, .bolha .menu-bolha { opacity: 1; } .input, .select, .textarea { font-size: 16px; } }
.ag-flutuante { bottom: calc(20px + env(safe-area-inset-bottom)); }
.shell:has(main.inbox-grade) ~ .ag-flutuante { bottom: calc(84px + env(safe-area-inset-bottom)); }   /* não cobre o Enviar da caixa */
.kanban { scroll-snap-type: x proximity; }
.kanban-coluna { scroll-snap-align: start; }

/* avisos: acima do botão flutuante, entram e saem com transição */
#toasts { top: 14px; bottom: auto; right: auto; left: 50%; translate: -50% 0; align-items: center; }   /* no alto, no centro: não cobre o Enviar nem o botão do chat */
#toasts .alert { animation: surgir var(--dur-2) var(--ease-saida) both; transition: opacity var(--dur-3) ease, translate var(--dur-3) ease; box-shadow: var(--sombra-3); }
#toasts .alert.saindo { opacity: 0; translate: 0 -6px; }

/* estado vazio com título */
.vazio-titulo { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-base-content); margin-bottom: 6px; }

/* transição entre páginas (curta; some em reduced-motion) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
.titulo-pagina { view-transition-name: titulo; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .esqueleto, button.htmx-request > svg:first-child, #toasts .alert, .menu-contexto, .dropdown-content, .ag-lista { animation: none !important; }
}
.btn-acao-compacto { padding: 6px 10px; }

/* Portal da equipe (lote 25): situação e mensagens novas, nas listas do painel e no portal */
.pill-chat { background: var(--tinta-suave); color: var(--color-primary); }
.pill.estado-entregue { background: color-mix(in oklab, #2e7d52 16%, transparent); color: #1f5c3b; }
.pill.estado-aguardando { background: color-mix(in oklab, #7c3aed 14%, transparent); color: #5b2bb5; }
.pill.estado-em_andamento { background: color-mix(in oklab, #d97706 16%, transparent); color: #8a4b03; }
[data-theme="cadernodark"] .pill.estado-entregue { color: #7fd0a3; }
[data-theme="cadernodark"] .pill.estado-aguardando { color: #c4a8ff; }
[data-theme="cadernodark"] .pill.estado-em_andamento { color: #f3b35f; }

/* Linha de lista com botões rápidos (08/10): a MESMA linha em Tarefas (status/lista), Hoje e Aprovação */
.linha .codigo { font-size: 12px; color: var(--cor-mais-suave); min-width: 3rem; }
.linha .acoes-linha { display: inline-flex; gap: 4px; flex: none; }
.btn-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--color-base-300); background: var(--color-base-100); color: var(--cor-suave); cursor: pointer; white-space: nowrap; line-height: 1.3; transition: color var(--transicao), border-color var(--transicao), background var(--transicao); }
.btn-mini:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--tinta-suave); }
.btn-mini.concluir { justify-content: center; padding: 3px 8px; }
.btn-mini.concluir svg { width: 14px; height: 14px; }
.btn-mini.concluir:hover { color: var(--acao-texto); background: var(--color-primary); }
@media (max-width: 900px) { .linha .acoes-linha .btn-mini:not(.concluir) { display: none; } }

/* logo segue a cor escolhida (09/10): era um SVG com verde fixo */
.logo-marca { display: inline-flex; flex: none; }
.logo-marca svg { width: 28px; height: 28px; }