/* 360 Sales — Portal de Clientes — design system */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root{
  --red:#FF040C; --red-dark:#D6030A; --red-soft:#FFF1F1; --red-line:#FFD3D5;
  --ink:#18181B; --body:#333333; --muted:#7A7A7A; --line:#ECECEC; --soft:#F7F7F7;
  --white:#fff;
  --ok:#0F9960; --ok-soft:#E8F6EF;
  --warn:#B45309; --warn-soft:#FEF4E6;
  --bad:#D1343F; --bad-soft:#FDECEE;
  --info:#1F6FEB; --info-soft:#E8F0FE;
  --r:14px; --r-sm:10px; --max:1180px;
  --shadow:0 1px 2px rgba(24,24,27,.04), 0 8px 24px rgba(24,24,27,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Plus Jakarta Sans',-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
  color:var(--body); background:var(--white); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Sora',sans-serif; color:var(--ink); margin:0; line-height:1.2; letter-spacing:-.01em}
a{color:var(--red); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.hide{display:none !important}

/* ---------- login ---------- */
.login-bg{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(900px 420px at 50% -140px, rgba(255,4,12,.16), rgba(255,4,12,0) 70%),
    linear-gradient(180deg,#fff 0%, var(--soft) 100%);
}
.login-card{
  width:100%; max-width:420px; background:var(--white); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow); padding:36px 32px;
}
.login-card .logo{height:34px; margin-bottom:22px}
.login-card h1{font-size:22px; margin-bottom:6px}
.login-card p.sub{color:var(--muted); font-size:14px; margin:0 0 24px}

label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin:0 0 6px}
input:not([type]),input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  font:inherit; color:var(--ink); background:var(--white); outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--red); box-shadow:0 0 0 3px rgba(255,4,12,.12)}
.field{margin-bottom:16px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  font:inherit; font-weight:600; transition:.15s; white-space:nowrap;
}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{background:#000}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:7px 14px; font-size:13px}
.btn-block{width:100%}
.btn:disabled{opacity:.55; cursor:not-allowed}

.sep{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; margin:20px 0}
.sep:before,.sep:after{content:''; flex:1; height:1px; background:var(--line)}

.alerta{
  border-radius:var(--r-sm); padding:10px 12px; font-size:13.5px; margin-bottom:14px;
  background:var(--bad-soft); color:var(--bad); border:1px solid var(--red-line);
}
.alerta.ok{background:var(--ok-soft); color:var(--ok); border-color:#BFE6D4}

/* ---------- topo ---------- */
.topbar{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; gap:16px; height:66px}
.topbar .logo{height:26px}
.topbar .divisor{width:1px; height:24px; background:var(--line)}
.topbar .titulo{font-family:'Sora',sans-serif; font-weight:600; color:var(--ink); font-size:15px}
.topbar .espaco{flex:1}
.user-chip{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted)}
.avatar{
  width:30px; height:30px; border-radius:50%; background:var(--red-soft); color:var(--red);
  display:grid; place-items:center; font-weight:700; font-size:12px; border:1px solid var(--red-line);
}

/* ---------- cartões / kpis ---------- */
.pagina{padding:32px 0 64px}
.cabecalho{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:24px}
.cabecalho .espaco{flex:1}
.cabecalho h1{font-size:28px}
.cabecalho .meta{color:var(--muted); font-size:13px; margin-top:6px}

.grid-kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:8px; margin-bottom:24px}
.kpi{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px}
.kpi .rotulo{font-size:10.5px; line-height:1.25; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600}
.kpi .valor{font-family:'Sora',sans-serif; font-size:26px; font-weight:700; color:var(--ink); margin-top:6px; line-height:1}
.kpi .nota{font-size:11px; line-height:1.3; color:var(--muted); margin-top:5px}
.kpi.destaque{background:linear-gradient(180deg,#fff, var(--red-soft)); border-color:var(--red-line)}
.kpi.clicavel{cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s}
.kpi.clicavel:hover{border-color:var(--ink); transform:translateY(-1px)}
.kpi.clicavel:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.kpi.sel{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.kpi.sel.destaque{border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red)}

.barra-item{margin-bottom:11px; cursor:pointer; border-radius:8px; padding:6px 8px; margin-left:-8px; margin-right:-8px; transition:background .15s}
.barra-item:hover{background:var(--soft)}
.barra-item.sel{background:var(--red-soft)}
.kpi.destaque .valor{color:var(--red)}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card .card-topo{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.card h2{font-size:16px}
.card .card-corpo{padding:18px}

.barra-progresso{height:8px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:14px}
.barra-progresso > span{display:block; height:100%; background:var(--red); border-radius:99px; transition:width .4s}

/* ---------- filtros ---------- */
.filtros{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; margin-bottom:16px}
.filtros input[type=text]{max-width:280px}
.filtros select{width:auto; min-width:150px}
.chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.chip{
  padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--body); cursor:pointer; transition:.15s;
}
.chip:hover{border-color:var(--ink)}
.chip.ativo{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---------- tabela ---------- */
.tabela-scroll{overflow-x:auto}
table.tabela{width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed}
table.tabela th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  font-weight:700; padding:10px 7px; border-bottom:1px solid var(--line); background:#fff;
}
table.tabela td{padding:10px 7px; border-bottom:1px solid var(--line); vertical-align:middle; word-break:break-word}
table.tabela tr:last-child td{border-bottom:0}
table.tabela tbody tr:hover{background:var(--soft)}
td.tarefa{color:var(--ink); font-weight:600}
td.tarefa small{display:block; font-weight:400; color:var(--muted); margin-top:3px}

.tag{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap}
.tag.ok{background:var(--ok-soft); color:var(--ok)}
.tag.bad{background:var(--bad-soft); color:var(--bad)}
.tag.warn{background:var(--warn-soft); color:var(--warn)}
.tag.info{background:var(--info-soft); color:var(--info)}
.tag.neutro{background:var(--soft); color:var(--muted)}

select.status-sel{
  width:100%; min-width:0; padding:6px 8px; font-size:12px; font-weight:600; font-family:inherit;
  border:1px solid var(--line); border-radius:999px; cursor:pointer; color:var(--ink); background:#fff;
}
select.status-sel.gravando{opacity:.5}

input.prazo-inp,
input.conclusao-inp{
  width:100%; min-width:0; padding:6px 8px; font-size:12px; font-weight:600; font-family:inherit;
  border:1px solid var(--line); border-radius:999px; cursor:pointer; color:var(--ink); background:#fff;
}
input.prazo-inp:hover,
input.conclusao-inp:hover{border-color:var(--ink)}
input.prazo-inp.gravando,
input.conclusao-inp.gravando{opacity:.5}

select.resp-sel{
  width:100%; min-width:0; padding:6px 8px; font-size:12px; font-weight:600; font-family:inherit;
  border:1px solid var(--line); border-radius:999px; cursor:pointer; color:var(--ink); background:#fff;
}
/* dependência editável: campo discreto, com quebra automática de linha */
textarea.dep-inp{
  width:100%; min-width:0; padding:6px 8px; font-size:12px; line-height:1.35;
  border-radius:10px; border:1px solid transparent; background:transparent; color:var(--muted);
  font-family:inherit; resize:vertical; min-height:34px; overflow:hidden;
  white-space:pre-wrap; word-break:break-word;
}
textarea.dep-inp:hover, textarea.dep-inp:focus{
  border-color:var(--line); background:#fff; color:var(--ink); overflow:auto;
}
textarea.dep-inp.gravando{opacity:.5}
/* larguras das colunas do portal do projeto (7 colunas) */
table.tabela.projeto th:nth-child(1){width:21%}
table.tabela.projeto th:nth-child(2){width:10%}
table.tabela.projeto th:nth-child(3){width:12%}
table.tabela.projeto th:nth-child(4){width:14%}
table.tabela.projeto th:nth-child(5){width:14%}
table.tabela.projeto th:nth-child(6){width:10%}
table.tabela.projeto th:nth-child(7){width:14%}
table.tabela.projeto th:nth-child(8){width:5%}
/* consolidada: mesma ideia, com a coluna Projeto na frente (8 colunas) */
table.tabela.consolidada th:nth-child(1){width:10%}
table.tabela.consolidada th:nth-child(2){width:19%}
table.tabela.consolidada th:nth-child(3){width:11%}
table.tabela.consolidada th:nth-child(4){width:13%}
table.tabela.consolidada th:nth-child(5){width:12%}
table.tabela.consolidada th:nth-child(6){width:12%}
table.tabela.consolidada th:nth-child(7){width:11%}
table.tabela.consolidada th:nth-child(8){width:11%}
table.tabela.consolidada th:nth-child(9){width:5%}
select.resp-sel.gravando{opacity:.5}

.obs-linha{display:flex; align-items:center; gap:8px; margin-top:5px}
input.obs-inp{
  width:100%; max-width:420px; border:1px solid transparent; background:transparent;
  padding:3px 6px; margin-left:-6px; font-size:12.5px; font-weight:400; color:var(--muted);
  border-radius:6px;
}
input.obs-inp:hover{border-color:var(--line); background:#fff}
input.obs-inp:focus{border-color:var(--red); background:#fff; color:var(--ink); box-shadow:0 0 0 3px rgba(255,4,12,.12)}
input.obs-inp.gravando{opacity:.5}
input.resp-nome{flex:1}

.vazio{padding:48px 18px; text-align:center; color:var(--muted)}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--line); padding:22px 0; color:var(--muted); font-size:12.5px}
.rodape .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* ---------- carregando ---------- */
.spinner{
  width:18px; height:18px; border:2px solid var(--line); border-top-color:var(--red);
  border-radius:50%; animation:gira .7s linear infinite; display:inline-block;
}
@keyframes gira{to{transform:rotate(360deg)}}
.carregando{display:flex; align-items:center; justify-content:center; gap:10px; padding:60px; color:var(--muted)}

/* ---------- modal ---------- */
.modal-bg{position:fixed; inset:0; background:rgba(24,24,27,.45); display:grid; place-items:center; padding:20px; z-index:60}
.modal{background:#fff; border-radius:18px; width:100%; max-width:520px; box-shadow:0 20px 60px rgba(0,0,0,.2); overflow:hidden}
.modal header{padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between}
.modal .corpo{padding:22px; max-height:65vh; overflow:auto}
.modal footer{padding:16px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px}
.x{border:0; background:none; font-size:22px; line-height:1; cursor:pointer; color:var(--muted)}

@media (max-width:760px){
  .cabecalho h1{font-size:22px}
  .topbar .titulo{display:none}
  .ocultar-mobile{display:none}

  /* nada de rolagem lateral: o conteudo cabe na largura da tela */
  html, body{max-width:100%; overflow-x:hidden}
  .wrap{padding-left:14px; padding-right:14px}
  .tabela-scroll{overflow-x:hidden}
  table.tabela{table-layout:auto; min-width:0}
  table.tabela td, table.tabela th{white-space:normal}

  /* topbar em uma linha so, sem quebrar */
  .topbar .wrap{gap:8px; flex-wrap:nowrap; height:58px}
  .topbar .logo{height:22px; flex:0 0 auto}
  .topbar .divisor{display:none}
  .topbar .btn{padding:6px 10px; font-size:12px; white-space:nowrap; flex:0 0 auto}
  .topbar .user-chip{gap:6px; flex:0 0 auto}
  /* menu do projeto: os itens dividem a largura, todos visiveis sem rolar */
  .nav-projeto.nav-projeto{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; flex-wrap:nowrap}
  .nav-projeto .nav-item{width:100%; min-width:0; white-space:normal; overflow-wrap:anywhere; text-align:center;
    flex-direction:column; align-items:center; justify-content:center; gap:3px;
    font-size:10px; padding:6px 4px; line-height:1.15; border-radius:12px; overflow:hidden}
  .nav-projeto .nav-item svg{flex:0 0 auto; width:14px; height:14px}
  .nav-projeto .nav-item .lbl{display:inline}
  .nav-projeto .nav-item .lbl-curto{display:none}
  /* so este botao usa rotulo curto no mobile (evita quebrar 'Acompanhamento') */
  .nav-projeto .nav-item[data-v="acompanhamento"] .lbl{display:none}
  .nav-projeto .nav-item[data-v="acompanhamento"] .lbl-curto{display:inline}
  .pp-grid.pp-grid{grid-template-columns:1fr; grid-auto-rows:auto}
  .filtros input[type=text]{max-width:none; width:100%}
  .filtros select{width:100%}

  /* tabela vira lista de cartões */
  table.tabela, table.tabela tbody, table.tabela tr, table.tabela td{display:block; width:100%}
  table.tabela thead{display:none}
  table.tabela tr{
    border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:12px; background:#fff;
  }
  table.tabela tbody tr:hover{background:#fff}
  table.tabela td{border:0; padding:4px 0; display:flex; align-items:center; gap:10px}
  /* rotulo com largura fixa: assim todos os controles comecam no mesmo ponto */
  table.tabela td[data-rot]:before{
    content:attr(data-rot); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--muted); font-weight:700; flex:0 0 104px; text-align:left;
  }
  /* todo controle ocupa o resto da linha, com a mesma largura e conteudo centralizado */
  table.tabela td>select,
  table.tabela td>input,
  table.tabela td>textarea{
    flex:1 1 auto; width:auto; min-width:0; max-width:none;
    text-align:center; text-align-last:center;
  }
  table.tabela td>textarea{text-align:left; text-align-last:left}
  /* input[type=date] nao obedece text-align: o conteudo fica num bloco interno.
     Centralizar exige mexer no bloco do proprio navegador. */
  table.tabela td>input[type=date]{display:flex; align-items:center}
  table.tabela td>input[type=date]::-webkit-datetime-edit{flex:1; text-align:center}
  table.tabela td>input[type=date]::-webkit-datetime-edit-fields-wrapper{justify-content:center}
  table.tabela td>input[type=date]::-webkit-calendar-picker-indicator{margin-left:0}
  /* etiquetas (status, situacao) alinhadas na mesma coluna dos controles */
  /* etiquetas: sao inline-flex, entao centralizar exige justify-content */
  table.tabela td>.tag{flex:1 1 auto; justify-content:center; text-align:center}
  /* botao de concluir e demais controles com o texto centralizado */
  table.tabela td>button{flex:0 0 auto}
  table.tabela td>select{text-align:center; text-align-last:center}
  /* especificidade maior que "table.tabela td" para a celula do nome voltar a ser bloco */
  table.tabela td.tarefa{display:block; font-size:15px; padding-bottom:10px; margin-bottom:6px;
    border-bottom:1px solid var(--line) !important}
  table.tabela td.tarefa .obs-linha{flex-wrap:wrap; margin-top:8px}
  table.tabela td.tarefa .obs-inp{width:100%}
  table.tabela td>textarea{min-height:38px}
  table.tabela td.acao-linha{justify-content:flex-end; padding-top:8px}
  table.tabela td.acao-linha:empty{display:none}
  select.status-sel{min-width:0; max-width:none}
}

/* faixa compacta de atrasos por responsável (abaixo dos KPIs) */
.atraso-resp{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-10px 0 22px}
.atraso-resp .titulo{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; margin-right:2px}
.atraso-resp .pino{display:inline-flex; align-items:center; gap:6px; background:var(--red-soft,#FFF1F1); border:1px solid var(--red-line,#FFD6D6);
  color:var(--ink); border-radius:99px; padding:5px 12px; font-size:12.5px; font-family:inherit; cursor:pointer; transition:border-color .15s, transform .15s}
.atraso-resp .pino strong{font-family:'Sora',sans-serif; font-size:13px}
.atraso-resp .pino:hover{border-color:var(--red,#FF040C); transform:translateY(-1px)}

/* ---------------- status report (visualização e PDF) ---------------- */
.relatorio-bg{position:fixed; inset:0; background:#F4F4F4; overflow:auto; z-index:60; padding:0 0 60px}
.relatorio-barra{position:sticky; top:0; display:flex; align-items:center; gap:10px; padding:12px 20px;
  background:#fff; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--muted); z-index:2}
.relatorio-barra .espaco{flex:1}
.relatorio{background:#fff; max-width:900px; margin:26px auto; padding:40px 44px; border:1px solid var(--line); border-radius:var(--r)}
.rel-topo{display:flex; align-items:center; gap:18px; border-bottom:2px solid var(--ink); padding-bottom:18px; margin-bottom:26px}
.rel-topo img{height:34px}
.rel-topo h1{font-family:'Sora',sans-serif; font-size:26px; margin:0; color:var(--ink)}
.rel-topo .sub{color:var(--muted); font-size:13.5px; margin-top:4px}
.rel-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:30px}
.rel-kpis>div{border:1px solid var(--line); border-radius:var(--r); padding:16px}
.rel-kpis>div.alerta{background:var(--red-soft,#FFF1F1); border-color:var(--red-line,#FFD6D6)}
.rel-kpis span{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600}
.rel-kpis strong{display:block; font-family:'Sora',sans-serif; font-size:30px; color:var(--ink); margin-top:6px; line-height:1}
.relatorio h2{font-family:'Sora',sans-serif; font-size:16px; margin:28px 0 10px; color:var(--ink)}
.relatorio h2 span{color:var(--muted); font-weight:400; font-size:14px}
.relatorio table{width:100%; border-collapse:collapse; font-size:13px}
.relatorio th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  border-bottom:1px solid var(--line); padding:8px 10px 8px 0}
.relatorio td{border-bottom:1px solid #F0F0F0; padding:9px 10px 9px 0; vertical-align:top}
.relatorio td small{display:block; color:var(--muted); font-size:11.5px; margin-top:3px}
.relatorio .vazio-rel{color:var(--muted); font-size:13px; margin:0}
.relatorio .nota-rel{margin-top:26px; color:var(--muted); font-size:12.5px}
.rel-rodape{margin-top:34px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:11.5px; text-align:center}

@media print{
  body.com-relatorio>*:not(.relatorio-bg){display:none !important}
  .relatorio-bg{position:static; background:#fff; padding:0; overflow:visible}
  .relatorio-barra{display:none !important}
  .relatorio{border:0; margin:0; max-width:none; padding:0; border-radius:0}
  .relatorio table{page-break-inside:auto}
  .relatorio tr{page-break-inside:avoid}
  .relatorio h2{page-break-after:avoid}
  @page{margin:16mm}
}

/* Status report: marca de entrega fora do prazo */
.relatorio small.atrasado-rel{display:block; margin-top:2px; font-size:10.5px; font-weight:600; color:var(--red,#e11d2e)}

/* Trocar de projeto: lista clicável dentro do modal */
.lista-projetos{display:flex; flex-direction:column; gap:8px}
.item-projeto{
  display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--r); text-decoration:none; transition:border-color .15s, background .15s;
}
.item-projeto:hover{border-color:var(--ink); background:var(--soft)}
.item-projeto .nome{font-weight:600; color:var(--ink); font-size:14px}
.item-projeto .slug{font-size:12px; color:var(--muted)}

/* ---------- menu do projeto: acessos rápidos x acompanhamento ---------- */
.nav-projeto{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin:0 0 26px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.nav-item{
  padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:#fff;
  font-size:13.5px; font-weight:600; color:var(--body); cursor:pointer; transition:.15s;
}
.nav-item:hover{border-color:var(--ink)}
.nav-item.ativo{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---------- acessos rápidos ---------- */
.grid-atalhos{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.atalho{display:flex; flex-direction:column; gap:6px}
.atalho-btn{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:76px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; color:var(--ink); font-weight:600; font-size:14.5px; text-decoration:none;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.atalho-btn:hover{
  border-color:var(--red,#e11d2e); box-shadow:0 6px 18px rgba(0,0,0,.06); transform:translateY(-1px);
}
.atalho-acoes{display:flex; gap:6px; justify-content:center}


/* Botao de concluir tarefa em um clique (antes do nome da tarefa) */
.btn-concluir{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; padding:0; margin-right:6px; vertical-align:middle;
  border:1px solid var(--line); border-radius:50%; background:#fff;
  color:var(--muted); font-size:12px; line-height:1; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.btn-concluir:hover{ background:#0a7c42; border-color:#0a7c42; color:#fff; }
.btn-concluir[disabled]{ opacity:.5; cursor:default; }


/* telas bem estreitas: aperta o topo para nada quebrar nem sobrar rolagem lateral */
@media (max-width:400px){
  .topbar .wrap{gap:6px; padding-left:10px; padding-right:10px}
  .topbar .logo{height:20px}
  .topbar .btn{padding:5px 8px; font-size:11.5px}
  .user-chip .avatar{width:26px; height:26px; font-size:11px}
  .wrap{padding-left:10px; padding-right:10px}
  table.tabela td[data-rot]:before{flex:0 0 92px; font-size:11px}
}


/* linha em branco no fim da lista de tarefas: sempre pronta para a proxima */
tr.linha-nova{background:#FCFCFC}
tr.linha-nova td{border-bottom:0}
input.nova-inp{
  width:100%; min-width:0; padding:7px 10px; font-size:13px; font-family:inherit; color:var(--ink);
  border:1px dashed var(--line); border-radius:10px; background:#fff;
}
input.nova-inp::placeholder{color:var(--muted)}
input.nova-inp:focus{border-style:solid; border-color:var(--ink); outline:none}
input.nova-inp.gravando{opacity:.5}
tr.linha-nova select, tr.linha-nova input[type=date], tr.linha-nova textarea{opacity:.75}
tr.linha-nova:focus-within select, tr.linha-nova:focus-within input[type=date],
tr.linha-nova:focus-within textarea{opacity:1}


/* excluir tarefa: lixeira vermelha no fim da linha */
td.acao-linha{text-align:right; white-space:nowrap}
.btn-excluir{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; vertical-align:middle;
  border:1px solid transparent; border-radius:8px; background:transparent;
  color:var(--bad); line-height:1; cursor:pointer;
  opacity:.55; transition:opacity .15s, background .15s, border-color .15s;
}
tr:hover .btn-excluir, .btn-excluir:focus{opacity:1}
.btn-excluir:hover{background:var(--bad-soft); border-color:var(--bad-soft); opacity:1}
.btn-excluir[disabled]{opacity:.3; cursor:default}
@media (hover:none){ .btn-excluir{opacity:.9} }


/* ---- ajustes finais do mobile: datas centralizadas e lixeira no topo ---- */
@media (max-width:760px){
  /* o campo de data tem um bloco interno proprio; para o texto ficar no centro
     o icone do calendario sai do fluxo e a area de edicao ocupa a linha toda */
  table.tabela td>input[type=date]{
    position:relative; display:flex; align-items:center; justify-content:center;
    padding-left:10px; padding-right:10px; text-align:center;
  }
  table.tabela td>input[type=date]::-webkit-datetime-edit{
    flex:1 1 auto; width:100%; text-align:center; padding:0;
  }
  table.tabela td>input[type=date]::-webkit-datetime-edit-fields-wrapper{
    display:flex; width:100%; justify-content:center;
  }
  table.tabela td>input[type=date]::-webkit-calendar-picker-indicator{
    position:absolute; right:8px; top:50%; transform:translateY(-50%); margin:0; opacity:.5;
  }
  /* leitura (sem edicao): o texto da data tambem fica centralizado */
  table.tabela td[data-rot=Prazo], table.tabela td[data-rot="Conclusão"]{text-align:center}

  /* excluir tarefa: lixeira vermelha no canto superior direito do cartao */
  table.tabela tr{position:relative}
  table.tabela td.acao-linha{
    position:absolute; top:10px; right:10px; width:auto; padding:0; margin:0;
    display:flex; justify-content:flex-end;
  }
  table.tabela td.acao-linha .btn-excluir{opacity:1}
  table.tabela td.tarefa{padding-right:36px}
}



/* KPIs do report (status report e report do filtro): caixas iguais e conteudo
   centralizado na vertical. A classe generica .alerta trazia margin-bottom e
   border-radius menores, o que deixava o cartao vermelho menor que os outros. */
.rel-kpis > div{
  display:flex; flex-direction:column; justify-content:center;
  min-height:82px; margin:0; padding:16px 18px;
  border-radius:var(--r); font-size:inherit; color:inherit;
}
.rel-kpis > div.alerta{margin:0; padding:16px 18px; border-radius:var(--r); font-size:inherit}
.rel-kpis > div.alerta span{color:var(--muted)}
.rel-kpis > div.alerta strong{color:var(--ink)}

/* 3 ou 4 cartoes cabem na mesma linha (o status report tem 4; o report do filtro, 3) */
.rel-kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

/* Situação no report: "Atrasado" ganha caixa vermelha cheia para criar urgência.
   O print-color-adjust garante que os fundos (etiqueta, linha em alerta e cartões)
   saiam no PDF mesmo sem marcar "Gráficos de plano de fundo" na impressão. */
.relatorio .tag-atraso{
  display:inline-block; padding:3px 10px; border-radius:999px;
  background:var(--red,#E11D2E); color:#fff;
  font-size:11.5px; font-weight:700; line-height:1.4; white-space:nowrap;
}
.relatorio .tag-parada{
  display:inline-block; padding:3px 10px; border-radius:999px;
  background:var(--soft,#F4F4F4); border:1px solid var(--line);
  color:var(--muted); font-size:11.5px; font-weight:600; line-height:1.4; white-space:nowrap;
}
.relatorio, .relatorio *{ -webkit-print-color-adjust:exact; print-color-adjust:exact }


/* Formulario horizontal do apontamento de horas */
.grid-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:6px}
.grid-form .field{margin:0}
.grid-form select,.grid-form input{min-width:120px}


/* ========== horas: inputs, sub-abas, BI, matriz ========== */
.grid-form label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px}
.inp-num,.inp-data,.inp-txt,
.grid-form input[type=date],.grid-form input[type=number],.grid-form input[type=text]{
  height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font-size:14px;color:var(--ink);font-family:inherit;transition:.15s;
}
.inp-num:focus,.inp-data:focus,.inp-txt:focus,
.grid-form input:focus,.grid-form select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.grid-form .inp-num{min-width:0;width:88px;text-align:center}
.grid-form .inp-data{min-width:0;width:168px}
.grid-form select{height:40px;padding:8px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;font-size:14px;font-family:inherit}

.chips-sub{justify-content:flex-start}

.btn-cron{background:none;border:0;cursor:pointer;font-size:16px;line-height:1;padding:4px 7px;border-radius:8px;color:var(--muted);vertical-align:middle;margin-right:2px}
.btn-cron:hover{background:var(--red-soft);color:var(--red-dark)}

.bi-chart{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.bi-linha{display:flex;align-items:center;gap:12px}
.bi-rot{flex:0 0 96px;font-size:13px;font-weight:600;color:var(--body);text-align:right;word-break:break-word}
.bi-barra-ext{flex:1;background:var(--soft);border-radius:6px;overflow:hidden;min-width:60px}
.bi-barra{display:flex;height:22px;border-radius:6px;overflow:hidden;min-width:2px;background:#2980b9}
.bi-seg{display:block;height:100%}
.bi-val{flex:0 0 84px;font-size:13px;font-weight:700;color:var(--ink)}
.bi-legenda{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.bi-leg-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--body)}
.bi-leg-cor{width:12px;height:12px;border-radius:3px;display:inline-block;flex:0 0 auto}
.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:720px){.grid-2col{grid-template-columns:1fr}.bi-rot{flex-basis:70px}}

table.matriz td,table.matriz th{padding:8px 12px;white-space:nowrap}
table.matriz tbody td{border-bottom:1px solid var(--line)}
.mat-zero{color:var(--muted);opacity:.5}


/* ========== Projetos personalizados (IA) — visão do cliente ========== */
.pp-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px;margin:6px 0 22px}
.pp-box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);transition:.15s}
.pp-box:hover{border-color:var(--red-line);transform:translateY(-2px)}
.pp-box h3{margin:0 0 8px;font-size:16px;color:var(--ink)}
.pp-box p{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
.pp-cta{text-align:center;font-weight:700;color:var(--red-dark);background:var(--red-soft);border:1px solid var(--red-line);border-radius:var(--r);padding:16px 18px;font-size:15px}

/* matriz cresce com o conteúdo e rola dentro do container (sem estourar a página) */
table.matriz{table-layout:auto;width:auto;min-width:100%}

/* marcação de estimativa (planilha) */
.mat-est{outline:1.5px dashed rgba(0,0,0,.4);outline-offset:-2px}
.mat-e{font-size:10px;font-style:italic;opacity:.75}
.bi-seg-est{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 4px,rgba(255,255,255,0) 4px 8px)}

/* ícones (SVG line-art) das caixas de Projetos personalizados */
.pp-box .pp-ic{width:42px;height:42px;color:var(--red);margin-bottom:12px}
.pp-box .pp-ic svg{width:100%;height:100%;display:block}

/* horas já trabalhadas sob o cronômetro na linha da tarefa */
.cron-wrap{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle}
.cron-horas{font-size:10px;color:var(--muted);line-height:1.1;margin-top:1px;white-space:nowrap}
.cron-horas:empty{display:none}
/* CTA de Projetos personalizados centralizado como bloco */
.pp-cta{max-width:520px;margin:0 auto}

/* legenda de cores previsto x realizado */
.leg-cor{display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:middle}
.leg-real{background:rgba(192,57,43,.85)}
.leg-prev{background:rgba(41,128,185,.85)}

/* ícones nos botões-abas do painel */
.chip{display:inline-flex;align-items:center;gap:6px}
.ic-aba{width:15px;height:15px;flex:0 0 auto}

/* ícones nos botões-nav do acompanhamento */
.nav-item{display:inline-flex;align-items:center;gap:6px}
.ic-nav{width:15px;height:15px;flex:0 0 auto}

/* Lançar horas: caixas e botões centralizados */
.lancar-horas .card{max-width:760px;margin-left:auto;margin-right:auto}
.lancar-horas .card-corpo{text-align:center}
.lancar-horas .grid-form{justify-content:center;text-align:left}

/* barra de uso do limite de horas café */
.cafe-bar{height:10px;border-radius:6px;background:var(--soft);overflow:hidden;margin:8px 0}
.cafe-bar-in{height:100%;border-radius:6px;transition:width .2s}


/* agrupamento por projeto (Todas as tarefas) */
.grupo-proj td{background:var(--soft);color:var(--ink);font-weight:700;padding:9px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chk-agrupar{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--body);white-space:nowrap;cursor:pointer;user-select:none}
.chk-agrupar input{margin:0;accent-color:var(--red);cursor:pointer}

.nav-item .lbl-curto{display:none}

.exp-wrap{position:relative;display:inline-block}
.exp-menu{display:none;position:absolute;right:0;top:100%;z-index:60;background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.15);padding:6px;min-width:150px;flex-direction:column;gap:4px;margin-top:4px}
.exp-menu.aberto{display:flex}
.exp-menu .btn{width:100%;justify-content:flex-start;white-space:nowrap}

.nome-tarefa{outline:none;border-radius:6px;padding:1px 3px;margin:-1px -3px;cursor:text}
.nome-tarefa:hover{background:rgba(0,0,0,.04)}
.nome-tarefa:focus{background:#fff;box-shadow:0 0 0 2px rgba(224,0,0,.35)}

/* ajustes 2026-08-24 --------------------------------------------------- */
/* 1) campos de data dentro de modais seguem o mesmo visual dos demais */
.modal input[type="date"]{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;color:var(--ink);background:var(--white);outline:none;transition:border-color .15s, box-shadow .15s}
.modal input[type="date"]:focus{border-color:var(--brand)}
/* 2) badge longa da coluna Situacao quebra dentro da pilula em vez de vazar */
.tag.sit-larga{white-space:normal;text-align:center;line-height:1.25;max-width:100%}
/* 3) com 7 cards, o ultimo sozinho na linha fica centralizado */
.pp-grid .pp-box:last-child:nth-child(3n+1){grid-column:2}
/* observação multilinha (2026-08-28) ----------------------------------- */
textarea.obs-inp{
  display:block; width:100%; max-width:420px;
  border:1px solid transparent; background:transparent;
  padding:3px 6px; margin-left:-6px;
  font-family:inherit; font-size:12.5px; font-weight:400; line-height:1.45;
  color:var(--muted); border-radius:6px;
  resize:vertical; overflow:hidden; min-height:22px;
  white-space:pre-wrap; word-break:break-word; outline:none;
}
textarea.obs-inp:hover{border-color:var(--line); background:#fff}
textarea.obs-inp:focus{border-color:var(--red); background:#fff; color:var(--ink); box-shadow:0 0 0 3px rgba(255,4,12,.12)}
textarea.obs-inp.gravando{opacity:.5}
.obs-linha{align-items:flex-start}
/* responsável: nome inteiro, quebrando linha (2026-08-28) -------------- */
.resp-box{position:relative; display:block; width:100%}
.resp-box select{position:absolute; left:0; top:0; width:100%; height:100%;
  opacity:0; margin:0; padding:0; border:0; cursor:pointer; z-index:2}
.resp-box .resp-vis{display:block; padding:6px 20px; text-align:center;
  font-size:12px; font-weight:600; font-family:inherit; line-height:1.3;
  border:1px solid var(--line); border-radius:999px;
  color:var(--ink); background:#fff;
  white-space:normal; word-break:break-word;
  transition:border-color .15s, box-shadow .15s}
.resp-box::after{content:''; position:absolute; right:10px; top:50%; z-index:1;
  width:6px; height:6px; margin-top:-5px;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg); pointer-events:none}
.resp-box select:hover + .resp-vis{border-color:var(--ink)}
.resp-box select:focus + .resp-vis{border-color:var(--red); box-shadow:0 0 0 3px rgba(255,4,12,.12)}
.resp-box select.gravando + .resp-vis{opacity:.5}
/* campos da tarefa com o mesmo desenho (2026-08-28) --------------------- */
table.tabela td[data-rot="Responsável"],
table.tabela td[data-rot="Status"],
table.tabela td[data-rot="Prazo"],
table.tabela td[data-rot="Conclusão"],
table.tabela td[data-rot="Situação"]{vertical-align:middle}

table.tabela .resp-box .resp-vis,
table.tabela input.prazo-inp,
table.tabela input.conclusao-inp,
table.tabela td[data-rot="Situação"] > .tag{
  box-sizing:border-box; width:100%; min-height:34px;
  padding:6px 14px; border-radius:999px;
  font-size:12px; font-weight:600; font-family:inherit; line-height:1.3;
  text-align:center;
}
table.tabela .resp-box .resp-vis,
table.tabela td[data-rot="Situação"] > .tag{
  display:flex; align-items:center; justify-content:center;
  white-space:normal; word-break:break-word;
}
table.tabela td[data-rot="Situação"] > .tag{border:1px solid transparent}
table.tabela input.prazo-inp,
table.tabela input.conclusao-inp{display:block; text-align:center}
table.tabela .resp-box{min-height:34px}
/* responsável, status, prazo e conclusão sem contorno (2026-08-28) ------ */
table.tabela .resp-box .resp-vis,
table.tabela input.prazo-inp,
table.tabela input.conclusao-inp{
  border-color:transparent; background:transparent;
}
table.tabela input.prazo-inp,
table.tabela input.conclusao-inp{padding:6px 4px}
table.tabela .resp-box select:hover + .resp-vis,
table.tabela input.prazo-inp:hover,
table.tabela input.conclusao-inp:hover{background:var(--soft); border-color:transparent}
table.tabela .resp-box select:focus + .resp-vis,
table.tabela input.prazo-inp:focus,
table.tabela input.conclusao-inp:focus{background:#fff; border-color:var(--red); box-shadow:0 0 0 3px rgba(255,4,12,.12)}
/* setinha discreta e mais folga pro texto (2026-08-28) ------------------ */
table.tabela .resp-box .resp-vis{padding:6px 10px}
table.tabela .resp-box::after{right:4px; width:5px; height:5px; margin-top:-4px;
  border-right-width:1.4px; border-bottom-width:1.4px; opacity:.55}
/* situação: sempre no tamanho padrão, não acompanha a altura da linha (2026-08-28) */
table.tabela td[data-rot="Situação"]{vertical-align:middle}
table.tabela td[data-rot="Situação"] > .tag{
  height:34px; padding:6px 10px; white-space:nowrap;
}
table.tabela td[data-rot="Situação"] > .tag.sit-larga{
  height:auto; min-height:34px; white-space:normal; word-break:break-word;
}
/* filtros da consolidada dentro de um botao (2026-08-28) --------------- */
.filtros-wrap{position:relative; display:inline-block}
#c_filtros.tem-filtro{border-color:var(--red); color:var(--red)}
.filtros-n{display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; margin-left:7px; padding:0 5px;
  border-radius:999px; background:var(--red); color:#fff;
  font-size:11px; font-weight:700; line-height:1}
.filtros-pop{position:absolute; z-index:60; top:calc(100% + 8px); left:0;
  display:flex; flex-direction:column; gap:10px;
  min-width:270px; padding:14px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.14)}
.filtros-pop select{width:100%; min-width:0}
@media (max-width:760px){
  .filtros-pop{left:auto; right:0; min-width:min(88vw,320px)}
}
/* o atributo hidden precisa vencer o display:flex acima (2026-08-28) */
.filtros-pop[hidden], .filtros-n[hidden]{display:none !important}
/* filtro de selecao multipla: botao + lista com caixinhas (2026-09-01) */
.msel{position:relative;display:inline-block}
.msel-btn{display:inline-flex;align-items:center;gap:8px;max-width:230px;padding:7px 12px;
  border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);
  font-family:inherit;font-size:13px;line-height:1.2;cursor:pointer}
.msel-btn:hover{border-color:var(--ink)}
.msel-btn.tem{border-color:var(--red);color:var(--red)}
.msel-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msel-btn::after{content:'';flex:0 0 auto;width:5px;height:5px;margin-top:-3px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg)}
.msel-pop{position:absolute;z-index:70;top:calc(100% + 6px);left:0;display:flex;flex-direction:column;
  min-width:220px;max-height:300px;overflow:auto;padding:8px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.14)}
.msel-pop label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
  font-size:13px;color:var(--ink);white-space:nowrap;cursor:pointer}
.msel-pop label:hover{background:var(--soft)}
.msel-pop input{margin:0;cursor:pointer}
.msel-todos{margin-bottom:4px;padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:600}
.msel-pop[hidden]{display:none !important}
@media (max-width:760px){ .msel-pop{left:auto;right:0;min-width:min(80vw,260px)} }

/* === Kanban do acompanhamento e do painel (2026-10) === */
.kb-titulo{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.kb-visoes{display:flex;flex-wrap:wrap;gap:6px}
.kb-vis{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font:inherit;font-size:13px;font-weight:600;line-height:1.2;color:var(--body);cursor:pointer;transition:.15s}
.kb-vis:hover{border-color:var(--ink)}
.kb-vis.ativo{background:var(--ink);color:#fff;border-color:var(--ink)}
.filtros .kb-visoes{margin-right:6px}
.kb-wrap{padding-top:2px}
.kb-legenda{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:2px 0 10px;text-align:left}
.kb-legenda svg{flex:0 0 auto}
.kb-nav{display:flex;align-items:center;gap:10px;margin:0 2px 10px}
.kb-nav[hidden]{display:none}
.kb-seta{flex:0 0 auto;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.15s}
.kb-seta:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}
.kb-seta:disabled{opacity:.35;cursor:default}
.kb-trilho{position:relative;flex:1;min-width:60px;height:12px;border-radius:999px;background:#E6E6E6;cursor:pointer;touch-action:none}
.kb-polegar{position:absolute;top:0;left:0;height:12px;border-radius:999px;background:#8E8E93;cursor:grab;touch-action:none;transition:background .15s}
.kb-trilho:hover .kb-polegar{background:#5C5C61}
.kb-polegar.kb-pegando{background:var(--ink);cursor:grabbing}
.kb-board{display:flex;gap:12px;align-items:stretch;overflow-x:auto;padding:2px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.kb-board::-webkit-scrollbar{display:none}
.kb-col{flex:0 0 268px;max-width:84%;box-sizing:border-box;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;scroll-snap-align:start;min-height:120px;transition:background .12s}
.kb-col.kb-alvo{background:var(--red-soft,#FFF1F1);border:2px dashed var(--red);padding:9px}
.kb-col-topo{display:flex;align-items:center;gap:8px;padding:4px 4px 6px;min-height:30px}
.kb-col-topo h3{margin:0;font-family:inherit;font-size:13.5px;line-height:1.25;font-weight:700;color:var(--ink);letter-spacing:0;text-align:left}
.kb-n{font-size:12px;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.kb-esp{flex:1}
.kb-col-atr{font-size:11.5px;font-weight:700;color:#C10209;white-space:nowrap}
.kb-lista{display:flex;flex-direction:column;gap:8px;min-height:40px}
.kb-vazio{padding:18px 10px;text-align:center;font-size:12.5px;color:var(--muted);border:1px dashed #D9D9D9;border-radius:10px;background:#fff}
.kb-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:9px;text-align:left;transition:opacity .15s}
.kb-card.kb-arrastavel{cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.kb-card.kb-arrastavel:hover{border-color:#D4D4D8}
.kb-card.kb-atrasada{background:var(--red-soft,#FFF1F1);border-color:rgba(255,4,12,.35)}
.kb-faixa{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#C10209}
.kb-faixa-txt{flex:1}
.kb-proj{font-size:11px;font-weight:800;color:var(--red-dark,#D6030A);letter-spacing:.04em}
.kb-tit{font-size:13.5px;line-height:1.35;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.kb-linha{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.kb-pessoa{display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;color:var(--body)}
.kb-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-av{width:22px;height:22px;border-radius:50%;background:var(--red-soft,#FFF1F1);color:var(--red);border:1px solid var(--red-line,#FFD3D5);display:grid;place-items:center;font-size:9px;font-weight:700;flex:0 0 auto}
.kb-av-g{width:28px;height:28px;font-size:11px}
.kb-st{align-self:flex-start;font-size:11.5px;font-weight:600;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.kb-atrasada .kb-st{background:#fff;border-color:var(--red-line,#FFD3D5)}
.kb-data{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap}
.kb-data-atr{color:#C10209;font-weight:600}
.kb-card .tag{font-size:11.5px}
.kb-origem{opacity:.4}
.kb-salvando{opacity:.6}
.kb-fantasma{position:fixed;z-index:9999;pointer-events:none;margin:0;transform:rotate(2deg);box-shadow:0 14px 34px rgba(0,0,0,.18);opacity:.96}
body.kb-arrastando,body.kb-arrastando *{cursor:grabbing !important}
@media (max-width:640px){.kb-col{flex-basis:84%}.kb-board{scroll-snap-type:x proximity}}
/* No celular e em telas de toque o dedo já rola o quadro: a barra de cima não aparece. */
@media (max-width:640px),(hover:none) and (pointer:coarse){.kb-nav{display:none !important}}

/* === Classificar por prazo no padrão dos filtros (2026-10-13) === */
.filtros-pop select.sel-pill{-webkit-appearance:none;appearance:none;align-self:flex-start;width:auto;min-width:0;max-width:230px;height:auto;margin:0;padding:7px 28px 7px 12px;border:1px solid var(--line);border-radius:999px;field-sizing:content;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%237A7A7A' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--ink);font-family:inherit;font-size:13px;line-height:1.2;box-shadow:none;cursor:pointer}
.filtros-pop select.sel-pill:hover{border-color:var(--ink)}
.filtros-pop select.sel-pill.tem{border-color:var(--red);color:var(--red)}

/* === Apps de clientes na aba Projetos personalizados (IA) (2026-10) === */
.apps-bloco{margin:0 0 8px}
.apps-bloco .alerta{margin-bottom:16px}
.apps-rot{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:34px}
.app-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:14px;text-align:left;box-shadow:0 1px 2px rgba(24,24,27,.04)}
.app-card-topo{display:flex;align-items:center;gap:12px}
.app-ic{width:44px;height:44px;border-radius:12px;background:var(--red-soft,#FFF1F1);color:var(--red-dark,#D6030A);display:grid;place-items:center;flex:0 0 auto}
.app-ic svg{width:22px;height:22px}
.app-card h3{margin:0;font-size:17px;line-height:1.25;color:var(--ink)}
.app-meta{font-size:12.5px;color:var(--muted)}
.app-card p{margin:0;font-size:14px;color:var(--body);flex:1}
.apps-sep{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.apps-sep span{flex:1;height:1px;background:var(--line)}
.apps-sep h2{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.com-app>:not(.app-aberto){display:none !important}
.app-topo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:16px;text-align:left}
.app-topo h1{margin:0;font-size:24px;line-height:1.2}
.app-voltar{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.app-voltar:hover{border-color:var(--ink)}
.app-voltar svg{width:16px;height:16px}
.app-frame{display:block;width:100%;height:calc(100vh - 200px);min-height:640px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
body.app-largo .pagina>.wrap{max-width:none}
@media (max-width:640px){.apps-grid{grid-template-columns:1fr}.apps-sep h2{white-space:normal;text-align:center}.app-topo h1{font-size:20px}.app-frame{height:calc(100vh - 160px);min-height:520px}}