/* Norte — folha de estilo
   Estética: papel, tinta, pinho e ouro — calma, ordem e espaço para criar. */

:root {
  /* papel — a mesa é a superfície mais clara; folha, campo e fundo descem um
     tom de cada vez, sempre papel colorido opaco, nunca branco */
  --paper: #f3eee3;          /* a mesa: o marfim de sempre, fosco */
  --card: #f0e6d1;           /* a folha: papel creme opaco, um tom abaixo da mesa e com mais cor */
  --campo: #e9dfc9;          /* campos e miolos dentro da folha */
  --paper-deep: #e5d9c3;     /* papel mais fundo: hover, selos neutros, trilhos */
  --line: #d7cbb3;           /* pauta tracejada dentro da folha */
  --fio: rgba(96, 76, 44, .16);          /* contorno fino dos controles */
  --fio-forte: rgba(96, 76, 44, .28);    /* o mesmo fio quando a mão passa */
  --fio-pinho: rgba(54, 77, 62, .36);    /* fio de ação: o + de levar, selo ativo */
  --traco-caixa: #948a76;    /* a borda das caixinhas: o traço do design inicial, mais fino */
  /* tinta */
  --ink: #2b2822;
  --ink-soft: #5f574a;       /* secundário: 5,5:1 sobre a folha */
  --ink-faint: #6c6455;      /* horas, dicas, placeholders: 4,5:1 sobre a folha, 5,0:1 na mesa */
  --tinta-clara: #f1e8d6;    /* letra sobre o pinho: creme, nunca branco */
  /* pinho e ouro — um verde só: barra, botões, caixinhas, vitrine e seixo */
  --pinho-alto: #354c3d;
  --pinho-meio: #26392c;
  --pinho-fundo: #203025;
  --accent: #46614f;         /* pinho fosco médio: a cor da ação (não escurecer) */
  --accent-deep: #364d3e;
  --accent-soft: #d7dcc8;    /* papel tingido de pinho: faixa de compromissos, selos */
  --accent-medio: #c7cdb6;
  --gold: #c99a3f;
  --gold-soft: #e9dabb;
  --ouro-tinta: #765a16;
  --terra: #b65237;
  --terra-tinta: #9e4630;
  --terra-soft: #ebd8c9;
  --amber-soft: #e9dabb;
  --dieta: #b8a06a;
  --dieta-soft: #e5d7bc;
  --dieta-ink: #74623a;
  --sono: #7fa2c4;
  --sono-soft: #cedee2;
  --sono-ink: #3f6383;
  /* sombra curta e fosca, de papel pousado sobre papel; o primeiro anel é a
     borda do próprio papel */
  --sombra: 0 0 0 1px rgba(105, 84, 50, .07), 0 1px 1px rgba(70, 55, 30, .07), 0 3px 9px rgba(70, 55, 30, .07);
  --sombra-mini: 0 0 0 1px rgba(105, 84, 50, .07), 0 1px 1px rgba(70, 55, 30, .07), 0 2px 5px rgba(70, 55, 30, .06);
  --raio: 16px;
  --raio-faixa: 11px 7px 10px 8px;       /* cantos de adesivo: faixas e avisos */
  --suave: cubic-bezier(.3, .7, .3, 1);
  /* grão: o mesmo dos adesivos, sentido e não visto */
  --grao-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .16 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grao-mesa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .16 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grao-feltro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .82 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }


body {
  font-family: 'Karla', 'Segoe UI', sans-serif;
  color: var(--ink);
  display: flex;
  min-height: 100vh;
}

button { font: inherit; cursor: pointer; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, textarea { font: inherit; color: var(--ink); }
::placeholder { color: var(--ink-faint); font-style: italic; }

/* ------------------------------------------------------------ navegação -- */

.nav {
  width: 234px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 30px 14px 22px;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 26px; }
.brand-star { width: 34px; height: 34px; color: var(--gold); }
.brand h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 27px;
  letter-spacing: .5px;
  line-height: 1;
}
.brand p { font-size: 11.5px; font-style: italic; color: rgba(236, 228, 205, .55); margin-top: 4px; }

.nav nav { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.nav nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
}
.nav nav a:hover { text-decoration: none; }
.nav nav a.ativo::after { content: '✦'; margin-left: auto; color: var(--gold); font-size: 11px; }
.nav nav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.nav-foot { padding: 16px 12px 0; font-size: 12px; font-style: italic; line-height: 1.5; }
.foot-star { color: var(--gold); }

/* -------------------------------------------------------------- páginas -- */

main { flex: 1; padding: 36px 44px 70px; min-width: 0; }

.pagina { margin: 0 auto; }
.pagina-dia { max-width: 680px; }
.pagina-planejar { max-width: 1180px; }
.pagina-agenda { max-width: 1080px; }
.pagina-caderno { max-width: 920px; }
.pagina-ideias { max-width: 1120px; }
.pagina-nivers { max-width: 720px; }
.pagina-sonhos { max-width: 1000px; }

.topo-pagina { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.titulo-pagina { font-family: 'Fraunces', Georgia, serif; font-size: 30px; }
.ritual-intro { color: var(--ink-soft); font-style: italic; font-size: 14.5px; margin: -8px 0 22px; }

.nav-datas { display: flex; align-items: center; gap: 10px; }
.seta {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}
.chip {
  border-radius: 999px;
  font-size: 13px;
}
.chip.quieto { font-style: italic; }
.mes-titulo { font-family: 'Fraunces', Georgia, serif; font-size: 28px; padding: 0 6px; }
.mes-titulo span { color: var(--ink-faint); font-weight: 300; }


.botao-quieto { padding: 9px 16px; border-radius: 999px; font-size: 13.5px; }
.botao-perigo { background: transparent; padding: 9px 16px; border-radius: 999px; font-size: 13.5px; }
.botao-mini { font-size: 12px; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }

.apagar {
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 16px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 7px;
}

.espaco { flex: 1; }

/* ---------------------------------------------------------------- folha -- */

.folha {
  position: relative;
  padding: 42px 46px 34px;
}
.folha::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 30px;
  width: 1px;
  pointer-events: none;
}

.folha-cab { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 10px; }
.folha-cab h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 36px;
  line-height: 1.1;
  text-transform: lowercase;
}
.data-longa { font-size: 12.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-soft); margin-top: 7px; }

.cab-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.clima {
  display: none;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  margin-top: 6px;
  padding: 3px 2px;
  max-width: 46%;
  color: var(--ink-soft);
  font-family: 'Caveat', cursive;
  font-size: 17px;
  line-height: 1.2;
  text-align: right;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
}
.clima.visivel { display: inline-flex; }
.clima:hover { color: var(--ink); border-bottom-color: rgba(182, 154, 90, .5); }
.clima .doodle {
  width: 22px;
  height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .68;
}
.clima-texto { text-shadow: 0 0 .6px currentColor; }
.clima-texto b { font-weight: 700; color: var(--ink); }
.clima-cidade {
  width: 190px;
  border: none;
  border-bottom: 1px dashed var(--gold);
  background: transparent;
  outline: none;
  font-family: 'Caveat', cursive;
  font-size: 17px;
  color: var(--ink);
  text-align: right;
}

.niver-banner { padding: 12px 16px; margin-top: 16px; font-size: 14.5px; }

.comp-strip { padding: 12px 16px; margin-top: 16px; }
.comp-strip h3 { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 6px; }
.comp { display: flex; gap: 12px; padding: 4px 0; font-size: 14.5px; align-items: baseline; }
.comp .hora { font-weight: 700; color: var(--accent-deep); min-width: 46px; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.comp .local { color: var(--ink-soft); font-size: 13px; }

.lista-dia { list-style: none; margin-top: 8px; }
.item { display: flex; align-items: flex-start; gap: 13px; padding: 10px 0; border-bottom: 1px dashed var(--line); }

/* tarefa secundária (interrompe a principal) — embutida na própria linha da
   principal, como uma anotação de margem, fiel ao que aconteceu de verdade
   (no meio, não antes/depois). Sem caixinha/pílula — só texto encostado,
   como quem escreve um lembrete solto do lado. */
.interrupcoes {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
}
.interrupcao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; font-size: 12.5px; color: var(--ink-soft); }
.interrupcao.feito { opacity: .55; }
.interrupcao.feito .interrupcao-texto { text-decoration: line-through; }
.interrupcao.pulado { opacity: .6; }
.interrupcao-check {
  width: 12px; height: 12px;
  flex-shrink: 0;
  border: 1.3px solid var(--ink-faint);
  border-radius: 50%;
  background: transparent;
  color: var(--accent-deep);
  font-size: 8px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.interrupcao-hora { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 10.5px; }
.interrupcao-texto { font-style: italic; cursor: text; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.interrupcao-apagar {
  width: 12px; height: 12px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s;
}
.interrupcao-nota {
  width: 12px; height: 12px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s;
}
.interrupcao:hover .interrupcao-apagar,
.interrupcao:hover .interrupcao-nota { opacity: 1; }
.interrupcao-apagar:hover { color: var(--terra); }
.interrupcao-nota:hover { color: var(--accent); }
/* os bilhetinhos caem numa linha só deles, alinhados sob o texto da secundária */
.interrupcao .notas-item { flex-basis: 100%; margin: 2px 0 1px 19px; }
.interrupcao.alimento .interrupcao-hora { color: var(--dieta-ink); }
.interrupcao.alimento .interrupcao-texto { color: var(--dieta-ink); }

/* ---- o fio das horas na margem: altura = duração da tarefa ---- */

.linha-relogio {
  display: flex;
  justify-content: flex-end;
  margin: 14px 0 -2px;
}

/* horário só pra leitura na visão normal — editar é só na grade */
.hora-intervalo {
  width: 40px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 3px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hora-fim { opacity: .6; margin-top: 1px; padding-top: 1px; border-top: 1px dotted var(--line); }
/* mesmo tamanho e ritmo das tarefas com hora — só o valor muda */
.hora-indef .hora-ini, .hora-indef .hora-fim { opacity: .35; }

/* ---------------------------------------------- grade de 24h (opcional) -- */
/* fechada por padrão: a visão normal (lista) é sempre a que aparece primeiro */

.grade-toggle {
  margin-left: auto;
  padding: 2px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.grade-dia { display: none; }
.folha.modo-grade .lista-dia,
.folha.modo-grade .clima,
.folha.modo-grade .lanches-strip { display: none; }
.folha.modo-grade .grade-dia { display: block; margin-top: 4px; }
/* adicionar tarefas continua funcionando com a grade aberta */
.folha.modo-grade .add-linha { margin-top: 10px; }
/* a grade é o foco da visão — usa mais largura da página */
.pagina-dia:has(.folha.modo-grade) { max-width: 1040px; }

.grade-corpo {
  position: relative;
  max-height: 620px; /* ajustada por ajustarAlturaGrade() em app.js pra usar o espaço disponível */
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid var(--line);
  border-radius: 0 0 0 4px;
}
.grade-linha-hora {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1px dashed var(--line);
}
.grade-linha-hora.meia { border-top: 1px dotted var(--line); opacity: .55; }
.grade-rotulo-hora {
  position: absolute;
  left: 4px;
  top: 2px;
  width: 30px;
  text-align: left;
  font-size: 10px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.grade-linha-hora.meia .grade-rotulo-hora { font-size: 8.5px; opacity: .85; }
/* meia-noite, em vez de topo/fundo da grade — só um lembrete discreto de que
   virou o dia, já que a grade agora começa às 5h */
.grade-linha-hora.virada-do-dia { border-top: 1px solid var(--ink-faint); }
.grade-linha-hora.virada-do-dia .grade-rotulo-hora { color: var(--ink-soft); font-weight: 600; }
.grade-agora {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1.5px solid var(--terra);
  z-index: 2;
  pointer-events: none;
}
.grade-agora::before {
  content: '';
  position: absolute;
  left: 2px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terra);
}

/* meta de sono — não é tarefa, é só um lembrete visual de fundo, atrás de
   tudo o mais, com as pontas ajustáveis pra quando o horário real muda */
.grade-sono-faixa {
  position: absolute;
  left: 0; right: 0;
  background: var(--sono-soft);
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  /* sem borda: uma linha bem em cima de uma marcação de hora cortava os
     números; a cor de fundo já delimita a faixa sem precisar de borda.
     sem z-index: fica atrás das linhas de hora só por vir antes delas no
     html — se tivesse um z-index positivo aqui, cobriria as marcações mesmo
     estando antes no documento */
}
.grade-sono.movendo .grade-sono-faixa { cursor: grabbing; }
/* ponta herdada da noite anterior, que passou da virada das 5h — só um
   lembrete visual de que a pessoa ainda está dormindo; não é editável aqui
   (pertence ao sono do dia anterior), então nem reage ao ponteiro */
.grade-sono-faixa.herdada { cursor: default; pointer-events: none; opacity: .65; }
.grade-livre {
  position: absolute;
  left: 0; right: 0;
}
.grade-livre::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, var(--gold-soft) 0 10px, transparent 10px 20px);
  background-size: 200% 200%;
  opacity: .5;
  pointer-events: none;
  animation: livre-flutuar 5s ease-in-out infinite;
}
@keyframes livre-flutuar {
  0%, 100% { background-position: 0% 0%; opacity: .4; }
  50% { background-position: 12% 12%; opacity: .62; }
}
.grade-livre-rotulo {
  position: absolute;
  left: 46px;
  top: 4px;
  font-size: 10.5px;
  font-style: italic;
}
.grade-livre-nota-btn {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 16px; height: 16px;
  border: none;
  border-radius: 4px;
  color: #8a6a1c;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
}
.grade-livre:hover .grade-livre-nota-btn { opacity: 1; }
.grade-livre-nota-btn:hover { color: var(--ink); }
.grade-livre .notas-item {
  position: absolute;
  left: 46px;
  top: 20px;
  right: 6px;
  gap: 3px;
}
.grade-sono-rotulo {
  position: absolute;
  left: 46px;
  top: 4px;
  font-size: 10.5px;
  color: var(--sono-ink);
  opacity: .8;
  pointer-events: auto;
  cursor: text;
}
.sono-hora-input {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  width: 58px;
  padding: 0 2px;
  border-radius: 4px;
  cursor: text;
}
.grade-sono-resize-topo,
.grade-sono-resize-baixo {
  position: absolute;
  left: 0; right: 0;
  height: 10px;
  cursor: ns-resize;
  pointer-events: auto;
  touch-action: none;
}
.grade-sono-resize-topo { top: -5px; }
.grade-sono-resize-baixo { bottom: -5px; }
.grade-sono-faixa:hover .grade-sono-resize-topo,
.grade-sono-faixa:hover .grade-sono-resize-baixo { background: linear-gradient(rgba(127, 162, 196, .25), transparent); }
.grade-sono.ajustando .grade-sono-faixa { opacity: .7; }

.grade-soltas {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.grade-soltas-rotulo { display: block; font-size: 10.5px; color: var(--ink-faint); letter-spacing: .6px; margin-bottom: 6px; }
.grade-soltas-lista { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.solta-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  background: var(--paper-deep);
  border: 1px dashed #c9bd9f;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.solta-pill:hover { border-color: var(--gold); color: var(--ink); }
/* a tarefa "na mão" durante o arrasto: segue o cursor desde o primeiro pixel,
   pra nunca haver um trecho em que nada acompanha o ponteiro. Levemente
   inclinada e com sombra, como um papelzinho levantado da mesa. */
.arrasto-na-mao {
  position: fixed;
  z-index: 900;
  transform: translate(12px, -50%) rotate(-1.5deg);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 3px 10px rgba(60, 50, 30, .18);
  pointer-events: none;
}
/* dentro da grade quem mostra a tarefa e o fantasma */
.arrasto-na-mao.oculto { display: none; }
.solta-pill-apagar {
  width: 14px; height: 14px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s;
}
.solta-pill:hover .solta-pill-apagar { opacity: 1; }
.solta-pill-apagar:hover { background: var(--terra-soft); color: var(--terra); }

.grade-alimentos { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.alimento-pill {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px dashed #c9c2ac;
  font-size: 12px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.alimento-pill:hover { border-color: #b3a986; color: var(--ink); }

.grade-bloco {
  position: absolute;
  /* left/width vêm do estilo inline — tarefas que se sobrepõem dividem a largura */
  min-height: 20px;
  padding: 2px 9px;
  border-radius: 6px 6px 6px 2px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow .15s;
}
.grade-bloco.ancorado { border-left-color: var(--gold); background: var(--gold-soft); }
.grade-bloco.feito { opacity: .55; }
.grade-bloco.feito .grade-bloco-texto { text-decoration: line-through; }
.grade-bloco.pulado { border-left-style: dashed; opacity: .7; }
.grade-bloco-hora { display: block; font-size: 9.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; line-height: 1.3; }
.grade-bloco-texto { display: block; font-size: 12px; color: var(--ink); line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: text; }

/* tarefa curta demais pra empilhar hora/texto/bilhete sem cortar — tudo numa
   linha só, lado a lado. flex-grow 0 no texto: sem isso o texto "esticava" a
   caixa mesmo curto, empurrando o bilhete pra fora da vista à direita */
.grade-bloco.curto { display: flex; align-items: baseline; gap: 6px; padding-top: 3px; padding-bottom: 3px; }
.grade-bloco.curto .grade-bloco-hora { flex-shrink: 0; }
.grade-bloco.curto .grade-bloco-texto { flex: 0 1 auto; min-width: 0; }
.grade-bloco.curto .notas-item { flex-shrink: 1; flex-wrap: nowrap; overflow: hidden; }
.grade-bloco.curto .nota-item { white-space: nowrap; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }

/* a tarefa maior "pausa" pra dar lugar a uma menor no meio dela — o pedaço de
   depois é só a mesma tarefa retomando, sem destaque nenhum (só o aviso) */
.grade-bloco.continuacao { cursor: default; }
.continuacao-tag { font-size: 9px; font-style: italic; color: var(--ink-faint); }

/* a tarefa secundária é quem realmente interrompe a principal — discreta,
   já que costuma ser rápida (responder mensagem, lanche): borda pontilhada e
   uma setinha ligando ela à margem, sem o mesmo peso das tarefas principais */
.grade-bloco.secundaria {
  border-left-style: dotted;
  background: var(--paper-deep);
  box-shadow: none;
}
.grade-bloco.secundaria .grade-bloco-texto { color: var(--ink-soft); }
.grade-bloco.secundaria::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 6px;
  height: 0;
  border-top: 1px dotted var(--ink-faint);
}

/* alimentação (lanches/refeições encaixados) — a mesma tarefa secundária de
   sempre, só que com a cor própria de dieta em vez do cinza neutro. Escrita
   por extenso ali dentro, dentro da tarefa que interrompe — nada de bolinha
   sem legenda. Na lista normal ela é só mais uma tarefa, sem essa marcação. */
.grade-bloco.alimento {
  border-left-color: var(--dieta);
  background: var(--dieta-soft);
}
.grade-bloco.alimento .grade-bloco-texto { color: var(--dieta-ink); }
.grade-bloco.alimento.secundaria::before { border-top-color: var(--dieta); }

/* enquanto edita texto ou bilhetinho, o bloco cresce por cima dos vizinhos
   pra caber o conteúdo — depois volta ao tamanho normal */
.grade-bloco.expandido {
  overflow: visible;
  z-index: 6;
  box-shadow: 0 6px 16px rgba(60, 50, 30, .2);
}

/* bilhetinhos dentro do bloco: mesma informação da lista, sem o efeito de papel — não cabe aqui */
.grade-bloco .notas-item { gap: 2px 4px; margin-top: 1px; }
.grade-bloco .nota-item {
  font-family: inherit;
  font-size: 9.5px;
  line-height: 1.25;
  color: var(--ink-soft);
  border-radius: 3px;
  padding: 0 4px;
  box-shadow: none;
  text-shadow: none;
  transform: none;
  max-width: 100%;
}
.grade-bloco .nota-item::before { display: none; }
.grade-bloco .nota-item:nth-child(2n),
.grade-bloco .nota-item:nth-child(3n) { transform: none; }
.grade-bloco.movendo, .grade-bloco.redimensionando {
  z-index: 3;
  box-shadow: 0 6px 16px rgba(60, 50, 30, .18);
}
.grade-bloco.vai-soltar-fora { opacity: .4; border-style: dashed; }
.grade-fantasma { left: 38px; right: 6px; background: var(--paper-deep); border-left-color: var(--ink-faint); opacity: .9; pointer-events: none; }
/* o horário de destino em destaque: é ele que a pessoa lê enquanto arrasta */
.grade-fantasma .grade-bloco-hora { color: var(--accent-deep); font-weight: 700; }

/* ações do bloco só aparecem no hover, pra não poluir a grade */
.grade-bloco-acoes {
  position: absolute;
  top: 1px;
  right: 3px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .15s;
}
.grade-bloco:hover .grade-bloco-acoes { opacity: 1; }
.grade-bloco-acoes button {
  width: 15px; height: 15px;
  flex-shrink: 0;
  border: none;
  border-radius: 4px;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grade-bloco-acoes button:hover { color: var(--ink); }

.grade-resize {
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 8px;
  cursor: ns-resize;
  touch-action: none;
}
.grade-bloco:hover .grade-resize { background: linear-gradient(transparent, rgba(201, 154, 63, .25)); }
.grade-resize-topo {
  position: absolute;
  left: 0; right: 0;
  top: -4px;
  height: 8px;
  cursor: ns-resize;
  touch-action: none;
}
.grade-bloco:hover .grade-resize-topo { background: linear-gradient(rgba(201, 154, 63, .25), transparent); }

.grade-bloco.grade-nova {
  border-left-color: var(--gold);
  box-shadow: 0 6px 16px rgba(60, 50, 30, .18);
  z-index: 6;
  cursor: default;
}
.grade-nova-input {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  outline: none;
}

.check {
  width: 21px; height: 21px;
  flex-shrink: 0;
  margin-top: 2px;
  color: transparent;
  font-size: 13px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.item .texto { flex: 1; font-size: 16.5px; line-height: 1.45; }
.item.feito .texto { text-decoration: line-through; }
.item.pulado .check { border-color: rgba(182, 82, 55, .4); }
.item.pulado .texto {
  color: var(--terra);
  font-style: italic;
  opacity: .82;
  text-decoration: line-through;
  text-decoration-style: dashed;
  text-decoration-color: rgba(182, 82, 55, .45);
}
.tag-pulado { font-size: 12px; font-style: italic; color: var(--terra); opacity: .85; align-self: flex-start; }

.item-livre { opacity: .9; }
.livre-marca {
  width: 21px; height: 21px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1.6px dashed var(--gold);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  animation: livre-respirar 2.6s ease-in-out infinite;
}
.texto-livre { font-style: italic; font-size: 15px; }
.livre-duracao { font-style: normal; color: var(--ink-faint); font-size: 12.5px; }
@keyframes livre-respirar {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.18); opacity: 1; }
}

.tag-sonho {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  border: none;
  border-radius: 999px;
  padding: 2px 10px;
  margin-top: 6px;
  align-self: flex-start;
  cursor: pointer;
}
/* no quadro de ideias o card é estreito: a etiqueta se limita a ele e corta com reticências */
.cartao-livre .tag-sonho { max-width: 100%; }
.sonho-select {
  font-size: 12.5px;
  padding: 3px 6px;
  border-radius: 7px;
  max-width: 220px;
}
.item .acoes { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.item:hover .acoes { opacity: 1; }
.item.pulado .acoes { opacity: 1; }
.acoes button { border: none; background: transparent; color: var(--ink-faint); font-size: 14px; padding: 3px 6px; border-radius: 6px; }
.acoes .pular.ativo { color: var(--terra); opacity: 1; }

.folha-vazia { text-align: center; color: var(--ink-faint); font-style: italic; padding: 34px 0 20px; line-height: 1.8; }

.add-linha { display: flex; align-items: center; gap: 11px; margin-top: 12px; flex-wrap: wrap; }
.add-mais { color: var(--ink-faint); font-size: 19px; }
.add-linha input[name="texto"], .add-linha input[name="nome"] {
  flex: 1;
  min-width: 200px;
  border: none;
  border-bottom: 1px dashed transparent;
  background: transparent;
  padding: 8px 2px;
  font-size: 15.5px;
  outline: none;
}
.add-linha input:focus { border-bottom-color: var(--gold); }

.bilhetes { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.bilhete {
  position: relative;
  /* mesma sombra fosca dos bilhetinhos e dos lembretes: papel sobre papel */
  box-shadow: 0 1px 1px rgba(60, 50, 30, .06), 0 4px 9px rgba(60, 50, 30, .08);
  padding: 12px 16px 11px;
  font-family: 'Caveat', cursive;
  font-size: 18px;
  line-height: 1.3;
  color: #7a5f1a;
  text-shadow: 0 0 .6px currentColor;
  transform: rotate(-1.3deg);
  max-width: 240px;
  overflow: hidden;
}
/* grão de papel, para a cor não ficar chapada */
.bilhete:not(.novo)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .07;
  pointer-events: none;
}
.bilhete:nth-child(even) { transform: rotate(1deg); }
.bilhete:nth-child(3n) { transform: rotate(-.4deg); }
.bilhete .apagar { position: absolute; top: 2px; right: 2px; opacity: 0; font-size: 13px; }
.bilhete:hover .apagar { opacity: 1; }
.bilhete:not(.novo) { cursor: pointer; }
.bilhete.riscado { opacity: .62; }
.bilhete.riscado span { text-decoration: line-through; text-decoration-color: rgba(122, 95, 26, .55); }
.bilhete.novo {
  box-shadow: none;
  border: 1.5px dashed var(--line);
  transform: none;
  cursor: default;
  text-shadow: none;
}
.bilhete.novo input {
  border: none;
  background: transparent;
  outline: none;
  font-family: 'Caveat', cursive;
  font-size: 17px;
  color: var(--ink);
  width: 200px;
}

.sonho-rodape { text-align: center; margin-top: 28px; color: var(--ink-soft); font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 16px; }
.sonho-rodape em { color: var(--accent-deep); }

.lembretes-leves {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 20px;
  margin-top: 24px;
}
.lembrete-leve {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Caveat', cursive;
  font-size: 18px;
  line-height: 1.25;
  padding: 9px 17px 8px;
  border-radius: 10px 5px 9px 6px;
  /* sombra fosca e curta, como papel pousado sobre papel */
  box-shadow: 0 1px 1px rgba(60, 50, 30, .06), 0 4px 9px rgba(60, 50, 30, .07);
  cursor: default;
  overflow: hidden;
  transition: transform .25s ease;
}
/* grão de papel por cima da cor, dando textura em vez de cor chapada */
.lembrete-leve::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .07;
  pointer-events: none;
}
.lembrete-leve .doodle {
  width: 20px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
}
.lembrete-texto {
  position: relative;
  /* leve sangramento de tinta, tira a nitidez perfeita da tela */
  text-shadow: 0 0 .6px currentColor;
}
.lembrete-leve:hover { transform: rotate(0deg) translateY(-2px); }
/* cores foscas e envelhecidas, como papel colorido desbotado */
.lembrete-agua { background: #ccd6d4; color: #3c534f; transform: rotate(-1.6deg); }
.lembrete-sol { background: #e6dabc; color: #6c5427; transform: rotate(1.3deg); }

.aviso-nivers { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.aviso-nivers span { font-size: 13px; padding: 6px 13px; border-radius: 999px; }

/* ------------------------------------------------------------- planejar -- */

.planejar-colunas { display: grid; grid-template-columns: minmax(380px, 530px) 1fr; gap: 26px; align-items: start; }
.coluna-fontes { display: flex; flex-direction: column; gap: 16px; }

.painel { padding: 17px 19px 13px; }
.painel h3 {
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.painel-link { font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-faint); white-space: nowrap; }
.painel-link:hover { color: var(--accent); }

.sug { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.sug + .sug { border-top: 1px dashed var(--line); }
.sug-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sug-nome { font-size: 14.5px; line-height: 1.35; }
.sug-sub { font-size: 12px; color: var(--ink-soft); font-style: italic; }

/* A rotina do foco do ano. Ela se distingue por UM sinal só: a serifa do
   programa no meio das sugestões em sans, na tinta quente que os bilhetinhos
   já usam. Sem caixa, sem borda, sem fundo — numa folha de papel a gente
   destaca uma linha mudando a letra, não passando marca-texto nela. */
.sug-destaque .sug-nome {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15.5px;
}
/* e ela mantém essa mesma letra depois de entrar no dia — mesmo tipo, mesma
   tinta, no tamanho que a folha usa. Riscada quando feita, como as outras. */
.item .texto.texto-destaque {
  font-family: 'Fraunces', Georgia, serif;
}

.badge {
  align-self: flex-start;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge.agendada { align-self: center; }

.mais {
  width: 29px; height: 29px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  line-height: 1;
}
.ja { font-weight: 700; padding: 0 8px; }

.caixa-manutencao {
  width: 17px; height: 17px;
  accent-color: var(--accent);
}
/* as extraordinárias já feitas ficam dobradas: concluir a tarefa no dia fecha
   o item sozinho, então sem isso a página vira um cemitério com o tempo */
.caderno-feitas { margin-top: 18px; }
.caderno-feitas > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink-faint);
  font-style: italic;
  padding: 4px 0;
}
.caderno-feitas .linha-caderno { border-bottom: none; padding: 5px 2px; }
/* os dois lados da manutenção da semana, em letra pequena e apagada: são
   rótulos de arrumação, não títulos que precisem disputar a atenção */
.sub-manutencao {
  margin: 12px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sub-manutencao:first-of-type { margin-top: 2px; }

.painel-vazio { color: var(--ink-faint); font-style: italic; font-size: 13.5px; padding: 8px 0; }
.painel-vazio.grande { text-align: center; padding: 46px 12px; font-size: 16px; line-height: 1.8; }

/* --------------------------------------------------------------- agenda -- */

.grade-agenda { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.grade-cab { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-faint); padding: 5px 0; }
.cel {
  position: relative;
  background: var(--card);
  min-height: 100px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cel.hoje-cel { outline-offset: -1px; }
.cel .num { font-family: 'Fraunces', Georgia, serif; font-size: 15px; color: var(--ink-soft); align-self: flex-start; }
.cel .num:hover { color: var(--accent); text-decoration: none; }
.pill {
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pill.comp { cursor: pointer; }
.cel-add {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s;
}
.cel:hover .cel-add { opacity: 1; }

/* -------------------------------------------------------------- diálogo -- */

dialog {
  padding: 28px;
  width: min(420px, 92vw);
}
.form-dlg { display: flex; flex-direction: column; gap: 13px; }
.form-dlg h3 { font-family: 'Fraunces', Georgia, serif; font-size: 21px; margin-bottom: 2px; }
.form-dlg label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.form-dlg input, .form-dlg select, .form-dlg textarea {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 15px;
  outline: none;
}
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dlg-acoes { display: flex; align-items: center; gap: 10px; margin-top: 4px; }

dialog.dlg-larga { width: min(560px, 94vw); }
.lanche-novo-campo { margin-top: 12px; }
.lanche-novo-linha { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.lanche-novo-nivel, .lanche-novo-kcal-campo { flex: 1; min-width: 130px; }
.lanche-novo-ingredientes { margin-top: 14px; }
.lanche-novo-ingredientes-lista {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lanche-novo-ingrediente {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: normal;
  padding: 4px 2px;
  border-radius: 6px;
  cursor: pointer;
}
.lanche-novo-ingrediente.usado { background: var(--accent-soft); }
.lanche-novo-ingrediente.usado .lanche-novo-ingrediente-nome { color: var(--ink); }
.lanche-novo-ingrediente input {
  width: 50px;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 6px;
  text-align: right;
  font-size: 13px;
  text-transform: none;
}
.lanche-novo-ingrediente-nome { flex: 1; min-width: 0; }
.lanche-novo-ingrediente-porcao { color: var(--ink-faint); font-size: 11.5px; white-space: nowrap; }
.lanche-novo-kcal-total {
  margin-top: 10px;
  text-align: right;
  font-size: 15px;
  color: var(--accent-deep);
  font-weight: 700;
}
.lanche-montar-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.lanches-lista-corpo {
  display: flex;
  flex-direction: column;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.lanche-gerir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  font-size: 13.5px;
  border-bottom: 1px dashed var(--line);
}
.lanche-gerir-nome { flex: 1; min-width: 0; }
.lanche-gerir-kcal { color: var(--ink-faint); font-size: 11.5px; white-space: nowrap; }
.lanche-gerir-kcal.sem-kcal { color: var(--terra); font-style: italic; }
.lanche-gerir-acoes { display: flex; gap: 3px; flex-shrink: 0; }
.lanche-gerir.arquivado { opacity: .55; }
.lanche-gerir.arquivado .lanche-gerir-nome { text-decoration: line-through; }

/* -------------------------------------------------------------- caderno -- */

.abas { display: flex; gap: 6px; flex-wrap: wrap; }
.aba {
  padding: 10px 17px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 14px;
  border-radius: 11px 11px 0 0;
}
.aba:hover { color: var(--ink); }

.pagina-caderno-conteudo { padding: 24px 28px; }
.nota-pagina { font-size: 13px; color: var(--ink-faint); font-style: italic; margin-bottom: 14px; }

.linha-caderno { display: flex; align-items: center; gap: 13px; padding: 9px 2px; border-bottom: 1px dashed var(--line); }
.linha-caderno .texto { flex: 1; font-size: 15.5px; }
.linha-caderno.feita .texto { text-decoration: line-through; }
.linha-caderno .quando { font-size: 11.5px; color: var(--ink-faint); font-style: italic; white-space: nowrap; }

.linha-obrigacao { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.linha-obrigacao .texto { flex: 1; min-width: 150px; font-size: 15px; }
.linha-obrigacao .carrinho-atalho { margin-left: -4px; }
.freq-ciclo { margin-right: 2px; }
.freq { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
/* liga/desliga o "a cada X dias": aceso quando repete, quase sumido quando não */
.freq-ciclo {
  border: none;
  background: transparent;
  padding: 0 3px;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-faint);
  opacity: .45;
  cursor: pointer;
}
.freq-ciclo.on { color: var(--accent); opacity: .8; }
.freq-ciclo:hover { opacity: 1; }
.freq input {
  width: 54px;
  padding: 4px 6px;
  border-radius: 7px;
  text-align: center;
  font-size: 13px;
}
.data-ultima { font-size: 12.5px; border-radius: 7px; padding: 4px 8px; }

.linha-rotina { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.linha-rotina .texto { flex: 1; min-width: 170px; font-size: 15px; }
.dias-chips { display: flex; gap: 4px; }
.chip-dia {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
}

/* --------------------------------------------------------------- ideias -- */

.captura { margin-bottom: 22px; }
.captura input {
  width: 100%;
  padding: 17px 22px;
  font-size: 16.5px;
  outline: none;
}
.captura input:focus { border-color: var(--gold); }

.lista-ideias { display: flex; flex-direction: column; gap: 12px; }
.cartao-ideia { padding: 15px 17px; }
.cartao-ideia.prio-3 { border-left-color: var(--terra); }
.cartao-ideia.prio-2 { border-left-color: var(--gold); }
.cartao-ideia.prio-1 { border-left-color: var(--accent); }
.ideia-topo { display: flex; align-items: flex-start; gap: 10px; }
.ideia-topo .texto { flex: 1; font-size: 15.5px; line-height: 1.45; }
.ideia-acoes { display: flex; align-items: center; gap: 9px; margin-top: 11px; flex-wrap: wrap; }
.prio-grupo { display: flex; gap: 4px; }
.prio-btn {
  font-size: 11px;
  padding: 3px 11px;
  border-radius: 999px;
}
.agendar { display: flex; align-items: center; gap: 6px; }
.agendar input { font-size: 12.5px; padding: 4px 8px; border-radius: 7px; }

.linha-simples { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.linha-simples span { flex: 1; }
.linha-simples.feita span { color: var(--ink-soft); }
.secao-dobra { margin-top: 24px; }
.secao-dobra summary { cursor: pointer; color: var(--ink-soft); font-size: 13.5px; padding: 4px 0; }

/* ---------------------------------------------------------- aniversários -- */

.lista-nivers { display: flex; flex-direction: column; gap: 11px; }
.cartao-niver { display: flex; align-items: center; gap: 17px; padding: 13px 17px; }
.niver-quando { width: 54px; flex-shrink: 0; text-align: center; border-radius: 10px; padding: 7px 0; }
.niver-dia { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 21px; line-height: 1.1; }
.niver-mes { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-soft); }
.niver-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.niver-info strong { font-size: 15.5px; }
.niver-detalhe { font-size: 13px; color: var(--ink-soft); }

/* --------------------------------------------------------------- sonhos -- */

.grade-sonhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.cartao-sonho {
  padding: 22px 24px 16px;
  display: flex;
  flex-direction: column;
}
.sonho-estrela { color: var(--gold); font-size: 18px; }
.cartao-sonho h3 { font-family: 'Fraunces', Georgia, serif; font-size: 21px; margin: 8px 0; line-height: 1.25; }
.cartao-sonho p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; flex: 1; }
.cartao-sonho p.placeholder { font-style: italic; color: var(--ink-faint); }
.cartao-sonho p.sonho-progresso { flex: none; font-size: 12px; color: var(--accent); margin-top: 2px; }
.sonho-acoes { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }

/* ------------------------------------------------- bilhetinho na tarefa -- */

.texto-grupo .texto { flex: none; }
/* tirinhas de papel soltas sob a tarefa — fluem lado a lado e quebram linha */
.notas-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 7px 9px; }
.nota-item {
  position: relative;
  max-width: 100%;
  font-family: 'Caveat', cursive;
  font-size: 15px;
  line-height: 1.3;
  padding: 2px 11px 1px;
  overflow: hidden;
  /* leve sangramento de tinta, tira a nitidez perfeita da tela */
  text-shadow: 0 0 .6px currentColor;
  /* sombra curta e fosca, de papel pousado — não de cartão flutuante */
  box-shadow: 0 1px 1px rgba(60, 50, 30, .06), 0 3px 7px rgba(60, 50, 30, .07);
  transform: rotate(-.9deg);
}
/* grão de papel por cima da cor, para não ficar um preenchimento chapado */
.nota-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .07;
  pointer-events: none;
}
/* cada tirinha cai num ângulo próprio, como se tivessem sido coladas à mão */
.nota-item:nth-child(2n) { transform: rotate(.8deg); }
.nota-item:nth-child(3n) { transform: rotate(-.3deg); }
.nota-item { cursor: pointer; transition: opacity .15s; }
/* resolvido: risca à mão e desbota, sem sumir — continua ali como registro */
.nota-item.riscado {
  opacity: .5;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(138, 106, 28, .7);
}
.nota-item.riscado:hover { opacity: .75; }

/* ------------------------------------------------------ lanches do dia -- */

.lanches-strip { margin-top: 14px; }
.lanches-strip summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: .5px;
  list-style-position: outside;
}
.lanches-strip summary:hover { color: var(--ink-soft); }
.lanches-linha { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 2px 2px; font-size: 12.5px; color: var(--ink-soft); }
.lanches-linha em { color: var(--ink-faint); font-style: normal; }
.lanches-linha b { font-size: 11px; color: var(--accent-deep); font-weight: 700; }
.lanches-linha .tem-receita { cursor: help; border-bottom: 1px dotted #c9bd9f; }
.lanches-linha span { cursor: pointer; border-radius: 5px; padding: 1px 4px; margin: -1px -4px; transition: opacity .15s; }
.lanches-linha span:hover { opacity: .7; }
.lanches-linha span.comido { opacity: .5; text-decoration: line-through; }
.kcal-resumo { color: var(--accent-deep); font-weight: 700; }
.kcal-planejado-mini { color: var(--ink-faint); font-weight: 400; }

.dieta-caixa { padding: 6px 2px 2px; }
.dieta-vazia { font-size: 12px; font-style: italic; color: var(--ink-faint); padding: 6px 0 2px; }
.kcal-extras {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.kcal-extras label { display: flex; align-items: center; gap: 6px; }
.kcal-extras input {
  width: 74px;
  font-size: 12.5px;
  padding: 3px 8px;
  border-radius: 7px;
  text-align: right;
}
.kcal-extras input::placeholder { font-size: 11px; }
.kcal-check {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-left: -10px;
  border: 1.3px solid var(--ink-faint);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 11px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.kcal-check:hover { border-color: var(--accent); }
.kcal-total b { color: var(--accent-deep); }
.kcal-planejado { color: var(--ink-faint); }
.kcal-planejado b { color: var(--ink-soft); font-weight: 700; }
.oculto { display: none; }

.avulsos-linha em { color: var(--ink-faint); }

/* ------------------------------------------- ingredientes soltos + meta -- */

.despensa-strip { margin-top: 8px; }
.despensa-strip summary { cursor: pointer; font-size: 12px; color: var(--ink-faint); }
.despensa-strip summary:hover { color: var(--ink-soft); }
.despensa-lista {
  max-height: 208px;
  overflow-y: auto;
  margin-top: 8px;
  padding-right: 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.despensa-linha {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 2px;
  font-size: 12.5px;
  cursor: pointer;
  border-radius: 6px;
}
.despensa-linha.ativo { background: var(--accent-soft); }
.despensa-linha input {
  width: 52px;
  flex-shrink: 0;
  font-size: 12.5px;
  padding: 2px 6px;
  border-radius: 6px;
  text-align: right;
}
.despensa-nome { flex: 1; min-width: 0; }
.despensa-porcao { color: var(--ink-faint); font-size: 11.5px; white-space: nowrap; }

.kcal-balanco {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.kcal-meta { margin-left: auto; }
.meta-valor { color: var(--accent-deep); cursor: pointer; border-bottom: 1px dotted #c9bd9f; }
.meta-valor.definir { color: var(--ink-faint); font-weight: 400; font-style: italic; }
.meta-valor:hover { color: var(--gold); }
.kcal-meta i { font-style: normal; margin-left: 6px; padding: 1px 8px; border-radius: 999px; }
.meta-certo { font-weight: 700; }
.meta-input {
  width: 92px;
  font-size: 12.5px;
  padding: 2px 7px;
  border-radius: 6px;
  text-align: right;
  outline: none;
}

/* ------------------------------------ etiquetas de propósito (vínculos) -- */


.tags-vinculo { display: flex; flex-wrap: wrap; gap: 5px 7px; align-self: flex-start; }
.tags-vinculo .tag-sonho { margin-top: 0; }

/* -------------------------------------------- diálogo de "por que importa" -- */

#dlg-vinculos { width: min(480px, 94vw); max-height: 86vh; overflow-y: auto; }
.vinc-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.vinc-cab h3 { font-family: 'Fraunces', Georgia, serif; font-size: 21px; }
.vinc-cab span { font-size: 12.5px; font-style: italic; color: var(--ink-soft); }
.vinc-corpo { display: flex; flex-direction: column; gap: 16px; margin: 14px 0 18px; }
.vinc-grupo h4 {
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.grupo-propositos h4 { color: var(--ink-faint); }
.vinc-linha {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.vinc-linha.marcado { background: var(--gold-soft); color: #6d5420; }
.grupo-propositos .vinc-linha.marcado { background: var(--accent-soft); color: var(--accent-deep); }
.vinc-linha input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------------------------------------------------------- foco do ano -- */
/* Frontispício: a página que se abre antes dos sonhos. Pergaminho, régua
   dourada e a citação como um selo — sem competir com a vitrine escura. */

/* uma linha só, sem caixa nem brilho */
.nav-foco {
  display: block;
  margin: 0 12px 10px;
  padding: 4px 2px;
  color: rgba(201, 154, 63, .8);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  transition: color .15s;
}
.nav-foco:hover { color: var(--gold); text-decoration: none; }

/* epígrafe: só tipografia sobre o papel, separada por um fio */
.foco-ano {
  margin: -6px 0 30px;
  padding-left: 18px;
  border-left: 2px solid rgba(201, 154, 63, .4);
}
.foco-rotulo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.foco-rotulo span { letter-spacing: 1.2px; color: var(--ink-faint); }

.foco-item + .foco-item { margin-top: 14px; }
.foco-item h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
}
.foco-item p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin-top: 3px; }
.foco-sinais, .sonho-sinais {
  display: flex;
  align-items: baseline;
  gap: 4px 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.foco-progresso { font-size: 11.5px; color: var(--accent); }
.foco-progresso::before { content: '✓ '; }

/* as ideias que esperam por um sonho: nome na dica, lista ao clicar */
.ideias-esperando summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--ink-soft);
  /* "inside" mantém a setinha dentro da caixa do resumo — com "outside" ela
     escapa para a esquerda e encosta no texto anterior */
  list-style-position: inside;
}
.ideias-esperando summary::marker { color: var(--ink-faint); font-size: 9px; }
.ideias-esperando summary:hover { color: var(--accent); }
.ideias-esperando ul {
  list-style: none;
  margin: 5px 0 2px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.ideias-esperando li {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 1px 0;
}
.ideias-esperando li::before { content: '· '; color: var(--ink-faint); }

/* o prazo que ele deu aos próprios sonhos: um fio e três informações */
.horizonte { margin: -8px 0 22px; cursor: help; }
.horizonte-topo {
  display: flex;
  align-items: baseline;
  gap: 6px 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.horizonte-rotulo {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.horizonte em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
}
/* dias e porcentagem viram um bloco só, separados pelo mesmo "·" da linha do
   foco. A fonte fica no pai, então o ponto sai igual aos dois lados; e o
   margin-left: auto empurra o conjunto todo pra direita da barra. */
.horizonte-resumo { margin-left: auto; font-size: 11.5px; color: var(--gold); }
.horizonte-dias, .horizonte-pct { font-size: inherit; color: inherit; }
.horizonte-barra {
  height: 3px;
  border-radius: 3px;
  background: rgba(201, 154, 63, .16);
  overflow: hidden;
}
.horizonte-barra span { display: block; height: 100%; background: rgba(201, 154, 63, .7); }

.foco-citacao {
  margin-top: 18px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-faint);
  cursor: default;
}

/* marca nos sonhos que são o foco do ano */
.cartao-sonho.em-foco { border-color: rgba(201, 154, 63, .5); }
.marca-foco {
  float: right;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
}

/* a lembrança curta no ritual da noite e no pé da folha */
.foco-linha, .foco-rodape {
  display: flex;
  align-items: baseline;
  gap: 6px 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.foco-linha { margin: -14px 0 20px; }
.foco-rodape { justify-content: center; margin-top: 28px; }
.foco-linha a, .foco-rodape a {
  color: rgba(201, 154, 63, .9);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-size: 10.5px;
}
.foco-linha a:hover, .foco-rodape a:hover { text-decoration: none; color: #a87f28; }
.foco-linha span, .foco-rodape em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--ink-soft);
}
.foco-linha span + span::before,
.foco-rodape em + em::before { content: '· '; color: var(--ink-faint); font-style: normal; }

.painel-lanches summary { cursor: pointer; display: flex; align-items: baseline; }
.painel-lanches summary h3 { margin-bottom: 0; }
/* atalho pra despensa: um símbolo só, apagado, que acende quando a mão passa */
.carrinho-atalho {
  margin-left: 8px;
  padding: 0 4px;
  border: none;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  opacity: .4;
  transition: opacity .15s;
}
.carrinho-atalho:hover { opacity: 1; }
.painel-lanches[open] summary h3, .painel-lanches details[open] summary h3 { margin-bottom: 8px; }
.lanches-plano { display: flex; flex-direction: column; gap: 8px; }
.lanche-linha { display: flex; align-items: center; gap: 10px; }
.lanche-linha label { width: 118px; flex-shrink: 0; font-size: 12.5px; color: var(--ink-soft); }
.lanche-linha select {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 8px;
}
.lanche-kcal-extra {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 8px;
}
.lanche-escolhido {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 128px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.lanche-escolhido .apagar { position: static; opacity: 1; font-size: 13px; }
.extras-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: -2px 0 2px 128px;
}
.extra-chk {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.extra-chk input { accent-color: var(--accent); width: 13px; height: 13px; }
.extra-chk b { color: var(--accent-deep); font-weight: 700; }
.extras-tag { font-style: normal; font-size: 11.5px; }

.alerta-geladeira {
  font-size: 12.5px;
  border-radius: 9px;
  padding: 8px 12px;
  margin: 0 0 4px;
}
.alerta-geladeira-mini { color: var(--terra); font-size: 12px; cursor: help; }

.pendentes-mercado { margin-top: 2px; }
.pendentes-mercado summary { cursor: pointer; font-size: 12px; color: var(--ink-faint); }
.pendentes-mercado summary:hover { color: var(--ink-soft); }

/* ------------------------------------------------------ lista de mercado -- */

.botao-lista {
  font-size: 11px;
  padding: 2px 9px;
  margin-left: 6px;
  border-radius: 999px;
  white-space: nowrap;
}

#dlg-mercado { width: min(560px, 94vw); max-height: 86vh; overflow-y: auto; }
.mercado-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mercado-cab h3 { font-family: 'Fraunces', Georgia, serif; font-size: 21px; }
.mercado-acoes { display: flex; gap: 8px; }
.mercado-corpo { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.mercado-cat h4 {
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}
.mercado-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 2px;
  font-size: 14.5px;
  cursor: pointer;
  border-radius: 7px;
}
.mercado-linha input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.mercado-linha span { flex: 1; }
.mercado-linha.marcado span { color: var(--ink-faint); text-decoration: line-through; }
.mercado-linha .apagar { opacity: 0; }
.mercado-linha:hover .apagar { opacity: 1; }
/* item-chave: base de vários lanches — sem ele boa parte do plano trava,
   por isso vale comprar em maior quantidade */
.mercado-linha.chave span { font-weight: 600; }
.mercado-add input {
  outline: none;
}

/* ------------------------------------------------------ quadro de ideias -- */

.titulo-ideias .rabisco { color: var(--terra); font-size: 22px; vertical-align: super; }
.captura-ideias input {
  font-family: 'Caveat', cursive;
  font-size: 21px;
  transform: rotate(-.4deg);
}

.quadro-barra { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.legenda { display: flex; align-items: center; gap: 5px 7px; font-size: 12px; flex-wrap: wrap; }
.legenda .pino { position: static; display: inline-block; margin-left: 8px; }
.dica { font-size: 12px; font-style: italic; color: var(--ink-faint); margin-left: auto; }

.quadro {
  position: relative;
  min-height: 580px;
  overflow: hidden;
  touch-action: none;
}
.quadro-vazio {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 27px;
  color: var(--ink-faint);
  line-height: 1.5;
}

.cartao-livre {
  position: absolute;
  width: 215px;
  padding: 18px 16px 12px;
  transform: rotate(var(--rot, 0deg));
  transition: left .55s cubic-bezier(.2, .8, .25, 1), top .55s cubic-bezier(.2, .8, .25, 1), box-shadow .2s;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.cartao-livre.arrastando {
  transition: none;
  cursor: grabbing;
  transform: rotate(var(--rot, 0deg)) scale(1.06);
}
.cartao-livre.cprio-3 { transform: rotate(var(--rot, 0deg)) scale(1.07); }
.cartao-livre.cprio-3.arrastando { transform: rotate(var(--rot, 0deg)) scale(1.12); }
.cartao-livre.cprio-0 { opacity: 1; }   /* opaco: um cartão por cima não deixa o de baixo aparecer */

.cartao-texto { font-size: 15px; line-height: 1.4; word-wrap: break-word; }

.pino {
  position: absolute;
  top: -8px;
  left: 16px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.pino.p3 { background: var(--terra); }
.pino.p2 { background: var(--gold); }
.pino.p1 { background: var(--accent); }
.pino.p0 { background: #b8b0a0; }

.etiqueta-agendada {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-family: 'Karla', sans-serif;
  color: var(--accent-deep);
  padding: 2px 9px;
  border-radius: 999px;
}

.cartao-pe {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 10px;
  opacity: 0;
  transition: opacity .18s;
}
.cartao-livre:hover .cartao-pe, .cartao-livre:focus-within .cartao-pe { opacity: 1; }
.cartao-pe .prio-grupo { display: flex; gap: 3px; }
.cartao-pe .prio-btn {
  font-family: 'Karla', sans-serif;
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(120, 110, 90, .4);
  color: #57503f;
}
.cartao-pe input[type="date"] {
  font-size: 10px;
  font-family: 'Karla', sans-serif;
  width: 106px;
  padding: 1px 4px;
  border: 1px solid rgba(120, 110, 90, .4);
  border-radius: 6px;
  color: #57503f;
}
.pe-btn {
  border: none;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1;
  padding: 4px 7px;
  font-family: 'Karla', sans-serif;
}

/* os oito temas dos cartões — cada um é um pedaço de papel diferente, sem
   lógica entre eles, todos foscos e desbotados como os adesivos da folha do
   dia. O papel (e a forma) mora no ::before; o enfeite no ::after; a sombra
   vem do drop-shadow do cartão, por isso acompanha rasgos, recortes e furos. */

.cartao-livre {
  background: none; box-shadow: none; isolation: isolate;
  filter: drop-shadow(0 1px 1px rgba(60, 50, 30, .08)) drop-shadow(0 5px 8px rgba(60, 50, 30, .10));
}
.cartao-livre.arrastando {
  box-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(60, 50, 30, .09)) drop-shadow(0 16px 20px rgba(60, 50, 30, .17));
}
.cartao-livre::before, .cartao-livre::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.cartao-livre::before { inset: 0; }
.cartao-livre .cartao-texto { text-shadow: 0 0 .45px currentColor; }

.pino { border: 2.5px solid #f3eee3; box-shadow: 0 1px 2px rgba(40, 30, 10, .25); }
.cartao-pe .prio-btn { border-color: rgba(120, 110, 90, .32); }
.cartao-pe .prio-btn.on { background: var(--accent); border-color: var(--accent); }
.cartao-pe input[type="date"] { border-color: rgba(120, 110, 90, .32); }

/* 0 · página de caderno rasgada: pauta, margem e a borda de cima arrancada */
.tema-0 { color: #3f3a30; font-family: 'Caveat', cursive; padding: 22px 14px 12px 34px; }
.tema-0 .cartao-texto { font-size: 20px; line-height: 26px; }
.tema-0::before {
  background:
    linear-gradient(90deg, transparent 24px, rgba(182, 82, 55, .26) 24px 25px, transparent 25px),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(77, 118, 153, .17) 25px 26px) 0 21px,
    var(--grao-papel) 0 0 / 160px 160px,
    #f5f0e2;
  clip-path: polygon(0 5px, 5% 1px, 10% 5px, 16% 2px, 22% 6px, 28% 1px, 34% 4px, 40% 0, 46% 5px, 52% 2px,
    58% 6px, 64% 1px, 70% 4px, 76% 0, 82% 5px, 88% 2px, 94% 5px, 100% 1px, 100% 100%, 0 100%);
}

/* 1 · papel kraft com um pedaço de fita washi */
.tema-1 { color: #46392a; font-family: 'Karla', sans-serif; padding: 24px 17px 12px; }
.tema-1 .cartao-texto { font-size: 15px; }
.tema-1::before {
  border-radius: 3px 5px 2px 4px;
  background: var(--grao-papel) 0 0 / 120px 120px, var(--grao-papel) 37px 53px / 160px 160px, #cdb894;
}
.tema-1::after {
  top: -8px; left: 50%; width: 76px; height: 20px; z-index: 1;
  transform: translateX(-50%) rotate(-3deg);
  background: repeating-linear-gradient(45deg, rgba(160, 178, 160, .62) 0 6px, rgba(186, 200, 184, .52) 6px 12px);
}

/* 2 · cartão-postal com selo */
.tema-2 { color: #3b362c; font-family: 'Fraunces', Georgia, serif; font-style: italic; padding: 18px 56px 14px 18px; }
.tema-2 .cartao-texto { font-size: 16px; }
.tema-2::before {
  border-radius: 3px;
  background: var(--grao-papel) 0 0 / 160px 160px, #f2ecdd;
  box-shadow: inset 0 0 0 6px #f2ecdd, inset 0 0 0 7px rgba(120, 100, 70, .18);
}
.tema-2::after {
  content: '✦'; top: 13px; right: 13px; width: 30px; height: 36px; z-index: 0;
  display: grid; place-items: center; font-style: normal; font-size: 13px; color: #eef0ea;
  background: var(--grao-papel) 0 0 / 160px 160px, linear-gradient(165deg, #a9babd, #8fa4a7);
  border: 2px dashed #f2ecdd; box-shadow: 0 0 0 1px rgba(110, 90, 60, .18); transform: rotate(4deg);
}

/* 3 · herbário: papel sálvia com uma folha prensada no canto */
.tema-3 { color: #33463a; font-family: 'Fraunces', Georgia, serif; padding: 18px 18px 14px; min-height: 104px; }
.tema-3 .cartao-texto { font-size: 16px; padding-right: 34px; }
.tema-3::before { border-radius: 6px 9px 6px 9px; background: var(--grao-papel) 0 0 / 160px 160px, #d7decf; }
.tema-3::after {
  right: 6px; bottom: 6px; width: 52px; height: 52px; opacity: .55; transform: rotate(-14deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23587a5f' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 41C8 23 21 10 41 7c0 19-13 32-33 34Z'/%3E%3Cpath d='M8 41 33 15M15 34l-1-8M21 28l-1-9M27 22l-1-7M15 34l8 1M21 28l9 1M27 22l7 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 4 · seixo de rio molhado: pedra escura e lisa, texto claro */
.tema-4 { color: #efe6cf; font-family: 'Fraunces', Georgia, serif; font-style: italic; text-align: center; padding: 32px 26px 24px; }
.tema-4 .cartao-texto { font-size: 16px; }
.tema-4 .cartao-pe { justify-content: center; }
.tema-4::before {
  border-radius: 58% 42% 54% 46% / 47% 55% 45% 53%;
  background: var(--grao-papel) 0 0 / 160px 160px,
    radial-gradient(circle at 34% 26%, #708675 0%, #4d6354 55%, #3e5245 100%);
}
.tema-4 .prio-btn, .tema-4 .pe-btn, .tema-4 .cartao-pe input[type="date"] {
  background: rgba(236, 228, 205, .14); color: #efe6cf; border-color: rgba(236, 228, 205, .3); }
.tema-4 .etiqueta-agendada { background: rgba(236, 228, 205, .16); color: #efe6cf; }

/* 5 · etiqueta de bagagem com ilhós */
.tema-5 { color: #574627; font-family: 'Karla', sans-serif; padding: 16px 16px 12px 36px; }
.tema-5 .cartao-texto { font-size: 12.5px; letter-spacing: .9px; text-transform: uppercase; line-height: 1.6; }
.tema-5::before {
  border-radius: 0 4px 4px 0;
  background: var(--grao-papel) 0 0 / 160px 160px, #e2d1a6;
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
}
.tema-5::after {
  left: 9px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: #efe9da; box-shadow: inset 0 1px 1px rgba(60, 50, 30, .25), 0 0 0 2.5px rgba(176, 140, 70, .45);
}

/* 6 · polaroide: uma paisagem desbotada e a legenda escrita à mão */
.tema-6 { color: #3f3a30; font-family: 'Caveat', cursive; text-align: center; padding: 128px 14px 12px; }
.tema-6 .cartao-texto { font-size: 19px; line-height: 1.25; }
.tema-6 .cartao-pe { justify-content: center; }
.tema-6::before {
  border-radius: 3px;
  background:
    radial-gradient(circle at 72% 36%, rgba(246, 236, 206, .95) 0 9px, transparent 10px) 10px 10px / calc(100% - 20px) 106px no-repeat,
    radial-gradient(ellipse 85% 60% at 28% 118%, #7f9479 0 60%, transparent 61%) 10px 10px / calc(100% - 20px) 106px no-repeat,
    radial-gradient(ellipse 70% 50% at 82% 122%, #96a68c 0 60%, transparent 61%) 10px 10px / calc(100% - 20px) 106px no-repeat,
    linear-gradient(180deg, #aebfc3 0%, #cbc9b8 62%, #cdb995 100%) 10px 10px / calc(100% - 20px) 106px no-repeat,
    var(--grao-papel) 0 0 / 160px 160px,
    #f3eee3;
}

/* 7 · canhoto de ingresso: picotes nas laterais e a linha de destacar */
.tema-7 { color: #5a3426; font-family: 'Karla', sans-serif; padding: 18px 58px 13px 20px; }
.tema-7 .cartao-texto { font-size: 14px; letter-spacing: .3px; }
.tema-7::before {
  border-radius: 4px;
  background: var(--grao-papel) 0 0 / 160px 160px, #d9bcad;
  -webkit-mask: radial-gradient(circle 7px at 0 50%, #0000 98%, #000) 0 0 / 51% 100% no-repeat,
                radial-gradient(circle 7px at 100% 50%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle 7px at 0 50%, #0000 98%, #000) 0 0 / 51% 100% no-repeat,
                radial-gradient(circle 7px at 100% 50%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
}
.tema-7::after { right: 44px; top: 10px; bottom: 10px; border-left: 1.5px dashed rgba(110, 60, 40, .32); }

/* ------------------------------------------------- vitrine de conquistas -- */

.vitrine { margin-top: 40px; }
.vitrine-cab { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.vitrine-cab h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 25px; }
.vitrine-cab span { font-size: 13px; font-style: italic; color: var(--ink-soft); }

.vitrine-palco {
  position: relative;
  border-radius: 20px;
  padding: 30px 28px 26px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  box-shadow: var(--sombra);
  overflow: hidden;
}
.fagulha {
  position: absolute;
  font-size: 13px;
  animation: cintilar 2.8s ease-in-out infinite;
  pointer-events: none;
}
.fagulha.f1 { top: 14px; left: 7%; }
.fagulha.f2 { top: 26px; right: 12%; font-size: 17px; animation-delay: .9s; }
.fagulha.f3 { bottom: 18px; left: 46%; font-size: 10px; animation-delay: 1.7s; }
@keyframes cintilar {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

.trofeu {
  position: relative;
  border-radius: 15px;
  padding: 20px 20px 16px;
}
.trofeu-estrela {
  font-size: 21px;
  animation: cintilar 3.2s ease-in-out infinite;
  display: inline-block;
}
.trofeu h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 550; font-size: 19.5px; color: #4d3c14; margin: 7px 0 6px; line-height: 1.3; }
.trofeu p { font-size: 13px; color: #6d5a2a; line-height: 1.55; }
.trofeu-quando { display: block; margin-top: 10px; font-size: 11.5px; font-style: italic; letter-spacing: .4px; }
.trofeu-voltar {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  color: rgba(109, 90, 42, .0);
  font-size: 14px;
  padding: 3px 7px;
  border-radius: 7px;
}
.trofeu:hover .trofeu-voltar { color: rgba(109, 90, 42, .7); }

.confete {
  position: fixed;
  width: 9px;
  height: 13px;
  border-radius: 2px;
  z-index: 9999;
  pointer-events: none;
}

/* ---------------------------------------------------------------- extras -- */

.editando { border-radius: 5px; padding: 0 5px; user-select: text; -webkit-user-select: text; }

@media (max-width: 1020px) {
  .planejar-colunas { grid-template-columns: 1fr; }
  main { padding: 26px 22px 60px; }
}

@media (max-width: 780px) {
  body { flex-direction: column; }
  .nav { position: static; width: 100%; height: auto; padding: 16px 12px; }
  .nav nav { flex-direction: row; flex-wrap: wrap; }
  .nav-foot { display: none; }
  .folha { padding: 28px 24px; }
  .folha::before { left: 14px; }
}

/* ------------------------------------------- comemoração: dia completo -- */

.celebracao {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  overflow: hidden;
}
.celebracao-msg {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 14px;
  white-space: nowrap;
  animation: celebracao-msg-anim 3.4s ease forwards;
}
@keyframes celebracao-msg-anim {
  0% { opacity: 0; transform: translate(-50%, -8px); }
  12% { opacity: 1; transform: translate(-50%, 0); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}
.celebracao-particula {
  position: absolute;
  top: -30px;
  color: var(--gold);
  animation-name: celebracao-cair;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes celebracao-cair {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(220deg); opacity: 0; }
}

/* ------------------------------------------- planilha de calorias do dia -- */

.kcal-painel { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.kcal-cartao {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 132px;
  padding: 13px 17px;
  background: var(--card);
}
.kcal-cartao.quieto { background: transparent; box-shadow: none; }
.kcal-cartao-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 25px;
  line-height: 1.1;
  color: var(--accent-deep);
}
.kcal-cartao-num.abaixo { color: var(--terra); }
.kcal-cartao-rot { font-size: 11.5px; color: var(--ink-faint); }

.kcal-aviso {
  font-size: 13px;
  padding: 10px 15px;
  margin-bottom: 20px;
  line-height: 1.55;
}

.kcal-semana { margin-bottom: 20px; }
.kcal-semana-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.kcal-semana-data { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-faint); }
.kcal-semana-media { font-size: 12.5px; color: var(--accent-deep); }
.kcal-semana-media.vazia { color: var(--ink-faint); font-style: italic; }

.kcal-tabela { width: 100%; border-collapse: collapse; }
.kcal-tabela tr { border-bottom: 1px dashed var(--line); }
.kcal-tabela tr:last-child { border-bottom: none; }
.kcal-tabela td { padding: 6px 4px; font-size: 13.5px; vertical-align: middle; }
.kcal-dia { width: 90px; white-space: nowrap; }
.kcal-dia a { color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.kcal-dia a:hover { color: var(--accent); }
.kcal-dia em { font-style: normal; color: var(--ink-faint); font-size: 11.5px; margin-left: 3px; }
.kcal-barra-celula { width: 45%; }
.kcal-trilho {
  position: relative;
  display: block;
  border-radius: 999px;
}
.kcal-barra {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 999px;
}
.kcal-valor {
  width: 68px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
  font-weight: 700;
}
.kcal-nota { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.kcal-acao { width: 26px; text-align: right; }
.kcal-acao button {
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .15s;
}
.kcal-tabela tr:hover .kcal-acao button, .kcal-acao button.on { opacity: 1; }
.kcal-acao button.on { color: var(--terra); }

.kcal-tabela tr.fora { opacity: .5; }
.kcal-tabela tr.fora .kcal-valor { text-decoration: line-through; font-weight: 400; }
.kcal-tabela tr.fora .kcal-barra { background: var(--ink-faint); opacity: .3; }
.kcal-tabela tr.vazio .kcal-valor { text-decoration: none; color: var(--ink-faint); font-weight: 400; }
.kcal-tabela tr.vazio .kcal-trilho { background: transparent; }

/* ------------------------------------------------ lista do supermercado -- */

/* na despensa: o carrinho é o "preciso comprar", separado da caixinha de
   "tenho em casa" — some quando não está em uso pra não poluir a lista */
.mercado-carrinho {
  border: none;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 6px;
  filter: grayscale(1);
  opacity: 0;
  transition: opacity .15s, filter .15s;
}
.mercado-linha:hover .mercado-carrinho { opacity: .45; }
.mercado-linha.comprar .mercado-carrinho { opacity: 1; filter: none; }
.mercado-carrinho:hover { opacity: 1; background: var(--gold-soft); }
/* item que está em casa mas acabando: a caixinha fica marcada e o nome ganha
   o sublinhado pontilhado, avisando que mesmo assim vai pra lista */
.mercado-linha.comprar.marcado span { border-bottom: 1px dotted var(--gold); }

.lista-super { margin-top: 10px; }
.lista-cat { margin-bottom: 14px; }
.lista-cat h4 {
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  padding-bottom: 3px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.lista-cat ul { list-style: none; }
.lista-cat li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 13.5px;
}
.lista-check {
  width: 14px; height: 14px;
  flex-shrink: 0;
  border: 1.3px solid var(--ink-faint);
  border-radius: 4px;
  background: transparent;
  color: transparent;
  font-size: 9px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lista-check:hover { border-color: var(--accent); color: var(--accent); }
.lista-cat li.chave .lista-nome { font-weight: 700; }
/* o pontinho do "está acabando": em casa, mas já vai pra lista */
.lista-cat li.acabando .lista-nome::after,
.lista-ponto-exemplo::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
}
.lista-ponto-exemplo::after { margin-left: 0; }

/* ----------------------------------------------------------- dashboards -- */
/* Os painéis de cada frente. Abrir um é o Norte "virar" ele: a barra lateral
   troca de dono (o nome e as seções do painel), e a estrela pequena no alto é
   o caminho de volta. Tudo no mesmo papel, tinta, pinho e ouro do resto. */

@keyframes painel-entra { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes pagina-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* a porta de entrada: título e painéis no mesmo eixo, centrados. Só o ícone
   em traço fino e o nome — sem círculo, sem caixa. Ao passar o mouse o ícone
   pega a luz do ouro e o nome o pinho. */
.pagina-dashboards { max-width: 900px; }
.pagina-dashboards .topo-pagina { justify-content: center; }
.dashboards-grade { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px 64px; margin-top: 46px; }
.dashboard-porta {
  display: flex; flex-direction: column; align-items: center; gap: 15px;
  width: 116px; padding: 4px 0; color: var(--ink);
}
.dashboard-porta:hover { text-decoration: none; }
.dashboard-circulo { display: block; line-height: 0; transition: color .3s var(--suave); }
.dashboard-porta:hover .dashboard-circulo, .dashboard-porta.abrindo .dashboard-circulo { color: #a9802f; }
@keyframes porta-abrindo { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.dashboard-porta.abrindo .dashboard-circulo { animation: porta-abrindo 1.4s ease-in-out infinite; }
/* ícones desenhados à mão (viewBox 48, traço próprio): um pouco maiores para os detalhes respirarem */
.dashboard-circulo svg { width: 42px; height: 42px; }
.dashboard-circulo svg, .brand-icone svg {
  fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}
.dashboard-nome { font-family: 'Fraunces', Georgia, serif; font-size: 18px; transition: color .3s var(--suave); }

/* a barra lateral transformada */
.nav-voltar {
  display: flex; align-items: center; gap: 8px; margin: -8px 10px 22px;
  font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
  color: rgba(236, 228, 205, .5); transition: color .15s;
}
.nav-voltar svg { width: 15px; height: 15px; color: var(--gold); transition: filter .15s; }
.nav-voltar:hover { color: #f2ebd6; text-decoration: none; }
.nav-voltar:hover svg { filter: drop-shadow(0 0 5px rgba(201, 154, 63, .6)); }
.brand-painel { animation: painel-entra .35s ease-out both; }
.brand-painel { gap: 10px; }
.brand-painel > div { min-width: 0; }
.brand-painel h1 { font-size: 20px; line-height: 1.1; letter-spacing: 0; white-space: nowrap; }
.brand-icone {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: var(--gold);
}
.brand-icone svg { width: 22px; height: 22px; }
.modo-painel .nav nav { animation: painel-entra .35s .06s ease-out both; }
.nav-grupo {
  display: block; margin: 14px 12px 4px;
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(236, 228, 205, .38);
}
.nav nav a.sub { padding-left: 22px; }
.modo-painel main { animation: pagina-entra .3s ease-out both; }

/* She e Finanças abertos por dentro: a barra é a mesma dos outros painéis
   (as seções deles), e o programa ocupa o resto, de ponta a ponta. */
.modo-embutido main { padding: 0; }
iframe.embutido { display: block; width: 100%; height: 100vh; border: 0; }
.embutido-falhou { height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--ink-soft); font-style: italic; }

/* a página do painel */
.pagina-painel { max-width: 860px; }
.bloco { padding: 19px 24px 14px; margin-bottom: 16px; }
.bloco-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px;
  font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase;
}
.bloco-sub { margin-right: auto; margin-left: 6px; font-size: 12px; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
.bloco-acoes { display: inline-flex; align-items: baseline; gap: 14px; }
.bloco-acoes .bloco-sub { margin: 0; }
.botao-link { border: none; background: transparent; padding: 0; cursor: pointer; }
.botao-link:hover { text-decoration: underline; }
.projeto-h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; margin: 14px 0 6px; }
.projeto-h4 .apagar { opacity: 0; }
.nota-bloco:hover .projeto-h4 .apagar { opacity: 1; }
.nova-nota { margin: 14px 0 6px; }
.bloco > .nota-bloco:first-child .projeto-h4 { margin-top: 0; }

/* o próximo passo em destaque: tipografia, um fio dourado e só */
.proximo-passo { margin: 0 0 18px; padding: 10px 16px; border-left: 2px solid var(--gold); }
.proximo-passo .rotulo { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; }
.proximo-passo p { font-family: 'Fraunces', Georgia, serif; white-space: pre-wrap; }
.proximo-passo p.vazio { font-family: 'Karla', sans-serif; font-size: 14px; color: var(--ink-faint); font-style: italic; }
.proximo-passo p[ondblclick] { cursor: text; }

/* listas em ordem de prioridade: o número é a prioridade, o primeiro é o próximo */
.frente-item, .video-linha { cursor: default; position: relative; }
.frente-item .alca, .video-linha .alca { position: absolute; left: -18px; top: 50%; transform: translateY(-50%); width: 18px; cursor: grab; color: var(--ink-faint); opacity: 0; font-size: 12px; letter-spacing: -2px; transition: opacity .15s; }
.frente-item:hover .alca, .video-linha:hover .alca { opacity: .7; }
.frente-item.arrastando, .video-linha.arrastando { opacity: .35; }
.ordinal { width: 16px; flex-shrink: 0; text-align: right; font-family: 'Fraunces', Georgia, serif; font-size: 14px; color: var(--ink-faint); }
.frente-item.proxima .ordinal { color: var(--gold); }
.texto-grupo { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.frente-nota { font-size: 12.5px; color: var(--ink-soft); font-style: italic; white-space: pre-wrap; }
.frente-nota.vazia { display: none; }
.frente-nota.vazia.aberta, .frente-nota:has(textarea) { display: block; }

/* ações da linha: aparecem com o mouse; a ☾ acesa fica sempre à vista */
.acoes-linha { display: inline-flex; align-items: center; flex-shrink: 0; }
.acoes-linha > * { opacity: 0; transition: opacity .15s; }
.linha-caderno:hover .acoes-linha > *, .video-linha:hover .acoes-linha > * { opacity: 1; }
.acoes-linha > .lua.acesa { opacity: 1; }
.acao-nota { border: none; background: transparent; color: var(--ink-faint); }
.lua { border: none; background: transparent; color: var(--ink-faint); font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 6px; transition: color .15s, text-shadow .15s; }
.lua:hover { color: var(--gold); }
.lua.acesa { color: var(--gold); text-shadow: 0 0 7px rgba(201, 154, 63, .5); }
.proximo-passo .rotulo .lua { font-size: 13px; padding: 0 4px; letter-spacing: 0; }

/* recorrentes: o selo diz como está; clicar nele abre o ciclo e a última vez */
.recorrente .badge-ciclo { align-self: center; }
button.badge { border: none; font-family: inherit; cursor: pointer; white-space: nowrap; }
.ciclo-editor { display: none; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; font-size: 12.5px; color: var(--ink-soft); }
.recorrente.editando-ciclo .ciclo-editor { display: flex; }
.ciclo-editor input { font-size: 12.5px; border-radius: 7px; padding: 3px 6px; }
.ciclo-editor input[type="number"] { width: 54px; text-align: center; }

/* lista de compras da vó, dobrada embaixo das recorrentes */
.mercado-vovo { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.mercado-vovo > summary { cursor: pointer; list-style: none; font-size: 13.5px; color: var(--ink-soft); padding: 2px 0; }
.mercado-vovo > summary::-webkit-details-marker { display: none; }
.mercado-vovo > summary:hover { color: var(--accent); }
.mercado-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 14px 24px; margin: 12px 0 6px; }
.mercado-cat h4 { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 4px; }
.mercado-item { display: flex; align-items: center; gap: 9px; padding: 3px 0; font-size: 14px; }
.mercado-marca { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--ink-faint); background: transparent; padding: 0; flex-shrink: 0; cursor: pointer; transition: background .15s, border-color .15s; }
.mercado-marca:hover { border-color: var(--gold); }
.mercado-item.comprar .mercado-marca { background: var(--gold); border-color: var(--gold); }
.mercado-item.comprar .mercado-nome { font-weight: 600; }
.mercado-nome { flex: 1; min-width: 0; }
.mercado-item .apagar { opacity: 0; padding: 0 5px; font-size: 14px; }
.mercado-item:hover .apagar { opacity: 1; }
.mercado-add input { width: 100%; border: none; border-bottom: 1px dashed var(--line); background: transparent; font-size: 13px; padding: 3px 0; margin-top: 3px; }
.mercado-add input:focus { outline: none; border-bottom-color: var(--gold); }

/* processos */
.processo-cab { display: flex; align-items: baseline; gap: 12px; }
.processo-titulo { flex: 1; font-family: 'Fraunces', Georgia, serif; }
.processo-cab .apagar { opacity: 0; }
.processo:hover .processo-cab .apagar { opacity: 1; }
.processo-numero { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.copiar { border: none; background: transparent; padding: 0; font-size: 11.5px; color: var(--ink-faint); cursor: pointer; }
.copiar:hover { color: var(--accent); text-decoration: underline; }
.estado-select {
  -webkit-appearance: none; appearance: none; border: none; border-radius: 999px; cursor: pointer;
  font-family: inherit; text-align: center; text-align-last: center;
}

/* financeiro */
.fonte-linha { display: flex; align-items: baseline; gap: 14px; padding: 9px 2px; border-bottom: 1px dashed var(--line); }
.fonte-nome { font-size: 15px; }
.fonte-valor { font-family: 'Fraunces', Georgia, serif; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fonte-linha .apagar { opacity: 0; }
.fonte-linha:hover .apagar { opacity: 1; }
.fonte-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 2px 6px; font-size: 12.5px; font-style: italic; color: var(--ink-faint); }
.fonte-total b { font-family: 'Fraunces', Georgia, serif; font-style: normal; font-size: 21px; color: var(--accent); }
.add-linha input.valor-curto { width: 120px; flex: 0 0 auto; }

/* contatos */
.contato-linha { display: flex; align-items: center; gap: 14px; padding: 11px 2px; border-bottom: 1px dashed var(--line); }
.contato-linha:last-child { border-bottom: none; }
.contato-iniciais { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: 'Fraunces', Georgia, serif; font-size: 13.5px; }
.contato-obs { color: var(--ink-soft); }
.contato-tel { font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.contato-linha .apagar { opacity: 0; }
.contato-linha:hover .apagar { opacity: 1; }

/* histórico: o que já foi resolvido, sem risco por cima — é conquista */
.historico-linha .texto { text-decoration: none; color: var(--ink); }

/* vídeos do canal */
.video-linha { display: flex; align-items: center; border-bottom: 1px dashed var(--line); }
.video-num { font-family: 'Fraunces', Georgia, serif; color: var(--ink-faint); text-align: right; flex-shrink: 0; }
.video-linha.publicado .texto { color: var(--ink-soft); }
.video-linha.proxima .video-num { color: var(--gold); }
.estado { border-radius: 999px; border: none; white-space: nowrap; font-family: inherit; }
select.estado { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: center; text-align-last: center; }
.video-linha .acoes-linha { min-width: 104px; justify-content: flex-end; }
.add-linha input[name="titulo"] { flex: 1; min-width: 200px; border: none; border-bottom: 1px dashed transparent; background: transparent; padding: 8px 2px; font-size: 15.5px; outline: none; }
.pasta-atalho { border: none; background: transparent; color: var(--ink-faint); }

/* textos livres (estratégia, reflexões) */
.nota-bloco { margin-top: 2px; }
.nota-corpo { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; }
.nota-corpo.vazia, .canal-nota.vazia { color: var(--ink-faint); font-style: italic; }
.nota-editor {
  width: 100%; min-height: 140px; resize: vertical; font: inherit; line-height: 1.55;
}

/* canais do cliente: uma linha por canal, a nota dobrada embaixo */
.canal summary { cursor: pointer; display: flex; align-items: baseline; gap: 12px; border-bottom: 1px dashed var(--line); list-style: none; }
.canal summary::-webkit-details-marker { display: none; }
.canal-orc { flex: 1; font-size: 13px; color: var(--ink-soft); min-width: 0; }
.canal-nota { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; padding: 6px 2px 12px 6px; white-space: pre-wrap; border-bottom: 1px dashed var(--line); }

/* registro: diário datado */
.registro-add { margin: 0 0 10px; }
.registro-add input[type="date"] { font-size: 12.5px; border-radius: 7px; padding: 4px 8px; }
.registro-linha { display: flex; align-items: baseline; gap: 12px; padding: 7px 2px; border-bottom: 1px dashed var(--line); font-size: 14px; }
.registro-data { color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.registro-texto { flex: 1; line-height: 1.5; }
.registro-linha .apagar { opacity: 0; }
.registro-linha:hover .apagar { opacity: 1; }

/* ==========================================================================
   DESENHO — a camada única de acabamento
   Um papel só, uma tinta só, um verde só. A mesa é o marfim de sempre e é a
   superfície mais clara; as folhas são papel creme opaco, um tom abaixo e com
   mais cor, com o grão e a sombra curta dos adesivos; a barra é o pinho da
   mesma mata, em feltro fosco. Os controles falam baixo: fio fino e papel, e
   o pinho só onde há ação. Nada branco, nada translúcido, nada que acenda.
   Os valores moram nos tokens do :root, no alto do arquivo.
   ========================================================================== */

/* ---- 1. mesa e tipografia ---- */
html { scrollbar-color: #cdbfa9 var(--paper); }
body {
  background:
    var(--grao-mesa) 0 0 / 160px 160px,
    radial-gradient(1100px 620px at 90% -12%, rgba(201, 154, 63, .07), transparent 62%),
    radial-gradient(900px 520px at -8% 110%, rgba(52, 77, 64, .035), transparent 60%),
    var(--paper);
}
/* Fraunces numa medida só para todo título — núcleo, painéis e diálogos */
.brand h1, .titulo-pagina, .mes-titulo, .folha-cab h2, .form-dlg h3, .vinc-cab h3, .mercado-cab h3,
.cartao-sonho h3, .processo-titulo { font-weight: 460; }
.brand h1, .titulo-pagina, .folha-cab h2, .mes-titulo, .dashboard-nome, .cartao-sonho h3,
.processo-titulo, .proximo-passo p, .vitrine-cab h3, .trofeu h4, .form-dlg h3, .vinc-cab h3,
.mercado-cab h3, .kcal-cartao-num, .niver-dia, .cel .num, .fonte-valor, .fonte-total b,
.foco-item h4, .contato-iniciais, .ordinal, .video-num { font-variation-settings: 'SOFT' 40; }

/* ---- 2. barra lateral: pinho em feltro ---- */
.nav {
  background:
    var(--grao-feltro) 0 0 / 160px 160px,
    radial-gradient(280px 220px at 20% 0%, rgba(236, 226, 204, .04), transparent 70%),
    linear-gradient(168deg, var(--pinho-alto) 0%, var(--pinho-meio) 68%, var(--pinho-fundo) 100%);
  color: #ebe2cc;
}
.brand-star { filter: drop-shadow(0 0 6px rgba(201, 154, 63, .38)); }
.brand-star circle { fill: var(--pinho-meio); }
.brand h1 { color: var(--tinta-clara); }
.nav nav a { color: rgba(236, 226, 204, .76); transition: background .2s var(--suave), color .2s var(--suave); }
.nav nav a:hover { background: rgba(236, 226, 204, .06); color: #efe6d1; }
.nav nav a.ativo { background: rgba(236, 226, 204, .1); color: #f3ead7; font-weight: 600; }
.nav-foot { border-top: 1px solid rgba(236, 226, 204, .08); color: rgba(236, 226, 204, .64); }
/* rótulos pequenos da barra: quietos, mas legíveis (≥ 4,5:1 sobre o pinho) */
.brand p { color: rgba(236, 228, 205, .72); }
.nav-voltar { color: rgba(236, 228, 205, .72); }
.nav-grupo { color: rgba(236, 228, 205, .7); }
.nav-foco { color: var(--gold); }
.nav-foco:hover { color: #d9b062; }
.brand-icone { background: rgba(236, 226, 204, .07); }

/* ---- 3. folhas, painéis e cartões: o mesmo papel creme ---- */
.folha, .painel, .bloco, .pagina-caderno-conteudo, .cartao-sonho, .cartao-niver,
.cartao-ideia, .kcal-cartao:not(.quieto), .cel:not(.fora), .aba.ativa, dialog {
  background: var(--grao-papel) 0 0 / 160px 160px, var(--card);
  border: none;
  box-shadow: var(--sombra);
}
.folha, .painel, .bloco, .cartao-sonho { border-radius: var(--raio); }
.folha::before { background: rgba(182, 82, 55, .2); }
.pagina-caderno-conteudo { border-radius: 0 var(--raio) var(--raio) var(--raio); }
.cartao-niver, .cartao-ideia, .kcal-cartao, .cel { box-shadow: var(--sombra-mini); }
.cartao-niver, .cartao-ideia, .kcal-cartao { border-radius: 13px; }
.abas { border-bottom: none; }
.aba.ativa { position: relative; z-index: 1; margin-bottom: -2px; padding-bottom: 12px;
  box-shadow: 0 -1px 0 rgba(105, 84, 50, .07), -1px 0 0 rgba(105, 84, 50, .06), 1px 0 0 rgba(105, 84, 50, .06);
  color: var(--accent-deep); font-weight: 600; }
.aba:not(.ativa):hover { color: var(--ink); background: rgba(228, 219, 196, .5); }
.painel-niver { background: var(--grao-papel) 0 0 / 160px 160px, linear-gradient(150deg, var(--gold-soft), var(--card) 70%); }
.cartao-niver.e-hoje { outline: none; box-shadow: inset 0 0 0 1.5px rgba(201, 154, 63, .6), var(--sombra-mini);
  background: var(--grao-papel) 0 0 / 160px 160px, linear-gradient(135deg, var(--gold-soft), var(--card) 70%); }
.cartao-sonho.em-foco { box-shadow: inset 0 0 0 1px rgba(201, 154, 63, .45), var(--sombra); }
dialog { border-radius: var(--raio); box-shadow: 0 0 0 1px rgba(105, 84, 50, .08), 0 18px 44px rgba(40, 32, 18, .22); }
dialog::backdrop { background: rgba(43, 40, 34, .32); backdrop-filter: none; }
/* o * { margin: 0 } do topo anulava o margin: auto que centraliza o diálogo modal */
dialog { margin: auto; max-height: calc(100vh - 48px); overflow: auto; }
/* cada ingrediente do lanche é uma linha (campo, nome, porção), não um rótulo de campo */
.form-dlg .lanche-novo-ingrediente { flex-direction: row; align-items: center; gap: 9px; font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--ink-soft); }
/* linhas dentro do diálogo: a mão escurece o papel, nunca clareia */
.lanche-novo-ingrediente:hover, .despensa-linha:hover, .vinc-linha:hover, .mercado-linha:hover { background: var(--paper-deep); }
.celebracao-msg { background: var(--grao-papel) 0 0 / 160px 160px, var(--card); border-color: rgba(201, 154, 63, .55);
  color: #6a5120; box-shadow: var(--sombra); }

/* ---- 4. faixas, bilhetes e adesivos: papel colorido desbotado ---- */
/* as faixas dentro da folha têm os cantos levemente irregulares dos adesivos */
.comp-strip { background: var(--grao-papel) 0 0 / 160px 160px, var(--accent-soft); border-radius: var(--raio-faixa); }
.niver-banner { background: var(--grao-papel) 0 0 / 160px 160px, var(--gold-soft); border-radius: var(--raio-faixa); color: #6a5120; }
.kcal-aviso { background: var(--grao-papel) 0 0 / 160px 160px, var(--gold-soft); border-radius: var(--raio-faixa); color: #6a5120; }
.aviso-nivers span { background: var(--gold-soft); color: #6a5120; }
.pill.comp { background: var(--accent-soft); color: var(--accent-deep); }
.pill.comp:hover { background: var(--accent-medio); }
.pill.niver { background: var(--gold-soft); color: #6a5120; }
/* bilhetes e tirinhas: o amarelo desbotado de sempre, um tom mais fosco, com
   os cantos e a sombra dos adesivos */
.bilhete { background: #f3e6bc; border-radius: 10px 5px 9px 6px; }
.bilhete:nth-child(even) { background: #f2e2b4; }
.bilhete:nth-child(3n) { background: #f3e4b8; }
.bilhete.novo { background: transparent; border-color: var(--line); }
.nota-item { background: #f3e6bc; color: #7a5d17; border-radius: 7px 4px 6px 5px; }
.nota-item:nth-child(2n) { background: #f2e2b4; }
.nota-item:nth-child(3n) { background: #f3e4b8; }

/* ---- 5. botões: pinho fosco para a ação, fio fino para o resto ---- */
.botao-noturno, .botao-primario, .botao-arrumar {
  background: var(--grao-feltro) 0 0 / 160px 160px, var(--accent);
  color: var(--tinta-clara);
  border: none;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  box-shadow: 0 1px 1px rgba(40, 50, 35, .12), 0 2px 6px rgba(40, 50, 35, .1);
  transition: background-color .2s var(--suave);
}
.botao-noturno:hover, .botao-primario:hover, .botao-arrumar:hover {
  background: var(--grao-feltro) 0 0 / 160px 160px, var(--accent-deep); transform: none; text-decoration: none;
}
.botao-quieto, .botao-mini.quieto, .botao-lista, .grade-toggle, .prio-btn, .chip-dia {
  background: transparent; border: 1px solid var(--fio); color: var(--ink-soft);
  transition: background-color .2s var(--suave), border-color .2s var(--suave), color .2s var(--suave);
}
.botao-quieto:hover, .botao-mini.quieto:hover, .botao-lista:hover, .grade-toggle:hover, .prio-btn:hover, .chip-dia:hover {
  background: var(--paper-deep); border-color: var(--fio-forte); color: var(--ink);
}
.grade-toggle { color: var(--ink-faint); }
.prio-btn.on, .chip-dia.on, .folha.modo-grade .grade-toggle {
  background: var(--accent-soft); border-color: var(--fio-pinho); color: var(--accent-deep);
}
.botao-mini { border: 1px solid var(--fio-pinho); color: var(--accent-deep); background: transparent; transition: background-color .2s var(--suave); }
.botao-mini:hover { background: var(--accent-soft); color: var(--accent-deep); }
.botao-perigo { border: 1px solid rgba(158, 70, 48, .4); color: var(--terra-tinta); }
.botao-perigo:hover { background: var(--terra-soft); }

/* ---- 6. fichas de navegação (setas, chips): papel da folha e um fio, sem sombra ---- */
.seta, .chip, .pagina-painel .topo-pagina > a.painel-link, .pagina-painel .topo-acoes > a.painel-link {
  background: var(--grao-papel) 0 0 / 160px 160px, var(--card);
  border: 1px solid var(--fio);
  box-shadow: none;
  color: var(--accent-deep);
  transition: background-color .2s var(--suave), border-color .2s var(--suave);
}
.seta { color: var(--ink-soft); }
.chip { padding: 7px 14px; }
.seta:hover, .chip:hover, .pagina-painel .topo-pagina > a.painel-link:hover, .pagina-painel .topo-acoes > a.painel-link:hover {
  background: var(--grao-papel) 0 0 / 160px 160px, var(--paper-deep);
  border-color: var(--fio-forte); box-shadow: none; color: var(--accent-deep); text-decoration: none;
}
.chip.quieto, .chip.quieto:hover { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-faint); }

/* o + de levar e de criar: um fio, nunca um disco cheio */
.mais { border: 1px solid var(--fio-pinho); color: var(--accent); font-size: 16px; transition: background-color .2s var(--suave); }
.mais:hover { background: var(--accent-soft); color: var(--accent-deep); }
.cel-add { background: transparent; border: 1px solid var(--fio-pinho); color: var(--accent); }
.cel-add:hover { background: var(--accent-soft); color: var(--accent-deep); }
.ja { color: var(--accent-deep); }
/* ações das linhas: a mão tinge o papel */
.acoes button:hover, .acao-nota:hover, .pasta-atalho:hover { color: var(--accent-deep); background: var(--accent-soft); }
.apagar:hover, .acoes .apagar:hover, .acoes .pular:hover, .kcal-acao button:hover { color: var(--terra-tinta); background: var(--terra-soft); }

/* ---- 7. caixinhas: traço fino, miolo de papel; marcada, pinho com tique creme ---- */
.check { border: 1.3px solid var(--traco-caixa); background: var(--campo); border-radius: 6px; }
.check:hover { border-color: var(--accent); }
.item.feito .check, .linha-caderno.feita .check, .check.hoje { background: var(--accent); border-color: var(--accent); color: var(--tinta-clara); }
.interrupcao-check, .kcal-check, .lista-check { border-color: var(--traco-caixa); }
.kcal-check.on { background: var(--accent); border-color: var(--accent); color: var(--tinta-clara); }
.item.feito .texto, .linha-caderno.feita .texto { color: var(--ink-soft); text-decoration-color: rgba(43, 40, 34, .35); }
/* as caixinhas nativas (Caderno, extras, diálogos) falam a mesma língua */
.caixa-manutencao, .vinc-linha input, .extra-chk input, .mercado-linha input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; margin: 0; flex-shrink: 0;
  border: 1.3px solid var(--traco-caixa); border-radius: 5px; background: var(--campo);
  cursor: pointer; transition: background-color .15s, border-color .15s;
}
.extra-chk input { border-radius: 4px; }
.caixa-manutencao:hover, .vinc-linha input:hover, .extra-chk input:hover, .mercado-linha input[type="checkbox"]:hover { border-color: var(--accent); }
.caixa-manutencao:checked, .vinc-linha input:checked, .extra-chk input:checked, .mercado-linha input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.6' fill='none' stroke='%23f1e8d6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 86% no-repeat, var(--accent);
}

/* ---- 8. selos: papel tingido, letra legível ---- */
.badge, .badge.nunca { background: var(--paper-deep); color: var(--ink-soft); }
.badge.atrasada, .badge.prio-3 { background: var(--terra-soft); color: var(--terra-tinta); font-weight: 600; }
.badge.vence, .badge.prio-2 { background: var(--gold-soft); color: var(--ouro-tinta); font-weight: 600; }
.badge.em_dia, .badge.prio-1, .badge.agendada { background: var(--accent-soft); color: var(--accent-deep); }
.estado.st-ideia, .estado.st-pausado { background: var(--paper-deep); color: var(--ink-soft); }
.estado.st-roteiro, .estado.st-teste, .estado-select.est-aguardando { background: var(--gold-soft); color: var(--ouro-tinta); }
.estado.st-gravado, .estado-select.est-em-analise { background: var(--sono-soft); color: var(--sono-ink); }
.estado.st-editado, .estado.st-ativo, .estado-select { background: var(--accent-soft); color: var(--accent-deep); }
/* publicado / concluído: o sálvia mais fundo, nunca a pílula pinho chapada */
.estado.st-publicado, .estado.st-concluido, .estado-select.est-concluido { background: var(--accent-medio); color: var(--accent-deep); }
.estado.st-atencao, .estado-select.est-pendente { background: var(--terra-soft); color: var(--terra-tinta); }
.tag-sonho { background: var(--gold-soft); color: var(--ouro-tinta); }
.tag-sonho:hover { background: #e2d0ab; }
.vinc-manutencao { background: var(--accent-soft); color: var(--accent-deep); }
.vinc-manutencao:hover { background: var(--accent-medio); }
.vinc-diversao { background: #ddd6e0; color: #4a4258; }
.vinc-diversao:hover { background: #d3cbd8; }
/* sonho já conquistado: a etiqueta ganha um ar de medalha */
.vinc-realizado { background: #e6d5b0; box-shadow: inset 0 0 0 1px rgba(201, 154, 63, .4); }
.meta-faltam { background: var(--gold-soft); color: var(--ouro-tinta); }
.meta-passou, .meta-certo { background: var(--accent-soft); color: var(--accent-deep); }
.alerta-geladeira { background: var(--terra-soft); color: var(--terra-tinta); }
.alimento-pill { background: var(--paper-deep); border-color: var(--fio-forte); color: var(--ink-soft); }
.solta-pill { border-color: var(--fio-forte); }
/* horas da margem: a hierarquia vem da cor, não da opacidade empilhada */
.hora-fim { opacity: 1; }
.hora-intervalo .hora-ini { color: var(--ink-soft); }
.item-livre .hora-intervalo .hora-ini { color: inherit; }
/* tinta de ouro legível sobre o creme */
.sug-destaque .sug-nome, .item .texto.texto-destaque, .grupo-realizados h4, .extras-tag,
.trofeu-quando, .grade-livre-rotulo { color: var(--ouro-tinta); }
.item.feito .texto.texto-destaque { color: #94763a; }
.texto-livre, .item-livre .hora-intervalo, .livre-marca { color: #8d6e24; }
/* rótulos dourados pequenos: tinta de ouro; o --gold fica nas estrelas, anéis e fios */
.proximo-passo .rotulo, .foco-rotulo, .marca-foco, .horizonte-resumo, .foco-linha a, .foco-rodape a,
.frente-item.proxima .ordinal, .video-linha.proxima .video-num { color: var(--ouro-tinta); }
.foco-linha a:hover, .foco-rodape a:hover { color: var(--accent-deep); }

/* ---- 9. campos: papel um tom abaixo, fio fino; foco em ouro ---- */
.form-dlg input, .form-dlg select, .form-dlg textarea, .freq input, .data-ultima, .agendar input,
.kcal-extras input, .despensa-linha input, .meta-input, .lanche-linha select, .lanche-kcal-extra,
.lanche-novo-ingrediente input, .sono-hora-input, .ciclo-editor input, .registro-add input[type="date"],
.add-linha input.valor-curto, .sonho-select, .nota-editor {
  background: var(--campo); border: 1px solid var(--fio); color: var(--ink);
}
.data-ultima, .agendar input { color: var(--ink-soft); }
.form-dlg input:focus, .form-dlg select:focus, .form-dlg textarea:focus, .freq input:focus, .data-ultima:focus,
.kcal-extras input:focus, .despensa-linha input:focus, .lanche-kcal-extra:focus, .ciclo-editor input:focus,
.registro-add input[type="date"]:focus, .add-linha input.valor-curto:focus {
  outline: none; border-color: rgba(201, 154, 63, .6);
}
.add-linha input.valor-curto { border-radius: 7px; padding: 4px 8px; font-size: 13px; }
.ciclo-editor input[type="number"] { font-size: 13px; padding: 4px 6px; }
.ciclo-editor input[type="date"] { padding: 4px 8px; }
.nota-editor { outline: none; border-color: rgba(201, 154, 63, .6); border-radius: 8px; padding: 8px 10px; }
.editando { background: var(--campo); outline: 1.5px solid rgba(201, 154, 63, .7); }
.captura input {
  background: var(--grao-papel) 0 0 / 160px 160px, var(--card);
  border: none; box-shadow: var(--sombra);
  border-radius: var(--raio);
}
.captura input:focus { box-shadow: inset 0 0 0 1px rgba(201, 154, 63, .3), var(--sombra); }
/* a grade de 24h: blocos e botões em papel opaco */
.grade-corpo { background: var(--campo); }
.grade-livre-nota-btn, .grade-bloco-acoes button, .grade-bloco .nota-item,
.grade-bloco .nota-item:nth-child(2n), .grade-bloco .nota-item:nth-child(3n) { background: var(--card); }
.grade-livre-nota-btn:hover, .grade-bloco-acoes button:hover { background: var(--paper-deep); }
.grade-bloco.expandido, .grade-bloco.grade-nova, .arrasto-na-mao { background: var(--card); }

/* ---- 10. páginas ---- */
/* agenda: os dias do mês vizinho recuam — papel apagado, tracejado, sem sombra */
.cel { border-radius: 12px; }
.cel.fora { background: #ece6d9; box-shadow: none; border: 1px dashed var(--line); opacity: .75; }
.cel.hoje-cel { outline: none; box-shadow: inset 0 0 0 1.5px rgba(201, 154, 63, .75), var(--sombra-mini); }
.cel.hoje-cel .num { color: var(--ouro-tinta); font-weight: 600; }   /* o anel já é o ouro; o número é tinta legível */

/* calorias: traço fino, pinho quieto */
.kcal-cartao.quieto { border: 1px dashed var(--line); }
.kcal-trilho { height: 5px; background: var(--paper-deep); }
.kcal-barra { background: #a0b0a4; opacity: 1; }   /* pinho claro opaco (h153): nada de opacidade sobre o papel quente */
.kcal-barra.cheia { background: #778c7e; }   /* cheia = bateu a meta do dia; é só isso que a barra diz (h156) */
.kcal-tabela tr, .kcal-semana-cab { border-color: var(--line); }

/* aniversários */
.niver-quando { background: var(--paper-deep); }

/* sonhos: a vitrine é o mesmo pinho da barra */
.vitrine-palco {
  background:
    var(--grao-feltro) 0 0 / 160px 160px,
    radial-gradient(700px 240px at 50% -70px, rgba(236, 226, 204, .05), transparent 70%),
    linear-gradient(165deg, var(--pinho-alto), var(--pinho-fundo) 70%);
}
.vitrine-cab h3 { color: #7a5d1c; }
.trofeu {
  background: var(--grao-papel) 0 0 / 160px 160px, #e9d4a6;
  border: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .14), 0 4px 10px rgba(0, 0, 0, .18);
}
.trofeu-estrela { text-shadow: none; color: #9a7420; }
.trofeu-voltar:hover { background: rgba(105, 84, 50, .1); }
.fagulha { color: rgba(236, 214, 160, .55); }

/* quadro de ideias: o mesmo papel, sem pontilhado; os oito cartões ficam como aprovados */
.quadro {
  border: none;
  border-radius: 18px;
  background: var(--grao-papel) 0 0 / 160px 160px, var(--card);
  box-shadow: var(--sombra);
}
.pino { border-color: var(--paper); }
.quadro { overflow: clip; overflow-clip-margin: 18px; }   /* o alfinete e o canto girado aparecem; o quadro continua sem rolar */
.legenda { color: var(--ink-soft); }
/* o pé do cartão (prioridade, data, ações): véus creme, nunca brancos */
.etiqueta-agendada { background: rgba(241, 232, 214, .68); }
.cartao-pe .prio-btn { background: rgba(241, 232, 214, .55); }
.cartao-pe .prio-btn.on { color: var(--tinta-clara); }
.cartao-pe input[type="date"] { background: rgba(241, 232, 214, .7); }
.pe-btn { background: rgba(241, 232, 214, .55); }
.pe-btn:hover { background: rgba(241, 232, 214, .55); box-shadow: inset 0 0 0 1px var(--fio-pinho); color: var(--accent-deep); }
.pe-btn.apaga:hover { background: var(--terra-soft); box-shadow: none; color: var(--terra-tinta); }
/* no seixo (pedra escura) o pé é véu escuro com letra creme, e a mão só adensa o véu */
.tema-4 .cartao-pe .prio-btn:not(.on) { background: rgba(236, 228, 205, .14); border-color: rgba(236, 228, 205, .3); color: #efe6cf; }
.tema-4 .cartao-pe .prio-btn:not(.on):hover,
.tema-4 .pe-btn:not(.apaga):hover { background: rgba(236, 228, 205, .22); border-color: rgba(236, 228, 205, .45); box-shadow: none; color: #efe6cf; }

/* ---- 11. painéis (Vó, Empreender) e embutidos (She, Finanças) ----
   Cada peça copia a medida da equivalente do núcleo; a tipografia é a mais
   leve já combinada. */
.bloco-h, .painel h3, .projeto-h4, .mercado-cat h4, .vinc-grupo h4, .comp-strip h3 { color: var(--accent); }
.contato-iniciais { background: var(--paper-deep); color: var(--accent-deep); }
.dashboard-circulo { color: var(--accent); }
.dashboard-porta:hover .dashboard-nome { color: var(--accent-deep); }
iframe.embutido { background: var(--paper); }
/* She é a noite da mesma mata: enquanto carrega, o fundo já é a noite dela */
.embutido-she iframe.embutido { background: #162119; }

/* selos de estado com a medida do .badge */
.estado, select.estado, .estado-select { letter-spacing: 0; padding: 2px 9px; font-size: 11px; }
/* "próximo passo": o mesmo fio da epígrafe do foco do ano (Sonhos) */
.proximo-passo { border-left-color: rgba(201, 154, 63, .4); padding-left: 18px; }
.proximo-passo .rotulo { letter-spacing: 1.8px; }
.proximo-passo p { font-size: 18.5px; font-weight: 380; line-height: 1.4; }
/* títulos de cartão e nomes de pessoa */
.processo-titulo { font-size: 19px; line-height: 1.25; text-shadow: none; }
.contato-nome { font-family: inherit; font-size: 15.5px; font-weight: 600; }
.contato-obs { font-size: 13px; }
.fonte-valor { font-weight: 380; }
.fonte-total b { font-weight: 450; }
/* listas no ritmo da .linha-caderno */
.video-linha { gap: 13px; padding: 9px 2px; }
.video-linha .texto { font-size: 15.5px; }
.video-num { width: 16px; font-size: 14px; }
.canal summary { padding: 9px 2px; }
.canal-nome { font-weight: 400; font-size: 15px; }
.bloco > .canal:last-of-type:not([open]) > summary,
.bloco > .canal:last-of-type > .canal-nota,
.bloco > .registro-linha:last-of-type { border-bottom: none; }
/* ações da linha (✎ ▸ ×) como as da folha do dia */
.acoes-linha { gap: 2px; }
.acao-nota, .pasta-atalho { font-size: 14px; line-height: 1; padding: 3px 6px; border-radius: 6px; }
/* no topo da página: ação = ficha, informação = texto quieto (como no Planejar) */
.pagina-painel .topo-pagina > a.painel-link, .pagina-painel .topo-acoes > a.painel-link { padding: 7px 14px; border-radius: 999px; font-size: 13px; }
.pagina-painel .topo-pagina > span.painel-link { padding: 8px 15px; border: 1px solid transparent; font-size: 13px; font-style: italic; color: var(--ink-faint); }
/* a barra do painel: o item ativo não quebra linha; a marca sem círculo, como a estrela */
.modo-painel { --ink: #3a352c; }
.modo-painel .titulo-pagina { text-shadow: none; }
.modo-painel .bloco-h, .modo-painel .projeto-h4 { font-weight: 600; }
.frente-item.proxima .texto, .video-linha.proxima .texto { font-weight: 500; }
.modo-painel .nav nav a { position: relative; }
.modo-painel .nav nav a.ativo::after { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); line-height: 1; }
.brand-painel .brand-icone { width: 34px; height: 34px; background: transparent; }
.brand-painel .brand-icone svg { width: 34px; height: 34px; filter: drop-shadow(0 0 7px rgba(201, 154, 63, .40)); }
/* vazio sem frase: só um espaço que aceita dois cliques */
.nota-corpo.vazia, .canal-nota.vazia, .proximo-passo p.vazio { min-height: 1.5em; cursor: text; }
/* lista Projetos do Planejar: o × de tirar só aparece com o mouse */
.painel-projetos .tirar-projeto { opacity: 0; transition: opacity .15s; }
.painel-projetos .sug:hover .tirar-projeto { opacity: 1; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---- dieta: proteína e fase (cutting, out/2026) ----
   A dieta é uma vertente pequena do Norte: tudo aqui é miúdo e na cor das dicas. */

/* "cut" / "bulk": o mesmo selo em todo lugar em que a fase aparece. Os outros dois seletores só
   dão peso à regra dentro da lista de mercado, onde as regras de ".mercado-linha span" riscariam,
   engrossariam e sublinhariam de dourado o selo. */
.fase, .mercado-linha span.fase, .mercado-linha.comprar.marcado span.fase { display: inline-block; font-size: 10px; color: var(--ink-faint); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 6px; opacity: .75; vertical-align: middle; line-height: 1.5; font-weight: 400; font-style: normal; text-decoration: none; letter-spacing: 0; text-transform: none; }

.prot-resumo, .prot-meta { color: var(--ink-faint); font-weight: 400; }
.prot-meta b { font-weight: 400; }
.prot-meta .meta-valor { color: inherit; }
.kcal-extras input.prot-campo { width: 60px; }
.lanche-prot-extra { flex: 0 0 86px; }
.kcal-tabela td.kcal-prot { width: 52px; text-align: right; font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* no cutting a meta de calorias é teto: passar é o que acende o alerta; faltar é neutro */
.kcal-balanco.teto .meta-faltam { background: transparent; color: var(--ink-faint); }
.kcal-balanco.teto .meta-passou { background: var(--terra-soft); color: var(--terra-tinta); }
.meta-teto .kcal-cartao-num.abaixo { color: var(--accent-deep); }
.meta-teto .kcal-cartao-num.acima { color: var(--terra); }
.meta-teto .kcal-barra.acima-teto { background: var(--terra); }

/* ---- Mapa do negócio (Empreender › Marketing Jurídico) ----
   Uma carta de expedição: a trilha pontilhada a tinta, marcos numerados com o
   nome em serifa, uma rosa dos ventos pequena. O preenchimento do marco é o
   status que o Edu marcou e é só isso de "progresso". Cada estação abre num
   painel por cima do mapa, que recua e apaga de leve. */
.pagina-mapa .topo-pagina { margin-bottom: 16px; }
.pagina-painel .topo-acoes { display: inline-flex; gap: 8px; }
.mapa-cena { position: relative; }
.folha-mapa {
  position: relative; padding: 10px 12px 8px;
  transition: opacity .35s var(--suave), filter .35s var(--suave);
}
/* papel velho: a folha do mapa e a folha da estação são papéis antigos — borda
   gasta (um deslocamento no ::before, para o texto por cima continuar nítido),
   amassado (luz rasante sobre ruído), manchas de tempo e, no mapa, o vinco de
   uma dobra. Tudo no ::before: o conteúdo fica em cima, sem filtro. */
.pagina-mapa { --mapa-amassado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.016' numOctaves='4' seed='3' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23fff' surfaceScale='3' result='l'%3E%3CfeDistantLight azimuth='40' elevation='58'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.38' intercept='.66'/%3E%3CfeFuncG type='linear' slope='.38' intercept='.66'/%3E%3CfeFuncB type='linear' slope='.38' intercept='.66'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); }
.folha-mapa::before, .mapa-painel::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 7px;
  background:
    radial-gradient(circle at 9% 12%, rgba(125, 88, 38, .17), transparent 24%),
    radial-gradient(circle at 88% 80%, rgba(125, 88, 38, .15), transparent 28%),
    radial-gradient(circle at 68% 5%, rgba(125, 88, 38, .10), transparent 18%),
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(110, 80, 35, .22) 100%),
    var(--mapa-amassado) 0 0 / 420px 420px,
    #ecdfc0;
  background-blend-mode: normal, normal, normal, normal, multiply, normal;
  box-shadow: var(--sombra);
  filter: url(#mapa-papel-a);
}
.folha-mapa::before {
  background:
    linear-gradient(to right, transparent 49.55%, rgba(255, 250, 235, .45) 49.85%, rgba(95, 75, 40, .13) 50.15%, transparent 50.45%),
    linear-gradient(to bottom, transparent 49.55%, rgba(255, 250, 235, .40) 49.85%, rgba(95, 75, 40, .11) 50.15%, transparent 50.45%),
    radial-gradient(circle at 9% 12%, rgba(125, 88, 38, .17), transparent 24%),
    radial-gradient(circle at 88% 80%, rgba(125, 88, 38, .15), transparent 28%),
    radial-gradient(circle at 68% 5%, rgba(125, 88, 38, .10), transparent 18%),
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(110, 80, 35, .22) 100%),
    var(--mapa-amassado) 0 0 / 420px 420px,
    #ecdfc0;
  background-blend-mode: normal, normal, normal, normal, normal, normal, multiply, normal;
}
.folha-mapa > *, .mapa-painel > * { position: relative; z-index: 1; }
.mapa-svg { display: block; width: 100%; height: auto; }
.mapa-trilha { fill: none; stroke: var(--ink-soft); stroke-width: 1.7; stroke-dasharray: 1 7; stroke-linecap: round; }
.mapa-fim { font-family: 'Fraunces', Georgia, serif; font-size: 13px; fill: var(--ink-faint); }
.mapa-estacao { cursor: pointer; outline: none; }
.mapa-estacao .miolo { fill: rgba(243, 238, 227, .55); stroke: none; }
.mapa-estacao .aro { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; opacity: .85; transition: stroke-width .15s; }
.mapa-estacao .aro.leve { stroke-width: .8; opacity: .45; }
.mapa-estacao:hover .aro, .mapa-estacao:focus-visible .aro { stroke-width: 2; opacity: 1; }
.mapa-estacao .meia { fill: var(--accent); opacity: .9; }
.mapa-estacao.st-definido .miolo { fill: var(--accent); }
.mapa-estacao.st-definido .aro { stroke: var(--accent-deep); }
.mapa-estacao .num { font-family: 'Fraunces', Georgia, serif; font-size: 12.5px; font-weight: 500; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.mapa-estacao.st-definido .num { fill: var(--tinta-clara); }
.mapa-estacao .nome { font-family: 'Fraunces', Georgia, serif; font-size: 15px; fill: var(--ink); text-anchor: middle; }
.mapa-estacao:hover .nome, .mapa-estacao:focus-visible .nome { fill: var(--accent-deep); }
.mapa-rosa circle { fill: none; stroke: var(--ink-soft); stroke-width: 1; opacity: .5; }
.mapa-rosa circle.fina { stroke-width: .6; stroke-dasharray: 1 3; }
.mapa-rosa circle.miolo { fill: var(--ink-soft); stroke: none; opacity: .8; }
.mapa-rosa .meio { fill: var(--ink-soft); opacity: .75; }
.mapa-rosa .claro { fill: var(--paper); stroke: var(--ink-soft); stroke-width: .8; opacity: .85; }
.mapa-rosa .norte { fill: var(--accent); stroke: var(--accent-deep); stroke-width: .6; }
.mapa-rosa .estrela { font-family: 'Fraunces', Georgia, serif; font-size: 11px; fill: var(--accent); text-anchor: middle; }
/* os desenhos a tinta do mapa: traço fino, apagados, nunca na frente da trilha */
.mapa-grade rect, .mapa-grade path { fill: none; stroke: var(--ink-soft); stroke-width: .9; opacity: .28; }
.mapa-grade .fina { stroke-width: .6; opacity: .14; }
.mapa-agua path { fill: none; stroke: var(--ink-soft); stroke-width: .9; opacity: .3; stroke-linecap: round; }
.mapa-agua .ondas { opacity: .4; }
.mapa-faixa path { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1; opacity: .9; }
.mapa-faixa .fina { fill: none; stroke-width: .8; opacity: .6; }
.mapa-faixa text { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 15px; fill: var(--ink-soft); text-anchor: middle; letter-spacing: .3px; }
.mapa-desenho path { fill: none; stroke: var(--ink-soft); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.mapa-desenho path.fina { stroke-width: .9; opacity: .4; }
.mapa-desenho circle { fill: var(--ink-soft); opacity: .6; }
.mapa-tesouro .x { fill: none; stroke: var(--terra); stroke-width: 2.4; stroke-linecap: round; opacity: .85; }
.mapa-legenda circle { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1.2; }
.mapa-legenda .meia { fill: var(--accent); }
.mapa-legenda circle.cheia { fill: var(--accent); stroke: var(--accent); }
.mapa-legenda text { font-family: 'Karla', sans-serif; font-size: 11.5px; font-style: italic; fill: var(--ink-faint); }
.mapa-caderno {
  position: absolute; left: 30px; bottom: 30px; height: 24px; display: flex; align-items: center; gap: 8px;
  border: none; background: transparent; padding: 0 6px; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-style: italic; color: var(--ink-faint);
  transition: color .15s, background-color .15s;
}
.mapa-caderno svg { width: 22px; height: 22px; }
.mapa-caderno:hover { color: var(--accent-deep); background: var(--campo); }
.mapa-nova { position: absolute; left: 206px; bottom: 30px; height: 24px; margin: 0; gap: 8px; align-items: center; }
.mapa-nova .add-mais { font-size: 17px; line-height: 1; opacity: .6; }
.folha-mapa .mapa-nova input[name="titulo"] { flex: none; min-width: 0; width: 130px; height: 24px; line-height: 24px; font-size: 13.5px; padding: 0 2px; }
.folha-mapa .mapa-nova input[name="titulo"]:focus { width: 220px; }
.mapa-enviar-oculto { display: none; }

/* a estação aberta: o mapa recua, o painel entra pela direita */
.mapa-cena.aberta .folha-mapa { opacity: .32; filter: saturate(.8); }
.mapa-cena.aberta .mapa-nova { visibility: hidden; }
.mapa-painel {
  position: absolute; top: 0; right: 0; width: 93%; min-height: 100%; box-sizing: border-box;
  padding: 28px 56px 40px 60px;
  animation: mapa-entra .32s var(--suave) both;
}
.mapa-painel::before {
  box-shadow: 0 0 0 1px rgba(105, 84, 50, .08), 0 18px 44px rgba(40, 32, 18, .22);
  filter: url(#mapa-papel-b);
}
.mapa-painel.sem-animacao { animation: none; }
@keyframes mapa-entra { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.mapa-fechar {
  position: absolute; top: 12px; right: 16px; border: none; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-size: 22px; line-height: 1; padding: 4px 9px; border-radius: 8px;
}
.mapa-fechar:hover { color: var(--ink); background: var(--campo); }
.mapa-ordinal {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 24px 0 0;
  font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-faint);
}
.mapa-voltar { color: var(--ink-faint); text-decoration: none; }
.mapa-voltar:hover { color: var(--accent-deep); }
.mapa-mover { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.mapa-painel:hover .mapa-mover, .mapa-mover:focus-within { opacity: 1; }
.mapa-mover button {
  border: none; background: transparent; cursor: pointer; color: var(--ink-faint);
  font-size: 16px; line-height: 1; padding: 2px 7px; border-radius: 6px; letter-spacing: 0;
}
.mapa-mover button:hover:not(:disabled) { color: var(--ink); background: var(--campo); }
.mapa-mover button:disabled { opacity: .3; cursor: default; }
.mapa-mover button.apagar:hover { color: var(--terra-tinta); background: var(--terra-soft); }
.mapa-titulo { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 27px; line-height: 1.15; margin: 8px 0 4px; cursor: text; }
.mapa-titulo-fixo { cursor: default; }
.mapa-resumo { font-style: italic; color: var(--ink-soft); margin: 0 0 14px; cursor: text; white-space: pre-wrap; line-height: 1.5; }
.mapa-resumo.vazia { color: var(--ink-faint); }
.mapa-resumo-fixo { cursor: default; color: var(--ink-faint); }
.mapa-status { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.mapa-status button {
  display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--ink-faint); padding: 3px 7px; border-radius: 7px;
}
.mapa-status button:hover { background: var(--campo); color: var(--ink); }
.mapa-status button.ativo { color: var(--ink); font-weight: 600; }
.mapa-status i { width: 13px; height: 13px; border-radius: 50%; border: 1.4px solid var(--ink-soft); box-sizing: border-box; display: inline-block; }
.mapa-status i.st-rascunho { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.mapa-status i.st-definido { background: var(--accent); border-color: var(--accent); }
.mapa-secao h4 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 20px 0 4px;
  font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600;
}
.mapa-secao h4 small { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; font-style: italic; color: var(--ink-faint); }
.mapa-lista { list-style: none; margin: 0; padding: 0; }
.mapa-item {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 8px 0 8px 22px;
  border-bottom: 1px dashed var(--line); font-size: 14.5px; line-height: 1.5; cursor: default;
}
.mapa-item::before { content: ''; position: absolute; left: 4px; top: 15px; width: 8px; height: 8px; border: 1.3px solid var(--ink-soft); border-radius: 50%; box-sizing: border-box; }
.mapa-item.mapa-bloco::before { display: none; }
.mapa-item.mapa-bloco { padding-left: 2px; }
.mapa-item .alca { position: absolute; left: -16px; top: 9px; width: 16px; cursor: grab; color: var(--ink-faint); opacity: 0; font-size: 12px; letter-spacing: -2px; transition: opacity .15s; }
.mapa-item:hover .alca { opacity: .7; }
.mapa-item.arrastando { opacity: .35; }
.mapa-item .texto { flex: 1; min-width: 0; white-space: pre-wrap; cursor: text; }
.mapa-item .texto.vazia { color: var(--ink-faint); font-style: italic; }
.mapa-item .acoes-linha { gap: 2px; align-self: flex-start; margin-top: 1px; }
.mapa-item:hover .acoes-linha > *, .mapa-item .acoes-linha > :focus-visible { opacity: 1; }
.mapa-item .acoes-linha button { border: none; background: transparent; cursor: pointer; color: var(--ink-faint); font-size: 14px; line-height: 1; padding: 3px 6px; border-radius: 6px; }
.mapa-item .acoes-linha button:hover { color: var(--ink); background: var(--campo); }
.mapa-item .acoes-linha button.apagar:hover { color: var(--terra-tinta); background: var(--terra-soft); }
.mapa-vazio { color: var(--ink-faint); font-style: italic; font-size: 13.5px; padding: 6px 0 2px; margin: 0; }
.mapa-bloco-corpo { flex: 1; min-width: 0; }
.mapa-bloco-titulo { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 17px; margin: 0 0 4px; cursor: text; }
.mapa-bloco-titulo.vazia { font-family: 'Karla', sans-serif; font-size: 12.5px; font-weight: 400; font-style: italic; color: var(--ink-faint); }
.mapa-bloco-texto, .mapa-texto-livre { white-space: pre-wrap; line-height: 1.65; cursor: text; }
.mapa-bloco-texto.vazia, .mapa-texto-livre.vazia { color: var(--ink-faint); font-style: italic; font-size: 13.5px; }
.mapa-texto-livre { padding: 4px 0; }
.mapa-material-corpo { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mapa-material .texto { flex: 0 1 auto; }
.mapa-abrir { font-family: inherit; font-size: 12px; color: var(--accent-deep); text-decoration: none; border: none; background: transparent; padding: 0; cursor: pointer; border-bottom: 1px dotted var(--fio-forte); }
.mapa-abrir:hover { color: var(--ink); border-bottom-color: var(--ink); }
.mapa-link-texto { flex: 1 1 100%; font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.mapa-link-texto.vazia { font-style: italic; }
.mapa-mais { border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 12.5px; color: var(--ink-faint); padding: 9px 0 0; }
.mapa-mais:hover { color: var(--accent-deep); }
.mapa-painel .add-linha { margin-top: 4px; gap: 9px; }
.mapa-painel .add-linha input, .mapa-nova input {
  flex: 1; min-width: 160px; border: none; border-bottom: 1px dashed transparent; background: transparent;
  padding: 8px 2px; font-size: 14.5px; font-family: inherit; color: var(--ink); outline: none;
}
.mapa-painel .add-linha input:focus, .mapa-nova input:focus { border-bottom-color: var(--gold); }
.mapa-painel .add-linha .mapa-link-campo { font-size: 12.5px; }
.mapa-paginas .texto { text-decoration: none; color: var(--ink); font-family: 'Fraunces', Georgia, serif; font-size: 16.5px; }
.mapa-paginas .texto:hover { color: var(--accent-deep); }
.mapa-painel .editando { background: var(--campo); outline: 1.5px solid rgba(201, 154, 63, .7); }

/* ---- entrar de fora (celular pelo Tailscale) e definir a senha ---- */
.modo-entrar .nav { display: none; }
.modo-entrar main { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.entrar-folha { width: min(380px, 100%); padding: 32px 30px 28px; text-align: center; }
.entrar-folha .brand-star { width: 38px; height: 38px; color: var(--gold); }
.entrar-folha h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 28px; margin: 6px 0 10px; }
.entrar-folha p { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.entrar-folha input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 11px 12px; margin-bottom: 12px;
  border: 1px solid var(--fio); border-radius: 10px; background: var(--campo); color: var(--ink); outline: none;
}
.entrar-folha input:focus { border-color: var(--gold); }
.entrar-folha .botao-primario { width: 100%; }
.entrar-folha .entrar-erro { color: var(--terra-tinta); margin: 0 0 12px; }
.entrar-folha .entrar-ok { color: var(--accent-deep); margin: 0 0 12px; }
.entrar-folha .entrar-nota { font-size: 12.5px; color: var(--ink-faint); margin: 16px 0 0; }

/* ---- toque (celular): o que só aparecia com o mouse em cima fica visível; o duplo toque edita (app.js) ---- */
body { touch-action: manipulation; }
@media (hover: none) {
  .acoes-linha > *, .frente-item .alca, .video-linha .alca, .mapa-item .alca, .mapa-mover { opacity: .6; }
}

/* ---- celular: o que transbordava a tela estreita ---- */
@media (max-width: 780px) {
  /* Planejar: a coluna da folha tinha largura mínima de 380px */
  .planejar-colunas > * { min-width: 0; }
  .folha-cab .cab-linha { flex-wrap: wrap; }
  /* Agenda: o mês rola de lado dentro da grade, e a página fica parada */
  .grade-agenda { grid-template-columns: repeat(7, minmax(104px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
  /* Ideias: as posições soltas do quadro são da tela grande; no celular os cartões viram uma lista */
  .quadro { min-height: 0; overflow: visible; touch-action: auto; display: flex; flex-direction: column; gap: 12px; }
  .quadro .cartao-livre { position: relative !important; left: auto !important; top: auto !important; width: auto !important; transform: none !important; }
}
@media (max-width: 780px) {
  /* a barra lateral vira uma faixa curta: marca pequena e as seções numa linha que rola de lado */
  .nav { padding: 12px 10px 8px; gap: 6px; }
  .nav .brand { padding: 0 6px 4px; gap: 10px; }
  .nav .brand h1 { font-size: 21px; }
  .nav .brand p { display: none; }
  .nav .brand-star, .nav .brand-icone svg { width: 26px; height: 26px; }
  .nav nav { flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav nav::-webkit-scrollbar { display: none; }
  .nav nav a { flex: none; white-space: nowrap; padding: 8px 11px; }
  .nav nav .nav-grupo { flex: none; align-self: center; margin: 0 2px 0 8px; }
  .nav nav a.sub { padding-left: 11px; }
  .nav-foco { display: none; }
  .nav-voltar { margin-bottom: 4px; }
  /* a folha do dia: menos margem, e os botões da tarefa descem para uma linha própria,
     para o texto da tarefa ter a largura da folha */
  .folha { padding: 24px 16px 22px 26px; }
  .folha::before { left: 12px; }
  .item { gap: 10px; flex-wrap: wrap; }
  .item > .acoes { flex-basis: 100%; justify-content: flex-end; margin-top: -6px; }
}
@media (max-width: 780px) {
  /* o tempo desce para baixo da data, numa linha corrida */
  .folha-cab .clima { flex-basis: 100%; justify-content: flex-start; margin: 10px 0 0; max-width: none; }
  .folha-cab .clima-texto { text-align: left; max-width: none; }
}
@media (max-width: 780px) {
  /* painéis: o texto da linha nunca some atrás de selos e botões — eles descem se faltar lugar */
  .bloco { padding: 16px 14px 12px 22px; }
  .linha-caderno, .frente-item, .video-linha { flex-wrap: wrap; row-gap: 4px; }
  .linha-caderno > .texto-grupo, .frente-item > .texto-grupo, .video-linha > .texto-grupo { flex: 1 1 150px; min-width: 0; }
  .frente-item > .badge, .video-linha > .estado { margin-left: auto; }
}
@media (max-width: 780px) {
  /* endereços longos (links nas notas) quebram em vez de vazar da folha */
  .frente-nota, .texto, .canal-nota, .nota-bloco, .mapa-link-texto { overflow-wrap: anywhere; }
}
@media (max-width: 780px) {
  /* Mapa no celular: a carta rola de lado num tamanho legível (o papel rola junto),
     e a estação aberta vira uma folha inteira no lugar do mapa, para ler com folga */
  .folha-mapa { overflow-x: auto; padding: 8px 8px 12px; border-radius: 7px; box-shadow: var(--sombra);
    background: var(--mapa-amassado) 0 0 / 420px 420px, #ecdfc0; background-blend-mode: multiply, normal;
    background-attachment: local; }
  .folha-mapa::before { display: none; }
  .mapa-svg { min-width: 660px; }
  .folha-mapa > .mapa-caderno, .folha-mapa > .mapa-nova { position: relative; left: auto; right: auto; bottom: auto; display: inline-flex; margin: 2px 6px; }
  .mapa-cena.aberta .folha-mapa { display: none; }
  .mapa-painel { position: relative; width: 100%; min-height: 0; padding: 22px 18px 26px 22px; }
  .mapa-item .alca { display: none; }
  .mapa-titulo { font-size: 24px; }
}