/* Painel Crater — paleta oficial CRATER (ver CRATER_BRAND.md).
   Cores de estado (vermelho/âmbar) são semânticas universais de propósito:
   marca não deve dizer "urgente", e a paleta da CRATER é toda em tons frios
   e areia, onde nada se destaca como alerta. */
:root {
  --dark:  #0C1D2C;
  --navy:  #11273C;
  --sand:  #C9C1B3;
  --warm:  #CBBEA5;
  --branco:#FFFFFF;
  --borda: rgba(201, 193, 179, 0.18);
  --critico: #F87171;
  --atencao: #FBBF24;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 64px;
  background: var(--dark);
  color: var(--branco);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------- topo */

.topo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 0 20px;
  border-bottom: 1px solid var(--borda);
}

.topo h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; }

.resumo { margin: 0; color: var(--sand); max-width: 56ch; }
.resumo strong { color: var(--branco); }

.topo-lado {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.leitura { color: var(--sand); font-size: 13px; }

.botao-leve {
  color: var(--warm);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
}
.botao-leve:hover { border-color: var(--warm); }

/* ---------------------------------------------------------------- lista */

.lista { max-width: 900px; margin: 0 auto; }

.grupo {
  background: var(--navy);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 20px;
}

.grupo h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contagem {
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
  background: var(--warm);
  border-radius: 20px;
  padding: 2px 9px;
}

/* O prazo aparece uma vez por etapa, não em cada linha: repetir a mesma
   informação em toda linha é ruído, não reforço. */
.regra {
  margin: 4px 0 14px;
  font-size: 13px;
  color: var(--sand);
}

.grupo ul { list-style: none; margin: 0; padding: 0; }

.linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0 9px 12px;
  border-top: 1px solid var(--borda);
  border-left: 3px solid transparent;
}
.linha:first-child { border-top: none; }

.linha.critico { border-left-color: var(--critico); }
.linha.atencao { border-left-color: var(--atencao); }

.quem { font-weight: 500; }
.tempo { color: var(--sand); font-size: 14px; }
.linha.critico .tempo { color: var(--critico); }
.linha.atencao .tempo { color: var(--atencao); }

.sem-dado { color: var(--sand); font-style: italic; }

.vazio {
  max-width: 900px;
  margin: 40px auto;
  color: var(--sand);
  text-align: center;
}

.faixa-erro {
  max-width: 900px;
  margin: 20px auto 0;
  padding: 12px 16px;
  border: 1px solid var(--atencao);
  border-radius: 8px;
  color: var(--atencao);
}

/* ---------------------------------------------------------------- login */

.entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.cartao-entrada {
  background: var(--navy);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 32px;
  width: min(360px, 92vw);
}

.cartao-entrada h1 { margin: 0; font-size: 20px; }
.cartao-entrada .sub { margin: 4px 0 24px; color: var(--sand); font-size: 14px; }

.cartao-entrada label {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--sand);
}

.cartao-entrada input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--dark);
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--branco);
  font-size: 15px;
}
.cartao-entrada input:focus { outline: none; border-color: var(--warm); }

.cartao-entrada button {
  width: 100%;
  margin-top: 8px;
  padding: 11px;
  background: var(--warm);
  color: var(--dark);
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.aviso-erro { color: var(--critico); font-size: 13px; margin: 0 0 14px; }

/* ------------------------------------------------- conversa dentro da linha */

/* A linha deixou de ser uma linha: além do tempo parado, ela carrega o que
   aconteceu na conversa. Sem isso o SDR que está tentando contato aparece
   igual ao lead esquecido. */
.linha {
  display: block;
  padding: 12px 0 12px 12px;
}

.cabecalho-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: baseline;
}

.linha.pede-acao { background: rgba(248, 113, 113, 0.05); }

.situacao {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--sand);
}

.situacao-alerta { color: var(--critico); }

.trecho {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--sand);
  opacity: 0.75;
  font-style: italic;
  max-width: 68ch;
}