/* Diário do bebê — complementa style.css */

:root {
  --kind-marco: #4f8a5b;
  --kind-evento: #c07a26;
  --kind-saude: #3f78a3;
  --kind-nota: #8a5f88;
  --kind-consulta: #2f8a86;
  --kind-pediatra: #3a6fb0;
  --kind-vacina: #b0466a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kind-marco: #8cc79b;
    --kind-evento: #e2b267;
    --kind-saude: #8dbbe0;
    --kind-nota: #c9a2c6;
    --kind-consulta: #7fcbc6;
    --kind-pediatra: #94b6e6;
    --kind-vacina: #ec9ab5;
  }
}

/* Cada tipo define --kind; marcador, etiqueta e linha do tempo leem dela */

.marco { --kind: var(--kind-marco); }
.evento { --kind: var(--kind-evento); }
.saude { --kind: var(--kind-saude); }
.nota { --kind: var(--kind-nota); }
.consulta { --kind: var(--kind-consulta); }
.pediatra { --kind: var(--kind-pediatra); }
.vacina { --kind: var(--kind-vacina); }

.dot-marco { background: var(--kind-marco); }
.dot-evento { background: var(--kind-evento); }
.dot-saude { background: var(--kind-saude); }
.dot-nota { background: var(--kind-nota); }
.dot-consulta { background: var(--kind-consulta); }
.dot-pediatra { background: var(--kind-pediatra); }
.dot-vacina { background: var(--kind-vacina); }
/* Previsto (vacina do calendário do SUS ainda não registrada): ponto vazado */
.dot-previsto { box-shadow: inset 0 0 0 1.5px var(--kind-vacina); }

/* Sete tipos: quebram em duas linhas em vez de espremer */
.kind-toggle {
  flex-wrap: wrap;
}

.kind-toggle .type-btn {
  flex: 1 1 22%;
}

.note-item.previsto {
  border-style: dashed;
}

.previsto-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.previsto-form input {
  width: auto;
}

.note-phone {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kind-pediatra);
}

/* Fica numa linha própria, abaixo do título ou do telefone do pediatra. */
.agenda-link {
  display: block;
  width: fit-content;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kind-consulta, inherit);
}

/* Formulário */

.form-row .time-field {
  flex: 0 0 120px;
}

/* Anotações do dia */

.note-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kind, var(--ink-2));
}

.note-title {
  display: block;
  margin-top: 1px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* "por Ana": quem escreveu, quando foi uma conta auxiliar (pai, avós) */
.note-author {
  font-size: 0.75rem;
  color: var(--ink-3);
}

.note-text {
  margin-top: 4px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Linha do tempo */

.timeline {
  list-style: none;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--line);
}

.timeline-item {
  position: relative;
}

.timeline-marker {
  position: absolute;
  left: 1px;
  top: 15px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kind, var(--ink-3));
  box-shadow: 0 0 0 3px var(--surface);
  z-index: 1;
}

.timeline-btn {
  display: block;
  width: 100%;
  padding: 9px 10px 9px 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.timeline-btn:hover {
  background: var(--surface-2);
}

.timeline-date {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}

.timeline-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.timeline-text {
  font-size: 0.82rem;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .form-row .time-field {
    flex-basis: 96px;
  }

  /* Vários tipos lado a lado no celular: o ponto sai para o nome caber */
  .kind-toggle .type-btn .dot {
    display: none;
  }
}

/* Link para a página dos marcos, no cabeçalho da linha do tempo */
.timeline-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kind-marco);
  text-decoration: none;
}