/* ============================================================
   Quadro Audiovisual — estilos (tema escuro, padrão Trello dark)
   ============================================================ */

:root{
  --c-text:#b6c2cf;          /* texto principal */
  --c-sub:#9fadbc;           /* texto secundário */
  --c-line:#a6c5e229;        /* bordas */
  --c-surface:#22272b;       /* cartões, campos */
  --c-raised:#282e33;        /* menus, modal, gaveta */
  --c-list:#101204;          /* fundo da lista */
  --c-topbar:#1d2125;
  --c-hover:#a1bdd914;
  --c-hover-strong:#a6c5e229;
  --c-primary:#579dff;
  --c-primary-dark:#85b8ff;
  --c-on-primary:#1d2125;
  --c-danger:#f87168;
  --c-green:#7ee2b8;
  --radius:8px;
  --board-bar-h:52px;
  --shadow-1:0 1px 1px rgba(0,0,0,.5),0 0 1px rgba(0,0,0,.4);
  --shadow-2:0 8px 16px -4px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.5);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);color:var(--c-text);background:var(--c-topbar);
  font-size:14px;line-height:1.4;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:inherit;color:var(--c-text);accent-color:var(--c-primary)}
::placeholder{color:var(--c-sub);opacity:.8}
::-webkit-scrollbar{width:10px;height:12px}
::-webkit-scrollbar-thumb{background:rgba(166,197,226,.3);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(166,197,226,.45);background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

#app{display:flex;flex-direction:column;height:100vh;background-size:cover;background-position:center}

/* ---------- Barra do quadro ---------- */
.board-bar{
  min-height:var(--board-bar-h);flex:0 0 auto;display:flex;flex-direction:column;gap:6px;
  padding:8px 12px;background:rgba(0,0,0,.32);color:#fff;
}
/* cada andar da barra: em cima título/filtro/equipe/menu, embaixo os blocos */
.bar-linha{display:flex;align-items:center;gap:6px;min-width:0}
/* o menu fica colado na direita, o resto se acomoda à esquerda */
.bar-linha-topo #btn-menu{margin-left:auto}
/* o título cresce e encolhe junto com o texto: o ::after invisível dá a medida */
.board-title-wrap{display:inline-grid;flex:0 0 auto;max-width:40vw}
.board-title-wrap::after{
  content:attr(data-value) " ";grid-area:1/1;visibility:hidden;white-space:pre;
  font-size:18px;font-weight:700;padding:4px 8px;
}
.board-title{
  grid-area:1/1;width:100%;min-width:0;
  font-size:18px;font-weight:700;background:transparent;border:0;color:#fff;padding:4px 8px;border-radius:4px;
}
.board-title:hover{background:rgba(255,255,255,.14)}
.board-title:focus{background:var(--c-surface);color:var(--c-text);outline:2px solid var(--c-primary)}
.bar-btn{
  background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:4px;height:32px;padding:0 10px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.bar-btn:hover{background:rgba(255,255,255,.24)}
.bar-btn.on{background:var(--c-primary);color:var(--c-on-primary);font-weight:600}
.bar-sep{width:1px;height:22px;background:rgba(255,255,255,.28);margin:0 2px}
/* sininho da fila de aprovação: só aparece para líder e só quando há alguém */
.bar-btn.sino{padding:0 8px;gap:4px;position:relative}
.sino-n{
  background:var(--c-danger);color:#1d2125;font-size:11px;font-weight:800;
  min-width:17px;height:17px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 4px;
}
/* linha de cada cadastro esperando */
.aprov-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--c-line)}
.aprov-row:last-child{border-bottom:0}
.aprov-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.aprov-info strong{font-size:13px}
.aprov-info small{font-size:11px}
/* resumo do cadastro na tela de espera */
.espera-dados{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.espera-dados div{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.espera-dados span{color:var(--c-sub);font-size:12px;font-weight:700}
/* comentário que o quadro já deixa pronto: sem cor de pessoa */
.avatar-quadro{background:var(--c-hover-strong);font-size:14px}
.members-row{display:flex;align-items:center;flex:0 0 auto;margin-left:2px}
/* botões dos blocos: uma fileira só, rola de lado se não couber */
.group-nav{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;overflow-x:auto;
  scrollbar-width:none;padding:2px 0;
}
/* no andar de baixo os botões podem quebrar em mais de uma fileira em vez de
   sumirem para o lado — a barra cresce, que é o ponto de tê-la em dois andares */
.bar-linha-blocos .group-nav{flex-wrap:wrap;overflow-x:visible}
.group-nav::-webkit-scrollbar{display:none}
.group-btn{
  flex:0 0 auto;height:28px;padding:0 10px;border:0;border-radius:4px;cursor:pointer;
  font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap;
  background:rgba(255,255,255,.14);color:#fff;opacity:.72;transition:opacity .15s,transform .15s;
}
.group-btn:hover{opacity:1}
.group-btn.on{opacity:1;box-shadow:0 0 0 2px #fff;transform:translateY(-1px)}
/* o + fecha a fileira dos projetos: mesma altura, sem cor, para não se passar
   por mais um projeto */
.group-btn.novo-projeto{
  background:transparent;border:1px dashed rgba(255,255,255,.35);
  opacity:.7;font-size:14px;line-height:1;padding:0 9px;
}
.group-btn.novo-projeto:hover{opacity:1;border-color:#fff;background:rgba(255,255,255,.12)}
.members-row .avatar{margin-right:-6px;cursor:default}
.members-row .avatar:last-child{margin-right:0}
.avatar{
  width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--c-topbar);flex:0 0 auto;
  border:1px solid transparent;text-transform:uppercase;
}

/* ---------- Painel do resumo diário ---------- */
.list.resumo-panel{flex:0 0 auto;width:calc(100vw / 3);min-width:342px;max-width:calc(100vw - 32px);max-height:50vh}
.resumo-panel .list-header{user-select:none}
.resumo-body{padding:6px 14px 14px;overflow-y:auto;overflow-x:hidden}
/* as "listas" de nomes e demandas ficam ao lado, na largura de uma lista comum */
.list.resumo-nomes{width:300px;min-width:300px;flex:0 0 300px}
.list.resumo-demandas{width:420px;min-width:420px;flex:0 0 420px}
.resumo-nomes .resumo-body,.resumo-demandas .resumo-body{padding-top:10px}
.resumo-panel .list-count{font-size:12px;opacity:.85;font-weight:600;padding:6px 4px 0 0}
.resumo-row{margin-top:10px}
.resumo-row h6,.dem-antigas h6{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--c-sub)}
.resumo-btns{display:flex;flex-wrap:wrap;gap:6px}
.resumo-btn{
  position:relative;height:36px;padding:0 14px;border:0;border-radius:6px;cursor:pointer;
  background:var(--c-surface);color:var(--c-text);font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
}
.resumo-btn:hover{background:var(--c-hover)}
.resumo-btn.on{background:var(--resumo-cor);color:var(--resumo-texto)}
.resumo-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{font-size:12px;font-weight:700;color:var(--c-sub);text-align:center;line-height:18px}
.cal-vazio{height:36px}
.resumo-btn.dia{width:auto;height:36px;padding:0;justify-content:center;font-size:14px}
.resumo-btn:disabled{opacity:.28;cursor:default}
.resumo-btn.dia.ok::after,.resumo-btn.dia.falta::after{
  content:"";position:absolute;right:4px;top:4px;width:6px;height:6px;border-radius:50%;
}
.resumo-btn.dia.ok::after,.resumo-dot.ok{background:#4bce97}
.resumo-btn.dia.falta::after,.resumo-dot.falta{background:#f87168}
.resumo-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.resumo-editores{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.resumo-btn.editor{height:42px;justify-content:flex-start;padding:0 12px 0 6px;min-width:0}
.resumo-btn.editor .avatar{width:30px;height:30px;font-size:12px}
.resumo-btn.editor .editor-nome{flex:1 1 auto;text-align:left}

/* tabela de demandas */
.demandas{margin-top:0}
.dem-head,.dem-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(96px,120px) 28px;gap:6px;align-items:center}
.dem-head{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--c-sub);padding:0 0 6px 4px}
.dem-row{margin-bottom:6px}
.dem-row.feita{min-height:34px;border-bottom:1px solid var(--c-line);padding:4px 0 4px 4px}
.dem-cel{font-size:13px;color:var(--c-text);white-space:pre-wrap;word-break:break-word}
.dem-cel.qtd{font-weight:700;padding-left:10px}
.dem-ok{
  margin-top:4px;height:34px;padding:0 16px;border:0;border-radius:6px;cursor:pointer;font-weight:700;
  background:var(--resumo-cor);color:var(--resumo-texto);
}
.dem-ok:hover{filter:brightness(1.08)}
.dem-texto,.dem-qtd{
  min-width:0;width:100%;box-sizing:border-box;
  height:34px;border:1px solid var(--c-line);border-radius:6px;background:var(--c-surface);color:var(--c-text);padding:0 10px;
}
.dem-texto:focus,.dem-qtd:focus{outline:2px solid var(--resumo-cor);border-color:transparent}
.dem-qtd-wrap{display:flex;gap:4px}
.dem-qtd{flex:1 1 auto;-moz-appearance:textfield}
.dem-qtd::-webkit-outer-spin-button,.dem-qtd::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dem-tipo{
  width:44px;flex:0 0 auto;border:0;border-radius:6px;cursor:pointer;font-weight:700;font-size:12px;
  background:var(--resumo-cor);color:var(--resumo-texto);
}
.dem-del{width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--c-sub);cursor:pointer;font-size:13px}
.dem-del:hover{background:var(--c-hover);color:#f87168}
.dem-add{
  margin-top:4px;height:32px;padding:0 10px;border:0;border-radius:6px;cursor:pointer;
  background:transparent;color:var(--c-sub);font-weight:600;text-align:left;width:100%;
}
.dem-add:hover{background:var(--c-hover);color:var(--c-text)}
.dem-antigas{margin-top:12px;padding-top:10px;border-top:1px dashed var(--c-line)}
.dem-antigas p{margin:0 0 4px;font-size:13px;color:var(--c-sub);white-space:pre-wrap}

/* ---------- Canvas / listas ---------- */
.board-canvas{flex:1 1 auto;overflow-x:auto;overflow-y:hidden;padding:8px 8px 12px}
.lists{display:flex;align-items:flex-start;gap:8px;height:100%;padding-bottom:8px}

.list{
  width:280px;flex:0 0 280px;background:var(--c-list);border-radius:12px;display:flex;flex-direction:column;
  max-height:100%;box-shadow:var(--shadow-1);
}
.list.dragging{opacity:.4}
/* Lista fechada: fica só a barra do título. É como todo bloco abre — os cartões
   aparecem na lista em que a pessoa clicar. */
.list.fechada{max-height:none}
.list.fechada .cards,
.list.fechada .list-footer,
.list.fechada .resumo-body{display:none}
.list.fechada .list-header{margin-bottom:0;border-radius:12px}

/* Barra fechada: cantos redondos embaixo também, senão fica a quina reta
   sobrando sobre o fundo da lista. Precisa citar .colored porque a regra das
   listas coloridas tem o mesmo peso e vem depois no arquivo. */
.list.colored.fechada .list-header{border-radius:12px;margin-bottom:0}

/* Abertura: os cartões descem um atrás do outro. A vez de cada um vem do
   atraso que o JS escreve na hora; aqui fica só o movimento. */
@keyframes cardDesce{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
.list.abrindo .cards > .card{animation:cardDesce .26s cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){
  .list.abrindo .cards > .card{animation:none}
}
.list-caret{
  font-size:13px;line-height:20px;opacity:.75;flex:0 0 auto;
  width:14px;text-align:center;user-select:none;transition:opacity .15s;
}
/* o único sinal de que a barra é clicável, no lugar do retângulo antigo */
.list-header:hover .list-caret{opacity:1}
/* Altura única para toda barra de lista, caiba o título em uma linha ou em
   duas: são 2 linhas de 20px mais o respiro de 8px em cima e embaixo. Com a
   medida fixa as barras ficam alinhadas entre si, e o título vai centralizado
   para não dançar conforme o tamanho do nome. */
.list-header{
  display:flex;align-items:center;gap:6px;padding:8px;cursor:pointer;
  min-height:56px;
}
.list-title{
  flex:1;font-weight:600;padding:4px 8px;border-radius:4px;border:0;background:transparent;color:var(--c-text);
  resize:none;overflow:hidden;line-height:20px;min-height:28px;font-size:14px;
}
/* até duas linhas; da terceira em diante corta com reticências, e o nome
   inteiro continua no title do cabeçalho */
.list-title.view{
  white-space:pre-wrap;word-wrap:break-word;cursor:inherit;user-select:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  /* Sem folga própria. A de cima e a de baixo empurravam o título de duas
     linhas para 64px e quebravam o alinhamento; as dos lados só existiam para
     o retângulo do hover, que saiu — e os 16px que elas comiam são o que faz
     nomes como GRAVAÇÕES FINALIZADAS caberem em uma linha. O respiro em
     relação à borda da barra continua, vindo do padding do cabeçalho. */
  padding:0;
}
/* sem realce no hover: renomear agora é duplo clique, então o retângulo mais
   claro só prometia um clique que não existe mais */
.list-title:focus{background:var(--c-surface);color:var(--c-text);outline:2px solid var(--c-primary)}
.list-count{color:var(--c-sub);font-size:12px;padding:0 2px}
.list-menu-btn{background:transparent;border:0;border-radius:4px;width:28px;height:28px;color:var(--c-sub);flex:0 0 auto}
.list-menu-btn:hover{background:var(--c-hover)}

/* listas coloridas */
.list.colored .list-header{border-radius:12px 12px 0 0;margin-bottom:4px}
.list.colored .list-title.view{color:inherit}
.list.colored textarea.list-title{background:var(--c-surface);color:var(--c-text)}
.list.colored .list-count{color:inherit;opacity:.85}
.list.colored .list-menu-btn{color:inherit}
.list.colored .list-menu-btn:hover{background:rgba(255,255,255,.22)}

.cards{
  padding:0 8px;overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:8px;
  display:flex;flex-direction:column;gap:8px;
}
.list-footer{padding:8px}
.add-card-btn{
  width:100%;text-align:left;background:transparent;border:0;border-radius:6px;padding:8px;color:var(--c-sub);
}
.add-card-btn:hover{background:var(--c-hover);color:var(--c-text)}

/* ---------- Cartão ---------- */
.card{
  background:var(--c-surface);border-radius:8px;box-shadow:var(--shadow-1);padding:0;cursor:pointer;
  overflow:hidden;position:relative;border:1px solid transparent;
}
.card:hover{background:#282e33;border-color:var(--c-line)}
.card.full:hover{filter:brightness(1.08)}
.card.dragging{opacity:.35}
.card-cover{height:32px}
.card-body{padding:8px}
.card-labels{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.lbl{height:8px;min-width:40px;border-radius:4px;font-size:0;overflow:hidden}
.lbl.expanded{height:16px;font-size:12px;padding:0 8px;display:inline-flex;align-items:center;font-weight:600;line-height:16px}
.card-title{word-wrap:break-word;white-space:pre-wrap}
.card-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;color:var(--c-sub);font-size:12px}
.card.full .card-badges{color:inherit;opacity:.85}
.badge{display:inline-flex;align-items:center;gap:3px}
.badge.due{padding:2px 6px;border-radius:4px}
.badge.due.soon{background:#f5cd47;color:#1d2125}
.badge.due.late{background:#f87168;color:#1d2125}
.badge.due.done{background:#4bce97;color:#164b35}
.badge.check.full{color:var(--c-green);font-weight:600}
.card-avatars{margin-left:auto;display:flex;gap:2px}
.card-avatars .avatar{width:24px;height:24px;font-size:10px}
.card-edit-btn{
  position:absolute;top:4px;right:4px;background:rgba(34,39,43,.92);border:1px solid var(--c-line);border-radius:4px;
  width:24px;height:24px;opacity:0;color:var(--c-text);
}
.card:hover .card-edit-btn{opacity:1}

.drop-placeholder{background:rgba(166,197,226,.14);border-radius:8px;height:38px;flex:0 0 auto}
.list-placeholder{width:280px;flex:0 0 280px;background:rgba(166,197,226,.14);border-radius:12px;height:80px}

/* composer */
.composer{background:var(--c-surface);border-radius:8px;box-shadow:var(--shadow-1);padding:8px}
.composer textarea{
  width:100%;border:0;resize:none;outline:none;min-height:56px;font-size:14px;line-height:20px;
  background:transparent;color:var(--c-text);
}
.composer-actions{display:flex;align-items:center;gap:8px;margin-top:6px}
.btn{
  background:var(--c-primary);color:var(--c-on-primary);border:0;border-radius:4px;height:32px;padding:0 12px;font-weight:600;
}
.btn:hover{background:var(--c-primary-dark)}
.btn.mini{height:28px;padding:0 10px;font-size:12px;flex:0 0 auto}
.btn.ghost{background:transparent;color:var(--c-sub);font-weight:400}
.btn.ghost:hover{background:var(--c-hover);color:var(--c-text)}
.btn.danger{background:var(--c-danger);color:#1d2125}
.btn.danger:hover{background:#ff9c8f}
.btn.subtle{background:var(--c-hover);color:var(--c-text);font-weight:400}
.btn.subtle:hover{background:var(--c-hover-strong)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.add-list{
  width:280px;flex:0 0 280px;background:rgba(255,255,255,.14);border-radius:12px;padding:8px;color:#fff;
}
.add-list button.trigger{width:100%;text-align:left;background:transparent;border:0;color:#fff;padding:6px;font-weight:600}
.add-list button.trigger:hover{background:rgba(255,255,255,.14);border-radius:6px}
.add-list input{width:100%;height:32px;border-radius:4px;border:0;padding:0 8px;background:var(--c-surface);outline:2px solid var(--c-primary)}
.add-list .row{display:flex;gap:8px;align-items:center;margin-top:8px}

/* ---------- Popover ---------- */
.pop-backdrop{position:fixed;inset:0;z-index:60}
.popover{
  position:fixed;z-index:61;background:var(--c-raised);border-radius:8px;box-shadow:var(--shadow-2);width:304px;
  max-height:80vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--c-line);
}
.pop-head{display:flex;align-items:center;justify-content:center;position:relative;padding:10px;border-bottom:1px solid var(--c-line)}
.pop-head h3{margin:0;font-size:14px;font-weight:600;color:var(--c-sub)}
.pop-close{position:absolute;right:6px;top:6px;background:transparent;border:0;width:28px;height:28px;border-radius:4px;color:var(--c-sub)}
.pop-close:hover{background:var(--c-hover)}
.pop-body{padding:12px;overflow:auto}
.pop-body label{display:block;font-size:12px;font-weight:700;color:var(--c-sub);margin:8px 0 4px}
.pop-body input[type=text],.pop-body input[type=date],.pop-body input[type=time],.pop-body input[type=url],.pop-body textarea,.pop-body select{
  width:100%;border:1px solid var(--c-line);border-radius:4px;padding:6px 8px;outline:none;background:var(--c-surface);
}
.pop-body input:focus,.pop-body textarea:focus,.pop-body select:focus{border-color:var(--c-primary);box-shadow:0 0 0 1px var(--c-primary)}
.pop-list{list-style:none;margin:0;padding:0}
.pop-list button{
  width:100%;text-align:left;background:transparent;border:0;padding:8px;border-radius:4px;display:flex;
  align-items:center;gap:8px;color:var(--c-text);
}
.pop-list button:hover{background:var(--c-hover)}
.pop-list .sep{height:1px;background:var(--c-line);margin:6px 0}
.pop-list button.danger{color:var(--c-danger)}

.label-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.label-swatch{flex:1;height:32px;border-radius:4px;border:0;font-weight:600;text-align:left;padding:0 10px;display:flex;align-items:center;justify-content:space-between}
.label-edit{background:transparent;border:0;width:32px;height:32px;border-radius:4px;color:var(--c-sub)}
.label-edit:hover{background:var(--c-hover)}
.swatch-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.swatch-grid button{height:32px;border-radius:4px;border:2px solid transparent}
.swatch-grid button.sel{border-color:#fff;box-shadow:0 0 0 2px var(--c-primary)}

.member-row{display:flex;align-items:center;gap:8px;padding:6px;border-radius:4px;width:100%;background:transparent;border:0;text-align:left;color:var(--c-text)}
.member-row:hover{background:var(--c-hover)}
.member-row .check{margin-left:auto;color:var(--c-green);font-weight:700}

.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bg-grid button{height:56px;border-radius:6px;border:2px solid transparent;background-size:cover;background-position:center}
.bg-grid button.sel{border-color:var(--c-primary)}

/* ---------- Modal do cartão (layout do Trello novo) ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:50;overflow-y:auto;padding:40px 8px}
.modal{
  width:min(1040px,100%);margin:0 auto;background:var(--c-raised);border-radius:12px;box-shadow:var(--shadow-2);
  position:relative;overflow:hidden;border:1px solid var(--c-line);
}
.modal-cover{height:116px}

.modal-top{display:flex;align-items:center;gap:8px;padding:12px 14px}
.list-chip{
  background:transparent;border:1px solid var(--c-line);color:var(--c-text);border-radius:6px;
  height:32px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;font-weight:600;
}
.list-chip:hover{background:var(--c-hover)}
.list-chip .caret{color:var(--c-sub);font-size:12px}
.modal-top-acts{margin-left:auto;display:flex;gap:4px}
.modal-top-acts button{
  background:transparent;border:0;color:var(--c-sub);width:32px;height:32px;border-radius:6px;font-size:15px;
}
.modal-top-acts button:hover{background:var(--c-hover);color:var(--c-text)}

.modal-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0}
.modal-main{padding:4px 20px 28px;min-width:0}
.modal-side{padding:4px 20px 28px;min-width:0;border-left:1px solid var(--c-line)}

.title-row{display:flex;align-items:flex-start;gap:10px}
.done-circle{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--c-sub);background:transparent;
  flex:0 0 auto;margin-top:6px;position:relative;
}
.done-circle:hover{border-color:var(--c-text)}
.done-circle.on{background:#4bce97;border-color:#4bce97}
.done-circle.on::after{
  content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#164b35;font-size:13px;font-weight:900;
}
.modal-title{
  font-size:22px;font-weight:700;width:100%;border:0;background:transparent;border-radius:6px;padding:3px 6px;
  resize:none;overflow:hidden;line-height:30px;color:var(--c-text);
}
.modal-title:focus{background:var(--c-surface);outline:2px solid var(--c-primary)}

.act-row{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px 32px}
.act-btn{
  background:var(--c-hover);border:0;border-radius:8px;color:var(--c-text);
  height:32px;padding:0 10px;display:inline-flex;align-items:center;gap:5px;font-weight:500;
  white-space:nowrap;
}
.act-btn:hover{background:var(--c-hover-strong)}
.act-btn.pequeno{height:28px;padding:0 10px;font-size:13px}

.bloco{margin:20px 0 0 32px}
.bloco-tit{font-size:12px;font-weight:700;color:var(--c-sub);margin-bottom:6px}
.sec-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sec-head h4{margin:0;font-size:15px;font-weight:700}
.sec-head .ico{color:var(--c-sub)}
.sec-head .spacer{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{
  background:var(--c-hover);border:0;border-radius:6px;height:32px;padding:0 10px;display:inline-flex;
  align-items:center;gap:6px;color:var(--c-text);
}
.chip:hover{background:var(--c-hover-strong)}
.chip.lblchip{font-weight:600}
.chip.duechip.late{background:#f87168;color:#1d2125}
.chip.duechip.soon{background:#f5cd47;color:#1d2125}
.chip.duechip.done{background:#4bce97;color:#164b35}
.mini-title{font-size:12px;font-weight:700;color:var(--c-sub);margin-bottom:4px}

.desc-view{background:transparent;border-radius:6px;padding:8px;min-height:48px;white-space:pre-wrap;word-wrap:break-word;cursor:pointer;font-size:14px}
.desc-view:hover{background:var(--c-hover)}
.desc-view.empty{color:var(--c-sub)}
.desc-view a{color:var(--c-primary)}
textarea.editor{
  width:100%;min-height:110px;border-radius:6px;border:0;box-shadow:var(--shadow-1);padding:10px;resize:vertical;
  outline:2px solid var(--c-primary);font-size:14px;line-height:20px;background:var(--c-surface);color:var(--c-text);
}
.row-actions{display:flex;gap:8px;align-items:center;margin-top:8px}

/* coluna da direita */
.side-head{display:flex;align-items:center;gap:8px;margin:14px 0 12px}
.side-head h4{margin:0;font-size:15px;font-weight:700;flex:1}
.side-head .ico{color:var(--c-sub)}
.comment-box{display:flex;gap:8px;align-items:flex-start;margin-bottom:18px}
.comment-box .grow{flex:1;min-width:0}
.comment-input{
  width:100%;min-height:40px;border:1px solid var(--c-line);border-radius:8px;padding:10px 12px;
  background:var(--c-surface);color:var(--c-text);resize:none;outline:none;font-size:14px;line-height:20px;
}
.comment-input:focus{border-color:var(--c-primary);box-shadow:0 0 0 1px var(--c-primary)}
.feed{display:flex;flex-direction:column}

.checklist{margin-bottom:18px}
.progress{display:flex;align-items:center;gap:8px;margin:6px 0}
.progress .pct{font-size:11px;color:var(--c-sub);width:34px;text-align:right}
.bar{flex:1;height:8px;background:var(--c-hover-strong);border-radius:4px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--c-primary);transition:width .15s;border-radius:4px}
.bar>i.full{background:#4bce97}
.check-item{display:flex;align-items:flex-start;gap:8px;padding:4px 6px;border-radius:4px}
.check-item:hover{background:var(--c-hover)}
.check-item input{margin-top:3px;width:16px;height:16px}
.check-item .txt{flex:1;word-wrap:break-word;cursor:pointer}
.check-item.done .txt{text-decoration:line-through;color:var(--c-sub)}
.check-item .del{background:transparent;border:0;color:var(--c-sub);opacity:0;border-radius:4px;width:24px}
.check-item:hover .del{opacity:1}

.attach{display:flex;gap:10px;align-items:center;padding:6px;border-radius:6px}
.attach:hover{background:var(--c-hover)}
.attach .thumb{width:64px;height:44px;border-radius:4px;background:var(--c-surface);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.attach .meta{min-width:0;flex:1}
.attach .meta a{display:block;font-weight:600;color:var(--c-text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach .meta a:hover{text-decoration:underline;color:var(--c-primary)}
.attach .meta small{color:var(--c-sub)}

.comment-box{display:flex;gap:8px;align-items:flex-start}
.comment-box .grow{flex:1}
.activity-item{display:flex;gap:8px;align-items:flex-start;margin-bottom:12px}
.activity-item .body{flex:1;min-width:0}
.activity-item .bubble{background:transparent;box-shadow:none;padding:2px 0;white-space:pre-wrap;word-wrap:break-word}
.activity-item small{color:var(--c-sub);font-size:12px}
.activity-item .acts{display:flex;gap:8px;margin-top:2px}
.activity-item .acts button{background:transparent;border:0;color:var(--c-sub);text-decoration:underline;padding:0;font-size:12px}

.side-btn{
  width:100%;text-align:left;background:var(--c-hover);border:0;border-radius:4px;height:32px;padding:0 10px;
  display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--c-text);
}
.side-btn:hover{background:var(--c-hover-strong)}
.side-btn.danger{color:var(--c-danger)}

/* ---------- Drawer (menu do quadro / filtro) ---------- */
.drawer-backdrop{position:fixed;inset:0;z-index:40}
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:340px;max-width:92vw;background:var(--c-raised);z-index:41;
  box-shadow:var(--shadow-2);display:flex;flex-direction:column;animation:slidein .16s ease-out;
  border-left:1px solid var(--c-line);
}
@keyframes slidein{from{transform:translateX(20px);opacity:.4}to{transform:none;opacity:1}}
.drawer-head{display:flex;align-items:center;padding:12px;border-bottom:1px solid var(--c-line);gap:8px}
.drawer-head h3{margin:0;font-size:15px;flex:1;text-align:center}
.drawer-body{padding:12px;overflow:auto;flex:1}
.drawer-body h5{margin:16px 0 6px;font-size:12px;color:var(--c-sub);text-transform:uppercase;letter-spacing:.4px}
.drawer-body input[type=text]{
  width:100%;border:1px solid var(--c-line);border-radius:4px;padding:6px 8px;background:var(--c-surface);outline:none;
}
.drawer-body input[type=text]:focus{border-color:var(--c-primary)}
.filter-opt{display:flex;align-items:center;gap:8px;padding:6px;border-radius:4px;cursor:pointer}
.filter-opt:hover{background:var(--c-hover)}
.archived-item{background:var(--c-surface);border:1px solid var(--c-line);border-radius:8px;padding:8px;margin-bottom:8px}
.archived-item .acts{display:flex;gap:8px;margin-top:6px}
.archived-item .acts button{background:transparent;border:0;color:var(--c-primary);padding:0;text-decoration:underline;font-size:12px}
.archived-item .acts button.danger{color:var(--c-danger)}

/* ---------- Papéis: escolha no convite e lista da equipe ---------- */
.role-pick{display:flex;flex-direction:column;gap:8px}
.role-pick button{
  text-align:left;background:var(--c-surface);border:1px solid var(--c-line);border-radius:8px;
  padding:10px 12px;color:var(--c-text);display:block;
}
.role-pick button:hover{background:var(--c-hover)}
.role-pick button.sel{border-color:var(--c-primary);box-shadow:0 0 0 1px var(--c-primary)}
.role-pick strong{display:block;margin-bottom:2px}
.role-pick small{color:var(--c-sub);font-size:12px;line-height:1.35;display:block}

.team-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:4px}
.team-row:hover{background:var(--c-hover)}
.team-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.team-info strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-info small{font-size:11px}
.role-chip{
  border:1px solid var(--c-line);background:var(--c-hover);color:var(--c-text);
  border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700;white-space:nowrap;
}
.role-chip.lider{background:rgba(87,157,255,.18);border-color:#579dff;color:#9dc3ff}
.role-chip:disabled{cursor:default;opacity:.75}
.team-del{background:transparent;border:0;color:var(--c-sub);width:24px;height:24px;border-radius:4px}
.team-del:hover{background:var(--c-hover-strong);color:var(--c-danger)}

/* ---------- Página de entrada (convite) ---------- */
.onboarding{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(87,157,255,.18),transparent),var(--c-topbar);
  overflow:auto;
}
.onb-card{
  width:min(420px,100%);background:var(--c-raised);border:1px solid var(--c-line);border-radius:14px;
  padding:28px 26px 26px;box-shadow:var(--shadow-2);
}
.onb-logo{font-size:34px;line-height:1;margin-bottom:10px}
.onb-card h1{margin:0 0 6px;font-size:22px;line-height:1.25}
.onb-card p{margin:0 0 18px;font-size:13px}
.onb-card label{display:block;font-size:12px;font-weight:700;color:var(--c-sub);margin:14px 0 6px}
.onb-card input{
  width:100%;height:40px;border:1px solid var(--c-line);border-radius:6px;padding:0 12px;
  background:var(--c-surface);outline:none;font-size:15px;
}
.onb-card input:focus{border-color:var(--c-primary);box-shadow:0 0 0 1px var(--c-primary)}
.onb-card .btn{height:40px;font-size:15px}
/* Funções: lista fechada, em botões — não há campo para digitar */
.onb-funcoes{display:flex;gap:8px;flex-wrap:wrap}
.onb-funcao{
  flex:1 1 auto;min-width:92px;height:38px;padding:0 12px;border-radius:8px;
  border:1px solid var(--c-line);background:transparent;color:var(--c-text);
  font-size:13px;font-weight:600;transition:border-color .15s,background .15s;
}
.onb-funcao:hover{border-color:var(--c-primary)}
.onb-funcao.on{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.onb-erro{color:var(--c-danger);font-size:12px;min-height:16px;margin:10px 0 0 !important}

/* ---------- Toast ---------- */
#toast-root{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--c-raised);border:1px solid var(--c-line);color:var(--c-text);border-radius:8px;padding:10px 14px;box-shadow:var(--shadow-2);display:flex;gap:12px;align-items:center;animation:pop .15s}
.toast button{background:transparent;border:0;color:var(--c-primary);text-decoration:underline;padding:0}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

.hidden{display:none !important}
.muted{color:var(--c-sub)}
kbd{background:var(--c-hover-strong);border-radius:3px;padding:1px 5px;font-family:ui-monospace,Menlo,monospace;font-size:12px}

@media (max-width:720px){
  .modal-inner{grid-template-columns:1fr}
  .modal-main,.modal-side{grid-column:1}
  .board-title-wrap{max-width:60vw}
}