/* Metas (cartões que viram, medalhas 3D) e Hábitos (bolinhas que giram, sequência, mapa). */

.planner-titulo.esquerda { text-align: left; min-width: 0; }
.vazio-grande { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.vazio-grande p { margin: 0; }

/* ---------- Metas ---------- */
.grade-metas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.meta-cena { perspective: 1200px; min-height: 340px; }
.meta-cartao { position: relative; height: 100%; min-height: 340px; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(.3, 1.3, .5, 1); }
.meta-cena.virando .meta-cartao { transform: rotateY(180deg); }
.meta-frente, .meta-verso {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 24px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: var(--cartao); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.45), inset 0 0 0 3px var(--clara);
}
.meta-frente::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 64px; border-radius: 24px 24px 0 0; background: linear-gradient(180deg, var(--clara), transparent); opacity: 0.7; pointer-events: none; }
.meta-verso { transform: rotateY(180deg); justify-content: center; background: radial-gradient(circle at 50% 40%, #fff, var(--clara)); }
.meta-verso .mao { font-size: 32px; margin: 0; color: var(--forte); }
.meta-titulo { position: relative; border: 0; background: transparent; cursor: pointer; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; color: var(--tinta); line-height: 1.15; padding: 2px; }
.prazo { font-size: 12px; font-weight: 800; color: var(--apagado); }
.prazo.atrasado { color: #B3261E; }
.meta-progresso { position: relative; width: 110px; height: 110px; margin: 4px 0; }
.meta-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; color: var(--forte); }
.anel-progresso { transition: stroke-dasharray 0.8s cubic-bezier(.3, 1.2, .5, 1); }
.meta-numeros { margin: 0; font-weight: 800; }
.meta-botoes { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; justify-content: center; }
.meta-botoes .botao { min-height: 44px; }
.meta-botoes .botao:not(.botao-claro) { background: var(--forte); }
.meta-cena:hover .meta-cartao:not(:has(:focus-visible)) { transform: rotateX(4deg) rotateY(-6deg); }
.meta-cena.virando:hover .meta-cartao { transform: rotateY(180deg); }

/* medalha 3D */
.medalha { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: 64px; perspective: 400px; }
.medalha.grande { width: 120px; }
.fitinha { width: 46%; height: 26px; margin-bottom: -6px; background: linear-gradient(90deg, var(--forte) 0 33%, #fff 33% 66%, var(--forte) 66%); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); }
.medalha.grande .fitinha { height: 46px; margin-bottom: -10px; }
.disco { position: relative; width: 64px; height: 64px; transform-style: preserve-3d; transition: transform 0.8s ease; }
.medalha.grande .disco { width: 120px; height: 120px; animation: disco-gira 4s ease-in-out infinite; }
.disco-frente, .disco-verso {
  position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; backface-visibility: hidden;
  background: radial-gradient(circle at 35% 30%, #FFF4C2, #F2C14E 45%, #C9932A); box-shadow: inset 0 0 0 4px #E3AE3A, inset 0 0 0 8px var(--forte), 0 8px 14px -6px rgba(0, 0, 0, 0.45);
  color: #fff; font-size: 28px; font-weight: 800;
}
.disco-verso { transform: rotateY(180deg); }
@keyframes disco-gira { 0%, 100% { transform: rotateY(-25deg); } 50% { transform: rotateY(25deg); } }

.estante { position: relative; }
.medalhas { list-style: none; margin: 0; padding: 6px 0 22px; display: flex; flex-wrap: wrap; gap: 18px 26px; }
.medalha-item { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 110px; border: 0; background: transparent; cursor: pointer; color: var(--tinta); text-align: center; }
.medalha-item:hover .disco { transform: rotateY(180deg); }
.medalha-nome { font-weight: 800; font-size: 13px; line-height: 1.2; }
.prateleira { height: 14px; margin: 0 -6px; border-radius: 4px; background: linear-gradient(180deg, #C9A06A, #9A7442); box-shadow: 0 8px 12px -6px rgba(0, 0, 0, 0.4); }

/* ---------- Hábitos ---------- */
.habitos-hoje { display: flex; align-items: center; gap: 16px; }
.habitos-hoje p { margin: 0; }
.anel-hoje { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.anel-hoje span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; }
.lista-habitos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.habito { display: flex; flex-direction: column; gap: 14px; }
.habito-cabeca { display: flex; align-items: center; gap: 12px; }
.habito-icone {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 16px; background: var(--clara); display: flex; align-items: center; justify-content: center;
  transform: rotate(-6deg); box-shadow: 0 6px 10px -6px var(--forte);
}
.habito-icone img { width: 40px; height: 40px; }
.habito:hover .habito-icone { animation: icone-pula 0.6s ease; }
@keyframes icone-pula { 0%, 100% { transform: rotate(-6deg); } 40% { transform: rotate(8deg) translateY(-6px) scale(1.08); } }
.habito-nome-bloco { display: flex; flex-direction: column; min-width: 0; }
.habito-nome { border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; font-family: var(--fonte-titulo); font-size: 21px; font-weight: 700; color: var(--tinta); }
.sequencia { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; color: #B5561A; }
.sequencia.zero { color: var(--apagado); }
.sequencia.quente .chama { animation: chama 0.8s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes chama { from { transform: scaleY(1) rotate(-3deg); } to { transform: scaleY(1.15) rotate(3deg); } }

.habito-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bolinha-dia {
  position: relative; aspect-ratio: 1; max-width: 46px; width: 100%; justify-self: center; border: 0; padding: 0; cursor: pointer;
  background: transparent; perspective: 300px;
}
.bolinha-dia:disabled { cursor: default; opacity: 0.45; }
.bolinha-frente, .bolinha-verso {
  position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; backface-visibility: hidden;
  transition: transform 0.5s cubic-bezier(.3, 1.4, .5, 1);
}
.bolinha-frente { background: var(--cartao); box-shadow: inset 0 0 0 2.5px var(--clara); font-weight: 800; font-size: 13px; color: var(--apagado); }
.bolinha-dia.hoje .bolinha-frente { box-shadow: inset 0 0 0 2.5px var(--forte); color: var(--forte); }
.bolinha-verso { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--forte) 60%, #fff), var(--forte)); transform: rotateY(180deg); box-shadow: 0 6px 10px -6px var(--forte); }
.bolinha-dia.feito .bolinha-frente { transform: rotateY(-180deg); }
.bolinha-dia.feito .bolinha-verso { transform: rotateY(0); }
.efeitos-ativos .bolinha-dia.girou .bolinha-verso { animation: bolinha-gira 0.7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes bolinha-gira { from { transform: rotateY(180deg) scale(0.6); } to { transform: rotateY(0) scale(1); } }
.bolinha-dia:not(:disabled):hover .bolinha-frente { box-shadow: inset 0 0 0 2.5px var(--forte); }

.habito-mapa { display: flex; flex-direction: column; gap: 6px; }
.mapa-grade { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; }
.quadradinho { aspect-ratio: 1; border-radius: 4px; background: var(--suave); }
.quadradinho.ok { background: var(--forte); }
.quadradinho.hoje { box-shadow: 0 0 0 2px var(--tinta); }
.quadradinho.futuro { opacity: 0.35; }

.icones { display: flex; flex-wrap: wrap; gap: 6px; }
.opcao-icone input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao-icone span { display: flex; width: 50px; height: 50px; align-items: center; justify-content: center; border-radius: 14px; background: var(--suave); cursor: pointer; border: 2.5px solid transparent; }
.opcao-icone img { width: 36px; height: 36px; }
.opcao-icone input:checked + span { border-color: var(--destaque); background: #fff; transform: translateY(-2px); }
.opcao-icone input:focus-visible + span { outline: 3px solid #6E8BFF; }

/* opções de cor (compartilhado com caixinhas) */
.cores { display: flex; flex-wrap: wrap; gap: 10px; }
.opcao-cor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao-cor span:first-of-type { display: block; width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); cursor: pointer; }
.opcao-cor input:checked + span { box-shadow: 0 0 0 3px var(--tinta); }
.opcao-cor input:focus-visible + span { outline: 3px solid #6E8BFF; outline-offset: 3px; }

/* ---------- Chegada ---------- */
.efeitos-ativos .metas.chegando .meta-cena { animation: meta-chega 0.7s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes meta-chega { from { transform: perspective(900px) rotateY(-80deg) translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
.efeitos-ativos .metas.chegando .anel-progresso, .efeitos-ativos .habitos.chegando .anel-progresso { animation: anel-enche 1.2s cubic-bezier(.3, 1, .5, 1) both 0.3s; }
@keyframes anel-enche { from { stroke-dasharray: 0 999; } }
.efeitos-ativos .metas.chegando .medalhas li { animation: medalha-cai 0.8s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(0.3s + var(--i) * 90ms); }
@keyframes medalha-cai { from { transform: translateY(-60px) rotateY(180deg); opacity: 0; } to { transform: none; opacity: 1; } }
.efeitos-ativos .habitos.chegando .habito { animation: habito-chega 0.6s cubic-bezier(.2, 1, .3, 1) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes habito-chega { from { transform: perspective(900px) rotateX(-40deg) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.efeitos-ativos .habitos.chegando .quadradinho.ok { animation: quadradinho-pop 0.4s ease both 0.5s; }
@keyframes quadradinho-pop { from { transform: scale(0); } }

.sem-efeitos .medalha.grande .disco, .sem-efeitos .chama { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .meta-cartao, .bolinha-frente, .bolinha-verso { transition: none; }
  .medalha.grande .disco, .chama, .metas .meta-cena, .habito, .medalhas li, .quadradinho, .anel-progresso { animation: none !important; }
}
@media (max-width: 640px) {
  .lista-habitos { grid-template-columns: 1fr; }
  .mapa-grade { grid-template-columns: repeat(11, minmax(0, 1fr)); }
}

/* ===================== Habit tracker ===================== */
.topo-habitos .destaque-seq { color: #B5561A; font-weight: 700; }
.habito-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.habito-detalhe { font-size: 12.5px; font-weight: 700; color: var(--apagado); }
.habito-detalhe.forte { color: var(--forte); font-weight: 800; }
.habito-gatilho { font-size: 19px; line-height: 1; color: var(--apagado); }
.habito-motivo { font-size: 19px; line-height: 1.1; color: var(--apagado); }

/* Hoje: grupos por período do dia */
.grade-periodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 22px; align-items: start; }
.icone-periodo { width: 28px; height: 28px; vertical-align: -6px; }
.lista-hoje { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.item-habito { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 18px; transition: background 0.3s ease, opacity 0.3s ease; }
.item-habito.feito { background: color-mix(in srgb, var(--clara) 45%, transparent); }
.item-habito.feito .habito-nome { text-decoration: line-through; text-decoration-color: var(--forte); text-decoration-thickness: 2px; opacity: 0.75; }
.item-habito.pulado { opacity: 0.6; }
.item-habito-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-habito .habito-nome { font-size: 19px; line-height: 1.15; }
.item-habito-acoes { display: flex; gap: 4px; }
.botao-mini { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--suave); color: var(--tinta); font-size: 16px; font-weight: 800; cursor: pointer; }
.botao-mini:hover { background: var(--clara); }
.folga { text-align: center; margin: 4px 0 0; }

.marcar-grande { position: relative; width: 60px; height: 60px; flex-shrink: 0; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 50%; transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1); }
.marcar-grande:active { transform: scale(0.9); }
.anel-marcar { position: absolute; inset: 0; width: 100%; height: 100%; }
.anel-marcar circle:last-child { transition: stroke-dashoffset 0.5s cubic-bezier(.3, 1.3, .5, 1); }
.marcar-miolo { position: absolute; inset: 9px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cartao); transition: background 0.3s ease; }
.marcar-miolo img { width: 30px; height: 30px; }
.marcar-num { font-family: var(--fonte-titulo); font-weight: 700; font-size: 20px; color: var(--forte); }
.marcar-grande.feito .marcar-miolo { background: var(--forte); }
.efeitos-ativos .marcar-grande.pulou { animation: marcar-pula 0.6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes marcar-pula { 0% { transform: scale(0.7) rotate(-20deg); } 60% { transform: scale(1.15) rotate(6deg); } 100% { transform: none; } }
.pulado-icone { display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--suave); cursor: default; }

/* Semana: bolinha pulada e folga */
.bolinha-dia.pulada .bolinha-frente { background: repeating-linear-gradient(45deg, var(--suave) 0 4px, transparent 4px 8px); }
.bolinha-dia.folga:not(.feito) .bolinha-frente { opacity: 0.4; box-shadow: inset 0 0 0 2px dashed var(--clara); }

/* Mês: tracker de bullet journal */
.tracker-mes { padding-top: 22px; }
.tracker-topo { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.tracker-topo .botao-redondo { text-decoration: none; font-size: 26px; font-weight: 700; }
.tracker-titulo { margin: 0; font-size: 34px !important; text-align: center; }
.tabela-rolagem { overflow-x: auto; padding-bottom: 6px; }
.tabela-tracker { border-collapse: separate; border-spacing: 3px; margin: 0 auto; }
.tabela-tracker th { font-size: 11px; font-weight: 800; color: var(--apagado); text-align: center; padding: 0 0 4px; min-width: 24px; }
.tabela-tracker thead th { line-height: 1.1; }
.letra-dia { display: block; font-size: 9px; opacity: 0.7; text-transform: uppercase; }
.tabela-tracker th.fds { color: var(--destaque); }
.tabela-tracker th.hoje { color: var(--destaque-texto, #fff); background: var(--destaque); border-radius: 8px; }
.tabela-tracker .canto { position: sticky; left: 0; background: var(--cartao); z-index: 2; }
.nome-linha { position: sticky; left: 0; z-index: 1; background: var(--cartao); text-align: left !important; padding: 0 10px 0 0 !important; white-space: nowrap; max-width: 170px; }
.nome-linha img { width: 22px; height: 22px; vertical-align: -6px; margin-right: 6px; }
.nome-linha span { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 700; color: var(--tinta); display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tabela-tracker td { padding: 0; }
.celula {
  display: block; width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: transparent; box-shadow: inset 0 0 0 1.6px color-mix(in srgb, var(--forte, var(--destaque)) 45%, transparent);
  transition: transform 0.2s cubic-bezier(.3, 1.6, .5, 1);
}
.celula:hover:not(:disabled) { transform: scale(1.18); }
.celula:disabled { opacity: 0.3; cursor: default; }
.celula.ok { background: var(--forte, var(--destaque)); box-shadow: 0 2px 4px -1px var(--forte, var(--destaque)); }
.celula.parcial { background: linear-gradient(0deg, var(--clara, var(--suave)) 50%, transparent 50%); }
.celula.pul { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--apagado) 40%, transparent) 0 2px, transparent 2px 5px); }
.celula.folga:not(.ok) { box-shadow: none; background: radial-gradient(color-mix(in srgb, var(--apagado) 35%, transparent) 2px, transparent 2.5px); }
.celula.hoje:not(.ok) { box-shadow: inset 0 0 0 2.4px var(--forte, var(--destaque)); }
.pct-linha { font-size: 12px; font-weight: 800; color: var(--forte, var(--apagado)); padding-left: 6px !important; }
.legenda-tracker { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin: 10px 0 0; --forte: var(--destaque); --clara: var(--suave); }
.celula.demo { display: inline-block; width: 14px; height: 14px; cursor: default; }

/* Ano: números, rumo aos 66 dias, mapa de calor, medalhas */
.anos-habitos { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 22px; }
.ano-habito { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.numeros-habito { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.numeros-habito div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 4px; border-radius: 16px; background: color-mix(in srgb, var(--clara) 45%, transparent); }
.numeros-habito strong { font-family: var(--fonte-titulo); font-size: 28px; line-height: 1; color: var(--forte); }
.numeros-habito span { font-size: 11px; font-weight: 700; color: var(--apagado); line-height: 1.2; margin-top: 3px; }
.rumo66 { display: flex; flex-direction: column; gap: 4px; }
.mapa-calor-rolagem { overflow-x: auto; }
.mapa-calor { display: flex; gap: 3px; width: max-content; }
.calor-col { display: flex; flex-direction: column; gap: 3px; }
.calor { width: 9px; height: 9px; border-radius: 2px; background: color-mix(in srgb, var(--forte) 8%, var(--suave)); }
.calor.n1 { background: color-mix(in srgb, var(--forte) 30%, var(--cartao)); }
.calor.n2 { background: color-mix(in srgb, var(--forte) 50%, var(--cartao)); }
.calor.n3 { background: color-mix(in srgb, var(--forte) 72%, var(--cartao)); }
.calor.n4 { background: var(--forte); }
.calor.np { background: repeating-linear-gradient(45deg, var(--suave) 0 2px, transparent 2px 4px); }
.calor.n-1 { background: transparent; }
.medalhas-habito { display: flex; flex-wrap: wrap; gap: 8px; }
.medalha-habito { display: flex; flex-direction: column; align-items: center; width: 62px; opacity: 0.35; filter: grayscale(1); }
.medalha-habito.ganhou { opacity: 1; filter: none; }
.medalha-num {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #FFF4C7, #E3B54A 55%, #B8862A); color: #5A3B0E; font-weight: 800; font-size: 14px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5), 0 4px 8px -3px rgba(120, 80, 10, 0.6);
}
.medalha-habito.ganhou .medalha-num { animation: medalha-brilha 3s ease-in-out infinite; }
@keyframes medalha-brilha { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg) scale(1.05); } }
.medalha-nome { font-size: 10.5px; font-weight: 800; text-align: center; margin-top: 3px; color: var(--apagado); line-height: 1.1; }

/* modelos prontos */
.modelos-habito { display: flex; flex-wrap: wrap; gap: 8px; }
.modelo-habito { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 6px; border-radius: 999px; border: 0; background: var(--clara); color: var(--tinta); font-weight: 800; font-size: 13px; cursor: pointer; transition: transform 0.2s ease; }
.modelo-habito:hover { transform: translateY(-2px) rotate(-1deg); }
.modelo-habito img { width: 28px; height: 28px; }
.modelo-habito small { font-weight: 700; opacity: 0.7; }
.modelos-habito.compacto { max-height: 104px; overflow-y: auto; padding: 2px; }

/* janela: mostrar só o campo da frequência escolhida */
.form-habito .campo-vezes, .form-habito .campo-dias { display: none; margin-top: 8px; }
.form-habito.m-freq-semana .campo-vezes { display: flex; }
.form-habito.m-freq-dias .campo-dias { display: flex; }
.opcao-estilo input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao-estilo input[type=checkbox]:checked + span { border-color: var(--destaque); background: #fff; }

@media (max-width: 640px) {
  .anos-habitos, .grade-periodos { grid-template-columns: minmax(0, 1fr); }
  .numeros-habito { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tracker-titulo { font-size: 24px !important; }
  .topo-habitos .destaque-seq { display: block; }
  .topo-habitos .planner-acoes { width: 100%; }
}
.efeitos-ativos .habitos.chegando .item-habito, .efeitos-ativos .habitos.chegando .ano-habito { animation: habito-chega 0.6s cubic-bezier(.2, 1, .3, 1) both; animation-delay: calc(var(--i) * 70ms); }