:root{
  --azul:#2F6FED; --azul-escuro:#1B4FC4; --azul-claro:#EBF2FF;
  --azul-900:#032C6B; --azul-800:#0B3E8C; --azul-100:#EBF2FF;
  --verde:#16A34A; --amarelo:#D97706; --vermelho:#DC2626; --roxo:#7C6FE0;
  --cinza-900:#1F2937; --cinza-800:#1F2937; --cinza-700:#475569; --cinza-500:#64748B;
  --cinza-300:#D6DEE7; --cinza-200:#E7ECF2; --cinza-100:#F3F6F9; --cinza-50:#FAFBFD;
  --branco:#fff;
  --superficie:#fff;          /* fundo de cartão, modal, tabela */
  --superficie-2:#FAFBFD;     /* superfície alternativa (cabeçalho de tabela, caixas) */
  --borda:#E7ECF2;
  --brilho-hover:0 10px 26px rgba(47,111,237,.14);
  /* fundos de aviso/realce — trocam de valor no modo escuro */
  --tint-vermelho:#FEF2F2; --tint-vermelho-2:#FEE2E2;
  --tint-azul:#EFF6FF; --tint-verde:#F0FDF4; --tint-amarelo:#FEF3C7; --tint-cinza:#EEF1F5;
  --radius:14px; --radius-sm:10px;
  --sombra:0 1px 2px rgba(15,23,42,.04), 0 2px 8px rgba(15,23,42,.05);
  --sombra-lg:0 16px 36px rgba(15,23,42,.12);
}

/* =====================================================================
   MODO ESCURO
   As cores abaixo são os padrões; Configurações → Aparência sobrescreve
   cada uma delas pelo que o administrador escolher.
   ===================================================================== */
html[data-tema="escuro"]{
  --superficie:#112B45;       /* cartões */
  --superficie-2:#0D2239;     /* caixas e cabeçalhos dentro do cartão */
  --borda:#214564;
  --cinza-900:#EAF3FC; --cinza-800:#EAF3FC; --cinza-700:#CBE0F4; --cinza-500:#95BBDE;
  --cinza-300:#2C557C; --cinza-200:#214564; --cinza-100:#16314C; --cinza-50:#0D2239;
  --branco:#112B45;
  --azul-claro:#17344F;
  --azul-escuro:#8CC4FF;
  --sombra:0 1px 2px rgba(0,0,0,.30), 0 2px 10px rgba(0,0,0,.26);
  --sombra-lg:0 18px 44px rgba(0,0,0,.50);
  --brilho-hover:0 0 0 1px rgba(99,179,255,.55), 0 12px 34px rgba(37,120,214,.38);
  --tint-vermelho:#3A1B20; --tint-vermelho-2:#4A2026;
  --tint-azul:#13304C; --tint-verde:#133A2A; --tint-amarelo:#3C3015; --tint-cinza:#17314B;
  color-scheme:dark;
}
html[data-tema="escuro"] body{ background:var(--fundo-pagina, #081A2D); color:var(--cinza-800); }

/* o brilho azul ao passar o mouse nos cartões */
html[data-tema="escuro"] :is(.painel-bloco, .crm-painel-bloco, .stat-card, .fluxo-card, .arq-cartao, .arquivo-item, .card-item, .painel-atalho, .crm-card, .crm-item, .habito-card, .pt-bloco, .aba-inicio-item, .doc-lista-item, .email-item, .rk-faltam-card){
  transition:box-shadow .18s ease, border-color .18s ease;
}
html[data-tema="escuro"] :is(.painel-bloco, .crm-painel-bloco, .stat-card, .fluxo-card, .arq-cartao, .arquivo-item, .card-item, .painel-atalho, .crm-card, .crm-item, .habito-card, .pt-bloco, .aba-inicio-item, .doc-lista-item, .email-item, .rk-faltam-card):hover{
  border-color:var(--realce-escuro, #63B3FF);
  box-shadow:var(--brilho-hover);
}

/* campos de formulário: fundo escuro e texto claro, senão some tudo */
html[data-tema="escuro"] input, html[data-tema="escuro"] select,
html[data-tema="escuro"] textarea{
  background:var(--superficie-2); color:var(--cinza-800); border-color:var(--borda);
}
html[data-tema="escuro"] input::placeholder, html[data-tema="escuro"] textarea::placeholder{ color:var(--cinza-500); }
html[data-tema="escuro"] input[type=color]{ background:var(--superficie-2); }
html[data-tema="escuro"] .btn-secundario{ background:var(--superficie-2); color:var(--cinza-700); border-color:var(--borda); }
html[data-tema="escuro"] .btn-secundario:hover{ background:var(--cinza-100); }
html[data-tema="escuro"] .tabela th{ background:var(--superficie-2); color:var(--cinza-500); }
html[data-tema="escuro"] .tabela tr:hover td{ background:var(--cinza-100); }
html[data-tema="escuro"] .modal-box{ background:var(--superficie); }
html[data-tema="escuro"] .modal-overlay{ background:rgba(3,12,22,.72); }
/* imagens e logos claras não ficam estourando no fundo escuro */
html[data-tema="escuro"] .vazio{ color:var(--cinza-500); }
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:Arial, Helvetica, sans-serif;
  background:var(--cinza-50); color:var(--cinza-800); font-size:14px; line-height:1.5;
}
a{text-decoration:none; color:inherit;}
button{font-family:inherit; cursor:pointer;}
input,textarea,select{font-family:inherit;}
.icone-svg{display:inline-block; vertical-align:middle; flex-shrink:0;}

/* ---------- LOGIN ---------- */
.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#032C6B 0%, #0B4A9C 100%); padding:20px;
}
.login-box{
  background:var(--branco); border-radius:16px; padding:44px 40px; width:380px; max-width:100%;
  box-shadow:0 20px 50px rgba(3,44,107,.25);
}
.login-logo{text-align:center; margin-bottom:30px;}
.login-logo .icone{
  width:52px; height:52px; border-radius:13px; background:linear-gradient(160deg,#032C6B,#0B4A9C);
  color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.login-logo h1{font-size:19px; color:var(--cinza-900); font-weight:700;}
/* Logo enviada em Configurações → Sistema: entra no lugar do ícone padrão */
.login-logo .icone.com-logo, .sidebar-logo .icone.com-logo{background:var(--superficie) !important; padding:5px; overflow:hidden;}
.login-logo .icone.com-logo img, .sidebar-logo .icone.com-logo img{width:100%; height:100%; object-fit:contain; display:block;}
.login-logo .icone.com-logo{width:74px; height:74px; border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.08);}
.sidebar-logo .icone.com-logo{width:38px; height:38px; border-radius:10px; flex-shrink:0;}
.login-logo p{font-size:12.5px; color:var(--cinza-500); margin-top:3px;}
.campo{margin-bottom:16px;}
.campo label{display:block; font-size:12.5px; font-weight:600; color:var(--cinza-700); margin-bottom:6px;}
.campo input, .campo textarea, .campo select{
  width:100%; padding:10px 12px; border:1.5px solid var(--cinza-200); border-radius:var(--radius-sm);
  font-size:14px; transition:.15s; font-family:inherit; color:var(--cinza-900); background:var(--superficie);
}
.campo input:hover, .campo textarea:hover, .campo select:hover{border-color:var(--cinza-300);}
.campo input:focus, .campo textarea:focus, .campo select:focus{outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(47,111,237,.14);}
.campo select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7A8F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:32px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 18px; border-radius:var(--radius-sm); border:none; font-weight:600; font-size:13.5px;
  white-space:nowrap; transition:.15s;
}
.btn-full{width:100%;}
.btn-primario{background:linear-gradient(135deg, #3E7EFA 0%, #2F6FED 100%); color:#fff; box-shadow:0 2px 6px rgba(47,111,237,.28);}
.btn-primario:hover{background:linear-gradient(135deg, #4C89FF 0%, #3B7BF5 100%);}
.btn-secundario{background:var(--cinza-100); color:var(--cinza-700);}
.btn-secundario:hover{background:var(--cinza-200);}
.btn-perigo{background:var(--tint-vermelho-2); color:var(--vermelho);}
.btn-sucesso{background:#DCF5E7; color:var(--verde);}
.btn-info{background:var(--azul-claro); color:var(--azul-escuro);}
.btn-sm{padding:6px 12px; font-size:12px; width:auto;}
.btn-perigo:hover{background:#fecaca;}
.erro-login{background:var(--tint-vermelho-2); color:var(--vermelho); padding:10px 12px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:16px;}
.login-demo{margin-top:20px; padding:10px 12px; background:var(--cinza-50); border-radius:8px; font-size:11.5px; color:var(--cinza-500); text-align:center;}

/* ---------- LAYOUT ---------- */
.app{display:flex; min-height:100vh;}
.sidebar{
  width:230px; background:linear-gradient(180deg, #032C6B 0%, #0B4A9C 100%); color:#fff; flex-shrink:0;
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; transition:width .18s;
}
.sidebar.recolhida{width:68px;}
.sidebar.recolhida .sidebar-logo span, .sidebar.recolhida .sidebar-nav a span:not(.icone),
.sidebar.recolhida .sidebar-logo div > strong, .sidebar.recolhida .sidebar-footer{display:none;}
.sidebar.recolhida .sidebar-logo{justify-content:center;}
.sidebar.recolhida .sidebar-nav a{justify-content:center; padding:10px;}
.sidebar-recolher-btn{
  background:rgba(255,255,255,.08); border:none; color:#fff; width:100%; padding:10px;
  display:flex; align-items:center; justify-content:center; margin-top:auto; flex-shrink:0;
}
.sidebar-recolher-btn:hover{background:rgba(255,255,255,.15);}
.sidebar.recolhida .sidebar-recolher-btn svg{transform:rotate(180deg);}
.sidebar-logo{padding:18px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.08);}
.sidebar-logo .icone{
  width:34px; height:34px; flex-shrink:0; border-radius:9px; background:rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center;
}
.sidebar-logo strong{font-size:14.5px;}
.sidebar-logo span{display:block; font-size:10.5px; color:#B8C7E0;}
.sidebar-nav{flex:1; padding:14px 10px; overflow-y:auto;}
.sidebar-nav a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm);
  color:#cbd5e1; font-size:13.5px; font-weight:500; margin-bottom:2px; transition:.12s;
}
.sidebar-nav a:hover{background:rgba(255,255,255,.06); color:#fff;}
.sidebar-nav a.ativo{background:var(--azul); color:#fff;}
.sidebar-nav .icone{width:18px; text-align:center; font-size:15px;}

.sidebar-grupo{margin-top:6px;}
.sidebar-grupo-titulo{
  width:100%; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm);
  color:#cbd5e1; font-size:13.5px; font-weight:500; background:none; border:none; text-align:left; transition:.12s;
}
.sidebar-grupo-titulo:hover{background:rgba(255,255,255,.06); color:#fff;}
.sidebar-grupo-titulo .seta{margin-left:auto; font-size:10px; transition:transform .15s;}
.sidebar-grupo.aberto .sidebar-grupo-titulo .seta{transform:rotate(180deg);}
.sidebar-submenu{display:none; padding-left:16px; margin-top:2px;}
.sidebar-grupo.aberto .sidebar-submenu{display:block;}
.sidebar-sublink{
  display:block; padding:8px 12px; border-radius:var(--radius-sm); color:#94a3b8; font-size:13px;
  border-left:2px solid rgba(255,255,255,.12); margin-bottom:2px;
}
.sidebar-sublink.ativo{color:#fff; background:rgba(255,255,255,.08); border-left-color:var(--azul); font-weight:600;}
.sidebar-sublink:hover{color:#fff; background:rgba(255,255,255,.06);}
.sidebar.recolhida .sidebar-grupo{display:none;}
.sidebar-footer{padding:14px 16px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#94a3b8;}
.sidebar-usuario{display:flex; align-items:center; gap:9px; padding:12px 16px; border-top:1px solid rgba(255,255,255,.08);}
.sidebar-usuario-info{overflow:hidden;}
.sidebar-usuario-info strong{display:block; font-size:12.5px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sidebar-usuario-info span{display:block; font-size:10.5px; color:#B8C7E0;}
.sidebar.recolhida .sidebar-usuario-info{display:none;}

.main{margin-left:230px; flex:1; display:flex; flex-direction:column; min-width:0; transition:margin-left .18s;}
.sidebar.recolhida ~ .main, .sidebar.recolhida + .main{margin-left:68px;}
.topbar{
  background:var(--superficie); border-bottom:1px solid var(--cinza-200); padding:14px 26px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20;
}
.topbar h1{font-size:18px; color:var(--cinza-900);}
.topbar-right{display:flex; align-items:center; gap:16px;}
.topbar-user{display:flex; align-items:center; gap:10px;}
.avatar{
  width:32px; height:32px; border-radius:50%; background:var(--azul); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;
}
.conteudo{padding:26px;}

.notif-btn{position:relative; font-size:18px; background:none; border:none; color:var(--cinza-700);}
.notif-badge{
  position:absolute; top:-4px; right:-4px; background:var(--vermelho); color:#fff;
  font-size:10px; font-weight:700; border-radius:10px; padding:1px 5px; min-width:16px; text-align:center;
}

/* ---------- CARDS DE ESTATÍSTICA (Painel) ---------- */
.grid-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px;}
.stat-card{background:var(--superficie); border-radius:var(--radius); padding:18px; box-shadow:var(--sombra); border:1px solid var(--cinza-200);}
.stat-card .num{font-size:26px; font-weight:700; color:var(--cinza-900);}
.stat-card .label{font-size:12.5px; color:var(--cinza-500); margin-top:2px;}
.stat-card .icone{font-size:20px; margin-bottom:8px;}

.painel-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:20px;}
@media(max-width:1000px){.painel-grid{grid-template-columns:1fr;}}
.painel-bloco{background:var(--superficie); border-radius:var(--radius); padding:20px; box-shadow:var(--sombra); border:1px solid var(--cinza-200); margin-bottom:20px;}
.painel-bloco h2{font-size:14.5px; margin-bottom:14px; color:var(--cinza-900);}

/* ---------- FLUXOS (lista de quadros) ---------- */
.grid-fluxos{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px;}
.fluxo-card{background:var(--superficie); border-radius:var(--radius); padding:18px; box-shadow:var(--sombra); border:1px solid var(--cinza-200); border-top:4px solid var(--azul); transition:.15s;}
.fluxo-card:hover{box-shadow:var(--sombra-lg); transform:translateY(-2px);}
.fluxo-card .topo{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.fluxo-card .topo .icone{font-size:22px;}
.fluxo-card h3{font-size:15px; color:var(--cinza-900);}
.fluxo-card p{font-size:12.5px; color:var(--cinza-500); margin-top:4px; min-height:32px;}
.fluxo-card .meta{font-size:11.5px; color:var(--cinza-500); margin-top:10px; display:flex; justify-content:space-between;}

/* ---------- QUADRO KANBAN ---------- */
.board-topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.board-wrap{display:flex; gap:14px; overflow-x:auto; padding-bottom:16px; align-items:flex-start;}
.coluna{background:var(--cinza-100); border-radius:var(--radius); width:280px; flex-shrink:0; display:flex; flex-direction:column; max-height:calc(100vh - 190px);}
.coluna-header{padding:12px 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--cinza-200);}
.coluna-header .titulo{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px;}
.coluna-dot{width:9px; height:9px; border-radius:50%;}
.coluna-count{background:var(--cinza-200); color:var(--cinza-700); font-size:11px; font-weight:700; padding:1px 7px; border-radius:10px;}
.coluna-cards{padding:10px; overflow-y:auto; flex:1;}
.coluna-add{padding:10px 14px; font-size:12.5px; color:var(--cinza-500); border-top:1px solid var(--cinza-200);}
.coluna-add button{background:none; border:none; color:var(--cinza-500); font-size:12.5px; width:100%; text-align:left; padding:4px 0;}
.coluna-add button:hover{color:var(--azul);}

.card-item{
  background:var(--superficie); border-radius:8px; padding:12px; margin-bottom:8px; box-shadow:var(--sombra);
  border:1px solid var(--cinza-200); cursor:grab; transition:.1s;
}
.card-item:hover{box-shadow:var(--sombra-lg);}
.card-item.arrastando{opacity:.4;}
.card-item .tags-linha{display:flex; gap:5px; margin-bottom:6px; flex-wrap:wrap;}
.tag-pill{font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; color:#fff;}
.card-item .titulo{font-size:13px; font-weight:600; color:var(--cinza-900); margin-bottom:6px;}
.card-item .rodape{display:flex; align-items:center; justify-content:space-between; margin-top:8px;}
.card-item .prazo{font-size:11px; color:var(--cinza-500); display:flex; align-items:center; gap:4px;}
.card-item .prazo.atrasado{color:var(--vermelho); font-weight:600;}
.avatares-mini{display:flex;}
.avatar-mini{
  width:22px; height:22px; border-radius:50%; background:var(--azul); color:#fff; font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff; margin-left:-6px;
}
.avatar-mini:first-child{margin-left:0;}
.badge-prioridade{font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px;}
.prio-baixa{background:#e0f2fe; color:#0369a1;}
.prio-media{background:var(--tint-amarelo); color:#92400e;}
.prio-alta{background:#fed7aa; color:#c2410c;}
.prio-urgente{background:var(--tint-vermelho-2); color:#b91c1c;}

.coluna-nova{width:260px; flex-shrink:0;}
.coluna-nova button{
  width:100%; padding:12px; border:2px dashed var(--cinza-300); border-radius:var(--radius);
  background:none; color:var(--cinza-500); font-size:13px; font-weight:500;
}
.coluna-nova button:hover{border-color:var(--azul); color:var(--azul);}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:flex-start;
  justify-content:center; z-index:100; padding:40px 16px; overflow-y:auto;
}
.modal-overlay.aberto{display:flex;}
.modal-box{background:var(--superficie); border-radius:14px; width:700px; max-width:96vw; box-shadow:var(--sombra-lg);}
.modal-box.pequeno{width:440px;}
.modal-header{padding:20px 26px; border-bottom:1px solid var(--cinza-200); display:flex; align-items:center; justify-content:space-between;}
.modal-header h2{font-size:17px; font-weight:700;}
.modal-fechar{background:none; border:none; font-size:20px; color:var(--cinza-500); line-height:1; padding:6px; border-radius:6px;}
.modal-fechar:hover{background:var(--cinza-100); color:var(--cinza-800);}
.modal-body{padding:24px 26px; max-height:70vh; overflow-y:auto;}
.modal-footer{padding:16px 26px; border-top:1px solid var(--cinza-200); display:flex; justify-content:flex-end; gap:10px;}

.card-modal-grid{display:grid; grid-template-columns:1fr 230px; gap:30px;}
.secao{margin-bottom:24px;}
.secao h3{font-size:11.5px; font-weight:700; color:var(--cinza-500); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px;}
.checklist-item{display:flex; align-items:center; gap:8px; padding:8px 4px; font-size:13px; border-bottom:1px solid var(--cinza-100);}
.checklist-item:last-child{border-bottom:none;}
.checklist-item input[type=checkbox]{width:16px; height:16px;}
.checklist-item.feito span{text-decoration:line-through; color:var(--cinza-500);}
.comentario{padding:10px 0; border-bottom:1px solid var(--cinza-100);}
.comentario .cab{display:flex; justify-content:space-between; font-size:11.5px; color:var(--cinza-500); margin-bottom:3px;}
.comentario .txt{font-size:13px;}
.progresso-barra{height:6px; background:var(--cinza-200); border-radius:4px; overflow:hidden; margin-top:6px;}
.progresso-barra div{height:100%; background:var(--verde);}

/* ---------- TABELAS / LISTAS ---------- */
.tabela{width:100%; background:var(--superficie); border-radius:var(--radius); overflow:hidden; box-shadow:var(--sombra); border:1px solid var(--cinza-200); border-collapse:collapse;}
.tabela th{background:var(--cinza-50); text-align:left; padding:12px 16px; font-size:12px; color:var(--cinza-500); text-transform:uppercase; letter-spacing:.02em; border-bottom:1px solid var(--cinza-200);}
.tabela td{padding:12px 16px; font-size:13.5px; border-bottom:1px solid var(--cinza-100);}
.tabela tr:last-child td{border-bottom:none;}
.tabela tr:hover td{background:var(--cinza-50);}

.pagina-topo{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.pagina-topo h1{font-size:19px; color:var(--cinza-900);}
.pagina-topo p{font-size:13px; color:var(--cinza-500); margin-top:2px;}

.lista-arquivos{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px;}
.arquivo-item{background:var(--superficie); border:1px solid var(--cinza-200); border-radius:var(--radius); padding:16px; text-align:center; box-shadow:var(--sombra);}
.arquivo-item .icone{font-size:30px; margin-bottom:8px;}
.arquivo-item .nome{font-size:12px; font-weight:600; word-break:break-word;}
.arquivo-item .tam{font-size:11px; color:var(--cinza-500); margin-top:3px;}
.arq-cartao{position:relative;}
.arq-cartao .arquivo-item{display:block; height:100%;}
.arq-acoes{position:absolute; top:6px; right:6px; display:flex; gap:4px; opacity:0; transition:opacity .12s;}
.arq-cartao:hover .arq-acoes, .arq-cartao:focus-within .arq-acoes{opacity:1;}
.arq-acoes button{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0;
  border:1px solid var(--cinza-200); background:var(--superficie); border-radius:6px; color:var(--cinza-500); cursor:pointer;}
.arq-acoes button:hover{color:var(--azul); border-color:var(--azul);}
.arq-acoes button:last-child:hover{color:#DC2626; border-color:#DC2626;}
@media (hover:none){ .arq-acoes{opacity:1;} }

.timeline-item{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--cinza-100);}
.timeline-item .avatar{width:30px; height:30px; font-size:12px;}
.timeline-item .txt{font-size:13px;}
.timeline-item .quando{font-size:11.5px; color:var(--cinza-500); margin-top:2px;}

.vazio{text-align:center; padding:40px 20px; color:var(--cinza-500); font-size:13.5px;}
.vazio .icone{font-size:34px; margin-bottom:10px; opacity:.5;}

.toast{
  position:fixed; bottom:20px; right:20px; background:var(--cinza-900); color:#fff; padding:12px 18px;
  border-radius:var(--radius-sm); font-size:13px; box-shadow:var(--sombra-lg); z-index:200; opacity:0;
  transform:translateY(10px); transition:.2s;
}
.toast.mostrar{opacity:1; transform:translateY(0);}

/* ---------- BOTÃO + NOVO E ABAS DO MODAL ---------- */
.btn-novo{
  display:flex; align-items:center; gap:6px; background:linear-gradient(135deg, #3E7EFA 0%, #2F6FED 100%); color:#fff;
  border:none; padding:8px 14px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; box-shadow:0 2px 6px rgba(47,111,237,.28);
}
.btn-novo:hover{background:linear-gradient(135deg, #4C89FF 0%, #3B7BF5 100%);}
.icone-topo-btn{
  position:relative; background:none; border:none; color:var(--cinza-700); padding:6px;
  border-radius:var(--radius-sm); display:flex; align-items:center;
}
.icone-topo-btn:hover{background:var(--cinza-100); color:var(--azul);}

.modal-abas{display:flex; border-bottom:1px solid var(--cinza-200); padding:0 22px;}
.modal-aba{
  padding:14px 16px; font-size:13.5px; font-weight:600; color:var(--cinza-500); border:none; background:none;
  border-bottom:2.5px solid transparent; display:flex; align-items:center; gap:7px;
}
.modal-aba.ativa{color:var(--azul); border-bottom-color:var(--azul);}
.modal-aba:disabled{color:var(--cinza-300); cursor:not-allowed;}
.modal-aba .tag-em-breve{font-size:9.5px; font-weight:700; background:var(--cinza-100); color:var(--cinza-500); padding:1px 6px; border-radius:8px; text-transform:uppercase;}

/* ---------- CHAT INTERNO ---------- */
/* ---------- CHAT INTERNO (redesenhado) ---------- */
.chat-painel{position:fixed; top:0; right:0; bottom:0; width:420px; max-width:100%; background:var(--superficie); box-shadow:var(--sombra-lg); z-index:150; display:none; flex-direction:column; border-left:1px solid var(--cinza-200);}
.chat-painel.aberto{display:flex;}
.chat-painel.expandido{width:min(820px, 100%);}
.chat-topo{padding:14px 16px; border-bottom:1px solid var(--cinza-200); display:flex; align-items:center; justify-content:space-between; flex-shrink:0;}
.chat-topo h3{font-size:15px; display:flex; align-items:center; gap:8px; color:var(--cinza-900);}
.chat-corpo{flex:1; display:flex; overflow:hidden; min-height:0; position:relative;}

/* modo compacto (padrão): uma tela por vez — lista OU conversa */
.chat-lista-usuarios{width:100%; display:flex; flex-direction:column; min-height:0; background:var(--superficie);}
.chat-conversa{flex:1; display:none; flex-direction:column; min-width:0; min-height:0; background:var(--cinza-50);}
.chat-painel.em-conversa .chat-lista-usuarios{display:none;}
.chat-painel.em-conversa .chat-conversa{display:flex;}
/* modo expandido: lista + conversa lado a lado */
.chat-painel.expandido .chat-lista-usuarios{display:flex; width:260px; flex-shrink:0; border-right:1px solid var(--cinza-200);}
.chat-painel.expandido .chat-conversa{display:flex;}
.chat-painel.expandido .chat-voltar{display:none;}

.chat-busca{padding:12px 12px 8px;}
.chat-busca input{width:100%; padding:9px 12px; border:1.5px solid var(--cinza-200); border-radius:10px; font-size:13px; background:var(--cinza-50); outline:none;}
.chat-busca input:focus{border-color:var(--azul); background:var(--superficie);}
.chat-abas{display:flex; gap:4px; margin:0 12px 8px; padding:3px; background:var(--cinza-100); border-radius:10px;}
.chat-aba{flex:1; padding:7px 4px; font-size:12px; font-weight:600; background:none; border:none; border-radius:8px; color:var(--cinza-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chat-aba.ativa{background:var(--superficie); color:var(--azul); box-shadow:0 1px 3px rgba(15,23,42,.1);}
.chat-lista-scroll{flex:1; overflow-y:auto; padding:0 6px 10px;}
.chat-usuario-item{padding:9px 10px; border-radius:10px; cursor:pointer; display:flex; align-items:center; gap:10px; margin-bottom:2px;}
.chat-usuario-item:hover{background:var(--cinza-100);}
.chat-usuario-item.ativo{background:var(--azul-claro);}
.chat-usuario-item.ativo .chat-item-nome{color:var(--azul-escuro);}
.chat-avatar{width:36px; height:36px; border-radius:50%; background:var(--azul); color:#fff; font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.chat-item-info{min-width:0; flex:1;}
.chat-item-nome{font-size:13.5px; font-weight:600; color:var(--cinza-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chat-item-sub{font-size:11.5px; color:var(--cinza-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.chat-conversa-topo{display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--superficie); border-bottom:1px solid var(--cinza-200); flex-shrink:0;}
.chat-voltar{width:32px; height:32px; border-radius:8px; border:none; background:var(--cinza-100); font-size:18px; color:var(--cinza-700); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.chat-voltar:hover{background:var(--cinza-200);}

.chat-mensagens{flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:6px; min-height:0;}
.chat-mensagens.soltar-arquivo{outline:2px dashed var(--azul); outline-offset:-8px; background:var(--azul-claro);}
.chat-dia{align-self:center; font-size:11px; color:var(--cinza-500); background:var(--superficie); border:1px solid var(--cinza-200); padding:3px 10px; border-radius:20px; margin:8px 0 4px;}
.chat-msg-linha{display:flex; align-items:flex-end; gap:7px; max-width:85%;}
.chat-msg-linha.minha{align-self:flex-end; flex-direction:row-reverse;}
.chat-msg-linha.outra{align-self:flex-start;}
.chat-msg-linha.seguida .chat-avatar-mini{visibility:hidden;}
.chat-avatar-mini{width:26px; height:26px; border-radius:50%; background:var(--azul); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.chat-msg-linha.outra .chat-avatar-mini{background:#94A3B8;}
.chat-msg{max-width:100%; padding:8px 12px; border-radius:16px; font-size:13.5px; line-height:1.45; position:relative; word-wrap:break-word; overflow-wrap:anywhere; white-space:pre-wrap;}
.chat-msg.minha{background:var(--azul); color:#fff; border-bottom-right-radius:4px;}
.chat-msg.outra{background:var(--superficie); border:1px solid var(--cinza-200); border-bottom-left-radius:4px;}
.chat-msg .remetente{font-size:11px; font-weight:700; color:var(--azul); margin-bottom:2px; white-space:normal;}
.chat-msg-meta{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:3px; white-space:normal;}
.chat-msg .hora{font-size:10.5px; opacity:.7;}
.chat-msg .gerar-ativ{background:none; border:none; font-size:10.5px; padding:0; opacity:0; color:inherit; text-decoration:underline; transition:opacity .15s;}
.chat-msg:hover .gerar-ativ{opacity:.85;}
.chat-msg .anexo-msg{display:flex; align-items:center; gap:8px; padding:8px 10px; margin-top:2px; border-radius:10px; background:rgba(0,0,0,.06); font-size:12.5px; white-space:normal;}
.chat-msg.minha .anexo-msg{background:rgba(255,255,255,.18);}
.chat-msg .anexo-msg a{color:inherit; text-decoration:underline; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.chat-msg img.anexo-img{display:block; max-width:220px; max-height:200px; border-radius:10px; margin-top:4px;}

.chat-rodape{padding:10px 12px; border-top:1px solid var(--cinza-200); display:flex; gap:8px; align-items:flex-end; background:var(--superficie); flex-shrink:0;}
.chat-rodape textarea{flex:1; min-width:0; resize:none; padding:9px 12px; border:1.5px solid var(--cinza-200); border-radius:12px; font-size:13.5px; line-height:1.4; max-height:120px; outline:none; background:var(--cinza-50);}
.chat-rodape textarea:focus{border-color:var(--azul); background:var(--superficie);}
.chat-btn-enviar{background:var(--azul); color:#fff; border:none; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.chat-btn-enviar:hover{background:var(--azul-escuro);}
.chat-btn-anexo{width:38px; height:38px; border-radius:10px; background:var(--cinza-100); color:var(--cinza-700); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.chat-btn-anexo:hover{background:var(--cinza-200);}
.chat-dica{font-size:10.5px; color:var(--cinza-500); text-align:center; padding:0 10px 8px; background:var(--superficie);}
.chat-vazio{padding:30px 20px; text-align:center; color:var(--cinza-500); font-size:13px;}
.chat-vazio-grande{margin:auto; display:flex; flex-direction:column; align-items:center; gap:10px; opacity:.85;}

/* ---------- EDITOR DE DOCUMENTO (estilo Word) ---------- */
.doc-toolbar{display:flex; gap:2px; padding:8px 10px; border-bottom:1px solid var(--cinza-200); background:var(--cinza-50); border-radius:8px 8px 0 0; flex-wrap:wrap;}

.doc-barra-flutuante{
  display:none; position:absolute; z-index:300; background:#1F2937; border-radius:9px;
  padding:5px; gap:2px; align-items:center; box-shadow:var(--sombra-lg);
}
.doc-barra-flutuante.visivel{display:flex;}
.doc-barra-flutuante button{
  background:none; border:none; color:#fff; padding:6px 9px; border-radius:6px; font-size:13px; cursor:pointer;
}
.doc-barra-flutuante button:hover{background:rgba(255,255,255,.14);}
.doc-bf-dropdown-wrap{position:relative;}
.doc-bf-dropdown-wrap > button{font-size:12.5px; white-space:nowrap;}
.divisor-v{width:1px; align-self:stretch; background:rgba(255,255,255,.18); margin:2px 3px;}
.doc-bf-dropdown{
  display:none; position:absolute; top:calc(100% + 6px); left:0; background:var(--superficie); border-radius:9px;
  box-shadow:var(--sombra-lg); padding:6px; min-width:150px; z-index:301;
}
.doc-bf-dropdown.visivel{display:block;}
.doc-bf-dropdown > div{padding:8px 10px; border-radius:6px; color:var(--cinza-800); font-size:13.5px; cursor:pointer;}
.doc-bf-dropdown > div:hover{background:var(--cinza-100);}
.doc-toolbar button{background:none; border:none; padding:6px 8px; border-radius:5px; color:var(--cinza-700); display:flex; align-items:center;}
.doc-toolbar button:hover{background:var(--cinza-200);}
.doc-toolbar button.ativo{background:var(--azul-claro); color:var(--azul-escuro);}
.doc-toolbar .divisor{width:1px; background:var(--cinza-200); margin:4px 4px;}
.doc-area{
  min-height:360px; padding:22px 26px; border:1px solid var(--cinza-200); border-top:none; border-radius:0 0 8px 8px;
  font-size:14px; line-height:1.7; outline:none; background:var(--superficie);
}
.doc-area:focus{box-shadow:inset 0 0 0 1.5px var(--azul);}
.doc-titulo-input{width:100%; border:none; font-size:22px; font-weight:700; padding:6px 0 14px; color:var(--cinza-900);}
.doc-titulo-input:focus{outline:none;}
.doc-lista-item{background:var(--superficie); border:1px solid var(--cinza-200); border-radius:var(--radius); padding:16px; box-shadow:var(--sombra); display:flex; align-items:flex-start; gap:12px; cursor:pointer;}
.doc-lista-item:hover{box-shadow:var(--sombra-lg);}
.doc-lista-item .info h3{font-size:14px; margin-bottom:3px;}
.doc-lista-item .info p{font-size:12px; color:var(--cinza-500);}

/* ---------- LEMBRETES ---------- */
.lembrete-item{background:var(--superficie); border:1px solid var(--cinza-200); border-left:4px solid var(--amarelo); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--sombra); display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.lembrete-item.passado{border-left-color:var(--cinza-300); opacity:.65;}
.lembrete-item .quando{font-size:12px; color:var(--cinza-500); margin-top:3px;}

/* ---------- MENÇÕES (@marcar alguém) ---------- */
.mencao-dropdown{position:fixed; background:var(--superficie); border:1px solid var(--cinza-200); border-radius:8px; box-shadow:var(--sombra-lg); z-index:300; overflow:hidden;}
.mencao-item{padding:8px 12px; font-size:12.5px; cursor:pointer;}
.mencao-item:hover{background:var(--azul-claro);}
.mencao-tag{background:var(--azul-claro); color:var(--azul-escuro); font-weight:600; padding:1px 5px; border-radius:4px;}

/* ---------- SEGURANÇA CONTRA TEXTO CORTADO/VAZANDO ---------- */
.tick-tarefa-titulo, .card-item .titulo, .doc-lista-item h3, .doc-lista-item p,
.lembrete-item, .habito-nome, .modal-header h2, .pagina-topo h1, .fluxo-card h3,
.stat-card .label, .painel-bloco h2, .chat-msg, .comentario .txt {
  overflow-wrap: break-word; word-break: break-word;
}
/* tabelas: quebra só entre palavras (nunca letra por letra); se não couber, a tabela rola para o lado */
.tabela td, .tabela th { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.tabela th { white-space: nowrap; }

.tabela .col-nome { min-width: 240px; }
.tabela td.nowrap, .tabela th.nowrap { white-space: nowrap; }
.tick-nav-item, .sidebar-nav a { white-space: normal; line-height: 1.3; }
.card-item, .tick-tarefa-row, .fluxo-card, .doc-lista-item, .lembrete-item, .habito-card { min-width: 0; }
.tags-linha, .tick-tarefa-meta { flex-wrap: wrap; }

/* ---------- LISTA DE RESPONSÁVEIS (checkbox, substitui o multi-select feio) ---------- */
.lista-checkbox-usuarios{display:flex; flex-direction:column; gap:1px; max-height:170px; overflow-y:auto; border:1.5px solid var(--cinza-200); border-radius:8px; padding:5px;}
.checkbox-usuario-item{display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:6px; font-size:12.5px; cursor:pointer;}
.checkbox-usuario-item:hover{background:var(--cinza-50);}
.checkbox-usuario-item input{width:15px; height:15px; flex-shrink:0;}

/* ---------- LINHA DE ADICIONAR SUBTAREFA (checklist) ---------- */
.checklist-add-linha2{display:grid; grid-template-columns:1fr 130px auto; gap:8px; margin-top:8px;}
.btn-icone-quadrado{width:38px; height:38px; border-radius:8px; background:var(--azul); color:#fff; border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.btn-icone-quadrado:hover{background:var(--azul-escuro);}

/* ---------- CAMPO DE ARQUIVO ESTILIZADO ---------- */
.campo-arquivo{border:1.5px dashed var(--cinza-300); border-radius:8px; padding:14px; text-align:center; font-size:12.5px; color:var(--cinza-500); margin-top:8px;}
.campo-arquivo input[type=file]{font-size:12px; margin-top:6px;}

/* ================= MÓDULO TICK (tarefas simples) ================= */
.tick-layout{display:flex; gap:22px; align-items:flex-start;}
.tick-sidebar{width:200px; flex-shrink:0;}
.tick-nav-item{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:8px; font-size:13px; color:var(--cinza-700); margin-bottom:2px;}
.tick-nav-item:hover{background:var(--cinza-100);}
.tick-nav-item.ativo{background:var(--azul-claro); color:var(--azul-escuro); font-weight:600;}
.tick-nav-count{margin-left:auto; font-size:11px; color:var(--cinza-500); background:var(--cinza-100); padding:1px 7px; border-radius:8px;}
.tick-nav-item.ativo .tick-nav-count{background:var(--superficie);}
.tick-nav-titulo{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--cinza-500); margin:16px 0 6px 11px;}
.tick-nav-titulo:first-child{margin-top:0;}
.tick-lista-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.tick-main{flex:1; min-width:0;}
.tick-main-full{max-width:900px; margin:0 auto;}

/* Abas horizontais de visão (Hoje / Amanhã / 7 dias / Todas) */
.tick-abas-view{display:flex; gap:4px; margin-bottom:18px; border-bottom:1.5px solid var(--cinza-200); max-width:900px; margin-left:auto; margin-right:auto;}
.tick-aba-view{padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--cinza-500); border-bottom:2.5px solid transparent; margin-bottom:-1.5px; display:flex; align-items:center; gap:7px;}
.tick-aba-view:hover{color:var(--cinza-800);}
.tick-aba-view.ativa{color:var(--azul); border-bottom-color:var(--azul);}
.tick-aba-view .tick-nav-count{background:var(--cinza-100); color:var(--cinza-500); font-size:11px; font-weight:700; padding:1px 7px; border-radius:8px;}
.tick-aba-view.ativa .tick-nav-count{background:var(--azul-claro); color:var(--azul-escuro);}

/* Filtro de tarefas concluídas */
.tick-filtro-concluidas{margin-top:22px;}
.tick-filtro-concluidas > button{background:none; border:none; color:var(--cinza-500); font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px; padding:8px 4px; cursor:pointer;}
.tick-filtro-concluidas > button:hover{color:var(--azul);}

/* Filtro Andamento/Concluído/Descartado */
.tick-filtro-status{display:flex; gap:8px; margin-bottom:14px;}
.tick-pill-filtro{padding:7px 14px; border-radius:20px; font-size:12.5px; font-weight:600; color:var(--cinza-600); background:var(--cinza-100); display:flex; align-items:center; gap:6px;}
.tick-pill-filtro:hover{background:var(--cinza-200);}
.tick-pill-filtro.ativa{background:var(--azul); color:#fff;}
.tick-pill-filtro.ativa .tick-nav-count{background:rgba(255,255,255,.25); color:#fff;}

/* ================= E-MAIL INTEGRADO ================= */
.email-layout{display:flex; gap:0; background:var(--superficie); border:1px solid var(--cinza-200); border-radius:var(--radius); overflow:hidden; height:calc(100vh - 220px); min-height:420px;}
.email-lista{width:340px; flex-shrink:0; border-right:1px solid var(--cinza-200); overflow-y:auto;}
.email-item{padding:13px 16px; border-bottom:1px solid var(--cinza-100); cursor:pointer;}
.email-item:hover{background:var(--cinza-50);}
.email-item.ativo{background:var(--azul-claro);}
.email-item.nao-lida .email-item-de{font-weight:700;}
.email-item.nao-lida .email-item-assunto{font-weight:700; color:var(--cinza-900);}
.email-item-de{font-size:12.5px; color:var(--cinza-700); display:flex; justify-content:space-between; gap:8px;}
.email-item-de > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.email-item-data{flex-shrink:0;}
.email-item-assunto{font-size:13px; color:var(--cinza-700); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.email-item-data{font-size:11px; color:var(--cinza-500);}
.email-corpo{flex:1; overflow-y:auto; padding:26px; min-width:0;}
.email-corpo h2{font-size:17px; margin-bottom:10px;}
.email-corpo .meta{font-size:12.5px; color:var(--cinza-500); margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--cinza-200);}
.email-corpo .conteudo{font-size:13.5px; line-height:1.7; overflow-wrap:break-word;}
.email-corpo .conteudo img{max-width:100%;}

/* --- Caixa de e-mail: selecionar mensagens e virar tarefa --- */
.email-barra{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 12px; border-bottom:1px solid var(--cinza-200); background:var(--cinza-50); position:sticky; top:0; z-index:2;}
.email-barra label{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--cinza-600); cursor:pointer;}
.email-barra .conta{font-size:11.5px; font-weight:700; color:var(--azul-escuro); background:var(--azul-claro); border-radius:20px; padding:2px 9px;}
.email-item{display:flex; align-items:flex-start; gap:9px;}
.email-item .email-marca{margin-top:2px; flex-shrink:0;}
.email-item .email-dados{min-width:0; flex:1;}
.email-item.marcado{background:var(--azul-claro);}
.email-acoes{display:flex; gap:7px; flex-wrap:wrap; float:right;}
.tarefa-previa{border:1.5px solid var(--cinza-200); border-radius:10px; background:var(--cinza-50); padding:9px 12px; font-size:12.5px; color:var(--cinza-700); max-height:150px; overflow:auto; white-space:pre-wrap;}
@media (max-width:820px){ .email-acoes{float:none; margin-top:8px;} }

/* Pastas de listas (sidebar do Tick) */
.tick-pasta-header{display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:8px; font-size:13px; color:var(--cinza-700); cursor:pointer; font-weight:500;}
.tick-pasta-header:hover{background:var(--cinza-100);}
.tick-pasta-seta{display:inline-flex; transition:transform .15s; color:var(--cinza-400);}
.tick-pasta-seta svg{transform:rotate(-90deg);}
.tick-pasta.aberta .tick-pasta-seta svg{transform:rotate(0deg);}
.tick-pasta-conteudo{display:none; padding-left:14px;}
.tick-pasta.aberta .tick-pasta-conteudo{display:block;}
.tick-nav-item-sub{font-size:12.5px;}

.tick-add-row{display:flex; align-items:center; gap:10px; padding:12px 14px; border:1.5px dashed var(--cinza-300); border-radius:10px; margin-bottom:16px; background:var(--superficie);}
.tick-add-row input{border:none; flex:1; font-size:13.5px; background:none; font-family:inherit;}
.tick-add-row input:focus{outline:none;}

.tick-tarefa-row{display:flex; align-items:flex-start; gap:12px; padding:13px 14px; background:var(--superficie); border:1px solid var(--cinza-200); border-radius:10px; margin-bottom:8px; cursor:pointer; transition:.12s;}
.tick-tarefa-row:hover{box-shadow:var(--sombra); border-color:var(--cinza-300);}
.tick-tarefa-row.concluida{opacity:.6;}
.tick-tarefa-row.concluida .tick-tarefa-titulo{text-decoration:line-through; color:var(--cinza-500);}
.tick-checkbox{width:20px; height:20px; border-radius:50%; border:2px solid var(--cinza-300); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; margin-top:1px;}
.tick-checkbox.marcado{background:var(--verde); border-color:var(--verde);}
.tick-checkbox.prio-baixa{border-color:#0369a1;}
.tick-checkbox.prio-media{border-color:var(--amarelo);}
.tick-checkbox.prio-alta{border-color:var(--vermelho);}
.tick-tarefa-titulo{font-size:13.5px; font-weight:500; color:var(--cinza-900);}
.tick-tarefa-meta{font-size:11.5px; color:var(--cinza-500); display:flex; gap:10px; align-items:center; margin-top:4px; flex-wrap:wrap;}
.tick-tarefa-meta .atrasado{color:var(--vermelho); font-weight:600;}
.tick-tarefa-lista-tag{font-size:10.5px; padding:1px 7px; border-radius:8px; color:#fff;}

/* Painel de detalhe da tarefa — modal centralizado, com opção de ampliar */
#tickDetalheBox{width:700px; max-width:94vw; transition:width .18s, max-width .18s;}
#tickDetalheBox.tick-modal-grande{width:1180px; max-width:97vw;}
#tickDetalheBox .modal-body{max-height:82vh;}
.tick-detalhe-titulo{width:100%; border:none; font-size:22px; font-weight:700; margin-bottom:18px; word-break:break-word;}
.tick-detalhe-titulo:focus{outline:none;}
.tick-detalhe-campo{margin-bottom:20px;}
.tick-detalhe-campo label{display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--cinza-500); margin-bottom:7px;}
.tick-detalhe-campo textarea{min-height:130px; resize:vertical; line-height:1.7; font-size:14px;}
.tick-detalhe-campo input[type=text], .tick-detalhe-campo input[type=date], .tick-detalhe-campo input[type=time],
.tick-detalhe-campo select{font-size:13.5px; padding:9px 11px !important;}

/* Colunas: campos à esquerda, bate-papo à direita quando o modal está ampliado */
.tick-detalhe-colunas{display:flex; flex-direction:column;}
.tick-detalhe-col-direita{margin-top:20px;}
#tickDetalheBox.tick-modal-grande .tick-detalhe-colunas{display:grid; grid-template-columns:1.3fr 1fr; gap:30px; align-items:start;}
#tickDetalheBox.tick-modal-grande .tick-detalhe-col-direita{margin-top:0; position:sticky; top:0;}
#tickDetalheBox.tick-modal-grande .tick-detalhe-campo textarea{min-height:180px;}
#tickDetalheBox.tick-modal-grande #chatTarefaTick{min-height:520px; max-height:calc(82vh - 130px);}
.tick-flags{display:flex; gap:8px;}
.tick-flag-opcao{width:34px; height:34px; border-radius:8px; border:1.5px solid var(--cinza-200); display:flex; align-items:center; justify-content:center; background:var(--superficie);}
.tick-flag-opcao.selecionada{border-color:currentColor; background:var(--cinza-50);}

/* ================= CALENDÁRIO TICK ================= */
.cal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.cal-header h2{font-size:16px; text-transform:capitalize;}
.cal-nav{display:flex; gap:6px;}
.cal-dias-semana{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:8px; font-size:11px; color:var(--cinza-500); font-weight:700; text-align:center; text-transform:uppercase;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px;}
.cal-dia{background:var(--superficie); border:1px solid var(--cinza-200); border-radius:10px; min-height:96px; padding:7px; font-size:11.5px; cursor:pointer;}
.cal-dia:hover{border-color:var(--azul);}
.cal-dia.fora-mes{opacity:.4;}
.cal-dia.hoje{border-color:var(--azul); border-width:2px; background:var(--azul-claro);}
.cal-dia .numero{font-weight:700; margin-bottom:5px; color:var(--cinza-800);}
.cal-tarefa-dot{background:var(--azul-claro); color:var(--azul-escuro); border-radius:4px; padding:1.5px 6px; margin-bottom:3px; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cal-tarefa-dot.concluida{opacity:.5; text-decoration:line-through;}

/* ================= HÁBITOS ================= */
.habito-card{background:var(--superficie); border:1px solid var(--cinza-200); border-radius:12px; padding:18px; margin-bottom:14px; box-shadow:var(--sombra);}
.habito-topo{display:flex; justify-content:space-between; align-items:center;}
.habito-nome{font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:8px;}
.habito-streak{font-size:12px; color:var(--amarelo); font-weight:700; display:flex; align-items:center; gap:4px;}
.habito-semana{display:flex; gap:7px; margin-top:14px;}
.habito-dia{flex:1; text-align:center;}
.habito-dia .rotulo{font-size:10px; color:var(--cinza-500); margin-bottom:5px; text-transform:uppercase;}
.habito-dia-check{width:100%; aspect-ratio:1; border-radius:9px; background:var(--cinza-100); border:none; display:flex; align-items:center; justify-content:center; color:transparent; cursor:pointer;}
.habito-dia-check.feito{color:#fff;}
.habito-dia-check.hoje{box-shadow:0 0 0 2px var(--azul);}

/* ================= POMODORO ================= */
.pomo-wrap{max-width:420px; margin:20px auto; text-align:center;}
.pomo-circulo{width:260px; height:260px; border-radius:50%; border:10px solid var(--cinza-100); display:flex; align-items:center; justify-content:center; margin:0 auto 26px; position:relative;}
.pomo-tempo{font-size:46px; font-weight:800; color:var(--cinza-900); font-variant-numeric:tabular-nums;}
.pomo-botoes{display:flex; gap:14px; justify-content:center; margin-bottom:20px;}
.pomo-btn-grande{width:58px; height:58px; border-radius:50%; background:var(--azul); color:#fff; border:none; display:flex; align-items:center; justify-content:center;}
.pomo-btn-grande:hover{background:var(--azul-escuro);}
.pomo-btn-secundario{width:44px; height:44px; border-radius:50%; background:var(--cinza-100); color:var(--cinza-700); border:none; display:flex; align-items:center; justify-content:center;}
.pomo-select{display:flex; gap:8px; justify-content:center; margin-bottom:24px;}
.pomo-select button{padding:6px 14px; border-radius:16px; border:1.5px solid var(--cinza-200); background:var(--superficie); font-size:12.5px; color:var(--cinza-700);}
.pomo-select button.ativo{background:var(--azul); color:#fff; border-color:var(--azul);}

/* =====================================================
   RESPONSIVO — TABLET E CELULAR
   ===================================================== */
.menu-toggle-mobile{display:none; background:none; border:none; color:var(--cinza-700); padding:6px; border-radius:6px;}
.fechar-menu-mobile{display:none; position:absolute; top:14px; right:14px; color:#fff;}
.overlay-mobile{display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:190;}
.overlay-mobile.ativo{display:block;}

/* ---------- TABLET (até 1024px) ---------- */
@media (max-width: 1024px){
  .sidebar{width:200px;}
  .main{margin-left:200px;}
  .card-modal-grid{grid-template-columns:1fr 200px; gap:20px;}
  #tickDetalheBox, .modal-box{width:92vw;}
  .grid-stats{grid-template-columns:repeat(2,1fr);}
  .painel-grid{grid-template-columns:1fr;}
  .email-lista{width:260px;}
}

/* ---------- CELULAR E TABLET RETRATO (até 860px) ---------- */
@media (max-width: 860px){
  .menu-toggle-mobile{display:flex; align-items:center; justify-content:center;}
  .fechar-menu-mobile{display:flex;}
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; width:250px; z-index:200;
    transform:translateX(-100%); transition:transform .2s ease; box-shadow:none;
  }
  .sidebar.aberta{transform:translateX(0); box-shadow:var(--sombra-lg);}
  .sidebar.recolhida{width:250px !important;}
  .sidebar.recolhida .sidebar-logo span, .sidebar.recolhida .sidebar-nav a span:not(.icone),
  .sidebar.recolhida .sidebar-logo div > strong, .sidebar.recolhida .sidebar-footer{display:block !important;}
  .sidebar.recolhida .sidebar-nav a{justify-content:flex-start !important; padding:9px 12px !important;}
  .sidebar-recolher-btn{display:none;}
  .main{margin-left:0 !important;}
  .topbar{padding:10px 14px; flex-wrap:wrap; gap:8px;}
  .topbar h1{font-size:15.5px;}
  .topbar-right{gap:8px;}
  .topbar-user > div:last-child{display:none;}
  .btn-novo span, .btn-novo{font-size:12px; padding:7px 10px;}
  .conteudo{padding:14px;}
  .pagina-topo{flex-direction:column; align-items:flex-start; gap:10px;}
  .pagina-topo > div:last-child{width:100%;}

  .grid-stats{grid-template-columns:repeat(2,1fr); gap:10px;}
  .painel-grid{grid-template-columns:1fr;}
  .grid-fluxos{grid-template-columns:1fr;}
  .lista-arquivos{grid-template-columns:repeat(2,1fr);}

  .card-modal-grid{grid-template-columns:1fr; gap:16px;}
  .modal-box, .modal-box.pequeno, #tickDetalheBox, #tickDetalheBox.tick-modal-grande{
    width:96vw !important; max-width:96vw !important; margin:0 auto;
  }
  #tickDetalheBox.tick-modal-grande .tick-detalhe-colunas{display:flex !important; flex-direction:column !important;}
  #tickDetalheBox.tick-modal-grande .tick-detalhe-col-direita{position:static !important; margin-top:20px !important;}
  #tickDetalheBox.tick-modal-grande #chatTarefaTick{min-height:220px !important; max-height:280px !important;}
  .modal-header, .modal-body, .modal-footer{padding-left:16px; padding-right:16px;}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr 1fr !important;}

  .tick-abas-view{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; flex-wrap:nowrap;}
  .tick-aba-view{white-space:nowrap;}
  .tick-main-full{max-width:100%;}
  .board-wrap{padding-bottom:10px;}
  .coluna{width:82vw; max-width:300px;}

  /* 100% e não 100vw: "vw" conta a barra de rolagem e sobrava uns 14px para o lado */
  .chat-painel, .chat-painel.expandido{width:100%; max-width:100%;}
  .chat-painel.expandido .chat-lista-usuarios{display:flex; width:100%; border-right:none;}
  .chat-painel.expandido .chat-conversa{display:none;}
  .chat-painel.expandido.em-conversa .chat-lista-usuarios{display:none;}
  .chat-painel.expandido.em-conversa .chat-conversa{display:flex;}
  .chat-painel.expandido .chat-voltar{display:flex;}
  .tick-detalhe{width:100%;}

  .email-layout{flex-direction:column; height:auto;}
  .email-lista{width:100%; max-height:240px; border-right:none; border-bottom:1px solid var(--cinza-200);}
  .email-corpo{padding:16px;}

  .tabela{display:block; overflow-x:auto; white-space:nowrap;}
  .cal-grid, .cal-dias-semana{grid-template-columns:repeat(7,minmax(38px,1fr)); gap:4px;}
  .cal-dia{min-height:60px; padding:4px; font-size:10px;}
  .cal-tarefa-dot{font-size:8.5px;}
}

/* ---------- CELULAR PEQUENO (até 480px) ---------- */
@media (max-width: 480px){
  .grid-stats{grid-template-columns:1fr;}
  .lista-arquivos{grid-template-columns:1fr 1fr;}
  .topbar h1{font-size:14px;}
  .btn-novo{padding:6px 9px; font-size:11.5px;}
  .btn-novo .icone-svg, .icone-topo-btn .icone-svg{width:15px; height:15px;}
  .avatar{width:28px; height:28px; font-size:11px;}
  .coluna{width:78vw;}
  .pomo-circulo{width:200px; height:200px;}
  .pomo-tempo{font-size:34px;}
  [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr !important;}
  .conteudo{padding:10px;}
  .cal-grid, .cal-dias-semana{grid-template-columns:repeat(7,minmax(30px,1fr)); gap:2px;}
  .cal-dia{min-height:46px; padding:2px; font-size:9px;}
  .cal-dia .numero{margin-bottom:2px;}
  .cal-tarefa-dot{padding:1px 3px; font-size:7.5px;}
  .cal-header h2{font-size:14px;}
}

/* Toque: alvos maiores em telas sensíveis ao toque */
@media (hover: none) and (pointer: coarse){
  .btn, .btn-secundario, .btn-primario, .icone-topo-btn, .tick-checkbox, .chat-usuario-item, .tick-tarefa-row{
    min-height:40px;
  }
  .checklist-item input[type=checkbox], .tick-checkbox{width:22px; height:22px;}
}

/* ---------- NOTAS DA TAREFA COM ANEXOS ---------- */
.notas-tick-caixa{border:1.5px solid var(--cinza-200); border-radius:10px; background:var(--superficie); transition:.15s;}
.notas-tick-caixa:focus-within{border-color:var(--azul);}
.notas-tick-caixa.soltar{border-color:var(--azul); border-style:dashed; background:var(--azul-claro);}
.notas-tick-caixa textarea{width:100%; padding:12px 14px; border:none; outline:none; background:transparent; font-size:13.5px; line-height:1.7; min-height:150px; resize:vertical; border-radius:10px 10px 0 0;}
.notas-tick-barra label.btn{text-transform:none; letter-spacing:0; font-weight:600;}
.notas-tick-barra{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px; border-top:1px solid var(--cinza-100);}
.notas-tick-dica{font-size:11.5px; color:var(--cinza-500);}
.notas-anexos-lista{display:flex; flex-direction:column; gap:6px; padding:0 10px 10px;}
.notas-anexo{display:flex; align-items:center; gap:10px; padding:7px 10px; background:var(--cinza-50); border:1px solid var(--cinza-200); border-radius:8px; min-width:0;}
.notas-anexo img{width:40px; height:40px; object-fit:cover; border-radius:6px; display:block;}
.notas-anexo-ico{font-size:20px;}
.notas-anexo-nome{flex:1; min-width:0; font-size:12.5px; color:var(--azul); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.notas-anexo-tam{font-size:11px; color:var(--cinza-500); flex-shrink:0;}
.notas-anexo button{background:none; border:none; color:var(--cinza-500); font-size:16px; flex-shrink:0;}
.notas-anexo button:hover{color:var(--vermelho);}

/* ---------- TAGS LIVRES (#hashtag) ---------- */
.hashtags-caixa{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:7px 9px; min-height:42px; border:1.5px solid var(--cinza-200); border-radius:10px; background:var(--superficie); cursor:text;}
.hashtags-caixa:focus-within{border-color:var(--azul);}
.hashtags-caixa #listaTagsCardTick{display:contents;}
.hashtags-caixa input{flex:1; min-width:140px; border:none; outline:none; font-size:13px; padding:4px 2px; background:transparent;}
.hashtag-chip{display:inline-flex; align-items:center; gap:4px; color:#fff; font-size:12px; font-weight:600; padding:3px 4px 3px 10px; border-radius:20px; line-height:1.3;}
.hashtag-chip button{border:none; background:rgba(255,255,255,.25); color:#fff; width:18px; height:18px; border-radius:50%; font-size:13px; line-height:1; padding:0; display:flex; align-items:center; justify-content:center;}
.hashtag-chip button:hover{background:rgba(0,0,0,.25);}
.gerenciar-tags{margin-top:8px; padding:10px; border:1px solid var(--cinza-200); border-radius:10px; background:var(--cinza-50);}
.gerenciar-tag-linha{display:flex; align-items:center; justify-content:space-between; padding:4px 0;}
.gerenciar-tag-linha .hashtag-chip{padding-right:10px;}
.gerenciar-tag-linha button{border:none; background:none; color:var(--vermelho); font-size:12px;}

/* ícones de linha (padrão da plataforma) */
i[data-ic]{display:inline-block; width:15px; height:15px; vertical-align:middle;}
.btn .icone-svg, .crm-link .icone-svg{margin-top:-2px;}
.ic-texto{display:inline-flex; align-items:center; gap:6px;}
h1 > .icone-svg{width:22px; height:22px; vertical-align:-3px; color:var(--azul);}
h2 > .icone-svg, .modal-header h2 .icone-svg{width:19px; height:19px; vertical-align:-3px; color:var(--azul);}
.cfg-ajuda{font-size:12px; font-weight:600; color:var(--azul); margin-left:8px; display:inline-flex; align-items:center; gap:4px; vertical-align:middle; white-space:nowrap;}
.cfg-ajuda:hover{text-decoration:underline;}
/* atendimento online (site / Instagram) no menu e no chat interno */
.menu-badge-at{display:inline-block; min-width:17px; padding:0 5px; margin-left:4px; border-radius:9px; background:#ef4444; color:#fff; font-size:10.5px; font-weight:700; text-align:center; line-height:17px;}
.chat-aba-n{display:inline-block; min-width:15px; padding:0 4px; border-radius:8px; background:#ef4444; color:#fff; font-size:10px; font-weight:700; line-height:15px; text-align:center;}
.chat-aba-n:empty{display:none;}
.chat-aba .icone-svg{vertical-align:-2px;}
.chat-site-abrir{display:flex; align-items:center; gap:6px; margin:6px 8px; padding:8px 10px; border-radius:9px; background:var(--azul-claro); color:var(--azul-escuro); font-size:12.5px; font-weight:700;}
.chat-abas:has(> .chat-aba:nth-child(4)){flex-wrap:wrap;}
.chat-abas:has(> .chat-aba:nth-child(4)) .chat-aba{flex:1 1 40%;}

/* ===================== Padrão visual (Arial + títulos em negrito) ===================== */
body, button, input, select, textarea, table, .modal-box, .sidebar{font-family:Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6, .modal-header h2, .pagina-topo h1, .topbar h1, .sidebar-logo strong, .painel-bloco > h2, .painel-bloco > h3{font-family:Arial, Helvetica, sans-serif; font-weight:700 !important; letter-spacing:0;}
body{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;}
th{font-weight:700;}
strong, b{font-weight:700;}

/* ===================== Acesso rápido e Meus atalhos ===================== */
.topbar-busca{display:flex; align-items:center; gap:8px; height:36px; padding:0 8px 0 12px; min-width:210px; border:1.5px solid var(--cinza-200); border-radius:10px; background:var(--cinza-50); color:var(--cinza-500); font-size:13px;}
.topbar-busca:hover{border-color:var(--azul); color:var(--cinza-700); background:var(--superficie);}
.topbar-busca span{flex:1; text-align:left;}
.topbar-busca kbd{font-size:10.5px;}
.topo-fixar.on{color:#d97706;} .topo-fixar.on svg{fill:#fbbf24;}
.sidebar-atalhos{margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.12);}
.sidebar-atalhos-tit{display:flex; align-items:center; justify-content:space-between; padding:2px 10px 6px; font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.55);}
.sidebar-atalhos-tit button{background:none; border:none; color:rgba(255,255,255,.55); display:flex; padding:2px; border-radius:5px;}
.sidebar-atalhos-tit button:hover{color:#fff; background:rgba(255,255,255,.1);}
.sidebar.recolhida .sidebar-atalhos-tit{display:none;}
/* Barra de cima em tela média (notebook de 1024 a 1250px):
   com o menu lateral aberto sobra pouco espaço, então a busca vira só a lupa
   e os espaços entre os botões diminuem. Sem isso a barra empurrava a página
   para o lado e aparecia aquela rolagem horizontal em quase toda tela. */
@media (max-width:1250px){ .topbar-busca{min-width:0; width:36px; padding:0; justify-content:center;} .topbar-busca span, .topbar-busca kbd{display:none;} .topbar-right{gap:10px;} }
/* Trava de segurança: o título encurta com "..." e a barra nunca passa da largura */
.topbar{gap:12px;}
.topbar h1{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.topbar-right{min-width:0; flex-shrink:0;}
.painel-atalhos{background:var(--superficie); border:1px solid var(--cinza-200); border-radius:var(--radius); padding:14px 16px; margin-bottom:18px; box-shadow:var(--sombra);}
.painel-atalhos-tit{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
.painel-atalhos-tit strong{display:flex; align-items:center; gap:6px; font-size:14px;} .painel-atalhos-tit strong .icone-svg{color:var(--azul);}
.painel-atalhos-grade{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px;}
.painel-atalho{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--cinza-200); border-radius:12px; font-size:13.5px; font-weight:700; color:var(--cinza-800); transition:.15s;}
.painel-atalho:hover{border-color:var(--azul); background:var(--azul-claro); color:var(--azul-escuro);}
.painel-atalho .ic{width:34px; height:34px; border-radius:10px; background:var(--azul-claro); color:var(--azul); display:flex; align-items:center; justify-content:center; flex:none;}
.painel-atalhos-dica{display:block; margin-top:8px; font-size:12px; color:var(--cinza-500);}
@media (max-width:900px){ .painel-atalhos kbd{display:none;} }

/* ===================== Menu organizável ===================== */
.menu-arrastar{display:none; align-items:center; justify-content:center; width:18px; margin-right:2px; color:rgba(255,255,255,.55); cursor:grab; flex:none;}
.sidebar.editando .menu-arrastar{display:inline-flex;}
.sidebar-sublink .menu-ic{display:none;}
.sidebar-grupo.vazio{display:none;}
.menu-solte{display:none;}
.sidebar.editando .sidebar-grupo.vazio{display:block;}
.sidebar.editando .sidebar-submenu{display:block; min-height:34px; padding-bottom:4px;}
.sidebar.editando .menu-solte{display:block; font-size:11px; color:rgba(255,255,255,.45); padding:5px 10px; margin:4px 8px 2px 18px; border:1px dashed rgba(255,255,255,.25); border-radius:8px; text-align:center;}
.sidebar.editando .sidebar-submenu .menu-solte:not(:only-child){display:none;}
.sidebar.editando #menuRaiz{outline:1px dashed rgba(255,255,255,.18); outline-offset:4px; border-radius:10px;}
.sidebar.editando #menuRaiz a, .sidebar.editando .sidebar-grupo-titulo{cursor:default;}
.menu-fantasma{opacity:.45; background:rgba(255,255,255,.14) !important; border-radius:8px;}
.menu-edicao{margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.12);}
.menu-org-btn{display:flex; align-items:center; gap:8px; width:100%; background:none; border:none; color:rgba(255,255,255,.55); font-size:12px; padding:6px 10px; border-radius:8px;}
.menu-org-btn:hover{background:rgba(255,255,255,.06); color:#fff;}
.menu-org-acoes{display:none;}
.sidebar.editando .menu-org-btn{display:none;}
.sidebar.editando .menu-org-acoes{display:flex; flex-direction:column; gap:5px;}
.menu-org-acoes button{display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:12px; font-weight:700; padding:7px 10px; border-radius:8px;}
.menu-org-acoes button:hover{background:rgba(255,255,255,.16);}
.menu-org-acoes .menu-ok{background:#16a34a; border-color:#16a34a;}
.sidebar.recolhida .menu-edicao{display:none;}
/* Minhas atividades (painel dentro de Minhas Tarefas e no Painel) */
.tk-resumo{background:var(--superficie); border:1px solid var(--cinza-200); border-radius:var(--radius); box-shadow:var(--sombra); margin-bottom:16px;}
.tk-resumo summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; padding:12px 16px; font-weight:700; font-size:14px;}
.tk-resumo summary::-webkit-details-marker{display:none;}
.tk-resumo summary .icone-svg{color:var(--azul);} .tk-resumo summary small{font-weight:400; color:var(--cinza-500); font-size:12px;}
.tk-resumo summary::after{content:'▾'; margin-left:auto; color:var(--cinza-500); transition:transform .15s;}
.tk-resumo[open] summary::after{transform:rotate(180deg);}
.tk-resumo-corpo{padding:0 16px 16px;}
/* ---- Painel das minhas atividades ---- */
.pt-nums{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-bottom:16px;}
/* o número é o herói: grande e escuro. A cor mora na faixa e no ícone, e o rótulo
   sempre acompanha — a informação nunca depende só da cor. */
.pt-num{position:relative; display:block; padding:9px 12px 10px 14px; border-radius:11px; background:var(--superficie);
  border:1px solid var(--cinza-200); color:var(--cinza-800); overflow:hidden; transition:border-color .12s, box-shadow .12s;}
.pt-num::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c, var(--cinza-300)); opacity:.28;}
.pt-num.aceso::before{opacity:1;}
a.pt-num:hover{border-color:var(--c); box-shadow:0 1px 6px rgba(15,23,42,.07);}
.pt-num .pt-ic{position:absolute; top:10px; right:11px; display:flex; color:var(--c, var(--cinza-400)); opacity:.32;}
.pt-num.aceso .pt-ic{opacity:.85;}
.pt-num strong{display:block; font-size:23px; font-weight:800; line-height:1.2; letter-spacing:-.5px; color:var(--cinza-300); font-variant-numeric:tabular-nums;}
.pt-num.aceso strong{color:var(--cinza-900);}
.pt-num .pt-rot{display:block; font-size:11.5px; color:var(--cinza-600); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pt-num .pt-rot small{color:var(--cinza-400); font-size:11px;}

/* Colunas que se equilibram sozinhas: os blocos se encaixam sem deixar buraco,
   independente de um ter 2 linhas e o outro ter 6. */
.pt-grade{columns:2; column-gap:22px;}
.pt-bloco{break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; margin:0 0 16px; min-width:0;}
.pt-sub{display:flex; align-items:baseline; gap:7px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--cinza-500); margin:0 0 4px; padding-bottom:5px; border-bottom:1px solid var(--cinza-100);}
.pt-sub small{font-weight:400; letter-spacing:0; text-transform:none; font-size:11.5px; color:var(--cinza-400);}
.pt-sub a{margin-left:auto; font-weight:600; letter-spacing:0; text-transform:none; font-size:11.5px; color:var(--azul); text-decoration:none;}
.pt-sub a:hover{text-decoration:underline;}

.pt-linha{display:flex; align-items:center; gap:9px; padding:7px 8px; margin:0 -8px; border-radius:8px; cursor:pointer;
  color:var(--cinza-800); text-decoration:none; transition:background .12s;}
.pt-linha:hover{background:var(--cinza-50);}
.pt-tit{flex:1; min-width:0; font-size:13px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pt-tit small{display:block; font-size:11px; color:var(--cinza-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pt-ponto{width:8px; height:8px; border-radius:50%; flex:none;}
.pt-chip{flex:none; font-size:11px; font-weight:700; color:var(--cinza-600); background:var(--cinza-100); border-radius:20px; padding:1px 8px; font-variant-numeric:tabular-nums;}
/* prazo: a palavra já diz tudo; a cor só reforça */
.pt-prazo{flex:none; font-size:11.5px; font-weight:600; white-space:nowrap; color:var(--cinza-500); border-radius:20px; padding:1px 8px; background:var(--cinza-100);}
.pt-prazo.atrasado{color:#B91C1C; background:var(--tint-vermelho-2);}
.pt-prazo.hoje{color:#B45309; background:var(--tint-amarelo);}
.pt-prazo.perto{color:#1D4ED8; background:#DBEAFE;}
.pt-prazo.nenhum{color:var(--cinza-400); background:transparent; font-weight:400; font-style:italic;}

/* barras das fases: finas, pontas arredondadas, todas na mesma escala */
.pt-fase{display:grid; grid-template-columns:1fr auto; gap:1px 8px; padding:6px 0 7px;}
.pt-fase-nome{font-size:12.5px; color:var(--cinza-700); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.pt-fase-n{font-size:12.5px; font-weight:700; color:var(--cinza-800); font-variant-numeric:tabular-nums;}
.pt-fase-barra{grid-column:1/-1; height:6px; border-radius:99px; background:var(--cinza-100); overflow:hidden; margin-top:3px;}
.pt-fase-barra i{display:block; height:100%; border-radius:99px; min-width:6px;}

.pt-vazio{font-size:12.5px; color:var(--cinza-500); padding:10px 0;}
.pt-vazio a{color:var(--azul);}
.pt-rec{display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12.5px; min-width:0;}
.pt-rec + .pt-rec{border-top:1px solid var(--cinza-100);}
.pt-rec-txt{flex:1; min-width:0; color:var(--cinza-600); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pt-rec-txt strong{color:var(--cinza-800);}
.pt-rec-h{flex:none; font-size:11px; color:var(--cinza-400); white-space:nowrap; font-variant-numeric:tabular-nums;}
.pt-av{width:24px; height:24px; border-radius:50%; background:var(--azul); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none;}
@media (max-width:1000px){ .pt-grade{columns:1;} }
@media (max-width:560px){ .pt-nums{grid-template-columns:repeat(2, minmax(0,1fr));} .pt-num strong{font-size:22px;} }

/* ===================== Correções de telas apertadas (notebook e celular) ===================== */
.tabela-rolagem{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;}
.main, .painel-bloco, .pn-w, .pn-w-corpo{min-width:0;}
.tick-abas-view{overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap;}
.tick-filtro-status, .tick-abas-view{max-width:100%;}
.rk{overflow:hidden;}
@media (max-width:760px){
  .topbar{gap:6px; padding:8px 12px; flex-wrap:nowrap;}
  .topbar h1{font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:38vw;}
  .topbar-right{gap:4px; flex-wrap:nowrap;}
  .topo-fixar{display:none;}
  .topbar-user > div:not(.avatar){display:none;}
  .btn-novo{padding:7px 10px;}
  .pagina-topo{flex-direction:column; align-items:flex-start; gap:8px;}
  .mat-graficos, .grid-stats{grid-template-columns:1fr !important;}
}
@media (max-width:760px){
  html, body{max-width:100%; overflow-x:hidden;}
  .topbar-busca{display:none;}
  .topbar h1{max-width:34vw;}
  .tick-main, .tick-abas-view, .tick-filtro-status{min-width:0; max-width:100%;}
  .tick-filtro-status{overflow-x:auto; flex-wrap:nowrap;}
  .lp-grade{grid-template-columns:1fr;}
  .painel-bloco{padding:14px;}
}

/* ===================================================================
   Abas internas (atualização 31)
   .em-aba = a tela está aberta dentro de uma aba do sistema: o menu
   lateral e a barra de cima ficam na moldura, aqui só o conteúdo.
   =================================================================== */
html.em-aba .sidebar,
html.em-aba .topbar,
html.em-aba .overlay-mobile,
html.em-aba .sidebar-recolher-btn{ display:none !important; }
html.em-aba .main{ margin-left:0 !important; }
html.em-aba body{ background:var(--superficie); }
html.em-aba .conteudo{ padding:20px 22px 30px; }

/* moldura das abas */
.abas-barra{
  display:flex; align-items:center; gap:4px; background:var(--cinza-100);
  border-bottom:1px solid var(--cinza-200); padding:6px 10px 0; overflow-x:auto; min-height:42px;
}
.abas-barra::-webkit-scrollbar{ height:5px; }
.aba{
  display:inline-flex; align-items:center; gap:7px; background:var(--tint-cinza); color:var(--cinza-700);
  border:1px solid var(--cinza-200); border-bottom:none; border-radius:9px 9px 0 0;
  padding:8px 10px 8px 12px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
  max-width:230px; flex:none; position:relative; top:1px;
}
.aba:hover{ background:#e3e9f3; }
.aba.ativa{ background:var(--superficie); color:var(--azul); border-color:var(--cinza-200); box-shadow:0 -2px 0 var(--azul) inset; }
.aba .aba-ic{ display:inline-flex; color:var(--cinza-500); flex:none; }
.aba.ativa .aba-ic{ color:var(--azul); }
.aba .aba-rot{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aba .aba-x{
  border:none; background:none; color:var(--cinza-500); cursor:pointer; border-radius:6px;
  width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.aba .aba-x:hover{ background:var(--cinza-200); color:var(--vermelho); }
.abas-mais{
  border:1px dashed var(--cinza-200); background:var(--superficie); color:var(--azul); border-radius:9px;
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none; margin-left:2px;
}
.abas-mais:hover{ border-color:var(--azul); background:var(--azul-claro); }
.abas-acoes{ margin-left:auto; display:flex; align-items:center; gap:6px; padding-bottom:6px; flex:none; }
.abas-quadro{ position:relative; flex:1; background:var(--superficie); min-height:300px; }
.abas-quadro iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; display:none; background:var(--superficie); }
.abas-quadro iframe.ativa{ display:block; }
.abas-vazio{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--cinza-500); font-size:14px; text-align:center; padding:20px;
}
body.modo-abas .conteudo{ padding:0; display:flex; flex-direction:column; flex:1; min-height:0; }
body.modo-abas .main{ height:100vh; overflow:hidden; }
@media (max-width:760px){ .aba{ max-width:150px; } .abas-acoes{ display:none; } }

/* página nova dentro das abas (o que aparece ao clicar no +) */
.aba-inicio{ position:absolute; inset:0; display:none; overflow:auto; background:var(--superficie); padding:28px 20px; }
.aba-inicio.ativa{ display:block; }
.aba-inicio-caixa{ max-width:720px; margin:0 auto; }
.aba-inicio-caixa h2{ display:flex; align-items:center; gap:8px; margin:0 0 4px; font-size:19px; }
.aba-inicio-caixa > p{ color:var(--cinza-500); font-size:13.5px; margin:0 0 14px; }
#abaInicioBusca{
  width:100%; padding:11px 14px; border:1.5px solid var(--cinza-200); border-radius:11px;
  font-size:14px; font-family:inherit; margin-bottom:14px;
}
#abaInicioBusca:focus{ border-color:var(--azul); outline:none; box-shadow:0 0 0 3px var(--azul-claro); }
.aba-inicio-lista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
.aba-inicio-grupo{
  grid-column:1/-1; font-size:11.5px; font-weight:700; color:var(--cinza-500);
  text-transform:uppercase; letter-spacing:.3px; margin:10px 0 2px;
}
.aba-inicio-item{
  display:flex; align-items:center; gap:9px; text-align:left; width:100%;
  border:1.5px solid var(--cinza-200); background:var(--superficie); border-radius:11px; padding:11px 13px;
  font-size:13.5px; font-weight:600; color:var(--cinza-700); cursor:pointer; font-family:inherit;
}
.aba-inicio-item:hover{ border-color:var(--azul); background:var(--azul-claro); color:var(--azul); }
.aba-inicio-ic{ display:inline-flex; color:var(--azul); flex:none; }