/* Identidade visual v0 — base enxuta, pensada para evoluir com o uso.
   Todas as cores vêm de tokens; trocar a paleta = editar :root. */
:root {
  --marca: #2f5d50;
  --marca-forte: #234a3f;
  --marca-suave: #e5efeb;
  --destaque: #e0a43a;
  --fundo: #f6f7f5;
  --painel: #ffffff;
  --painel-2: #f1f3f0;
  --borda: #e1e4df;
  --texto: #1d2321;
  --texto-2: #5d6662;
  --texto-3: #8c948f;
  --perigo: #c8363d;
  --ok: #1f8a4c;
  --alerta: #c98a06;
  --sombra: 0 1px 2px rgb(0 0 0 / .06), 0 4px 16px rgb(0 0 0 / .06);
  --raio: 8px;
  --lateral: 264px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --marca: #5fa892; --marca-forte: #7cc0ab; --marca-suave: #1f3530; --fundo: #151917; --painel: #1c2120; --painel-2: #232927; --borda: #2e3532; --texto: #e8ece9; --texto-2: #a7b0ac; --texto-3: #74807a; --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .35); color-scheme: dark; }
}
:root[data-tema="escuro"] { --marca: #5fa892; --marca-forte: #7cc0ab; --marca-suave: #1f3530; --fundo: #151917; --painel: #1c2120; --painel-2: #232927; --borda: #2e3532; --texto: #e8ece9; --texto-2: #a7b0ac; --texto-3: #74807a; --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .35); color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--fundo); color: var(--texto); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }

.carregando { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--texto-2); }
.carregando img { animation: pulsar 1.2s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .45; transform: scale(.94); } }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: var(--lateral) 1fr; height: 100vh; }
.lateral { background: var(--painel); border-right: 1px solid var(--borda); display: flex; flex-direction: column; min-height: 0; }
.marca { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; font-size: 15px; }
.marca img { width: 26px; height: 26px; }
.busca-btn { margin: 0 12px 8px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel-2); color: var(--texto-3); cursor: pointer; text-align: left; }
.busca-btn kbd { margin-left: auto; }
kbd { font: 11px ui-monospace, monospace; padding: 1px 5px; border: 1px solid var(--borda); border-radius: 4px; background: var(--painel); color: var(--texto-2); }
.nav { overflow: auto; flex: 1; padding: 4px 8px 12px; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; color: var(--texto); cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: var(--painel-2); text-decoration: none; }
.nav-item.ativo { background: var(--marca-suave); color: var(--marca-forte); font-weight: 600; }
.nav-item .contagem { margin-left: auto; font-size: 12px; color: var(--texto-3); }
.nav-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); padding: 14px 10px 4px; display: flex; justify-content: space-between; }
.area-cab { font-weight: 600; }
.area-cab .bola, .bola { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pasta { padding-left: 12px; }
.pasta > .nav-item { color: var(--texto-2); }
.listas { padding-left: 14px; }
.seta { width: 12px; flex: none; transition: transform .15s; color: var(--texto-3); }
.fechado > .nav-item .seta { transform: rotate(-90deg); }
.fechado > .filhos { display: none; }
.rodape-lateral { border-top: 1px solid var(--borda); padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.rodape-lateral .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.principal { overflow: auto; min-width: 0; display: flex; flex-direction: column; }

/* ---------- cabeçalho de página ---------- */
.cabecalho { padding: 18px 24px 0; background: var(--painel); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; }
.trilha { font-size: 12px; color: var(--texto-3); }
.titulo-pagina { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.titulo-pagina h1 { font-size: 20px; margin: 0; }
.abas { display: flex; gap: 2px; }
.aba { padding: 8px 12px; border: 0; background: none; border-bottom: 2px solid transparent; cursor: pointer; color: var(--texto-2); }
.aba.ativa { color: var(--marca-forte); border-color: var(--marca); font-weight: 600; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 24px; align-items: center; border-bottom: 1px solid var(--borda); background: var(--painel); }
.conteudo { padding: 16px 24px 48px; }

/* ---------- controles ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--painel); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--painel-2); }
.btn.primario { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }
.btn.primario:hover { background: var(--marca-forte); }
.btn.perigo { color: var(--perigo); }
.btn.mini { padding: 3px 8px; font-size: 12px; }
.btn.fantasma { border-color: transparent; background: none; }
.btn:disabled { opacity: .5; cursor: default; }
.campo, select.campo, textarea.campo { padding: 7px 10px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel); min-width: 0; }
.campo:focus { outline: 2px solid color-mix(in srgb, var(--marca) 40%, transparent); border-color: var(--marca); }
textarea.campo { width: 100%; resize: vertical; min-height: 72px; }
label.rotulo { display: grid; gap: 4px; font-size: 12px; color: var(--texto-2); }
.grade-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 20px; }
.chip.solido { color: #fff; }
.chip.contorno { border: 1px solid currentColor; background: transparent; }
.chip .x { cursor: pointer; opacity: .7; margin-left: 2px; }
.status-chip { text-transform: uppercase; letter-spacing: .02em; font-size: 11px; }
.pg-isento { background: #2b2f2d; color: #fff; }
.pg-pendente { background: #e9488b; color: #fff; }
.pg-parcial { background: #e6c229; color: #2b2400; }
.pg-pago { background: #3cc7a0; color: #06372a; }
.pg-atrasado { background: var(--perigo); color: #fff; }
.tag { background: var(--marca-suave); color: var(--marca-forte); border-radius: 999px; font-weight: 500; }
.avatar { width: 26px; height: 26px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.avatar.vazio { background: var(--painel-2); color: var(--texto-3); border: 1px dashed var(--borda); }
.avatar.com-foto { background: var(--painel-2); overflow: hidden; }
.avatar.com-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.avatar-g { width: 72px; height: 72px; font-size: 24px; }
.perfil-edit { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.perfil-acoes { display: grid; gap: 6px; justify-items: start; }
.rotulo-inline { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--texto-2); }
.menu-cab[data-op] { cursor: pointer; border-radius: 8px; }
.menu-cab[data-op]:hover { background: var(--painel-2); }

/* ---------- visão em lista agrupada por status ---------- */
.grupo { margin-bottom: 22px; }
.grupo-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; cursor: pointer; user-select: none; }
.grupo-cab .n { color: var(--texto-3); font-size: 12px; }
.grupo.fechado .tabela-wrap, .grupo.fechado .add-linha { display: none; }
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 12px; font-weight: 500; color: var(--texto-3); padding: 6px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 7px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; vertical-align: middle; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover { background: var(--painel-2); }
.tabela td.nome { font-weight: 600; white-space: normal; min-width: 220px; }
.tabela .sub { font-size: 12px; color: var(--texto-3); font-weight: 400; }
.add-linha { color: var(--texto-3); padding: 6px 8px; cursor: pointer; display: inline-block; }
.add-linha:hover { color: var(--marca); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela th.num { text-align: right; } /* o cabeçalho acompanha o valor alinhado à direita */
.tabela td.valor-rec { font-variant-numeric: tabular-nums; } /* recebimentos da tarefa: valor à esquerda, logo abaixo de "Valor" */
.docs { font-size: 12px; color: var(--texto-2); }
.docs.completo { color: var(--ok); font-weight: 600; }
.vazio-msg { color: var(--texto-3); padding: 32px; text-align: center; }

/* ---------- quadro (kanban) ---------- */
.quadro { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 12px; min-height: 60vh; }
.coluna { width: 272px; flex: none; background: var(--painel-2); border-radius: 10px; padding: 8px; }
.coluna.alvo { outline: 2px dashed var(--marca); }
.coluna-cab { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; }
.cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px; margin-bottom: 8px; cursor: grab; box-shadow: 0 1px 1px rgb(0 0 0 / .03); display: grid; gap: 6px; }
.cartao:hover { border-color: var(--marca); }
.cartao.arrastando { opacity: .4; }
.cartao .t { font-weight: 600; }
.cartao .linha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--texto-2); }

/* ---------- gaveta de detalhe ---------- */
.veu { position: fixed; inset: 0; background: rgb(0 0 0 / .25); z-index: 20; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100vw); background: var(--painel); z-index: 21; box-shadow: var(--sombra); display: flex; flex-direction: column; animation: entrar .16s ease-out; }
@keyframes entrar { from { transform: translateX(24px); opacity: 0; } }
.gaveta-cab { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--borda); font-size: 12px; color: var(--texto-3); }
.gaveta-cab .acoes { margin-left: auto; display: flex; gap: 6px; }
.gaveta-corpo { overflow: auto; padding: 16px 20px 40px; flex: 1; }
.titulo-edit { font-size: 22px; font-weight: 700; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; margin: 0 -6px 12px; width: calc(100% + 12px); background: none; }
.titulo-edit:hover, .titulo-edit:focus { border-color: var(--borda); outline: none; }
.props { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; align-items: center; margin-bottom: 18px; }
.props > dt { color: var(--texto-2); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.props > dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 32px; }
.props .campo { width: 100%; max-width: 340px; }
.secao { border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 14px; }
.secao h3 { font-size: 14px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.progresso { height: 6px; background: var(--painel-2); border-radius: 3px; overflow: hidden; flex: 1; max-width: 200px; }
.progresso > i { display: block; height: 100%; background: var(--ok); }
.doc-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.doc-item.ok span { text-decoration: line-through; color: var(--texto-3); }
.doc-item .btn { margin-left: auto; visibility: hidden; }
.doc-item:hover .btn { visibility: visible; }
.comentario { display: grid; grid-template-columns: 26px 1fr; gap: 10px; margin-bottom: 12px; }
.comentario .meta { font-size: 12px; color: var(--texto-3); }
.comentario .txt { white-space: pre-wrap; }
.historico { font-size: 12px; color: var(--texto-2); display: grid; gap: 4px; }
.historico b { color: var(--texto); font-weight: 600; }
/* Histórico recolhido (tarefa e subtarefa) e janela "Ver todo o histórico de atividade" */
.hist-resumo, .hist-vazio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel-2); color: var(--texto-2); font-size: 13px; }
.hist-resumo svg, .hist-vazio svg { color: var(--texto-3); flex: none; }
.hist-resumo .hist-txt { flex: 1; min-width: 140px; color: var(--texto); font-weight: 600; }
.hist-vazio { border-style: dashed; background: none; color: var(--texto-3); }
.hist-resumo + .historico { margin-top: 10px; }
.hist-titulo { margin: -8px 0 12px; }
.hist-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.hist-filtros .rotulo { margin: 0; flex: 1; min-width: 140px; }
.hist-conta { margin-bottom: 8px; }
.hist-rolagem { max-height: 52vh; overflow: auto; border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; }
.soltar { border: 2px dashed var(--borda); border-radius: var(--raio); padding: 14px; text-align: center; color: var(--texto-3); cursor: pointer; }
.soltar.alvo { border-color: var(--marca); color: var(--marca); }
.aviso-remoto { background: color-mix(in srgb, var(--destaque) 18%, var(--painel)); border: 1px solid var(--destaque); border-radius: var(--raio); padding: 8px 12px; margin-bottom: 12px; display: flex; gap: 8px; align-items: center; }

/* ---------- modal e paleta ---------- */
.modal { position: fixed; z-index: 30; top: 8vh; left: 50%; transform: translateX(-50%); width: min(620px, 94vw); max-height: 84vh; overflow: auto; background: var(--painel); border-radius: 12px; box-shadow: var(--sombra); padding: 20px; }
.modal h2 { margin: 0 0 14px; font-size: 18px; }
.modal .rodape { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.sugestoes { border: 1px solid var(--borda); border-radius: var(--raio); margin-top: 4px; max-height: 180px; overflow: auto; }
.sugestoes div { padding: 6px 10px; cursor: pointer; }
.sugestoes div:hover, .sugestoes div.sel { background: var(--marca-suave); }
.paleta { padding: 0; }
.paleta input { width: 100%; border: 0; border-bottom: 1px solid var(--borda); padding: 16px 18px; font-size: 16px; background: none; outline: none; }
.paleta .resultados { max-height: 50vh; overflow: auto; padding: 6px; }
.paleta .res { padding: 8px 12px; border-radius: 6px; display: flex; gap: 10px; align-items: center; cursor: pointer; }
.paleta .res.sel { background: var(--marca-suave); }
.paleta .grupo-res { font-size: 11px; text-transform: uppercase; color: var(--texto-3); padding: 8px 12px 2px; }

/* ---------- painel ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; }
.kpi .r { font-size: 12px; color: var(--texto-2); }
.kpi .v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi .v.perigo { color: var(--perigo); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.bloco { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; }
.bloco h2 { font-size: 14px; margin: 0 0 10px; }
.barra-status { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 6px 0 10px; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--texto-2); }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.lista-simples { display: grid; gap: 2px; }
.lista-simples > div { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.lista-simples > div:hover { background: var(--painel-2); }
.lista-simples .dir { margin-left: auto; font-size: 12px; color: var(--texto-3); white-space: nowrap; }

/* ---------- configurações ---------- */
.config { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
.cartao-config { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.cartao-config h2 { font-size: 15px; margin: 0 0 12px; }
.linha-edit { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.linha-edit input[type=color] { width: 34px; height: 30px; padding: 2px; border: 1px solid var(--borda); border-radius: 6px; background: var(--painel); }
.ajuda { font-size: 12px; color: var(--texto-2); background: var(--painel-2); border-radius: var(--raio); padding: 10px 12px; }
code { font: 12px ui-monospace, monospace; background: var(--painel-2); padding: 1px 5px; border-radius: 4px; }

/* ---------- login ---------- */
.tela-entrada { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.caixa-entrada { width: min(380px, 100%); background: var(--painel); border: 1px solid var(--borda); border-radius: 14px; padding: 28px; box-shadow: var(--sombra); display: grid; gap: 14px; }
.caixa-entrada h1 { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 10px; }
.erro { color: var(--perigo); font-size: 13px; min-height: 18px; }

/* ---------- avisos ---------- */
.toasts { position: fixed; bottom: 16px; right: 16px; display: grid; gap: 8px; z-index: 50; }
.toast { background: var(--texto); color: var(--fundo); padding: 10px 14px; border-radius: var(--raio); box-shadow: var(--sombra); max-width: 380px; animation: entrar .16s ease-out; }
.toast.erro { background: var(--perigo); color: #fff; }
.faixa-conexao { position: fixed; top: 0; left: 0; right: 0; background: var(--alerta); color: #fff; text-align: center; padding: 6px; z-index: 60; font-weight: 600; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .config { grid-template-columns: 1fr; }
  .props { grid-template-columns: 1fr; }
}

/* Impressão: com a gaveta aberta, imprime só a ficha do requerimento. */
@media print {
  body.gaveta-aberta .layout, body.gaveta-aberta .veu, .gaveta-cab, .toasts { display: none !important; }
  .gaveta { position: static; width: auto; box-shadow: none; }
  .gaveta-corpo { overflow: visible; }
  .btn, .doc-item .btn, .soltar, textarea.campo, .topo, .mini-ic { display: none !important; }
}

/* ===================== v0.2 ===================== */
/* menus suspensos (espaço, criar, usuário, itens da barra lateral) */
.menu { position: fixed; z-index: 40; min-width: 240px; max-height: 80vh; overflow: auto; background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra); padding: 6px; animation: entrar .12s ease-out; }
.menu .sep { height: 1px; background: var(--borda); margin: 6px 4px; }
.menu .tit { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); padding: 8px 10px 4px; }
.menu .op { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--texto); }
.menu .op:hover { background: var(--painel-2); text-decoration: none; }
.menu .op .ic { width: 18px; text-align: center; color: var(--texto-2); flex: none; }
.menu .op .desc { display: block; font-size: 12px; color: var(--texto-3); }
.menu .op.perigo { color: var(--perigo); }
.menu .op.desligado { opacity: .55; cursor: default; }
.menu .op.marcado::after { content: '✓'; margin-left: auto; color: var(--marca); }
.selo { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--marca-suave); color: var(--marca-forte); margin-left: auto; }
.menu-cab { display: flex; align-items: center; gap: 12px; padding: 10px; }
.menu-cab b { font-size: 15px; }
.menu-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 6px 6px; }
.logo { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; flex: none; background: var(--marca); color: #fff; display: inline-grid; place-items: center; font-weight: 800; font-size: 13px; }
.logo.g { width: 44px; height: 44px; border-radius: 10px; font-size: 18px; }

/* cabeçalho da barra lateral: espaço de trabalho + criar */
.marca { padding: 10px 10px 10px 8px; gap: 6px; }
.espaco-btn { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; border: 0; background: none; padding: 4px 6px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 15px; text-align: left; }
.espaco-btn:hover, .criar-btn:hover { background: var(--painel-2); }
.espaco-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.criar-btn { border: 1px solid var(--borda); background: var(--painel); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; flex: none; }
.nav-item .acoes-no { margin-left: auto; display: none; gap: 2px; }
.nav-item:hover .acoes-no { display: inline-flex; }
.nav-item:hover .contagem { display: none; }
.mini-ic { border: 0; background: none; width: 22px; height: 22px; border-radius: 5px; cursor: pointer; color: var(--texto-2); line-height: 1; flex: none; }
.mini-ic:hover { background: var(--borda); color: var(--texto); }

/* canto superior direito: lembretes + usuário */
.topo { position: fixed; top: 10px; right: 16px; z-index: 15; display: flex; gap: 8px; align-items: center; }
.topo .sino { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borda); background: var(--painel); cursor: pointer; font-size: 15px; }
.topo .sino b { position: absolute; top: -4px; right: -4px; background: var(--perigo); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; }
.topo .eu { border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.topo .eu .avatar { width: 34px; height: 34px; font-size: 12px; }
.ponto-dnd { position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--painel); background: var(--ok); }
.ponto-dnd.dnd { background: var(--perigo); }
.cabecalho { padding-right: 120px; }

/* editor de status por tipo, com arrastar */
.status-grupo { margin-bottom: 14px; }
.status-grupo .gcab { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--texto-2); font-weight: 600; margin-bottom: 6px; }
.status-linha { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borda); border-radius: 8px; padding: 5px 8px; margin-bottom: 6px; background: var(--painel); }
.status-linha.arrastando { opacity: .4; }
.status-grupo.alvo .soltar-aqui { border-color: var(--marca); color: var(--marca); }
.alca { cursor: grab; color: var(--texto-3); user-select: none; }
.bolinha { width: 16px; height: 16px; border-radius: 50%; border: 0; cursor: pointer; flex: none; }
.status-linha input.campo { border-color: transparent; text-transform: uppercase; font-weight: 600; flex: 1; padding: 4px 6px; }
.status-linha input.campo:hover, .status-linha input.campo:focus { border-color: var(--borda); }
.soltar-aqui { border: 1px dashed var(--borda); border-radius: 8px; padding: 6px 10px; color: var(--texto-3); cursor: pointer; font-size: 13px; }
.paleta-cores { display: grid; grid-template-columns: repeat(6, 22px); gap: 8px; padding: 6px 4px; }
.paleta-cores button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.paleta-cores button.sel { border-color: var(--texto); }

/* tarefa aberta */
.cliente-box { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; display: grid; gap: 8px; }
.cliente-box .linha-cli { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cliente-box .grade-cli { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.dica { font-size: 11px; color: var(--texto-3); }
/* Seção Campos da tarefa: --rotulo-campo = largura da coluna do nome; --valor-campo = largura máxima do campo de valor */
.campo-linha { --rotulo-campo: 210px; --valor-campo: 360px; display: grid; grid-template-columns: var(--rotulo-campo) 1fr 28px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--borda); }
.campo-linha .nome { font-size: 13px; color: var(--texto-2); display: flex; gap: 6px; align-items: center; min-width: 0; }
.campo-linha .nome-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.campo-linha .nome-txt:has(input) { overflow: visible; flex: 1; }
.campo-linha .nome-txt input { width: 100%; }
.campo-linha .tipo-ic { width: 16px; color: var(--texto-3); text-align: center; font-size: 12px; }
.sub-linha { display: grid; grid-template-columns: 22px 1fr 150px 140px 28px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--borda); }
.sub-linha.ok .t { text-decoration: line-through; color: var(--texto-3); }
.sub-linha .t { border: 1px solid transparent; background: none; padding: 4px 6px; border-radius: 6px; }
.sub-linha .t:hover, .sub-linha .t:focus { border-color: var(--borda); }
.checklist { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.item-check { gap: 6px; padding: 2px 0; }
.item-check .t { flex: 1; border: 1px solid transparent; background: none; padding: 3px 6px; border-radius: 6px; min-width: 0; }
.item-check .t:hover, .item-check .t:focus { border-color: var(--borda); }
.item-check.ok .t { text-decoration: line-through; color: var(--texto-3); }
.item-check.arrastando { opacity: .4; }
.item-check .alca { visibility: hidden; }
.item-check:hover .alca { visibility: visible; }
.checklist-cab { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 4px; }
.checklist-cab .acoes { margin-left: auto; display: flex; gap: 4px; }
.protocolos-faixa { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; font-size: 12px; color: var(--texto-2); }
.protocolos-faixa a { background: var(--painel-2); border: 1px solid var(--borda); border-radius: 999px; padding: 2px 10px; }
.parado { font-size: 11px; color: var(--alerta); font-weight: 600; }
.sugestao { border: 1px solid var(--marca); background: var(--marca-suave); border-radius: 10px; padding: 10px 12px; margin-top: 12px; display: grid; gap: 4px; }

/* protocolos (markdown) */
.protocolo-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.md { line-height: 1.6; max-width: 820px; }
.md h1, .md h2, .md h3 { line-height: 1.25; margin: 1.2em 0 .5em; }
.md h1 { font-size: 22px; } .md h2 { font-size: 18px; } .md h3 { font-size: 15px; }
.md p { margin: .6em 0; }
.md ul, .md ol { padding-left: 22px; }
.md li.tarefa { list-style: none; margin-left: -20px; }
.md blockquote { border-left: 3px solid var(--marca); margin: .8em 0; padding: 4px 12px; color: var(--texto-2); background: var(--painel-2); border-radius: 0 6px 6px 0; }
.md hr { border: 0; border-top: 1px solid var(--borda); margin: 1.4em 0; }
textarea.editor-md { min-height: 60vh; font: 13px/1.55 ui-monospace, Consolas, monospace; }

/* lembretes */
.lembrete { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; padding: 8px 6px; border-bottom: 1px solid var(--borda); }
.lembrete.vencido .quando { color: var(--perigo); font-weight: 600; }
.lembrete.feito { opacity: .55; }
.lembrete .quando { font-size: 12px; color: var(--texto-3); }
.painel-lembretes { width: 380px; }

/* telas estreitas: a barra lateral vira gaveta aberta pelo botão ☰ */
.abre-lateral { display: none; }
@media (max-width: 860px) {
  .protocolo-grade, .campo-linha, .sub-linha { grid-template-columns: 1fr; }
  .abre-lateral { display: block; position: fixed; top: 10px; left: 10px; z-index: 16; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--borda); background: var(--painel); cursor: pointer; font-size: 16px; }
  .lateral { display: flex; position: fixed; top: 0; bottom: 0; left: 0; width: 280px; z-index: 26; transform: translateX(-105%); transition: transform .18s ease-out; box-shadow: var(--sombra); }
  body.lateral-aberta .lateral { transform: none; }
  body.lateral-aberta::after { content: ''; position: fixed; inset: 0; background: rgb(0 0 0 / .25); z-index: 25; }
  .cabecalho { padding-left: 56px; }
}

/* ===================== v0.3 ===================== */
/* caminho hierárquico: inteiro quando cabe; sem espaço, cada nível encolhe por igual (nenhum some) */
.caminho { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; vertical-align: middle; }
.caminho .seg { flex: 0 1 auto; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caminho .sep { flex: none; color: var(--texto-3); }
.titulo-pagina h1 { overflow-wrap: anywhere; }

/* abas da lista: visualizações à esquerda, personalizar e "+ Tarefa" à direita */
.abas { align-items: center; }
.abas-dir { margin-left: auto; display: flex; gap: 6px; align-items: center; padding-bottom: 4px; }
.filtros-ativos { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.filtro { background: var(--marca-suave); color: var(--marca-forte); font-weight: 500; }
.form-filtros { display: grid; gap: 8px; padding: 2px 10px 8px; }
.form-filtros .campo { width: 100%; }

/* itens de menu com controle (tamanho do cartão, alternar) */
.op-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 6px; }
.op-linha .desc { display: block; font-size: 12px; color: var(--texto-3); }
.segmentado { display: inline-flex; border: 1px solid var(--borda); border-radius: 7px; overflow: hidden; flex: none; }
.segmentado button { border: 0; background: var(--painel); padding: 4px 8px; cursor: pointer; font-size: 12px; }
.segmentado button + button { border-left: 1px solid var(--borda); }
.segmentado button.sel { background: var(--marca); color: #fff; font-weight: 600; }
input.alternar { appearance: none; width: 32px; height: 18px; border-radius: 9px; background: var(--borda); position: relative; cursor: pointer; flex: none; transition: background .15s; margin: 0; }
input.alternar::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
input.alternar:checked { background: var(--marca); }
input.alternar:checked::after { transform: translateX(14px); }
input.alternar:disabled { opacity: .5; cursor: default; }

/* painel lateral "Campos" */
.painel-lateral { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 100vw); z-index: 24; background: var(--painel); border-left: 1px solid var(--borda); box-shadow: var(--sombra); display: flex; flex-direction: column; animation: entrar .14s ease-out; }
.pl-cab { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; }
.pl-cab .sub { color: var(--texto-3); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-lateral > .campo { margin: 0 14px 6px; }
.abas-painel { padding: 0 10px; border-bottom: 1px solid var(--borda); }
.abas-painel .aba { font-size: 13px; padding: 7px 8px; }
.pl-corpo { overflow: auto; flex: 1; padding: 6px; }
.pl-corpo .tit { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); padding: 10px 10px 4px; }
.pl-corpo .op { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.pl-corpo .op:hover { background: var(--painel-2); }
.pl-corpo .op .ic, .pl-linha .ic { width: 18px; text-align: center; color: var(--texto-2); flex: none; }
.pl-corpo .op .desc, .pl-linha .desc { display: block; font-size: 12px; color: var(--texto-3); }
.pl-corpo .op .selo { visibility: hidden; }
.pl-corpo .op:hover .selo { visibility: visible; }
.pl-linha { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.pl-linha:hover { background: var(--painel-2); }
.pl-linha .nome { flex: 1; min-width: 0; }

/* quadro: "+" no cabeçalho da coluna, tamanhos de cartão, colunas recolhidas */
.coluna-cab .add-topo { margin-left: auto; font-size: 16px; }
.quadro.tam-pequeno .coluna { width: 240px; }
.quadro.tam-pequeno .cartao { padding: 7px 9px; gap: 2px; margin-bottom: 6px; }
.quadro.tam-grande .coluna { width: 310px; }
/* coluna recolhida: faixa estreita tingida com a cor do status (--cor-col), só o nome na vertical e a quantidade.
   Fica depois de .tam-* e com .quadro na frente para vencer a largura dos tamanhos de cartão. */
.quadro .coluna.recolhida { width: 30px; padding: 6px 0 8px; min-height: 0; cursor: pointer; display: flex; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--cor-col, var(--texto-3)) 14%, var(--painel)); }
.quadro .coluna.recolhida + .coluna.recolhida { margin-left: -4px; }
.quadro .coluna.recolhida:hover { background: color-mix(in srgb, var(--cor-col, var(--texto-3)) 28%, var(--painel)); }
.quadro .coluna.recolhida .vertical { writing-mode: vertical-rl; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.quadro .coluna.recolhida .status-chip { padding: 8px 2px; line-height: 16px; }
.quadro .coluna.recolhida .n { text-combine-upright: all; font-size: 12px; }
.cartao .t-linha { display: flex; align-items: center; gap: 8px; }
.cartao .t-linha .t { flex: 1; min-width: 0; }
.cartao .kv { display: flex; gap: 6px; font-size: 12px; color: var(--texto-2); align-items: center; }
.cartao .kv > span:first-child { color: var(--texto-3); }

/* ---------- cartão do quadro (v0.8): linhas com ícone, aviso do próximo passo e vencimento no rodapé ---------- */
.cartao.cv { padding: 12px; gap: 10px; border-radius: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 4px 14px rgb(0 0 0 / .04); }
.cartao.cv .sel-item { top: -6px; left: -6px; right: auto; }
.cv-cab { display: flex; align-items: flex-start; gap: 8px; }
.cv-cab .t { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.cv-linhas { display: grid; gap: 8px; }
.cv-ic { width: 20px; flex: none; display: grid; place-items: center; color: var(--texto-2); }
.cv-linha { display: flex; gap: 10px; align-items: center; min-width: 0; font-size: 12.5px; padding-top: 8px; border-top: 1px solid var(--borda); }
.cv-linhas > .cv-linha:first-child { border-top: 0; padding-top: 0; }
.cv-aviso + .cv-linha { border-top: 0; padding-top: 0; }
.cv-txt { display: grid; min-width: 0; flex: 1; }
.cv-rot { font-size: 11px; color: var(--texto-3); line-height: 1.3; }
.cv-val { font-weight: 600; color: var(--texto); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.cv-val .bola { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.cv-val .chip { font-weight: 600; }
.cv-bandeira { font-size: 20px; }
.cv-aviso { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.4;
  background: color-mix(in srgb, #5b6cf0 10%, var(--painel)); color: var(--texto); }
.cv-aviso .cv-ic { color: #5b6cf0; width: 18px; margin-top: 1px; }
.cv-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cv-venc { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borda); font-size: 12.5px; }
.cv-venc.alerta { background: color-mix(in srgb, var(--perigo) 9%, var(--painel)); border-color: color-mix(in srgb, var(--perigo) 30%, transparent); }
.cv-venc.alerta .cv-ic, .cv-venc.alerta .cv-rot, .cv-venc.alerta .cv-val { color: var(--perigo); }
.cv-venc .cv-rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-alerta { margin-left: auto; padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--perigo) 35%, transparent); display: flex; gap: 6px; align-items: center;
  color: var(--perigo); font-weight: 700; font-size: 12px; white-space: nowrap; }
/* Médio: linhas compactas (o rótulo fica na dica); Grande: rótulo em cima do valor */
.quadro.tam-medio .cv-linha .cv-rot { display: none; }
.quadro.tam-medio .cv-linha { padding-top: 6px; }
.quadro.tam-medio .cv-linhas { gap: 6px; }
.pl-rodape { border-top: 1px solid var(--borda); padding: 10px 14px 14px; display: grid; gap: 10px; }
.pl-rodape .check { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; font-size: 13px; }
.pl-rodape .check .desc { grid-column: 2; font-size: 12px; color: var(--texto-3); }
.pl-tags .pl-linha input[type=color] { width: 26px; height: 22px; padding: 0; border: 0; background: none; }

/* criação rápida (coluna do quadro ou grupo da lista) */
.rapido-slot:empty { display: none; }
.rapido { background: var(--painel); border: 1px solid var(--marca); border-radius: var(--raio); padding: 8px; margin-bottom: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; box-shadow: var(--sombra); max-width: 420px; }
.rap-nome { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.rap-nome input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; font-weight: 600; padding: 4px 2px; outline: none; }
.rap-op { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--texto-2); font-size: 13px; width: 100%; }
.rap-op:hover { background: var(--painel-2); }
.rap-op .ic { width: 20px; text-align: center; color: var(--texto-3); flex: none; font-size: 12px; }
.rap-op input, .rap-op select { flex: 1; min-width: 0; width: 100%; border: 0; background: none; padding: 3px 0; outline: none; font-size: 13px; }
.rap-op select { cursor: pointer; }
.rap-op select option { background: var(--painel); color: var(--texto); }
.rap-wa { padding-left: 32px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rap-wa:empty { display: none; }

/* pessoas */
.avatares { display: inline-flex; }
.avatares .avatar + .avatar { margin-left: -7px; box-shadow: 0 0 0 2px var(--painel); }
.avatar.mais { background: var(--painel-2); color: var(--texto-2); border: 1px solid var(--borda); }
.pessoa { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border: 1px solid var(--borda); border-radius: 999px; font-size: 13px; }
.pessoa .avatar { width: 22px; height: 22px; font-size: 10px; }
.pessoa .x { cursor: pointer; color: var(--texto-3); }
.pessoa .x:hover { color: var(--perigo); }
.pessoas-campo { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; min-height: 36px; }
.link-wa { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.tabela td.col-wa { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.valor-calc { font-size: 14px; color: var(--texto); min-height: 36px; display: flex; align-items: center; gap: 6px; }
input.caixa { width: 17px; height: 17px; accent-color: var(--marca); cursor: pointer; }
.caixa-ok { color: var(--ok); font-weight: 700; }

/* tarefa aberta: três layouts */
.gaveta.layout-cheia { left: 0; width: auto; z-index: 21; }
.gaveta.layout-modal { top: 4vh; bottom: 4vh; left: 0; right: 0; margin: 0 auto; width: min(1000px, 96vw); border-radius: 12px; overflow: hidden; animation: aparecer .14s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: scale(.985); } }
.gaveta-cab .caminho { flex: 1; min-width: 0; font-size: 12px; }
.gaveta-cab .acoes { flex: none; }
.id-tarefa { flex: none; color: var(--texto-3); }
.layout-cheia .gaveta-corpo { padding: 0; overflow: hidden; }
.layout-cheia .tarefa-grade { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 32%, 420px); height: 100%; }
.layout-cheia .tarefa-main { overflow: auto; padding: 20px max(32px, calc((100% - 960px) / 2)) 48px; }
.layout-cheia .tarefa-lado { overflow: auto; padding: 4px 20px 40px; background: var(--painel-2); border-left: 1px solid var(--borda); }
.layout-cheia .tarefa-lado .secao:first-child { border-top: 0; }
/* propriedades em duas colunas só quando a área principal comporta (tela cheia em monitor largo) */
.tarefa-main { container-type: inline-size; }
@container (min-width: 820px) { .layout-cheia .props { grid-template-columns: 130px minmax(0, 1fr) 130px minmax(0, 1fr); } }
.props .datas { gap: 8px; }
.props .datas label { display: grid; gap: 1px; }
.props .datas .campo { width: 150px; }
.seta-data { color: var(--texto-3); align-self: end; padding-bottom: 6px; }
.dd-lista .caminho { flex: 0 1 auto; }
.campo-linha .valor { min-width: 0; display: flex; align-items: center; gap: 6px; }
.campo-linha .valor .campo { width: 100%; max-width: var(--valor-campo); }
.subs { border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.sub-cab, .sub-linha { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 44px 86px 28px; gap: 8px; align-items: center; padding: 6px 10px; }
.sub-cab { font-size: 11px; color: var(--texto-3); background: var(--painel-2); }
.sub-linha { border-bottom: 0; border-top: 1px solid var(--borda); }
.sub-linha:hover { background: var(--painel-2); }
.sub-linha .t { font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; padding: 0; }
.sub-linha .t:hover { color: var(--marca); }
.sub-linha.ok .t { text-decoration: line-through; color: var(--texto-3); }
.sub-meta { display: inline-flex; gap: 8px; font-size: 12px; color: var(--texto-3); }
.sub-linha .vencida { color: var(--perigo); font-weight: 600; }
.sub-de { font-size: 12px; color: var(--texto-3); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.sub-de a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
#s-concluir.concluida { background: var(--ok); border-color: var(--ok); color: #fff; }
textarea.campo.auto { min-height: 90px; overflow: hidden; }

@media (max-width: 860px) {
  .layout-cheia .tarefa-grade { display: block; height: auto; }
  .layout-cheia .gaveta-corpo { overflow: auto; }
  .layout-cheia .tarefa-main, .layout-cheia .tarefa-lado { overflow: visible; padding: 16px; }
  .layout-cheia .props { grid-template-columns: 1fr; }
  .gaveta.layout-modal { top: 0; bottom: 0; width: 100vw; border-radius: 0; }
  .abas { flex-wrap: wrap; }
  .sub-cab { display: none; }
  .sub-linha { grid-template-columns: 22px minmax(0, 1fr) 44px 28px; }
  .sub-linha .sub-meta, .sub-linha > span:nth-child(5) { display: none; }
}
@media print {
  .gaveta.layout-modal, .gaveta.layout-cheia { position: static; width: auto; margin: 0; }
  .tarefa-grade { display: block !important; }
}
.toast .btn { background: transparent; color: inherit; border-color: currentColor; }
/* lista: o nome fica fixo ao rolar a tabela para o lado */
.grupo .tabela th:first-child, .grupo .tabela td.nome { position: sticky; left: 0; z-index: 1; background: var(--fundo); }
.grupo .tabela tbody tr:hover td.nome { background: var(--painel-2); }
div.rotulo { display: grid; gap: 4px; font-size: 12px; color: var(--texto-2); }

/* ===================== v0.4 ===================== */
/* navegação global (trilho) + Barra Lateral Inicial redimensionável */
:root { --trilho: 64px; --trilho-fundo: #121514; --trilho-texto: #c9d1cd; }
.layout { grid-template-columns: var(--trilho) var(--lateral) minmax(0, 1fr); }
body.lateral-recolhida .layout { grid-template-columns: var(--trilho) 0 minmax(0, 1fr); }
body.lateral-recolhida .lateral { display: none; }
/* trilho escuro nos dois temas (referência: navegação global do ClickUp) */
.trilho { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; background: var(--trilho-fundo); color: var(--trilho-texto); min-height: 0; }
.trilho-logo { border: 0; background: none; padding: 0; cursor: pointer; margin-bottom: 8px; border-radius: 8px; }
.trilho-logo:hover { outline: 2px solid #ffffff40; }
.trilho-btn { position: relative; width: 56px; border: 0; background: none; border-radius: 10px; cursor: pointer; color: var(--trilho-texto); display: grid; justify-items: center; gap: 3px; padding: 6px 0; }
.trilho-btn .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.trilho-btn .rot { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
.trilho-btn:hover .ic { background: #ffffff1f; color: #fff; }
.trilho-btn.inicio .ic { background: linear-gradient(140deg, var(--marca), #7b68ee); color: #fff; box-shadow: 0 2px 8px #0006; }
.trilho-btn.inicio .rot { color: #fff; }
.trilho-btn .contador { position: absolute; top: 0; right: 4px; background: #e9488b; color: #fff; font-size: 10px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; font-weight: 700; box-shadow: 0 0 0 2px var(--trilho-fundo); }
.trilho-espaco { flex: 1; }
.so-recolhida { display: none !important; }
body.lateral-recolhida .so-recolhida { display: grid !important; }
.lateral { position: relative; }
.lat-cab { display: flex; align-items: center; gap: 6px; padding: 14px 10px 8px 14px; }
.lat-cab b { font-size: 16px; }
.lat-espaco { flex: 1; min-width: 0; font-size: 12px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divisor { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 3; transition: background .12s, box-shadow .12s; }
.divisor:hover, .divisor:focus-visible, body.redimensionando .divisor { background: color-mix(in srgb, var(--marca) 55%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--marca) 60%, transparent); outline: none; }
.divisor.vai-recolher { background: var(--perigo) !important; box-shadow: 0 0 10px var(--perigo) !important; }
body.redimensionando, body.redimensionando * { cursor: col-resize !important; user-select: none; }
.nav-item .ic { width: 18px; text-align: center; flex: none; color: var(--texto-2); }
.nome-lista { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contador-nav { margin-left: auto; background: var(--marca); color: #fff; font-size: 11px; font-weight: 700; border-radius: 9px; padding: 0 6px; line-height: 18px; flex: none; }
.contador-nav.alerta { background: var(--perigo); }
.nav-item.desligado { opacity: .55; cursor: default; }
.nav-item.desligado:hover { background: none; }
.nav-item.desligado .selo { margin-left: auto; }
.nav-grupo { color: var(--texto-3); font-size: 12px; }
[data-no].destaque > .nav-item { outline: 2px solid var(--marca); }
.titulo-pagina .sub { font-size: 13px; color: var(--texto-3); }

/* Painel (caixa de entrada) e Comentários atribuídos */
.cx-resp { margin-left: auto; }
.cx-grupo h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); margin: 14px 0 6px; }
.aviso-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; border: 1px solid var(--borda); border-left: 3px solid transparent; border-radius: 10px; background: var(--painel); margin-bottom: 6px; cursor: pointer; }
.aviso-item:hover { border-color: var(--marca); }
.aviso-item.nao-lida { border-left-color: var(--marca); }
.aviso-item:not(.nao-lida) { opacity: .72; }
.aviso-ic { width: 30px; height: 30px; display: grid; place-items: center; font-size: 17px; font-weight: 700; color: var(--marca); }
.tipo-atraso .aviso-ic { color: var(--perigo); }
.tipo-vencimento .aviso-ic { color: var(--alerta); }
.aviso-coment { margin-top: 4px; padding: 6px 10px; background: var(--painel-2); border-radius: 8px; white-space: pre-wrap; font-size: 13px; overflow-wrap: anywhere; }
.aviso-meta { margin-top: 4px; font-size: 12px; color: var(--texto-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.aviso-acoes { display: flex; gap: 2px; align-self: start; visibility: hidden; }
.aviso-item:hover .aviso-acoes, .aviso-item:focus-within .aviso-acoes { visibility: visible; }
.aviso-atraso { color: var(--perigo); font-weight: 600; }
.aviso-vence { color: var(--alerta); font-weight: 600; }
.mencao { background: color-mix(in srgb, var(--marca) 18%, transparent); color: var(--marca-forte); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.menu .op.sel { background: var(--painel-2); }

/* Minhas responsabilidades */
.resp-kpis .kpi { text-decoration: none; color: inherit; border-top: 3px solid var(--borda); }
.resp-kpis .kpi:hover { border-color: var(--marca); }
.faixa-atraso { --faixa: var(--perigo); }
.faixa-hoje { --faixa: #e16b16; }
.faixa-amanha { --faixa: #1090e0; }
.faixa-semana { --faixa: var(--marca); }
.resp-kpis .kpi[class*="faixa-"] { border-top-color: var(--faixa, var(--borda)); }
.resp-kpis .faixa-atraso .v, .resp-kpis .faixa-hoje .v, .resp-kpis .faixa-amanha .v { color: var(--faixa); }
.resp-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.resp-secao h2 { font-size: 14px; margin: 14px 0 6px; color: var(--faixa, var(--texto)); }
.resp-item { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--borda); border-left: 4px solid var(--faixa, var(--borda)); border-radius: 8px; background: var(--painel); margin-bottom: 6px; cursor: pointer; }
.resp-item:hover { border-color: var(--marca); border-left-color: var(--faixa, var(--marca)); }
.resp-item.faixa-atraso { background: color-mix(in srgb, var(--perigo) 7%, var(--painel)); }
.resp-txt { flex: 1; min-width: 0; }
.resp-txt .sub { font-size: 12px; color: var(--texto-3); }
.resp-quando { font-size: 12px; white-space: nowrap; color: var(--faixa, var(--texto-2)); font-weight: 600; }
@media (max-width: 1100px) { .resp-grade { grid-template-columns: 1fr; } }

/* Mensagens diretas */
.dm { display: grid; grid-template-columns: 280px minmax(0, 1fr); flex: 1; min-height: 0; }
.dm-lista { border-right: 1px solid var(--borda); overflow: auto; padding: 10px; background: var(--painel); }
.dm-lista .campo { width: 100%; margin-bottom: 8px; }
.dm-pessoa { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 8px; color: var(--texto); }
.dm-pessoa:hover { background: var(--painel-2); text-decoration: none; }
.dm-pessoa.ativo { background: var(--marca-suave); }
.dm-pessoa.inativa { opacity: .5; }
.dm-nome { flex: 1; min-width: 0; display: grid; }
.dm-nome .sub { font-size: 12px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-conversa { display: flex; flex-direction: column; min-height: 0; }
.dm-cab { padding: 12px 16px; border-bottom: 1px solid var(--borda); display: flex; gap: 8px; align-items: center; background: var(--painel); }
.dm-msgs { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 240px; }
.dm-msg { display: grid; justify-items: start; gap: 2px; max-width: 75%; }
.dm-msg.minha { align-self: flex-end; justify-items: end; }
.dm-msg .bolha { background: var(--painel); border: 1px solid var(--borda); padding: 8px 12px; border-radius: 12px; overflow-wrap: anywhere; }
.dm-msg.minha .bolha { background: var(--marca); color: #fff; border-color: var(--marca); }
.dm-msg .sub { font-size: 11px; color: var(--texto-3); }
.dm-enviar { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--borda); background: var(--painel); align-items: flex-end; }
.dm-enviar textarea { flex: 1; min-height: 44px; }
.principal:has(.dm) { overflow: hidden; }

/* editor de status: modelos à esquerda; cores recentes no seletor */
.modal.modal-largo { width: min(880px, 96vw); }
.status-editor { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
.st-lado { border-right: 1px solid var(--borda); padding-right: 14px; display: grid; gap: 4px; align-content: start; }
.st-lado .campo { width: 100%; }
.st-salvar-modelo { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda); }
.menu .sub-tit { font-size: 11px; color: var(--texto-3); padding: 4px 6px 0; }
.paleta-cores.recentes { grid-template-columns: repeat(8, 22px); gap: 5px; }

@media (max-width: 860px) {
  .layout, body.lateral-recolhida .layout { grid-template-columns: var(--trilho) minmax(0, 1fr); }
  .lateral, body.lateral-recolhida .lateral { display: flex; position: fixed; top: 0; bottom: 0; left: var(--trilho); width: min(var(--lateral), calc(100vw - var(--trilho) - 16px)); transform: translateX(-120%); }
  body.lateral-aberta .lateral { transform: none; }
  .so-recolhida { display: grid !important; }
  .divisor { display: none; }
  .cabecalho { padding-left: 24px; }
  .dm { grid-template-columns: 1fr; }
  .dm-lista { max-height: 220px; }
  .status-editor { grid-template-columns: 1fr; }
  .st-lado { border-right: 0; padding-right: 0; }
}
.titulo-pagina { flex-wrap: wrap; row-gap: 6px; }
/* a barra lateral nunca toma mais de 40% da janela (telas pequenas) */
.layout { grid-template-columns: var(--trilho) min(var(--lateral), 40vw) minmax(0, 1fr); }
body.lateral-recolhida .layout { grid-template-columns: var(--trilho) 0 minmax(0, 1fr); }
@media (max-width: 860px) { .layout, body.lateral-recolhida .layout { grid-template-columns: var(--trilho) minmax(0, 1fr); } }

/* ===================== v0.4.1 — reordenar arrastando ===================== */
.arrasto-fantasma { box-shadow: 0 12px 30px rgb(0 0 0 / .35); transform: rotate(-1.5deg) scale(1.02); border-color: var(--marca) !important; background: var(--painel); opacity: .97; }
.arrasto-fantasma.pousando { transform: none; box-shadow: var(--sombra); }
.arrasto-vaga { border: 2px dashed var(--marca); border-radius: 8px; background: color-mix(in srgb, var(--marca) 10%, transparent); box-sizing: border-box; }
body.arrastando-item, body.arrastando-item * { cursor: grabbing !important; user-select: none; }
.status-linha { cursor: grab; }
.status-linha .alca, .item-check .alca { cursor: grab; touch-action: none; }
.status-linha .alca { padding: 4px 2px; }

/* ===================== v0.5 ===================== */
/* bandeiras: o Windows não desenha bandeiras em emoji; a fonte (Twemoji, CC-BY 4.0) cobre só esses caracteres */
@font-face { font-family: "Bandeiras"; src: url(/bandeiras.woff2) format("woff2"); unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F; font-display: swap; }
body { font-family: "Bandeiras", "Segoe UI", system-ui, -apple-system, sans-serif; }
/* séries dos gráficos (paleta validada: contraste e daltonismo) */
:root { --serie-1: #1d4ed8; --serie-2: #7fb2f5; --fin-cartao: #f8fafc; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --serie-1: #5470f5; --serie-2: #1a9fbf; --fin-cartao: var(--painel); } }
:root[data-tema="escuro"] { --serie-1: #5470f5; --serie-2: #1a9fbf; --fin-cartao: var(--painel); }
.perigo-txt { color: var(--perigo); font-weight: 700; }
.largura-total { grid-column: 1 / -1; }
.rotulo .dica { display: block; font-weight: 400; margin-top: 4px; }

/* barra fixa no topo: busca global + lembretes + conta */
.coluna-principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100vh; }
.coluna-principal > .principal { flex: 1; min-height: 0; }
.barra-topo { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 24px; background: var(--painel); border-bottom: 1px solid var(--borda); position: relative; z-index: 16; }
.busca-global { position: relative; flex: 1; max-width: 680px; margin: 0 auto; display: flex; align-items: center; }
.busca-global .lupa { position: absolute; left: 11px; color: var(--texto-3); pointer-events: none; font-size: 15px; }
.busca-global input { width: 100%; padding: 8px 64px 8px 32px; border: 1px solid var(--borda); border-radius: 999px; background: var(--painel-2); outline: none; transition: border-color .12s, box-shadow .12s, background .12s; }
.busca-global input:focus { background: var(--painel); border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent); }
.busca-global input::-webkit-search-cancel-button { display: none; }
.busca-global kbd { position: absolute; right: 12px; pointer-events: none; }
.busca-global input:focus ~ kbd { display: none; }
.topo-acoes { display: flex; gap: 8px; align-items: center; flex: none; }
.topo-acoes .sino { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borda); background: var(--painel); cursor: pointer; font-size: 15px; }
.topo-acoes .sino b { position: absolute; top: -4px; right: -4px; background: var(--perigo); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; }
.topo-acoes .eu { border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.topo-acoes .eu .avatar { width: 34px; height: 34px; font-size: 12px; }
.cabecalho { padding-right: 24px; }
.busca-resultados { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra); max-height: min(70vh, 560px); display: flex; flex-direction: column; overflow: hidden; animation: entrar .12s ease-out; }
.busca-cab { padding: 10px 14px 6px; font-size: 13px; color: var(--texto-2); }
.busca-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 14px 10px; border-bottom: 1px solid var(--borda); }
.busca-filtros .sub { font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; }
.chip-filtro { border: 1px solid var(--borda); background: var(--painel); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; color: var(--texto-2); }
.chip-filtro:hover { border-color: var(--marca); }
.chip-filtro.ativo { background: var(--marca-suave); border-color: var(--marca); color: var(--marca-forte); font-weight: 600; }
.busca-lista { overflow: auto; padding: 4px 6px 8px; }
.busca-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); padding: 10px 8px 4px; }
.busca-item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.busca-item:hover, .busca-item.sel { background: var(--painel-2); }
.busca-item.sel { box-shadow: inset 3px 0 0 var(--marca); }
.busca-item.concluida { opacity: .55; }
.busca-ic { width: 22px; text-align: center; color: var(--texto-3); flex: none; padding-top: 1px; }
.busca-txt { min-width: 0; flex: 1; }
.busca-txt b { font-weight: 600; }
.chip-lista { font-size: 11px; color: var(--texto-3); border: 1px solid var(--borda); border-radius: 4px; padding: 0 5px; margin-left: 4px; white-space: nowrap; }
.busca-meta { font-size: 12px; color: var(--texto-3); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }
.busca-meta .status-chip { font-size: 10.5px; line-height: 17px; padding: 0 6px; opacity: .85; }
.busca-meta mark { background: color-mix(in srgb, var(--destaque) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* telefone: bandeira à esquerda do número */
.bandeira { font-family: "Bandeiras", "Segoe UI Emoji", sans-serif; font-size: 1.15em; line-height: 1; }
.tel { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tel-campo { position: relative; display: flex; align-items: center; width: 100%; }
.tel-campo .tel-bandeira { position: absolute; left: 9px; color: var(--texto-3); }
.tel-campo input { padding-left: 34px !important; width: 100%; font-variant-numeric: tabular-nums; }

/* Prazos e Tarefas */
.prazos-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
#pz-lado { display: grid; gap: 14px; }
.kpis-prazo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis-prazo .kpi { border-top: 3px solid var(--borda); }
.kpi-pe { font-size: 12px; color: var(--texto-3); margin-top: 4px; }
.kpi.k-atrasada { border-top-color: #c8363d; }
.kpi.k-atrasada .v { color: #c8363d; }
.kpi.k-breve { border-top-color: #d99a00; }
.kpi.k-emdia { border-top-color: #1f8a4c; }
.kpi.k-emdia .v { color: #1f8a4c; }
.bloco-tabela { padding: 4px 0 0; overflow: hidden; }
.bloco-tabela .tabela th:first-child, .bloco-tabela .tabela td:first-child { padding-left: 16px; }
.bloco-tabela .bloco-cab { padding: 10px 16px 0; }
.tabela-prazos tr.linha-atrasada td:first-child { box-shadow: inset 3px 0 0 #c8363d; }
.tabela-prazos tr.linha-hoje td:first-child { box-shadow: inset 3px 0 0 #e16b16; }
.selo-prazo { --c: #8c948f; display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 14%, transparent); color: color-mix(in srgb, var(--c) 72%, var(--texto)); }
.s-atrasada { --c: #c8363d; }
.s-hoje { --c: #e16b16; }
.s-breve { --c: #d99a00; }
.s-emdia { --c: #1f8a4c; }
.s-sem { --c: #8c948f; }
.barra-tempo { display: inline-block; width: 120px; height: 8px; border-radius: 4px; background: var(--painel-2); overflow: hidden; vertical-align: middle; box-shadow: inset 0 0 0 1px var(--borda); }
.barra-tempo i { display: block; height: 100%; border-radius: 4px; transition: width .3s; }
.barra-tempo.n0 i { background: #1f8a4c; }
.barra-tempo.n1 i { background: #4c9f38; }
.barra-tempo.n2 i { background: #d99a00; }
.barra-tempo.n3 i { background: #e16b16; }
.barra-tempo.n4 i { background: #c8363d; }
.resumo-rosca { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; }
.rosca { width: 100%; height: auto; }
.rosca-v { font-size: 20px; font-weight: 700; fill: var(--texto); }
.rosca-s { font-size: 11px; fill: var(--texto-3); }
.legenda-v { display: grid; gap: 6px; font-size: 12.5px; }
.legenda-v > div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.legenda-v .bola { width: 10px; height: 10px; border-radius: 50%; }
.legenda-v .sub { color: var(--texto-3); min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.legenda-v b { font-variant-numeric: tabular-nums; }
.proximos { display: grid; gap: 4px; }
.proximo { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.proximo:hover { background: var(--painel-2); }
.proximo .bola { width: 8px; height: 8px; border-radius: 50%; }
.proximo .sub { font-size: 12px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proximo .selo-prazo { font-size: 11px; }
.cal-cab { display: flex; justify-content: space-between; align-items: center; }
.cal-cab h2 { margin: 0; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 8px; text-align: center; }
.cal-sem { font-size: 11px; color: var(--texto-3); padding-bottom: 2px; }
.cal .dia { border: 0; background: none; border-radius: 6px; padding: 5px 0; font-size: 12.5px; color: var(--texto-2); cursor: default; position: relative; font-variant-numeric: tabular-nums; }
.cal .dia.hoje { box-shadow: inset 0 0 0 1.5px var(--marca); color: var(--marca-forte); font-weight: 700; }
.cal .dia.tem { cursor: pointer; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--texto); font-weight: 600; }
.cal .dia.tem::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--c); }
.cal .dia.tem:hover { background: color-mix(in srgb, var(--c) 28%, transparent); }
.cal .dia.sel { outline: 2px solid var(--c); }
.dica-bloco { background: var(--marca-suave); border-color: transparent; }
.dica-bloco p { margin: 6px 0 10px; font-size: 13px; color: var(--texto-2); }
.tabela-equipe .avatar { width: 24px; height: 24px; font-size: 10px; vertical-align: middle; }
.tabela-equipe tr.com-alerta { background: color-mix(in srgb, var(--perigo) 5%, transparent); }
.barra-carga { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--painel-2); overflow: hidden; vertical-align: middle; box-shadow: inset 0 0 0 1px var(--borda); }
.barra-carga i { display: block; height: 100%; background: var(--marca); border-radius: 4px; }
.alerta-chip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.alerta-chip.a-critico { background: color-mix(in srgb, #c8363d 15%, transparent); color: color-mix(in srgb, #c8363d 75%, var(--texto)); }
.alerta-chip.a-alerta { background: color-mix(in srgb, #e16b16 15%, transparent); color: color-mix(in srgb, #e16b16 75%, var(--texto)); }
.alerta-chip.a-atencao { background: color-mix(in srgb, #d99a00 18%, transparent); color: color-mix(in srgb, #d99a00 70%, var(--texto)); }
.hist-alerta { background: color-mix(in srgb, var(--perigo) 8%, transparent); border-left: 3px solid var(--perigo); padding-left: 6px; border-radius: 4px; }
.hist-sub { font-size: 11.5px; color: var(--texto-3); background: var(--painel-2); border-radius: 4px; padding: 0 5px; }
@media (max-width: 1150px) {
  .prazos-grade { grid-template-columns: 1fr; }
  #pz-lado { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .kpis-prazo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Financeiro */
.conteudo.fin { background: var(--painel); flex: 1; }
.fin .bloco, .fin .kpi { background: var(--fin-cartao); border-color: var(--borda); border-radius: 12px; }
.fin-cab .titulo-pagina { align-items: flex-start; justify-content: space-between; }
.fin-cab h1 { font-size: 22px; }
.periodo { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borda); border-radius: var(--raio); padding: 2px 4px 2px 10px; background: var(--painel); }
.periodo .campo { border: 0; padding: 5px 6px; background: transparent; }
.kpis-fin { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis-fin .kpi { display: flex; gap: 12px; align-items: flex-start; }
.kpi-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; font-weight: 700; flex: none; }
.kpi-ic.mini { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
.ic-azul { background: color-mix(in srgb, var(--serie-1) 14%, transparent); color: var(--serie-1); }
.ic-verde { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.ic-vermelho { background: color-mix(in srgb, var(--perigo) 14%, transparent); color: var(--perigo); }
.var { font-weight: 700; }
.var-boa { color: var(--ok); }
.var-ruim { color: var(--perigo); }
.fin-meio, .fin-baixo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.bloco-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.bloco-cab h2 { margin: 0 0 2px; }
.bloco-cab .sub, .bloco > .sub { font-size: 12px; color: var(--texto-3); }
.grafico-barras { width: 100%; height: auto; display: block; }
.grafico-barras .grade { stroke: var(--borda); stroke-width: 1; }
.grafico-barras .eixo { font-size: 11px; fill: var(--texto-3); }
.grafico-barras .valor-barra { font-size: 10.5px; fill: var(--texto-2); font-weight: 600; }
.grafico-barras path:hover { opacity: .8; }
.b-recebido { fill: var(--serie-1); background: var(--serie-1); }
.b-areceber { fill: var(--serie-2); background: var(--serie-2); }
.legenda .bola { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tabela-dados { margin-top: 8px; font-size: 13px; }
.tabela-dados summary { cursor: pointer; color: var(--texto-2); font-size: 12px; }
.sub-tit-bloco { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); margin: 14px 0 6px; }
.fin .lista-simples > div { align-items: flex-start; }
.fin .lista-simples .sub { font-size: 12px; color: var(--texto-3); }
/* Fluxo de caixa: total em destaque + um bloco colorido por situação */
.fx { display: flex; flex-direction: column; gap: 14px; --fx-verde: #1f8a5b; --fx-azul: #3b7ddd; --fx-vermelho: #e0484f; }
.fx-cab { display: flex; align-items: center; gap: 14px; }
.fx-cab h2 { font-size: 18px; margin: 0; }
.fx-cab .sub { font-size: 13px; color: var(--texto-3); }
.fx-cab-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; color: color-mix(in srgb, var(--fx-azul) 60%, var(--texto)); background: color-mix(in srgb, var(--fx-azul) 12%, var(--painel)); }
.fx-total { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 16px; padding: 18px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #1f8058, #15633f); box-shadow: 0 6px 16px rgb(21 99 63 / .25); }
.fx-total-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgb(255 255 255 / .16); }
.fx-total-v { flex: 1; min-width: 120px; display: grid; }
.fx-total-v span { font-size: 13px; opacity: .9; }
.fx-total-v b { font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-total-pct { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid rgb(255 255 255 / .3); }
.fx-total-pct > div { display: grid; line-height: 1.15; }
.fx-total-pct b { font-size: 22px; font-variant-numeric: tabular-nums; }
.fx-total-pct span { font-size: 13px; opacity: .9; }
.fx-item { --fx-cor: var(--fx-verde); display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; background: color-mix(in srgb, var(--fx-cor) 8%, var(--painel)); }
.fx-item.fx-areceber { --fx-cor: var(--fx-azul); }
.fx-item.fx-atraso { --fx-cor: var(--fx-vermelho); }
.fx-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: var(--fx-cor); }
.fx-corpo { flex: 1; min-width: 0; display: grid; gap: 8px; }
.fx-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fx-nome { font-size: 14px; font-weight: 700; color: var(--texto); }
.fx-atraso .fx-nome { color: color-mix(in srgb, var(--fx-cor) 45%, var(--texto)); }
.fx-val { display: grid; text-align: right; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-val b { font-size: 15px; color: color-mix(in srgb, var(--fx-cor) 35%, var(--texto)); }
.fx-val small { font-size: 12px; color: var(--fx-cor); }
.fx-barra { height: 7px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--fx-cor) 16%, var(--painel)); }
.fx-barra i { display: block; height: 100%; border-radius: inherit; background: var(--fx-cor); }
@container (max-width: 360px) { .fx-total-pct { border-left: 0; padding-left: 0; } .fx-total-v b { font-size: 24px; } .fx-item { padding: 14px; gap: 12px; } .fx-ic { width: 40px; height: 40px; } }
.fin-baixo { grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr); }
.tabela-prazos td.nome { min-width: 170px; }
.tabela-prazos .barra-tempo { width: 96px; }
@media (max-width: 1150px) {
  .fin-meio, .fin-baixo { grid-template-columns: 1fr; }
  .kpis-fin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Modelos */
.modelos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.modelo-card { display: grid; gap: 8px; align-content: start; min-width: 0; } /* min-width: 0 = critério longo não alarga o cartão nem esconde os botões */
.modelo-card.sem-criterio { border-style: dashed; }
.modelo-cab { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.modelo-sec { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; }
.modelo-sec .rot { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); width: 100%; }
.regra-mini { width: 100%; font-size: 12.5px; }
.modelo-sec .chip { white-space: normal; max-width: 100%; overflow-wrap: anywhere; line-height: 18px; padding-block: 1px; }
.modelo-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px solid var(--borda); padding-top: 8px; margin-top: 2px; }
.modelo-botoes { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; justify-content: flex-end; }
/* "Visualizar" modelo (só leitura) */
.ver-titulo { display: flex; gap: 10px; align-items: center; }
.ver-titulo .selo { margin-left: 0; }
.ver-modelo { display: grid; gap: 4px; margin-top: 12px; max-height: 64vh; overflow: auto; padding-right: 4px; }
.ver-sec { border-top: 1px solid var(--borda); padding: 10px 0 6px; min-width: 0; }
.ver-sec h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); margin: 0 0 6px; font-weight: 700; }
.ver-sec h3 .sub { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.ver-sec .chip { white-space: normal; overflow-wrap: anywhere; }
.ver-lista { margin: 4px 0 0; padding-left: 20px; font-size: 13.5px; }
.ver-lista li { margin: 2px 0; }
.ver-grupo + .ver-grupo { margin-top: 8px; }
.ver-valores { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 14px; font-size: 13.5px; align-items: center; }
.vazio-modelos { max-width: 520px; margin: 8vh auto; text-align: center; display: grid; gap: 10px; justify-items: center; }
.vazio-modelos h2 { margin: 6px 0 0; }
.vazio-modelos p { color: var(--texto-2); margin: 0; }
.vazio-ic { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; font-size: 34px; background: var(--marca-suave); color: var(--marca); }
.vazio-modelos .btn.primario { padding: 10px 22px; font-size: 15px; margin-top: 6px; }
.mm-sec { border-top: 1px solid var(--borda); margin-top: 14px; padding-top: 12px; display: grid; gap: 6px; }
.mm-sec h3 { font-size: 14px; margin: 0 0 4px; }
.mm-sec h3 .sub { font-weight: 400; font-size: 12px; color: var(--texto-3); }
.crit-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--painel-2); }
.crit-linha > .campo { max-width: 220px; }
.crit-valores { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.chip-op { --cor: var(--marca); display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--borda); background: var(--painel); font-size: 12px; cursor: pointer; user-select: none; }
.chip-op input { display: none; }
.chip-op:hover { border-color: var(--cor); }
.chip-op.sel { background: var(--cor); border-color: var(--cor); color: #fff; font-weight: 600; }
.regra { border: 1px solid var(--borda); border-left: 3px solid var(--marca); border-radius: 8px; padding: 10px; display: grid; gap: 6px; }
.regra-cab { display: flex; gap: 8px; align-items: center; }
.regra-cab .campo { flex: 1; font-weight: 600; }
/* Subtarefas do modelo: uma linha por subtarefa (resumo) e, aberta, responsável, prazo e descrição */
.msubs { display: grid; gap: 6px; }
.msub { border: 1px solid var(--borda); border-radius: 8px; background: var(--painel); }
.msub.aberta { border-color: var(--marca); box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 25%, transparent); }
.msub-linha { display: flex; gap: 6px; align-items: center; padding: 4px 6px; }
.msub-linha .alca { padding: 0 2px; }
.msub-linha > .campo { flex: 1; min-width: 140px; border-color: transparent; background: transparent; font-weight: 600; }
.msub-linha > .campo:hover, .msub-linha > .campo:focus { border-color: var(--borda); background: var(--painel); }
.msub-resumo { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--texto-2); white-space: nowrap; }
.msub-resumo .avatar { width: 20px; height: 20px; font-size: 9px; }
.msub-tem { color: var(--marca-forte); }
.msub-det { border-top: 1px solid var(--borda); padding: 10px 12px 12px 42px; display: grid; gap: 8px; }
@media (max-width: 700px) { .msub-linha { flex-wrap: wrap; } .msub-det { padding-left: 12px; } }
.ver-sub { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; margin-top: 6px; display: grid; gap: 6px; }
.ver-sub-cab { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }

/* lista e quadro: personalização por pessoa, agrupamentos e seleção */
.abas-dir { display: flex; gap: 6px; align-items: center; }
.agrupar-por { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-3); }
.agrupar-por .campo { padding: 3px 6px; font-size: 12.5px; }
.ponto-pessoal { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--marca); margin-left: 4px; vertical-align: top; }
.manter { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 10px 8px 14px; }
.manter .check { font-size: 12px; }
.cat-titulo { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); margin: 18px 0 6px; display: flex; gap: 8px; align-items: baseline; }
.categoria { display: flex; flex-direction: column; flex: none; border: 1px dashed var(--borda); border-radius: 12px; padding: 6px; }
.cat-cab { border: 0; background: none; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); font-weight: 700; cursor: pointer; padding: 2px 6px 8px; display: flex; gap: 6px; align-items: center; }
.cat-cab:hover { color: var(--marca-forte); }
.cat-cab .n { font-weight: 400; color: var(--texto-3); }
.cat-colunas { display: flex; gap: 12px; align-items: flex-start; }
.categoria.recolhida { width: 44px; cursor: pointer; align-items: center; padding: 10px 4px; min-height: 160px; background: var(--painel-2); }
.categoria.recolhida:hover { background: var(--borda); }
.categoria.recolhida .vertical { writing-mode: vertical-rl; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.chip-coluna { border: 0; cursor: pointer; }
.chip-coluna:hover { filter: brightness(1.08); text-decoration: underline; }
.cadeado { font-size: 12px; opacity: .75; }
.col-proximo { white-space: normal !important; max-width: 260px; font-size: 13px; color: var(--texto-2); }
.proximo-cartao { font-size: 12px; color: var(--texto-2); background: var(--painel-2); border-radius: 6px; padding: 3px 7px; overflow-wrap: anywhere; }
.col-sel { width: 34px; padding-right: 0 !important; }
.sel-item { width: 16px; height: 16px; accent-color: var(--marca); cursor: pointer; margin: 0; }
.cartao { position: relative; }
.cartao .sel-item { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .1s; }
.cartao:hover .sel-item, .cartao.selecionada .sel-item, body.com-selecao .cartao .sel-item { opacity: 1; }
.tabela .sel-item { opacity: .35; }
.tabela tr:hover .sel-item, .tabela tr.selecionada .sel-item, body.com-selecao .tabela .sel-item { opacity: 1; }
.cartao.selecionada { border-color: var(--marca); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marca) 35%, transparent); }
.tabela tr.selecionada td { background: color-mix(in srgb, var(--marca) 10%, transparent); }
.barra-lote { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30; display: flex; gap: 6px; align-items: center; padding: 8px 10px 8px 16px; border-radius: 12px; background: var(--trilho-fundo); color: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .35); max-width: calc(100vw - 32px); flex-wrap: wrap; }
.barra-lote b { margin-right: 8px; white-space: nowrap; }
.barra-lote .btn { background: #ffffff14; border-color: #ffffff26; color: #fff; }
.barra-lote .btn:hover { background: #ffffff2b; }
.barra-lote .mini-ic { color: #fff; }
.op-duplo { cursor: default !important; }
.op-duplo .btn { padding: 2px 8px; }
.rap-resp { display: inline-flex; align-items: center; gap: 6px; }

/* tarefa: próximo passo, campos arrastáveis/renomeáveis, requisitos de status */
.campo-proximo { width: 100%; max-width: 560px; font-weight: 500; }
.campo-proximo:not(:placeholder-shown) { border-color: color-mix(in srgb, var(--marca) 45%, var(--borda)); background: color-mix(in srgb, var(--marca) 6%, var(--painel)); }
.campo-acoes { display: inline-flex; gap: 2px; }
.campo-linha .lapis { opacity: 0; transition: opacity .1s; }
.campo-linha:hover .lapis, .campo-linha .lapis:focus-visible { opacity: 1; }
.campos-pers .campo-linha .nome { cursor: grab; }
.campos-pers .tipo-ic.alca { touch-action: none; }
.ren-campo { padding: 2px 6px !important; font-weight: 600; width: 100%; }
.cfg-campos .linha-edit { cursor: grab; background: var(--painel); border-radius: 6px; }
.cfg-campos .alca { padding: 0 2px; }
.op-campo .alca { cursor: grab; }
.cor-op { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--painel); box-shadow: 0 0 0 1px var(--borda); cursor: pointer; flex: none; }
.cor-op:hover { box-shadow: 0 0 0 2px var(--marca); }
.req-st { font-size: 12px; opacity: .35; white-space: nowrap; }
.status-linha:hover .req-st, .req-st.ativo { opacity: 1; }
.req-st.ativo { color: var(--alerta); font-weight: 700; }
.menu label.op { cursor: pointer; }
.req-anexo { padding: 0 10px 6px 38px; }
.req-anexo .campo { width: 100%; }

@media (max-width: 860px) {
  .barra-topo { padding: 8px 10px; }
  .busca-global kbd { display: none; }
  .busca-global input { padding-right: 12px; }
  .kpis-prazo, .kpis-fin { grid-template-columns: 1fr 1fr; }
  .resumo-rosca { grid-template-columns: 110px minmax(0, 1fr); }
}
@media print {
  .barra-topo, .barra-lote { display: none !important; }
  .coluna-principal { height: auto; }
}
@media (max-width: 560px) {
  .kpis-prazo, .kpis-fin { grid-template-columns: 1fr; }
  .fin-cab .titulo-pagina { flex-direction: column; }
  .busca-resultados { position: fixed; left: 8px; right: 8px; top: 52px; }
  .barra-lote { bottom: 10px; }
}

/* ===================== v0.6 ===================== */
/* cartões personalizáveis: grade de 12 colunas, encaixe tipo alvenaria, alça para mover e bordas para redimensionar */
.grade-cartoes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 4px; column-gap: 14px; row-gap: 0; grid-auto-flow: row dense; align-items: start; }
.cartao-grade { position: relative; grid-column: span min(var(--c, 4), 12); align-self: start; min-width: 0; }
.cartao-grade.com-altura { height: var(--h); }
.cartao-grade.com-altura .cartao-conteudo { height: 100%; overflow: auto; border-radius: 12px; }
.cartao-grade.com-altura .cartao-conteudo > .bloco, .cartao-grade.com-altura .cartao-conteudo > .kpi { min-height: 100%; }
.cartao-conteudo > .kpi, .cartao-conteudo > .bloco { margin: 0; }
.cartao-conteudo > .kpi { display: block; height: auto; }
.alca-cartao { position: absolute; top: 6px; right: 6px; z-index: 3; width: 22px; height: 22px; border: 0; border-radius: 6px; background: var(--painel-2); color: var(--texto-3); cursor: grab; opacity: 0; transition: opacity .12s; font-size: 13px; line-height: 1; touch-action: none; }
.cartao-grade:hover > .alca-cartao { opacity: .9; }
.alca-cartao:hover { background: var(--borda); color: var(--texto); }
.puxar { position: absolute; z-index: 2; touch-action: none; }
.puxar-d { top: 10px; bottom: 10px; right: -7px; width: 12px; cursor: ew-resize; }
.puxar-b { left: 10px; right: 10px; bottom: -7px; height: 12px; cursor: ns-resize; }
.puxar-db { right: -7px; bottom: -7px; width: 16px; height: 16px; cursor: nwse-resize; }
.puxar-d:hover, .puxar-b:hover, .puxar-db:hover { background: color-mix(in srgb, var(--marca) 35%, transparent); border-radius: 6px; }
.cartao-grade:hover .cartao-conteudo > * { box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 25%, transparent); }
.cartao-grade.em-ajuste .cartao-conteudo > * { box-shadow: 0 0 0 2px var(--marca); }
.cartao-grade.movendo { opacity: .3; }
.cartao-grade.movendo .cartao-conteudo > * { border: 2px dashed var(--marca); }
.cartao-fantasma { box-shadow: 0 14px 34px rgb(0 0 0 / .35); transform: rotate(-1deg) scale(1.01); opacity: .97; border-radius: 12px; }
.cartao-fantasma .puxar, .cartao-fantasma .alca-cartao { display: none; }
body.puxando-d, body.puxando-d * { cursor: ew-resize !important; user-select: none; }
body.puxando-b, body.puxando-b * { cursor: ns-resize !important; user-select: none; }
body.puxando-db, body.puxando-db * { cursor: nwse-resize !important; user-select: none; }
.grade-rodape { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; }
.kpi-fin { display: flex; gap: 12px; align-items: flex-start; }
.resp-lista { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 4px 14px 10px; }
.resp-kpi { text-decoration: none !important; color: inherit; border-top: 3px solid var(--faixa, var(--borda)); }
.resp-kpi:hover { border-color: var(--marca); }
.resp-kpi.faixa-atraso .v, .resp-kpi.faixa-hoje .v, .resp-kpi.faixa-amanha .v { color: var(--faixa); }
.fin-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 860px) { .cartao-grade { grid-column: span 12 !important; } .puxar, .alca-cartao { display: none; } }

/* entrada: Google, reenviar link, confirmação */
.ou { display: flex; align-items: center; gap: 10px; color: var(--texto-3); font-size: 12px; margin: 2px 0; }
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--borda); }
.g-botao { display: flex; justify-content: center; min-height: 40px; }
.link-btn { border: 0; background: none; color: var(--marca); cursor: pointer; padding: 0; text-align: left; font-size: 13px; }
.link-btn:hover { text-decoration: underline; }
.g-logo { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4285f4; font-weight: 800; box-shadow: 0 0 0 1px var(--borda); margin-right: 4px; }
ol.passos { padding-left: 18px; margin: 4px 0 10px; }
ol.passos li { margin-bottom: 4px; }

/* lixeira */
.lixeira-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.lixeira-cab h2 { margin: 0 0 4px; font-size: 18px; }
.aviso-lixeira { margin: 0; color: var(--texto-2); font-size: 13px; }
.btn.perigo-solido { background: var(--perigo); border-color: var(--perigo); color: #fff; font-weight: 600; }
.btn.perigo-solido:hover { filter: brightness(1.08); background: var(--perigo); }
.filtros-lixeira { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.filtros-lixeira .campo { max-width: 240px; }
.tabela-lixeira td { vertical-align: middle; }
.tabela-lixeira .avatar { width: 24px; height: 24px; font-size: 10px; vertical-align: middle; }
.lx-ic { display: inline-grid; place-items: center; width: 20px; color: var(--texto-3); }
.aviso-lixeira-tarefa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-left: 3px solid var(--perigo); }

/* configurações */
.abas-config { flex-wrap: wrap; }
.barra-config { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.selo.selo-alerta { background: color-mix(in srgb, var(--alerta) 18%, transparent); color: color-mix(in srgb, var(--alerta) 70%, var(--texto)); }
.selo.selo-ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: color-mix(in srgb, var(--ok) 75%, var(--texto)); }
.selo.selo-dono { background: color-mix(in srgb, var(--destaque) 25%, transparent); color: color-mix(in srgb, var(--destaque) 55%, var(--texto)); }
.acoes-equipe { display: flex; gap: 6px; justify-content: flex-end; }
.variaveis { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.previa-msg { margin-top: 10px; display: grid; gap: 4px; }
.bolha-wa { background: #d9fdd3; color: #111b21; border-radius: 10px 10px 10px 2px; padding: 8px 12px; max-width: 520px; white-space: pre-wrap; font-size: 14px; box-shadow: 0 1px 1px rgb(0 0 0 / .1); }
:root[data-tema="escuro"] .bolha-wa { background: #005c4b; color: #e9edef; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .bolha-wa { background: #005c4b; color: #e9edef; } }

/* barra lateral: atalho dentro do item */
.atalho-nav { margin-left: 4px; width: 22px; height: 20px; border-radius: 5px; display: inline-grid; place-items: center; font-size: 12px; color: var(--texto-3); opacity: 0; transition: opacity .1s; flex: none; }
.nav-item:hover .atalho-nav { opacity: 1; }
.atalho-nav:hover { background: var(--borda); color: var(--texto); }
.nav-item .contador-nav + .atalho-nav { margin-left: 4px; }
.nav-item .atalho-nav:first-of-type:not(:only-child) { margin-left: auto; }

/* tarefa: Próximo passo em largura total, igual à Descrição, nos três layouts */
.rotulo-proximo { display: block; margin-bottom: 12px; }
.rotulo-proximo .campo-proximo { display: block; width: 100%; max-width: none; margin-top: 4px; }
.cartao-conteudo { container-type: inline-size; }
@container (max-width: 380px) { .resumo-rosca { grid-template-columns: 1fr; justify-items: center; } .resumo-rosca .rosca { max-width: 150px; } .resumo-rosca .legenda-v { width: 100%; } }

/* ===================== v0.7 ===================== */
/* entrada: "Esqueci minha senha" */
.link-btn.esqueci { justify-self: end; margin-top: -6px; font-size: 12px; }
.opcoes-senha { display: grid; gap: 6px; }
.opcoes-senha .ajuda { margin: 0 0 8px; }
.opcoes-senha .btn { justify-self: start; }
/* Configurações › Sistema: cópia de segurança automática */
.aviso-backup { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--painel-2); font-size: 13px; }
.aviso-backup.ok-backup { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.aviso-backup.erro-backup { background: color-mix(in srgb, var(--perigo) 12%, transparent); color: color-mix(in srgb, var(--perigo) 75%, var(--texto)); }
.com-sufixo { display: flex; align-items: center; gap: 8px; }
.com-sufixo .campo { width: 90px; }
.caminho-backup { font-size: 11px; word-break: break-all; }

/* ---------- editor da descrição (v0.8): texto rico, comandos "/", tabela e botão ---------- */
.editor-desc { position: relative; font-weight: 400; color: var(--texto); }
.editor-area { position: relative; min-height: 72px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--painel); outline: none;
  line-height: 1.55; font-size: 14px; overflow-wrap: anywhere; cursor: text; }
.editor-area:hover { border-color: color-mix(in srgb, var(--marca) 45%, var(--borda)); }
.editor-area:focus { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent); }
.editor-desc.so-leitura .editor-area { cursor: default; background: transparent; }
.editor-area.vazio::before { content: attr(data-placeholder); position: absolute; left: 12px; top: 10px; color: var(--texto-3); pointer-events: none; }
.editor-area > :first-child { margin-top: 0; }
.editor-area > :last-child { margin-bottom: 0; }
.editor-area p, .editor-area div { margin: 0 0 4px; }
.editor-area h1 { font-size: 20px; margin: 12px 0 6px; } .editor-area h2 { font-size: 17px; margin: 10px 0 6px; } .editor-area h3 { font-size: 15px; margin: 8px 0 4px; }
.editor-area ul, .editor-area ol { margin: 4px 0 6px; padding-left: 24px; }
.editor-area blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--marca); color: var(--texto-2); }
.editor-area hr { border: 0; border-top: 1px solid var(--borda); margin: 12px 0; }
.editor-area table { border-collapse: collapse; width: 100%; margin: 8px 0; table-layout: fixed; }
.editor-area td, .editor-area th { border: 1px solid color-mix(in srgb, var(--texto-3) 45%, var(--borda)); padding: 8px 10px; vertical-align: top; min-height: 38px; height: 40px; }
.editor-area th { background: var(--painel-2); text-align: left; }
.editor-area a { color: var(--marca-forte); }
.editor-area p[data-alinhar="centro"], .editor-area div[data-alinhar="centro"] { text-align: center; }
.editor-area p[data-alinhar="direita"], .editor-area div[data-alinhar="direita"] { text-align: right; }
.editor-area a[data-botao] { display: inline-block; padding: 7px 16px; border-radius: 6px; background: var(--cor-botao, var(--marca)); color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; user-select: none; }
.editor-area a[data-botao]:hover { filter: brightness(1.08); }
.editor-legenda { height: 18px; margin-top: 4px; font-size: 11.5px; color: var(--texto-3); opacity: 0; transition: opacity .15s; pointer-events: none; }
.editor-legenda kbd { font-size: 10px; padding: 0 4px; }
.editor-desc:hover .editor-legenda, .editor-desc:focus-within .editor-legenda { opacity: 1; }
.tabela-ferramentas { position: absolute; z-index: 6; display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--painel); border: 1px solid var(--borda); border-radius: 8px; box-shadow: var(--sombra); max-width: 100%; }
.tabela-ferramentas .btn { padding: 3px 7px; font-size: 12px; }
.menu-barra { position: fixed; z-index: 60; width: 308px; max-height: 340px; overflow: auto; background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra); padding: 6px; animation: entrar .1s ease-out; }
.menu-barra .mb-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); padding: 8px 8px 4px; }
.menu-barra .mb-op { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.menu-barra .mb-op.sel { background: var(--painel-2); }
.menu-barra .mb-op .desc { display: block; font-size: 11.5px; color: var(--texto-3); }
.menu-barra .mb-ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border: 1px solid var(--borda); border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--texto-2); background: var(--painel); }
.cores-botao { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cor-opcao { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.cor-opcao.sel { box-shadow: 0 0 0 2px var(--painel), 0 0 0 4px var(--texto); }
@media print { .editor-legenda, .tabela-ferramentas { display: none !important; } .editor-area { border: 0; padding: 0; } }