/* ===========================================================
   Constina
   Identidade editorial — preto, branco e cinza. Sem cor de acento.

   ⚙️  TIPOGRAFIA: está toda no bloco "AS FONTES" logo abaixo.
       Para trocar de fonte, mexa SÓ lá. Mais nada no arquivo.
   =========================================================== */


/* -----------------------------------------------------------
   1. AS FONTES  ← o único lugar que você mexe pra trocar
   -----------------------------------------------------------
   Escolhidas na aula 2:
     títulos → Instrument Serif   (serifa alta, afiada)
     texto   → Inter Tight        (sem serifa, estreita, legível)
   Pra trocar um dia, mude só as duas linhas abaixo — e o endereço
   das fontes lá no topo do index.html.
   ----------------------------------------------------------- */

:root{
  /* No celular as letras ficam 8% menores — mais suaves na tela
     pequena. No computador, tamanho cheio. Os campos de escrever
     ficam de fora: abaixo de 16px o iPhone dá zoom ao tocar neles. */
  --escala: .92;
  --display: "Instrument Serif", Georgia, serif;
  --texto:   "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --display-peso:   400;
  --display-espaco: -0.025em;
}


/* -----------------------------------------------------------
   2. AS CORES E AS MEDIDAS
   ----------------------------------------------------------- */

:root{
  /* a escada do preto — cada tom tem um trabalho, nenhum é decoração */
  --preto:        #000000;   /* o cartão-assinatura: um por tela */
  --grafite:      #24242A;   /* o item selecionado do menu */
  --carvao:       #262629;   /* cinza escuro — texto de apoio */
  --cinza:        #6C6C72;   /* cinza de leitura */
  --cinza-claro:  #9C9CA3;   /* cinza apagado */
  --linha:        #E4E4E6;   /* filete */
  --linha-forte:  #CDCDD2;
  --papel:        #F2F2F3;   /* o fundo da tela */
  --branco:       #FFFFFF;   /* os cartões */

  /* A ÚNICA cor do app, e ela tem um trabalho só: dizer que uma
     tarefa está atrasada. Não é enfeite, é alarme. Se um dia ela
     aparecer em outro lugar, é porque alguém errou. */
  --atraso:       #A02418;

  --margem:       20px;      /* respiro lateral no celular */
  --nav-altura:   58px;
  --recuo:        12px;      /* o quanto o menu se afasta das bordas */
  --barra-largura:236px;     /* a coluna da esquerda no computador */
  --recuo-pc:     16px;      /* o recuo da barra lateral no computador */

  --curva-cartao: 16px;
  --curva-menu:   22px;      /* o menu flutuante */
  --curva-item:   14px;      /* a pastilha do item selecionado */
  --curva-pilula: 999px;

  /* sombra só para o que FLUTUA. O que é plano leva filete. */
  --sombra-flutua: 0 10px 30px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--papel);
  color:var(--preto);
  font-family:var(--texto);
  font-size:calc(15px * var(--escala));
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-altura) + var(--recuo) * 2 + 64px + env(safe-area-inset-bottom));
}

h1,h2,h3{ margin:0; font-weight:400; }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--preto);
  outline-offset:3px;
}


/* -----------------------------------------------------------
   3. A COLUNA DA MARCA
   No celular: uma faixa fina em cima.
   No computador: a coluna fixa da esquerda.
   ----------------------------------------------------------- */

.barra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px var(--margem) 14px;
}

.marca{
  text-decoration:none;
  color:var(--preto);
  display:block;
}
.marca-nome{
  display:block;
  font-family:var(--display);
  font-weight:var(--display-peso);
  letter-spacing:var(--display-espaco);
  font-size:calc(25px * var(--escala));   /* o logo: uma linha só */
  line-height:1;
}
.marca-periodo{
  margin:0;
  font-size:calc(12px * var(--escala));
  color:var(--cinza);
  text-align:right;
  line-height:1.3;
  white-space:nowrap;
}
.barra-rodape{ display:none; }

/* a entrada dos Cadastros: no celular, um botão redondo no canto;
   fora do menu de baixo porque não é tela de todo dia */
.marca-periodo{ margin-left:auto; }
.ir-cadastros{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:40px; height:40px;
  margin-left:-6px;
  border:1px solid var(--linha);
  border-radius:var(--curva-pilula);
  background:var(--branco);
  color:var(--carvao);
  text-decoration:none;
  transition:color .16s ease, background-color .16s ease, border-color .16s ease;
}
.ir-cadastros svg{
  width:20px; height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  flex-shrink:0;
}
.ir-cadastros span{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.ir-cadastros.ativo{
  background:var(--grafite);
  border-color:var(--grafite);
  color:var(--branco);
}


/* -----------------------------------------------------------
   4. A ESPINHA DO TRIMESTRE
   Um tracinho por semana do trimestre. Cheio = já passou.
   Fica grudada no topo enquanto você rola — o trimestre
   nunca sai de vista. É o elemento-assinatura do app.
   ----------------------------------------------------------- */

.espinha{
  position:sticky;
  top:0;
  z-index:8;
  background:var(--papel);
  padding:12px var(--margem) 14px;
  border-bottom:1px solid var(--linha);
}

.espinha-tracos{
  display:flex;
  gap:2px;
  align-items:flex-end;
  height:16px;
}
.espinha-tracos span{
  flex:1;
  height:7px;
  border-radius:1px;
  background:var(--linha-forte);   /* a semana que ainda não chegou */
}
.espinha-tracos span.passou{
  background:var(--preto);         /* a semana que já foi */
}
/* a semana que acabou antes de ela entrar: nem preta nem cobrada */
.espinha-tracos span.antes{
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--linha);
}
.espinha-tracos span.agora{
  height:16px;                     /* a semana de hoje cresce pra cima */
  background:var(--preto);
}

.espinha-texto{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin:9px 0 0;
  font-size:calc(12px * var(--escala));
  color:var(--cinza);
}
.espinha-texto strong{
  font-weight:500;
  color:var(--preto);
}


/* -----------------------------------------------------------
   5. AS TELAS
   ----------------------------------------------------------- */

main{ display:block; }
.tela{ padding:0 var(--margem); }
.tela[hidden]{ display:none; }

.cabecalho-tela{ padding:26px 0 22px; }

.cabecalho-data{
  margin:0 0 6px;
  font-size:calc(13px * var(--escala));
  color:var(--cinza);
}
.cabecalho-tela h2{
  font-family:var(--display);
  font-weight:var(--display-peso);
  letter-spacing:var(--display-espaco);
  font-size:calc(42px * var(--escala));
  line-height:0.98;
}
.linha-fina{
  margin:14px 0 0;
  max-width:36ch;
  color:var(--carvao);
  font-size:calc(15px * var(--escala));
}


/* -----------------------------------------------------------
   6. OS CARTÕES
   Filete fino, sem sombra — como nas suas referências.
   ----------------------------------------------------------- */

.cartao{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--curva-cartao);
  padding:22px 20px;
  margin:0 0 14px;
}
.cartao:last-child{ margin-bottom:34px; }

/* o cartão preto — só um por tela, é o ponto de força */
.cartao-preto{
  background:var(--preto);
  border-color:var(--preto);
  color:var(--branco);
}
.cartao-preto .cartao-apoio{ color:rgba(255,255,255,.62); }
.cartao-preto .selo{
  color:rgba(255,255,255,.62);
  border-color:rgba(255,255,255,.28);
}

.cartao h3{
  font-size:calc(17px * var(--escala));
  font-weight:500;
  letter-spacing:-0.01em;
  margin:0 0 8px;
}
.cartao-apoio{
  margin:0;
  color:var(--cinza);
  font-size:calc(14.5px * var(--escala));
  max-width:52ch;
}
.cartao-apoio + .cartao-apoio{ margin-top:10px; }
.cartao-apoio em{ font-style:italic; color:var(--carvao); }
.cartao-preto .cartao-apoio em{ color:var(--branco); }

/* a etiqueta "Fase 2" — pequena, de canto, sem gritar */
.selo{
  display:inline-block;
  border:1px solid var(--linha-forte);
  border-radius:var(--curva-pilula);
  padding:2px 10px;
  font-size:calc(11px * var(--escala));
  letter-spacing:0.02em;
  color:var(--cinza);
  margin:0 0 12px;
}


/* -----------------------------------------------------------
   7. A TELA DO TRIMESTRE
   As 6 áreas, cada uma abrindo a cascata
   Objetivo → Resultado → Rotina.
   ----------------------------------------------------------- */

.areas{ list-style:none; margin:0; padding:0; }

.area + .area{ margin-top:2px; }

/* --- a linha da área, que abre e fecha --- */

.area-topo{
  width:100%;
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:15px 0;
  background:none;
  border:0;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.area-topo .nome{
  font-family:var(--texto);
  font-weight:500;
  letter-spacing:-0.01em;
  font-size:calc(16.5px * var(--escala));
  line-height:1.3;
  flex:1;
  min-width:0;
}

.area-topo .estado{
  font-size:calc(12.5px * var(--escala));
  color:var(--cinza-claro);
  white-space:nowrap;
}
.area[data-prontos="3"] .estado{ color:var(--preto); }

.area-topo .seta{
  width:18px; height:18px;
  flex-shrink:0;
  align-self:center;
  fill:none;
  stroke:var(--cinza-claro);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .18s ease;
}
.area.aberta .seta{ transform:rotate(180deg); }
.area.aberta .estado{ opacity:0; }


/* --- a cascata: três degraus pendurados numa linha --- */

.area-painel{
  padding:6px 0 28px;
  max-width:560px;
}
.area-painel[hidden]{ display:none; }

.degrau{
  position:relative;
  padding:0 0 22px 22px;
  border-left:1px solid var(--linha-forte);
}
/* a bolinha que prende o degrau na linha */
.degrau::before{
  content:"";
  position:absolute;
  left:-4px; top:7px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--linha-forte);
}
.degrau-fim{
  border-left-color:transparent;
  padding-bottom:4px;
}
/* o último degrau ainda precisa do pedaço de linha até a bolinha */
.degrau-fim::after{
  content:"";
  position:absolute;
  left:-1px; top:0;
  width:1px; height:11px;
  background:var(--linha-forte);
}

.degrau-rotulo{
  margin:0;
  font-family:var(--texto);
  font-weight:500;
  letter-spacing:-0.01em;
  font-size:calc(15px * var(--escala));
  line-height:1.3;
}
.degrau-dica{
  margin:1px 0 9px;
  font-size:calc(13px * var(--escala));
  color:var(--cinza);
}


/* --- os campos de escrever ---
   Sem caixa: ela escreve direto no cartão. Uma linha bem fina diz
   "aqui se escreve" enquanto o campo está vazio (ou sendo escrito);
   preenchido, a linha some e fica só o texto dela.
   "Vazio" = o texto de exemplo está à mostra — por isso todo campo
   precisa de um placeholder. Todo campo do app segue este desenho. */

.escrita,
.valor-grande,
.venda-numero,
.campo-numero input,
.nova-tarefa > input[type="text"],
.marca-dinheiro input,
.valor-oferta,
.meses[data-modo="mes"] .mes input{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--linha);
  border-radius:0;
  transition:border-color .16s ease;
}
.escrita:focus,
.valor-grande:focus,
.venda-numero:focus,
.campo-numero input:focus,
.nova-tarefa > input[type="text"]:focus,
.marca-dinheiro input:focus,
.valor-oferta:focus,
.meses[data-modo="mes"] .mes input:focus{ outline:none; }

.escrita:not(:placeholder-shown):not(:focus),
.valor-grande:not(:placeholder-shown):not(:focus),
.venda-numero:not(:placeholder-shown):not(:focus),
.campo-numero input:not(:placeholder-shown):not(:focus),
.nova-tarefa > input[type="text"]:not(:placeholder-shown):not(:focus),
.marca-dinheiro input:not(:placeholder-shown):not(:focus),
.valor-oferta:not(:placeholder-shown):not(:focus),
.meses[data-modo="mes"] .mes input:not(:placeholder-shown):not(:focus){
  border-bottom-color:transparent;
}

.escrita{
  display:block;
  width:100%;
  font:inherit;
  font-size:16px;
  line-height:1.5;
  color:var(--preto);
  padding:6px 0 8px;
  resize:none;
  overflow:hidden;
}
.escrita::placeholder{ color:var(--cinza-claro); }


/* --- os rótulos miúdos dentro da rotina --- */

.mini-rotulo{
  margin:20px 0 8px;
  font-size:calc(13px * var(--escala));
  color:var(--cinza);
}


/* --- as pastilhas de escolher --- */

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
/* o atributo "hidden" some sozinho na maioria dos elementos, mas
   perde para qualquer regra de display escrita por nós — por isso
   precisa ser dito aqui de novo. */
.chips[hidden]{ display:none; }
.chips button{
  font:inherit;
  font-size:calc(14px * var(--escala));
  line-height:1;
  padding:9px 14px;
  min-height:38px;
  background:transparent;
  color:var(--carvao);
  border:1px solid var(--linha-forte);
  border-radius:var(--curva-pilula);
  cursor:pointer;
  transition:background-color .14s ease, color .14s ease, border-color .14s ease;
}
.chips button:hover{ border-color:var(--cinza); }
.chips button[aria-pressed="true"]{
  background:var(--grafite);
  border-color:var(--grafite);
  color:var(--branco);
}


/* --- os dias da semana --- */

.dias-semana{
  display:flex;
  gap:5px;
  margin-top:12px;
}
.dias-semana[hidden]{ display:none; }
.dias-semana button{
  flex:1;
  font:inherit;
  font-size:calc(13px * var(--escala));
  line-height:1;
  padding:11px 0;
  min-height:42px;
  background:transparent;
  color:var(--carvao);
  border:1px solid var(--linha-forte);
  border-radius:10px;
  cursor:pointer;
  transition:background-color .14s ease, color .14s ease, border-color .14s ease;
}
.dias-semana button[aria-pressed="true"]{
  background:var(--grafite);
  border-color:var(--grafite);
  color:var(--branco);
}


/* --- o campo de número, com a unidade ao lado --- */

.campo-numero{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:12px;
}
.campo-numero[hidden]{ display:none; }
.campo-numero input{
  font:inherit;
  font-size:19px;
  width:5.5ch;
  padding:5px 0 7px;
  color:var(--preto);
  text-align:center;
  -moz-appearance:textfield;
}
.campo-numero input::-webkit-outer-spin-button,
.campo-numero input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.campo-numero .unidade,
.campo-numero .numero-rotulo{
  font-size:calc(14.5px * var(--escala));
  color:var(--cinza);
}
.campo-numero .numero-rotulo{ cursor:pointer; }


/* --- a rotina escrita em português, o fecho da cascata --- */

.frase-rotina{
  margin:20px 0 0;
  padding:12px 14px;
  background:var(--papel);
  border-radius:10px;
  font-size:calc(14.5px * var(--escala));
  color:var(--preto);
}
.frase-rotina[hidden]{ display:none; }


/* --- um objetivo dentro da área --- */

.objetivo + .objetivo{ margin-top:40px; }
.objetivo-conta,
.rotina-conta{
  margin:0 0 12px;
  font-size:calc(12.5px * var(--escala));
  color:var(--cinza-claro);
}
.rotina-conta{ margin-bottom:8px; }
.objetivo-conta[hidden],
.rotina-conta[hidden]{ display:none; }

/* --- uma rotina dentro do objetivo --- */

.rotina-edita + .rotina-edita{ margin-top:32px; }

/* --- acrescentar e remover --- */

.adicionar{
  display:inline-block;
  margin-top:18px;
  padding:9px 16px;
  font:inherit;
  font-size:calc(14px * var(--escala));
  color:var(--preto);
  background:transparent;
  border:1px dashed var(--linha-forte);
  border-radius:var(--curva-pilula);
  cursor:pointer;
}
.adicionar:hover{ border-style:solid; border-color:var(--preto); }
.adicionar.menor{ margin-top:16px; font-size:calc(13.5px * var(--escala)); padding:7px 14px; }

.remover{
  display:inline-block;
  margin-top:20px;
  padding:6px 0;
  font:inherit;
  font-size:calc(13px * var(--escala));
  /* discreto, mas nunca abaixo do contraste que se lê */
  color:var(--cinza);
  background:none;
  border:0;
  cursor:pointer;
  text-align:left;
}
.remover:hover{ color:var(--preto); }
.remover[data-armado]{
  color:var(--preto);
  font-weight:500;
}
.remover.menor{ margin-top:14px; font-size:calc(12.5px * var(--escala)); }
.remover[hidden]{ display:none; }


/* -----------------------------------------------------------
   7b. A META DE FATURAMENTO
   ----------------------------------------------------------- */

.meta .cartao-apoio{ margin-bottom:18px; }

.valor-grande{
  display:block;
  width:100%;
  font-family:var(--display);
  font-weight:var(--display-peso);
  letter-spacing:var(--display-espaco);
  font-size:calc(40px * var(--escala));
  line-height:1.1;
  color:var(--preto);
  padding:2px 0 10px;
}
.valor-grande::placeholder{ color:var(--linha-forte); }
.valor-grande[readonly]{ color:var(--carvao); }

.meta .chips{ margin-top:20px; }

.mini-nota{
  margin:12px 0 0;
  font-size:calc(13px * var(--escala));
  color:var(--cinza);
  max-width:52ch;
}

.meses{ margin-top:14px; }
.mes{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 0;
}
.mes label{
  font-size:calc(15px * var(--escala));
  color:var(--carvao);
}
.mes input{
  font:inherit;
  font-size:16px;
  width:12ch;
  text-align:right;
  color:var(--preto);
  background:transparent;
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  padding:3px 0 4px;
}
.mes input::placeholder{ color:var(--cinza-claro); }
/* quando a divisão é igual, os meses são contas, não campos */
.meses[data-modo="igual"] .mes input{ color:var(--cinza); }



/* -----------------------------------------------------------
   7c. HOJE E SEMANA
   Regra do preenchimento: preto sólido = cumprido.
   Só contorno = era esperado e não saiu. Sem cor de semáforo.
   ----------------------------------------------------------- */

/* --- o resumo da semana, no topo do Hoje --- */

.resumo-topo{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.resumo-topo h3{ margin:0; }
.resumo-periodo{
  font-size:calc(13px * var(--escala));
  color:rgba(255,255,255,.62);
  white-space:nowrap;
}

.resumo-par{
  display:flex;
  gap:26px;
  margin-top:18px;
}
.resumo-coluna{ flex:1; min-width:0; }
.resumo-rotulo{
  margin:0 0 2px;
  font-size:calc(13px * var(--escala));
  color:rgba(255,255,255,.62);
}

.resumo-numero{
  margin:0;
  font-family:var(--display);
  font-weight:var(--display-peso);
  letter-spacing:var(--display-espaco);
  font-size:calc(56px * var(--escala));
  line-height:1;
}
.resumo-coluna .barra-fina{ margin-top:10px; }
.resumo-antes{
  margin:16px 0 0;
  font-size:calc(14.5px * var(--escala));
  line-height:1.5;
  color:rgba(255,255,255,.72);
  max-width:46ch;
}

.resumo-venda{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-top:26px;
}
.resumo-venda-valor{
  font-family:var(--display);
  font-weight:var(--display-peso);
  letter-spacing:var(--display-espaco);
  font-size:calc(30px * var(--escala));
  line-height:1;
}
/* a barra da meta, no Mês e na Semana: o trilho é a meta,
   o claro é o planejado, o branco é o vendido */
.meta-barra{ margin-top:18px; }
.meta-trilho{
  position:relative;
  height:6px;
  border-radius:var(--curva-pilula);
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.meta-trilho span{
  position:absolute;
  left:0; top:0; bottom:0;
  border-radius:inherit;
  transition:width .3s ease;
}
.meta-planejado{ background:rgba(255,255,255,.42); }
.meta-vendido{ background:var(--branco); }
.meta-legenda{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:8px;
  font-size:calc(12.5px * var(--escala));
  color:rgba(255,255,255,.62);
}
.meta-legenda-vendido{ color:var(--branco); }

/* planejado · realizado · extra — três números, nunca um só */
.resumo-tres{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:26px;
}
.resumo-tres-valor{
  margin:0;
  font-family:var(--display);
  font-weight:var(--display-peso);
  letter-spacing:var(--display-espaco);
  /* encolhe com a tela: R$ 100.000,00 cabe em três colunas no celular */
  font-size:clamp(15px, 4.9vw, 21px);
  line-height:1.1;
  white-space:nowrap;
}

.resumo-nota{
  margin:8px 0 0;
  font-size:calc(12.5px * var(--escala));
  line-height:1.45;
  color:rgba(255,255,255,.62);
}
.resumo-abrir{
  margin-top:16px;
  padding:0;
  font:inherit;
  font-size:calc(13.5px * var(--escala));
  color:rgba(255,255,255,.62);
  background:none;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.28);
  cursor:pointer;
}
.resumo-abrir:hover{ color:var(--branco); border-bottom-color:var(--branco); }

.resumo-lista{
  list-style:none;
  margin:18px 0 0;
  padding:0;
}
.resumo-lista[hidden]{ display:none; }
.resumo-lista li + li{ margin-top:14px; }

.resumo-linha{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:6px;
}
.resumo-nome{
  font-size:calc(14.5px * var(--escala));
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.resumo-conta{
  font-size:calc(14.5px * var(--escala));
  color:rgba(255,255,255,.62);
  white-space:nowrap;
}

/* a barra que enche conforme empilha */
.barra-fina{
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,.22);
  overflow:hidden;
}
.barra-fina span{
  display:block;
  height:100%;
  background:var(--branco);
}
/* no cartão branco, a barra inverte as cores */
.cartao:not(.cartao-preto) .barra-fina{ background:var(--linha); }
.cartao:not(.cartao-preto) .barra-fina span{ background:var(--preto); }


/* --- O PAINEL DE HOJE: um cartão só, rotinas em linhas dentro ---
   Seis cartõezinhos soltos viram uma coisa só, que se lê de cima
   a baixo como uma lista — não como seis avisos separados. */

/* O painel é só um recipiente: quem tem superfície é cada linha.
   Assim a linha cumprida pode ficar transparente e se fundir com o
   fundo do app — que era o que funcionava antes. */
.painel-rotinas{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:34px;
}

.linha-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--curva-cartao);
}
/* atrasada: o contorno avisa antes de a pessoa ler */
.linha-item[data-atrasada]{ border-color:var(--atraso); }

.linha-texto{ flex:1; min-width:0; }
.linha-item h3{
  margin:0;
  font-size:calc(17px * var(--escala));
  font-weight:500;
  letter-spacing:-0.01em;
}
.linha-contexto{
  margin:4px 0 0;
  font-size:calc(13.5px * var(--escala));
  color:var(--cinza);
}
.linha-contexto[hidden]{ display:none; }

/* Cumprida: a linha fica transparente e se funde com o fundo do app.
   O contorno permanece, pra ela não virar texto solto no nada. */
.linha-item[data-feito="sim"],
.linha-item[data-feita="sim"]{
  background:transparent;
  border-color:var(--linha);
}
.linha-item[data-feito="sim"] h3,
.linha-item[data-feita="sim"] h3{ color:var(--carvao); }


/* -----------------------------------------------------------
   7d. AS TAREFAS
   Bloco separado das Rotinas, sempre depois. O título anuncia
   que aqui é outra coisa — não é continuação da lista de cima.
   ----------------------------------------------------------- */

.bloco-tarefas{ margin:34px 0 0; }

.bloco-cabecalho{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.bloco-cabecalho h2{
  font-family:var(--display);
  font-weight:var(--display-peso);
  letter-spacing:var(--display-espaco);
  font-size:calc(30px * var(--escala));
  line-height:1;
}
.bloco-conta{
  font-size:calc(13.5px * var(--escala));
  color:var(--cinza);
  white-space:nowrap;
}
.bloco-vazio{
  margin:0;
  font-size:calc(14.5px * var(--escala));
  color:var(--cinza);
  max-width:48ch;
}

.painel-tarefas{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.linha-tarefa{ gap:10px; padding-right:16px; }


.chips-area{ margin-top:10px; }
.chips-area button{ font-size:calc(13px * var(--escala)); padding:7px 12px; min-height:34px; }

.tarefa-apagar{
  flex-shrink:0;
  width:34px; height:34px;
  padding:0;
  background:none;
  border:0;
  border-radius:50%;
  cursor:pointer;
}
.tarefa-apagar svg{
  width:16px; height:16px;
  display:block;
  margin:auto;
  fill:none;
  stroke:var(--cinza-claro);
  stroke-width:1.6;
  stroke-linecap:round;
}
.tarefa-apagar:hover svg{ stroke:var(--preto); }


/* --- escrever uma tarefa nova --- */

.abrir-tarefa{ margin-top:12px; }

.botao-nova{
  display:block;
  width:100%;
  padding:15px 20px;
  font:inherit;
  font-size:calc(15px * var(--escala));
  text-align:left;
  color:var(--carvao);
  background:transparent;
  border:1px dashed var(--linha-forte);
  border-radius:var(--curva-cartao);
  cursor:pointer;
}
.botao-nova::before{ content:"+ "; }
.botao-nova:hover{ border-style:solid; border-color:var(--preto); color:var(--preto); }
.botao-nova[hidden]{ display:none; }

.nova-tarefa{
  padding:20px;
  background:var(--branco);
  border:1px solid var(--preto);
  border-radius:var(--curva-cartao);
}
.nova-tarefa[hidden]{ display:none; }

.nova-tarefa > input[type="text"]{
  display:block;
  width:100%;
  font:inherit;
  font-size:17px;
  color:var(--preto);
  padding:4px 0 10px;
}
.nova-tarefa > input[type="text"]::placeholder{ color:var(--cinza-claro); }

.campo-dia{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:18px;
}
.campo-dia[hidden]{ display:none; }
.campo-dia label{ font-size:calc(13px * var(--escala)); color:var(--cinza); }
.campo-dia input{
  font:inherit;
  font-size:15px;
  color:var(--preto);
  background:transparent;
  border:1px solid var(--linha-forte);
  border-radius:10px;
  padding:8px 10px;
}
.campo-dia input:focus{ outline:none; border-color:var(--preto); }

.nova-tarefa-acoes{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:22px;
}
.nova-tarefa-botao{
  font:inherit;
  font-size:calc(14px * var(--escala));
  padding:11px 20px;
  color:var(--branco);
  background:var(--grafite);
  border:0;
  border-radius:var(--curva-pilula);
  cursor:pointer;
}
.nova-tarefa-botao:hover{ background:var(--preto); }
.nova-tarefa-fechar{
  font:inherit;
  font-size:calc(13.5px * var(--escala));
  padding:6px 0;
  color:var(--cinza);
  background:none;
  border:0;
  cursor:pointer;
}
.nova-tarefa-fechar:hover{ color:var(--preto); }


/* --- OS CONTROLES DE MARCAR ---
   (restaurados: uma edição minha apagou este bloco por engano e
   quebrou o check no Hoje e na Semana ao mesmo tempo) --- */

.marca-feito{
  flex-shrink:0;
  width:46px; height:46px;
  padding:0;
  background:none;
  border:0;
  border-radius:50%;
  cursor:pointer;
}
.marca-feito svg{
  width:32px; height:32px;
  display:block;
  margin:auto;
  fill:none;
  stroke:var(--linha-forte);
  stroke-width:1.5;
}
.marca-feito svg .cheio{ fill:var(--preto); stroke:none; }
.marca-feito svg .risco{
  stroke:var(--branco);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.marca-feito:hover svg{ stroke:var(--cinza); }
.marca-feito[aria-pressed="true"]:hover svg{ stroke:none; }

/* menos / número / mais */
.marca-passo{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:2px;
  border:1px solid var(--linha-forte);
  border-radius:var(--curva-pilula);
  padding:3px;
}
.marca-passo .passo{
  width:38px; height:38px;
  flex-shrink:0;
  font:inherit;
  font-size:calc(19px * var(--escala));
  line-height:1;
  color:var(--carvao);
  background:none;
  border:0;
  border-radius:50%;
  cursor:pointer;
}
.marca-passo .passo:hover:not(:disabled){ background:var(--papel); }
.marca-passo .passo:disabled{ color:var(--linha-forte); cursor:default; }
.marca-passo input{
  width:3.2ch;
  font:inherit;
  font-size:17px;
  text-align:center;
  color:var(--preto);
  background:transparent;
  border:0;
  padding:0;
}
.marca-passo input:focus{ outline:none; }
.marca-passo:focus-within{ border-color:var(--preto); }

/* dinheiro */
.marca-dinheiro input{
  width:11ch;
  font:inherit;
  font-size:16px;
  text-align:right;
  color:var(--preto);
  padding:5px 0 6px;
}
.marca-dinheiro input::placeholder{ color:var(--linha-forte); }


/* --- a agenda da semana: o dia à esquerda, o que cai nele à direita --- */

.agenda{ padding-top:6px; padding-bottom:6px; }

.agenda-linha{
  display:grid;
  grid-template-columns:62px 1fr;
  align-items:start;
  column-gap:14px;
  padding:9px 0;
}

.agenda-dia{
  display:flex;
  align-items:baseline;
  gap:5px;
  padding-top:5px;
}
.agenda-nome{ font-size:calc(13px * var(--escala)); color:var(--cinza); }
.agenda-numero{ font-size:calc(13px * var(--escala)); color:var(--cinza-claro); }
.agenda-linha[data-hoje="sim"] .agenda-nome{ color:var(--preto); font-weight:500; }
.agenda-linha[data-hoje="sim"] .agenda-numero{ color:var(--carvao); }

.agenda-lista{ min-width:0; }
.agenda-vazio{
  display:inline-block;
  padding-top:5px;
  font-size:calc(14px * var(--escala));
  color:var(--linha-forte);
}

.tarefa-enxuta{
  display:flex;
  align-items:center;
  gap:9px;
  padding:2px 0;
}
.tarefa-enxuta + .tarefa-enxuta{ margin-top:3px; }
.tarefa-texto{
  flex:1;
  min-width:0;
  font-size:calc(15px * var(--escala));
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tarefa-area{ color:var(--cinza); font-size:calc(13px * var(--escala)); }
.tarefa-enxuta[data-feita="sim"] .tarefa-texto{ color:var(--cinza); }

.marca-feito.marca-miuda{ width:26px; height:26px; flex-shrink:0; }
.marca-feito.marca-miuda svg{ width:20px; height:20px; }

.tarefa-enxuta .tarefa-apagar{ width:26px; height:26px; opacity:0; }
.tarefa-enxuta:hover .tarefa-apagar,
.tarefa-enxuta .tarefa-apagar:focus-visible{ opacity:1; }
.tarefa-enxuta .tarefa-apagar svg{ width:14px; height:14px; }



.chips-dia button,
.chips-repete button{ font-size:calc(13px * var(--escala)); padding:7px 12px; min-height:34px; }
.nova-tarefa-extras .dias-semana{ margin-top:10px; }
.nova-tarefa-extras .dias-semana[hidden]{ display:none; }


/* --- arrastar pra mudar a ordem --- */

/* a linha avisa que dá pra pegar, sem gritar */
.painel-rotinas .linha-item{ cursor:grab; touch-action:pan-y; }
.painel-rotinas .linha-item:active{ cursor:grabbing; }

/* enquanto arrasta, a página não rola junto */
.painel-rotinas[data-arrastando]{ touch-action:none; }
.painel-rotinas[data-arrastando] .linha-item{ transition:none; }

.linha-item[data-pegando]{
  cursor:grabbing;
  position:relative;
  z-index:3;
  border-color:var(--preto);
  box-shadow:var(--sombra-flutua);
  touch-action:none;
}


/* --- as já feitas --- */

/* O que já foi feito não precisa de moldura nem de sublinhado —
   é um recado calmo, não um botão que disputa atenção. */
.botao-feitas{
  display:block;
  justify-self:start;
  margin:26px 0 0;
  padding:4px 0;
  font-family:var(--display);
  font-weight:var(--display-peso);
  letter-spacing:var(--display-espaco);
  font-size:calc(21px * var(--escala));
  line-height:1.2;
  text-align:left;
  color:var(--cinza);
  background:none;
  border:0;
  cursor:pointer;
}
.botao-feitas::after{
  content:" ⌄";
  font-family:var(--texto);
  font-size:calc(15px * var(--escala));
  vertical-align:middle;
}
.botao-feitas[aria-expanded="true"]::after{ content:" ⌃"; }
.botao-feitas:hover{ color:var(--preto); }

.painel-feitas{ margin-top:14px; }




/* --- o chamado pra planejar a semana --- */

.chamado{
  padding:22px 20px;
  border:1px dashed var(--linha-forte);
  border-radius:var(--curva-cartao);
  margin-bottom:14px;
}
.chamado-texto{
  margin:0;
  font-size:calc(15px * var(--escala));
  color:var(--preto);
}
.chamado-nomes{
  margin:4px 0 0;
  font-size:calc(13.5px * var(--escala));
  color:var(--cinza);
}
.chamado-link{
  display:inline-block;
  margin-top:12px;
  font-size:calc(14px * var(--escala));
  color:var(--preto);
  text-decoration:none;
  border-bottom:1px solid var(--preto);
  padding-bottom:1px;
}
.chamado-link:hover{ border-bottom-width:2px; }


/* --- as rotinas na tela Semana: uma linha cada, num cartão só --- */

.rotinas-semana{ padding-top:18px; }

.semana-bussola{
  margin:0 0 4px;
  font-size:calc(12px * var(--escala));
  color:var(--cinza-claro);
}

.rotina-linha{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  column-gap:16px;
  padding:14px 0;
}
.rotina-quem{ min-width:0; }
.rotina-linha h3{
  margin:0;
  font-size:calc(16.5px * var(--escala));
  font-weight:500;
  letter-spacing:-0.01em;
}
.rotina-de-onde{
  margin:3px 0 0;
  font-size:calc(12.5px * var(--escala));
  color:var(--cinza);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rotina-placar{
  font-size:calc(14px * var(--escala));
  color:var(--cinza);
  white-space:nowrap;
}
.rotina-placar[data-fechou="sim"]{ color:var(--preto); font-weight:500; }

.rotina-recado{
  grid-column:1 / -1;
  margin:8px 0 0;
  font-size:calc(12.5px * var(--escala));
  color:var(--cinza);
}

/* a fita da semana fala a mesma língua da espinha do trimestre */
.fita{
  grid-column:1 / -1;
  display:flex;
  gap:3px;
  align-items:flex-end;
  height:16px;
  margin-top:12px;
}
.fita-quadro{
  flex:1;
  height:8px;
  padding:0;
  border:0;
  border-radius:2px;
  background:var(--papel);
}
.fita-quadro[data-hoje="sim"]{ height:16px; }
.fita-quadro[data-estado="feito"]{ background:var(--preto); }
.fita-quadro[data-estado="parte"]{
  background:linear-gradient(to top,
             var(--preto) var(--parte, 0%),
             var(--linha-forte) var(--parte, 0%));
}
.fita-quadro[data-estado="falta"]{ background:var(--linha-forte); }
.fita-quadro[data-estado="fora"]{ background:var(--papel); }

.fita[data-planejavel="sim"] .fita-quadro{ cursor:pointer; }
.fita[data-planejavel="sim"] .fita-quadro:hover{ outline:1px solid var(--cinza); }


/* --- o holofote da semana --- */

.holofote{ margin-bottom:16px; }
.holofote-campo + .holofote-campo{ margin-top:22px; }
.holofote-campo label{
  display:block;
  margin-bottom:8px;
  font-family:var(--texto);
  font-weight:500;
  letter-spacing:-0.01em;
  font-size:calc(17px * var(--escala));
  line-height:1.3;
}
.holofote .escrita{ font-size:16px; }


/* -----------------------------------------------------------
   7e. A TELA DO MÊS, E OS CADASTROS
   ----------------------------------------------------------- */

.passa-mes{ margin-bottom:16px; }
.passa-mes button{ font-size:calc(14.5px * var(--escala)); padding:10px 18px; }

/* Sem filete nenhum aqui dentro: o cartão já é uma superfície só.
   A linha embaixo do número só aparece quando ela está digitando. */
#resumo-mes .resumo-rotulo{ margin-top:22px; }
#resumo-mes .valor-grande{
  color:var(--branco);
  border-bottom-color:transparent;
  margin-top:2px;
  padding-bottom:2px;
}
#resumo-mes .valor-grande::placeholder{ color:rgba(255,255,255,.35); }
#resumo-mes .valor-grande:focus{ border-bottom-color:rgba(255,255,255,.3); }
#resumo-mes .resumo-venda{
  margin-top:24px;
  padding-top:0;
  border-top:0;
}

/* o objetivo do mês, área por área */
/* Sem filete: o respiro entre as áreas é o que separa uma da outra. */
.objetivo-mes{ padding:18px 0 0; }
.objetivo-mes:first-child{ padding-top:14px; }
.objetivo-mes-area{
  margin:0 0 8px;
  font-family:var(--texto);
  font-weight:500;
  letter-spacing:-0.01em;
  font-size:calc(16px * var(--escala));
  line-height:1.3;
}
.objetivo-mes-lembrete{
  margin:3px 0 8px;
  font-size:calc(12.5px * var(--escala));
  color:var(--cinza);
}

/* quantas de cada oferta */
.meta-oferta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
}
.meta-oferta-quem{ min-width:0; }
.meta-oferta h4{
  margin:0;
  font-size:calc(16px * var(--escala));
  font-weight:500;
  letter-spacing:-0.01em;
}
.meta-oferta-quem p{
  margin:2px 0 0;
  font-size:calc(13px * var(--escala));
  color:var(--cinza);
}

/* os cadastros de oferta e de funil — assentados e abertos */

/* assentado: uma linha só, nome à esquerda, valor à direita */
.cadastro-linha{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:11px 0;
  font:inherit;
  text-align:left;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer;
}
.cadastro-nome{
  font-size:calc(16.5px * var(--escala));
  font-weight:500;
  letter-spacing:-0.01em;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cadastro-nome[data-vazio]{ font-weight:400; color:var(--cinza-claro); }
#lista-areas-cadastro{ margin-top:10px; }
.cadastro-valor{
  font-size:calc(14.5px * var(--escala));
  color:var(--cinza);
  white-space:nowrap;
}
.cadastro-linha:hover .cadastro-nome{ text-decoration:underline; }

/* aberto: o formulário */
.cadastro{
  padding:20px;
  margin:10px 0;
  background:var(--papel);
  border:1px solid var(--preto);
  border-radius:var(--curva-cartao);
}
.cadastro-acoes{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:20px;
}
.cadastro-acoes .remover{ margin-top:0; }
.cadastro .escrita + .escrita{ margin-top:12px; }
.cadastro .chips{ margin-top:14px; }
/* subir e descer a área — a ordem daqui é a de todas as telas */
.cadastro-ordem{ display:flex; gap:8px; margin-top:14px; }
.passo-ordem{
  padding:6px 14px;
  font:inherit;
  font-size:calc(13px * var(--escala));
  color:var(--preto);
  background:var(--branco);
  border:1px solid var(--linha-forte);
  border-radius:var(--curva-pilula);
  cursor:pointer;
}
.passo-ordem:hover:not(:disabled){ border-color:var(--preto); }
.passo-ordem:disabled{ color:var(--linha-forte); border-color:var(--linha); cursor:default; }

/* as áreas arquivadas: guardadas, fora das telas */
.areas-arquivadas{
  margin-top:28px;
}
.areas-arquivadas[hidden]{ display:none; }
.arquivada-linha{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:6px 0;
}
.arquivada-nome{ color:var(--cinza); }
.arquivada-linha .remover{ margin-top:0; }
.remover:disabled{ color:var(--linha-forte); cursor:default; }
.adicionar[hidden]{ display:none; }

.cadastro-nota{
  margin:12px 0 0;
  font-size:calc(13px * var(--escala));
  color:var(--cinza);
}
.valor-oferta{
  display:block;
  margin-top:14px;
  width:12ch;
  font:inherit;
  font-size:calc(19px * var(--escala));
  color:var(--preto);
  padding:4px 0 7px;
}
.valor-oferta::placeholder{ color:var(--cinza-claro); }

/* os funis escolhidos na semana */
.holofote-rotulo{
  margin:0 0 10px;
  font-family:var(--texto);
  font-weight:500;
  letter-spacing:-0.01em;
  font-size:calc(17px * var(--escala));
  line-height:1.3;
}
.holofote-vazio{
  margin:0;
  font-size:calc(14.5px * var(--escala));
  color:var(--cinza);
}
/* planejado × aplicado: cada funil escolhido ganha um check */
.funis-aplicados .mini-rotulo{ margin-top:18px; }
.funil-linha{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 0;
}
.funil-nome{ font-size:calc(15px * var(--escala)); color:var(--preto); }
.funil-canal{ color:var(--cinza); }
.funil-linha[data-feito="sim"] .funil-nome{ color:var(--cinza); }

.funis-frase{
  margin:12px 0 0;
  font-size:calc(13.5px * var(--escala));
  color:var(--cinza);
  line-height:1.6;
}


/* --- a dica embaixo dos botões de escolha --- */

.dica-escolha{
  margin:10px 0 0;
  font-size:calc(13px * var(--escala));
  line-height:1.5;
  color:var(--cinza);
  max-width:46ch;
}
.dica-escolha[hidden]{ display:none; }


/* --- a tela Semana --- */

.passa-semana{
  display:flex;
  gap:8px;
  margin:0 0 16px;
}
.passa-semana button{
  width:42px; height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--curva-item);
  cursor:pointer;
}
.passa-semana svg{
  width:20px; height:20px;
  fill:none;
  stroke:var(--carvao);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.passa-semana button:hover:not(:disabled){ border-color:var(--cinza); }
.passa-semana button:disabled{ opacity:.35; cursor:default; }

.placar{
  margin:14px 0 8px;
  font-size:calc(15px * var(--escala));
  color:var(--carvao);
}
.placar[data-fechou="sim"]{
  font-weight:500;
  color:var(--preto);
}

/* os sete dias */
.fita{
  display:flex;
  gap:5px;
  margin-top:14px;
}
.fita-dia{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.fita-letra{
  font-size:calc(11px * var(--escala));
  color:var(--cinza-claro);
  line-height:1;
}
.fita-dia[data-hoje="sim"] .fita-letra{
  color:var(--preto);
  font-weight:500;
}
.fita-quadro{
  width:100%;
  height:26px;
  border-radius:6px;
  padding:0;
  border:0;
  background:transparent;
}
/* nas rotinas sem dia certo o quadrado é botão: dá pra tocar */
.fita[data-planejavel="sim"] .fita-quadro{ cursor:pointer; }
.fita[data-planejavel="sim"] .fita-quadro:hover{ box-shadow:inset 0 0 0 1px var(--cinza); }

.fita-recado{
  margin:14px 0 0;
  font-size:calc(13px * var(--escala));
  line-height:1.5;
  color:var(--cinza);
}
/* cumprido: preto cheio */
.fita-quadro[data-estado="feito"]{ background:var(--preto); }
/* feito pela metade: enche pela metade, de baixo pra cima */
.fita-quadro[data-estado="parte"]{
  box-shadow:inset 0 0 0 1px var(--linha-forte);
  background:linear-gradient(to top,
             var(--preto) var(--parte, 0%),
             transparent  var(--parte, 0%));
}
/* era esperado e não saiu: só o contorno */
.fita-quadro[data-estado="falta"]{ box-shadow:inset 0 0 0 1px var(--linha-forte); }
/* não era dia dessa rotina: quase nada */
.fita-quadro[data-estado="fora"]{ background:var(--papel); }


/* --- o atalho dos estados vazios --- */

.atalho{
  display:inline-block;
  margin-top:16px;
  padding:9px 16px;
  font-size:calc(14px * var(--escala));
  text-decoration:none;
  color:var(--preto);
  border:1px solid var(--preto);
  border-radius:var(--curva-pilula);
}
.atalho:hover{ background:var(--preto); color:var(--branco); }


/* -----------------------------------------------------------
   8. A NAVEGAÇÃO
   Nos dois tamanhos ela FLUTUA: recuada das bordas, cantos
   arredondados, filete e uma sombra leve. Não é moldura do
   navegador — é um objeto pousado sobre a superfície.
   Celular: barra embaixo. Computador: cartão na esquerda.
   ----------------------------------------------------------- */

.nav-app{
  position:fixed;
  left:var(--recuo);
  right:var(--recuo);
  bottom:calc(var(--recuo) + env(safe-area-inset-bottom));
  z-index:9;
  display:flex;
  gap:2px;
  padding:5px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--curva-menu);
  box-shadow:var(--sombra-flutua);
}
.nav-app a{
  position:relative;
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:calc(var(--nav-altura) - 10px);
  border-radius:var(--curva-item);
  text-decoration:none;
  color:var(--cinza-claro);
  transition:color .16s ease, background-color .16s ease;
}
.nav-app svg{
  width:23px; height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
.nav-app svg .cheio{ fill:currentColor; stroke:none; }
/* No celular fica só o ícone. O nome da tela continua no código,
   invisível na tela mas legível por leitor de tela — quem navega
   sem enxergar precisa saber o que é cada botão. */
.nav-app span{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* o item selecionado vira uma pastilha grafite */
.nav-app a.ativo{
  background:var(--grafite);
  color:var(--branco);
}
.nav-app a:not(.ativo):active{ background:var(--papel); }


/* -----------------------------------------------------------
   9. NO COMPUTADOR
   ----------------------------------------------------------- */

@media (min-width:900px){

  :root{ --escala: 1; }

  body{
    padding-bottom:0;
    padding-left:calc(var(--barra-largura) + var(--recuo-pc) * 2);
    font-size:16px;
  }

  /* a coluna da esquerda vira um cartão branco flutuando,
     recuado das quatro bordas da janela */
  .barra{
    position:fixed;
    top:var(--recuo-pc);
    left:var(--recuo-pc);
    bottom:var(--recuo-pc);
    width:var(--barra-largura);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:26px 16px 22px;
    background:var(--branco);
    border:1px solid var(--linha);
    border-radius:var(--curva-cartao);
    box-shadow:var(--sombra-flutua);
    overflow-y:auto;
  }
  .marca-nome{ font-size:32px; }
  .marca-periodo{
    text-align:left;
    margin-left:0;
    margin-top:10px;
    font-size:12.5px;
  }

  .nav-app{
    position:static;
    display:block;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:0;
    margin-top:30px;
  }
  .nav-app a{
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    gap:11px;
    height:auto;
    padding:11px 13px;
    margin-bottom:3px;
    border-radius:var(--curva-item);
    color:var(--cinza);
  }
  .nav-app span{
    position:static;
    width:auto; height:auto;
    margin:0;
    overflow:visible;
    clip:auto;
    clip-path:none;
    font-size:14.5px;
  }
  .nav-app a:hover{ color:var(--preto); background:var(--papel); }
  .nav-app a.ativo,
  .nav-app a.ativo:hover{
    color:var(--branco);
    background:var(--grafite);
  }

  /* no computador, os Cadastros descem para o pé da coluna, logo
     acima do filete das datas — longe das telas de todo dia */
  .ir-cadastros{
    order:1;
    justify-content:flex-start;
    gap:11px;
    width:auto; height:auto;
    margin:auto 0 12px;
    padding:11px 13px;
    border:0;
    border-radius:var(--curva-item);
    background:transparent;
    color:var(--cinza);
  }
  .ir-cadastros svg{ width:23px; height:23px; }
  .ir-cadastros span{
    position:static;
    width:auto; height:auto;
    margin:0;
    overflow:visible;
    clip:auto;
    clip-path:none;
    font-size:14.5px;
  }
  .ir-cadastros:hover{ color:var(--preto); background:var(--papel); }
  .ir-cadastros.ativo,
  .ir-cadastros.ativo:hover{
    color:var(--branco);
    background:var(--grafite);
  }

  .barra-rodape{
    order:2;
    display:block;
    margin:0;
    padding-top:24px;
    border-top:1px solid var(--linha);
    font-size:12px;
    line-height:1.5;
    color:var(--cinza-claro);
  }

  /* o conteúdo */
  /* a espinha começa na mesma altura do topo da barra lateral */
  .espinha{
    padding:26px 40px 18px;
    border-bottom:1px solid var(--linha);
  }
  /* a mesma largura útil do conteúdo: .tela tem max 1120 menos os
     40 de recuo de cada lado. Sem isto, a barra para antes dos cartões. */
  .espinha-tracos{ gap:4px; height:22px; max-width:1040px; }
  .espinha-tracos span{ height:11px; }
  .espinha-tracos span.agora{ height:22px; }
  .espinha-texto{ margin-top:11px; max-width:1040px; font-size:13px; }

  /* os cartões em duas colunas — o bento das suas referências */
  .tela{
    padding:0 40px 70px;
    max-width:1120px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
    align-content:start;
    align-items:start;
  }
  .cabecalho-tela,
  .tela > .cartao-largo{ grid-column:1 / -1; }
  .tela > .cartao{ margin:0; max-width:none; }

  .cabecalho-tela{ padding:46px 0 30px; }
  .cabecalho-tela h2{ font-size:68px; }
  .cabecalho-data{ font-size:14px; }
  .linha-fina{ font-size:17px; max-width:46ch; }

  .cartao{ padding:26px 26px; }
  .cartao h3{ font-size:19px; }
  .area-topo{ padding:17px 0; }
  .area-topo .nome{ font-size:18px; }
  .area-painel{ padding-left:2px; max-width:600px; }
  .degrau-rotulo{ font-size:16px; }
  .valor-grande{ font-size:52px; }
  .mes label{ font-size:16px; }

  /* No computador, um recado curto cabe numa linha só —
     e é assim que ele deve ficar. Quebrar em duas dá
     aparência de texto espremido. */
  .linha-fina{ max-width:66ch; }
  .meta .cartao-apoio,
  .mini-nota{ max-width:none; }

  /* Hoje e Semana ocupam a grade de duas colunas; o resumo da
     semana atravessa as duas, porque é o contexto de tudo. */
  .corpo{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
    align-items:start;
    grid-column:1 / -1;
  }
  .corpo > .cartao{ margin:0; max-width:none; }
  /* tudo que é faixa atravessa as duas colunas — senão um botão
     solto vai parar no meio da tela */
  .corpo > .resumo,
  .corpo > .chamado,
  .corpo > .painel-rotinas,
  .corpo > .botao-feitas,
  .corpo > .abrir-tarefa,
  .corpo > .cartao{ grid-column:1 / -1; }
  .resumo-numero{ font-size:64px; }
  .resumo-par{ gap:40px; max-width:520px; }
  /* o texto das linhas tem que começar na mesma coluna do texto
     do cartão preto e do chamado — senão a tela fica em degraus */
  .botao-feitas{ font-size:24px; }
  .chamado{ padding:26px; }
  .nova-tarefa{ padding:26px; }
  .botao-nova{ padding:17px 26px; }
  .bloco-cabecalho h2{ font-size:36px; }
  .corpo > .bloco-tarefas{ grid-column:1 / -1; }
  .resumo-venda-valor{ font-size:36px; }
  .holofote-campo label,
  .holofote-rotulo{ font-size:19px; }
  .objetivo-mes-area{ font-size:17px; }
  .passa-mes button{ font-size:15px; }
  .venda-numero{ font-size:60px; }
  .passa-semana{ grid-column:1 / -1; }
  .rotina-linha{
    grid-template-columns:1fr auto;
    padding:18px 0;
  }
  .rotina-linha h3{ font-size:18px; }
  .agenda-linha{ grid-template-columns:86px 1fr; padding:13px 0; }
  .agenda-nome, .agenda-numero{ font-size:14px; }
  .tarefa-texto{ font-size:16px; }
}


/* quem pediu menos movimento, recebe menos movimento */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}


/* -----------------------------------------------------------
   11. REGISTRAR VENDA (Fase 4)
   O único preto sólido fora dos cartões-assinatura: é a ação
   mais importante do app, e fica sempre à mão.
   ----------------------------------------------------------- */

.botao-venda{
  position:fixed;
  right:var(--recuo);
  bottom:calc(var(--nav-altura) + var(--recuo) * 2 + env(safe-area-inset-bottom));
  z-index:9;
  display:flex;
  align-items:center;
  gap:8px;
  height:48px;
  padding:0 20px 0 16px;
  font:inherit;
  font-size:calc(14.5px * var(--escala));
  font-weight:500;
  color:var(--branco);
  background:var(--preto);
  border:0;
  border-radius:var(--curva-pilula);
  box-shadow:var(--sombra-flutua);
  cursor:pointer;
}
.botao-venda svg{
  width:18px; height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}
.botao-venda:active{ transform:scale(.97); }

/* --- a folha: sobe de baixo no celular --- */
.folha{
  position:fixed;
  inset:auto 0 0 0;
  width:100%;
  max-width:100%;
  max-height:92vh;
  margin:0;
  padding:0;
  color:var(--preto);
  background:var(--branco);
  border:0;
  border-radius:22px 22px 0 0;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.folha::backdrop{ background:rgba(0,0,0,.36); }
.folha[open]{ animation:folha-sobe .24s cubic-bezier(.2,.8,.2,1); }
@keyframes folha-sobe{
  from{ transform:translateY(24px); opacity:0; }
  to{ transform:none; opacity:1; }
}
.folha-corpo{
  padding:22px var(--margem) calc(24px + env(safe-area-inset-bottom));
}
.folha-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:4px;
}
.folha-topo h2{
  font-family:var(--display);
  font-weight:var(--display-peso);
  letter-spacing:var(--display-espaco);
  font-size:calc(32px * var(--escala));
  line-height:1;
}
.folha-fechar{
  flex-shrink:0;
  width:40px; height:40px;
  padding:0;
  background:var(--papel);
  border:0;
  border-radius:50%;
  cursor:pointer;
}
.folha-fechar svg{
  display:block;
  width:18px; height:18px;
  margin:auto;
  fill:none;
  stroke:var(--carvao);
  stroke-width:1.6;
  stroke-linecap:round;
}
.folha .escrita{ margin-top:14px; }
.folha .cadastro-nota a{ color:var(--preto); }

/* o valor é o centro da folha */
.venda-valor{ margin-top:6px; }
.venda-numero{
  display:block;
  width:100%;
  font-family:var(--display);
  font-weight:var(--display-peso);
  letter-spacing:var(--display-espaco);
  font-size:calc(48px * var(--escala));
  line-height:1.1;
  color:var(--preto);
  padding:2px 0 8px;
}
.venda-numero::placeholder{ color:var(--linha-forte); }

.venda-plano{
  margin:14px 0 0;
  font-size:calc(13.5px * var(--escala));
  color:var(--carvao);
}
.venda-plano:empty{ display:none; }

.folha-acoes{ margin-top:26px; }
.botao-registrar{
  width:100%;
  height:52px;
  font:inherit;
  font-size:calc(15px * var(--escala));
  font-weight:500;
  color:var(--branco);
  background:var(--preto);
  border:0;
  border-radius:var(--curva-pilula);
  cursor:pointer;
}
.botao-registrar:disabled{
  color:var(--cinza-claro);
  background:var(--papel);
  cursor:default;
}

/* --- o aviso depois de registrar --- */
.aviso-venda{
  position:fixed;
  left:var(--recuo);
  right:var(--recuo);
  bottom:calc(var(--nav-altura) + var(--recuo) * 2 + 60px + env(safe-area-inset-bottom));
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 18px;
  font-size:calc(14px * var(--escala));
  color:var(--branco);
  background:var(--grafite);
  border-radius:var(--curva-cartao);
  box-shadow:var(--sombra-flutua);
}
.aviso-venda[hidden]{ display:none; }
.aviso-venda button{
  padding:4px 0;
  font:inherit;
  font-size:calc(14px * var(--escala));
  color:var(--branco);
  background:none;
  border:0;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

/* --- o que já saiu, em cada oferta --- */
.meta-oferta-saiu{
  margin:3px 0 0 !important;
  font-size:calc(12.5px * var(--escala));
  color:var(--preto) !important;
}

/* --- as vendas do mês --- */
.venda-linha{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
}
.venda-quem{ flex:1; min-width:0; }
.venda-quem h4{
  margin:0;
  font-size:calc(16px * var(--escala));
  font-weight:500;
  letter-spacing:-0.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.venda-quem p{ margin:2px 0 0; font-size:calc(12.5px * var(--escala)); color:var(--cinza); }
.venda-lado{ text-align:right; white-space:nowrap; }
.venda-quanto{ display:block; font-size:calc(15px * var(--escala)); }
.venda-tipo{ display:block; font-size:calc(12px * var(--escala)); color:var(--cinza); }
.venda-linha .tarefa-apagar[data-armado]{
  width:auto;
  padding:0 10px;
  font:inherit;
  font-size:calc(12.5px * var(--escala));
  font-weight:500;
  color:var(--preto);
  border-radius:var(--curva-pilula);
  background:var(--papel);
}

@media (min-width:900px){
  /* no computador o botão mora na coluna, logo abaixo do menu */
  .botao-venda{
    position:static;
    order:0;
    justify-content:center;
    width:100%;
    margin-top:18px;
    box-shadow:none;
  }
  .botao-venda:hover{ background:var(--grafite); }

  .folha{
    inset:0;
    width:min(520px, calc(100% - 48px));
    max-height:86vh;
    margin:auto;
    border-radius:var(--curva-cartao);
  }
  .folha-corpo{ padding:28px 30px 30px; }
  .folha-topo h2{ font-size:38px; }

  .aviso-venda{
    left:auto;
    right:32px;
    bottom:32px;
    width:360px;
  }
  .resumo-tres-valor{ font-size:30px; }
}

@media (prefers-reduced-motion:reduce){
  .folha[open]{ animation:none; }
  .botao-venda:active{ transform:none; }
}


/* -----------------------------------------------------------
   7g. O DEBRIEFING
   Ele fala em frases. O cartão preto dá o número e a manchete;
   os brancos contam rotina por rotina. Nada aqui é campo de
   preencher, a não ser o texto livre do fim.
   ----------------------------------------------------------- */

.debrief-recortes{ margin-bottom:16px; }
.debrief-passo .passa-semana{ margin:0 0 16px; }
.debrief-escolha{ margin:0 0 16px; }
.debrief-escolha button{
  font-size:calc(13.5px * var(--escala));
  padding:8px 14px;
  min-height:36px;
}

/* o número grande e a manchete, no cartão preto */
.debrief-numero{ margin-top:18px; }
.debrief-numero .resumo-rotulo{ margin-top:6px; }
.debrief-manchete{
  margin:18px 0 0;
  font-size:calc(16px * var(--escala));
  line-height:1.5;
  color:var(--branco);
  max-width:46ch;
}
.cartao-preto .resumo-nota{ margin-top:10px; }

/* a frase que explica cada rotina, embaixo do nome */
.debrief-frase{
  grid-column:1 / -1;
  margin:6px 0 0;
  font-size:calc(13.5px * var(--escala));
  line-height:1.45;
  color:var(--carvao);
}
/* o que ela mesma escreveu — devolvido com as palavras dela */
.debrief-citacao{
  margin:0;
  font-size:calc(16px * var(--escala));
  line-height:1.45;
  color:var(--preto);
}
.debrief-pergunta{ margin-top:18px; }
.debrief-grupo{ margin-top:24px; }
.cartao h3 + .debrief-grupo{ margin-top:10px; }

/* a fita das semanas: a espinha do trimestre, rotina por rotina */
.fita-longa{ gap:2px; height:14px; margin-top:10px; }
.fita-longa .fita-quadro{ height:7px; }
.fita-longa .fita-quadro[data-hoje="sim"]{ height:14px; }
.fita-quadro[data-estado="futuro"]{ background:var(--papel); }
/* semana que não era dela: nem preta nem cobrada — igual à espinha */
.fita-quadro[data-estado="antes"]{
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--linha);
}

/* o trimestre, área por área */
.debrief-area .debrief-objetivo{ padding-top:20px; }
.debrief-area h3 + .debrief-objetivo{ padding-top:6px; }
.debrief-objetivo-texto{
  margin:0;
  font-weight:500;
  letter-spacing:-0.01em;
  font-size:calc(16px * var(--escala));
  line-height:1.35;
}
.debrief-resultado{
  margin:3px 0 0;
  font-size:calc(13.5px * var(--escala));
  color:var(--cinza);
}
.debrief-veredito{
  margin:10px 0 2px;
  font-size:calc(14px * var(--escala));
  color:var(--carvao);
}
.debrief-area-mes .debrief-citacao{ margin-bottom:2px; }
.debrief-nota .escrita{ margin-top:10px; }

@media (min-width:900px){
  .debrief-recortes{ grid-column:1 / -1; }
  .debrief{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
    align-items:start;
    grid-column:1 / -1;
  }
  .debrief > .cartao{ margin:0; }
  .debrief > .cartao-largo,
  .debrief > .debrief-passo,
  .debrief > .debrief-escolha{ grid-column:1 / -1; }
  .debrief-passo .passa-semana,
  .debrief-escolha{ margin:0; }
  .debrief-manchete{ font-size:18px; max-width:60ch; }
  .debrief-objetivo-texto{ font-size:17px; }
  .debrief-frase{ font-size:14px; }
}

/* as setas do debriefing: da cor do fundo, sem caixa — não
   disputam atenção com o que a semana tem a dizer */
.debrief-passo .passa-semana button{
  background:transparent;
  border-color:transparent;
}
.debrief-passo .passa-semana button:hover:not(:disabled){
  background:var(--linha);
  border-color:transparent;
}

/* "No começo da semana, você disse" · "E agora, olhando pra trás" */
.debrief-sub{
  margin:14px 0 0;
  font-weight:500;
  letter-spacing:-0.01em;
  font-size:calc(15px * var(--escala));
  color:var(--preto);
}
.debrief-sub-agora{ margin-top:28px; margin-bottom:4px; }
.debrief-nota .mini-rotulo{ margin-top:14px; margin-bottom:4px; }

/* para a próxima semana: os ajustes, numerados, do mais urgente */
.debrief-ajustes-lista{
  list-style:none;
  counter-reset:ajuste;
  margin:6px 0 0;
  padding:0;
}
.debrief-ajustes-lista li{
  counter-increment:ajuste;
  display:grid;
  grid-template-columns:26px 1fr;
  column-gap:6px;
  padding-top:18px;
}
.debrief-ajustes-lista li::before{
  content:counter(ajuste);
  grid-row:1 / span 2;
  font-size:calc(14px * var(--escala));
  font-weight:500;
  color:var(--cinza-claro);
  line-height:1.4;
}
.debrief-ajustes-lista h4{
  margin:0;
  font-weight:500;
  letter-spacing:-0.01em;
  font-size:calc(16px * var(--escala));
  line-height:1.4;
}
.debrief-ajustes-lista p{
  margin:3px 0 0;
  font-size:calc(14px * var(--escala));
  line-height:1.5;
  color:var(--carvao);
  max-width:68ch;
}
.debrief-manter{
  margin:24px 0 0;
  font-size:calc(14px * var(--escala));
  line-height:1.5;
  color:var(--carvao);
}
.debrief-manter strong{ font-weight:500; color:var(--preto); }

@media (min-width:900px){
  .debrief-ajustes-lista h4{ font-size:17px; }
  .debrief-ajustes-lista p,
  .debrief-manter{ font-size:15px; }
  .debrief-sub{ font-size:16px; }
}

/* a frase de abertura dos ajustes cabe numa linha no computador */
@media (min-width:900px){ .debrief-ajustes .cartao-apoio{ max-width:none; } }

/* os ajustes que o app FAZ: um botão, e depois "feito · desfazer" */
.debrief-acoes{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  margin-top:12px;
}
.debrief-acoes:empty{ display:none; }
.debrief-acao{
  font:inherit;
  font-size:calc(14px * var(--escala));
  line-height:1;
  padding:10px 16px;
  min-height:38px;
  border-radius:var(--curva-pilula);
  border:1px solid var(--linha-forte);
  background:transparent;
  color:var(--preto);
  cursor:pointer;
  transition:background-color .14s ease, border-color .14s ease;
}
.debrief-acao:hover{ border-color:var(--cinza); }
.debrief-acao-principal{
  background:var(--preto);
  border-color:var(--preto);
  color:var(--branco);
}
.debrief-acao-principal:hover{ background:var(--grafite); border-color:var(--grafite); }
.debrief-ajustes-lista .debrief-feito{
  margin:0;
  font-size:calc(14px * var(--escala));
  font-weight:500;
  color:var(--preto);
}
.debrief-desfazer{
  padding:0;
  font:inherit;
  font-size:calc(13.5px * var(--escala));
  color:var(--cinza);
  background:none;
  border:0;
  border-bottom:1px solid var(--linha-forte);
  cursor:pointer;
}
.debrief-desfazer:hover{ color:var(--preto); border-bottom-color:var(--preto); }

/* No computador o cartão largo tem espaço: o texto de apoio não
   precisa quebrar linha antes da hora. */
@media (min-width:900px){
  .cartao-largo > .cartao-apoio{ max-width:100ch; }
  .debrief-acao{ font-size:14px; }
}

/* os botões e o "feito" alinham com o texto do ajuste, não com o número */
.debrief-ajustes-lista .debrief-acoes{ grid-column:2; }

/* a porcentagem da meta, embaixo de cada um dos três números */
.resumo-tres-pct{
  margin:4px 0 0;
  font-size:calc(12.5px * var(--escala));
  line-height:1.3;
  color:rgba(255,255,255,.62);
}
.meta-legenda[hidden]{ display:none; }
@media (min-width:900px){ .resumo-tres-pct{ font-size:13px; } }

/* os destaques de venda: três cartões pretos pequenos, logo abaixo
   do placar — o funil campeão, o que mais vendeu, o ticket médio */
.debrief-destaques{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:0 0 14px;
}
.debrief-destaque{
  background:var(--preto);
  color:var(--branco);
  border-radius:var(--curva-cartao);
  padding:16px 18px 17px;
}
.debrief-destaque-rotulo{
  margin:0 0 6px;
  font-size:calc(12.5px * var(--escala));
  color:rgba(255,255,255,.62);
}
.debrief-destaque-nome{
  margin:0;
  font-weight:500;
  letter-spacing:-0.01em;
  font-size:calc(18px * var(--escala));
  line-height:1.25;
}
.debrief-destaque-linha{
  margin:4px 0 0;
  font-size:calc(13px * var(--escala));
  line-height:1.4;
  color:rgba(255,255,255,.78);
}
.debrief-destaque-extra{
  margin:6px 0 0;
  font-size:calc(12.5px * var(--escala));
  line-height:1.4;
  color:rgba(255,255,255,.52);
}
@media (min-width:900px){
  .debrief > .debrief-destaques{
    grid-column:1 / -1;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
    margin:0;
  }
  .debrief-destaque{ padding:20px 22px 22px; }
  .debrief-destaque-nome{ font-size:20px; }
  .debrief-destaque-linha{ font-size:14px; }
  .debrief-destaque-extra{ font-size:13px; }
}

/* -----------------------------------------------------------
   7h. O BOM DIA, AS PÍLULAS E OS SÍMBOLOS DAS ÁREAS
   ----------------------------------------------------------- */

/* "Bom dia," em cinza, o nome em preto */
.saudacao-oi{ color:var(--cinza-claro); }

/* os símbolos: o mesmo traço do menu */
.icone-area{
  width:100%; height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* as pílulas: uma por área, enchem de baixo pra cima */
.pilulas{
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.pilula-coluna{
  flex:1;
  min-width:0;
  max-width:112px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.pilula-icone{
  width:20px; height:20px;
  color:rgba(255,255,255,.72);
}
.pilula{
  position:relative;
  width:100%;
  height:112px;
  border-radius:var(--curva-pilula);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  overflow:hidden;
}
.pilula-cheia{
  position:absolute;
  left:0; right:0; bottom:0;
  background:var(--branco);
  transition:height .3s ease;
}
.pilula-numero{
  position:absolute;
  left:0; right:0; bottom:12px;
  text-align:center;
  font-size:calc(13px * var(--escala));
  font-weight:500;
  color:var(--branco);
}
/* com a pílula cheia até o número, ele fica preto sobre o branco */
.pilula-numero.no-cheio{ color:var(--preto); }
.cadastro-linha .cadastro-nome{ flex:1; }

/* nos Cadastros: o símbolo ao lado do nome da área... */
.cadastro-icone{
  width:18px; height:18px;
  flex-shrink:0;
  margin-right:-4px;
  color:var(--carvao);
  align-self:center;
}
/* ...e a grade para escolher */
.escolha-icone{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(42px, 1fr));
  gap:6px;
  max-width:420px;
}
.escolha-icone button{
  height:42px;
  padding:10px;
  background:transparent;
  color:var(--carvao);
  border:1px solid var(--linha);
  border-radius:var(--curva-item);
  cursor:pointer;
  transition:background-color .14s ease, color .14s ease, border-color .14s ease;
}
.escolha-icone button:hover{ border-color:var(--cinza); }
.escolha-icone button[aria-pressed="true"]{
  background:var(--grafite);
  border-color:var(--grafite);
  color:var(--branco);
}

@media (min-width:900px){
  .pilula-icone{ width:22px; height:22px; }
}

/* "Bom dia, Natália" — na letra do texto, em negrito, como no app
   do Código Imparável. ⚠️ Exceção pedida por ela (30/set) à regra
   "título de tela em serifa": a saudação é conversa, não título. */
#saudacao-hoje{
  font-family:var(--texto);
  font-weight:600;
  letter-spacing:-0.025em;
  font-size:calc(32px * var(--escala));
  line-height:1.1;
}
@media (min-width:900px){ #saudacao-hoje{ font-size:40px; } }


/* --- o resumo do Hoje: as pílulas e, embaixo (celular) ou ao lado
       (computador), os dois cartões pretos --- */
.resumo-separado{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.resumo-separado > .cartao{ margin:0; }

/* execuções e venda, lado a lado */
.resumo-dupla{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
.resumo-mini{ padding:18px 16px; margin:0; }
.resumo-mini .resumo-rotulo{ margin:0 0 6px; }
.resumo-mini-numero{
  margin:0;
  font-family:var(--display);
  font-weight:var(--display-peso);
  letter-spacing:var(--display-espaco);
  font-size:clamp(24px, 7.4vw, 34px);
  line-height:1.05;
  white-space:nowrap;
}
.resumo-mini-legenda{
  margin:6px 0 0;
  font-size:calc(13px * var(--escala));
  color:rgba(255,255,255,.78);
}
.resumo-mini .barra-fina{ margin-top:12px; }
.resumo-mini-contexto{
  margin:4px 0 0;
  font-size:calc(12.5px * var(--escala));
  line-height:1.4;
  color:rgba(255,255,255,.55);
}
.resumo-mini-legenda + .resumo-mini-contexto{ margin-top:12px; }

@media (min-width:900px){
  .resumo-separado{ gap:16px; margin-bottom:0; }
  .resumo-dupla{ gap:16px; }
  .resumo-mini{ padding:24px 26px; }
  .resumo-mini-numero{ font-size:44px; }
  .resumo-mini-legenda{ font-size:14px; }
  .resumo-mini-contexto{ font-size:13.5px; }
}

/* as duas da fileira com a mesma altura (a regra de "último cartão"
   deixava uma margem embaixo da segunda) */
.resumo-dupla > .resumo-mini{ margin:0; }
.resumo-mini .barra-fina + .resumo-mini-contexto{ margin-top:12px; }

/* as pílulas soltas no fundo — sem caixa, sem título, sem frase
   (escolha dela em 30/set: o resumo limpo, só as imagens) */
.resumo-separado > .pilulas{
  padding:4px 0 10px;
}
.resumo-separado .pilula-icone{ color:var(--carvao); }
.resumo-separado .pilula{ box-shadow:inset 0 0 0 1px var(--linha-forte); }
.resumo-separado .pilula-cheia{ background:var(--preto); }
.resumo-separado .pilula-numero{ color:var(--preto); }
.resumo-separado .pilula-numero.no-cheio{ color:var(--branco); }
@media (min-width:900px){
}

/* NO COMPUTADOR, o resumo do Hoje vira uma faixa só (escolha dela,
   30/set): as pílulas à esquerda, dentro de um contorno bem clarinho,
   e os dois cartões pretos à direita. Quem manda na altura da faixa
   são os cartões pretos — as pílulas se ajustam a ela. No celular
   nada disso vale: as pílulas ficam soltas, em cima dos cartões. */
@media (min-width:900px){
  .resumo-separado{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:16px;
    align-items:stretch;
  }
  .resumo-separado > .pilulas{
    padding:18px 22px 20px;
    gap:12px;
    justify-content:space-between;
    border:1px solid var(--linha);
    border-radius:var(--curva-cartao);
  }
  .resumo-separado .pilula-coluna{ max-width:none; min-height:0; }
  .resumo-separado .pilula{ height:auto; flex:1; min-height:0; }
}

/* -----------------------------------------------------------
   7i. A LISTA DO DIA, ENXUTA (30/set)
   Com 20 coisas no dia, a área em cima do nome dobrava a altura
   de cada linha. Agora é uma linha só: o nome, a etiqueta da área
   com o símbolo dela (o mesmo das pílulas) e, miúdo, o detalhe.
   ----------------------------------------------------------- */

.linha-item{ padding:11px 14px 11px 18px; gap:12px; }
.linha-tarefa{ padding-right:10px; }
.linha-texto{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:10px;
  row-gap:4px;
}
.linha-item h3{
  font-size:calc(16px * var(--escala));
  line-height:1.35;
}
.linha-contexto{
  margin:0;
  font-size:calc(12.5px * var(--escala));
  white-space:nowrap;
}
/* o atraso continua sendo o único vermelho do app */
.linha-contexto[data-atrasada]{ color:var(--atraso); font-weight:500; }

/* a etiqueta da área */
.tag-area{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px 3px 7px;
  font:inherit;
  font-size:calc(12px * var(--escala));
  line-height:1.3;
  color:var(--carvao);
  background:transparent;
  border:1px solid var(--linha);
  border-radius:var(--curva-pilula);
  white-space:nowrap;
}
.tag-area[data-vazia]{ padding-left:9px; color:var(--cinza); border-style:dashed; }
button.tag-area{ cursor:pointer; }
button.tag-area:hover{ border-color:var(--cinza); color:var(--preto); }
.tag-area-icone{ display:inline-flex; width:13px; height:13px; }

/* a troca de área da tarefa ocupa a linha de baixo inteira */
.linha-texto .chips-area{ flex-basis:100%; margin-top:6px; }

@media (min-width:900px){
  .linha-item{ padding:13px 18px 13px 24px; }
  .linha-item h3{ font-size:16px; }
  .tag-area{ font-size:12.5px; }
  .linha-contexto{ font-size:13px; }
}


/* -----------------------------------------------------------
   A PORTA — entrar, criar conta, trocar a senha
   Enquanto ela não entrou, só a porta aparece. Mesmo desenho
   do app: cartão branco com filete, campo sem caixa (só a
   linha fina), botão preto em pílula. Sem cor nenhuma.
   ----------------------------------------------------------- */

body:not(.com-conta){ padding:0; }
body:not(.com-conta) > .barra,
body:not(.com-conta) > main,
body:not(.com-conta) > .aviso-venda,
body:not(.com-conta) > .aviso-nuvem{ display:none; }
.entrada[hidden]{ display:none; }

.entrada{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px calc(28px + env(safe-area-inset-bottom));
}
.entrada-caixa{
  width:100%;
  max-width:420px;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--curva-cartao);
  padding:34px 26px 28px;
}
.entrada-marca{
  margin:0;
  font-family:var(--display);
  font-weight:var(--display-peso);
  letter-spacing:var(--display-espaco);
  font-size:calc(46px * var(--escala));
  line-height:1;
}
.entrada-assinatura{
  margin:6px 0 34px;
  color:var(--cinza);
  font-size:calc(13px * var(--escala));
  letter-spacing:.02em;
}
.entrada-miolo h2{
  font-family:var(--texto);
  font-weight:500;
  font-size:calc(19px * var(--escala));
  line-height:1.3;
  margin:0 0 6px;
}
.entrada-apoio{
  margin:0 0 6px;
  color:var(--carvao);
  font-size:calc(14.5px * var(--escala));
}
.entrada-campo{
  display:block;
  margin-top:20px;
}
.entrada-campo span{
  display:block;
  font-size:calc(13px * var(--escala));
  color:var(--cinza);
}
.entrada-campo input{
  display:block;
  width:100%;
  font:inherit;
  font-size:16px;            /* abaixo disso o iPhone dá zoom */
  color:var(--preto);
  padding:6px 0 8px;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--linha-forte);
  border-radius:0;
  transition:border-color .16s ease;
}
.entrada-campo input:focus{ outline:none; border-bottom-color:var(--preto); }

.entrada-recado{
  margin:16px 0 0;
  min-height:0;
  font-size:calc(14px * var(--escala));
  color:var(--preto);
  font-weight:500;
}
.entrada-recado:empty{ display:none; }
.entrada-recado[data-tom="ok"]{ font-weight:400; color:var(--carvao); }

.entrada-miolo form .botao-registrar{ margin-top:24px; }
.entrada-miolo [data-tentar]{ margin-top:22px; }

.entrada-links{
  margin:18px 0 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.entrada-links button{
  font:inherit;
  font-size:calc(14px * var(--escala));
  color:var(--cinza);
  background:none;
  border:0;
  padding:6px 0;
  cursor:pointer;
  text-align:left;
}
.entrada-links button strong{ color:var(--preto); font-weight:500; }
.entrada-links button:hover{ color:var(--preto); }

.entrada-abrindo{
  margin:0;
  color:var(--cinza);
  font-size:calc(14.5px * var(--escala));
}

/* a saída, nos Cadastros: discreta, mas sem o tracejado de "acrescentar" */
.sair-conta{ border-style:solid; }


/* o aviso da conta — sem internet, ou acesso encerrado.
   Preto, como os outros avisos; o vermelho é só do atraso. */
.aviso-nuvem{
  position:fixed;
  top:calc(10px + env(safe-area-inset-top));
  left:var(--recuo);
  right:var(--recuo);
  z-index:20;
  padding:11px 16px;
  font-size:calc(13.5px * var(--escala));
  line-height:1.45;
  color:var(--branco);
  background:var(--preto);
  border-radius:var(--curva-item);
  box-shadow:var(--sombra-flutua);
}
.aviso-nuvem[hidden]{ display:none; }

@media (min-width:900px){
  .entrada-caixa{ padding:44px 40px 36px; }
  .entrada-marca{ font-size:54px; }
  .aviso-nuvem{
    left:calc(var(--barra-largura) + var(--recuo-pc) * 3);
    right:var(--recuo-pc);
    max-width:720px;
  }
}