/* Painel Logos CRM. Pensado primeiro para 360 px; cores da Casa Logos. */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fontes/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight:200 800;
  font-display:swap;
}
:root{
  --fundo:#0a1628;
  --faixa:#0d1f35;
  --cartao:#11263e;
  --cartao-activo:#112a47;
  --linha:#1e3a5f;
  --borda:#4d6f96;
  --texto:#ffffff;
  --texto-2:#a9b4cf;
  --accao:#8bcdd4;
  --accao-forte:#a8e6cf;
  --sobre-accao:#0a1628;
  --alerta:#fbbf24;
  --erro:#ff9d9d;
  --certo:#34d399;
  --raio:10px;
  --toque:44px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;background:var(--fundo);color:var(--texto);
  font-family:"Plus Jakarta Sans",sans-serif;font-size:16px;line-height:1.5;
  overflow-wrap:anywhere;
}
h1{font-size:1.375rem;line-height:1.25;margin:0 0 12px;font-weight:700;letter-spacing:-.01em}
h2{font-size:1.0625rem;line-height:1.3;margin:0 0 8px;font-weight:700}
p{margin:0 0 12px}
a{color:var(--accao);text-underline-offset:3px;transition:color .2s}
a:hover{color:var(--accao-forte)}
:focus-visible{outline:2px solid var(--accao-forte);outline-offset:2px}
.pagina{max-width:1440px;margin:0 auto;padding:16px}
.aviso-pagina{max-width:420px;margin:15vh auto 0;text-align:center}

.botao,button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--toque);
  padding:10px 16px;border:1px solid transparent;border-radius:var(--raio);
  background:var(--accao);color:var(--sobre-accao);font:inherit;font-weight:700;
  text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;
}
.botao:hover,button:hover{background:var(--accao-forte);color:var(--sobre-accao)}
.botao-2{background:transparent;color:var(--texto);border-color:var(--borda)}
.botao-2:hover{background:var(--cartao-activo);color:var(--texto);border-color:var(--accao)}
.botao-perigo{background:transparent;color:var(--erro);border-color:var(--erro)}
.botao-perigo:hover{background:var(--erro);color:var(--sobre-accao)}

label{display:block;font-weight:600;margin-bottom:6px}
input,select,textarea{
  width:100%;min-height:var(--toque);padding:10px 12px;border:1px solid var(--borda);
  border-radius:var(--raio);background:var(--faixa);color:var(--texto);font:inherit;
  transition:border-color .2s;
}
input:focus,select:focus,textarea:focus{border-color:var(--accao)}
textarea{min-height:96px;resize:vertical}
.campo{margin-bottom:16px}
.erro,.errorlist{color:var(--erro);font-weight:600;margin:6px 0 0;padding:0;list-style:none}
.ajuda{color:var(--texto-2);font-size:.875rem;margin-top:4px}

/* Entrar */
.entrar{max-width:360px;margin:12vh auto 0}
.entrar h1{margin-bottom:24px}
.entrar button{width:100%}

/* Barra */
.barra{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 16px;background:var(--faixa);border-bottom:1px solid var(--linha)}
.barra nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.barra a{color:var(--texto);text-decoration:none;font-weight:600;min-height:var(--toque);
  display:inline-flex;align-items:center}
.barra a:hover{color:var(--accao)}
.barra-marca{font-weight:800}
.botao-pequeno{padding:6px 12px;font-size:.875rem}
.vazio{color:var(--texto-2)}
.conta{color:var(--texto-2);font-weight:600;font-size:.875rem}

/* Funil: no telemóvel, um estado por baixo do outro; em ecrãs largos, oito colunas. */
.funil{display:grid;gap:16px}
.coluna{background:var(--faixa);border:1px solid var(--linha);border-radius:var(--raio);padding:12px}
.coluna h2{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cartoes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);
  padding:10px 12px;transition:background-color .2s,border-color .2s}
.cartao:hover{background:var(--cartao-activo);border-color:var(--borda)}
.cartao-nome{display:flex;align-items:center;color:var(--texto);font-weight:700;
  text-decoration:none;min-height:var(--toque)}
@media (min-width:1100px){
  /* Oito colunas legíveis: em ecrãs mais estreitos desliza o funil, não a página. */
  .funil{grid-template-columns:repeat(8,minmax(200px,1fr));align-items:start;overflow-x:auto;
    padding-bottom:8px}
}

/* Ficha */
.voltar{margin-bottom:8px}
.ficha-topo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:16px}
.ficha-topo h1{margin:0}
.etiqueta{display:inline-block;margin:0;padding:2px 10px;border:1px solid var(--borda);
  border-radius:999px;font-size:.8125rem;font-weight:700;color:var(--texto-2)}
.etiqueta-estado{color:var(--accao);border-color:var(--accao)}
.bloco{background:var(--faixa);border:1px solid var(--linha);border-radius:var(--raio);
  padding:16px;margin-bottom:16px;max-width:760px}
.dados{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:6px 16px;margin:0}
.dados dt{color:var(--texto-2)}
.dados dd{margin:0}
.origens{list-style:none;margin:0;padding:0}
.quando{color:var(--texto-2);font-size:.8125rem;margin:0}

/* Conversa */
.conversa{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mensagem{max-width:85%;padding:8px 12px;border-radius:var(--raio);background:var(--cartao);
  border:1px solid var(--linha);justify-self:start}
.mensagem-pedro{justify-self:end;background:#0f3a44;border-color:#1f5d6b}
.mensagem .texto{margin:0 0 4px}
.mensagem .marca{margin:0 0 4px;color:var(--texto-2);font-style:italic}

/* Passos intermédios: motivo da perda, aviso do sexto projecto, confirmações */
.passo{max-width:480px;margin:0 auto}
.accoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.escolhas{border:0;margin:0 0 16px;padding:0;display:grid;gap:8px}
.escolhas legend{font-weight:600;margin-bottom:8px;padding:0}
.escolha{display:flex;align-items:center;gap:12px;min-height:var(--toque);margin:0;
  padding:8px 12px;border:1px solid var(--borda);border-radius:var(--raio);cursor:pointer;
  font-weight:500;transition:border-color .2s,background-color .2s}
.escolha:hover,.escolha:has(input:checked){border-color:var(--accao);background:var(--cartao-activo)}
.escolha input{width:20px;min-height:20px;height:20px;flex:none;cursor:pointer;accent-color:var(--accao)}

/* Quem espera pelo Pedro */
.esperam{margin-bottom:16px}
.lista-esperam{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lista-esperam li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;
  background:var(--cartao);border:1px solid var(--linha);border-left:4px solid var(--accao);
  border-radius:var(--raio);padding:8px 12px;transition:background-color .2s}
.lista-esperam li:hover{background:var(--cartao-activo)}
.lista-esperam a{color:var(--texto);font-weight:700;text-decoration:none;
  min-height:var(--toque);display:inline-flex;align-items:center}
.lista-esperam li.atrasado,.cartao.atrasado{border-left:4px solid var(--alerta)}
.etiqueta-alerta{color:var(--alerta);border-color:var(--alerta)}
.vez{margin:2px 0 6px;font-size:.875rem;color:var(--texto-2)}
.vez-mim{color:var(--accao);font-weight:700}

/* Mudar estado */
.mudar-estado{display:flex;gap:8px;margin-top:8px}
.mudar-estado select{flex:1;min-width:0;cursor:pointer}
.com-js .mudar-estado button{display:none}
.ficha-accoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px;max-width:760px}
.ficha-accoes .mudar-estado{margin-top:0;flex:1 1 220px}

/* Abas de estado (telemóvel): a barra desliza sozinha, a página nunca desliza para o lado.
   Tocar numa aba mostra só esse estado; "Todos" volta a mostrar tudo. */
.abas{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;margin-bottom:4px;
  scrollbar-width:thin;position:sticky;top:0;background:var(--fundo);z-index:1}
.abas a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--toque);
  padding:6px 14px;border:1px solid var(--borda);border-radius:999px;color:var(--texto);
  text-decoration:none;font-weight:600;font-size:.875rem;white-space:nowrap;
  transition:border-color .2s,background-color .2s}
.abas a:hover{border-color:var(--accao);background:var(--cartao-activo)}
.funil:has(.coluna:target) .coluna:not(:target){display:none}
.coluna{scroll-margin-top:64px}
@media (min-width:1100px){
  .abas{display:none}
  .funil:has(.coluna:target) .coluna:not(:target){display:block}
}

/* Notas */
.notas{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.notas li{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);
  padding:8px 12px}
.notas .texto{margin:0 0 4px}

/* Ficha: no telemóvel tudo em coluna, com a conversa primeiro; em ecrãs largos, lado a lado. */
.funil-accoes{margin:0 0 12px}
.ficha-corpo{display:flex;flex-direction:column;gap:0}
.ficha-conversa{order:-1}
.notas{margin-top:16px}
details.bloco>summary{cursor:pointer;font-weight:700;min-height:var(--toque);display:flex;
  align-items:center;transition:color .2s}
details.bloco>summary:hover{color:var(--accao)}
details.bloco[open]>summary{margin-bottom:12px}
.anuncio img{display:block;border-radius:var(--raio);border:1px solid var(--linha);
  object-fit:cover;margin-bottom:8px}
@media (min-width:1000px){
  .ficha-corpo{flex-direction:row;align-items:flex-start;gap:16px}
  .ficha-lado{flex:0 0 420px}
  .ficha-conversa{order:0;flex:1;max-width:none}
}

/* Contagem: um cartão por dia (nada de tabelas largas no telemóvel) */
.intervalo{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px}
.intervalo .campo{margin:0;flex:1 1 140px;max-width:220px}
.dia{max-width:none}
.dia-total{border-color:var(--accao)}
.numeros{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:0}
.numero{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);
  padding:8px 12px}
.numero dt{color:var(--texto-2);font-size:.8125rem}
.numero dd{margin:0;font-size:1.375rem;font-weight:800}
.numero-largo{grid-column:1/-1}
.por-origem{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;
  color:var(--texto-2);font-size:.875rem}
.por-origem strong{color:var(--texto)}
.zona-apagar{margin:8px 0 16px}