:root {
  --bg: #fafaf8;
  --bg-card: #ffffff;
  --texto: #1c1c1a;
  --texto-suave: #6b6b66;
  --borda: #e4e3de;
  --acento: #2f6f4f;
  --acento-suave: #e7f2ec;
  --estrela: #c98a12;
  --erro: #b3423a;
  --meet: #3b6fb0;
  --pers: #2f6f4f;
  --block: #c98a12;
  --raio: 10px;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161715;
    --bg-card: #1f201d;
    --texto: #ecebe6;
    --texto-suave: #9a9a92;
    --borda: #33342f;
    --acento: #6fbf93;
    --acento-suave: #25332b;
    --estrela: #e3a82f;
    --erro: #e0766d;
    --meet: #7aa7de;
    --pers: #6fbf93;
    --block: #e3a82f;
  }
  button:not(.secundario):not(.perigo):not(.estrela):not(.btn-icone) { color: #10110f; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

main {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}

body.larga main { max-width: 960px; }

a { color: var(--acento); }

h1 { font-size: 18px; margin: 0; }

button {
  font-family: inherit;
  font-size: 15px;
  border: none;
  border-radius: var(--raio);
  padding: 10px 16px;
  cursor: pointer;
  background: var(--acento);
  color: #fff;
  touch-action: manipulation;
}

button.secundario {
  background: transparent;
  color: var(--texto-suave);
  border: 1px solid var(--borda);
}

button.perigo {
  background: transparent;
  color: var(--erro);
  border: 1px solid var(--erro);
}

button:disabled { opacity: 0.5; cursor: default; }

textarea, input[type="text"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], select {
  font-family: inherit;
  font-size: 16px; /* evita zoom automático no iOS */
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 10px 12px;
  background: var(--bg-card);
  color: var(--texto);
}

textarea, input[type="text"], input[type="password"], input[type="search"] { width: 100%; }

textarea:focus, input:focus, select:focus { outline: 2px solid var(--acento-suave); border-color: var(--acento); }

/* ── topo ── */
.topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 16px;
}

.topo .sub { display: block; font-size: 13px; color: var(--texto-suave); }
.topo .sub::first-letter { text-transform: uppercase; }

#sair {
  font-size: 13px;
  color: var(--texto-suave);
  background: none;
  border: none;
  padding: 4px;
}

/* ── navegação inferior ── */
nav.rodape {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--borda);
  display: flex;
  justify-content: space-around;
  gap: 4px;
  /* folga embaixo: o iOS reage a toques na borda de baixo (Siri, barra inicial) */
  padding: 4px 6px calc(env(safe-area-inset-bottom) + 16px);
}

nav.rodape a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-size: 14px;
  color: var(--texto-suave);
  text-decoration: none;
  border-radius: var(--raio);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

nav.rodape a:active { background: var(--acento-suave); }
nav.rodape a.ativo { color: var(--acento); font-weight: 600; }

/* ── controle segmentado ── */
.seg {
  display: inline-flex;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--bg-card);
}

.seg button {
  background: transparent;
  color: var(--texto-suave);
  border-radius: 0;
  padding: 8px 12px;
  font-size: 14px;
}

.seg button.ativo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }

/* ── captura ── */
.captura {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 10px;
  margin-bottom: 14px;
}

.captura textarea {
  border: none;
  padding: 6px 4px;
  resize: none;
  min-height: 44px;
  line-height: 1.4;
  overflow-y: auto;
}

.captura textarea:focus { outline: none; }

.captura-opcoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.captura-opcoes input[type="date"], .captura-opcoes select { padding: 7px 8px; font-size: 14px; max-width: 150px; }
.captura-opcoes .espaco { flex: 1; }
.captura[data-tipo="nota"] .so-tarefa { display: none; }

.barra-vista { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }

/* ── seções e listas ── */
.secao-titulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 22px 0 8px;
}

.secao-titulo .contagem { font-weight: 400; text-transform: none; letter-spacing: 0; }
.secao-titulo.estrelas { color: var(--estrela); }

.lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.duas-colunas { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
@media (min-width: 760px) { .duas-colunas { grid-template-columns: 1fr 1fr; } }

.vazio {
  color: var(--texto-suave);
  font-size: 14px;
  padding: 10px 2px;
}

.erro-msg { color: var(--erro); font-size: 14px; margin-top: 8px; }

/* ── item ── */
.item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 10px 10px 10px 12px;
}

.item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--acento);
}

.item-corpo { flex: 1; min-width: 0; }

.item-texto {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}

.item.feita .item-texto { color: var(--texto-suave); text-decoration: line-through; }

.item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--texto-suave);
}

.item-meta a { color: var(--texto-suave); }
.meta-data.atraso { color: var(--erro); font-weight: 600; }
.meta-data.hoje { color: var(--estrela); font-weight: 600; }

.tag-inline { color: var(--acento); text-decoration: none; font-weight: 600; }

.estrela {
  background: transparent;
  color: var(--texto-suave);
  font-size: 22px;
  line-height: 1;
  padding: 4px 6px;
  flex-shrink: 0;
  opacity: 0.55;
}

.estrela.ligada { color: var(--estrela); opacity: 1; }

.item.editando { display: block; }

.edicao textarea { min-height: 64px; line-height: 1.4; resize: vertical; }

.edicao-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.edicao-linha input[type="date"], .edicao-linha select { padding: 7px 8px; font-size: 14px; max-width: 170px; }

.edicao-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.edicao-acoes .espaco { flex: 1; }
.edicao-acoes button { padding: 8px 12px; font-size: 14px; }

/* ── agenda ── */
.agenda { display: flex; flex-direction: column; gap: 4px; }

.ag-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--meet);
  background: var(--bg-card);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: 14px;
}

.ag-linha.pers { border-left-color: var(--pers); }
.ag-linha.block { border-left-color: var(--block); }
.ag-linha.passou { opacity: 0.5; }
.ag-linha.feita .ag-titulo { text-decoration: line-through; color: var(--texto-suave); }
.ag-linha input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--acento); flex-shrink: 0; }
.ag-hora { font-size: 12px; color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ag-titulo { flex: 1; min-width: 0; }

.btn-icone {
  background: transparent;
  color: var(--texto-suave);
  padding: 2px 6px;
  font-size: 16px;
  opacity: 0.6;
}

details.ag-novo { margin-top: 8px; font-size: 14px; }
details.ag-novo summary { color: var(--texto-suave); cursor: pointer; padding: 4px 0; }
.ag-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ag-form input[type="text"] { flex: 1 1 200px; }

/* ── projetos ── */
.cartao {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px;
  color: var(--texto);
  text-decoration: none;
}

.cartao + .cartao { margin-top: 8px; }
.cartao-nome { display: block; font-size: 16px; font-weight: 600; }
.cartao-passo { display: block; font-size: 14px; margin-top: 4px; }
.cartao-passo.vazio-passo { color: var(--texto-suave); font-style: italic; }
.cartao-meta { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 6px; }

.selo {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--acento);
  background: var(--acento-suave);
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: 1px;
}

.novo-projeto { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.novo-projeto input[type="text"] { flex: 1 1 180px; }

.projeto-cabecalho input.nome {
  font-size: 20px;
  font-weight: 600;
  border-color: transparent;
  background: transparent;
  padding: 6px 4px;
}

.projeto-cabecalho input.nome:focus { border-color: var(--acento); background: var(--bg-card); }

.rotulo { display: block; font-size: 12px; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.03em; margin: 16px 0 6px; }
.projeto-notas { min-height: 140px; line-height: 1.5; resize: vertical; }
.add-item { display: flex; gap: 8px; margin-bottom: 10px; }
.projeto-rodape { display: flex; gap: 8px; margin-top: 28px; flex-wrap: wrap; }

/* ── notas ── */
.chips { display: flex; gap: 6px; overflow-x: auto; white-space: nowrap; padding: 8px 0 2px; -webkit-overflow-scrolling: touch; }

.chip {
  flex-shrink: 0;
  background: var(--acento-suave);
  color: var(--acento);
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 14px;
}

.chip.ativo { background: var(--acento); color: #fff; }

.data-cabecalho {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 20px 0 8px;
}

.rodape-exportar { margin-top: 28px; font-size: 13px; color: var(--texto-suave); text-align: center; }

/* ── login ── */
.tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding-bottom: 0; }
.tela-login main { max-width: 320px; }

.card-login {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px;
  text-align: center;
}

.card-login input { text-align: center; letter-spacing: 4px; font-size: 24px; margin: 16px 0; }