/* Painel da secretária. Tema claro, ciano da marca como estrutura, coral SÓ no que
   é urgente. Uso principal: celular, uma mão, entre atendimentos. A coluna de
   números à direita é o instrumento de leitura, por isso número tabular. */

:root {
  --tinta: #0f1720;
  --quieto: #6b7a89;
  --fundo: #f6f8fa;
  --papel: #ffffff;
  --ciano: #12b5c9;
  --coral: #ff5d73;
  --linha: #dbe3ea;
}

* { box-sizing: border-box }

html, body { margin: 0 }

body {
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---- barra de navegação: três destinos, sempre visíveis ---- */
.topo {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: stretch;
  gap: 2px;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  padding: 0 8px;
}

.topo button {
  flex: 1;
  min-height: 52px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--quieto);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.topo button[aria-current='true'] {
  color: var(--tinta);
  border-bottom-color: var(--ciano);
}

.topo button .conta {
  font-weight: 400;
  color: var(--quieto);
  font-variant-numeric: tabular-nums;
}

.topo .voltar {
  flex: 0 0 auto;
  min-width: 64px;
  color: var(--ciano);
  font-weight: 600;
}

main {
  max-width: 620px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}

/* ---- resumo: uma linha honesta, sem rótulo em caixa alta ---- */
.resumo {
  margin: 4px 0 16px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---- a lista: a urgência mora na borda esquerda ---- */
ul.agora, ul.clientes, ul.orfas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.linha {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha);
  border-radius: 10px;
  padding: 12px 14px;
}

.linha.urgente { border-left-color: var(--coral) }
.linha.atencao { border-left-color: var(--ciano) }
.linha.pronto  { border-left-color: var(--linha) }
.linha.inativo { opacity: .55 }

li.linha[data-cliente] { cursor: pointer }

.linha-topo {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.quem {
  font-weight: 650;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* o número é o que se lê batendo o olho: tabular, alinhado à direita, sem cor
   própria, porque a cor de atenção já está na borda */
.dias, .pct {
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

.dias small, .pct small {
  font-size: 12px;
  font-weight: 600;
  color: var(--quieto);
  margin-left: 1px;
}

.linha.urgente .dias { color: var(--coral) }

.oque {
  margin: 4px 0 0;
  color: var(--quieto);
  font-size: 14px;
}

/* trilha de progresso do onboarding: fina, sem número flutuando */
.trilha {
  margin-top: 10px;
  height: 3px;
  background: var(--linha);
  border-radius: 2px;
  overflow: hidden;
}

.trilha.grande { height: 5px; margin-top: 12px }
.trilha i { display: block; height: 100%; background: var(--ciano) }

/* ---- o gesto na própria linha ---- */
.resolver {
  margin-top: 12px;
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--ciano);
  border-radius: 8px;
  background: var(--papel);
  color: var(--ciano);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.resolver:active { background: var(--ciano); color: #fff }

/* ---- ficha do cliente ---- */
.ficha-topo { margin: 0 0 24px }
.ficha-topo h2 { font-size: 26px; letter-spacing: -0.02em; margin: 0 }

section { margin: 0 0 28px }

section h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--tinta);
}

.onboarding, .grupos, .tempo, .nota ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.onb, .item, .grupo {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.onb .marca {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--linha);
  border-radius: 5px;
}

.onb.feito .marca { background: var(--ciano); border-color: var(--ciano) }
.onb.feito .onb-titulo, .item.feito { color: var(--quieto); text-decoration: line-through }
.onb.na { opacity: .5 }
.onb-titulo { flex: 1 }

.grupo { flex-direction: column; align-items: flex-start; gap: 2px }
.opcional { color: var(--quieto); font-size: 13px; font-style: normal }

.nota {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.nota h3 { margin: 0 0 6px; font-size: 15px }
.nota p { margin: 0 0 8px; color: var(--tinta) }
.protegida { color: var(--coral); font-size: 13px }

.tempo .evento {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta);
  font-size: 14px;
}

.tempo .quando { color: var(--quieto); font-variant-numeric: tabular-nums; flex: 0 0 84px }

/* ---- formulários ---- */
#nova-nota, .form-pauta button, #form-nota button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ciano);
  border-radius: 8px;
  background: var(--papel);
  color: var(--ciano);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

#form-nota, .form-pauta { display: grid; gap: 8px; margin: 10px 0 14px }
#form-nota[hidden] { display: none }

input, textarea, select {
  font: inherit;
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta);
  width: 100%;
}

textarea { min-height: 96px; padding: 10px }
.orfa select { margin-top: 10px }

/* ---- estados vazios: convite, não recado triste ---- */
.vazio {
  background: var(--papel);
  border: 1px dashed var(--linha);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  color: var(--quieto);
}

.vazio-titulo { color: var(--tinta); font-weight: 700; font-size: 18px; margin: 0 0 6px }
.vazio p { margin: 0 }

.erro {
  background: var(--papel);
  border: 1px solid var(--coral);
  border-left: 3px solid var(--coral);
  border-radius: 10px;
  padding: 14px;
}

:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px }

@media (prefers-reduced-motion: no-preference) {
  .resolver, .topo button { transition: color .12s ease, background-color .12s ease }
}