/* ============================================
   PONTO PARÁGRAFO · Gestão de contactos
   Cores da marca: laranja #e0662f, azul-petróleo #1f4e57, creme
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --laranja:      #e0662f;
  --laranja-esc:  #b3491c;
  --laranja-cl:   #eb9166;
  --laranja-pal:  #fbe7da;
  --azul:         #1f4e57;
  --azul-mid:     #2d6a75;
  --azul-pal:     #e6f0f2;
  --creme:        #faf7f3;
  --creme-q:      #f5efe6;
  --branco:       #ffffff;
  --escuro:       #3a322c;
  --cinza:        #6b7280;
  --cinza-cl:     #e7e2e5;
  --verde:        #2e7d54;
  --verde-pal:    #e4f2ea;
  --vermelho:     #b3261e;
  --vermelho-pal: #fbe6e5;
  --font:         'Montserrat', sans-serif;
  --serif:        'Fraunces', serif;
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --grad-laranja: linear-gradient(150deg, #b3491c 0%, #e0662f 45%, #eb9166 85%, #d9a441 100%);
}

body {
  font-family: var(--font); background: var(--creme); color: var(--escuro);
  line-height: 1.5; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* nunca deixar a página inteira deslizar para o lado */
}
.btn-icone {
  background: rgba(255,255,255,0.16); border: none; color: var(--branco);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: 0.9rem; transition: background 0.2s;
}
.btn-icone:hover { background: rgba(255,255,255,0.3); }

/* Regra geral: o atributo hidden esconde sempre, mesmo com display flex/grid */
[hidden] { display: none !important; }

/* ---------- Topo ---------- */
.topo {
  background: linear-gradient(100deg, var(--laranja-esc) 0%, var(--laranja) 55%, var(--laranja-cl) 100%);
  color: var(--branco); position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.topo-inner {
  max-width: 1240px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.wordmark { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; }
.topo-sub {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.75);
  padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.3);
}
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sync-estado { font-size: 0.68rem; color: rgba(255,255,255,0.8); margin-right: 4px; }

/* ---------- Botões ---------- */
.btn {
  font-family: var(--font); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.03em; padding: 10px 18px; border-radius: 100px;
  border: none; cursor: pointer; transition: all 0.2s var(--ease);
  white-space: nowrap;
}
.btn-principal { background: var(--branco); color: var(--laranja-esc); }
.btn-principal:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.16); }
.btn-ghost { background: rgba(255,255,255,0.16); color: var(--branco); }
.btn-ghost:hover { background: rgba(255,255,255,0.26); }
.btn-perigo { background: var(--vermelho-pal); color: var(--vermelho); }
.btn-perigo:hover { background: #f5d4d2; }

/* ---------- Container ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 28px 24px 80px; }

/* ---------- Topo da secção Contactos ---------- */
.contactos-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.contactos-titulo { font-family: var(--serif); font-size: 1.5rem; color: var(--azul); }
.btn-destaque {
  font-family: var(--font); font-size: 0.86rem; font-weight: 700;
  padding: 12px 22px; border-radius: 100px; border: none; cursor: pointer;
  background: var(--grad-laranja); color: var(--branco);
  box-shadow: 0 6px 16px rgba(224,102,47,0.35);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn-destaque:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(224,102,47,0.45); }
.btn-destaque:active { transform: translateY(0); }

/* ---------- Resumo ---------- */
.resumo {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 26px;
}
.stat {
  background: var(--branco); border: 1px solid var(--cinza-cl);
  border-radius: 16px; padding: 18px 20px;
  font-family: var(--font); text-align: left; cursor: pointer;
  transition: all 0.2s var(--ease);
}
.stat:hover { border-color: var(--laranja); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(179,73,28,0.1); }
.stat.destaque { cursor: default; }
.stat.destaque:hover { transform: none; border-color: var(--cinza-cl); box-shadow: none; }
/* Cartão correspondente ao filtro ativo */
.stat-ativo { border-color: var(--azul); background: var(--azul-pal); }
.stat-ativo .stat-label { color: var(--azul); }
/* "A experimentar" com destaque próprio */
.stat-exp .stat-num { color: #8a5f1e; }
.stat-num {
  display: block; font-family: var(--serif); font-size: 2.1rem;
  font-weight: 600; line-height: 1; color: var(--azul); letter-spacing: -0.02em;
}
.stat.destaque .stat-num {
  background: var(--grad-laranja);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat-label {
  display: block; margin-top: 8px; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinza);
}

/* ---------- Abas ---------- */
.abas {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 1px solid var(--cinza-cl);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.aba {
  font-family: var(--font); font-size: 0.82rem; font-weight: 700;
  padding: 11px 20px; background: none; border: none; cursor: pointer;
  color: var(--cinza); position: relative; transition: color 0.2s;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; flex-shrink: 0;
}
.aba::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--laranja);
  transform: scaleX(0); transition: transform 0.25s var(--ease);
}
.aba:hover { color: var(--escuro); }
.aba.ativa { color: var(--azul); }
.aba.ativa::after { transform: scaleX(1); }
.aba-conta {
  background: var(--laranja); color: var(--branco);
  font-size: 0.62rem; font-weight: 800; min-width: 19px; height: 19px;
  border-radius: 100px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 6px;
}

/* Sub-abas (dentro de Agenda e de Contactos) */
.sub-abas {
  display: inline-flex; gap: 3px; margin-bottom: 18px;
  background: var(--creme-q); padding: 4px; border-radius: 100px;
}
.sub-aba {
  font-family: var(--font); font-size: 0.78rem; font-weight: 700;
  padding: 8px 18px; border: none; background: none; cursor: pointer;
  color: var(--cinza); border-radius: 100px; transition: all 0.2s var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.sub-aba:hover { color: var(--escuro); }
.sub-aba.ativa { background: var(--branco); color: var(--azul); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.sub-conta {
  background: var(--laranja); color: var(--branco);
  font-size: 0.6rem; font-weight: 800; min-width: 18px; height: 18px;
  border-radius: 100px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 5px;
}

/* Cabeçalho das secções (usado nas tarefas) */
.alertas-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 22px; border-bottom: 1px solid var(--cinza-cl);
  background: var(--creme-q);
}
.alertas-topo h2 {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--azul);
}

/* ---------- Ordenação e seleção na tabela ---------- */
.ordenavel { cursor: pointer; user-select: none; transition: color 0.2s; }
.ordenavel:hover { color: var(--laranja-esc); }
.ordenavel.ord-ativa { color: var(--azul); }
.seta-ord { font-size: 0.68rem; margin-left: 2px; }
.th-check, .td-check { width: 34px; text-align: center; }
.td-check input, .th-check input { cursor: pointer; accent-color: var(--laranja); }
.linha-sel { background: var(--laranja-pal) !important; }

.barra-selecao {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--azul); color: var(--branco);
  border-radius: 10px; padding: 12px 18px; margin-bottom: 14px;
  animation: aparecer 0.2s var(--ease);
}
.barra-selecao > span { font-size: 0.82rem; font-weight: 700; margin-right: auto; }
.barra-selecao .btn { padding: 7px 14px; font-size: 0.74rem; }
.btn-icone-escuro {
  background: rgba(255,255,255,0.18); border: none; color: var(--branco);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 0.9rem;
}
.btn-icone-escuro:hover { background: rgba(255,255,255,0.32); }

/* ---------- Ações rápidas na ficha ---------- */
.acoes-rapidas {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--cinza-cl);
}
.acao-rapida {
  font-family: var(--font); font-size: 0.74rem; font-weight: 700;
  padding: 7px 14px; border-radius: 100px; cursor: pointer;
  background: var(--creme); border: 1px solid var(--cinza-cl);
  color: var(--cinza); text-decoration: none; transition: all 0.2s;
}
.acao-rapida:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-pal); }
#acaoWhatsApp:hover { border-color: #25D366; color: #128C7E; background: #e3f5ef; }

/* ---------- Painel de dados ---------- */
.dados-corpo { padding: 22px 26px 40px; display: flex; flex-direction: column; gap: 18px; }
.dados-bloco {
  background: var(--creme); border: 1px solid var(--cinza-cl);
  border-radius: 10px; padding: 16px 18px;
}
.dados-bloco.destaque-aviso { background: var(--laranja-pal); border-color: #f0d5c4; }
.dados-bloco h3 {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--azul); margin-bottom: 8px;
}
.dados-bloco p { font-size: 0.82rem; color: var(--cinza); line-height: 1.55; }
.dados-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.dados-estado { margin-top: 10px; font-size: 0.82rem; font-weight: 700; }
.dados-estado.ok { color: var(--verde); }
.dados-estado.alerta { color: var(--vermelho); }

/* Pré-visualização da importação */
.import-previa {
  margin-top: 14px; padding: 14px; background: var(--branco);
  border-radius: 10px; border: 1px solid var(--cinza-cl);
}
.import-previa p { font-size: 0.82rem; color: var(--escuro); }
.import-cols { font-size: 0.74rem !important; color: var(--cinza) !important; margin-top: 4px; }
.import-previa ul {
  list-style: none; margin: 10px 0; display: flex; flex-direction: column; gap: 4px;
}
.import-previa li { font-size: 0.82rem; color: var(--cinza); }
.import-previa .btn { margin-top: 8px; background: var(--azul); color: var(--branco); }

/* ---------- Alunos da família ---------- */
.bloco-alunos {
  background: var(--azul-pal); border-radius: 10px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.alunos-topo { display: flex; align-items: center; gap: 10px; }
.alunos-topo .bloco-titulo { margin-bottom: 0; color: var(--azul); }
.btn-add-aluno:hover { background: var(--azul); color: var(--branco); border-color: var(--azul); }

#listaAlunos { display: flex; flex-direction: column; gap: 10px; }
.aluno-cartao {
  background: var(--branco); border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.aluno-topo { display: flex; align-items: center; gap: 8px; }
.aluno-num {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--azul);
}
/* Dentro do cartão do aluno: campos mais compactos e sempre contidos */
.aluno-cartao .linha-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
}
.aluno-cartao label { gap: 5px; min-width: 0; font-size: 0.62rem; }
.aluno-cartao input {
  padding: 9px 11px; font-size: 0.82rem; width: 100%; min-width: 0;
}

.btn-remover-aluno {
  margin-left: auto; background: none; border: none; font-size: 1.15rem;
  color: var(--cinza-cl); cursor: pointer; padding: 0 6px; border-radius: 6px;
  line-height: 1; transition: all 0.2s;
}
.btn-remover-aluno:hover { color: var(--vermelho); background: var(--vermelho-pal); }
.alunos-vazio {
  font-size: 0.82rem; color: var(--cinza); font-style: italic;
  text-align: center; padding: 14px; background: var(--branco); border-radius: 10px;
}


/* ---------- Encarregado e alunos: duas colunas ---------- */
.cel-ee { min-width: 190px; }
.cel-alunos { min-width: 210px; }

/* Coluna do encarregado */
.ficha-pessoa { display: flex; flex-direction: column; gap: 2px; }
.ficha-pessoa > strong {
  font-size: 0.9rem; font-weight: 700; color: var(--escuro); line-height: 1.3;
}
.marca-proprio {
  font-size: 0.62rem; font-weight: 700; color: var(--laranja-esc);
  letter-spacing: 0.03em;
}
.ficha-contactos {
  display: flex; flex-direction: column; gap: 1px;
  font-size: 0.74rem; line-height: 1.45;
}
.ficha-contactos a { color: var(--azul-mid); text-decoration: none; }
.ficha-contactos a:hover { text-decoration: underline; }

/* Telefone com botão de WhatsApp ao lado */
.linha-tel { display: inline-flex; align-items: center; gap: 6px; }
.btn-wa {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.03em;
  color: #128C7E !important; background: #e3f5ef;
  padding: 2px 7px; border-radius: 100px; text-decoration: none !important;
  white-space: nowrap; transition: all 0.2s;
}
.btn-wa:hover { background: #25D366; color: var(--branco) !important; }

/* Coluna dos alunos */
.ficha-alunos { display: flex; flex-direction: column; gap: 7px; }
.ficha-aluno {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 9px; border-left: 2px solid var(--azul-pal);
}
.ficha-aluno > strong {
  font-size: 0.82rem; font-weight: 600; color: var(--escuro); line-height: 1.3;
}
.pastilha-ano {
  align-self: flex-start; font-size: 0.62rem; font-weight: 700;
  color: var(--azul); background: var(--azul-pal);
  padding: 2px 8px; border-radius: 100px; white-space: nowrap;
}
.sem-alunos { color: var(--cinza-cl); }

/* ---------- Dados obrigatórios em falta ---------- */
.aviso-falta {
  background: var(--vermelho-pal); color: var(--vermelho);
  border-radius: 10px; padding: 9px 12px; font-size: 0.74rem;
  font-weight: 600; text-transform: none; letter-spacing: normal;
  line-height: 1.45; margin-top: -6px;
}
.falta-tag {
  display: inline-block; margin-top: 3px; font-size: 0.6rem;
  font-weight: 700; padding: 1px 7px; border-radius: 100px;
  background: var(--vermelho-pal); color: var(--vermelho);
  white-space: nowrap; cursor: help;
}
/* Colunas com largura contida; o texto quebra em vez de ser cortado */
.cel-ee { min-width: 200px; max-width: 300px; }
.cel-alunos { min-width: 150px; max-width: 220px; }
.cel-ee, .cel-alunos { word-break: break-word; overflow-wrap: anywhere; }
/* emails longos não podem esticar a coluna */
.ficha-contactos a { word-break: break-all; }
.falta-tag { white-space: normal !important; }

/* ---------- Tentativas de contacto ---------- */
.bloco-tentativas {
  background: var(--azul-pal); border-radius: 10px; padding: 14px;
}
.tentativas-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tentativas-topo .bloco-titulo { margin-bottom: 0; color: var(--azul); }
.btn-tentativa:hover { background: var(--azul); color: var(--branco); border-color: var(--azul); }

.tentativas-lista { display: flex; gap: 8px; flex-wrap: wrap; }
.tentativa {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 10px; font-size: 0.74rem;
  text-transform: none; letter-spacing: normal;
}
.tentativa.vazia {
  width: 32px; height: 32px; justify-content: center;
  border: 1.5px dashed var(--cinza-cl); color: var(--cinza-cl);
  font-weight: 800; padding: 0;
}
.tentativa.feita { background: var(--branco); border: 1px solid var(--cinza-cl); }
.tentativa.feita strong {
  width: 18px; height: 18px; border-radius: 50%; background: var(--azul);
  color: var(--branco); display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800; flex-shrink: 0;
}
.tentativa.feita em { font-style: normal; font-weight: 600; color: var(--escuro); }
.tentativa.feita > span { color: var(--cinza); font-size: 0.68rem; }
.tentativa-x {
  background: none; border: none; color: var(--cinza-cl); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 2px; transition: color 0.2s;
}
.tentativa-x:hover { color: var(--vermelho); }

.tentativas-nota {
  margin-top: 10px; font-size: 0.74rem; color: var(--cinza);
  text-transform: none; letter-spacing: normal;
}
.tentativas-nota.esgotado { color: var(--vermelho); font-weight: 700; }
.tentativas-nota.respondeu { color: var(--verde); font-weight: 700; }

/* ===== Registo de tentativas — linha do tempo ===== */

/* Botão + Registar tentativa (usa o estilo já existente .btn-tentativa) */
.vista-tent .btn-tentativa { margin-bottom: 12px; }

.tent-vazio {
  font-size: 0.74rem; color: var(--cinza); text-transform: none;
  letter-spacing: normal; padding: 4px 0;
}
.tl-proximo {
  display: inline-block; margin-top: 6px; font-size: 0.68rem; font-weight: 700;
  color: var(--laranja-esc); background: var(--laranja-pal, #fbe7da);
  padding: 2px 8px; border-radius: 100px;
}
.tent-apagar {
  border: none; background: none; color: var(--cinza-cl); font-size: 1.1rem;
  line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0;
}
.tent-apagar:hover { color: var(--vermelho); }

/* Linha do tempo */
.tent-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.tent-timeline::before {
  content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px;
  width: 2px; background: var(--cinza-cl);
}
.tl-item { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-icone {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  background: var(--branco); border: 2px solid var(--cinza-cl);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; z-index: 1;
}
.tl-item.respondeu .tl-icone { border-color: var(--verde); background: var(--verde-pal); }
.tl-corpo {
  flex: 1; background: var(--branco); border: 1px solid var(--cinza-cl);
  border-radius: 8px; padding: 8px 12px;
}
.tl-item.respondeu .tl-corpo { border-color: var(--verde); background: var(--verde-pal); }
.tl-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tl-topo strong {
  font-size: 0.8rem; color: var(--escuro); text-transform: none; letter-spacing: normal;
}
.tl-meta { display: block; font-size: 0.68rem; color: var(--cinza); margin-top: 2px; }
.tl-nota {
  margin: 6px 0 0; font-size: 0.76rem; color: var(--escuro);
  text-transform: none; letter-spacing: normal; white-space: pre-wrap;
}

/* Guiões de entrevista no painel do candidato */
.entrevista-bloco {
  background: var(--creme-q); border: 1px solid var(--cinza-cl);
  border-radius: 12px; margin-top: 10px; overflow: hidden;
}
.entrevista-bloco summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 12px 14px; list-style: none; user-select: none;
}
.entrevista-bloco summary::-webkit-details-marker { display: none; }
.entrevista-bloco summary::after {
  content: '⌄'; margin-left: auto; font-size: 1.1rem; color: var(--cinza);
  transition: transform 0.2s var(--ease); line-height: 1;
}
.entrevista-bloco[open] summary::after { transform: rotate(180deg); }
.entrevista-corpo { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.entrevista-p { display: flex; flex-direction: column; gap: 4px; }
.entrevista-p label { font-size: 0.78rem; font-weight: 600; color: var(--escuro); line-height: 1.3; }
.entrevista-p textarea {
  font-family: var(--font); font-size: 0.82rem; padding: 8px 10px;
  border: 1px solid var(--cinza-cl); border-radius: 8px; color: var(--escuro);
  resize: vertical; background: var(--branco);
}
.entrevista-p textarea:focus { outline: none; border-color: var(--laranja); }

/* Modal para registar uma tentativa */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(58,50,44,0.45); z-index: 90;
}
.modal-tent {
  position: fixed; z-index: 100; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: min(460px, 92vw);
  max-height: 90vh; overflow-y: auto;
  background: var(--branco); border-radius: 16px; padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.modal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-topo h3 { margin: 0; font-size: 1rem; color: var(--azul); }
.modal-corpo { display: flex; flex-direction: column; gap: 4px; }
.modal-corpo .ft-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-tent .btn-principal { background: var(--laranja); color: var(--branco); }

.modal-quem-intro { font-size: 0.82rem; color: var(--cinza); margin: 0 0 16px; }

/* Modal: gerir equipa */
.lista-equipa { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.membro-equipa {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--cinza-cl); border-radius: 8px; font-weight: 600;
}
.add-equipa { display: flex; gap: 8px; }
.add-equipa input {
  flex: 1; font-family: var(--font); font-size: 0.9rem; padding: 10px 12px;
  border: 1px solid var(--cinza-cl); border-radius: 8px;
}

/* Modal: entrar / criar conta — ecrã de bloqueio total, nada por trás deve
   ser visível antes do login (dados são partilhados pela equipa) */
#modalAuthFundo {
  background: var(--grad-laranja);
}
#modalAuthFundo::before {
  content: 'Ponto Parágrafo';
  position: fixed; top: 40px; left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--branco);
  opacity: 0.92;
}
.modal-auth {
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
  text-align: center;
}
.modal-auth .modal-topo { justify-content: center; margin-bottom: 6px; }
#formEntrar, #formRegistar, #formMudarPass { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-top: 6px; }
#formEntrar label, #formRegistar label, #formMudarPass label { font-size: 0.78rem; font-weight: 700; color: var(--cinza); }
#formEntrar input, #formRegistar input, #formMudarPass input {
  display: block; width: 100%; margin-top: 4px; font-family: var(--font); font-size: 0.92rem;
  padding: 10px 12px; border: 1px solid var(--cinza-cl); border-radius: 8px; box-sizing: border-box;
}
.modal-auth-erro { font-size: 0.82rem; color: var(--vermelho); font-weight: 600; margin: 12px 0 0; }
.modal-auth-info { font-size: 0.82rem; color: var(--verde); font-weight: 600; margin: 12px 0 0; }
.modal-auth-alternar {
  display: block; margin: 16px auto 0; background: none; border: none;
  font-family: var(--font); font-size: 0.78rem; font-weight: 700; color: var(--azul);
  cursor: pointer; text-decoration: underline;
}

/* Coluna de tentativas na lista: bolinhas clicáveis */
.cel-tentativas { width: 112px; }
.tentativas-col { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.bolas { display: flex; gap: 4px; }
.bola {
  width: 22px; height: 22px; border-radius: 50%; font-family: var(--font);
  font-size: 0.62rem; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.bola.feita { border: none; color: var(--branco); }
.bola.feita.sem-resposta { background: var(--cinza); }
.bola.feita.respondeu { background: var(--verde); }
.bola.feita:hover { opacity: 0.75; }
.bola.proxima {
  /* Degradê laranja suave, para chamar a atenção sem ser berrante */
  background: linear-gradient(145deg, #fdeade 0%, #fbd9c4 100%);
  border: 1.5px dashed var(--laranja-esc); color: var(--laranja-esc);
}
.bola.proxima:hover {
  background: var(--grad-laranja); color: var(--branco); border-style: solid; border-color: transparent;
}
.bola.vazia {
  background: none; border: 1.5px dashed var(--cinza-cl); color: var(--cinza-cl);
  cursor: default;
}
.tent-info { font-size: 0.68rem; color: var(--cinza); line-height: 1.3; }
.tent-info em { font-style: normal; opacity: 0.75; }
/* Vermelho só quando esgotou E ninguém respondeu */
.tentativas-col.esgotou .bola.feita.sem-resposta { background: var(--vermelho); }
.tentativas-col.esgotou .tent-info { color: var(--vermelho); font-weight: 600; }
.tentativas-col.com-resposta .tent-info { color: var(--verde); font-weight: 600; }

/* Tentativas na ficha, com detalhes */
.tentativa.feita.respondeu { border-color: var(--verde); background: var(--verde-pal); }
.tentativa.feita.respondeu strong { background: var(--verde); }
.t-detalhes { display: flex; flex-direction: column; gap: 1px; }
.t-detalhes span { font-size: 0.68rem; color: var(--cinza); }

/* Campos obrigatórios por preencher */
.campo-falta {
  border-color: var(--vermelho) !important;
  background: var(--vermelho-pal) !important;
}

/* ---------- Período experimental ---------- */
.bloco-experimental {
  background: var(--gold-pale, #f7ecd8); border-radius: 10px; padding: 14px;
}
.bloco-titulo {
  display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8a5f1e; margin-bottom: 10px;
}
/* Título de secção dentro do formulário */
.form > .bloco-titulo {
  color: var(--laranja-esc); margin-bottom: 2px; margin-top: 4px;
}
.form > .bloco-titulo:not(:first-of-type) {
  margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--cinza-cl);
}
.bloco-experimental input { background: var(--branco); }
.exp-info {
  margin-top: 10px; font-size: 0.74rem; font-weight: 600;
  text-transform: none; letter-spacing: normal;
}
.exp-info.decorrer  { color: var(--verde); }
.exp-info.terminado { color: var(--vermelho); }
.exp-info.futuro    { color: var(--azul); }

.exp-check {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 0.8rem; font-weight: 600; color: var(--azul-esc, #1f4e57);
  text-transform: none; letter-spacing: normal; cursor: pointer;
}
.exp-check input { width: auto; }
#expCustoLinha { margin-top: 8px; }
#expCustoInfo:not(:empty) { color: #8a5f1e; }

.exp-tag {
  display: inline-block; margin-top: 3px; margin-right: 3px;
  font-size: 0.62rem; font-weight: 700; padding: 2px 8px;
  border-radius: 100px; background: var(--gold-pale, #f7ecd8); color: #8a5f1e;
  white-space: nowrap;
}
.exp-tag.ultimo    { background: var(--laranja-pal); color: var(--laranja-esc); }
.exp-tag.terminado { background: var(--vermelho-pal); color: var(--vermelho); }

/* ---------- Aviso flutuante (anular) ---------- */
.aviso-flutuante {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--azul); color: var(--branco); z-index: 300;
  border-radius: 100px; padding: 12px 14px 12px 22px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 12px 36px rgba(31,78,87,0.32);
  font-size: 0.82rem; animation: subir 0.3s var(--ease);
}
@keyframes subir { from { transform: translate(-50%, 20px); opacity: 0; } }
.aviso-flutuante.sai { opacity: 0; transition: opacity 0.4s; }
.aviso-flutuante button {
  font-family: var(--font); font-size: 0.74rem; font-weight: 700;
  background: var(--branco); color: var(--azul); border: none;
  border-radius: 100px; padding: 7px 16px; cursor: pointer;
}
.aviso-flutuante button:hover { background: var(--azul-pal); }

/* ---------- Ajuda de atalhos ---------- */
.ajuda-atalhos {
  position: fixed; inset: 0; background: rgba(31,78,87,0.4); z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: aparecer 0.2s var(--ease);
}
.ajuda-caixa {
  background: var(--branco); border-radius: 16px; padding: 0 0 12px;
  width: min(420px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.ajuda-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 14px; border-bottom: 1px solid var(--cinza-cl);
}
.ajuda-topo h3 { font-family: var(--serif); font-size: 1.15rem; color: var(--azul); }
.ajuda-caixa ul { list-style: none; padding: 12px 24px; }
.ajuda-caixa li {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0; font-size: 0.82rem; color: var(--cinza);
}
.ajuda-caixa kbd {
  background: var(--creme-q); border: 1px solid var(--cinza-cl);
  border-radius: 6px; padding: 3px 9px; font-family: var(--font);
  font-size: 0.74rem; font-weight: 700; color: var(--escuro);
  min-width: 90px; text-align: center;
}

/* Coluna do estado: compacta, etiquetas empilhadas */
.cel-estado { width: 130px; }
.cel-estado > * { display: block; }
.cel-estado .tag-editavel { margin-bottom: 3px; }

/* Etiqueta de estado clicável (mudar sem abrir o contacto) */
.tag-editavel {
  font-family: var(--font); border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; font-size: 0.68rem;
  transition: filter 0.2s, transform 0.15s;
}
.tag-editavel:hover { filter: brightness(0.94); transform: translateY(-1px); }
.tag-seta { font-size: 0.62rem; opacity: 0.6; }

/* Menu de estados */
.menu-estado {
  position: absolute; z-index: 200;
  background: var(--branco); border: 1px solid var(--cinza-cl);
  border-radius: 10px; padding: 6px; min-width: 190px;
  box-shadow: 0 12px 36px rgba(31,78,87,0.2);
  animation: aparecer 0.15s var(--ease);
}
.menu-opcao {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  padding: 7px 8px; border-radius: 6px; transition: background 0.15s;
  font-family: var(--font); text-align: left;
}
.menu-opcao:hover { background: var(--creme); }
.menu-opcao.atual { background: var(--creme-q); }
.menu-check { margin-left: auto; color: var(--verde); font-weight: 800; font-size: 0.82rem; }

/* Etiqueta de lembrete na tabela */
.lembrete {
  display: inline-block; margin-top: 3px; font-size: 0.62rem;
  font-weight: 700; padding: 2px 8px; border-radius: 100px; white-space: nowrap;
}
.lembrete-atrasado { background: var(--vermelho-pal); color: var(--vermelho); }
.lembrete-hoje     { background: var(--laranja-pal); color: var(--laranja-esc); }
.lembrete-futuro   { background: var(--azul-pal); color: var(--azul); }

/* ---------- Agrupamento de tarefas ---------- */
.agrupar-por {
  font-family: var(--font); font-size: 0.74rem; font-weight: 600;
  padding: 7px 12px; border-radius: 100px; border: 1px solid var(--cinza-cl);
  background: var(--branco); color: var(--cinza); cursor: pointer; outline: none;
}
.agrupar-por:focus { border-color: var(--laranja); }

.pesquisa-tarefas {
  font-family: var(--font); font-size: 0.74rem;
  padding: 7px 14px; border-radius: 100px; border: 1px solid var(--cinza-cl);
  background: var(--branco); color: var(--texto); outline: none;
  min-width: 180px;
}
.pesquisa-tarefas:focus { border-color: var(--laranja); }
.pesquisa-tarefas::placeholder { color: var(--cinza); }
.grupo-cabeca {
  padding: 14px 22px 8px; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--azul);
  background: var(--creme); display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--cinza-cl);
}
.grupo-conta {
  background: var(--cinza-cl); color: var(--cinza); border-radius: 100px;
  padding: 1px 8px; font-size: 0.68rem;
}
.grupo-clicavel { cursor: pointer; transition: background 0.15s; }
.grupo-clicavel:hover { background: var(--creme-q); }
.grupo-seta {
  margin-left: auto; font-size: 0.68rem; font-weight: 600;
  color: var(--laranja-esc); text-transform: none; letter-spacing: 0.02em;
  opacity: 0; transition: opacity 0.2s;
}
.grupo-clicavel:hover .grupo-seta { opacity: 1; }

/* ---------- Automatizações ---------- */
.auto-cabeca {
  display: flex; align-items: flex-start; gap: 20px; margin-bottom: 24px;
}
.auto-titulo {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
  color: var(--azul); margin-bottom: 4px;
}
.auto-intro {
  font-size: 0.9rem; color: var(--cinza); line-height: 1.6; max-width: 560px;
}
.auto-cabeca .btn { margin-left: auto; flex-shrink: 0; background: var(--azul); color: var(--branco); }
.auto-cabeca .btn:hover { background: var(--azul-mid); }

/* Assistente passo a passo */
.assistente {
  background: var(--branco); border: 1px solid var(--cinza-cl);
  border-radius: 16px; padding: 8px 24px 22px; margin-bottom: 24px;
}
.passo { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid #f2eee9; }
.passo:last-of-type { border-bottom: none; }
.passo-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--laranja-pal); color: var(--laranja-esc);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.74rem; font-weight: 800;
}
.passo-corpo { flex: 1; }
.passo-pergunta {
  font-size: 0.9rem; font-weight: 700; color: var(--escuro); margin-bottom: 12px;
}
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao {
  font-family: var(--font); font-size: 0.82rem; font-weight: 600;
  padding: 9px 16px; border-radius: 100px; cursor: pointer;
  background: var(--creme); border: 1px solid var(--cinza-cl); color: var(--cinza);
  transition: all 0.2s;
}
.opcao:hover { border-color: var(--laranja); color: var(--laranja-esc); }
.opcao.escolhida { background: var(--azul); border-color: var(--azul); color: var(--branco); }

#assTexto {
  width: 100%; font-family: var(--font); font-size: 0.9rem;
  padding: 11px 14px; border: 1px solid var(--cinza-cl); border-radius: 10px;
  background: var(--creme); outline: none;
}
#assTexto:focus { border-color: var(--laranja); background: var(--branco); }
.sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sugestao {
  font-family: var(--font); font-size: 0.74rem; padding: 6px 12px;
  border-radius: 100px; cursor: pointer; background: none;
  border: 1px dashed var(--cinza-cl); color: var(--cinza); transition: all 0.2s;
}
.sugestao:hover { border-style: solid; border-color: var(--laranja); color: var(--laranja-esc); }

.assistente-acoes {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 18px; border-top: 1px solid var(--cinza-cl); margin-top: 4px;
}
.assistente-resumo {
  flex: 1; min-width: 240px; font-size: 0.82rem; color: var(--cinza); line-height: 1.5;
  background: var(--verde-pal); border-radius: 10px; padding: 12px 14px;
}
.assistente-resumo strong { color: var(--verde); }
.assistente-acoes > div { display: flex; gap: 8px; }

/* Lista das automatizações existentes */
.auto-estado {
  background: var(--branco); border: 1px solid var(--cinza-cl);
  border-radius: 16px; padding: 16px 18px; margin-bottom: 12px;
}
.auto-estado-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

/* Automatizações em toggle (details/summary) */
.auto-toggle {
  background: var(--branco); border: 1px solid var(--cinza-cl);
  border-radius: 14px; margin-bottom: 10px; overflow: hidden;
}
.auto-toggle summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 14px 18px; list-style: none; user-select: none;
}
.auto-toggle summary::-webkit-details-marker { display: none; }
.auto-toggle summary::after {
  content: '⌄'; margin-left: auto; font-size: 1.1rem; color: var(--cinza);
  transition: transform 0.2s var(--ease); line-height: 1;
}
.auto-toggle[open] summary::after { transform: rotate(180deg); }
.auto-toggle summary:hover { background: var(--creme-q); }
.auto-conta {
  font-size: 0.68rem; font-weight: 700; color: var(--cinza);
  background: var(--creme-q); border-radius: 100px; padding: 2px 10px;
}
.auto-toggle[open] .auto-conta { background: var(--azul-pal); color: var(--azul); }
.auto-toggle .auto-lista { padding: 0 18px 16px; }
.auto-quando { font-size: 0.74rem; font-weight: 600; color: var(--cinza); }
.auto-lista { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.auto-lista li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--creme); border-radius: 10px;
}
.auto-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.auto-texto strong { font-size: 0.82rem; font-weight: 600; color: var(--escuro); }
.auto-texto em { font-style: normal; font-size: 0.74rem; color: var(--cinza); }
.btn-remover-acao {
  flex-shrink: 0; font-family: var(--font); font-size: 0.68rem; font-weight: 700;
  background: var(--branco); border: 1px solid var(--cinza-cl); color: var(--cinza);
  cursor: pointer; padding: 5px 11px; border-radius: 100px; transition: all 0.2s;
  white-space: nowrap;
}
.btn-remover-acao:hover {
  color: var(--vermelho); background: var(--vermelho-pal); border-color: var(--vermelho-pal);
}
.auto-vazio-geral {
  font-size: 0.82rem; color: var(--cinza); font-style: italic;
  text-align: center; padding: 30px;
}
.auto-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ---------- Troca de vista (lista / funil) ---------- */
.troca-vista { display: flex; gap: 2px; background: var(--cinza-cl); border-radius: 100px; padding: 2px; }
.tv-btn {
  font-size: 0.9rem; padding: 6px 13px; border: none; border-radius: 100px;
  background: none; color: var(--cinza); cursor: pointer; transition: all 0.2s;
}
.tv-btn.ativa { background: var(--branco); color: var(--azul); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }

/* ---------- Funil (colunas) ---------- */
.funil {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; align-items: start;
}
.coluna { background: var(--creme-q); border-radius: 16px; padding: 12px; min-height: 180px; }
.coluna-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.coluna-conta { margin-left: auto; font-size: 0.74rem; font-weight: 800; color: var(--cinza); }
.coluna-cartoes { display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 10px; transition: background 0.2s; }
.coluna-cartoes.por-cima { background: var(--laranja-pal); box-shadow: inset 0 0 0 2px var(--laranja); }
.coluna-vazia { text-align: center; color: var(--cinza-cl); font-size: 1.15rem; padding: 14px 0; }
.cartao {
  background: var(--branco); border: 1px solid var(--cinza-cl); border-radius: 10px;
  padding: 11px 13px; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.cartao:hover { box-shadow: 0 6px 18px rgba(31,78,87,0.12); transform: translateY(-2px); }
.cartao.a-arrastar { opacity: 0.4; }
.cartao strong { font-size: 0.82rem; color: var(--escuro); }
.cartao-ano, .cartao-meta { font-size: 0.68rem; color: var(--cinza); }
.cartao-valor { font-size: 0.74rem; font-weight: 700; color: var(--verde); margin-top: 2px; }

/* ---------- Nova tarefa avulsa ---------- */
.btn-mini { margin-left: 10px; padding: 7px 14px; font-size: 0.74rem; background: var(--azul); color: var(--branco); }
.btn-mini:hover { background: var(--azul-mid); }
.nova-tarefa {
  padding: 16px 22px; background: var(--azul-pal); border-bottom: 1px solid var(--cinza-cl);
  display: flex; flex-direction: column; gap: 10px;
}
.nova-tarefa > input {
  font-family: var(--font); font-size: 0.9rem; padding: 10px 14px;
  border: 1px solid var(--cinza-cl); border-radius: 10px; background: var(--branco); outline: none;
}
.nova-tarefa > input:focus { border-color: var(--laranja); }
.nt-linha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nt-linha label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cinza);
}
.nt-linha select, .nt-linha input {
  font-family: var(--font); font-size: 0.82rem; padding: 8px 11px;
  border: 1px solid var(--cinza-cl); border-radius: 6px; background: var(--branco);
  outline: none; font-weight: 500; text-transform: none; letter-spacing: normal;
}
.nt-acoes { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- Ações automáticas ---------- */
.aviso-acoes {
  background: var(--verde-pal); border-radius: 10px; padding: 12px 14px;
}
.acoes-previa { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.acoes-previa li {
  font-size: 0.74rem; color: var(--verde); padding-left: 16px; position: relative;
  text-transform: none; letter-spacing: normal; font-weight: 500;
}
.acoes-previa li::before { content: '·'; position: absolute; left: 5px; font-weight: 800; }
.acoes-previa em { font-style: normal; opacity: 0.7; }

/* ---------- Gráficos ---------- */
/* Análise dos Contactos: cartões numa grelha de 2 colunas */
.an-grelha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .an-grelha { grid-template-columns: 1fr; } }

/* Funil de conversão */
.funil-grafico { display: flex; flex-direction: column; gap: 14px; }
.funil-fase { display: flex; flex-direction: column; gap: 5px; }
.funil-info { display: flex; align-items: baseline; gap: 10px; }
.funil-rot { font-size: 0.82rem; color: var(--escuro); font-weight: 600; }
.funil-n {
  margin-left: auto; font-family: var(--serif); font-size: 1.15rem;
  font-weight: 600; color: var(--azul);
}
.funil-barra-fundo { height: 12px; background: var(--creme-q); border-radius: 100px; overflow: hidden; }
.funil-barra {
  height: 100%; border-radius: 100px;
  background: var(--grad-laranja);
  transition: width 0.7s var(--ease);
}
.funil-pct { font-size: 0.68rem; color: var(--cinza); }

/* Evolução mensal */
.legenda { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.legenda span { font-size: 0.74rem; color: var(--cinza); display: flex; align-items: center; gap: 6px; }
.ponto-legenda { width: 10px; height: 10px; border-radius: 6px; display: inline-block; }
.cor-entradas   { background: var(--azul-mid); }
.cor-conversoes { background: var(--verde); }
.cor-saidas     { background: var(--laranja); }

.grafico-barras {
  display: flex; align-items: flex-end; gap: 6px; height: 180px;
  padding-bottom: 22px; position: relative;
}
.mes-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.mes-barras {
  flex: 1; width: 100%; display: flex; align-items: flex-end;
  justify-content: center; gap: 2px;
}
.mes-barra {
  width: 30%; max-width: 12px; min-height: 2px; border-radius: 6px 3px 0 0;
  transition: height 0.6s var(--ease);
}
.mes-rot {
  margin-top: 7px; font-size: 0.62rem; color: var(--cinza);
  text-transform: capitalize; white-space: nowrap;
}

/* Nota do filtro de recuperação */
.nota-filtro {
  background: var(--gold-pale, #f7ecd8); border-left: 3px solid #d9a441;
  border-radius: 0 10px 10px 0; padding: 12px 16px; margin-bottom: 16px;
  font-size: 0.82rem; color: var(--escuro); line-height: 1.5;
}
.nota-filtro.nota-aviso { background: var(--vermelho-pal); border-left-color: var(--vermelho); }

/* Barras horizontais */
.lista-barras { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.lista-barras li { display: grid; grid-template-columns: 1fr 90px 26px; align-items: center; gap: 10px; }
.barra-rotulo { font-size: 0.82rem; color: var(--escuro); }
.barra { height: 6px; border-radius: 6px; background: var(--cinza-cl); overflow: hidden; }
.barra-fill { display: block; height: 100%; border-radius: 6px; background: var(--grad-laranja); }
.barra-num { font-size: 0.74rem; font-weight: 700; color: var(--cinza); text-align: right; }
.sem-dados { font-size: 0.82rem; color: var(--cinza); font-style: italic; }

/* ---------- Utilizador (assina as notas) ---------- */
.utilizador {
  font-family: var(--font); font-size: 0.74rem; font-weight: 700;
  background: rgba(255,255,255,0.16); color: var(--branco);
  border: none; border-radius: 100px; padding: 7px 14px; cursor: default;
}
.utilizador::before { content: '👤 '; }

/* ---------- Notas de acompanhamento ---------- */
.notas { padding: 4px 26px 30px; border-top: 1px solid var(--cinza-cl); margin-top: 4px; }
.notas-titulo {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cinza);
  margin: 20px 0 12px; display: block;
}
.nota-nova { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.nota-nova textarea {
  font-family: var(--font); font-size: 0.9rem; color: var(--escuro);
  padding: 12px 14px; border: 1px solid var(--cinza-cl); border-radius: 10px;
  background: var(--creme); outline: none; resize: vertical;
  transition: border-color 0.2s, background 0.2s;
}
.nota-nova textarea:focus { border-color: var(--laranja); background: var(--branco); }
.nota-nova .btn { align-self: flex-start; background: var(--azul); color: var(--branco); }
.nota-nova .btn:hover { background: var(--azul-mid); }

.notas-lista { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.nota {
  background: var(--creme); border-left: 3px solid var(--laranja);
  border-radius: 0 10px 10px 0; padding: 12px 14px;
}
.nota-topo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.nota-topo strong { font-size: 0.74rem; font-weight: 700; color: var(--azul); }
.nota-topo span { font-size: 0.68rem; color: var(--cinza); }
.nota-apagar {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--cinza-cl); padding: 0 4px;
  transition: color 0.2s;
}
.nota-apagar:hover { color: var(--vermelho); }
.nota p { font-size: 0.82rem; color: var(--escuro); line-height: 1.55; }
.notas-vazio { font-size: 0.82rem; color: var(--cinza); font-style: italic; }

/* Última nota, na lista principal */

/* ---------- Histórico no painel ---------- */
.historico {
  background: var(--creme); border-radius: 10px;
  padding: 14px 16px; margin: 0 26px 30px;
}
.historico-titulo {
  display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cinza); margin-bottom: 10px;
}
.historico ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.historico li { display: flex; align-items: center; gap: 10px; }
/* Data editável no percurso */
.hist-editar {
  font-family: var(--font); font-size: 0.74rem; color: var(--cinza);
  background: var(--branco); border: 1px solid var(--cinza-cl);
  border-radius: 6px; padding: 4px 8px; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.hist-editar:hover, .hist-editar:focus {
  border-color: var(--laranja); color: var(--escuro); outline: none;
}

/* Campo "quando aconteceu" ao mudar de estado */
.campo-data-estado {
  background: var(--laranja-pal); border-radius: 10px; padding: 12px 14px;
}
.campo-data-estado small {
  font-size: 0.68rem; font-weight: 500; color: var(--laranja-esc);
  text-transform: none; letter-spacing: normal; line-height: 1.4;
}
.campo-data-estado input { background: var(--branco); }

/* ---------- Filtros ---------- */
/* Tudo numa linha: fases à esquerda (deslizam), ferramentas à direita */
.barra-filtros {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px; flex-wrap: nowrap;
}
.filtros {
  display: flex; gap: 6px; flex: 1; min-width: 0;
  overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.filtros::-webkit-scrollbar { display: none; }
.filtros .chip { flex-shrink: 0; }

/* Barra de ferramentas: pesquisa à esquerda, ações à direita */
.barra-ferramentas {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap;
}
.pesquisa {
  width: 170px; font-family: var(--font); font-size: 0.82rem;
  padding: 8px 14px; border-radius: 100px; border: 1px solid var(--cinza-cl);
  background: var(--branco); outline: none;
  transition: width 0.25s var(--ease), background 0.2s, border-color 0.2s;
}
.pesquisa:focus { width: 240px; border-color: var(--laranja); }
.ferr-direita { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.chip {
  font-family: var(--font); font-size: 0.74rem; font-weight: 600;
  padding: 8px 14px; border-radius: 100px; cursor: pointer;
  background: var(--branco); border: 1px solid var(--cinza-cl); color: var(--cinza);
  transition: all 0.2s var(--ease);
}
.chip:hover { border-color: var(--laranja); color: var(--laranja-esc); }
.chip.ativo { background: var(--azul); border-color: var(--azul); color: var(--branco); }
/* Chips do interesse principal (no formulário, escolha múltipla) */
.campo-interesse { display: flex; flex-direction: column; gap: 6px; }
.chips-interesse { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip-interesse { user-select: none; }
.chip-interesse.ativo {
  background: var(--laranja); border-color: var(--laranja); color: var(--branco);
}
.chip-interesse.ativo:hover { color: var(--branco); }
.chips-interesse.campo-falta {
  border: 1px dashed var(--vermelho); border-radius: 10px;
  padding: 8px; background: var(--vermelho-pal) !important;
}

/* Ponto com a cor da fase, no chip do filtro */
.ponto-cor {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cor-texto, var(--cinza)); flex-shrink: 0;
}
.chip-fase.ativo { background: var(--cor-texto); border-color: var(--cor-texto); color: var(--branco); }
.chip-fase.ativo .ponto-cor { background: var(--cor-fundo); }
.chip-fase:hover { border-color: var(--cor-texto); color: var(--cor-texto); }
.chip-fase.ativo:hover { color: var(--branco); }

/* Lápis e × só aparecem ao passar o rato no chip */
.chip { display: inline-flex; align-items: center; gap: 5px; }
.chip-editar, .chip-apagar {
  font-size: 0.74rem; opacity: 0; width: 0; overflow: hidden;
  transition: opacity 0.2s, width 0.2s; cursor: pointer;
}
.chip:hover .chip-editar { opacity: 0.55; width: 12px; }
.chip:hover .chip-apagar { opacity: 0.45; width: 10px; }
.chip-editar:hover { opacity: 1 !important; }
.chip-apagar:hover { opacity: 1 !important; color: var(--vermelho); }

/* Fase criada pelo centro */
.chip-criado { border-color: var(--azul-mid); }

/* Botão que abre o menu de vistas especiais */
.chip-vistas { font-weight: 700; margin-left: 6px; }
.chip-vistas.ativo { background: var(--azul); border-color: var(--azul); color: var(--branco); }

/* Menu das vistas especiais */
.menu-vistas {
  position: absolute; z-index: 200; min-width: 290px;
  background: var(--branco); border: 1px solid var(--cinza-cl);
  border-radius: 16px; padding: 6px;
  box-shadow: 0 14px 40px rgba(31,78,87,0.18);
  animation: aparecer 0.15s var(--ease);
}
.vista-opcao {
  width: 100%; display: flex; align-items: center; gap: 11px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 9px 10px; border-radius: 10px; font-family: var(--font);
  transition: background 0.15s;
}
.vista-opcao:hover { background: var(--creme); }
.vista-opcao.atual { background: var(--azul-pal); }
.vista-icone { font-size: 1rem; flex-shrink: 0; }
.vista-txt { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.vista-txt strong { font-size: 0.82rem; font-weight: 700; color: var(--escuro); }
.vista-txt em { font-style: normal; font-size: 0.68rem; color: var(--cinza); }
.vista-conta {
  font-size: 0.74rem; font-weight: 800; color: var(--azul);
  background: var(--azul-pal); border-radius: 100px; padding: 2px 9px;
  flex-shrink: 0;
}
.vista-conta.zero { color: var(--cinza-cl); background: var(--creme-q); }

/* Botão de criar fase nova */
.chip-nova {
  border-style: dashed; color: var(--azul-mid); font-weight: 800;
}
.chip-nova:hover { background: var(--azul-pal); border-color: var(--azul); border-style: solid; }


/* ---------- Tarefas da equipa ---------- */
.tarefas {
  background: var(--branco); border: 1px solid var(--cinza-cl);
  border-radius: 16px; margin-bottom: 16px; overflow: hidden;
}
.filtro-minhas {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 0.74rem; font-weight: 600; color: var(--cinza); cursor: pointer;
}
.filtro-minhas input { accent-color: var(--laranja); cursor: pointer; }
.tarefas-lista { list-style: none; }
.tarefa {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 22px; border-bottom: 1px solid #f2eee9;
}
.tarefa:last-child { border-bottom: none; }
.tarefa-check {
  width: 18px; height: 18px; margin-top: 2px; cursor: pointer;
  accent-color: var(--verde); flex-shrink: 0;
}
/* Prioridade: pastilha colorida + barra lateral */
.pastilha {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0; margin-left: 4px;
}
.pastilha-alta  { background: var(--vermelho); }
.pastilha-media { background: #d9a441; }
.pastilha-baixa { background: var(--cinza-cl); }
.tarefa.prio-alta  { box-shadow: inset 3px 0 0 var(--vermelho); }
.tarefa.prio-media { box-shadow: inset 3px 0 0 #d9a441; }
.tarefa.prio-baixa { box-shadow: inset 3px 0 0 var(--cinza-cl); }
/* atrasada continua a sobrepor-se */
.tarefa.tarefa-atrasada { box-shadow: inset 3px 0 0 var(--vermelho), inset 0 0 0 1px rgba(179,38,30,0.12); }

/* Avatar de quem é a tarefa / quem escreveu */
.quem {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800; color: var(--branco);
  letter-spacing: 0.02em;
}
.quem-todos { background: var(--azul); }
.quem-pequeno { width: 22px; height: 22px; font-size: 0.62rem; }
/* Tarefa atribuída a mim: destaque subtil */
.tarefa-minha { background: #fffdf9; }
.tarefa-minha .tarefa-texto { font-weight: 600; }

.tarefa-corpo { flex: 1; cursor: pointer; }
.tarefa-texto { display: block; font-size: 0.9rem; color: var(--escuro); line-height: 1.45; }
.tarefa-meta { display: block; margin-top: 3px; font-size: 0.74rem; color: var(--cinza); }
.tarefa-meta strong { color: var(--azul); font-weight: 700; }
.tarefa-meta em { font-style: normal; font-weight: 700; color: var(--laranja-esc); }
.tarefa-atrasada { box-shadow: inset 3px 0 0 var(--vermelho); }
/* Tarefa concluída: fica riscada, com lixo ao lado. Só sai se a eliminarem. */
.tarefa-feita { opacity: 0.55; }
.tarefa-feita .tarefa-texto { text-decoration: line-through; }
.tarefa-feita .quem { filter: grayscale(0.7); }
.prazo.feita { background: var(--verde-pal); color: var(--verde); }
.tarefa-lixo {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 1rem; opacity: 0.35; padding: 4px 6px; border-radius: 6px;
  transition: opacity 0.2s, background 0.2s;
}
.tarefa-lixo:hover { opacity: 1; background: var(--vermelho-pal); }

/* Botão de editar tarefa (aparece a par do lixo) */
.tarefa-editar {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 0.95rem; opacity: 0.35; padding: 4px 7px; border-radius: 6px;
  color: var(--azul); transition: opacity 0.2s, background 0.2s;
}
.tarefa-editar:hover { opacity: 1; background: var(--azul-pal); }

/* Mini-formulário de edição inline da tarefa */
.tarefa-em-edicao { display: block; }
.editar-tarefa { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.editar-tarefa .et-texto {
  font-family: var(--font); font-size: 0.9rem; padding: 9px 12px;
  border: 1px solid var(--cinza-cl); border-radius: 10px; outline: none;
}
.editar-tarefa .et-texto:focus { border-color: var(--laranja); }
.et-linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.et-linha label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--cinza);
}
.et-linha select, .et-linha input {
  font-family: var(--font); font-size: 0.82rem; padding: 7px 10px;
  border: 1px solid var(--cinza-cl); border-radius: 10px; outline: none; background: var(--branco);
}
.et-linha select:focus, .et-linha input:focus { border-color: var(--laranja); }
.et-acoes { display: flex; gap: 8px; justify-content: flex-end; }
.prazo {
  display: inline-block; margin-left: 6px; font-weight: 700;
  padding: 2px 8px; border-radius: 100px; background: var(--azul-pal); color: var(--azul);
}
.prazo.hoje { background: var(--laranja-pal); color: var(--laranja-esc); }
.prazo.atrasado { background: var(--vermelho-pal); color: var(--vermelho); }
.tarefa-vazio { padding: 22px; text-align: center; font-size: 0.82rem; color: var(--cinza); }

/* Tarefa dentro da nota */
.nota-com-tarefa { border-left-color: var(--azul); }
.nota-feita { opacity: 0.6; }
.nota-feita p { text-decoration: line-through; }
.nota-tarefa {
  display: inline-block; margin-top: 8px; font-size: 0.74rem;
  padding: 4px 10px; border-radius: 100px;
  background: var(--azul-pal); color: var(--azul); font-weight: 600;
}
.nota-tarefa.atrasada { background: var(--vermelho-pal); color: var(--vermelho); }
.nota-tarefa.feita { background: var(--verde-pal); color: var(--verde); }
.btn-tarefa {
  display: block; margin-top: 8px; font-family: var(--font);
  font-size: 0.68rem; font-weight: 700; color: var(--azul);
  background: none; border: 1px solid var(--cinza-cl); border-radius: 100px;
  padding: 5px 12px; cursor: pointer; transition: all 0.2s;
}
.btn-tarefa:hover { background: var(--azul); color: var(--branco); border-color: var(--azul); }

/* Caixa de seleção com texto ao lado (não empilhado) */
.form label.check-tarefa,
.check-tarefa {
  display: flex; flex-direction: row; align-items: center; gap: 9px;
  font-size: 0.74rem; font-weight: 600; color: var(--cinza);
  text-transform: none; letter-spacing: normal; cursor: pointer;
  padding: 2px 0;
}
.check-tarefa input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; margin: 0; padding: 0;
  accent-color: var(--laranja); cursor: pointer;
}
.tarefa-campos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 12px; background: var(--azul-pal); border-radius: 10px;
}

/* ---------- Filtros avançados ---------- */
.btn-filtros {
  font-family: var(--font); font-size: 0.9rem; font-weight: 700;
  width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
  background: none; border: none; color: var(--cinza);
  transition: all 0.2s; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-filtros:hover, .btn-filtros.aberto { background: var(--creme-q); color: var(--laranja-esc); }
/* com filtros ativos mostra o número, em destaque */
.btn-filtros.com-filtros { background: var(--laranja); color: var(--branco); font-size: 0.74rem; }
.btn-filtros.com-filtros:hover { background: var(--laranja-esc); color: var(--branco); }

/* Variante maior, com fundo sempre visível (barra de ferramentas dos Contactos) */
.btn-filtros-lg {
  width: 40px; height: 40px; font-size: 1.15rem;
  background: var(--branco); border: 1px solid var(--cinza-cl); color: var(--azul);
}
.btn-filtros-lg:hover { background: var(--azul-pal); border-color: var(--azul-mid); color: var(--azul); }

/* Legenda (tooltip) própria: aparece por cima do botão ao passar o rato */
.tem-legenda { position: relative; }
.tem-legenda::after {
  content: attr(data-legenda);
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--escuro); color: var(--branco); font-family: var(--font);
  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  padding: 6px 11px; border-radius: 8px;
  opacity: 0; pointer-events: none; z-index: 50;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.tem-legenda::before {
  content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent; border-top-color: var(--escuro);
  opacity: 0; pointer-events: none; z-index: 50;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.tem-legenda:hover::after, .tem-legenda:hover::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Email a todos os contactos da lista */
.btn-email-todos { color: var(--azul-mid); }
.btn-email-todos:hover { background: var(--azul-pal); color: var(--azul); }
.btn-email-todos:disabled { opacity: 0.3; cursor: default; }
.btn-email-todos:disabled:hover { background: none; }

.filtros-avancados {
  background: var(--branco); border: 1px solid var(--cinza-cl);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 18px;
}
.fa-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px;
}
.fa-grid label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cinza);
}
.fa-grid select, .fa-grid input {
  font-family: var(--font); font-size: 0.82rem; color: var(--escuro);
  padding: 9px 12px; border: 1px solid var(--cinza-cl); border-radius: 10px;
  background: var(--creme); outline: none; font-weight: 500;
  text-transform: none; letter-spacing: normal;
}
.fa-grid select:focus, .fa-grid input:focus { border-color: var(--laranja); background: var(--branco); }
.fa-acoes {
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--cinza-cl);
}
.fa-resultado { font-size: 0.82rem; font-weight: 700; color: var(--azul); }
.btn-ghost-escuro {
  margin-left: auto; background: var(--creme-q); color: var(--cinza);
}
.btn-ghost-escuro:hover { background: var(--cinza-cl); color: var(--escuro); }

/* ---------- Tabela ---------- */
.tabela-wrap {
  background: var(--branco); border: 1px solid var(--cinza-cl);
  border-radius: 16px; overflow-x: auto;   /* desliza se não couber */
}
.tabela { width: 100%; border-collapse: collapse; min-width: 900px; }
.tabela th {
  text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--cinza); padding: 14px 18px;
  border-bottom: 1px solid var(--cinza-cl); background: var(--creme-q);
  white-space: nowrap;
}
/* Todas as células alinham ao topo, para que numa linha alta o Estado,
   os Contactos e a Entrada fiquem à mesma altura e não descaiam. */
.tabela td { padding: 11px 18px; font-size: 0.82rem; border-bottom: 1px solid #f2eee9; vertical-align: top; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tbody tr { cursor: pointer; transition: background 0.15s; }
/* Linhas alternadas num laranja muito claro, para se seguir a linha com o olho */
.tabela tbody tr:nth-child(even) { background: #fdf6f1; }
.tabela tbody tr:hover { background: var(--laranja-pal); }
.cel-data { font-size: 0.82rem; color: var(--cinza); white-space: nowrap; }

/* Etiquetas de estado */
.tag {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  padding: 5px 12px; border-radius: 100px; white-space: nowrap;
  /* cor por omissão — as fases criadas pelo centro usam esta */
  background: var(--azul-pal); color: var(--azul);
}
/* As cores de cada fase são geradas pelo JS (aplicarCoresFases),
   para poderem ser escolhidas no lápis de cada fase. */

.vazio { padding: 48px 20px; text-align: center; color: var(--cinza); font-size: 0.9rem; }

/* ---------- Painel lateral ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(31,78,87,0.35);
  z-index: 60; animation: aparecer 0.25s var(--ease);
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.painel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 92vw);
  background: var(--branco); z-index: 61; overflow-y: auto;
  box-shadow: -8px 0 40px rgba(31,78,87,0.2);
  animation: entrar 0.32s var(--ease);
}
@keyframes entrar { from { transform: translateX(100%); } to { transform: translateX(0); } }
.painel-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px; border-bottom: 1px solid var(--cinza-cl);
  position: sticky; top: 0; background: var(--branco); z-index: 1;
}
.painel-topo h2 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--azul); }
.fechar {
  background: none; border: none; font-size: 2.1rem; line-height: 1;
  color: var(--cinza); cursor: pointer; padding: 0 4px;
}
.fechar:hover { color: var(--escuro); }

/* Botão secundário pequeno (acrescentar aluno, registar tentativa…) */
.btn-add-aluno, .btn-tentativa, .btn-add-acao {
  margin-left: auto; font-family: var(--font); font-size: 0.68rem; font-weight: 700;
  background: var(--branco); border: 1px solid var(--cinza-cl); border-radius: 100px;
  padding: 7px 14px; color: var(--azul); cursor: pointer;
  transition: all 0.2s var(--ease); white-space: nowrap;
}
.btn-add-aluno:hover, .btn-tentativa:hover, .btn-add-acao:hover {
  background: var(--azul); color: var(--branco); border-color: var(--azul);
}

/* ---------- Formulário ---------- */
.form { padding: 18px 26px 40px; display: flex; flex-direction: column; gap: 10px; }

/* Secções recolhíveis, para a ficha não ser uma parede de campos */
.grupo {
  border: 1px solid var(--cinza-cl); border-radius: 10px;
  background: var(--branco); overflow: hidden;
}
.grupo > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer; list-style: none;
  user-select: none; transition: background 0.15s;
}
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary::before {
  content: '▸'; color: var(--cinza); font-size: 0.74rem;
  transition: transform 0.2s var(--ease); flex-shrink: 0;
}
.grupo[open] > summary::before { transform: rotate(90deg); }
.grupo > summary:hover { background: var(--creme); }
.grupo-nome {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--azul); flex: 1;
}
/* Contador de campos por preencher, visível mesmo com a secção fechada */
.grupo-aviso {
  font-size: 0.62rem; font-weight: 700; padding: 2px 9px;
  border-radius: 100px; background: var(--vermelho-pal); color: var(--vermelho);
  white-space: nowrap;
}
.grupo-aviso:empty { display: none; }
/* aviso informativo (não é erro) */
.grupo-aviso.neutro { background: var(--azul-pal); color: var(--azul); }
.grupo-corpo {
  padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 14px;
}

.form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cinza);
}
.form input, .form select, .form textarea {
  font-family: var(--font); font-size: 0.9rem; color: var(--escuro);
  padding: 11px 14px; border: 1px solid var(--cinza-cl); border-radius: 10px;
  background: var(--creme); outline: none; transition: border-color 0.2s, background 0.2s;
  text-transform: none; letter-spacing: normal; font-weight: 500;
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--laranja); background: var(--branco);
}
.form textarea { resize: vertical; }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.form-acoes .btn-principal { background: var(--azul); color: var(--branco); }
.form-acoes .btn-principal:hover { background: var(--azul-mid); }
.form-acoes .btn-perigo { margin-right: auto; }

/* ---------- Calendário ---------- */
.cal-topo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.cal-mes {
  font-family: var(--font-titulo, var(--font)); font-size: 1.3rem; font-weight: 700;
  color: var(--azul); text-transform: capitalize; min-width: 190px; text-align: center;
}
.cal-legenda {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 0.68rem; color: var(--cinza);
}
.cal-ponto { width: 9px; height: 9px; border-radius: 100px; display: inline-block; }
.cal-ponto-prazo { background: var(--laranja); }
.cal-ponto-exp { background: var(--azul-mid); margin-left: 10px; }

.cal-grelha {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; width: 100%;
  background: var(--cinza-cl); border: 1px solid var(--cinza-cl);
  border-radius: 10px; overflow: hidden;
}
.cal-dia-nome {
  background: var(--branco); text-align: center; padding: 8px 0;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cinza);
}
.cal-celula {
  background: var(--branco); min-height: 96px; padding: 6px; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.cal-fora { background: #faf9f8; }
.cal-fora .cal-num { color: var(--cinza-cl); }
.cal-hoje { background: var(--azul-pal); }
.cal-num { font-size: 0.74rem; font-weight: 600; color: var(--texto); }
.cal-hoje .cal-num {
  background: var(--azul); color: var(--branco); border-radius: 100px;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
}
.cal-eventos { display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; }
.cal-evento {
  font-family: var(--font); font-size: 0.62rem; text-align: left;
  border: none; border-radius: 4px; padding: 2px 5px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; width: 100%; min-width: 0; box-sizing: border-box;
}
.cal-evento-prazo { background: #fbe6da; color: var(--laranja-esc, #b3491c); }
.cal-evento-exp { background: var(--azul-pal); color: var(--azul); }
.cal-evento-rec { background: #efe7f5; color: #6b3f8c; }
.cal-evento:hover { filter: brightness(0.96); }
.cal-evento-feita { opacity: 0.55; text-decoration: line-through; }
.cal-mais { font-size: 0.6rem; color: var(--cinza); padding-left: 3px; }
.cal-ponto-rec { background: #6b3f8c; margin-left: 10px; }

/* Seletor de vistas do calendário */
.cal-vistas {
  display: inline-flex; gap: 2px; background: var(--creme-q); padding: 3px; border-radius: 100px;
}
.cal-v-btn {
  font-family: var(--font); font-size: 0.7rem; font-weight: 700; border: none;
  background: none; color: var(--cinza); cursor: pointer; padding: 5px 12px;
  border-radius: 100px; transition: all 0.2s var(--ease);
}
.cal-v-btn.ativo { background: var(--branco); color: var(--azul); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
#calNovaTarefa { background: var(--laranja); color: var(--branco); }

/* Vista semanal */
.cal-semana {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--cinza-cl); border: 1px solid var(--cinza-cl);
  border-radius: 10px; overflow: hidden;
}
.cal-sem-dia { background: var(--branco); min-height: 260px; padding: 8px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.cal-sem-dia.cal-hoje { background: var(--azul-pal); }
.cal-sem-cab { display: flex; align-items: baseline; justify-content: space-between; }
.cal-sem-nome { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; color: var(--cinza); letter-spacing: 0.05em; }
.cal-sem-num { font-size: 1rem; font-weight: 700; color: var(--escuro); }
.cal-sem-eventos { display: flex; flex-direction: column; gap: 4px; }
.cal-sem-eventos .cal-evento { white-space: normal; font-size: 0.66rem; padding: 4px 6px; }
.cal-sem-vazio { color: var(--cinza-cl); font-size: 0.8rem; }

/* Vista agenda */
.cal-agenda { display: flex; flex-direction: column; gap: 4px; }
.cal-agenda-vazio { color: var(--cinza); font-size: 0.86rem; padding: 24px; text-align: center; }
.cal-ag-dia {
  display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start;
  padding: 12px 14px; border-bottom: 1px solid var(--cinza-cl);
}
.cal-ag-hoje { background: var(--azul-pal); border-radius: 8px; }
.cal-ag-passou { opacity: 0.6; }
.cal-ag-data { font-size: 0.8rem; font-weight: 700; color: var(--azul); text-transform: capitalize; }
.cal-ag-eventos { display: flex; flex-direction: column; gap: 6px; }
.cal-ag-eventos .cal-evento { white-space: normal; font-size: 0.76rem; padding: 6px 10px; }

/* Menu de ações de um evento */
.menu-evento { min-width: 180px; }
.menu-evento button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 14px; font-family: var(--font); font-size: 0.8rem; color: var(--escuro);
  cursor: pointer;
}
.menu-evento button:hover { background: var(--creme-q); color: var(--laranja-esc); }

/* ===================== RECRUTAMENTO ===================== */
.rec-cabeca {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.rec-titulo { margin: 0; font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--azul); }
.rec-intro { margin: 4px 0 0; font-size: 0.86rem; color: var(--cinza); max-width: 60ch; }
.rec-cabeca .btn-principal { background: var(--laranja); color: var(--branco); flex-shrink: 0; }

/* Resumo por fase */
.rec-resumo {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px;
}
.rec-stat {
  background: var(--branco); border: 1px solid var(--cinza-cl); border-radius: 12px;
  padding: 12px 10px; cursor: pointer; text-align: left; font-family: var(--font);
  transition: all 0.2s var(--ease); display: flex; flex-direction: column; gap: 4px;
}
.rec-stat:hover { border-color: var(--laranja); transform: translateY(-2px); }
.rec-stat-num { font-size: 1.5rem; font-weight: 800; color: var(--escuro); line-height: 1; }
.rec-stat-label { font-size: 0.68rem; font-weight: 600; color: var(--cinza); }

/* Funil: colunas horizontais que deslizam */
.rec-funil {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start;
}
.rec-vazio, .rec-coluna-vazia {
  font-size: 0.82rem; color: var(--cinza); padding: 8px 4px;
}
.rec-vazio { padding: 40px 20px; text-align: center; max-width: 44ch; margin: 0 auto; }

.rec-coluna {
  flex: 0 0 240px; background: var(--creme); border: 1px solid var(--cinza-cl);
  border-top: 3px solid var(--cinza); border-radius: 12px; padding: 12px;
}
/* Cor no topo de cada coluna, por fase */
.rec-coluna.fase-laranja  { border-top-color: #e0662f; }
.rec-coluna.fase-azul     { border-top-color: #1f4e57; }
.rec-coluna.fase-dourado  { border-top-color: #b8860b; }
.rec-coluna.fase-roxo     { border-top-color: #6b3f8c; }
.rec-coluna.fase-rosa     { border-top-color: #a83a6b; }
.rec-coluna.fase-verde    { border-top-color: #2e7d54; }
.rec-coluna.fase-cinzento { border-top-color: #9ca3af; }

.rec-coluna-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.rec-coluna-nome { font-size: 0.78rem; font-weight: 700; color: var(--escuro); }
.rec-coluna-conta {
  font-size: 0.7rem; font-weight: 700; color: var(--cinza);
  background: var(--branco); border-radius: 100px; padding: 1px 8px; min-width: 22px; text-align: center;
}
.rec-coluna-corpo { display: flex; flex-direction: column; gap: 8px; }

/* Cartão de candidato */
.rec-cartao {
  background: var(--branco); border: 1px solid var(--cinza-cl); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; text-align: left; font-family: var(--font);
  display: flex; flex-direction: column; gap: 4px; transition: all 0.2s var(--ease); width: 100%;
}
.rec-cartao:hover { border-color: var(--laranja); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.rec-cartao strong { font-size: 0.84rem; color: var(--escuro); }
.rec-cartao-area { font-size: 0.72rem; color: var(--azul); font-weight: 600; }
.rec-cartao-meta {
  display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.66rem; color: var(--cinza); font-weight: 600;
}
.rec-cartao-proximo {
  font-size: 0.66rem; font-weight: 700; color: var(--laranja-esc);
  background: var(--laranja-pal); border-radius: 100px; padding: 2px 8px; align-self: flex-start;
}

/* Painel do candidato — anexo de CV, percurso e notas */
.bloco-cv, .bloco-passos, .bloco-notas-cand {
  background: var(--creme-q); border-radius: 12px; padding: 14px; margin-top: 8px;
}
.cv-zona { margin-top: 8px; }
.cv-vazio { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cv-anexado {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--branco); border: 1px solid var(--cinza-cl); border-radius: 8px; padding: 8px 12px;
}
.cv-anexado a { color: var(--azul); font-weight: 700; font-size: 0.8rem; text-decoration: none; }
.cv-anexado a:hover { text-decoration: underline; }
.cv-remover {
  border: none; background: none; color: var(--cinza-cl); font-size: 1.2rem;
  line-height: 1; cursor: pointer; flex-shrink: 0;
}
.cv-remover:hover { color: var(--vermelho); }

.passos-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.passos-topo .bloco-titulo { margin-bottom: 0; color: var(--azul); }
.passos-nota {
  font-size: 0.74rem; color: var(--cinza); text-transform: none;
  letter-spacing: normal; margin: 0 0 10px;
}

/* Etiqueta "candidato" nas tarefas e evento de recrutamento no calendário */
.tag-rec {
  font-size: 0.6rem; font-weight: 700; color: #6b3f8c; background: #efe7f5;
  padding: 1px 7px; border-radius: 100px; margin-left: 4px;
}
.tag-obrig {
  font-size: 0.62rem; font-weight: 700; color: #8a5f1e; background: #fdf0d9;
  padding: 1px 8px; border-radius: 100px;
}
.cal-evento-rec { background: #efe7f5; color: #6b3f8c; }
.cal-evento-obrig { background: #fdf0d9; color: #8a5f1e; }

/* Barra de email no painel do candidato */
.cand-email-barra { margin-top: 10px; }

/* Automatizações de recrutamento na aba */
.auto-sep { height: 1px; background: var(--cinza-cl); margin: 34px 0 24px; }
.rec-auto-sub {
  font-size: 0.82rem; font-weight: 700; color: var(--azul);
  margin: 18px 0 10px; text-transform: uppercase; letter-spacing: 0.04em;
}
.rec-email-card {
  background: var(--branco); border: 1px solid var(--cinza-cl);
  border-radius: 10px; margin-bottom: 8px; overflow: hidden;
}
.rec-email-card summary {
  cursor: pointer; padding: 12px 14px; display: flex; align-items: center;
  gap: 10px; font-size: 0.8rem;
}
.rec-email-assunto { color: var(--cinza); font-weight: 600; }
.rec-email-corpo {
  padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px;
}
.rec-email-corpo label { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; font-weight: 700; color: var(--cinza); }
.rec-email-corpo input, .rec-email-corpo textarea {
  font-family: var(--font); font-size: 0.82rem; padding: 8px 10px;
  border: 1px solid var(--cinza-cl); border-radius: 8px; color: var(--escuro);
}
.rec-email-guardar { align-self: flex-start; background: var(--laranja); color: var(--branco); }

/* Modal de email */
.modal-email { width: min(560px, 94vw); }
.em-dica { color: var(--cinza); font-size: 0.7rem; }

/* ===================== SIMULADOR DE LUCROS ===================== */
.sim-resumo {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px;
}
.sim-stat {
  background: var(--branco); border: 1px solid var(--cinza-cl); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.sim-stat-num { font-size: 1.5rem; font-weight: 800; color: var(--escuro); line-height: 1.1; }
.sim-stat-label { font-size: 0.7rem; font-weight: 600; color: var(--cinza); }
.sim-stat-receita { border-top: 3px solid var(--azul); }
.sim-lucro { border-top: 3px solid var(--verde); }
.sim-lucro .sim-stat-num { color: var(--verde); }
.sim-prejuizo { border-top: 3px solid var(--vermelho); }
.sim-prejuizo .sim-stat-num { color: var(--vermelho); }

/* Análise automática */
.sim-analise {
  background: var(--branco); border: 1px solid var(--cinza-cl); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 20px;
}
.sim-analise-titulo { margin: 0 0 10px; font-size: 0.9rem; color: var(--azul); }
.sim-analise-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sim-p {
  display: flex; gap: 10px; align-items: flex-start; font-size: 0.84rem;
  color: var(--escuro); padding: 8px 12px; border-radius: 8px; line-height: 1.4;
}
.sim-p-bom   { background: var(--verde-pal); }
.sim-p-aviso { background: #fdf0d9; }
.sim-p-mau   { background: var(--vermelho-pal); }
.sim-p-info  { background: var(--creme-q); }

/* Tabelas de entrada */
.sim-grelha { display: flex; flex-direction: column; gap: 18px; }
.sim-bloco {
  background: var(--branco); border: 1px solid var(--cinza-cl); border-radius: 12px; padding: 16px;
}
.sim-bloco-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sim-bloco-topo h3 { margin: 0; font-size: 0.95rem; color: var(--azul); }
.sim-sub { font-size: 0.72rem; font-weight: 500; color: var(--cinza); margin-left: 6px; }
.sim-dica { font-size: 0.72rem; color: var(--cinza); margin: 10px 0 0; }
.sim-vazio { font-size: 0.8rem; color: var(--cinza); padding: 8px 0; }

.sim-th, .sim-tr {
  display: grid; gap: 8px; align-items: center;
}
.sim-tabela-aulas .sim-th, .sim-tabela-aulas .sim-tr {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 32px;
}
.sim-tabela-desp .sim-th, .sim-tabela-desp .sim-tr {
  grid-template-columns: 3fr 1fr 32px;
}
.sim-th {
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--cinza); padding: 0 4px 6px;
}
.sim-tr { margin-bottom: 6px; }
.sim-tr input {
  font-family: var(--font); font-size: 0.82rem; padding: 7px 9px;
  border: 1px solid var(--cinza-cl); border-radius: 8px; color: var(--escuro); width: 100%;
}
.sim-tr input:focus { outline: none; border-color: var(--laranja); }
.sim-x {
  border: none; background: none; color: var(--cinza-cl); font-size: 1.2rem;
  line-height: 1; cursor: pointer; justify-self: center;
}
.sim-x:hover { color: var(--vermelho); }

/* ===================== VISTAS DE GRÁFICO (Análise Contactos + Finanças) ===================== */
.vg-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.vg-seletor {
  display: inline-flex; gap: 2px; background: var(--creme-q); padding: 3px; border-radius: 100px;
}
.vg-opcao {
  font-family: var(--font); font-size: 0.72rem; font-weight: 700; border: none;
  background: none; color: var(--cinza); cursor: pointer; padding: 6px 14px;
  border-radius: 100px; transition: all 0.2s var(--ease);
}
.vg-opcao.ativo { background: var(--branco); color: var(--azul); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* Tabela (dentro de <ul class="lista-barras">) */
.vg-tabela-cab {
  display: grid !important; grid-template-columns: 1fr 80px !important;
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--cinza); border-bottom: 2px solid var(--cinza-cl); padding-bottom: 6px;
}
.vg-tabela-linha {
  display: grid !important; grid-template-columns: 1fr 80px !important;
  padding: 6px 0; border-bottom: 1px solid var(--creme-q);
}

/* Gráfico circular */
.vg-circular-wrap { display: flex !important; align-items: center; gap: 22px; flex-wrap: wrap; padding: 8px 0; }
.vg-circular { width: 140px; height: 140px; border-radius: 50%; flex-shrink: 0; }
.vg-legenda-circular { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; }
.vg-legenda-circular li { font-size: 0.8rem; color: var(--escuro); display: flex; align-items: center; gap: 8px; }
.vg-legenda-circular em { font-style: normal; color: var(--cinza); font-size: 0.72rem; margin-left: 4px; }
.vg-ponto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* ===================== FINANÇAS ===================== */
/* Seletor de secção e de período */
.fin-vistas, .fin-periodo-barra .fin-vistas {
  display: inline-flex; gap: 2px; background: var(--creme-q); padding: 3px; border-radius: 100px;
}
.fin-v-btn, .fin-p-btn {
  font-family: var(--font); font-size: 0.72rem; font-weight: 700; border: none;
  background: none; color: var(--cinza); cursor: pointer; padding: 6px 14px;
  border-radius: 100px; transition: all 0.2s var(--ease);
}
.fin-v-btn.ativo, .fin-p-btn.ativo { background: var(--branco); color: var(--azul); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.fin-seccao { display: flex; flex-direction: column; gap: 18px; }

/* Barra do mês */
.fin-mes-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fin-mes-input {
  font-family: var(--font); font-size: 0.9rem; font-weight: 700; color: var(--azul);
  padding: 8px 12px; border: 1px solid var(--cinza-cl); border-radius: 10px;
}
.fin-mes-estado { font-size: 0.8rem; color: var(--cinza); text-transform: capitalize; }

/* Barra do período (análise) */
.fin-periodo-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fin-ano-sel {
  font-family: var(--font); font-size: 0.82rem; font-weight: 700; color: var(--escuro);
  padding: 7px 12px; border: 1px solid var(--cinza-cl); border-radius: 10px;
}

/* Tabela de entradas por serviço (4 colunas) */
.sim-tabela-serv .sim-th, .sim-tabela-serv .sim-tr {
  grid-template-columns: 2fr 1.2fr 1.2fr 0.8fr;
}
.fin-serv-nome { font-size: 0.84rem; font-weight: 600; color: var(--escuro); align-self: center; }
.fin-margem { font-size: 0.82rem; font-weight: 700; color: var(--azul); align-self: center; text-align: right; }

/* Linhas de análise (tabelas de evolução e serviços) */
.fin-linha {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 0.7fr; gap: 8px;
  padding: 9px 10px; align-items: center; font-size: 0.82rem;
  border-bottom: 1px solid var(--cinza-cl);
}
.fin-linha:last-child { border-bottom: none; }
.fin-cab {
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--cinza); border-bottom: 2px solid var(--cinza-cl);
}
.fin-l-nome { font-weight: 600; color: var(--escuro); }
.fin-pos-txt { color: var(--verde); font-weight: 700; }
.fin-neg-txt { color: var(--vermelho); font-weight: 700; }
.fin-linha.fin-neg { background: #fdf3f2; }

/* Comparação de plataformas de marketing: 7 colunas próprias (mais que a .fin-linha genérica) */
.fin-linha.mkt-cab-plat {
  grid-template-columns: 1.3fr 0.9fr 0.7fr 0.8fr 0.9fr 0.8fr 0.9fr;
}

/* Alerta de queda de conversão numa origem paga */
.mkt-alerta {
  background: #fdf3f2; border: 1px solid #f3c9c4; border-radius: 12px;
  padding: 12px 16px; margin-bottom: 4px;
}
.mkt-alerta-item { margin: 0; font-size: 0.84rem; color: var(--vermelho); font-weight: 600; }
.mkt-alerta-item + .mkt-alerta-item { margin-top: 6px; }

/* Indicadores-chave (KPIs) */
.fin-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.fin-kpi {
  background: var(--creme-q); border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 3px; border-left: 3px solid var(--cinza-cl);
}
.fin-kpi-num { font-size: 1.15rem; font-weight: 800; color: var(--escuro); line-height: 1.15; }
.fin-kpi-label { font-size: 0.66rem; font-weight: 700; color: var(--cinza); text-transform: uppercase; letter-spacing: 0.03em; }
.fin-kpi-dica { font-size: 0.68rem; color: var(--cinza); }
.fin-kpi-bom { border-left-color: var(--verde); }
.fin-kpi-bom .fin-kpi-num { color: var(--verde); }
.fin-kpi-aviso { border-left-color: #d9a441; }
.fin-kpi-mau { border-left-color: var(--vermelho); }
.fin-kpi-mau .fin-kpi-num { color: var(--vermelho); }

/* Setas de crescimento nas comparações */
.fin-linha em { font-style: normal; font-size: 0.72rem; font-weight: 700; }
.fin-seta-cima { color: var(--verde); }
.fin-seta-baixo { color: var(--vermelho); }
.fin-seta-neutra { color: var(--cinza); }

/* Barras "para onde vai o dinheiro" */
.fin-barra-linha {
  display: grid; grid-template-columns: 1.6fr 3fr 1.4fr; gap: 12px;
  align-items: center; padding: 7px 4px; font-size: 0.8rem;
}
.fin-barra-nome { font-weight: 600; color: var(--escuro); }
.fin-barra-track { background: var(--cinza-cl); border-radius: 100px; height: 12px; overflow: hidden; }
.fin-barra-fill { display: block; height: 100%; background: var(--laranja); border-radius: 100px; }
.fin-barra-fill.fill-bom { background: var(--verde); }
.fin-barra-fill.fill-mau { background: var(--vermelho); }
.fin-barra-val { font-size: 0.76rem; color: var(--cinza); text-align: right; font-weight: 600; }
.fin-barra-sobra { border-top: 1px solid var(--cinza-cl); margin-top: 4px; padding-top: 10px; }

/* Os 3 números do mês, sempre à vista */
.fin-3numeros {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--azul); color: var(--branco); border-radius: 12px;
  padding: 12px 18px; margin-bottom: 18px;
}
.fin-3n-titulo { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; }
.fin-3n-item { font-size: 0.92rem; }
.fin-3n-item b { font-size: 1.05rem; margin-right: 4px; }
.fin-3numeros .fin-pos-txt { color: #8fe3b0; }
.fin-3numeros .fin-neg-txt { color: #f3b0ab; }

/* Movimentos do banco */
.fin-mes-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-filtros { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.fin-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 0.7rem; font-weight: 700; color: var(--cinza); text-transform: uppercase; letter-spacing: 0.03em; }
.fin-mov-linha {
  display: grid; grid-template-columns: 80px 1.4fr 140px 200px 100px 60px; gap: 10px;
  align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--cinza-cl); font-size: 0.8rem;
}
.fin-mov-cab {
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--cinza); border-bottom: 2px solid var(--cinza-cl);
}
.fin-mov-data { color: var(--cinza); font-size: 0.74rem; }
.fin-mov-desc { overflow: hidden; color: var(--escuro); display: flex; flex-direction: column; gap: 2px; }
.fin-mov-det { font-size: 0.68rem; color: var(--azul); font-weight: 600; }
.fin-mov-at { display: flex; flex-direction: column; gap: 4px; }
.fin-mov-aluno, .fin-mov-tipo, .fin-mov-horas, .fin-mov-prof {
  font-family: var(--font); font-size: 0.72rem; padding: 4px 6px;
  border: 1px solid var(--cinza-cl); border-radius: 6px; background: var(--branco); color: var(--escuro); width: 100%;
}
.fin-auto { font-size: 0.7rem; }
.fin-mov-acoes { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.fin-check {
  border: 1px solid var(--cinza-cl); background: var(--branco); color: var(--cinza-cl);
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.fin-check:hover { border-color: var(--verde); color: var(--verde); }
.fin-check.on { background: var(--verde); border-color: var(--verde); color: var(--branco); }
/* Movimento por confirmar: fundo levemente destacado */
.fin-mov-linha:not(.mov-confirmado):not(.fin-mov-cab) { background: #fffdf7; }
.fin-mov-linha.mov-confirmado { opacity: 0.72; }

/* Quem pagou / quem falta pagar */
.fin-pagamentos {
  background: var(--branco); border: 1px solid var(--cinza-cl); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px;
}
.fin-pag-topo { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.84rem; color: var(--escuro); }
.fin-pag-falta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fin-pag-chip {
  font-size: 0.72rem; font-weight: 600; color: var(--vermelho);
  background: var(--vermelho-pal); border-radius: 100px; padding: 3px 10px;
  display: inline-flex; align-items: center; gap: 6px;
}
.fin-pag-wa {
  font-size: 0.64rem; font-weight: 700; color: #fff; background: #25d366;
  border-radius: 100px; padding: 1px 8px; text-decoration: none;
}
.fin-pag-wa:hover { filter: brightness(0.94); }
.fin-mov-valor { text-align: right; font-weight: 700; }
.fin-mov-cat {
  font-family: var(--font); font-size: 0.74rem; padding: 5px 8px;
  border: 1px solid var(--cinza-cl); border-radius: 8px; color: var(--escuro); background: var(--branco);
}
.fin-mov-linha.mov-entra { background: #f2f9f5; }

/* ===================== PÁGINA INICIAL (cockpit) ===================== */
/* Herói azul-petróleo com os 3 números do mês */
.ini-heroi {
  background: var(--azul); color: var(--branco); border-radius: 20px;
  padding: 24px 28px 28px; margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(31,78,87,0.18);
}
.ini-heroi-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.ini-saud { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; }
.ini-mes {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--azul-pal); opacity: 0.85;
}
.ini-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ini-num { display: flex; flex-direction: column; gap: 2px; }
.ini-num-v { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.ini-num-l { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--azul-pal); opacity: 0.9; }
.ini-num-destaque .ini-num-v { color: #d9a441; }   /* dourado da marca para o "sobrou" */

/* Cartões compactos */
.ini-cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ini-card {
  background: var(--branco); border: 1px solid var(--cinza-cl); border-radius: 16px; padding: 16px 18px;
}
.ini-card-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ini-card-tit { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cinza); }
.ini-card-n {
  font-size: 0.78rem; font-weight: 800; min-width: 24px; height: 24px; padding: 0 8px;
  border-radius: 100px; background: var(--creme-q); color: var(--azul);
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.ini-card-n-alerta { background: var(--vermelho-pal); color: var(--vermelho); }

.ini-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--creme-q); font-size: 0.84rem;
}
.ini-linha:last-child { border-bottom: none; }
.ini-txt { color: var(--escuro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-tag { font-size: 0.7rem; color: var(--cinza); white-space: nowrap; }
.ini-dir { font-size: 0.78rem; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ini-vermelho .ini-tag, .ini-vermelho .ini-dir { color: var(--vermelho); }
.ini-vermelho .ini-txt { font-weight: 600; }
.ini-click { cursor: pointer; }
.ini-click:hover { background: var(--creme-q); border-radius: 8px; padding-left: 6px; padding-right: 6px; }
.ini-wa { font-size: 0.62rem; font-weight: 700; color: #fff; background: #25d366; border-radius: 100px; padding: 1px 8px; text-decoration: none; }
.ini-wa:hover { filter: brightness(0.94); }
.ini-vazio { font-size: 0.82rem; color: var(--cinza); padding: 6px 0; }
.ini-mais { font-size: 0.72rem; color: var(--cinza); padding-top: 6px; }

/* Ações rápidas */
.ini-acoes { display: flex; flex-direction: column; gap: 8px; }
.ini-acao {
  font-family: var(--font); font-size: 0.84rem; font-weight: 700; text-align: left;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--cinza-cl);
  background: var(--creme-q); color: var(--azul); cursor: pointer; transition: all 0.15s var(--ease);
}
.ini-acao:hover { background: var(--azul-pal); border-color: var(--azul-mid); }

@media (max-width: 720px) {
  .ini-cartoes { grid-template-columns: 1fr; }
  .ini-numeros { gap: 14px; }
  .ini-num-v { font-size: 1.6rem; }
}

/* Modal de importação */
.modal-import { width: min(640px, 95vw); }
.imp-linha { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.imp-linha label { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; font-weight: 700; color: var(--cinza); flex: 1; min-width: 160px; }
.imp-linha select { font-family: var(--font); font-size: 0.82rem; padding: 7px 9px; border: 1px solid var(--cinza-cl); border-radius: 8px; }
.imp-previa-linha {
  display: grid; grid-template-columns: 80px 1fr 90px 130px; gap: 10px;
  font-size: 0.74rem; padding: 5px 0; border-bottom: 1px solid var(--creme-q); align-items: center;
}
.imp-cat { color: var(--azul); font-weight: 600; }

/* Poupanças */
.poup-config, .poup-registar { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.poup-config label, .poup-registar label { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; font-weight: 700; color: var(--cinza); }
.poup-config select, .poup-config input, .poup-registar input, .poup-registar select {
  font-family: var(--font); font-size: 0.85rem; padding: 8px 10px; border: 1px solid var(--cinza-cl); border-radius: 8px;
}
.poup-valor-wrap { display: flex; align-items: center; gap: 8px; }
.poup-valor-wrap input { width: 90px; }

/* Configuração dos potes de poupança */
.poup-potes-config { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.poup-pote-cfg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.poup-pote-nome {
  font-family: var(--font); font-size: 0.84rem; font-weight: 600; padding: 7px 10px;
  border: 1px solid var(--cinza-cl); border-radius: 8px; color: var(--escuro); min-width: 200px;
}
.poup-pote-pct { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--cinza); }

/* Tabela de preços a professores (reaproveita o padrão dos potes de poupança) */
.precos-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.poup-pote-pct input { width: 64px; font-family: var(--font); font-size: 0.84rem; padding: 7px 8px; border: 1px solid var(--cinza-cl); border-radius: 8px; text-align: right; }
.sim-stat .sim-sub { font-size: 0.66rem; color: var(--laranja-esc); margin-top: 2px; }

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .sim-resumo { grid-template-columns: repeat(2, 1fr); }
  .fin-kpis { grid-template-columns: repeat(2, 1fr); }
  .sim-tabela-serv { overflow-x: auto; }
  .sim-tabela-serv .sim-th, .sim-tabela-serv .sim-tr { min-width: 480px; }
  .fin-linha { font-size: 0.74rem; }
  .rec-resumo { grid-template-columns: repeat(3, 1fr); }
  .resumo { grid-template-columns: repeat(2, 1fr); }
  .topo-inner { padding: 14px 16px; }
  .topo-sub { display: none; }
  .container { padding: 20px 16px 60px; }

  /* Barra de filtros: pesquisa e ferramentas passam para baixo das fases */
  .barra-filtros { flex-wrap: wrap; }
  .barra-ferramentas { width: 100%; }
  .pesquisa { flex: 1; width: auto; }
  .pesquisa:focus { width: auto; }
  .ferr-direita { margin-left: 0; }

  /* Painel lateral ocupa o ecrã todo */
  .painel { width: 100%; }

  /* Tabela vira cartões */
  .tabela { min-width: 0; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr {
    border-bottom: 1px solid var(--cinza-cl); padding: 8px 0 14px;
  }
  .tabela td { border: none; padding: 5px 16px; vertical-align: top; }
  .tabela td::before {
    content: attr(data-rotulo); display: block;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--cinza); margin-bottom: 2px;
  }
  .cel-ee, .cel-alunos { max-width: 100%; }
  .linha-2 { grid-template-columns: 1fr; }

  /* Calendário: células mais baixas e legenda por baixo */
  .cal-legenda { margin-left: 0; width: 100%; }
  .cal-celula { min-height: 64px; padding: 4px; }
  .cal-evento { font-size: 0.56rem; }
}

/* Ecrãs muito pequenos: cartões numa coluna */
@media (max-width: 520px) {
  .resumo { grid-template-columns: 1fr; }
  .rec-resumo { grid-template-columns: repeat(2, 1fr); }
  .topo-acoes { gap: 6px; }
  .topo-acoes .btn { padding: 8px 12px; font-size: 0.72rem; }
  .topo-acoes .utilizador { padding: 6px 10px; font-size: 0.68rem; }
  .sync-estado { display: none; }   /* "Sincronizado" ocupa muito espaço num ecrã estreito */
  .wordmark { font-size: 1.1rem; }
}