/* ============================================================
   SEMANA PROGRAMADA — Sistema visual Carlos Canhisares / OH
   Preto, branco, espaço e precisão.
   ============================================================ */
:root{
  --preto:#090909; --branco:#ffffff; --grafite:#3A3A3A; --linha:#D9D9D9;
  --marfim:#F6F0E4; --neutra:#8A8175;
  --bg:#ffffff; --bg-2:#FAFAF8; --bg-3:#F2F1EC;
  --fg:#090909; --fg-2:#3A3A3A; --fg-3:#8A8175;
  --rule:#E4E2DC; --rule-strong:#CFCCC4;
  --painel:#ffffff; --sombra:0 1px 2px rgba(9,9,9,.04), 0 8px 28px rgba(9,9,9,.06);
  --sombra-forte:0 2px 6px rgba(9,9,9,.08), 0 24px 60px rgba(9,9,9,.14);
  --alerta:#B4542F; --ok:#35695A; --atencao:#A07B23;
  /* dourado da OH. No tema claro ele é escurecido: #A98E4E sobre branco dá
     2,9:1 e não passa em texto normal; este dá 5,8:1. */
  --dourado:#7A6230;
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --row:23px; --gutter:clamp(16px, 2.2vw, 34px);
  --radius:3px;
  --h-topo:62px; --h-abas:41px; --h-mobdias:0px; --h-ghead:48px; --h-madru:22px;
  /* no app instalado no iPhone o conteúdo comeca sob a Ilha Dinâmica */
  --safe-top:env(safe-area-inset-top, 0px);
  --sticky-grade:calc(var(--h-topo) + var(--h-abas) + var(--h-mobdias) + var(--safe-top));
}
html[data-tema="escuro"]{
  --bg:#090909; --bg-2:#111110; --bg-3:#181817;
  --fg:#F4F2ED; --fg-2:#B8B4AC; --fg-3:#78746C;
  --rule:#232322; --rule-strong:#34332F;
  --painel:#111110; --sombra:0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.45);
  --sombra-forte:0 2px 6px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.6);
  --alerta:#D97650; --ok:#5E9C8B; --atencao:#C9A24E;
  --dourado:#A98E4E;              /* sobre preto dá 6,8:1 */
  --marfim:#1C1B19;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* `hidden` quer dizer escondido, e ponto. Sem esta linha, qualquer `display`
   declarado depois (numa classe ou na própria linha do HTML) vence o atributo e
   o elemento fica na tela — foi assim que o aviso "Planilha conectada" apareceu
   para quem não tem planilha conectada. Guarda de uma linha para toda a tela. */
[hidden]{display:none !important}
html,body{margin:0; padding:0}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
button{cursor:pointer; background:none; border:none; padding:0}
h1,h2,h3,h4{margin:0; font-weight:400}
.serif{font-family:var(--serif)}
.eyebrow{
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-3);
}
.hairline{height:1px; background:var(--rule); border:0; margin:0}

/* ---------------- CABEÇALHO ---------------- */
.topo{
  position:sticky; top:0; z-index:60; background:var(--bg);
  border-bottom:1px solid var(--rule);
  padding:var(--safe-top) var(--gutter) 0;
}
/* falha de gravação precisa ser visível mesmo no celular, onde o nome e o
   rótulo "Salvo" saem da tela por falta de espaço */
body[data-gravacao="erro"] .topo{border-bottom-color:var(--alerta); box-shadow:inset 0 -2px 0 var(--alerta)}
.topo-in{
  display:flex; align-items:center; gap:20px; height:var(--h-topo); max-width:1760px; margin:0 auto;
  position:relative;
}
/* Centrado na BARRA, não no espaço que sobra: por isso absoluto, e não um item
   do flex — assim o nome não se desloca quando a marca ou os botões mudam de
   largura. pointer-events:none para nunca roubar um clique da barra. */
.topo-nome{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--serif); font-size:21px; letter-spacing:.01em; line-height:1;
  color:var(--dourado); white-space:nowrap; pointer-events:none;
}
.marca{display:flex; align-items:center; gap:14px; flex-shrink:0}
.marca img{height:26px; width:auto; display:block}
html[data-tema="claro"] .logo-branco{display:none}
html[data-tema="escuro"] .logo-preto{display:none}
.marca-sep{width:1px; height:26px; background:var(--rule)}
.marca-txt{line-height:1.15}
.marca-txt .t{font-family:var(--serif); font-size:19px; letter-spacing:.005em; white-space:nowrap}
.marca-txt .s{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3)}
/* estado da gravação: silencioso quando dá certo, visível quando não dá */
#statusSalvo{margin-left:9px; letter-spacing:.1em; color:var(--fg-3); opacity:.55}
#statusSalvo[data-estado="salvando"]{color:var(--atencao); opacity:1}
#statusSalvo[data-estado="erro"]{color:var(--alerta); opacity:1; font-weight:600}
/* Modo somente leitura (o mentor vendo a semana do cliente por ?c=<id>):
   some tudo o que só existe para editar. Botão que não faz nada é ruído. */
body[data-leitura] .ferramentas,
body[data-leitura] .dica,
body[data-leitura] .grupo-tit .add,
body[data-leitura] .mes-add,
body[data-leitura] #btnSync,
body[data-leitura] .ff-acoes,
body[data-leitura] .crono,
body[data-leitura] .bloco .b-x{display:none !important}
body[data-leitura] .bloco{cursor:default}
body[data-leitura] .bloco::after{display:none}
body[data-leitura] #tituloMes{cursor:default}
body[data-leitura] #statusSalvo{opacity:1; color:var(--atencao); letter-spacing:.08em}
.topo-espaco{flex:1}
.topo-acoes{display:flex; align-items:center; gap:8px}

.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  height:34px; padding:0 13px; border:1px solid var(--rule-strong);
  border-radius:var(--radius); background:var(--bg);
  font-size:12.5px; font-weight:500; color:var(--fg-2);
  transition:border-color .15s, color .15s, background .15s;
  white-space:nowrap;
}
.btn:hover{border-color:var(--fg); color:var(--fg)}
.btn.primario{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.btn.primario:hover{opacity:.86}
.btn.icone{width:34px; padding:0}

/* ---------------- A SAÍDA DA FERRAMENTA ----------------
   A Semana é uma ferramenta DENTRO do app: quem entra precisa enxergar a porta
   de volta sem procurar. Ela usa o token de destaque `--dourado` — que a pele
   do Arena remapeia para o ciano do jogo — em vez de um cinza igual ao dos
   outros botões: um lugar só no CSS, duas identidades na tela. */
.btn.saida{
  /* é âncora, e o .btn nunca precisou tirar o sublinhado porque nenhum botão
     dele tinha texto dentro de um <a> — este tem */
  flex-shrink:0; font-weight:600; letter-spacing:.02em; text-decoration:none;
  color:var(--dourado);
  border-color:color-mix(in srgb, var(--dourado) 42%, transparent);
}
.btn.saida:hover{
  color:var(--dourado); border-color:var(--dourado);
  background:color-mix(in srgb, var(--dourado) 10%, transparent);
}
.btn.saida svg{width:15px; height:15px; stroke-width:1.9}
/* o gap de 20px da .topo-in dos dois lados afastaria demais o traço do botão */
.saida-sep{width:1px; height:26px; background:var(--rule); flex-shrink:0; margin:0 -8px}
/* MEDIDO: logo acima do corte de 1000px a barra volta inteira — o rótulo de
   "Hoje", o de "Planilha" e o botão de imprimir, que o celular esconde — e ali
   ela transbordava 12px com a saída rotulada. O traço custa 25px (1px de risco
   mais dois gaps de 12px) e não carrega informação nenhuma: some ele, não a
   palavra. A marca da OH, logo ao lado, já separa a saída do resto. */
@media (max-width:1100px){
  .saida-sep{display:none}
  /* e o respiro entre os blocos da barra encolhe de 20px para 14px: são cinco
     gaps, 30px que a barra não tinha nesta faixa. Abaixo de 1000px o bloco
     seguinte já os leva a 10px — este é o degrau que faltava entre os dois. */
  .topo-in{gap:14px}
}
.btn svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.btn:disabled{opacity:.4; cursor:not-allowed}

/* ---------------- BARRA DE EDIÇÃO (desfazer / copiar) ----------------
   Ícones, não palavras: são quatro gestos que a pessoa já conhece de outras
   ferramentas, e escrevê-los roubaria a largura do nome do mês. */
.barra-edicao{display:flex; align-items:center; gap:2px; margin-left:8px}
.fe{
  width:30px; height:30px; border-radius:var(--radius); border:1px solid transparent;
  display:flex; align-items:center; justify-content:center; color:var(--fg-2);
  transition:background .12s, color .12s, border-color .12s;
}
.fe svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.fe:hover:not(:disabled){background:var(--bg-3); color:var(--fg); border-color:var(--rule)}
.fe:disabled{opacity:.3; cursor:default}
.fe-sep{width:1px; height:18px; background:var(--rule); margin:0 5px}
body[data-leitura] .barra-edicao{display:none}

/* ---------------- SELETOR DE MESES ---------------- */
.meses{display:flex; align-items:center; gap:4px; position:relative; margin-left:6px}
.mes-atual{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px;
  border:1px solid var(--rule-strong); border-radius:var(--radius);
  font-family:var(--serif); font-size:14.5px; color:var(--fg); white-space:nowrap;
}
.mes-atual:hover{border-color:var(--fg)}
.mes-atual .cv{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.6}
.mes-atual[aria-expanded="true"] .cv{transform:rotate(180deg)}
.mes-add{
  width:26px; height:26px; border:1px dashed var(--rule-strong); border-radius:var(--radius);
  color:var(--fg-3); font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.mes-add:hover{color:var(--fg); border-color:var(--fg); border-style:solid}
.mes-lista{
  position:absolute; top:36px; left:0; z-index:90; min-width:190px; padding:5px;
  background:var(--painel); border:1px solid var(--rule-strong); border-radius:var(--radius);
  box-shadow:var(--sombra-forte); max-height:60vh; overflow:auto;
}
.mes-lista button{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; width:100%;
  padding:7px 9px; border-radius:2px; font-size:12.5px; color:var(--fg-2); text-align:left;
}
.mes-lista button:hover{background:var(--bg-2); color:var(--fg)}
.mes-lista button[aria-current="true"]{background:var(--fg); color:var(--bg)}
.mes-lista button .h{font-size:11px; opacity:.65; font-variant-numeric:tabular-nums}
.mes-lista .sep{height:1px; background:var(--rule); margin:5px 2px}
.mes-lista .apagar-mes{color:var(--fg-3); font-size:11.5px}
.mes-lista .apagar-mes:hover{color:var(--alerta); background:transparent}

.opcao.escolha{cursor:pointer; transition:border-color .14s, background .14s}
.opcao.escolha:hover{border-color:var(--fg); background:var(--bg-2)}
.opcao.escolha p{margin-bottom:0}
.mini-preview{display:flex; gap:3px; margin-top:12px; height:40px; align-items:stretch}
.mini-preview .d{flex:1; display:flex; flex-direction:column; gap:1px; background:var(--bg-3); border-radius:1px; overflow:hidden}
.mini-preview .d i{display:block; width:100%}

.paleta-card{
  border:1px solid var(--rule); border-radius:var(--radius); padding:14px 15px; margin-bottom:11px;
  cursor:pointer; transition:border-color .14s, background .14s;
}
.paleta-card:hover{border-color:var(--fg-2)}
.paleta-card[aria-pressed="true"]{border-color:var(--fg); background:var(--bg-2)}
.paleta-card .ph{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:4px}
.paleta-card .ph .nm{font-family:var(--serif); font-size:17px}
.paleta-card .ph .sel{font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3)}
.paleta-card[aria-pressed="true"] .ph .sel{color:var(--ok)}
.paleta-card .pd{font-size:12px; line-height:1.55; color:var(--fg-2); margin-bottom:11px; max-width:60ch}
.paleta-tiras{display:grid; grid-template-columns:repeat(6,1fr); gap:5px}
.paleta-tiras .t{border-radius:2px; overflow:hidden; border:1px solid var(--rule)}
.paleta-tiras .t .sw{height:22px}
.paleta-tiras .t .lb{font-size:8.5px; padding:3px 4px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.02em}

.pt-sync{position:relative; padding-left:26px}
.pt-sync .dot{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--fg-3);
}
.pt-sync.on .dot{background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent)}

/* ---------------- ABAS ---------------- */
.abas{
  position:sticky; top:calc(var(--h-topo) + var(--safe-top)); z-index:55; background:var(--bg);
  border-bottom:1px solid var(--rule); padding:0 var(--gutter);
}
.abas-in{display:flex; gap:2px; max-width:1760px; margin:0 auto; height:var(--h-abas)}
.aba{
  padding:0 15px; font-size:12.5px; font-weight:500; color:var(--fg-3);
  border-bottom:2px solid transparent; margin-bottom:-1px; letter-spacing:.01em;
  display:flex; align-items:center; gap:7px;
}
.aba:hover{color:var(--fg-2)}
.aba[aria-selected="true"]{color:var(--fg); border-bottom-color:var(--fg)}
.aba .n{
  font-size:10px; font-weight:600; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--alerta); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.aba .n[data-zero="1"]{display:none}

/* ---------------- FAIXA DE FRASES ---------------- */
.faixa-frases{display:none; border-bottom:1px solid var(--rule); background:var(--bg-2)}
body[data-tela="semana"] .faixa-frases{display:block}
.ff-in{
  display:flex; align-items:stretch; gap:12px; max-width:1760px; margin:0 auto;
  padding:11px var(--gutter);
}
.faixa-frases[data-fechada="1"] .ff-in{display:none}
.faixa-frases[data-fechada="1"] .ff-abrir{display:block}
.ff-abrir{
  display:none; width:100%; max-width:1760px; margin:0 auto; padding:7px var(--gutter);
  text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3);
}
.ff-abrir:hover{color:var(--fg)}
.ff-trilho{flex:1; min-width:0; display:flex; align-items:center; gap:8px}
.ff-palco{flex:1; min-width:0}
.ff-seta{
  flex:0 0 26px; width:26px; height:26px; border:1px solid var(--rule-strong);
  border-radius:var(--radius); color:var(--fg-2); font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:opacity .14s, border-color .14s;
}
.ff-seta:hover{border-color:var(--fg); color:var(--fg)}
/* Na ponta ela apaga, mas NÃO some: sumindo, a faixa volta a parecer uma frase
   única e o carrossel deixa de se anunciar. */
.ff-seta[data-fim="1"]{opacity:.3}
.ff-trilho[data-sozinha="1"] .ff-seta,
.ff-trilho[data-sozinha="1"] .ff-pontos{display:none}
.ff-pontos{display:flex; justify-content:center; gap:5px; margin-top:6px}
.ff-pontos i{width:5px; height:5px; border-radius:50%; background:var(--rule-strong); cursor:pointer}
.ff-pontos i[data-ativo="1"]{background:var(--fg-2)}
.ff-lista{
  display:flex; align-items:flex-start; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:2px;
}
/* Sem barra de rolagem: quem conduz são as setas e os pontos. */
.ff-lista::-webkit-scrollbar{display:none}
.frase{
  flex:0 0 100%; scroll-snap-align:center; position:relative;
  padding:9px 13px 9px 16px; border-left:2px solid var(--fg-3); background:var(--painel);
  border-radius:2px; cursor:pointer; transition:border-color .14s;
}
.frase:hover{border-left-color:var(--fg)}
/* Três linhas, não duas: ocupando a faixa inteira, a frase mais longa da
   coletânea (a do Cal Newport) precisa de três para não terminar em reticências. */
.frase .t{
  font-family:var(--serif); font-size:14.5px; line-height:1.42; color:var(--fg);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.frase.mantra .t{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; line-height:1.4; color:var(--fg-2);
}
/* O autor vem na sequência da frase, na mesma linha em que ela terminar —
   atribuição, não legenda solta embaixo. */
.frase .t .a{font-size:11px; color:var(--fg-3); letter-spacing:.02em}
.frase .x{
  position:absolute; top:2px; right:3px; width:16px; height:16px; border-radius:2px;
  display:none; align-items:center; justify-content:center; color:var(--fg-3); font-size:11px;
  background:var(--painel);
}
.frase:hover .x{display:flex}
.frase .x:hover{color:var(--alerta)}
/* Sem cursor não há hover: no celular o ✕ nunca aparecia e a frase não tinha
   como sair. Aqui ele fica sempre à mão. */
@media (hover:none){ .frase .x{display:flex} }
.ff-vazia{
  font-size:12px; color:var(--fg-3); font-style:italic; align-self:center; padding:6px 2px;
}
.ff-acoes{display:flex; align-items:center; gap:6px; flex-shrink:0}
.ff-btn{
  height:28px; padding:0 10px; border:1px solid var(--rule-strong); border-radius:var(--radius);
  font-size:11.5px; font-weight:500; color:var(--fg-2); white-space:nowrap;
}
.ff-btn:hover{border-color:var(--fg); color:var(--fg)}
.ff-colapsar{width:28px; padding:0; font-size:9px}

.item-cole{
  display:flex; gap:11px; align-items:flex-start; padding:11px 12px; border:1px solid var(--rule);
  border-radius:var(--radius); margin-bottom:8px; cursor:pointer; transition:border-color .14s, background .14s;
}
.item-cole:hover{border-color:var(--fg-2)}
.item-cole[aria-pressed="true"]{border-color:var(--fg); background:var(--bg-2)}
.item-cole .cx{
  width:16px; height:16px; border:1px solid var(--rule-strong); border-radius:2px; flex-shrink:0;
  margin-top:3px; display:flex; align-items:center; justify-content:center; font-size:11px; color:transparent;
}
.item-cole[aria-pressed="true"] .cx{background:var(--fg); border-color:var(--fg); color:var(--bg)}
.item-cole .q{font-family:var(--serif); font-size:15px; line-height:1.45; color:var(--fg)}
.item-cole .f{font-size:11px; color:var(--fg-3); margin-top:4px}

#nomeCliente, #tituloMes{outline:none; cursor:text; border-radius:2px}
#nomeCliente:hover, #tituloMes:hover{box-shadow:0 1px 0 var(--rule-strong)}
#nomeCliente:focus, #tituloMes:focus{box-shadow:0 1px 0 var(--fg)}
#nomeCliente:empty::before{content:'Seu nome'; color:var(--fg-3)}
#tituloMes:empty::before{content:'Dê um nome a este mês'; color:var(--fg-3)}

/* ---------------- LAYOUT ---------------- */
.painel-aba{display:none}
.painel-aba.ativa{display:block}
.wrap{max-width:1760px; margin:0 auto; padding:0 var(--gutter)}

.semana-layout{
  display:grid; grid-template-columns:322px minmax(0,1fr) 264px; gap:26px;
  padding-block:20px 40px; align-items:start;
}

/* ---------------- PAINEL DE OBJETIVOS ----------------
   `align-self:stretch` não é decoração: é ele que dá ao invólucro a altura da
   LINHA, e é dentro dele que o "grudado" da lista pode correr. Sem o invólucro,
   o navegador prende o sticky ao contêiner inteiro da grade — e a lista descia
   por cima da faixa de resultados. */
.col-esq{align-self:stretch; min-width:0}
.lateral{position:sticky; top:calc(var(--sticky-grade) + 14px)}
.bloco-lat{margin-bottom:22px}
.bloco-lat > .cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding-bottom:7px; margin-bottom:9px; border-bottom:1px solid var(--rule);
}
.bloco-lat > .cab .h{font-family:var(--serif); font-size:16px}
.grupo{margin-bottom:15px}
/* Os três títulos são a espinha do exercício: compromissos de hoje, objetivos
   de 3 meses, objetivos de 1 ano. Vinham em cinza claro, do mesmo peso de uma
   legenda. Agora são faixa cheia, na cor do texto — preta no tema claro,
   branca no escuro —, e a lista inteira ganha hierarquia de longe. */
.grupo-tit{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--bg); background:var(--fg);
  padding:6px 7px 6px 9px; border-radius:var(--radius);
  margin:0 0 8px; min-height:28px;
}
.grupo-tit .add{
  font-size:15px; line-height:1; width:20px; height:20px; flex-shrink:0;
  color:var(--bg); background:transparent;
  border:1px solid color-mix(in srgb, var(--bg) 45%, transparent);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
}
.grupo-tit .add:hover{
  color:var(--fg); background:var(--bg);
  border-color:var(--bg);
}

.obj{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px;
  padding:7px 8px; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; position:relative; transition:background .12s, border-color .12s;
}
.obj:hover{background:var(--bg-2)}
.obj.ativo{border-color:var(--fg); background:var(--bg-2)}
.obj .swatch{
  width:13px; height:13px; border-radius:2px; flex-shrink:0; position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}
html[data-tema="escuro"] .obj .swatch{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.obj .nome{
  font-size:13px; font-weight:500; color:var(--fg); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border:none; background:none; padding:2px 0; width:100%;
}
.obj .nome:focus{outline:none; box-shadow:0 1px 0 var(--fg)}
.obj .horas{
  font-family:var(--serif); font-size:14px; color:var(--fg-2);
  font-variant-numeric:tabular-nums; flex-shrink:0;
}
.obj .horas .un{font-family:var(--sans); font-size:9.5px; color:var(--fg-3); margin-left:1px}
.obj .barra{
  grid-column:1/-1; height:2px; background:var(--rule); border-radius:2px; overflow:hidden;
  margin-top:1px;
}
.obj .barra i{display:block; height:100%; border-radius:2px}
.obj .meta-l{
  grid-column:2/-1; font-size:10px; color:var(--fg-3); display:flex; justify-content:space-between; gap:6px;
}
.obj.orfao .nome{color:var(--fg-3)}
.obj .selo-orfao{
  font-size:8.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--alerta); border:1px solid color-mix(in srgb, var(--alerta) 40%, transparent);
  border-radius:2px; padding:1px 4px;
}
.obj .apagar{
  position:absolute; right:4px; top:4px; width:18px; height:18px; border-radius:2px;
  display:none; align-items:center; justify-content:center; color:var(--fg-3); background:var(--bg);
}
.obj:hover .apagar{display:flex}
.obj .apagar:hover{color:var(--alerta)}

/* A fileira subiu para o alto do painel (ver o comentário no semana.html), então
   o respiro passou a ser embaixo. Ela DOBRA de propósito: "Selecionar células"
   pede 122px de conteúdo (medido no DOM, não estimado) e um terço do painel dá
   103px em 322px — 89px quando o painel encolhe para 280px. Cortar o nome do
   modo derrotaria o motivo de ele estar aqui. Aplicar e Apagar
   dividem a primeira linha; o terceiro ocupa a segunda inteira. */
.ferramentas{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 15px}
#ferrSelecionar{flex-basis:100%}
.ferr{
  flex:1; height:31px; border:1px solid var(--rule-strong); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:11.5px; font-weight:500; color:var(--fg-2);
}
.ferr[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.ferr svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

.dica{
  font-size:11px; line-height:1.55; color:var(--fg-3); padding:10px 11px;
  background:var(--bg-2); border-radius:var(--radius); border:1px solid var(--rule);
}
.dica b{color:var(--fg-2); font-weight:600}
.dica kbd{
  font-family:var(--sans); font-size:10px; padding:1px 4px; border:1px solid var(--rule-strong);
  border-radius:2px; background:var(--bg);
}

/* ---------------- GRADE ---------------- */
.grade-card{
  border:1px solid var(--rule); border-radius:var(--radius); background:var(--painel);
  box-shadow:var(--sombra);
}
.grade-topo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--rule); flex-wrap:wrap;
}
.grade-topo .tit{font-family:var(--serif); font-size:17px; letter-spacing:.005em}
.grade-topo .sub{font-size:11px; color:var(--fg-3); margin-top:1px}
.resumo-mini{display:flex; gap:20px; align-items:baseline}
.resumo-mini .item{text-align:right}
.resumo-mini .v{font-family:var(--serif); font-size:20px; font-variant-numeric:tabular-nums; line-height:1}
.resumo-mini .l{font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); margin-top:3px}

.grade-scroll{position:relative}
.grade{
  display:grid; grid-template-columns:58px repeat(7, minmax(78px,1fr));
  min-width:0; position:relative;
}
body[data-foco="1"] .grade{grid-template-columns:58px minmax(0,1fr)}
body[data-foco="1"] .gh[data-oculto="1"],
body[data-foco="1"] .dia[data-oculto="1"],
body[data-foco="1"] .madrugada[data-oculto="1"]{display:none}
body[data-foco="1"] .bloco .b-nome{font-size:12.5px}
body[data-foco="1"] .bloco .b-hora{font-size:10.5px}
.tira-foco{
  display:none; align-items:center; gap:10px; padding:8px 16px;
  border-bottom:1px solid var(--rule); background:var(--bg-2); font-size:12px; color:var(--fg-2);
}
body[data-foco="1"] .tira-foco{display:flex}
.tira-foco .navd{display:flex; gap:4px}
.tira-foco .navd button{
  width:26px; height:26px; border:1px solid var(--rule-strong); border-radius:2px;
  display:flex; align-items:center; justify-content:center; color:var(--fg-2);
}
.tira-foco .navd button:hover{border-color:var(--fg); color:var(--fg)}
.tira-foco .navd svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tira-foco b{font-family:var(--serif); font-size:15px; font-weight:500; color:var(--fg)}
.gh{
  position:sticky; top:var(--sticky-grade); z-index:22; background:var(--painel);
  border-bottom:1px solid var(--rule-strong); text-align:center;
  height:var(--h-ghead); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.gh .d{font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.1}
.gh .h{font-family:var(--serif); font-size:12px; color:var(--fg-3); font-variant-numeric:tabular-nums; line-height:1}
.gh.fds .d{color:var(--fg-3)}
.gh.canto{border-right:1px solid var(--rule)}
.madrugada, .madru-lab{
  position:sticky; top:calc(var(--sticky-grade) + var(--h-ghead)); z-index:21; background:var(--painel);
  height:var(--h-madru); border-bottom:1px solid var(--rule); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.madrugada{border-right:1px solid var(--rule)}
.madru-lab{border-right:1px solid var(--rule); font-size:8.5px; letter-spacing:.1em; color:var(--fg-3)}

.coluna-horas{border-right:1px solid var(--rule); position:relative; background:var(--painel)}
.coluna-horas .hh{
  height:var(--row); font-size:10px; color:var(--fg-3); font-variant-numeric:tabular-nums;
  display:flex; align-items:flex-start; justify-content:flex-end; padding-right:8px;
  transform:translateY(-6px); letter-spacing:.02em;
}
.coluna-horas .hh.meia{color:transparent}
.coluna-horas .hh:first-child{transform:translateY(1px)}

.dia{
  position:relative; border-right:1px solid var(--rule); touch-action:pan-y;
  background-image:
    repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px calc(var(--row)*2));
  background-position:0 0;
  cursor:crosshair;
}
.dia:last-child{border-right:none}
.dia.fds{background-color:var(--bg-2)}
.dia .meias{position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(to bottom, transparent 0 var(--row), color-mix(in srgb, var(--rule) 55%, transparent) var(--row) calc(var(--row)+1px));
}
.dia .faixa-noite{position:absolute; left:0; right:0; pointer-events:none; background:color-mix(in srgb, var(--fg) 3.5%, transparent)}

.bloco{
  position:absolute; left:3px; right:3px; border-radius:2px; overflow:hidden;
  padding:3px 6px 3px 8px; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center;
  transition:filter .12s;
}
.bloco::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cor)}
.bloco:hover{filter:brightness(.97)}
/* manipulação direta: o corpo se agarra, as bordas se puxam */
.bloco{cursor:grab}
.bloco:active{cursor:grabbing}
.bloco.manipulando{opacity:.32}
/* faixa de 7px em cima e embaixo dá o alvo da borda sem poluir o cartão */
.bloco::after{
  content:""; position:absolute; left:0; right:0; top:0; height:7px;
  box-shadow:inset 0 2px 0 -1px color-mix(in srgb, var(--cor) 55%, transparent);
  opacity:0; transition:opacity .12s;
}
.bloco:hover::after{opacity:1}
html[data-tema="escuro"] .bloco:hover{filter:brightness(1.15)}
.bloco .b-nome{
  font-size:11px; font-weight:600; line-height:1.2; color:var(--cor-txt);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  word-break:break-word;
}
.bloco .b-hora{font-size:9.5px; color:var(--cor-txt); opacity:.62; font-variant-numeric:tabular-nums; margin-top:1px}
.bloco.curto{padding:0 6px 0 8px; justify-content:center}
.bloco.curto .b-nome{font-size:10px; -webkit-line-clamp:1}
.bloco.curto .b-hora{display:none}
.bloco .b-x{
  position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:2px;
  display:none; align-items:center; justify-content:center;
  background:var(--painel); color:var(--fg-2); font-size:12px; line-height:1;
}
.bloco:hover .b-x{display:flex}
.bloco .b-x:hover{color:var(--alerta)}
.bloco.selecionado{box-shadow:0 0 0 1.5px var(--fg)}
/* Alça de cópia: puxar para o lado repete o bloco nos dias vizinhos. Fica na
   borda direita, na altura do meio, e só aparece com o ponteiro em cima — a
   grade cheia já tem informação demais para carregar sete alças por linha. */
.bloco .b-alca{
  position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  width:6px; height:16px; border-radius:2px; background:var(--cor);
  box-shadow:0 0 0 1.5px var(--painel); display:none; pointer-events:none;
}
.bloco:hover .b-alca{display:block}
.bloco.curto .b-alca{height:11px}
body[data-leitura] .bloco .b-alca{display:none !important}

.fantasma{
  position:absolute; left:3px; right:3px; border-radius:2px; pointer-events:none;
  border:1px dashed var(--fg-2); background:color-mix(in srgb, var(--fg) 6%, transparent);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:600; color:var(--fg-2); font-variant-numeric:tabular-nums;
}
/* prévia caindo em cima de outro bloco: avisa antes de soltar */
.fantasma.conflito{border-color:var(--alerta); border-style:solid; color:var(--alerta);
  background:color-mix(in srgb, var(--alerta) 12%, transparent)}
.sugestao{
  position:absolute; left:3px; right:3px; border-radius:2px; pointer-events:auto; cursor:pointer;
  border:1.5px dashed var(--cor); background:color-mix(in srgb, var(--cor) 9%, transparent);
  display:flex; align-items:center; justify-content:center; gap:4px;
  font-size:10px; font-weight:600; color:var(--cor); z-index:5;
  animation:pulsa 2.4s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:.72} 50%{opacity:1}}
.sugestao:hover{background:color-mix(in srgb, var(--cor) 20%, transparent)}

/* ---------------- SELEÇÃO (faixa copiável) ----------------
   Contorno contínuo em volta da faixa inteira: as bordas laterais só aparecem
   no primeiro e no último dia, senão sete colunas selecionadas viram sete
   retângulos em vez de um. */
.marca-selecao{
  position:absolute; left:0; right:0; pointer-events:none; z-index:6;
  background:color-mix(in srgb, var(--fg) 7%, transparent);
  border-top:1.5px solid var(--fg); border-bottom:1.5px solid var(--fg);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bg) 55%, transparent);
}
.marca-selecao[data-esq]{border-left:1.5px solid var(--fg)}
.marca-selecao[data-dir]{border-right:1.5px solid var(--fg)}
/* a célula ativa dentro da faixa — a que anda com as setas */
.marca-cursor{
  position:absolute; left:0; right:0; pointer-events:none; z-index:7;
  border:2px solid var(--dourado); border-radius:2px;
}
/* o objetivo sob o cursor do teclado: contorno, e não preenchimento, para não
   se confundir com o objetivo EM USO, que é o de fundo cheio */
.obj[data-foco="1"]{box-shadow:0 0 0 2px var(--dourado); border-radius:var(--radius)}
.fantasma.selecionando{border-style:solid; border-width:1.5px; border-color:var(--fg); color:var(--fg)}
body[data-ferramenta="selecionar"] .dia{cursor:cell}

/* ---------------- RESULTADOS MARCANTES DO MÊS ---------------- */
.lateral-dir{position:sticky; top:calc(var(--sticky-grade) + 14px)}
.res-lede{font-size:11px; line-height:1.55; color:var(--fg-3); margin:0 0 12px}
.res-lista{display:flex; flex-direction:column; gap:2px}
.res-vazia{
  font-size:11.5px; line-height:1.55; color:var(--fg-3); font-style:italic;
  padding:9px 10px; border:1px dashed var(--rule-strong); border-radius:var(--radius);
}
.res-item{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:7px;
  padding:6px 6px 6px 2px; border-bottom:1px solid var(--rule); position:relative;
}
.res-item .pt{
  width:5px; height:5px; border-radius:50%; background:var(--dourado);
  margin-top:7px; flex-shrink:0;
}
.res-item textarea{
  border:none; background:none; padding:1px 0; resize:none; overflow:hidden;
  font-size:12.5px; line-height:1.5; color:var(--fg); width:100%;
  font-family:var(--sans);
}
.res-item textarea:focus{outline:none; box-shadow:0 1px 0 var(--fg)}
.res-item textarea::placeholder{color:var(--fg-3)}
.res-item .x{
  width:18px; height:18px; border-radius:2px; color:var(--fg-3); font-size:11px;
  display:none; align-items:center; justify-content:center; margin-top:3px;
}
.res-item:hover .x, .res-item:focus-within .x{display:flex}
.res-item .x:hover{color:var(--alerta)}
.res-add{
  margin-top:12px; width:100%; height:32px; border:1px dashed var(--rule-strong);
  border-radius:var(--radius); font-size:11.5px; font-weight:500; color:var(--fg-2);
}
.res-add:hover{border-color:var(--fg); color:var(--fg); border-style:solid}
.res-add:disabled{opacity:.4; cursor:not-allowed}
body[data-leitura] .res-add{display:none}

/* ---------------- CHIPS DE DIA (modal do bloco) ---------------- */
.dias-chips{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.chip-dia{
  height:30px; border:1px solid var(--rule-strong); border-radius:var(--radius);
  font-size:10.5px; font-weight:600; letter-spacing:.04em; color:var(--fg-2);
}
.chip-dia:hover{border-color:var(--fg); color:var(--fg)}
.chip-dia[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.chip-dia:disabled{opacity:.55; cursor:default}

/* ---------------- DIAGNÓSTICO ---------------- */
.diag{padding-block:26px 50px}
.diag-topo{display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:end; margin-bottom:26px}
.diag-titulo{font-family:var(--serif); font-size:clamp(26px,3.2vw,40px); line-height:1.12; letter-spacing:-.005em; max-width:15ch}
.diag-titulo em{font-style:italic}
.diag-lede{font-size:13px; line-height:1.65; color:var(--fg-2); max-width:46ch; margin-top:12px}

.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden}
.kpi{background:var(--painel); padding:16px 18px}
.kpi .v{font-family:var(--serif); font-size:34px; line-height:1; font-variant-numeric:tabular-nums}
.kpi .v .un{font-family:var(--sans); font-size:12px; font-weight:500; color:var(--fg-3); margin-left:3px}
.kpi .l{font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); margin-top:7px}
.kpi.destaque .v{color:var(--alerta)}

.barra168{margin:30px 0 8px}
.barra168 .trilho{
  display:flex; height:38px; border-radius:2px; overflow:hidden; border:1px solid var(--rule);
  background:repeating-linear-gradient(45deg, var(--bg-2) 0 6px, var(--bg) 6px 12px);
}
.barra168 .seg{position:relative; min-width:2px; transition:flex-basis .3s}
.barra168 .seg:hover{filter:brightness(.94)}
.barra168 .escala{display:flex; justify-content:space-between; margin-top:6px; font-size:9.5px; color:var(--fg-3); font-variant-numeric:tabular-nums}
.legenda{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px}
.legenda .it{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--fg-2)}
.legenda .it i{width:9px; height:9px; border-radius:2px; display:block}
.legenda .it b{font-weight:500; color:var(--fg-3); font-variant-numeric:tabular-nums}

.diag-cols{display:grid; grid-template-columns:1.25fr .95fr; gap:30px; margin-top:36px; align-items:start}

.tabela{width:100%; border-collapse:collapse; font-size:12.5px}
.tabela th{
  text-align:right; font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-3); padding:0 0 8px; border-bottom:1px solid var(--rule-strong);
}
.tabela th:first-child{text-align:left}
.tabela td{padding:8px 0; border-bottom:1px solid var(--rule); text-align:right; font-variant-numeric:tabular-nums; color:var(--fg-2)}
.tabela td:first-child{text-align:left; color:var(--fg)}
.tabela .nm{display:flex; align-items:center; gap:8px}
.tabela .nm i{width:9px; height:9px; border-radius:2px; flex-shrink:0}
.tabela tr.total td{font-weight:600; color:var(--fg); border-bottom:none; border-top:1px solid var(--rule-strong); padding-top:10px}
.tabela .mini{width:64px}
.tabela .mini .t{height:4px; background:var(--rule); border-radius:2px; overflow:hidden}
.tabela .mini .t i{display:block; height:100%}

.alerta-card{
  display:flex; gap:11px; padding:13px 14px; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--painel); margin-bottom:8px; align-items:flex-start;
}
.alerta-card .ic{
  width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; margin-top:1px;
}
.alerta-card.a .ic{background:var(--alerta)} .alerta-card.a{border-left:2px solid var(--alerta)}
.alerta-card.t .ic{background:var(--atencao)} .alerta-card.t{border-left:2px solid var(--atencao)}
.alerta-card.o .ic{background:var(--ok)} .alerta-card.o{border-left:2px solid var(--ok)}
.alerta-card .tx .h{font-size:12.5px; font-weight:600; margin-bottom:2px}
.alerta-card .tx .p{font-size:12px; line-height:1.55; color:var(--fg-2)}
.alerta-card .tx .p b{color:var(--fg); font-weight:600}

.secao-h{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:0 0 13px; padding-bottom:8px; border-bottom:1px solid var(--rule-strong);
}
.secao-h .h{font-family:var(--serif); font-size:19px}
.secao-h .s{font-size:11px; color:var(--fg-3)}

/* ---------------- CRONOBIOLOGIA ---------------- */
.crono{border:1px solid var(--rule); border-radius:var(--radius); background:var(--painel); padding:16px; margin-top:14px}
.crono-linha{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.crono select, .crono input[type=number]{
  height:32px; border:1px solid var(--rule-strong); border-radius:var(--radius);
  background:var(--bg); padding:0 8px; font-size:12.5px;
}
.crono .res{font-size:12px; color:var(--fg-2); line-height:1.6}
.crono .janela{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; border:1px solid var(--rule); border-radius:var(--radius); margin-bottom:6px;
  background:var(--bg-2);
}
.crono .janela .q{font-family:var(--serif); font-size:15px; font-variant-numeric:tabular-nums}
.crono .janela .por{font-size:11px; color:var(--fg-3); margin-top:1px}
.crono .janela .nota{font-size:11px; color:var(--fg-2); max-width:34ch}
.pontuacao{display:inline-flex; align-items:center; gap:3px}
.pontuacao i{width:5px; height:5px; border-radius:50%; background:var(--rule-strong); display:block}
.pontuacao i.on{background:var(--ok)}

/* ---------------- INSTRUÇÕES ---------------- */
.instr{padding-block:34px 60px; max-width:calc(1080px + var(--gutter)*2)}
.instr-hero{border-bottom:1px solid var(--rule-strong); padding-bottom:26px; margin-bottom:30px}
.instr h2{font-family:var(--serif); font-size:clamp(30px,4vw,50px); line-height:1.08; letter-spacing:-.01em; max-width:16ch}
.instr .lede{font-size:15px; line-height:1.7; color:var(--fg-2); max-width:60ch; margin-top:16px}
.instr-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 40px}
.instr-bloco h3{font-family:var(--serif); font-size:20px; margin-bottom:12px}
.passo{display:flex; gap:13px; padding:11px 0; border-bottom:1px solid var(--rule)}
.passo:last-child{border-bottom:none}
.passo .n{
  font-family:var(--serif); font-size:17px; color:var(--fg-3); width:22px; flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.passo .tx{font-size:13px; line-height:1.62; color:var(--fg-2)}
.passo .tx b{color:var(--fg); font-weight:600}
.nota-limite{
  background:var(--marfim); border-radius:var(--radius); padding:20px 22px; margin-top:8px;
  border:1px solid color-mix(in srgb, var(--neutra) 22%, transparent);
}
html[data-tema="escuro"] .nota-limite{border-color:var(--rule-strong)}
.nota-limite h3{font-family:var(--serif); font-size:19px; margin-bottom:10px}
.nota-limite p{font-size:13px; line-height:1.65; color:var(--fg-2); margin:0 0 9px}
.nota-limite p:last-child{margin-bottom:0}
.assinatura{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.assinatura img{height:30px; opacity:.9}
.assinatura .tx{font-size:12px; color:var(--fg-3); line-height:1.6}
.assinatura .tx b{color:var(--fg-2); font-weight:600; font-family:var(--serif); font-size:14px; font-weight:500}

/* ---------------- MODAL ---------------- */
.veu{
  position:fixed; inset:0; z-index:200; background:color-mix(in srgb, var(--preto) 42%, transparent);
  backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:20px;
}
.veu.aberto{display:flex}
.modal{
  background:var(--painel); border:1px solid var(--rule-strong); border-radius:var(--radius);
  width:min(660px, 100%); max-height:88vh; overflow:auto; box-shadow:var(--sombra-forte);
}
.modal-topo{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px 22px 16px; border-bottom:1px solid var(--rule); position:sticky; top:0; background:var(--painel);
}
.modal-topo h3{font-family:var(--serif); font-size:22px}
.modal-topo p{font-size:12px; color:var(--fg-3); margin:4px 0 0; max-width:48ch; line-height:1.55}
.modal-corpo{padding:20px 22px 22px}
.modal .fechar{width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--fg-3); border-radius:2px}
.modal .fechar:hover{color:var(--fg); background:var(--bg-2)}

.opcao{
  border:1px solid var(--rule); border-radius:var(--radius); padding:15px 16px; margin-bottom:11px;
}
.opcao .h{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; margin-bottom:5px}
.opcao .h .tag{
  font-size:8.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; padding:2px 6px;
  border-radius:2px; background:var(--fg); color:var(--bg);
}
.opcao .h .tag.suave{background:var(--bg-3); color:var(--fg-3)}
.opcao p{font-size:12px; line-height:1.6; color:var(--fg-2); margin:0 0 12px}
.opcao .acoes{display:flex; gap:8px; flex-wrap:wrap}
.campo{display:flex; gap:8px; margin-bottom:10px}
.campo input[type=text]{
  flex:1; height:34px; border:1px solid var(--rule-strong); border-radius:var(--radius);
  background:var(--bg); padding:0 10px; font-size:12.5px;
}
.campo input[type=text]:focus{outline:none; border-color:var(--fg)}
.passos-tec{font-size:11.5px; line-height:1.7; color:var(--fg-3); padding-left:18px; margin:0}
.passos-tec li{margin-bottom:4px}
.passos-tec code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px;
  background:var(--bg-3); padding:1px 4px; border-radius:2px; color:var(--fg-2);
}
.status-sync{
  display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:var(--radius);
  background:var(--bg-2); border:1px solid var(--rule); font-size:12px; color:var(--fg-2); margin-bottom:14px;
}
.status-sync .dot{width:7px; height:7px; border-radius:50%; background:var(--fg-3); flex-shrink:0}
.conexao-ativa{
  display:flex; align-items:center; gap:8px; padding:9px 11px;
  border:1px solid var(--rule-strong); border-radius:var(--radius); background:var(--bg-2);
}
.conexao-ativa .ponto{width:7px; height:7px; border-radius:50%; background:var(--ok); flex-shrink:0}
.conexao-ativa .txt{font-size:12.5px; color:var(--fg-2)}
.status-sync.on .dot{background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent)}
.status-sync.sync .dot{background:var(--atencao); animation:pisca .8s linear infinite}
@keyframes pisca{50%{opacity:.25}}

.paleta-cores{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.paleta-cores button{
  width:24px; height:24px; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
}
.paleta-cores button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16), 0 0 0 2px var(--fg)}

/* ---------------- TOAST ---------------- */
.toasts{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
/* Quando a edição acontece na metade de baixo da tela, o aviso troca de lado —
   abaixo do cabeçalho fixo, que é o primeiro pixel realmente livre. */
.toasts.no-topo{top:calc(var(--sticky-grade) + 14px); bottom:auto}
.toast{
  background:var(--fg); color:var(--bg); font-size:12.5px; font-weight:500;
  padding:10px 16px; border-radius:var(--radius); box-shadow:var(--sombra-forte);
  animation:sobe .28s cubic-bezier(.2,.8,.2,1);
}
.toasts.no-topo .toast{animation:desce .28s cubic-bezier(.2,.8,.2,1)}
@keyframes sobe{from{opacity:0; transform:translateY(10px)}}
@keyframes desce{from{opacity:0; transform:translateY(-10px)}}

/* ---------------- MOBILE ---------------- */
.mob-dias{display:none}
.mob-nav{display:none}
/* ---- até onde cabem três colunas ----
   A grade tem um piso real: 58px da coluna de horas + 7 × 78px de dia = 604px.
   Com os objetivos (322px) e os resultados (264px) ao lado, três colunas só
   cabem a partir de ~1300px — abaixo disso a grade VAZAVA do cartão (medido:
   115px para fora a 1181px). Então, abaixo de 1400, os resultados descem para
   uma faixa própria embaixo, de largura inteira. Este bloco vem ANTES do de
   1180px de propósito: é ele que precisa ser sobrescrito, e não o contrário. */
@media (max-width:1400px){
  .semana-layout{grid-template-columns:322px minmax(0,1fr); gap:22px}
  .lateral-dir{grid-column:1/-1; position:static; margin-top:6px}
}
@media (max-width:1180px){
  .topo-nome{display:none}      /* sem espaço no centro: some antes de colidir */
  .semana-layout{grid-template-columns:280px minmax(0,1fr); gap:18px}
  .diag-cols{grid-template-columns:1fr; gap:34px}
  .diag-topo{grid-template-columns:1fr; gap:20px; align-items:start}
}
/* O nome da ferramenta sai da barra antes dos botões: entre 561 e 660px ele
   sozinho custa 135px e empurrava "Planilha" e o tema para fora da tela.
   Medido em iframe (o headless mente abaixo de 500px). Quem está aqui dentro
   já sabe onde está — o mês continua à vista, e o título da aba também. */
@media (max-width:660px){
  .marca-txt{display:none}
}
@media (max-width:1000px){
  :root{--row:26px; --h-topo:56px; --h-abas:0px; --h-mobdias:53px}
  /* a .mob-nav é fixa: sem esta folga o fim da página fica atrás dela */
  /* overflow-x:clip (e não hidden) porque `hidden` viraria um container de
     rolagem e quebraria os cabeçalhos grudados da grade. Contém o transbordo
     de 180ms da transição entre os dias. */
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom, 0px)); overflow-x:clip}
  .marca-sep, .marca-txt .s{display:none}
  .marca img{height:22px}
  .marca-txt .t{font-size:16px}
  .btn .rot{display:none}
  /* A SAÍDA TROCA DE LUGAR AQUI, e não a 560px: é nesta largura que a .mob-nav
     entra, e é ela que passa a carregar a porta de volta. Deixar as duas no ar
     entre 561px e 1000px punha a MESMA palavra, na MESMA cor de destaque, duas
     vezes na mesma tela — e quem mexesse depois apagaria uma das duas sem saber
     qual. Uma largura, uma saída. */
  #btnVoltarApp, .saida-sep{display:none}
  .btn{padding:0 10px}
  .pt-sync{padding-left:22px; width:auto}
  .pt-sync .dot{left:9px}
  .abas-in{overflow-x:auto; scrollbar-width:none}
  .abas-in::-webkit-scrollbar{display:none}
  .semana-layout{grid-template-columns:1fr; gap:0; padding-block:12px 96px}
  .col-esq{order:2; margin-top:20px; align-self:auto}
  .lateral{position:static}
  .lateral-dir{position:static; order:3; margin-top:26px}
  /* copiar e colar são gestos de teclado: no celular sobram desfazer e refazer */
  #btnCopiar, #btnColar, .fe-sep{display:none}
  .barra-edicao{margin-left:2px}
  .grade-card{order:1; border-left:none; border-right:none; border-radius:0; margin:0 calc(var(--gutter)*-1); box-shadow:none}
  .grade-topo{padding:11px 16px}
  .resumo-mini{gap:14px}
  .resumo-mini .v{font-size:17px}

  .mob-dias{
    display:flex; gap:5px; padding:8px 12px; border-bottom:1px solid var(--rule); height:var(--h-mobdias);
    overflow-x:auto; scrollbar-width:none; position:sticky; top:var(--h-topo); background:var(--painel); z-index:24;
  }
  .mob-dias::-webkit-scrollbar{display:none}
  .mob-dia{
    flex:1 0 auto; min-width:46px; padding:6px 8px 7px; border:1px solid var(--rule);
    border-radius:var(--radius); text-align:center; position:relative;
  }
  .mob-dia .d{font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3)}
  .mob-dia .v{font-family:var(--serif); font-size:14px; font-variant-numeric:tabular-nums; margin-top:2px}
  .mob-dia[aria-selected="true"]{background:var(--fg); border-color:var(--fg)}
  .mob-dia[aria-selected="true"] .d, .mob-dia[aria-selected="true"] .v{color:var(--bg)}
  .mob-dia .pip{position:absolute; left:50%; transform:translateX(-50%); bottom:2px; width:14px; height:2px; border-radius:2px; background:var(--alerta); display:none}
  .mob-dia.saturado .pip{display:block}

  .grade{grid-template-columns:50px minmax(0,1fr); min-width:0; padding-right:8px}
  .meses{margin-left:0}
  .mes-atual{font-size:13px; padding:0 9px; height:32px}
  .mes-add{width:32px; height:32px}
  .topo-in{gap:10px}
  .topo-acoes{gap:6px}
  #btnImprimir{display:none}
  .tira-foco{display:none !important}
  .marca{gap:9px}
  .paleta-tiras{grid-template-columns:repeat(4,1fr)}
  .ff-in{flex-direction:column; gap:9px; padding:10px var(--gutter)}
  .ff-acoes{gap:6px}
  .ff-btn{flex:1; height:32px}
  .ff-colapsar{flex:0 0 32px}
  /* O carrossel já ocupa a faixa inteira e já rola com encaixe obrigatório em
     qualquer largura — as duas regras que existiam aqui viraram redundância. */
  .dia[data-oculto="1"]{display:none}
  .gh[data-oculto="1"]{display:none}
  .madrugada[data-oculto="1"]{display:none}
  .dia{border-right:none}
  .bloco .b-nome{font-size:12px}
  .bloco{left:4px; right:4px}

  .mob-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:80;
    background:var(--painel); border-top:1px solid var(--rule-strong);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .mob-nav button, .mob-nav a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0;
    font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3);
    position:relative; text-decoration:none; text-align:center;
  }
  .mob-nav button svg, .mob-nav a svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
  .mob-nav button[aria-selected="true"]{color:var(--fg)}
  /* A saída não divide a pele das quatro abas: traço separando, cor de destaque
     e largura própria (as abas repartem o que sobra). No celular ela é a ÚNICA
     porta de volta — o botão do topo não cabe nesta largura. */
  .mob-nav .saida{
    flex:0 0 auto; color:var(--dourado);
    margin-left:6px; padding-left:13px; border-left:1px solid var(--rule-strong);
  }
  .mob-nav .saida svg{stroke-width:2}
  .mob-nav .saida .rot{white-space:nowrap}
  .mob-nav .n{position:absolute; top:2px; right:calc(50% - 18px); min-width:14px; height:14px; padding:0 3px; border-radius:7px; background:var(--alerta); color:#fff; font-size:9px; display:flex; align-items:center; justify-content:center}
  .mob-nav .n[data-zero="1"]{display:none}
  .abas{display:none}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kpi{padding:12px 11px}
  .kpi .v{font-size:22px}
  .kpi .l{font-size:8.5px; letter-spacing:.09em}
  .instr-grid{grid-template-columns:1fr; gap:26px}
  .crono-linha{gap:6px}
  .crono select{flex:1; min-width:0}
  .obj{padding:9px 8px}
  .obj .nome{font-size:14px}
  .diag{padding-block:20px 96px}
  .instr{padding-block:22px 96px}
  .diag-titulo{font-size:26px}
  .legenda{gap:5px 12px}
  .legenda .it{font-size:11px}
  .tabela{font-size:12px}
  .tabela .mini{width:44px}
  .barra168 .trilho{height:30px}
  .grade-topo .tit{font-size:15px}
  .secao-h{flex-direction:column; align-items:flex-start; gap:3px}
  .crono-linha{flex-wrap:wrap}
  .crono-linha select{flex:1 1 44%}
}

/* ---------------- NAVEGABILIDADE E ATALHOS ----------------
   A quarta aba. Tudo com prefixo `atl-` de propósito: `.lista`, `.nota` e `.at`
   soltos já querem dizer outra coisa neste arquivo, e um nome repetido aqui
   pintaria a lista de objetivos por acidente.
   O corpo é gerado por scripts/atalhos-na-aba.js — ver o comentário no HTML. */
.atl{padding-block:34px 60px; max-width:calc(1080px + var(--gutter)*2)}
.atl-hero{border-bottom:1px solid var(--rule-strong); padding-bottom:24px; margin-bottom:30px}
.atl h2{font-family:var(--serif); font-size:clamp(30px,4vw,50px); line-height:1.08; letter-spacing:-.01em; max-width:20ch}
.atl .lede{font-size:15px; line-height:1.7; color:var(--fg-2); max-width:64ch; margin-top:16px}

/* Colunas que FLUEM, não uma malha de duas células: com malha, o bloco de três
   linhas fica emparelhado com o de sete e sobra meia página de buraco embaixo
   dele. O break-inside é o que impede um bloco de ser cortado na virada.

   `320px 2` diz "no máximo duas colunas, e nenhuma abaixo de 320px": no celular
   ele mesmo desce para uma, sem media query e sem eu ter de adivinhar a largura
   da virada. Com `columns:2` fixo, a aba transbordava 60px no iPhone — duas
   colunas de 176px não seguram uma linha de 132px de tecla mais o texto. */
.atl-grid{columns:320px 2; column-gap:40px}
.atl-bloco{break-inside:avoid; margin:0 0 28px}
.atl-bloco h3{font-family:var(--serif); font-size:20px; margin:0 0 3px}
.atl-sub{font-size:12px; line-height:1.55; color:var(--fg-3); margin:0 0 11px; max-width:52ch}
.atl-lista{border-top:1px solid var(--rule)}
.atl-linha{
  display:grid; grid-template-columns:132px minmax(0,1fr); gap:12px;
  align-items:baseline; padding:8px 0; border-bottom:1px solid var(--rule);
}
.atl-d{font-size:13px; line-height:1.55; color:var(--fg-2)}
.atl-d b{color:var(--fg); font-weight:500}
.atl-ou{font-size:10px; color:var(--fg-3); margin:0 4px}
#tela-atalhos kbd{
  display:inline-block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.02em;
  color:var(--fg); background:var(--bg-3); border:1px solid var(--rule-strong);
  border-radius:var(--radius); padding:3px 6px; white-space:nowrap;
}
/* auto-fit, e não três colunas fixas: nota nova não obriga a mexer no número. */
.atl-notas{display:grid; grid-template-columns:repeat(auto-fit,minmax(276px,1fr)); gap:16px; margin-top:30px}
.atl-nota{
  padding:15px 17px; background:var(--bg-2); border:1px solid var(--rule);
  border-left:2px solid var(--dourado); border-radius:var(--radius);
  font-size:12.5px; line-height:1.72; color:var(--fg-2);
}
.atl-nota b{color:var(--fg); font-weight:500}

/* Na tela estreita a tecla sobe para a linha de cima do texto. Encolher a coluna
   de 132px não serve: o chip é `nowrap` por natureza — "⌥/Alt + arrastar" mede
   122px e não tem como quebrar —, então ele invadiria a descrição em vez de
   caber. Este bloco vem DEPOIS dos de 1000px e 560px de propósito: bloco de
   celular declarado antes deles é sobrescrito por eles, e foi assim que a faixa
   estreita ficou sem efeito uma vez. */
@media (max-width:560px){
  .atl-linha{grid-template-columns:1fr; gap:5px; padding:10px 0}
  .atl h2{font-size:30px}
}

/* ---- o guia da integração com o Google Sheets, dentro da aba ----
   Fechado por padrão: quem abre esta aba veio atrás de uma tecla, e a
   integração se faz uma vez na vida. O botão é a porta, e ele diz o que há
   atrás — rótulo sozinho ("Integração ao vivo") não conta a quem interessa. */
.atl-guia{margin-top:34px; border-top:1px solid var(--rule-strong); padding-top:26px}
.atl-guia-bt{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  padding:14px 16px; border:1px solid var(--rule-strong); border-radius:var(--radius);
  background:var(--bg-2); color:var(--fg);
}
.atl-guia-bt:hover{border-color:var(--fg-3)}
.atl-guia-bt:focus-visible{outline:2px solid var(--dourado); outline-offset:2px}
.atl-guia-rot{display:flex; flex-direction:column; gap:2px; min-width:0}
.atl-guia-rot b{font-size:14px; font-weight:500}
.atl-guia-rot span{font-size:12px; color:var(--fg-3)}
/* A seta é do CSS, não do HTML: ela gira com o estado do próprio botão, então
   quem alterna não precisa lembrar de trocar desenho nenhum. */
.atl-guia-ico{
  width:9px; height:9px; flex:none; margin-left:2px;
  border-right:1.5px solid var(--fg-2); border-bottom:1.5px solid var(--fg-2);
  transform:rotate(-45deg); transition:transform .18s ease;
}
.atl-guia-bt[aria-expanded="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.atl-guia-bt[aria-expanded="true"] .atl-guia-rot span{color:var(--bg)}
.atl-guia-bt[aria-expanded="true"] .atl-guia-ico{transform:rotate(45deg); border-color:var(--bg)}
.atl-guia-corpo{padding:22px 2px 0}
.atl-guia-abre{font-size:13.5px; line-height:1.7; color:var(--fg-2); max-width:70ch; margin:0 0 20px}

.atl-passos{list-style:none; margin:0; padding:0; counter-reset:passo}
.atl-passo{display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; padding:13px 0; border-top:1px solid var(--rule)}
.atl-passo-n{font-family:var(--serif); font-size:19px; line-height:1.1; color:var(--dourado)}
.atl-passo-tx{display:flex; flex-direction:column; gap:4px; min-width:0}
.atl-passo-t{font-size:13.5px; font-weight:500; color:var(--fg)}
.atl-passo-tx > span{font-size:13px; line-height:1.6; color:var(--fg-2); max-width:70ch}
.atl-passo code, .atl-guia-abre code, .atl-guia .atl-nota code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  background:var(--bg-3); padding:1px 4px; border-radius:2px; color:var(--fg-2);
}
.atl-guia-acoes{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px}
.atl-guia-link{font-size:12px; color:var(--fg-3); text-decoration:underline; text-underline-offset:3px}
.atl-guia-link:hover{color:var(--fg-2)}
.atl-guia-eco{font-size:12px; color:var(--ok)}
.atl-guia-eco[data-erro="1"]{color:var(--alerta)}

/* ---------------- IMPRESSÃO ---------------- */
@media print{
  .topo,.abas,.mob-nav,.lateral .ferramentas,.dica,.btn,.mob-dias,
  .barra-edicao,.res-add,.res-item .x,.marca-selecao{display:none !important}
  .painel-aba{display:block !important}
  .semana-layout{grid-template-columns:1fr}

  /* ---- a semana INTEIRA no papel ----
     A folha tem 816px de largura em CSS, e abaixo de 1000px vale o bloco do
     celular, onde a grade mostra um dia por vez e esconde os outros seis. O
     resultado impresso era um sétimo da semana — só a segunda-feira. Aqui a
     grade volta a ter os sete dias, e as peças escondidas pelo carrossel
     voltam com o display que cada uma tem de verdade. */
  .grade,
  body[data-foco="1"] .grade{
    grid-template-columns:50px repeat(7, minmax(0,1fr)) !important;
    padding-right:0 !important;
  }
  .dia[data-oculto="1"]{display:block !important}
  .gh[data-oculto="1"], .madrugada[data-oculto="1"]{display:flex !important}
  .dia{border-right:1px solid #ddd}
  .dia:last-child{border-right:none}
  /* sete dias na largura da folha pedem letra menor e linha mais baixa */
  :root{--row:17px}
  .bloco{padding:2px 3px 2px 5px}
  .bloco .b-nome{font-size:8.5px !important; line-height:1.15}
  .bloco .b-hora{font-size:7px !important; margin-top:0}
  .gh .d{font-size:8px; letter-spacing:.06em}
  .gh .h{font-size:8.5px}
  .coluna-horas .hh{font-size:7.5px; padding-right:4px}
  .madrugada span{font-size:7px !important}
  /* os resultados do mês saem no papel: fazem parte do documento, não da tela */
  .lateral-dir{position:static; break-inside:avoid}
  .res-item textarea{color:#000}
  /* A faixa preta dos três títulos vira texto preto com fio embaixo: o
     navegador costuma NÃO imprimir fundo, e sem esta regra sobraria texto
     branco em papel branco — título invisível. */
  .grupo-tit{
    background:none !important; color:#000 !important;
    border-bottom:1px solid #999; border-radius:0; padding:0 0 3px; min-height:0;
  }
  .grade-card{box-shadow:none; border-color:#bbb}
  body{background:#fff}
  .bloco .b-x{display:none !important}
}

/* ============================================================
   CELULAR ESTREITO (iPhone) — este bloco fica no FIM de propósito:
   o @media de 560px original vem antes do de 1000px no arquivo, então tudo o
   que ele declarava era sobrescrito pelo bloco mais largo. Regra igual, ordem
   diferente: aqui ele vence.
   ============================================================ */
@media (max-width:560px){
  /* ---- a barra do topo tem que CABER no iPhone ----
     Medido em iframe de 393px (o headless mente abaixo de 500px): a barra
     transbordava 38px MESMO ANTES do desfazer/refazer — o botão de tema já
     ficava fora da tela — e com eles passou a transbordar 111px.

     Em vez de espremer, saem daqui os dois controles que têm outro caminho
     nesta largura: o dia se escolhe na régua dos sete dias, logo abaixo, que já
     abre no dia de hoje; e a paleta é escolha de uma vez só, que ninguém troca
     do celular. Ficam desfazer, refazer, Planilha e o tema.
     (A saída não está nesta lista: ela já saiu no bloco de 1000px, junto com a
     entrada da barra de baixo que a substitui.) */
  #btnHoje, #btnCores{display:none}

  /* a régua dos 7 dias é uma visão da semana inteira: no iPhone ela precisa
     caber sem rolagem lateral, senão sábado e domingo ficam fora da vista */
  .mob-dias{gap:3px; padding:8px 8px}
  /* 7 itens × ~60px = 420px não caberiam nos 393px do iPhone; o flex do bloco
     de 1000px tem shrink 0, então min-width sozinho não resolve */
  .mob-dia{flex:1 1 0; min-width:0; padding:5px 2px 6px}
  .mob-dia .d{font-size:9px; letter-spacing:.04em}
  .mob-dia .v{font-size:12.5px}
}

/* ============================================================
   TRANSIÇÃO ENTRE OS DIAS (celular / modo foco)
   Só o dia que ENTRA é animado: animar também o que sai dobraria a espera sem
   dobrar a informação. 180ms — o olho vê de onde veio, e quem já sabe para
   onde vai não fica esperando.
   ============================================================ */
@keyframes entraDaDireita{
  from{ transform:translateX(22%); opacity:.25 }
  to  { transform:none;            opacity:1   }
}
@keyframes entraDaEsquerda{
  from{ transform:translateX(-22%); opacity:.25 }
  to  { transform:none;             opacity:1   }
}
.dia.entra-da-direita, .gh.entra-da-direita, .madrugada.entra-da-direita{
  animation:entraDaDireita .18s cubic-bezier(.2,.7,.3,1) both;
}
.dia.entra-da-esquerda, .gh.entra-da-esquerda, .madrugada.entra-da-esquerda{
  animation:entraDaEsquerda .18s cubic-bezier(.2,.7,.3,1) both;
}
/* quem pediu menos movimento no sistema não recebe nenhum */
@media (prefers-reduced-motion: reduce){
  .dia.entra-da-direita, .gh.entra-da-direita, .madrugada.entra-da-direita,
  .dia.entra-da-esquerda, .gh.entra-da-esquerda, .madrugada.entra-da-esquerda{
    animation:none;
  }
}

/* ============================================================
   OS PILARES DA DISPOSIÇÃO

   Este bloco fica no FIM do arquivo de propósito, junto com o do celular
   estreito: as regras daqui precisam vencer as dos @media anteriores, e neste
   arquivo a ordem é que decide (ver o cabeçalho do bloco do iPhone).
   ============================================================ */

/* ---------- o contador dentro do bloco ----------
   Só o número e a seta. Os nomes vão para o painel que a seta abre — a coluna
   de dia tem piso de 78px e não sobrevive a rótulo escrito por horário.
   O contador aparece a partir de UMA HORA (a classe só é posta pelo grade.js
   quando o bloco tem 2 linhas ou mais): no bloco de 30 minutos ele custaria
   23px dos 57px de letra, e o nome perderia mais de uma sílaba. */
.bloco .b-pil{
  position:absolute; top:2px; right:3px; z-index:2;
  display:inline-flex; align-items:center; gap:2px;
  border:0; border-radius:2px; padding:2px 3px; cursor:pointer;
  font:600 8px/1 var(--sans); letter-spacing:.02em;
  background:color-mix(in srgb, var(--cor-txt) 17%, transparent);
  color:var(--cor-txt);
}
.bloco .b-pil:hover{background:color-mix(in srgb, var(--cor-txt) 32%, transparent)}
.bloco .b-pil:focus-visible{outline:2px solid var(--dourado); outline-offset:1px}
.bloco .b-pil .tri{
  width:0; height:0; border-left:5px solid currentColor;
  border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
}
/* o nome cede a passagem só quando há contador */
.bloco.com-pil .b-nome{padding-right:23px}
/* o ✕ divide o canto com o contador: com os dois, ele desce para a linha de baixo */
.bloco.com-pil:hover .b-x{top:auto; bottom:2px}

/* acender e apagar, para conferir a etiquetagem de um pilar de uma vez */
.bloco.apagado{opacity:.17}
.bloco.aceso{box-shadow:0 0 0 1.5px var(--dourado)}

/* ---------- o painel que a seta abre ---------- */
.pop-pilares{
  position:fixed; z-index:60; width:210px; padding:10px 12px;
  background:var(--painel); border:1px solid var(--rule-strong);
  border-radius:var(--radius); box-shadow:var(--sombra-forte);
}
.pop-pilares .pop-t{
  font:600 9px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--fg-3); margin-bottom:8px;
}
.pop-pilares .pop-l{
  display:flex; align-items:center; gap:7px; padding:3px 0;
  font-size:11.5px; color:var(--fg-2);
}
.pop-pilares .pop-l i{width:7px; height:7px; border-radius:50%; flex:0 0 auto}
.pop-pilares .pop-l u{
  margin-left:auto; text-decoration:none; font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dourado); white-space:nowrap;
}
.pop-pilares .pop-l u.exp{color:var(--fg-3)}

/* ---------- a contagem na linha do objetivo ----------
   É aqui que a contagem é exata e cabe: um objetivo etiquetado mostra o número
   mesmo quando todos os blocos dele têm meia hora. */
.obj .selo-pil{
  color:var(--dourado); font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---------- o mapa, abaixo dos objetivos do ano ---------- */
.pilares-mapa{margin-top:4px}
.grupo-tit.sutil{
  color:var(--fg-2); background:transparent;
  border-bottom:1px solid var(--rule); border-radius:0;
  padding:6px 2px 6px 0; min-height:0;
}
.grupo-tit.sutil .cont{
  font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:none;
  color:var(--dourado); font-variant-numeric:tabular-nums;
}
.pil-lista{display:flex; flex-direction:column; gap:1px}
.pil-l{
  display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:7px;
  align-items:center; width:100%; text-align:left;
  background:none; border:0; border-radius:2px; cursor:pointer;
  padding:3px 4px; color:var(--fg-2);
}
.pil-l:hover{background:var(--bg-3)}
.pil-l:focus-visible{outline:2px solid var(--dourado); outline-offset:-2px}
.pil-l .pt{width:6px; height:6px; border-radius:50%}
.pil-l .nm{
  font-size:11px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pil-l .hh{font-size:10px; color:var(--fg-3); font-variant-numeric:tabular-nums}
/* a marca fina proporcional atravessa as três colunas, na linha de baixo */
.pil-l .bb{
  grid-column:2 / -1; height:2px; background:var(--rule); border-radius:2px; overflow:hidden;
}
.pil-l .bb em{display:block; height:100%; border-radius:2px}
/* quem não recebeu tempo: apagado, mas nunca escondido — é ele o assunto */
.pil-l.vazio{opacity:.45}
.pil-l.vazio .nm{font-style:italic}
/* o de exposição é contado à parte, e a itálica diz isso sem uma legenda */
.pil-l.exposicao .nm{font-style:italic; color:var(--fg-3)}
.pil-l.exposicao .bb{visibility:hidden}
.pil-l.ativo{background:var(--bg-3); box-shadow:inset 2px 0 0 var(--dourado)}
.pil-nota{
  font-size:10.5px; line-height:1.5; color:var(--fg-3); margin-top:8px; padding:0 4px;
}
.pil-nota b{color:var(--fg-2); font-weight:600}
.pil-nota a{color:var(--dourado)}

/* ---------- o seletor, dentro do modal do objetivo ---------- */
.obj-pil-dica{
  font-size:11px; line-height:1.5; color:var(--fg-3); margin:6px 0 0;
}
.obj-pil-dica b{color:var(--fg-2)}
.cont-inline{
  font-size:9.5px; letter-spacing:.06em; text-transform:none; color:var(--dourado);
  font-variant-numeric:tabular-nums; margin-left:4px;
}
.pil-chips{display:flex; flex-wrap:wrap; gap:5px}
.pil-chip{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--rule-strong); border-radius:12px;
  background:var(--bg); color:var(--fg-2);
  font:500 11px/1 var(--sans); padding:6px 9px; cursor:pointer;
  /* altura mínima, nunca travada: "Meditação e espiritualidade" não cabe numa
     linha em 390px, e um chip de altura fixa cortaria a palavra */
  min-height:26px; text-align:left;
}
.pil-chip i{width:6px; height:6px; border-radius:50%; flex:0 0 auto}
.pil-chip:hover{border-color:var(--fg-3)}
.pil-chip.on{border-color:var(--fg); background:var(--bg-3); color:var(--fg)}
.pil-chip.exposicao{font-style:italic}
.pil-chip:focus-visible{outline:2px solid var(--dourado); outline-offset:1px}

/* ---------- celular ----------
   No toque não existe :hover. Um botão que só aparece com o ponteiro em cima
   simplesmente não existe no iPhone — é por isso que o ✕ da frase já tem esta
   mesma exceção mais acima no arquivo. O contador precisa ser permanente, e no
   celular há espaço de sobra: com um dia por vez, sobram 265px de letra. */
@media (hover:none){
  .bloco .b-pil{padding:3px 4px; font-size:8.5px}
  .bloco.com-pil:hover .b-x{top:2px; bottom:auto}
}
@media (max-width:560px){
  .pop-pilares{width:min(240px, calc(100vw - 24px))}
  .pil-l .nm{font-size:11.5px}
}
/* na impressão o contador não serve para nada: ninguém clica numa folha */
@media print{
  .bloco .b-pil{display:none !important}
  .bloco.com-pil .b-nome{padding-right:0}
  .pop-pilares{display:none !important}
}

/* ---------- a seção dos pilares no Diagnóstico ---------- */
.pil-diag{margin-top:38px}
.pil-topo{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:26px;
  align-items:start; margin:16px 0 20px;
}
.pil-cob .v{
  font-family:var(--serif); font-size:52px; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.pil-cob .v .de{
  font-size:19px; color:var(--fg-3); margin-left:9px; letter-spacing:0;
}
.pil-cob .l{
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-3); margin-top:7px;
}
.pil-cob .peso{font-size:12px; line-height:1.55; color:var(--fg-2); margin-top:11px}
.pil-cob .peso b{color:var(--dourado); font-variant-numeric:tabular-nums}
.pil-base{display:inline-flex; border:1px solid var(--rule-strong); border-radius:var(--radius); overflow:hidden}
.pil-base .bt{
  font:500 11px/1 var(--sans); color:var(--fg-2); background:var(--bg);
  border:0; padding:8px 12px; cursor:pointer; min-height:32px;
}
.pil-base .bt + .bt{border-left:1px solid var(--rule-strong)}
.pil-base .bt[aria-pressed="true"]{background:var(--fg); color:var(--bg)}
.pil-dens{font-size:12.5px; line-height:1.6; color:var(--fg-2); margin:11px 0 0; max-width:56ch}
.pil-dens b{color:var(--fg); font-variant-numeric:tabular-nums}

/* a barra que dá voltas: cada faixa vale o denominador inteiro */
.pil-voltas{display:flex; flex-direction:column; gap:3px}
.pil-voltas .volta{
  display:flex; height:11px; border-radius:2px; overflow:hidden; background:var(--bg-3);
}
.pil-voltas .sg{min-width:1px}
.pil-voltas .sg.vazio{
  background:repeating-linear-gradient(45deg, var(--rule) 0 3px, transparent 3px 6px);
}
.pil-voltas-leg{font-size:10.5px; color:var(--fg-3); margin-top:7px}

/* uma barra por pilar */
.pil-barras{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(228px,1fr));
  gap:15px 26px; margin-top:26px;
}
.pb .rot{
  display:flex; align-items:baseline; justify-content:space-between; gap:9px;
  font-size:11.5px; margin-bottom:5px;
}
.pb .rot .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pb .rot .hh{
  font-family:var(--serif); font-size:14px; font-variant-numeric:tabular-nums; flex:0 0 auto;
}
.pb .tr{display:flex; height:5px; background:var(--rule); border-radius:3px; overflow:hidden}
.pb .tr i{display:block; height:100%}
.pb .sub{font-size:10px; color:var(--fg-3); margin-top:4px}
.pb.vazio{opacity:.5}
.pb.vazio .rot .nm{font-style:italic}

/* os ausentes, nomeados */
.pil-ausentes{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(268px,1fr));
  gap:14px; margin-top:28px;
}
.pil-ausentes .au{
  border-left:2px solid var(--rule-strong); padding:3px 0 3px 13px;
}
.pil-ausentes .au.ok{border-left-color:var(--ok)}
.pil-ausentes .au-t{font-size:12.5px; font-weight:600; line-height:1.45}
.pil-ausentes .au-p{font-size:11.5px; line-height:1.6; color:var(--fg-3); margin-top:5px}
.pil-ausentes .au-l{
  display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:8px;
  font-size:11.5px; color:var(--fg-2);
}
.pil-ausentes .au-l span{display:inline-flex; align-items:center; gap:6px}
.pil-ausentes .au-l i{width:6px; height:6px; border-radius:50%; flex:0 0 auto}

@media (max-width:900px){
  .pil-topo{grid-template-columns:minmax(0,1fr); gap:18px}
  .pil-cob .v{font-size:42px}
}

/* ---------- exceção de pilares no modal do bloco ---------- */
.bloco-pil{border-top:1px solid var(--rule); margin-top:4px}
.bp-herda{
  font-size:11.5px; line-height:1.55; color:var(--fg-3);
  /* altura mínima, nunca travada: a frase muda de tamanho conforme o objetivo */
  min-height:0;
}
.bp-herda b{color:var(--fg-2)}
.bp-marca{
  display:inline-block; font-size:8.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--bg); background:var(--dourado); border-radius:2px;
  padding:2px 5px; margin-right:6px; vertical-align:1px;
}
.bp-acoes{margin-top:9px}
.bp-bt{
  font:500 11px/1.3 var(--sans); color:var(--dourado); background:none;
  border:0; border-bottom:1px solid color-mix(in srgb, var(--dourado) 45%, transparent);
  padding:2px 0; cursor:pointer; text-align:left;
}
.bp-bt:hover{border-bottom-color:var(--dourado)}
.bp-bt.volta{color:var(--fg-3); border-bottom-color:var(--rule-strong)}
.bp-editor{margin-top:11px}
/* O bloco que carrega exceção se distingue do que herda, e a marca é do BLOCO:
   um horário cuja exceção é "nenhum pilar" não tem contador onde se apoiar.
   Um tracinho na faixa lateral, que o bloco já tem — nada de ícone novo. */
.bloco.tem-excecao::before{
  background:repeating-linear-gradient(to bottom,
    var(--cor) 0 4px, color-mix(in srgb, var(--cor) 25%, transparent) 4px 7px);
}
.bloco .b-pil.excecao{box-shadow:inset 0 0 0 1px var(--cor-txt)}
.pop-pilares .pop-exc{
  float:right; letter-spacing:.09em; color:var(--dourado); text-transform:none;
  font-size:8.5px;
}

/* ---------- nota × horas ---------- */
.cruz-lede{font-size:12.5px; line-height:1.65; color:var(--fg-2); margin:0 0 16px; max-width:72ch}
.cruz-ok{
  font-size:12.5px; line-height:1.65; color:var(--fg-2);
  border-left:2px solid var(--ok); padding:3px 0 3px 13px; max-width:72ch;
}
.cruz-lista{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(248px,1fr)); gap:14px;
}
.cx{
  border:1px solid var(--rule); border-left-width:2px; border-radius:var(--radius);
  padding:12px 14px; background:var(--painel);
}
.cx.sem-hora{border-left-color:var(--alerta)}
.cx.carona{border-left-color:var(--atencao)}
.cx.curto{border-left-color:var(--atencao)}
/* Título e selo empilhados SEMPRE. Em linha, o selo subia para junto do nome
   quando o nome era curto e descia quando era comprido — e uma fileira de
   cartões lado a lado ficava com as linhas desalinhadas entre si. */
.cx-top{display:flex; flex-direction:column; align-items:flex-start; gap:5px}
.cx-top .nm{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; min-width:0}
.cx-top .nm i{width:7px; height:7px; border-radius:50%; flex:0 0 auto}
.cx-top .sel{
  font-size:8.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--fg-3);
  white-space:nowrap;
}
.cx.sem-hora .sel{color:var(--alerta)}
.cx-num{display:flex; gap:22px; margin:10px 0 7px}
.cx-num span{display:flex; flex-direction:column; gap:1px}
.cx-num b{font-family:var(--serif); font-size:21px; line-height:1; font-variant-numeric:tabular-nums}
.cx-num small{font-size:9.5px; color:var(--fg-3)}
.cx-p{font-size:11px; line-height:1.5; color:var(--fg-3)}
.cruz-nota{font-size:11px; line-height:1.6; color:var(--fg-3); margin:14px 0 0; max-width:74ch}

/* ============================================================
   TELA MUITO ESTREITA (≤360px) — iPhone SE de 1ª geração, Android antigo

   MEDIDO em 320px: a barra do topo PRECISA de 326px e TEM 288 — transborda 38.
   O culpado não são os botões de ação, como eu supus: a .topo-acoes inteira
   ocupa 88px (Planilha 48 + tema 34). Quem estoura é a .marca, com 218 —
   logo 50 + os meses 86 + desfazer/refazer 62 + 20 de respiro.

   NADA SOME AQUI. Numa tela desse tamanho, esconder mais um controle é tirar
   função de quem já tem menos tela; os 38px saem de folga — o gutter de 16px
   de cada lado (muito, em 320), a altura da logo, os respiros e o corpo dos
   botões. Fica no FIM do arquivo de propósito: neste CSS quem decide é a
   ordem, como diz o cabeçalho do bloco do iPhone.
   ============================================================ */
@media (max-width:360px){
  /* 16px de cada lado numa tela de 320 é 10% dela só em margem */
  :root{--gutter:11px}
  .topo-in{gap:6px}
  .marca{gap:5px}
  .marca img{height:18px}
  .meses{gap:2px}
  .mes-atual{font-size:12px; padding:0 6px}
  .barra-edicao{margin-left:0}
  .topo-acoes{gap:4px}
  /* ⚠️ O CORPO DOS BOTÕES NÃO ENCOLHE AQUI. Encolhi "+" para 28 e desfazer/
     refazer para 28 na primeira versão: são 8px comprados no alvo do dedo,
     justamente na tela mais estreita, onde ele tem menos margem de erro — abaixo
     dos 44pt da Apple e dos 48dp do Android. Os 8px saem de respiro, acima.
     Encolher o "+" também desfazia a paridade de altura com a pílula do mês,
     que o bloco de 1000px criou de propósito (32 e 32). */
  /* a página inteira passa a começar em 11px; este cabeçalho tinha 16 fixo e
     ficava 5px fora do prumo de todo o resto */
  .grade-topo{padding:11px var(--gutter)}
}

/* ============================================================
   ENVIAR PARA O PAINEL DE CONSISTÊNCIA

   Um botão só, no pé da lista de objetivos — é dali que saem as categorias do
   painel. Ele NÃO é primário: mandar a programação é gesto ocasional, e um
   botão cheio ali disputaria a atenção com as três ferramentas do topo da
   lista, que são o que se usa o tempo todo.

   `body[data-leitura]` esconde: o mentor abrindo a semana de um mentorado vê,
   não envia. A mesma trava existe do lado do servidor (`/api/consistencia`
   recusa escrita vinda do espelho) — trava que mora só na tela é trava de um
   lado só.
   ============================================================ */
.enviar-consist{border-top:1px solid var(--rule); padding-top:12px; margin-top:4px}
.consist-bt{
  width:100%; min-height:34px; padding:8px 10px;
  border:1px solid var(--rule-strong); border-radius:var(--radius);
  background:transparent; font-size:12px; font-weight:500; color:var(--fg-2);
  line-height:1.35; cursor:pointer; text-align:center;
}
.consist-bt:hover:not(:disabled){border-color:var(--fg); color:var(--fg)}
.consist-bt:disabled{opacity:.5; cursor:default}
/* O eco da última resposta mora aqui, e não num "toast" que some: enviar a
   programação é o tipo de coisa que se confere depois — "quantas categorias
   foram mesmo?" é a pergunta que vem meia hora depois, quando o aviso
   flutuante já sumiu faz tempo. */
.consist-nota{font-size:11px; line-height:1.55; color:var(--fg-3); margin:8px 0 0}
.consist-nota[data-st="erro"]{color:var(--alerta)}
.consist-nota[data-st="ok"]{color:var(--dourado)}
body[data-leitura] .enviar-consist{display:none}