/* Plantonei
 *
 * O objeto do app e o TURNO, que e uma faixa de tempo, nao um ponto no calendario. Daqui sai
 * quase toda decisao visual: a regua de 24 horas e o elemento central, e ela comeca as 07:00.
 * Assim os dois turnos padrao dele, 07-19 e 19-07, ocupam exatamente uma metade cada, e o
 * noturno nao sai partido pela meia-noite como sairia numa regua comum.
 *
 * Nenhum estilo inline: a CSP bloqueia. O que depende de dado (cor do local, posicao da barra)
 * sai num <style> com nonce, montado em templating.py.
 */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('/static/fontes/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('/static/fontes/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Nevoa: vidro macio. Translucidez e desfoque do glassmorphism, canto redondo e sombra
   difusa do soft. A GEOMETRIA e a mesma em claro e escuro: so os tokens de cor mudam, para
   nenhum dos dois temas virar enteado. */

:root {
  --breu: #edf1f8; --carta: rgba(255,255,255,0.74); --sulco: rgba(23,28,40,0.09);
  --giz: #171c28; --bruma: #5c6478; --sombra: #8a92a6; --noite: rgba(23,28,40,0.10);
  --recebi: #14875c; --devem: #c26a1d; --toque: #4f63e0; --risco: #c0392b;
  --risco-tinta: #fff;
  --vidro-borda: rgba(255,255,255,0.85);
  --difusa: 0 10px 28px rgba(23,28,40,0.08), 0 2px 6px rgba(23,28,40,0.04);
  --lavagem-1: rgba(180,196,255,0.55);
  --lavagem-2: rgba(214,190,245,0.5);

  --fonte: 'Archivo', ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
}

/* Tres estados: sem escolha segue o aparelho, e a escolha do usuario ganha nos dois sentidos. */
@media (prefers-color-scheme: dark) {
  body:not(.t-claro) {
    --breu: #0e1018; --carta: rgba(255,255,255,0.06); --sulco: rgba(255,255,255,0.10);
    --giz: #edf0f7; --bruma: #a0a8bd; --sombra: #6c7591; --noite: rgba(0,0,0,0.38);
    --recebi: #5fd3a0; --devem: #f0b45e; --toque: #8b9dfb; --risco: #f2857a;
    --risco-tinta: #2c100b;
    --vidro-borda: rgba(255,255,255,0.13);
    --difusa: 0 12px 30px rgba(0,0,0,0.42);
    --lavagem-1: rgba(72,58,140,0.55);
    --lavagem-2: rgba(28,74,110,0.45);
  }
}

body.t-escuro {
  --breu: #0e1018; --carta: rgba(255,255,255,0.06); --sulco: rgba(255,255,255,0.10);
  --giz: #edf0f7; --bruma: #a0a8bd; --sombra: #6c7591; --noite: rgba(0,0,0,0.38);
  --recebi: #5fd3a0; --devem: #f0b45e; --toque: #8b9dfb; --risco: #f2857a;
  --risco-tinta: #2c100b;
  --vidro-borda: rgba(255,255,255,0.13);
  --difusa: 0 12px 30px rgba(0,0,0,0.42);
  --lavagem-1: rgba(72,58,140,0.55);
  --lavagem-2: rgba(28,74,110,0.45);
}

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

body {
  margin: 0;
  /* Espaco para o conteudo passar por baixo da barra de abas. Eram 100px fixos, medidos
     para o iPhone com a faixa do gesto; num aparelho sem ela sobravam 32px de nada no fim
     de toda tela, e era isso que empurrava a frase do dia livre para fora. Agora o vao
     acompanha a barra, que tambem cresce com a faixa. */
  padding: 0 0 calc(68px + env(safe-area-inset-bottom));
  background:
    radial-gradient(64% 42% at 12% -4%, var(--lavagem-1) 0%, transparent 62%),
    radial-gradient(54% 36% at 96% 8%, var(--lavagem-2) 0%, transparent 58%),
    var(--breu);
  background-attachment: fixed;
  color: var(--giz);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
.env { max-width: 540px; margin: 0 auto; padding: 0 18px; }

/* ---------- topo ---------- */

.topo {
  position: relative;  /* a roda de data abre ancorada aqui */
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: clamp(12px, 2.8vh, 24px) 0 4px;
}

/* O mes e o titulo da tela, nao um rotulo. Era menor que o nome do plantao.
   O corpo cede na tela estreita: em 320px "Setembro 2026" quebrava em duas linhas e comia
   31px de altura que a frase do dia livre precisava. */
.mes {
  font-size: clamp(24px, 7.6vw, 30px); font-weight: 600; font-stretch: 108%;
  letter-spacing: -0.03em; line-height: 1.05; margin: 0;
}

.mes .ano { color: var(--sombra); font-weight: 400; font-stretch: 100%; }

/* O titulo da tela precisa de ar antes do conteudo. Nas telas que tem o alternador (Mes e
   Semana, Produzido e Previsto) a folga vem dele; nas que comecam direto numa lista, o
   primeiro cartao encostava no titulo, e o vidro dele chegava a passar por baixo da letra. */
.topo + .registro, .topo + .grupo, .topo + .deslizavel { margin-top: 18px; }

.passo { display: flex; gap: 2px; }

.passo a {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--sombra); border-radius: 9px;
}
.passo a:active { background: var(--carta); color: var(--giz); }
.passo i {
  width: 8px; height: 8px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
/* A ponta do galao aponta para o lado do movimento, e o deslocamento compensa o proprio
   desenho: girado, o L tem a tinta de um lado so da caixa. */
.passo i.antes  { rotate: 45deg; translate: 1.5px 0; }
.passo i.depois { rotate: -135deg; translate: -1.5px 0; }

/* ---------- setas desenhadas ----------
   Toda seta do app e feita de duas bordas giradas, e nenhuma e caractere.
   
   Glifo de seta senta no eixo matematico da fonte, acima do centro da caixa, e cada fonte
   o desenha num tamanho: era isso que deixava o +, as setas de mes e os galoes de voltar
   parecendo tortos em telas diferentes. Duas bordas giradas sao um quadrado, e quadrado
   tem centro. De quebra, a espessura acompanha a cor e o tamanho acompanha a linha. */

.galao, .seta-fim {
  display: inline-block; flex: none;
  width: 7px; height: 7px;
  border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  rotate: 45deg;
}
/* O galao de voltar aponta para tras e fica colado no texto. */
.galao { margin-right: 9px; translate: 1px 0; }
/* O de fim de linha aponta para frente, e e mais apagado: ele nao e um botao, e a marca de
   que a linha inteira leva a algum lugar. */
.seta-fim { rotate: -135deg; translate: -1px 0; color: var(--sombra); opacity: 0.8; }
/* Dentro de um link de texto a seta acompanha a cor dele e ganha um respiro antes. */
.link .seta-fim { margin-left: 8px; color: inherit; opacity: 1; }

.voltar {
  display: inline-flex; align-items: center;
  color: var(--bruma); font-size: 15px;
}
.acao   { color: var(--toque); font-size: 14px; font-weight: 500; }

/* ---------- alternador e grade ----------
   Semana por padrao, mes a um toque. O modelo e o do Fantastical, que troca faixa de semana
   por grade de mes; a diferenca esta na celula: em vez do pontinho colorido, uma mini-regua
   que mostra ONDE no dia o turno cai. Ponto diz que tem plantao; a tira diz se e diurno ou
   noturno, sem abrir o dia. */

.alterna {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--carta); border-radius: 999px; margin: 14px 0 16px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--vidro-borda);
}
.alterna a {
  padding: 6px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--sombra);
}
.alterna a.ativa { background: var(--toque); color: #fff; }

.cabeca-semana, .grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

.cabeca-semana span {
  text-align: center; font-size: 11px; color: var(--sombra);
  padding-bottom: 7px; font-weight: 450;
}

/* Celula quadrada. Sem isso a altura sai do conteudo (fixa em ~45px) enquanto a largura
   acompanha a coluna: no telefone da quase quadrado, mas num navegador largo a mesma grade
   vira uma faixa achatada. `aspect-ratio` amarra as duas, e a grade fica igual nos dois. */
.celula {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; aspect-ratio: 1; padding: 4px 3px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
}

.celula .numero { font-size: 15px; font-weight: 500; }
.celula.fora { opacity: 0.32; }
.celula.sel {
  background: var(--carta); box-shadow: var(--difusa);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.celula.sel .numero { font-weight: 650; }
.celula.hoje .numero { color: var(--devem); font-weight: 650; }

/* A mini-regua da celula: mesmas proporcoes da regua grande, so que com 3px de altura.
   O fundo mais escuro da direita continua sendo a noite. */
/* Sem pista de fundo, sem folga e todas do mesmo tamanho: a largura se divide pelo numero
   de plantoes do dia, entao um plantao ocupa a celula inteira e tres ocupam um terco cada.
   Duracao e horario nao aparecem aqui de proposito; para isso a pessoa abre o dia. */
.mini { display: flex; width: 100%; height: 3px; border-radius: 2px; overflow: hidden; }
.tira { height: 3px; flex: 1 1 0; min-width: 0; }
.tira.nula { background: var(--sombra); opacity: 0.28; }

/* ---------- numero heroi ---------- */

/* O resumo do mes na Agenda e uma linha, nao um cartao: aqui a pergunta e "quando eu
   trabalho". Dinheiro tem tela propria, e esta linha leva para la. */
.resumo-linha {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; margin: 4px 0 6px;
  background: var(--carta);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--vidro-borda); border-radius: 16px;
  box-shadow: var(--difusa); font-size: 14px;
}
.resumo-linha b { font-weight: 600; font-variant-numeric: tabular-nums; }
.resumo-linha .aberto { color: var(--devem); margin-left: auto; }
.resumo-linha .seta-fim { font-size: 17px; }

.painel {
  padding: 20px; margin: 4px 0 26px;
  background: var(--carta);
  -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--vidro-borda); border-radius: 20px; box-shadow: var(--difusa);
}

.cifra {
  font-size: 44px; line-height: 1; font-weight: 600; font-stretch: 112%;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px;
}

.cifra .moeda { font-size: 19px; font-weight: 400; font-stretch: 100%; color: var(--sombra); }

.legenda { color: var(--bruma); margin-top: 8px; font-size: 14px; }

.repartido {
  display: grid; grid-template-columns: 1fr 1fr; gap: 15px 22px; margin-top: 18px;
}

.parte { min-width: 0; }
.parte span { display: block; color: var(--sombra); font-size: 12.5px; }
.parte b {
  display: block; font-size: 17px; font-weight: 550; font-stretch: 105%;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.parte.recebido b { color: var(--recebi); }
.parte.aberta b   { color: var(--devem); }
.parte.aberto b   { color: var(--devem); }

/* ---------- dia e regua ---------- */

.dia-titulo {
  display: flex; align-items: baseline; gap: 9px;
  margin: clamp(16px, 3.4vh, 28px) 0 8px; font-size: 15px; font-weight: 550;
}
.dia-titulo .numero { font-stretch: 110%; }
.dia-titulo .diasem { color: var(--sombra); font-weight: 400; }
.dia-titulo .soma {
  margin-left: auto; color: var(--bruma); font-size: 13px;
  font-variant-numeric: tabular-nums; font-weight: 400;
}

.turno {
  display: block; padding: 15px 16px;
  list-style: none; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  background: var(--carta);
  -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--vidro-borda); border-radius: 20px;
  box-shadow: var(--difusa); margin-bottom: 10px;
}

.turno::-webkit-details-marker { display: none; }
.turno:active { transform: scale(0.985); }
.turno { transition: transform 120ms ease-out; }

.turno-alto { display: flex; align-items: baseline; gap: 10px; }

.turno-nome {
  font-size: 15.5px; font-weight: 550; letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.turno-valor {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-weight: 550; font-stretch: 105%; white-space: nowrap;
}
/* A cor vem do proprio cartao quando ele tem fundo colorido: `--devem-cartao` e calculado
   por cor em templating.py, para o valor nao sumir dentro da lavagem do local. */
.turno-valor.aberto   { color: var(--devem-cartao, var(--devem)); }
.turno-valor.recebido { color: var(--recebi-cartao, var(--recebi)); }

.turno-baixo {
  display: flex; align-items: center; gap: 11px;
  margin-top: 8px; color: var(--bruma); font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
/* Horario e valor por hora sao dados curtos e fixos: quebra-los em duas linhas engorda uns
   cartoes e nao outros, e a lista perde o alinhamento. Quem cede espaco e a descricao, que
   e a unica parte de tamanho imprevisivel porque quem escreve e o usuario. */
.turno-baixo > span { white-space: nowrap; flex: none; }
.turno-baixo > .turno-local { flex: 0 1 auto; min-width: 0; }

/* Cartao de altura fixa, na lista de um local.
   
   Tres linhas que existem sempre, mesmo vazias: sem isso a altura vira funcao do texto que
   o usuario escreveu, e uma lista de trinta plantoes fica com trinta alturas. A descricao
   ganha a linha do meio inteira, que e o espaco de que ela precisava para caber. */
.turno-meio {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 7px; font-size: 12.5px; min-height: 16px;
}
.turno-desc {
  flex: 1; min-width: 0; color: var(--bruma);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.turno-hora {
  flex: none; color: var(--sombra); font-variant-numeric: tabular-nums;
}
.turno-fixo .turno-baixo { margin-top: 5px; }

.turno-local {
  color: var(--sombra); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 40%;
}

/* Na lista do dia nao ha regua: o horario esta escrito ao lado, entao a faixa vazia so
   ocupava espaco sem dizer nada. A regua fica onde e a unica forma de informar, que e a
   celula da grade, onde nao cabe texto. */
.pino { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.pino.nula { background: var(--sombra); opacity: 0.45; }
.turno-dur { color: var(--sombra); }

/* Bloqueio nao e plantao: nao tem cor de local nem valor, e nao entra em conta nenhuma.
   O rotulo e sempre o mesmo, porque a variacao esta na descricao, nao no tipo. Cartao mais
   raso e sem vidro: ele precisa ler como uma ausencia no meio da lista, nao como trabalho. */
.turno.bloqueio {
  padding: 9px 14px; margin-bottom: 8px; border-radius: 14px;
  box-shadow: none; border: 1px solid var(--sulco);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  /* Hachura diagonal: o vocabulario universal de area interditada. Um cartao so tracejado
     ficava indistinguivel do fundo, e bloqueio precisa saltar da lista, nao sumir nela. */
  background:
    repeating-linear-gradient(135deg,
      var(--sulco) 0 2px, transparent 2px 9px),
    var(--carta);
}
.turno.bloqueio .bl-marca {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--sombra);
}
.turno.bloqueio .turno-baixo { margin-top: 2px; font-size: 12px; }
/* Sem coluna de valor, a descricao do bloqueio pode usar a linha inteira. */
.turno.bloqueio .turno-local { max-width: none; flex: 1; }

/* ---------- listas ---------- */

.registro {
  display: flex; align-items: center; gap: 13px; padding: 15px 16px;
  background: var(--carta);
  -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--vidro-borda); border-radius: 20px;
  box-shadow: var(--difusa); margin-bottom: 10px;
}
.registro .marca { width: 3px; align-self: stretch; border-radius: 2px; flex: none; }
.registro .corpo { flex: 1; min-width: 0; }
.registro .nome  { font-weight: 550; font-size: 15px; }
.registro .nota  { color: var(--sombra); font-size: 12.5px; margin-top: 2px; }
.registro .cifra-menor {
  font-variant-numeric: tabular-nums; font-weight: 550; font-stretch: 105%; font-size: 15px;
  text-align: right; white-space: nowrap;
}
.registro .cifra-menor small {
  display: block; font-size: 12px; font-weight: 400; font-stretch: 100%; color: var(--devem);
}
.registro .cifra-menor small.quitado { color: var(--recebi); }

/* ---------- cabecalho de secao ---------- */

/* O fio fica ACIMA do titulo, nao abaixo.
   
   Com ele embaixo, o titulo de um setor aparecia entre dois blocos de cartoes com folga
   parecida dos dois lados, e o fio lia como fechamento do bloco anterior: "UTI 7º andar"
   parecia rodape do Pronto-socorro. Em cima, o fio encerra o que veio antes e o titulo cola
   no que vem depois. A folga faz o resto do trabalho: muito ar antes, pouco ar depois. */
.secao {
  display: flex; align-items: baseline; gap: 12px;
  margin: 34px 0 10px; padding-top: 22px; border-top: 1px solid var(--sulco);
}
/* A primeira secao vem logo abaixo do painel, que ja e uma borda por si so. */
.painel + .secao, .dica-caixa + .secao {
  margin-top: 26px; padding-top: 0; border-top: none;
}
.secao h2 {
  margin: 0; font-size: 16px; font-weight: 600; font-stretch: 104%;
  letter-spacing: -0.01em; color: var(--giz);
}
/* O nome do setor e o que se procura na tela, e ele tambem e o botao. Um ponto maior que o
   titulo da lista acima deixa a hierarquia certa: Setores organiza, UTI 7º andar age. */
.dobra > summary.secao h2 { display: flex; align-items: center; font-size: 17px; }
.secao .marca {
  width: 4px; height: 16px; border-radius: 2px; flex: none;
  align-self: flex-start; margin-top: 2px;
}
.secao span {
  margin-left: auto; color: var(--sombra); font-size: 12.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
/* Fechada, a secao e a unica coisa visivel daquele setor: o valor sobe para uma linha
   propria e o que falta receber aparece abaixo, como nos cartoes do Financeiro. */
.secao span b { display: block; color: var(--giz); font-size: 14.5px; font-weight: 600; }
.secao span .falta { display: block; color: var(--devem); font-style: normal; }

/* Secao recolhivel. O marcador vem do CSS e nao de um icone no HTML, entao ele gira sozinho
   quando o <details> abre e some quando a secao nao e dobravel. */
.dobra > summary { list-style: none; cursor: pointer; }
.dobra > summary::-webkit-details-marker { display: none; }

/* Recolhida, a secao e um item de lista e se parece com um: o mesmo cartao de vidro dos
   locais no Financeiro, e o mesmo gesto para abrir. Aberta, ela deixa de ser item e vira o
   cabecalho do bloco que se abriu, porque cartao contendo cartao nao tem hierarquia
   nenhuma: tudo vira caixa dentro de caixa. */
/* Aberto, o cartao nao desaparece: ele cresce e passa a conter os plantoes. Antes o fundo
   sumia no toque e a secao aberta virava texto solto sobre a tela, o que fazia parecer que
   o cartao tinha ido embora em vez de ter se aberto. */
.dobra[open] {
  margin: 0 0 10px; padding: 0 13px 13px;
  background: var(--carta);
  -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--vidro-borda); border-radius: 20px;
  box-shadow: var(--difusa);
}
.dobra[open] > summary.secao {
  margin: 0 0 12px; padding: 15px 3px 13px;
  border-top: none; border-bottom: 1px solid var(--sulco);
}

.dobra:not([open]) > summary.secao {
  margin: 0 0 10px; padding: 15px 16px;
  background: var(--carta);
  -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--vidro-borda); border-radius: 20px;
  box-shadow: var(--difusa);
}
.dobra:not([open]) > summary.secao:active { filter: brightness(0.97); }
/* Cartao nao precisa de fio para se separar do vizinho: ele ja tem borda. */
.dobra:not([open]) + .dobra:not([open]) > summary.secao { border-top: 1px solid var(--vidro-borda); }
/* O titulo alinhava pela linha de base, entao ele encostava na primeira linha da coluna da
   direita e ficava pendurado no topo de um cartao de tres linhas. Fechado, o cartao e uma
   linha de lista: nome de um lado, numeros do outro, centrados um contra o outro. Aberto,
   volta a valer a linha de base, porque ali o titulo abre o que vem abaixo. */
.dobra:not([open]) > summary.secao { align-items: center; }
.dobra:not([open]) > summary.secao .marca {
  align-self: stretch; height: auto; margin-top: 0;
}
/* O controle fica no rodape do cartao e diz o que faz por escrito.
   
   Uma alca lisa dizia "arraste", que e o significado que ela ja tem nas folhas do app. Uma
   seta sozinha depende de reconhecer simbolo. Escrito, nao depende de nada, e num app que
   vai ser vendido para quem nunca o viu isso vale mais que a economia de tinta.
   
   A seta e desenhada com duas bordas em vez de um caractere: glifo de seta nao tem centro
   optico confiavel (o ⌄ senta no rodape do seu quadrado, o ⌃ no topo), e centralizar um
   deles desalinha o outro. Duas bordas giradas sao geometria, e geometria centraliza. */
.dobra { position: relative; }

.dobra > summary.secao .abrir {
  position: absolute; left: 50%; bottom: 9px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 6px; border-radius: 999px; border: 1px solid var(--sulco);
  color: var(--toque); font-size: 12px; font-weight: 550; white-space: nowrap;
}
.dobra[open] > summary.secao .abrir { color: var(--sombra); }
.dobra > summary.secao .abrir i {
  width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  rotate: 45deg;
  transition: rotate 200ms cubic-bezier(0.32, 0.72, 0, 1), margin-top 200ms ease;
}
.dobra[open] > summary.secao .abrir i { rotate: -135deg; margin-top: 3px; }

.dobra[open] .rot-abre, .dobra:not([open]) .rot-fecha { display: none; }

/* Espaco para o rotulo nao encostar no conteudo. */
.dobra:not([open]) > summary.secao { padding-bottom: 38px; }
.dobra[open] { padding-bottom: 40px; }

@media (prefers-reduced-motion: reduce) {
  .dobra > summary.secao .abrir i { transition: none; }
}



/* ---------- detalhe ---------- */

.tituloso {
  font-size: 30px; font-weight: 600; font-stretch: 108%;
  letter-spacing: -0.03em; line-height: 1.15; margin: 12px 0 5px;
}

.subtitulo { color: var(--bruma); margin-bottom: 24px; font-variant-numeric: tabular-nums; }

.ficha { border-top: 1px solid var(--sulco); }
.ficha div {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--sulco); font-size: 14.5px;
}
.ficha span { color: var(--sombra); }
.ficha b { font-weight: 550; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- controles ---------- */

.botao {
  display: block; width: 100%; text-align: center;
  padding: 15px; border-radius: 16px; border: 1px solid var(--vidro-borda);
  background: var(--carta); color: var(--giz);
  font-family: var(--fonte); font-size: 15px; font-weight: 550;
  margin-top: 11px; cursor: pointer;
}
.botao.cheio { background: var(--toque); border-color: var(--toque); color: #fff; }
.botao.risco { color: var(--risco); border-color: transparent; }
/* .cheio e .risco tem a mesma especificidade: quem vinha depois levava a cor, e o botao
   saia com fundo azul e letra vermelha. Botao destrutivo cheio e vermelho inteiro. */
.botao.cheio.risco {
  background: var(--risco); border-color: var(--risco); color: var(--risco-tinta);
}

label {
  display: block; font-size: 13px; color: var(--bruma);
  margin: 20px 0 7px; font-weight: 450;
}

input, select, textarea {
  width: 100%; padding: 13px 14px;
  background: var(--carta); border: 1px solid var(--vidro-borda); border-radius: 14px;
  color: var(--giz); font-family: var(--fonte); font-size: 16px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--toque); outline-offset: -1px;
}
input[type="color"] { padding: 6px; height: 48px; }

.par { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.chave {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0; margin-top: 10px;
  border-top: 1px solid var(--sulco); border-bottom: 1px solid var(--sulco);
  font-size: 15px;
}
.chave input { width: auto; }

/* Dia livre. A frase e grande e quase apagada de proposito: ocupa o vazio sem competir com
   a agenda, e quem ja sabe que o dia esta livre passa o olho sem parar nela. As aspas sao
   tipograficas e ficam FORA do texto, penduradas na margem, para a primeira letra continuar
   alinhada com o resto da tela. */
/* A frase precisa caber numa tela so. Ela e um recado de descanso: rolar para terminar de
   ler um recado de descanso desfaz o recado. Duas coisas garantem isso juntas, porque
   nenhuma das duas basta sozinha: a folga em volta encolhe com a altura da tela, e o corpo
   da letra encolhe com o comprimento da citacao. */
.nada {
  margin: 0; text-align: center;
  padding: clamp(10px, 3.4vh, 46px) 10px clamp(8px, 2.8vh, 34px);
}

.frase {
  position: relative; margin: 0;
  line-height: 1.28; font-weight: 350;
  font-stretch: 102%; letter-spacing: -0.012em;
  color: var(--giz); opacity: 0.42;
  text-wrap: balance;
}

/* Tres corpos, pela contagem de caracteres que o servidor ja fez. Cada um cresce com a
   largura E com a altura da tela: um aparelho pequeno e estreito e baixo ao mesmo tempo,
   entao somar as duas medidas separa bem o iPhone SE de um iPhone grande. Os limites vem de
   medicao, nao de gosto: as 42 citacoes foram conferidas uma a uma em 320x568 e 375x667, e
   nenhuma pode passar da dobra. */
.frase.f-curta { font-size: clamp(20px, calc(1.8vh + 3.2vw), 28px); }
.frase.f-media { font-size: clamp(16px, calc(1.5vh + 2.6vw), 24px); }
.frase.f-longa { font-size: clamp(14.5px, calc(1.2vh + 2.2vw), 21px); }
.frase::before { content: '\201C'; }
.frase::after  { content: '\201D'; }

.autor {
  margin-top: clamp(9px, 1.8vh, 16px); font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--sombra); opacity: 0.7;
}

/* ---------- navegacao ----------
   Quatro entradas: Agenda, Financeiro, Locais e Ajustes. */

.rodape {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; gap: 4px;
  padding: 11px 8px max(13px, env(safe-area-inset-bottom));
  background: var(--carta);
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
  border-top: 1px solid var(--vidro-borda);
}

/* Cada aba ocupa um quarto da barra, e nao o tamanho da propria palavra.
   
   Com largura livre as quatro somavam 410px numa tela de 375, e `justify-content: center`
   joga a sobra para os DOIS lados: a primeira aba saia pela esquerda e ficava cortada. Era
   sobra de quando a barra tinha duas entradas e qualquer palavra cabia. Em quartos iguais
   nao ha o que transbordar, e de quebra o alvo do dedo fica do mesmo tamanho em todas. */
.rodape a {
  flex: 1 1 0; min-width: 0;
  padding: 9px 6px; border-radius: 999px; text-align: center;
  font-size: clamp(12.5px, 3.6vw, 14px); font-weight: 500; color: var(--sombra);
  white-space: nowrap;
}
.rodape a.ativa { background: var(--toque); color: #fff; }

/* ---------- o + e o que ele abre ----------
   Quatro coisas nascem daqui e o + sozinho nao dizia qual delas. O menu e um <details>:
   abre, fecha e recebe foco sem script nenhum. */

.menu-somar {
  position: fixed; right: 18px; bottom: calc(70px + env(safe-area-inset-bottom));
}

/* O z-index e o nome de transicao ficam no botao e na lista, nunca no <details> que os
   contem: `view-transition-name` cria contexto de empilhamento, e la em cima ele prenderia
   o veu dentro do proprio menu, onde ele nao escurece nada. */
.somar {
  position: relative; z-index: 3;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--toque); color: #fff;
  display: grid; place-items: center; font-size: 26px; font-weight: 400;
  box-shadow: var(--difusa);
  list-style: none; cursor: pointer;
  margin-left: auto;
}
.somar::-webkit-details-marker { display: none; }

/* O + e desenhado, nao escrito. O sinal de mais fica na altura do eixo matematico da fonte,
   que e acima do centro da caixa: centralizar a caixa deixava o sinal visivelmente alto
   dentro do circulo. Duas barras cruzadas nao tem esse problema, e ainda giram certo, em
   torno do proprio centro, quando o menu abre. */
.somar span {
  position: relative; display: block; width: 22px; height: 22px;
  transition: rotate 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.somar span::before, .somar span::after {
  content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  background: currentColor; border-radius: 1.5px;
}
.somar span::before { width: 17px; height: 2.4px; }
.somar span::after  { width: 2.4px; height: 17px; }
.menu-somar[open] .somar span { rotate: 135deg; }

.menu-lista {
  position: absolute; right: 0; bottom: 60px; z-index: 3; min-width: 168px;
  display: flex; flex-direction: column;
  padding: 6px; border-radius: 16px;
  /* Sem `backdrop-filter`, de proposito: ele cria bloco de contencao, e a folha de modelos
     que abre daqui e `position: fixed` e ficaria presa dentro do menu, com o tamanho dele.
     A opacidade vem de compor a carta sobre o fundo do app, que da o mesmo resultado. */
  background: linear-gradient(var(--carta), var(--carta)), var(--breu);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--difusa);
  transform-origin: bottom right;
  animation: menu-abre 190ms cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes menu-abre { from { opacity: 0; transform: scale(0.88) translateY(8px); } }

.menu-lista a {
  padding: 11px 14px; border-radius: 11px;
  font-size: 15px; font-weight: 500;
}
.menu-lista a:active { background: var(--noite); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- ajustes ---------- */

.grupo { margin-top: 26px; }

.grupo-titulo {
  font-size: 13px; color: var(--sombra); margin-bottom: 8px; font-weight: 450;
}

.fileira {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 0; border-top: 1px solid var(--sulco);
}
.fileira.coluna { flex-direction: column; align-items: stretch; gap: 11px; }
.fileira.inerte { opacity: 0.45; }

.rotulo { flex: 1; min-width: 0; }
.rotulo b { display: block; font-size: 15px; font-weight: 550; }
.rotulo small { display: block; font-size: 12.5px; color: var(--sombra); margin-top: 1px; }


.retrato {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--sulco); color: var(--giz);
  font-size: 14px; font-weight: 600; font-style: normal;
}

.opcoes { display: flex; gap: 6px; flex-wrap: wrap; }
.opcoes a {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--sulco);
  color: var(--bruma); font-size: 13px;
}
.opcoes a.ativa { border-color: var(--toque); color: var(--toque); font-weight: 600; }

.rodape-nota { color: var(--sombra); font-size: 12.5px; margin-top: 30px; text-align: center; }

/* Sem desfoque as camadas viram cinza chapado e o texto perde contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --carta: rgba(255,255,255,0.94); }
  body.t-escuro, body:not(.t-claro) { --carta: rgba(30,34,48,0.94); }
}

/* Casa com mais de um setor: a linha principal em cima, o detalhamento por baixo, na
   largura inteira do cartao. */
.registro.coluna { flex-direction: column; align-items: stretch; gap: 0; }
.registro-linha { display: flex; align-items: center; gap: 13px; }
.registro.coluna .marca { align-self: stretch; }

/* setor: recuo na lista de cadastros, e detalhamento dentro da casa em Dinheiro */

.setores { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--sulco); }
.setor-linha {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; color: var(--sombra);
  padding: 3px 0; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.setor-linha .qual { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.setor-linha .quantos { color: var(--sombra); opacity: 0.75; }
.setor-linha b { color: var(--bruma); font-weight: 550; }

.dica { color: var(--sombra); font-size: 12.5px; margin: 7px 0 0; }

/* O dinheiro sem data prevista fecha a lista do Previsto.
   
   Ele e um item da lista, e nao um aviso ao lado dela: a soma acontece ali, e e ali que a
   parte que falta precisa aparecer. O tracejado e a unica diferenca, e diz o suficiente:
   isto ainda nao esta resolvido. Sem icone de alerta, sem cor de erro, porque nao ha erro
   nenhum, so cadastro faltando. */
.registro.sem-regra {
  background: transparent; box-shadow: none;
  border-style: dashed; border-color: var(--sulco);
}
.registro.sem-regra .marca { background: var(--sulco); }
.registro.sem-regra .nome { color: var(--bruma); }
.registro.sem-regra .cifra-menor { color: var(--sombra); }
.registro.sem-regra .cifra-menor small { color: var(--toque); font-weight: 550; }

/* A frase que diz o que a lente escolhida significa. Fica colada no alternador, acima do
   numero, porque ela e a legenda da cifra e nao um comentario da tela. */
.explica {
  margin: -8px 2px 14px; color: var(--sombra); font-size: 13px; line-height: 1.45;
}

/* ---------- deslize entre abas ----------
   Transicao de documento para documento, feita pelo navegador. Onde a API nao existe, a
   navegacao acontece igual, so que seca: nada quebra. */

@view-transition { navigation: auto; }

/* A que entra vem inteira da borda; a que sai anda menos e some antes, como no iOS. Quem
   sai nao acompanha quem entra: e esse atraso que da a sensacao de camada, e nao a distancia. */
@keyframes entra-da-direita  { from { transform: translateX(100%); } }
@keyframes sai-para-esquerda { to   { transform: translateX(-24%); opacity: 0.45; } }
@keyframes entra-da-esquerda { from { transform: translateX(-100%); } }
@keyframes sai-para-direita  { to   { transform: translateX(24%); opacity: 0.45; } }

/* Sem sentido declarado (primeira carga, recarga), um aparecer curto, que nao finge
   movimento que ninguem pediu. */
@keyframes surge { from { opacity: 0; transform: scale(0.985); } }

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  mix-blend-mode: normal;
}

html:active-view-transition-type(desliza)::view-transition-new(root) { animation-name: surge; animation-duration: 200ms; }
html:active-view-transition-type(desliza)::view-transition-old(root) { animation-name: none; }

html:active-view-transition-type(avanca)::view-transition-new(root) { animation-name: entra-da-direita; }
html:active-view-transition-type(avanca)::view-transition-old(root) { animation-name: sai-para-esquerda; }
html:active-view-transition-type(volta)::view-transition-new(root)  { animation-name: entra-da-esquerda; }
html:active-view-transition-type(volta)::view-transition-old(root)  { animation-name: sai-para-direita; }

/* A barra de abas e o + sao a moldura: ficam parados enquanto o conteudo desliza por tras. */
.rodape { view-transition-name: barra-de-abas; }
.somar { view-transition-name: botao-somar; }
::view-transition-group(barra-de-abas), ::view-transition-group(botao-somar) { animation-duration: 0s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

.dica-topo { margin: 0 0 11px; }

/* ---------- paleta ----------
   Oito cores no plano gratuito, escolhidas para continuarem distinguiveis em 3px de altura
   na celula do calendario. Codigo hex livre e a paleta ampliada sao do plano pago. */

.paleta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.tinta { display: inline-grid; place-items: center; cursor: pointer; }
.tinta input { position: absolute; opacity: 0; width: 0; height: 0; }
.tinta span {
  width: 32px; height: 32px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--breu), 0 0 0 2px transparent;
}
.tinta input:checked + span { box-shadow: 0 0 0 2px var(--breu), 0 0 0 4px var(--giz); }
.tinta input:focus-visible + span { outline: 2px solid var(--toque); outline-offset: 3px; }

.paleta.trancada { opacity: 0.4; margin-top: 10px; pointer-events: none; }
.paleta.trancada .tinta span { width: 24px; height: 24px; }

.mais-cores { margin-top: 14px; }
.mais-cores summary { color: var(--toque); font-size: 13.5px; cursor: pointer; }

.link { color: var(--toque); }

/* escolha de regra de pagamento */
.modos { display: flex; flex-direction: column; gap: 8px; }
.modo {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 14px; border-radius: 14px;
  background: var(--carta); border: 1px solid var(--vidro-borda);
}
.modo input { width: auto; margin: 2px 0 0; flex: none; }
.modo b { display: block; font-size: 14.5px; font-weight: 550; }
.modo small { display: block; color: var(--sombra); font-size: 12.5px; margin-top: 1px; }

.cor-e0503c { background: #e0503c; }
.cor-e08a3c { background: #e08a3c; }
.cor-d9a441 { background: #d9a441; }
.cor-58a55c { background: #58a55c; }
.cor-3aa6a0 { background: #3aa6a0; }
.cor-4f78e0 { background: #4f78e0; }
.cor-7d5bd0 { background: #7d5bd0; }
.cor-c4589c { background: #c4589c; }
.cor-8c2f22 { background: #8c2f22; }
.cor-b35a1f { background: #b35a1f; }
.cor-8a6a12 { background: #8a6a12; }
.cor-2f6b33 { background: #2f6b33; }
.cor-1f6b66 { background: #1f6b66; }
.cor-2c4a99 { background: #2c4a99; }
.cor-4e3690 { background: #4e3690; }
.cor-8a3a6b { background: #8a3a6b; }
.cor-f0857a { background: #f0857a; }
.cor-f2b57e { background: #f2b57e; }
.cor-ead08a { background: #ead08a; }
.cor-9ed3a2 { background: #9ed3a2; }
.cor-8ad6d1 { background: #8ad6d1; }
.cor-9db4ef { background: #9db4ef; }
.cor-bfa8ee { background: #bfa8ee; }
.cor-eaa6cd { background: #eaa6cd; }

/* So os campos da regra escolhida aparecem. :has() resolve sem JavaScript nenhum, e onde ele
   nao existir os dois blocos ficam visiveis, que e degradacao aceitavel. */
.campos-modo { display: none; }
form:has(input[name="modo"][value="dias"]:checked)     .campos-modo.por-dias     { display: block; }
form:has(input[name="modo"][value="dia_fixo"]:checked) .campos-modo.por-dia-fixo { display: block; }
@supports not selector(:has(*)) { .campos-modo { display: block; } }

/* ---------- roda de data ----------
   O formato do seletor do iOS: colunas que giram e encaixam. A rolagem, o encaixe e o
   desbotado das pontas sao do CSS (scroll-snap e mask); o script so diz que o item parado
   no meio e o escolhido. Sem script, tocar no item continua escolhendo, porque cada linha
   e um <label>. O mes vira botao sem virar icone: o titulo da tela E o gatilho. */

.seletor, .escolha.calendario { min-width: 0; }
.seletor > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  -webkit-user-select: none; user-select: none;
}
.seletor > summary::-webkit-details-marker { display: none; }
/* No disco, como a seta dos cartoes. Solta, uma marca de 7px ao lado de uma palavra de
   28px nao le como par: le como acento perdido, mesmo estando centrada. O disco lhe da
   tamanho e, de quebra, alvo para o dedo. */
.seletor > summary .disco {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--sulco); display: grid; place-items: center;
  transition: rotate 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.seletor > summary .disco i {
  width: 8px; height: 8px; translate: 0 -2px;
  border-right: 2px solid var(--bruma); border-bottom: 2px solid var(--bruma);
  rotate: 45deg;
}
.seletor[open] > summary .disco { rotate: 180deg; }

.rodas {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 4px;
  padding: 6px 12px 12px;
}

/* A faixa central e o que transforma rolagem em escolha: ela diz onde o valor "para". */
.rodas::before {
  content: ''; position: absolute; left: 22px; right: 22px; top: calc(6px + 68px);
  height: 34px; border-radius: 9px; background: var(--noite); pointer-events: none;
}

/* Folha que carrega uma roda: mesma geometria da folha de edicao, so mais baixa. */
.folha-roda { max-height: 70vh; }
.folha-roda .folha-topo { justify-content: space-between; }

.roda {
  position: relative; height: 170px; padding: 68px 0;
  overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
}
.roda::-webkit-scrollbar { display: none; }

/* `margin: 0` nao e enfeite: a regra geral de <label> do formulario poe 27px de margem, e
   com ela cada linha da roda mede 67px em vez de 40, e a faixa central aponta para o vizinho. */
.roda label {
  display: block; height: 34px; line-height: 34px; margin: 0; text-align: center;
  scroll-snap-align: center; color: var(--sombra);
  font-size: 15.5px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.roda label input { position: absolute; opacity: 0; width: 0; height: 0; }
.roda label:has(input:checked) { color: var(--giz); font-weight: 600; }
/* Onde :has() nao existir a faixa some, para nao apontar para o item errado. */
@supports not selector(:has(*)) { .rodas::before { display: none; } }


@media (prefers-reduced-motion: reduce) {
  .roda { scroll-behavior: auto; }
}

/* O veu existe porque o que fica atras de um painel aberto nao pode competir com ele: sem
   isso, metade da grade aparece picada na borda. Ele so existe enquanto o <details> esta
   aberto, entao nao ha estado nenhum para controlar. */
.veu {
  position: fixed; inset: 0; z-index: 2;
  background: var(--noite);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: veu-entra 190ms ease-out;
}
@keyframes veu-entra { from { opacity: 0; } }
/* ---------- folha de edicao ----------
   Editar um plantao nao troca de tela: a folha sobe por cima da agenda, com o mesmo fundo
   escurecido da roda de data e do menu do +. Quem edita quer conferir o dia em volta, e
   trocar de pagina para mudar um horario faz perder esse contexto. E um <details>: sem
   estado a controlar, e o Esc fecha de graca. */

.folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  max-height: 88vh; display: flex; flex-direction: column;
  border-radius: 22px 22px 0 0;
  background: var(--carta);
  -webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3);
  border-top: 1px solid var(--vidro-borda);
  box-shadow: 0 -12px 40px rgba(0,0,0,0.18);
  animation: folha-sobe 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes folha-sobe { from { transform: translateY(100%); } }

/* Ate 540px a folha e a tela inteira; acima disso ela acompanha a coluna do app, senao
   viraria uma faixa de ponta a ponta no navegador com o conteudo perdido no meio. */
@media (min-width: 560px) {
  .folha { left: 50%; transform: translateX(-50%); width: 540px; border-radius: 22px; bottom: 5vh; }
  @keyframes folha-sobe { from { transform: translateX(-50%) translateY(14px); opacity: 0; } }
}

.folha-topo {
  position: relative;
  display: flex; align-items: baseline; gap: 10px;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--sulco);
}
.folha-topo b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.folha-topo span { margin-left: auto; color: var(--sombra); font-size: 13px; }

/* A alca nao e enfeite: ela e o unico sinal de que da para arrastar e de onde a folha comeca. */
.folha-topo::before {
  content: ''; position: absolute; left: 50%; top: 7px; translate: -50% 0;
  width: 36px; height: 4px; border-radius: 2px; background: var(--sulco);
}

.folha .rodas { position: relative; }

.folha-corpo {
  padding: 4px 20px max(22px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
}
/* O primeiro rotulo do formulario nao precisa da margem de 20px: a linha do titulo ja separa. */
.folha-corpo .chave:first-of-type { margin-top: 0; border-top: none; }

/* ---------- segmentado ----------
   Para escolhas de duas ou tres opcoes. Roda aqui seria pior: esconderia metade da escolha
   atras de um arrasto, quando tudo cabe na linha. */

.segmentos {
  display: flex; gap: 3px; padding: 3px; margin-bottom: 4px;
  background: var(--noite); border-radius: 12px;
}
.segmentos label { flex: 1; margin: 0; cursor: pointer; }
.segmentos input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmentos span {
  display: block; text-align: center; padding: 9px 8px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--bruma);
  transition: background 160ms ease-out, color 160ms ease-out;
}
.segmentos input:checked + span { background: var(--carta); color: var(--giz); font-weight: 600; box-shadow: var(--difusa); }
.segmentos input:focus-visible + span { outline: 2px solid var(--toque); outline-offset: 1px; }

/* ---------- chips de dia da semana ---------- */

.chips { display: flex; gap: 5px; }
.chips label { flex: 1; margin: 0; cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips span {
  display: block; text-align: center; padding: 9px 2px; border-radius: 10px;
  font-size: 12.5px; font-weight: 500; color: var(--bruma);
  background: var(--carta); border: 1px solid var(--vidro-borda);
}
.chips input:checked + span { background: var(--toque); border-color: var(--toque); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--toque); outline-offset: 2px; }

/* ---------- campo que abre uma roda ---------- */

.escolha { margin-bottom: 4px; }
.escolha > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; border-radius: 14px;
  background: var(--carta); border: 1px solid var(--vidro-borda);
  font-size: 16px;
  -webkit-user-select: none; user-select: none;
}
.escolha > summary::-webkit-details-marker { display: none; }
.escolha > summary::after {
  content: ''; width: 7px; height: 7px; flex: none; margin-left: auto;
  border-right: 1.8px solid var(--sombra); border-bottom: 1.8px solid var(--sombra);
  rotate: 45deg; translate: 0 -2px;
  transition: rotate 200ms cubic-bezier(0.32, 0.72, 0, 1), translate 200ms ease;
}
.escolha[open] > summary::after { rotate: -135deg; translate: 0 2px; }
.escolha[open] > summary { border-color: var(--toque); }

/* Roda embutida no formulario, nao flutuando: aqui ela nao tapa nada que importe, e sem o
   fundo escurecido o campo seguinte continua visivel enquanto a pessoa escolhe. */
.rodas.uma { display: block; }
.rodas.uma::before { left: 22px; right: 22px; }

/* ---------- campos que so valem para um tipo ---------- */

/* Bloqueio nao tem valor nem pagamento, e repeticao so faz sentido enquanto nada foi
   escolhido. Tudo isso e estado do proprio formulario, entao e :has(), nao JavaScript. */
form:has(input[name="tipo"][value="bloqueio"]:checked) .so-plantao { display: none; }

/* Rotulo que muda com o tipo. Plantao tem turno, com hora de entrar e de sair; bloqueio tem
   periodo, com inicio e fim. Os dois textos ficam no HTML e o CSS escolhe, entao a troca
   acontece no mesmo toque que troca o tipo, sem ida ao servidor e sem script. */
.rot-bloqueio { display: none; }
form:has(input[name="tipo"][value="bloqueio"]:checked) .rot-plantao { display: none; }
form:has(input[name="tipo"][value="bloqueio"]:checked) .rot-bloqueio { display: inline; }
@supports not selector(:has(*)) { .rot-bloqueio { display: none; } }
.so-repete, .so-semanal { display: none; }
form:has(input[name="repetir"]:checked:not([value="nao"])) .so-repete { display: block; }
form:has(input[name="repetir"][value="semanal"]:checked) .so-semanal,
form:has(input[name="repetir"][value="quinzenal"]:checked) .so-semanal { display: block; }
@supports not selector(:has(*)) { .so-repete, .so-semanal { display: block; } }

/* ---------- switch ----------
   Um <button> com role="switch", nao uma caixa de marcar: um toque grava e pronto, sem
   Salvar no meio. Recebi um plantao e o gesto mais usado do app. Como e botao de formulario,
   funciona sem JavaScript nenhum. O mesmo desenho serve para o <input type="checkbox"> do
   plantao que ainda nao existe, onde o valor so pode valer no Salvar. */

.switch {
  position: relative; flex: none; width: 51px; height: 31px; padding: 0;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--sulco); box-shadow: inset 0 0 0 1px var(--sulco);
  transition: background 220ms cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-tap-highlight-color: transparent;
}
.switch > span {
  position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.22);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
.switch[aria-checked="true"], .switch:has(input:checked) { background: var(--recebi); }
.switch[aria-checked="true"] > span, .switch:has(input:checked) > span { transform: translateX(20px); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch:focus-visible { outline: 2px solid var(--toque); outline-offset: 3px; }

/* label.switch precisa do desenho do botao sem herdar a margem geral de <label>. */
label.switch { display: block; margin: 0; }

/* Formulario de uma linha so, no formato das outras chaves. */
form.chave { margin-top: 0; }

.ligacao {
  background: none; border: none; padding: 0; margin-left: auto;
  color: var(--toque); font-family: var(--fonte); font-size: 15px; font-weight: 500;
  cursor: pointer;
}

/* ---------- calendario ----------
   O modelo e o do seletor de data: campo com a data escrita, e um mes inteiro numa folha.
   O <input type="date"> continua no formulario e continua sendo a fonte do valor; o
   calendario so escreve nele. Sem script, `.com-script` nunca e aplicada e o nativo aparece. */

.campo-data.com-script > input[type="date"] { display: none; }

.cal { padding: 8px 14px 16px; }
.cal-cabeca, .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-cabeca span {
  text-align: center; font-size: 11px; color: var(--sombra);
  padding-bottom: 6px; font-weight: 500;
}
.cal-grade button {
  aspect-ratio: 1; border: none; border-radius: 10px; cursor: pointer;
  background: none; color: var(--giz);
  font-family: var(--fonte); font-size: 15px; font-variant-numeric: tabular-nums;
}
.cal-grade button.fora { opacity: 0.3; }
.cal-grade button.hoje { color: var(--devem); font-weight: 650; }
.cal-grade button.sel { background: var(--toque); color: #fff; font-weight: 600; }
.cal-grade button:focus-visible { outline: 2px solid var(--toque); outline-offset: -2px; }

.passo-mes {
  background: none; border: none; cursor: pointer; padding: 4px 10px;
  color: var(--bruma); font-size: 17px; font-family: var(--fonte);
}
.folha-topo .mes-do-cal { margin: 0 auto; }

/* ---------- arrastar o cartao ----------
   Para a esquerda revela as acoes; para a direita marca como recebido. As acoes ficam ATRAS
   do cartao, no fluxo normal, entao existem para o leitor de tela e para quem navega por
   teclado mesmo sem nunca arrastar nada. */

.deslizavel { position: relative; }

/* Escondidas ate o dedo comecar a puxar. O cartao e de vidro: sem isso os botoes aparecem
   atraves dele o tempo todo, como se o plantao estivesse sempre meio apagado. */
.acoes-atras {
  position: absolute; inset: 0 0 10px auto; display: flex; align-items: stretch;
  border-radius: 20px; overflow: hidden;
  opacity: 0; pointer-events: none;
}
.deslizavel.mexendo .acoes-atras,
.deslizavel.aberto  .acoes-atras { opacity: 1; pointer-events: auto; }
.acoes-atras form { display: flex; }

.acao {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: 100%; min-width: 66px; padding: 0 6px;
  border: none; cursor: pointer;
  font-family: var(--fonte); font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  background: var(--carta);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
/* Os icones das acoes.
   
   O visto continua caractere: ele e simetrico, existe em toda fonte com a mesma forma e
   centra sozinho. Os outros tres saem. O lapis muda de desenho a cada fonte e em algumas
   nem existe; o ⌫ e a tecla de apagar de um teclado, nao uma lixeira, e no iOS ele chega a
   virar um desenho de tecla; e a seta tinha o mesmo eixo matematico das outras. */
.acao::before {
  content: ''; display: block; width: 16px; height: 16px;
  background: currentColor; opacity: 0.9;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.acao.paga::before {
  background: none; content: '✓'; width: auto; height: auto;
  font-size: 16px; line-height: 1;
}
/* Lapis: um corpo inclinado com a ponta embaixo. */
.acao.edita::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}
/* Lixeira: tampa, corpo e duas ranhuras. */
.acao.apaga::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v5M14 11v5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v5M14 11v5'/%3E%3C/svg%3E");
}
/* Abrir: o mesmo galao do resto do app, e nao uma seta com haste. */
.acao.abre::before {
  background: none; width: 8px; height: 8px; margin-bottom: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: -45deg;
}

/* A cor vive no texto e numa lavagem leve, nao num bloco chapado: o mesmo vocabulario dos
   cartoes, onde a cor do local tambem e lavagem sobre vidro. */
.acao.paga  { color: var(--recebi); box-shadow: inset 0 0 0 99px rgba(20,135,92,0.10); }
.acao.edita { color: var(--bruma);  box-shadow: inset 0 0 0 99px rgba(120,130,160,0.10); }
.acao.abre  { color: var(--toque);  box-shadow: inset 0 0 0 99px rgba(88,101,242,0.10); }
.acao.apaga { color: var(--risco);  box-shadow: inset 0 0 0 99px rgba(192,57,43,0.10); }
.acao:active { filter: brightness(0.94); }

/* Um fio entre elas, em vez de bordas: tres blocos colados leem como um controle so. */
.acao.edita { border-left: 1px solid var(--sulco); }
.acao.edita:not(:last-child) { border-right: 1px solid var(--sulco); }

.deslizavel [data-cartao] {
  position: relative;
  transform: translateX(var(--desliza, 0px));
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
  touch-action: pan-y;
}
.deslizavel [data-cartao].sem-transicao { transition: none; }

/* A faixa da direita fica atras da BORDA ESQUERDA, que e a que o cartao descobre quando o
   dedo puxa para o outro lado. Ela nao e um botao para tocar: e o alvo do gesto, e por isso
   nao ocupa espaco nem recebe foco. A acao acessivel esta na tela que o cartao abre. */
.acoes-direita {
  position: absolute; inset: 0 auto 10px 0; display: flex; align-items: stretch;
  border-radius: 20px; overflow: hidden; opacity: 0; pointer-events: none;
}
.deslizavel.mexendo .acoes-direita { opacity: 1; }

/* Enquanto a folha de confirmacao esta aberta, o cartao nao pode sumir por baixo dela: quem
   esta lendo o aviso ainda precisa ver de qual local ele fala. */
.acoes-atras:has(details[open]),
.acoes-direita:has(details[open]) { opacity: 1; pointer-events: auto; }

/* Enquanto o cartao esta puxado para a direita alem do gatilho, a borda verde avisa o que
   vai acontecer quando o dedo soltar. */
.deslizavel.vai-pagar [data-cartao] { box-shadow: inset 4px 0 0 var(--recebi), var(--difusa); }

@media (prefers-reduced-motion: reduce) {
  .deslizavel [data-cartao] { transition: none; }
}

/* ---------- recorrencia ----------
   A tela inteira num <details>. O que aparece depende da frequencia escolhida, e quem
   decide isso e :has(), nao JavaScript: a visibilidade e estado do proprio formulario. */

.folha-alta { max-height: 88vh; }

.titulo-secao {
  font-size: 12.5px; font-weight: 500; color: var(--sombra);
  margin: 22px 0 8px; letter-spacing: 0.01em;
}
.folha-corpo > div:first-child .titulo-secao,
.folha-corpo > .titulo-secao:first-child { margin-top: 10px; }

/* Lista com marca de escolhido, como no seletor do sistema. Roda aqui seria pior: sao seis
   itens e a pessoa precisa ver todos de uma vez para comparar. */
.lista-escolha {
  background: var(--carta); border: 1px solid var(--vidro-borda);
  border-radius: 16px; overflow: hidden;
}
.lista-escolha label {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0; padding: 14px 16px; cursor: pointer;
  font-size: 16px; color: var(--giz); font-weight: 400;
}
.lista-escolha label + label { border-top: 1px solid var(--sulco); }
.lista-escolha input { position: absolute; opacity: 0; width: 0; height: 0; }
.lista-escolha label:has(input:checked) { font-weight: 550; }
.lista-escolha label:has(input:checked)::after {
  content: '✓'; color: var(--toque); font-size: 17px; font-weight: 600;
}
.lista-escolha label:has(input:focus-visible) { outline: 2px solid var(--toque); outline-offset: -2px; }

.stepper {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 16px;
  background: var(--carta); border: 1px solid var(--vidro-borda);
  font-size: 16px;
}
.stepper > span { margin-right: auto; }
.stepper button {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--noite); color: var(--toque);
  font-family: var(--fonte); font-size: 19px; line-height: 1;
}
.stepper button:disabled { color: var(--sombra); opacity: 0.45; cursor: default; }
.stepper input {
  width: 46px; padding: 6px 0; text-align: center;
  background: none; border: none; font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper b { min-width: 52px; font-weight: 400; color: var(--bruma); }

.chips.grade-31 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.chips.grade-12 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chips.grade-31 span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; padding: 0; }
.chips.grade-12 span { padding: 12px 2px; }

.resumo {
  margin: 0; padding: 14px 16px; border-radius: 16px;
  background: var(--carta); border: 1px solid var(--vidro-borda);
  color: var(--bruma); font-size: 15px;
}

/* Cada frequencia mostra o seu conjunto, e so o seu. Sem :has() tudo aparece junto, que e
   feio mas continua funcionando: nenhum campo fica inalcancavel. */
.so-repete, .so-mensal, .so-semana, .so-dia-do-mes, .so-anual { display: none; }
.folha:has(input[name="freq"]:checked:not([value="nao"])) .so-repete { display: block; }
.folha:has(input[name="freq"][value="semanal"]:checked) .so-semana { display: block; }
.folha:has(input[name="freq"][value="mensal"]:checked) .so-mensal { display: block; }
.folha:has(input[name="freq"][value="mensal"]:checked):has(input[name="modo_mensal"][value="dia_da_semana"]:checked) .so-semana { display: block; }
.folha:has(input[name="freq"][value="mensal"]:checked):has(input[name="modo_mensal"][value="dia_do_mes"]:checked) .so-dia-do-mes { display: block; }
.folha:has(input[name="freq"][value="anual"]:checked) .so-anual { display: block; }
@supports not selector(:has(*)) {
  .so-repete, .so-mensal, .so-semana, .so-dia-do-mes, .so-anual { display: block; }
}

/* ---------- arrastar a grade ----------
   Semana anda na horizontal, mes na vertical. `touch-action` decide quem fica com o gesto:
   o eixo que NAO e o nosso volta para o navegador, entao a pagina continua rolando com o
   outro. */

.grade-caixa {
  transform: translate(var(--arrasta-x, 0px), var(--arrasta-y, 0px));
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
.grade-caixa.sem-transicao { transition: none; }
.grade-caixa[data-eixo="x"] { touch-action: pan-y; --arrasta-x: var(--arrasta, 0px); }
.grade-caixa[data-eixo="y"] { touch-action: pan-x; --arrasta-y: var(--arrasta, 0px); }

@media (prefers-reduced-motion: reduce) {
  .grade-caixa { transition: none; }
}


/* ---------- confirmacao em duas etapas ----------

   A caixa fica no centro, nao no rodape. Toda outra folha do app sobe de baixo porque a mao
   vai continuar trabalhando nela; esta aparece no meio justamente para quebrar o ritmo: o
   olho sai do lugar onde estava lendo e o polegar nao encontra o botao onde costuma
   encontrar. Numa acao que nao tem desfazer, atrito e o recurso, nao o defeito. */

.confirma > summary { list-style: none; }
.confirma > summary::-webkit-details-marker { display: none; }

.veu-forte { background: rgba(8,10,16,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.caixa {
  position: fixed; z-index: 5; left: 50%; top: 50%; translate: -50% -50%;
  width: min(340px, calc(100vw - 48px));
  padding: 26px 24px 20px; text-align: center;
  border-radius: 24px;
  background: var(--carta);
  -webkit-backdrop-filter: blur(30px) saturate(1.3); backdrop-filter: blur(30px) saturate(1.3);
  border: 1px solid var(--vidro-borda);
  box-shadow: 0 24px 70px rgba(0,0,0,0.30);
  animation: caixa-entra 190ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes caixa-entra { from { opacity: 0; scale: 0.94; } }

/* A pergunta e a frase mais importante da tela naquele instante, entao ela tem o peso de um
   titulo e nao o de um rotulo de campo. O aviso vem menor e mais claro logo abaixo: quem ja
   sabe o que pediu le so a primeira linha, quem hesitou le a segunda. */
.caixa h2 {
  margin: 0 0 9px; font-size: 19px; font-weight: 600; font-stretch: 104%;
  letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance;
}
.caixa p {
  margin: 0 0 22px; color: var(--bruma);
  font-size: 14px; line-height: 1.5; text-wrap: pretty;
}
.caixa .cancela {
  display: block; margin-top: 14px; padding: 6px;
  color: var(--sombra); font-size: 14.5px; cursor: pointer;
}
.caixa-risco h2 { color: var(--risco); }

@media (prefers-reduced-motion: reduce) {
  .caixa { animation: none; }
}

/* Dentro da folha de edicao a confirmacao nao abre outra folha por cima: ela cresce no
   lugar. Duas camadas empilhadas de vidro escondem o que a pessoa estava editando. */
.confirma-dentro > summary { list-style: none; }
.confirma-dentro > summary::-webkit-details-marker { display: none; }
.confirma-dentro[open] > summary { display: none; }
.confirma-dentro[open] {
  margin-top: 10px; padding: 15px; border-radius: 16px;
  background: rgba(192,57,43,0.07); border: 1px solid rgba(192,57,43,0.22);
}
.confirma-dentro .aviso {
  margin: 0 0 14px; color: var(--giz); font-size: 13.5px; line-height: 1.5;
}

/* Marcar o mes inteiro de um setor. Fica claro e alcancavel, mas nao compete com os
   cartoes: e uma acao sobre a lista, nao um item dela. */
.lote { margin: -2px 0 12px; }
.lote-botao {
  display: block; width: 100%; min-width: 0; height: auto; padding: 11px 14px;
  border-radius: 14px; border: 1px solid rgba(20,135,92,0.28);
  background: rgba(20,135,92,0.09);
  color: var(--recebi); font-size: 13.5px; font-weight: 600; text-align: center;
}
.lote-botao:active { filter: brightness(0.96); }
.lote-botao::before { content: none; }

.volta-linha { padding: 20px 0 2px; }

/* O dia so aparece fora da agenda, onde o cartao nao tem o calendario por perto. */
.turno-dia { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--giz); }

/* O cartao de local virou link. Sem isto o texto herdaria a cor de link do navegador. */
a.registro { color: inherit; }


/* ---------- cartao de local ----------
   Um cartao por local, com os setores dentro e as duas acoes no rodape. Nao abre nem fecha:
   um local tem dois ou tres setores, e esconde-los custava um toque para ganhar cinco
   linhas de tela. O cartao inteiro nao e link porque tem dois destinos dentro dele. */

.cartao-local { display: block; padding: 15px 16px; }
.cartao-local .miolo { display: flex; align-items: stretch; gap: 13px; }
.cartao-local .trilho { align-self: stretch; }
.cartao-local .tronco { flex: 1; min-width: 0; }

/* O nome do local e o titulo do cartao, e ele manda nos setores abaixo: precisa ser maior
   que eles, nao igual. */
.cartao-local .cabeca .nome { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.cartao-local .cabeca { padding-bottom: 12px; }

.linha-setor {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0; border-top: 1px solid var(--sulco);
}
.linha-setor:last-child { padding-bottom: 2px; }
.linha-setor .marca { width: 3px; align-self: stretch; border-radius: 2px; flex: none; }
.linha-setor .corpo { flex: 1; min-width: 0; }
.linha-setor .nome { font-size: 14.5px; font-weight: 500; }
/* A regra vai embaixo do nome, e nao ao lado: lado a lado, "Pronto-socorro" quebrava em
   duas linhas para caber junto de uma frase que ia truncada de todo jeito.
   
   E ela quebra em vez de cortar. Agora que a regra mora no setor, ela e a informacao da
   linha: "fechando dia ..." nao serve de nada, e o dia do fechamento e justamente o que
   muda de um setor para o outro. */
.linha-setor .regra {
  display: block; margin-top: 2px; color: var(--sombra); font-size: 12px;
  line-height: 1.4;
}

/* Duas acoes que fazem coisas diferentes, entao sao dois botoes e nao dois links soltos:
   grudados num grupo, com o fio no meio, fica claro onde termina uma e comeca a outra. O
   grupo e centrado porque ele age sobre o cartao inteiro, e nao sobre a coluna da direita. */
.grupo-botoes {
  display: flex; margin-top: 14px;
}
/* Metades iguais, cada texto centrado na sua. Com a largura saindo do texto, "Novo setor"
   ficava maior que "Editar" e o fio do meio caia fora do centro do cartao. */
.grupo-botoes a {
  flex: 1 1 0; padding: 9px 12px; border: 1px solid var(--sulco);
  color: var(--toque); font-size: 13px; font-weight: 550;
  text-align: center; white-space: nowrap;
}
.grupo-botoes a:first-child { border-radius: 10px 0 0 10px; }
.grupo-botoes a:last-child { border-radius: 0 10px 10px 0; border-left: none; }
.grupo-botoes a:active { background: var(--sulco); }


/* As tres linhas do indice tem a mesma altura, sempre. Uma descricao que quebra em duas
   linhas faz um cartao crescer e a lista perde o prumo; aqui a descricao e escrita curta, e
   a regra existe para o dia em que alguem esquecer disso. */
.registro.indice .nota {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* O contador na linha do indice: quantos locais existem, sem precisar entrar. */
.registro .marcador {
  margin-left: auto; padding: 2px 9px; border-radius: 999px;
  background: var(--sulco); color: var(--sombra);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* O menu do + com duas linhas por opcao. "Setor" sozinho nao diz que ele mora dentro de um
   local, e a duvida aparece exatamente na hora de escolher. */
/* Opcao de duas linhas: nome em cima, o que ela e embaixo. Vale em todo menu do +, porque
   tanto o modelo quanto o setor precisam explicar-se no momento da escolha. */
.menu-lista { width: min(264px, calc(100vw - 40px)); max-height: 60vh; overflow-y: auto; }
.menu-lista a { display: block; line-height: 1.35; }
.menu-lista b { display: block; font-weight: 550; }
.menu-lista small { display: block; color: var(--sombra); font-size: 12px; margin-top: 1px; }


/* ---------- modelos e lixeira ----------
   Mesmo cartao do local: trilho de cor a esquerda, conteudo no meio, grupo de botoes no
   rodape. Tres telas com o mesmo desenho e uma so de aprender. */

/* A lixeira usa o mesmo cartao do local: trilho de cor a esquerda, conteudo no meio, grupo
   de botoes no rodape. Tres telas com o mesmo desenho e uma so de aprender. */
.cartao-lixo { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 15px 16px; }
.cartao-lixo .trilho { align-self: stretch; }
.cartao-lixo .tronco { flex: 1; min-width: 0; }
.cartao-lixo .cabeca .nome { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.cartao-lixo .grupo-botoes { flex-basis: 100%; }

/* Um botao so no grupo: sem vizinho, ele fecha os quatro cantos. */
.grupo-botoes.um-so a { border-radius: 10px; }

/* Linha de modelo: o nome e o horario levam ao plantao novo, e o Editar ao modelo. */
.linha-setor > a.corpo { display: block; }
.editar-modelo {
  flex: none; padding: 6px 10px; color: var(--sombra); font-size: 12.5px; font-weight: 550;
}
.vazio-grupo {
  margin: 0; padding: 12px 0 2px; border-top: 1px solid var(--sulco);
  color: var(--sombra); font-size: 12.5px;
}

/* Grupo de local dentro do menu do +. A cor corre do nome ate o ultimo modelo daquele
   lugar, igual ao cartao da tela de Locais: um tracinho ao lado do rotulo nao dizia ate
   onde ia o grupo, e com quatro locais a lista virava um bloco so. */
.menu-grupo {
  display: flex; align-items: stretch; gap: 9px;
  margin: 10px 0 4px; padding-left: 10px;
}
.menu-grupo:first-child { margin-top: 2px; }
.menu-grupo .trilho { width: 3px; border-radius: 2px; flex: none; align-self: stretch; }
.menu-grupo-itens { flex: 1; min-width: 0; }
.menu-grupo-nome {
  display: block; padding: 0 4px 3px;
  color: var(--sombra); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
}
.menu-grupo-itens a { padding: 8px 10px; }

/* A chave de guardar como modelo explica-se numa segunda linha, porque "modelo" ainda nao
   quer dizer nada para quem abriu o app hoje. */
.chave span small {
  display: block; margin-top: 2px; color: var(--sombra);
  font-size: 12px; font-weight: 400; line-height: 1.35;
}

/* Um fio separa os modelos do resto do menu do +: sao dois tipos de acao, atalho e coisa
   nova em branco. */
.menu-fio { display: block; height: 1px; margin: 5px 8px; background: var(--sulco); }

/* A folha de modelos sobe POR CIMA do menu do +, entao o veu dela precisa passar do
   z-index do menu, que e 3. Sem isso o menu ficaria aceso na frente do escurecido. */
.veu-alto { z-index: 6; }
.folha-modelos { z-index: 7; }
/* A folha termina no rodape da tela, e a barra de abas fica por cima dela: sem esta folga
   o ultimo modelo ficava escondido atras da barra, e rolar nao adiantava porque o conteudo
   cabia. O rodape da folha ocupa parte dessa folga com o botao. */
.folha-modelos .folha-corpo { padding: 8px 8px 4px; }
.folha-modelos { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

.folha-rodape {
  position: sticky; bottom: 0;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(var(--carta), var(--carta)), var(--breu);
  border-top: 1px solid var(--sulco);
}
.folha-rodape .botao { margin: 0; }

/* O valor fica na direita da linha, como no cartao: a coluna alinhada deixa comparar dois
   modelos sem ler o nome dos dois. */
.menu-grupo-itens a { position: relative; padding-right: 92px; }
.menu-grupo-itens .quanto {
  position: absolute; right: 10px; top: 50%; translate: 0 -50%;
  color: var(--bruma); font-size: 13px; font-weight: 550;
  font-variant-numeric: tabular-nums;
}

/* A linha que abre os modelos e uma opcao do menu como as outras, e nao um item que cresce:
   ela abre uma folha. Por isso nao leva seta nem contagem, que prometiam expansao ali
   mesmo. Visualmente ela e identica aos <a> vizinhos. */
.menu-dobra > summary {
  list-style: none; cursor: pointer;
  padding: 11px 14px; border-radius: 11px;
  font-size: 15px; font-weight: 500;
}
.menu-dobra > summary::-webkit-details-marker { display: none; }
.menu-dobra > summary:active { background: var(--noite); }

.apagado-em {
  margin-top: 5px; color: var(--sombra); font-size: 11.5px;
  letter-spacing: 0.01em;
}

/* Na lixeira, Restaurar e um <form>: ele precisa ocupar a metade dele no grupo. */
.grupo-botoes form { flex: 1 1 0; display: flex; }
.grupo-botoes form button {
  flex: 1; padding: 9px 12px; border: 1px solid var(--sulco); border-right: none;
  border-radius: 10px 0 0 10px; background: transparent; cursor: pointer;
  font-family: var(--fonte); color: var(--toque); font-size: 13px; font-weight: 550;
}
.grupo-botoes > .confirma { flex: 1 1 0; display: flex; }
.grupo-botoes > .confirma > summary {
  flex: 1; padding: 9px 12px; border: 1px solid var(--sulco);
  border-radius: 0 10px 10px 0; color: var(--risco);
  font-size: 13px; font-weight: 550; text-align: center;
  display: flex; align-items: center; justify-content: center;
}

/* O apagar que fica solto no fim de uma tela: texto, nao botao, porque ele nao e a acao
   principal de lugar nenhum. */
.apagar-solto { margin-top: 26px; text-align: center; }
.apagar-solto .confirma > summary {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  color: var(--risco); font-size: 13.5px; font-weight: 550; cursor: pointer;
}
.apagar-solto .confirma > summary::before { content: none; }


/* ---------- ajustes ----------
   Um cartao por assunto. A tela era uma faixa de fios com rotulos do mesmo peso das linhas,
   e quatro assuntos diferentes liam como uma lista so. Com cartao e cabecalho de secao, ela
   passa a usar o mesmo vocabulario do resto do app. */

.cartao-ajuste { display: block; padding: 6px 16px; margin-bottom: 10px; }
.cartao-ajuste:not(.coluna) { display: flex; align-items: center; gap: 13px; padding: 15px 16px; }

.linha-ajuste {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--sulco);
}
.linha-ajuste:first-child { border-top: none; }
.linha-ajuste .corpo { flex: 1; min-width: 0; }
.linha-ajuste .nome { font-size: 15px; font-weight: 550; }
.linha-ajuste .nota { color: var(--sombra); font-size: 12.5px; margin-top: 2px; }

/* O que ainda nao existe leva etiqueta, e nao cinza no titulo: apagar a linha inteira fazia
   a secao parecer desligada, quando o que falta e a funcao e nao a permissao. */
.etiqueta {
  flex: none; padding: 3px 9px; border-radius: 999px;
  background: var(--sulco); color: var(--sombra);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
}

.cartao-ajuste .opcoes { padding: 0 0 14px; }
/* Os sete dias nao cabem numa linha: eles quebram, e os botoes sao <button> porque cada um
   grava a escolha na hora, sem Salvar. */
.opcoes-semana { flex-wrap: wrap; }
.opcoes-semana button {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--sulco);
  background: transparent; cursor: pointer;
  font-family: var(--fonte); color: var(--bruma); font-size: 13px;
}
.opcoes-semana button.ativa { border-color: var(--toque); color: var(--toque); font-weight: 600; }


/* ---------- importar e recados ---------- */

.recado {
  padding: 13px 16px; border-radius: 16px; margin-bottom: 14px;
  font-size: 13.5px; line-height: 1.45;
}
/* Recado que nao e erro nem sucesso: falta configuracao do servidor. Sem fundo proprio ele
   ficava com o padding solto no meio da tela, parecendo texto recuado sem razao. */
.recado.neutro { background: var(--carta); border: 1px solid var(--vidro-borda); color: var(--bruma); }
.recado.bom  { background: rgba(20,135,92,0.10); border: 1px solid rgba(20,135,92,0.26); color: var(--recebi); }
.recado.ruim { background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.24); color: var(--risco); }

/* A ajuda e texto de largura fixa porque descreve colunas alinhadas: em fonte proporcional
   os nomes das colunas deixam de formar coluna. */
.ajuda {
  margin: 4px 0 14px; padding: 0; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.6; color: var(--bruma); white-space: pre-wrap;
}

input[type="file"] {
  width: 100%; margin: 4px 0 14px; padding: 12px;
  border: 1px dashed var(--sulco); border-radius: 14px;
  background: transparent; color: var(--bruma); font-size: 13.5px;
}

/* A linha de ajuste vira link quando leva a algum lugar. */
a.linha-ajuste { color: inherit; }
a.linha-ajuste:active { opacity: 0.7; }

/* ---------- entrar ----------
   A unica tela sem barra de abas. Vertical, alinhada a esquerda como o resto do app, com a
   decisao unica no terco de baixo, onde o polegar alcanca. */

.entrada {
  min-height: calc(100vh - 40px); min-height: calc(100dvh - 40px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px 0 40px;
}
.entrada .marca h1 {
  font-size: clamp(34px, 11vw, 46px); font-weight: 700; font-stretch: 112%;
  letter-spacing: -0.035em; margin: 0; color: var(--giz);
}
.entrada .lema {
  margin: 10px 0 30px; font-size: 16px; line-height: 1.45; color: var(--bruma); max-width: 27ch;
}

.entrada .botao { margin-top: 0; }
.entrada form { margin-top: 11px; }
.entrada-forma { margin-top: 0; }
.entrada-forma label:first-of-type { margin-top: 0; }
.entrada-forma .botao { margin-top: 20px; }

.troca-entrada { margin: 16px 2px 0; font-size: 13.5px; color: var(--bruma); }
.troca-entrada a { color: var(--toque); font-weight: 550; }

/* Separa as duas portas sem hierarquia: nenhuma das duas e a "certa". */
.ou {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 14px;
  font-size: 12.5px; color: var(--sombra);
}
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--sulco); }
.botao.google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; background: #fff; color: #1f2430; border-color: rgba(0,0,0,0.14);
}
.botao.google .g { flex: none; }

.entrada .recado { margin-bottom: 4px; }
.nota-entrada { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--sombra); }
/* Empurra a nota de privacidade para longe do botao: ela informa, nao concorre com a acao. */
.nota-entrada.fim { margin-top: 28px; }
.entrada code {
  font-size: 12px; background: var(--sulco); padding: 1px 5px; border-radius: 6px;
}

/* ---------- páginas legais ----------
   Privacidade, termos e exclusão de conta. São as únicas telas do app feitas para serem
   LIDAS, não operadas, e por isso quebram duas regras daqui de propósito: a medida da linha
   é limitada em 62ch, porque texto corrido na largura toda cansa, e a entrelinha sobe para
   1.6. O resto do app é cartão e lista, onde isso não se aplica. */

.legal {
  max-width: 62ch; margin: 0 auto; padding: 8px 4px 48px;
  font-size: 15px; line-height: 1.6; color: var(--giz);
}
.legal h1 { font-size: 26px; line-height: 1.25; margin: 18px 0 4px; }
.legal h2 { font-size: 17px; margin: 32px 0 8px; }
.legal p, .legal ul { margin: 0 0 14px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--toque); }
.legal .vigencia { color: var(--bruma); font-size: 13.5px; margin-bottom: 26px; }

.legal footer {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--sulco);
  color: var(--bruma); font-size: 13px; line-height: 1.5;
}
.legal footer p { margin-bottom: 10px; }
.legal .atalhos { margin-bottom: 0; }

/* A regua de forca da senha. Cresce e muda de cor com o comprimento, e nada mais: nao ha
   regra de composicao para representar. */
.forca { height: 5px; border-radius: 99px; background: var(--sulco); margin: 9px 0 0; }
.forca > span {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--risco); transition: width 140ms ease-out, background-color 140ms ease-out;
}
.forca[data-nivel="2"] > span { background: var(--devem); }
.forca[data-nivel="3"] > span { background: var(--recebi); }