/* Rotina — app de um dia só. Escuro por padrão (é aberto às 23h30 na cama e
   às 14h no sol; o escuro com contraste alto cobre os dois), claro se o
   aparelho pedir. Fontes da marca, servidas daqui. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('fonts/figtree-latin.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url('fonts/fraunces-latin.woff2') format('woff2')}

:root{
  --fundo:#120b06;
  --fundo-2:#1a110a;
  --painel:#211710;
  --borda:rgba(255,231,201,.10);
  --creme:#FFE7C9;
  --texto:#f1e2cc;
  --texto-2:#c9ae90;
  --apagado:#a88b6d;
  --laranja:#EE7A2E;
  --laranja-escuro:#8A3E14;
  --verde:#7fd49a;
  --azul:#8fb4e3;
  --teal:#6fd0c6;
  --lilas:#c4a6f2;
  --vermelho:#ea6a55;
  --sombra:0 10px 30px -12px rgba(0,0,0,.6);
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --gutter:3.4rem;      /* coluna dos horários */
  --trilho:3.25rem;     /* largura do comprimido */
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    --fundo:#faf4ea;--fundo-2:#f3eadb;--painel:#fff;
    --borda:rgba(40,20,5,.10);--creme:#2a170a;--texto:#2a170a;--texto-2:#6b5442;--apagado:#8a745f;
    --laranja:#d9661f;--verde:#2e9a5a;--azul:#3b6fb6;--teal:#1f9c92;--lilas:#7b4fd6;--vermelho:#c9432f;
    --sombra:0 10px 24px -14px rgba(40,20,5,.35);
    color-scheme:light;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--fundo);color:var(--texto);
  font:16px/1.4 var(--sans);font-feature-settings:"tnum";
  max-width:640px;margin:0 auto;
  padding:max(12px,env(safe-area-inset-top)) 16px calc(136px + env(safe-area-inset-bottom));
}

/* cabeçalho compacto que gruda no topo quando a lista rola: você nunca fica
   no meio do dia sem saber que dia é. */
.grudado{
  position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin:6px -16px 8px;padding:10px 16px;background:color-mix(in srgb,var(--fundo) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--borda);
  font-size:.9rem;color:var(--texto-2);
}
.grudado-placar{font-weight:600;color:var(--texto);white-space:nowrap}
.grudado-placar.completo{color:var(--verde)}
::selection{background:var(--laranja);color:#fff}
:focus-visible{outline:2px solid var(--laranja);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
code{font:inherit;font-weight:600;color:var(--laranja)}
.ic{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── topo ─────────────────────────────────────────────────────────────── */
.topo{padding:8px 0 4px}
.data{font-size:.95rem;color:var(--texto-2)}
.titulo{font:600 2.1rem/1.05 var(--serif);letter-spacing:-.02em;color:var(--laranja);margin-top:2px;text-wrap:balance}
.resumo{margin-top:6px;color:var(--texto-2);font-size:.95rem;text-wrap:pretty}
.progresso{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--fundo-2);border:1px solid var(--borda);font-size:.85rem;font-weight:600;color:var(--texto)}
.progresso .barra{width:64px;height:6px;border-radius:3px;background:var(--borda);overflow:hidden}
.progresso .barra i{display:block;height:100%;width:var(--pct,0%);background:var(--verde);border-radius:3px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.progresso.completo{color:var(--verde)}

.semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:18px 0 6px}
.dia{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0;border-radius:12px;color:var(--texto-2)}
.dia .nome{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.dia .num{width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:50%;font-weight:600;font-size:1rem;color:var(--texto)}
.dia.hoje .num{background:var(--laranja);color:#fff}
.dia.futuro{opacity:.55}
.dia .pontos{display:flex;gap:3px;height:6px}
.dia .pontos i{width:6px;height:6px;border-radius:50%;border:1.5px solid var(--apagado)}
.dia .pontos i.ok{background:var(--verde);border-color:var(--verde)}
.dia .pontos i.perdeu{border-color:var(--vermelho)}
.legenda{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;font-size:.75rem;color:var(--apagado);margin:2px 0 4px}
.legenda i{display:inline-block;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--apagado);margin-right:5px;vertical-align:0}
.legenda i.ok{background:var(--verde);border-color:var(--verde)}
.legenda i.perdeu{border-color:var(--vermelho)}

/* a linha do agora, atravessando o bloco ativo na altura exata da hora */
/* Só atravessa a coluna dos horários e o comprimido — nunca o texto. */
.agora-marca{position:absolute;left:0;width:calc(var(--gutter) + var(--trilho) + 4px);top:var(--pct,0%);height:0;border-top:2px solid var(--laranja);pointer-events:none;z-index:2}
.agora-marca b{position:absolute;left:0;top:-.8em;font-size:.8rem;font-weight:700;color:var(--laranja);background:var(--fundo);padding:0 6px 0 0;line-height:1.4}
.agora-marca::after{content:"";position:absolute;right:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--laranja)}
.bloco.agora .quando{visibility:hidden}   /* a marca 16:32 ocupa a coluna; o fim vai no texto */

/* a barra fixa: o que está acontecendo e o botão na altura do polegar */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:5;
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  max-width:640px;margin:0 auto;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--painel);border-top:1px solid var(--borda);box-shadow:0 -12px 30px -16px rgba(0,0,0,.7);
}
.barra-pilula{width:44px;height:44px;border-radius:50%;background:var(--fundo-2);border:1px solid var(--borda);display:grid;place-items:center;color:var(--cor,var(--laranja))}
.barra.ativo .barra-pilula{background:var(--cor,var(--laranja));color:#fff;border-color:transparent}
.barra-texto{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.barra-rotulo{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--apagado)}
.barra-nome{font-size:1rem;color:var(--creme);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-meta{font-size:.85rem;color:var(--cor,var(--texto-2))}
.barra-botao{
  height:48px;padding:0 18px;border:0;border-radius:14px;background:var(--laranja);color:#fff;
  font:600 1rem var(--sans);display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  transition:transform .15s,background .2s;-webkit-tap-highlight-color:transparent;
}
.barra-botao:active{transform:scale(.95)}
.barra-botao .ic{stroke-width:2.5}
.barra-botao.feito{background:var(--verde);color:#0f2a18;cursor:default}
.barra-botao[hidden]{display:none!important}

/* ── aviso da chave ───────────────────────────────────────────────────── */
.aviso-chave{display:flex;gap:14px;align-items:flex-start;background:var(--painel);border:1px solid var(--borda);border-radius:16px;padding:16px;margin:12px 0 4px}
.aviso-chave .ic{width:1.6em;height:1.6em;color:var(--laranja);margin-top:2px}
.aviso-chave p{color:var(--texto-2);font-size:.95rem;margin-top:4px}

/* ── a linha do tempo ─────────────────────────────────────────────────── */
.linha{list-style:none;margin-top:10px;position:relative}
.linha::before{content:"";position:absolute;left:calc(var(--gutter) + var(--trilho)/2 - 1px);top:0;bottom:0;width:2px;background:var(--borda)}
.bloco{
  display:grid;grid-template-columns:var(--gutter) var(--trilho) 1fr auto;
  column-gap:14px;align-items:stretch;position:relative;
  min-height:var(--alt,64px);margin-bottom:10px;
}
.bloco .quando{font-size:.8rem;color:var(--apagado);padding-top:2px;text-align:right;padding-right:6px;line-height:1.2}
.bloco .quando b{display:block;color:var(--texto-2);font-weight:600}
.bloco .pilula{
  position:relative;border-radius:999px;background:var(--fundo-2);border:1px solid var(--borda);
  display:grid;place-items:center;color:var(--cor,var(--texto-2));overflow:hidden;
  transition:background .2s,color .2s;
}
.bloco .pilula .ic{width:1.45em;height:1.45em;position:relative;z-index:1}
.bloco .pilula .enche{position:absolute;left:0;right:0;top:0;height:var(--pct,0%);background:var(--cor,var(--laranja));opacity:.92;transition:height .6s cubic-bezier(.2,.8,.2,1)}
.bloco.agora .pilula{color:#fff;border-color:transparent;box-shadow:0 0 0 3px color-mix(in srgb,var(--cor,var(--laranja)) 35%,transparent)}
.bloco.agora .pilula .ic{color:#fff}
/* passado: legível, só recuado. Apagar demais some com o ícone e com o "confirmado". */
.bloco.passou .pilula{border-color:transparent}
.bloco.passou .pilula .enche{opacity:.38}
.bloco.passou .pilula .ic{color:var(--texto)}
.bloco.passou .nome{color:var(--texto-2)}
.bloco.passou .meta{color:var(--apagado)}
.bloco .oque{padding:2px 0;min-width:0}
.bloco .meta{font-size:.85rem;color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bloco.agora .meta{color:var(--cor,var(--laranja));font-weight:600}
.bloco .nome{font-size:1.15rem;font-weight:600;color:var(--creme);letter-spacing:-.01em;line-height:1.2;text-wrap:balance}
.bloco.agora .nome{font-size:1.35rem}
.bloco .estado{font-size:.82rem;color:var(--apagado);margin-top:4px;display:flex;align-items:center;gap:6px}
.bloco .estado .ic{width:1em;height:1em}
.bloco .estado.ok{color:var(--verde)}
.bloco .estado.perdeu{color:var(--vermelho)}
.bloco .estado.pedido{color:var(--cor,var(--laranja))}

/* o círculo de confirmar: alvo de toque de 48px, sem parecer botão de site */
.check{
  align-self:start;margin-top:4px;width:48px;height:48px;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;color:var(--cor,var(--laranja));
  -webkit-tap-highlight-color:transparent;
}
.check span{width:30px;height:30px;border-radius:50%;border:2.5px solid currentColor;display:grid;place-items:center;transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s}
.check .ic{width:1.1em;height:1.1em;color:#fff;opacity:0;transform:scale(.5);transition:opacity .15s,transform .18s cubic-bezier(.2,.8,.2,1)}
.check:hover span,.check:focus-visible span{transform:scale(1.08)}
.check:active span{transform:scale(.9)}
.check.feito span{background:currentColor}
.check.feito .ic{opacity:1;transform:scale(1)}
.check.feito{cursor:default}
.check.pulso span{animation:pulso .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 60%,transparent)}100%{box-shadow:0 0 0 16px transparent}}
.check.espera{opacity:.6;pointer-events:none}

.livre{display:grid;grid-template-columns:var(--gutter) var(--trilho) 1fr;column-gap:14px;align-items:center;margin:-2px 0 10px;color:var(--apagado);font-size:.85rem}
.livre .tracos{justify-self:center;width:2px;height:22px;background:repeating-linear-gradient(to bottom,var(--apagado) 0 3px,transparent 3px 7px)}

/* cores por tipo de bloco */
.t-treino{--cor:var(--verde)}
.t-foco{--cor:var(--laranja)}
.t-fixo{--cor:var(--azul)}
.t-transito{--cor:var(--teal)}
.t-descanso{--cor:var(--lilas)}
.t-fecho{--cor:var(--lilas)}

/* ── tarefas ──────────────────────────────────────────────────────────── */
.tarefas{margin-top:26px;background:var(--painel);border:1px solid var(--borda);border-radius:18px;padding:16px;box-shadow:var(--sombra)}
.tarefas-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.tarefas h2{font-size:1.1rem;font-weight:600;color:var(--creme)}
.conta{font-size:.85rem;color:var(--texto-2)}
.lista-tarefas{list-style:none}
.tarefa{display:grid;grid-template-columns:44px 1fr;align-items:center;min-height:48px;border-top:1px solid var(--borda)}
.tarefa:first-child{border-top:0}
.tarefa .marca{width:44px;height:48px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--laranja);-webkit-tap-highlight-color:transparent}
.tarefa .marca span{width:24px;height:24px;border-radius:8px;border:2px solid currentColor;display:grid;place-items:center;transition:transform .18s,background .18s}
.tarefa .marca .ic{width:.95em;height:.95em;color:#fff;opacity:0;transform:scale(.5);transition:opacity .15s,transform .18s}
.tarefa .marca:active span{transform:scale(.9)}
.tarefa.feita .marca span{background:currentColor}
.tarefa.feita .marca .ic{opacity:1;transform:scale(1)}
.tarefa .texto{font-size:1rem;padding:10px 0;overflow-wrap:anywhere}
.tarefa.feita .texto{text-decoration:line-through;color:var(--apagado)}
.tarefa.extra .texto{color:var(--texto-2)}
.vazio{color:var(--texto-2);font-size:.95rem;padding:10px 4px 12px;text-wrap:pretty}
.nova{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--borda)}
.nova input{flex:1;min-width:0;background:var(--fundo-2);border:1px solid var(--borda);border-radius:12px;padding:12px 14px;color:var(--texto);font:inherit;caret-color:var(--laranja)}
.nova input::placeholder{color:var(--apagado)}
.nova input:focus{border-color:var(--laranja);outline:none}
.nova button{width:48px;height:48px;background:var(--laranja);color:#fff;border:0;border-radius:12px;cursor:pointer;display:grid;place-items:center;transition:transform .15s}
.nova button:active{transform:scale(.94)}
.nova button .ic{width:1.35em;height:1.35em;stroke-width:2.5}

.rodape{margin-top:22px;color:var(--apagado);font-size:.85rem;display:flex;gap:8px;align-items:flex-start;text-wrap:pretty}
.rodape .ic{margin-top:2px}

.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--creme);color:#1a0e05;padding:12px 18px;border-radius:14px;font-weight:600;max-width:92vw;box-shadow:var(--sombra);animation:sobe .25s cubic-bezier(.2,.8,.2,1)}
.toast.erro{background:var(--vermelho);color:#fff}
@keyframes sobe{from{transform:translate(-50%,12px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media (prefers-color-scheme:light){.toast{color:#fff;background:#2a170a}}

@media (max-width:400px){
  body{padding-left:12px;padding-right:12px}
  .grudado{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
  :root{--gutter:3rem;--trilho:3rem}
  .bloco{column-gap:10px}
  .bloco .nome{font-size:1.05rem}
  .bloco.agora .nome{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .check.pulso span{animation:none}
  .bloco .pilula .enche,.toast{transition:none;animation:none}
}