/* ===== CRM Grupo Catisa ============================================= */
:root{
  --azul:#0f2a45; --azul-claro:#1b3f63; --azul-escuro:#0a1c2e;
  --ouro:#c9a227; --ouro-claro:#e8c95a;
  --vermelho:#a4161a; --verde:#15803d; --ambar:#b45309;
  --texto:#16202b; --texto-suave:#5b6b7c;
  --fundo:#f4f6f9; --superficie:#ffffff; --borda:#dfe5ec;
  --raio:10px; --sombra:0 1px 3px rgba(15,42,69,.09), 0 6px 18px rgba(15,42,69,.05);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
a{color:var(--azul-claro); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- topo ---- */
.topo{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--azul); color:#fff; padding:0 22px; min-height:60px;
  box-shadow:0 2px 10px rgba(10,28,46,.25);
}
.marca{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none}
.marca:hover{text-decoration:none}
.marca-sigla{
  background:var(--ouro); color:var(--azul-escuro); font-weight:800; letter-spacing:.5px;
  padding:4px 9px; border-radius:6px; font-size:14px;
}
.marca-nome{font-weight:600; font-size:15px; white-space:nowrap}
.nav-principal{display:flex; gap:2px; flex:1; flex-wrap:wrap}
.nav-principal a{
  color:#c8d6e4; padding:8px 11px; border-radius:7px; font-weight:500; font-size:13.5px;
  white-space:nowrap;
}
.nav-principal a:hover{background:var(--azul-claro); color:#fff; text-decoration:none}
.nav-principal a.activo{background:var(--azul-claro); color:#fff; box-shadow:inset 0 -2px 0 var(--ouro)}
.utilizador{display:flex; align-items:center; gap:14px}
.quem{color:#fff; text-align:right; line-height:1.25}
.quem:hover{text-decoration:none; opacity:.85}
.quem strong{display:block; font-size:14px}
.quem small{display:block; color:#9db3c9; font-size:11.5px}
.sair{
  color:#fff; border:1px solid rgba(255,255,255,.35); padding:6px 13px;
  border-radius:7px; font-size:13px;
}
.sair:hover{background:rgba(255,255,255,.12); text-decoration:none}

/* ---- estrutura ---- */
.conteudo{max-width:1240px; margin:24px auto 40px; padding:0 20px}
.rodape{
  max-width:1240px; margin:0 auto; padding:18px 20px 30px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color:var(--texto-suave); font-size:12.5px; border-top:1px solid var(--borda);
}
.cabecalho-pagina{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:18px;
}
.cabecalho-pagina h1{margin:0; font-size:23px; letter-spacing:-.3px}
.cabecalho-pagina p{margin:4px 0 0; color:var(--texto-suave); font-size:13.5px}
.card{
  background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--raio); box-shadow:var(--sombra); padding:20px; margin-bottom:18px;
}
.card h2{margin:0 0 14px; font-size:16px; letter-spacing:-.2px}
.grelha{display:grid; gap:16px}
.grelha-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:start}
.grelha-4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* ---- indicadores ---- */
.indicador{
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio);
  padding:16px 18px; box-shadow:var(--sombra); border-left:4px solid var(--ouro);
}
.indicador .rotulo{color:var(--texto-suave); font-size:12px; text-transform:uppercase; letter-spacing:.6px}
.indicador .valor{font-size:25px; font-weight:700; margin-top:6px; letter-spacing:-.6px}
.indicador .nota{color:var(--texto-suave); font-size:12px; margin-top:2px}

/* ---- tabelas ---- */
.tabela-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.dados{width:100%; border-collapse:collapse; font-size:14px; min-width:640px}
table.dados th{
  text-align:left; padding:10px 12px; background:#eef2f7; color:#3d5266;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; font-weight:700;
  border-bottom:1px solid var(--borda); white-space:nowrap;
}
table.dados td{padding:11px 12px; border-bottom:1px solid #eef1f5; vertical-align:middle}
table.dados tbody tr:hover{background:#f8fafc}
table.dados .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.vazio{padding:34px 20px; text-align:center; color:var(--texto-suave)}

/* ---- etiquetas ---- */
.etiqueta{
  display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px;
  font-weight:600; background:#eef2f7; color:#3d5266; white-space:nowrap;
}
.etiqueta-fase{color:#fff}
.etiqueta-activo{background:#dcfce7; color:#14532d}
.etiqueta-perspectiva{background:#fef3c7; color:#78350f}
.etiqueta-inactivo{background:#e9edf2; color:#4b5a6a}
.etiqueta-suspenso{background:#fee2e2; color:#7f1d1d}

/* ---- botões ---- */
.btn{
  display:inline-block; background:var(--azul); color:#fff; border:1px solid var(--azul);
  padding:9px 16px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer;
  text-decoration:none; line-height:1.3;
}
.btn:hover{background:var(--azul-claro); text-decoration:none; color:#fff}
.btn-ouro{background:var(--ouro); border-color:var(--ouro); color:var(--azul-escuro)}
.btn-ouro:hover{background:var(--ouro-claro); color:var(--azul-escuro)}
.btn-claro{background:#fff; color:var(--azul); border-color:var(--borda)}
.btn-claro:hover{background:#f1f5f9; color:var(--azul)}
.btn-perigo{background:var(--vermelho); border-color:var(--vermelho)}
.btn-perigo:hover{background:#7d1114; color:#fff}
.btn-pequeno{padding:5px 11px; font-size:12.5px}
.accoes{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ---- formulários ---- */
.campos{display:grid; gap:15px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.campo{display:flex; flex-direction:column; gap:5px}
.campo.largo{grid-column:1/-1}
.campo label{font-size:12.5px; font-weight:600; color:#3d5266}
.campo .ajuda{font-size:11.5px; color:var(--texto-suave); font-weight:400}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=search],input[type=url],select,textarea{
  padding:9px 11px; border:1px solid var(--borda); border-radius:8px;
  font:inherit; background:#fff; color:var(--texto); width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--azul-claro); box-shadow:0 0 0 3px rgba(27,63,99,.12);
}
textarea{min-height:90px; resize:vertical}
.obrigatorio{color:var(--vermelho)}
.form-rodape{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--borda);
}

/* ---- filtros ---- */
.filtros{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio);
  padding:14px 16px; margin-bottom:16px; box-shadow:var(--sombra);
}
.filtros .campo{min-width:150px; flex:1}
.filtros .campo.pesquisa{flex:2; min-width:220px}

/* ---- avisos ---- */
.aviso{padding:12px 15px; border-radius:8px; margin-bottom:16px; font-size:14px; border:1px solid}
.aviso-ok{background:#dcfce7; border-color:#86efac; color:#14532d}
.aviso-erro{background:#fee2e2; border-color:#fca5a5; color:#7f1d1d}
.aviso-aviso{background:#fef3c7; border-color:#fcd34d; color:#78350f}
.aviso-info{background:#e0f2fe; border-color:#7dd3fc; color:#0c4a6e}

/* ---- ficha ---- */
.ficha{display:grid; gap:2px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ficha div{padding:10px 0; border-bottom:1px solid #eef1f5}
.ficha dt{font-size:11.5px; color:var(--texto-suave); text-transform:uppercase; letter-spacing:.5px}
.ficha dd{margin:3px 0 0; font-weight:500}

/* ---- funil ---- */
.funil{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px}
.funil-fase{
  min-width:140px; flex:1; background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--raio); padding:13px; border-top:3px solid var(--ouro);
}
.funil-fase .nome{font-size:12px; font-weight:700; color:#3d5266; text-transform:uppercase; letter-spacing:.5px}
.funil-fase .qtd{font-size:22px; font-weight:700; margin-top:5px; letter-spacing:-.5px}
.funil-fase .soma{font-size:12px; color:var(--texto-suave); margin-top:2px}

/* ---- login ---- */
.login-fundo{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(160deg,var(--azul-escuro) 0%,var(--azul) 55%,var(--azul-claro) 100%);
}
.login-caixa{
  background:#fff; border-radius:14px; padding:34px 30px; width:100%; max-width:392px;
  box-shadow:0 22px 50px rgba(5,15,26,.4);
}
.login-caixa .marca-sigla{font-size:19px; padding:7px 13px}
.login-topo{text-align:center; margin-bottom:24px}
.login-topo h1{margin:14px 0 3px; font-size:19px}
.login-topo p{margin:0; color:var(--texto-suave); font-size:13px}
.login-caixa .btn{width:100%; padding:11px; margin-top:6px}

@media (max-width:720px){
  .topo{padding:10px 14px; gap:12px}
  .nav-principal{order:3; width:100%}
  .conteudo{padding:0 14px; margin-top:16px}
  .marca-nome{display:none}
}

/* ---- separadores de vista ---- */
.separadores{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px}
.separadores a{
  padding:8px 14px; border-radius:8px; font-size:13.5px; font-weight:600;
  color:var(--texto-suave); background:var(--superficie); border:1px solid var(--borda);
}
.separadores a:hover{text-decoration:none; color:var(--azul); background:#f1f5f9}
.separadores a.activo{background:var(--azul); color:#fff; border-color:var(--azul)}
.separadores .conta{
  display:inline-block; margin-left:5px; padding:1px 7px; border-radius:999px;
  background:rgba(0,0,0,.09); font-size:11.5px;
}
.separadores a.activo .conta{background:rgba(255,255,255,.22)}

/* ---- prioridade ---- */
.pri{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--borda)}
.pri-alta{background:var(--vermelho)}
.pri-normal{background:var(--ouro)}
.pri-baixa{background:#94a3b8}

/* ---- linha concluída ---- */
tr.linha-feita td{opacity:.62}
tr.linha-feita td strong{text-decoration:line-through}

/* ---- gráfico de barras ---- */
.barras{display:flex; flex-direction:column; gap:11px}
.barra-linha{display:grid; grid-template-columns:130px 1fr auto; gap:12px; align-items:center; font-size:13.5px}
.barra-nome{color:#3d5266; font-weight:600; text-align:right}
.barra-trilho{background:#eef2f7; border-radius:5px; height:22px; overflow:hidden}
.barra-preenche{height:100%; border-radius:5px; background:linear-gradient(90deg,var(--azul-claro),var(--azul)); min-width:2px}
.barra-valor{font-variant-numeric:tabular-nums; color:var(--texto-suave); white-space:nowrap; font-size:12.5px}

/* ---- lista da agenda no início ---- */
.agenda{list-style:none; margin:0; padding:0}
.agenda li{
  display:flex; gap:11px; align-items:flex-start; padding:11px 0;
  border-bottom:1px solid #eef1f5; font-size:14px;
}
.agenda li:last-child{border-bottom:none}
.agenda .quando{color:var(--texto-suave); font-size:12.5px; white-space:nowrap; min-width:96px}
.agenda .quando.atraso{color:var(--vermelho); font-weight:700}
.agenda .assunto{flex:1}
.agenda .assunto small{display:block; color:var(--texto-suave); font-size:12px}

/* ---- legenda dos gráficos ---- */
.legenda{display:flex; gap:16px; flex-wrap:wrap; margin:0 0 12px}
.legenda span{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--texto-suave)}
.legenda i{width:11px; height:11px; border-radius:3px; display:inline-block}

/* ---- impressão ---- */
@media print{
  .topo, .rodape, .accoes, .filtros, .separadores{display:none !important}
  body{background:#fff}
  .card{box-shadow:none; border-color:#ccc; break-inside:avoid; page-break-inside:avoid}
  .conteudo{max-width:none; padding:0}
  a{color:inherit; text-decoration:none}
}