/* Todos os valores visuais ficam aqui, em variáveis (ver style.md).
   Trocar uma cor ou um raio = mudar uma linha. */
:root {
  color-scheme: light; /* app sempre claro, mesmo com o iPhone no modo escuro */

  /* Base */
  --fundo: #FAF6EC;
  --texto: #000000;
  --neutro: #8A8A8A;
  --bege: #E6DEC8;

  /* Estados: cheia e clarinha */
  --seguiu: #8DB600;   --seguiu-clara: #CEDC8E;
  --livre: #9C0720;    --livre-clara: #DEAEAF;
  --descanso: #0197B4; --descanso-clara: #BCDEDE;
  --sono-ok: #F2C94C;  --sono-ok-clara: #F8E5A5;
  --fome: #F28C28;     --fome-clara: #F7CC9E;
  --dor: #6A4FA3;      --dor-clara: #D4CCEB;
  --vazio-clara: #FAF6EC;

  /* Tipografia */
  --fonte: ui-rounded, system-ui, sans-serif;
  --tam-titulo: 20px;
  --tam-secao: 13px;
  --tam-cartao: 15px;
  --tam-detalhe: 12px;
  --tam-campo: 16px;

  /* Formas */
  --toque-min: 44px;
  --raio-cartao: 16px;
  --raio-dia: 8px;
  --raio-quadradinho: 2px;
  --raio-pilula: 999px;
  --borda-cartao: 1.5px;
  --borda-dia: 1.5px;
  --borda-quadradinho: 1px;
  --borda-hoje: 2.5px;
  --espaco-cartoes: 8px;
  --espaco-dias: 4px;
  --espaco-quadradinhos: 2px;
  --sombra-barra: 0 4px 16px rgba(0, 0, 0, 0.12);
  --altura-barra: 60px;
  --altura-refeicao: 52px;
  --raio-mini: 10px; /* botão de qualidade do sono, dentro do cartão */
  --altura-dia: 50px;
  --quadradinho: 9px;
  --sono-largura: 32px;
  --sono-altura: 20px;
  --raio-sono: 4px;
  --altura-camada: 40px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--tam-cartao);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  /* Não deixa o conteúdo ficar sob o entalhe nem sob a barra inferior */
  padding: calc(env(safe-area-inset-top) + 12px) 16px
           calc(env(safe-area-inset-bottom) + var(--altura-barra) + 40px);
}

button, input, textarea {
  font: inherit;
  color: var(--texto);
}

button {
  /* Tira o visual padrão do navegador e o atraso/zoom de toque duplo */
  -webkit-appearance: none;
  appearance: none;
  background: var(--fundo);
  border: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

h1 {
  font-size: var(--tam-titulo);
  font-weight: 600;
  margin: 0;
}

.secao {
  font-size: var(--tam-secao);
  font-weight: 600;
  margin: 20px 4px 8px;
}

.detalhe {
  font-size: var(--tam-detalhe);
  color: var(--texto);
}

/* ---------- Cabeçalho com setas ---------- */

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

.seta {
  width: var(--toque-min);
  height: var(--toque-min);
  border-radius: var(--raio-pilula);
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seta:disabled {
  color: var(--neutro);
  opacity: 0.4;
  cursor: default;
}

/* ---------- Cartões ---------- */

.cartao {
  border: var(--borda-cartao) solid var(--texto);
  border-radius: var(--raio-cartao);
  background: var(--fundo);
  font-size: var(--tam-cartao);
}

.grade2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-cartoes);
  margin-bottom: var(--espaco-cartoes);
}

.bloco {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-cartoes);
  margin-bottom: var(--espaco-cartoes);
}

.espaco-acima { margin-top: 20px; }

/* Cartão de toque */
.toque {
  width: 100%;
  min-height: var(--toque-min);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-align: left;
  border: var(--borda-cartao) solid var(--texto);
}

.toque .nome { flex: 1; }
.toque .estado { font-size: var(--tam-detalhe); }
.toque .icone { font-size: 22px; width: 28px; text-align: center; }

.toque.grande { min-height: var(--altura-refeicao); }

/* Cartões pequenos (dores, resto do dia): nome em cima, estado embaixo */
.toque.pequeno {
  min-height: 64px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}
.toque.pequeno .nome { flex: none; }

/* Botão de qualidade do sono, dentro do cartão Sono */
.toque.mini {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--raio-mini);
  border-width: var(--borda-quadradinho);
  font-size: var(--tam-detalhe);
}
.toque.mini .estado { font-weight: 600; }

/* Cor de fundo conforme o estado (sempre a versão clarinha) */
[data-cor="vazio"]    { background: var(--vazio-clara); }
[data-cor="verde"]    { background: var(--seguiu-clara); }
[data-cor="vermelho"] { background: var(--livre-clara); }
[data-cor="azul"]     { background: var(--descanso-clara); }
[data-cor="amarelo"]  { background: var(--sono-ok-clara); }
[data-cor="laranja"]  { background: var(--fome-clara); }
[data-cor="lilas"]    { background: var(--dor-clara); }
[data-cor="bege"]     { background: var(--bege); }

/* Cartões de peso e sono */
.medida {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
}

.linha-numero {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
}

.linha-numero input {
  width: 100%;
  min-width: 0;
  min-height: var(--toque-min);
  font-size: 24px; /* no mínimo 16px, senão o iPhone dá zoom */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: none;
  border-bottom: var(--borda-quadradinho) solid var(--texto);
  border-radius: 0;
  background: transparent;
  padding: 0;
  outline: none;
}

.linha-numero input.invalido {
  border-bottom: 2px solid var(--livre);
}

/* Campos de texto (o que comi, horário da fome, nota) */
.texto {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-size: var(--tam-campo);
  resize: none;
  outline: none;
}

.texto[hidden] { display: none; }

/* Banheiro: nome à esquerda, − número + à direita */
.banheiro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 6px 14px;
  margin-bottom: var(--espaco-cartoes);
}

.contador {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contador .numero {
  min-width: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.redondo {
  width: var(--toque-min);
  height: var(--toque-min);
  border: var(--borda-cartao) solid var(--texto);
  border-radius: var(--raio-pilula);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Calendário ---------- */

.titulo-mes { flex: 1; text-align: center; }
.engrenagem { font-size: 22px; }

/* Botões de camada: cores definidas explicitamente para o navegador não mudar nada */
.camadas {
  display: flex;
  gap: var(--espaco-cartoes);
  margin-bottom: 14px;
}

.camada {
  flex: 1;
  min-height: var(--altura-camada);
  border: var(--borda-cartao) solid var(--texto);
  border-radius: var(--raio-pilula);
  background: var(--fundo);
  color: var(--texto);
  font-size: var(--tam-cartao);
}

.camada.ativa {
  background: var(--texto);
  color: var(--fundo);
}

.semana, .mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--espaco-dias);
}

.semana {
  font-size: 11px;
  text-align: center;
  margin-bottom: 4px;
}

/* Bloco do dia */
.dia {
  min-width: 0;
  height: var(--altura-dia);
  border: var(--borda-dia) solid var(--texto);
  border-radius: var(--raio-dia);
  background: var(--fundo);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-quadradinhos);
  padding-top: 3px;
}

.dia .num {
  font-size: 11px;
  line-height: 14px;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

.dia.hoje { border-width: var(--borda-hoje); padding-top: 2px; }
.dia.hoje .num { font-weight: 700; }

.dia.futuro {
  border-style: dashed;
  border-color: var(--neutro);
  color: var(--neutro);
}

.linha-q {
  display: flex;
  gap: var(--espaco-quadradinhos);
}

.quadradinho {
  display: inline-block;
  width: var(--quadradinho);
  height: var(--quadradinho);
  border: var(--borda-quadradinho) solid var(--texto);
  border-radius: var(--raio-quadradinho);
  flex: none;
}

.sono-ret {
  width: var(--sono-largura);
  height: var(--sono-altura);
  border: var(--borda-quadradinho) solid var(--texto);
  border-radius: var(--raio-sono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Legenda embaixo do calendário */
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 14px;
  font-size: var(--tam-detalhe);
}

.legenda .item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legenda .quadradinho {
  width: 12px;
  height: 12px;
}

/* ---------- Relatórios ---------- */

.relatorio {
  padding: 12px 14px;
  margin-bottom: var(--espaco-cartoes);
  font-size: var(--tam-secao);
}

.relatorio h2 {
  font-size: var(--tam-cartao);
  font-weight: 600;
  margin: 0 0 6px;
}

.relatorio h3 {
  font-size: var(--tam-secao);
  font-weight: 600;
  margin: 12px 0 2px;
}

.relatorio p { margin: 4px 0; }

.relatorio strong { font-variant-numeric: tabular-nums; }

/* Gráficos: preto, linhas finas, quase sem grade */
.grafico {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
}

.linha-grafico {
  fill: none;
  stroke: var(--texto);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ponto-grafico {
  fill: var(--texto);
  stroke: var(--fundo);
  stroke-width: 2;
}

.eixo-grafico {
  stroke: var(--texto);
  stroke-width: 1;
}

.rotulo-grafico {
  font-family: var(--fonte);
  font-size: 11px;
  fill: var(--texto);
  font-variant-numeric: tabular-nums;
}

.rotulo-grafico.destaque { font-size: 13px; font-weight: 600; }

/* Cor cheia (barras e amostras da legenda) */
.cheia[data-cor="verde"]    { fill: var(--seguiu); }
.cheia[data-cor="amarelo"]  { fill: var(--sono-ok); }
.cheia[data-cor="vermelho"] { fill: var(--livre); }
.cheia[data-cor="vazio"]    { fill: var(--fundo); stroke: var(--texto); stroke-width: 1; }

.quadradinho.cheio[data-cor="verde"]    { background: var(--seguiu); }
.quadradinho.cheio[data-cor="amarelo"]  { background: var(--sono-ok); }
.quadradinho.cheio[data-cor="vermelho"] { background: var(--livre); }

.legenda.pequena { margin-top: 6px; font-size: 11px; }
.legenda.pequena .quadradinho { width: 10px; height: 10px; }

/* Nomes dos dias e 💩 empilhados, alinhados com as 7 colunas do gráfico */
.dias7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
}

.dias7 > span {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Um 💩 embaixo do outro */
.cocos {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 13px;
  margin-top: 2px;
}

.livres { margin-top: 8px; }

.livres summary {
  min-height: var(--toque-min);
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}

.livres ul { margin: 0; padding-left: 18px; }
.livres li { margin-bottom: 6px; }
.livres .quando { display: block; font-size: 11px; }

/* Aba Peso: o gráfico rola para os lados quando o histórico cresce */
.rolagem-grafico {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0;
  margin: 12px 0 var(--espaco-cartoes);
}

.grafico-acumulado { display: block; }

.alvo-toque { fill: transparent; cursor: pointer; }

/* ---------- Backup e Ajustes ---------- */

.faixa-backup {
  display: block;
  width: 100%;
  min-height: var(--toque-min);
  margin-top: 16px;
  padding: 8px 14px;
  border: var(--borda-quadradinho) solid var(--texto);
  border-radius: var(--raio-pilula);
  background: var(--fundo);
  color: var(--texto);
  font-size: var(--tam-secao);
  text-align: center;
}

.faixa-backup.destaque {
  border-width: var(--borda-cartao);
  background: var(--livre-clara);
  font-weight: 600;
}

.botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-cartoes);
  margin-top: 10px;
}

.botao {
  flex: 1;
  min-height: var(--toque-min);
  padding: 8px 14px;
  border: var(--borda-cartao) solid var(--texto);
  border-radius: var(--raio-pilula);
  background: var(--fundo);
  color: var(--texto);
  font-size: var(--tam-cartao);
  white-space: nowrap;
}

.botao.principal {
  background: var(--texto);
  color: var(--fundo);
}

.botao.perigo {
  background: var(--livre-clara);
  font-weight: 600;
}

.aviso-importacao {
  margin-top: 12px;
  padding: 10px 12px;
  border: var(--borda-quadradinho) solid var(--texto);
  border-radius: var(--raio-mini);
  background: var(--bege);
}

/* ---------- PDF ---------- */

.periodo-pdf { margin: 6px 0; }
.titulo-periodo { flex: 1; text-align: center; font-size: var(--tam-cartao); font-weight: 600; }

.opcoes-pdf {
  display: grid;
  grid-template-columns: 1fr;
}

.opcao-pdf {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--toque-min);
  font-size: var(--tam-cartao);
}

.opcao-pdf input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--texto);
}

.botao:disabled { opacity: 0.4; }

/* ---------- Barra inferior ---------- */

.barra {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  width: min(300px, calc(100% - 32px));
  height: var(--altura-barra);
  padding: 0 14px;
  border-radius: var(--raio-pilula);
  background: var(--texto);
  box-shadow: var(--sombra-barra);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.barra button {
  width: 44px;
  height: 44px;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--fundo);
  display: flex;
  align-items: center;
  justify-content: center;
}

.barra button.centro { width: 52px; height: 52px; }

.barra button.ativo {
  background: var(--fundo);
  color: var(--texto);
}

.barra svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.barra .centro svg { width: 28px; height: 28px; }