/* ToDo web -- estilo.
 *
 * IDENTIDADE: beWild FS (decisao de Daniel em 2026-09-11, substitui a familia
 * visual do bewild notes adotada em 2026-09-10). Fonte: `beWild FreeStyle/
 * Sobre_Rebranding (em gestacao).md` e `Sobre_Identidade e posicionamento.md`
 * -- "dark luxury / natureza selvagem": quase-preto organico #0b0d0b,
 * verde-floresta como acento primario, ambar dourado como secundario, serifa
 * editorial nos titulos e sans no corpo, textura de ruido, "WILD" fantasma.
 * Posicionamento por valor: "selvagem com requinte", nao generico.
 *
 * SISTEMA: Material 3 como gramatica de interacao -- superficies tonais,
 * camada de estado no hover/toque, escala de forma (8/12/16/28), botoes
 * segmentados, chips de filtro, snackbar, FAB, curvas de movimento padrao e
 * enfatizada. Sem biblioteca: tokens escritos aqui.
 *
 * FONTES: Playfair Display e DM Sans hospedadas JUNTO do app, em `fontes/`
 * (baixadas com autorizacao de Daniel em 2026-09-11, do Fontsource, recorte
 * latin, eixo de peso variavel; licenca SIL OFL 1.1). Nada vem de fora: a
 * arquitetura veda recurso externo (offline e privacidade). O italico nao
 * foi baixado, entao a tela nao usa italico -- sintetizado, ele deforma a
 * serifa.
 *
 * VERSAO COMPARATIVA: estilo-liquid.css, ativa com data-visual="liquid".
 */

@font-face {
  font-family: "Playfair Display";
  src: url("fontes/playfair-display-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fontes/dm-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 1000; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  /* Prazo [2026-09-14, parte 44]: cores escolhidas por Daniel. Token, e nao o
     hexadecimal repetido nas quatro regras que as usam (titulo e cabecalho,
     vencida e de hoje).
     ~~Iguais nos dois temas~~ **[TROCADO na mesma sessao, por decisao dele
     diante da medicao]**: cada cor passou a ter valor POR TEMA, porque nao
     existe um unico hexadecimal que se leia bem sobre #151915 e sobre #ffffff
     -- as quatro tentativas de valor unico deram de 1,43 a 3,24 de contraste
     no tema escuro. A matiz e a mesma nos dois; o que muda e a claridade.
     Este bloco e o do tema ESCURO (o padrao). */
  --vencida: #D36969;
  --vence-hoje: #C9A055;
  --fundo: #0b0d0b;
  --brilho-1: rgba(47, 107, 72, 0.24);
  --brilho-2: rgba(201, 150, 60, 0.10);
  --sup-1: #101310;
  --sup-2: #151915;
  --sup-3: #1b201b;
  --sup-4: #222822;
  --linha: rgba(226, 232, 220, 0.08);
  --linha-forte: rgba(226, 232, 220, 0.17);
  --texto: #e8ece4;
  --texto-2: #a6aea1;
  --texto-3: #737b6f;
  --primaria: #86cfa2;
  --sobre-primaria: #06301b;
  --primaria-cont: #1d4a32;
  --sobre-primaria-cont: #b6efcc;
  --secundaria: #e2b35e;
  /* a sombra da gota da marca. Nao e o --secundaria: no tema claro o
     --secundaria (#8c6211) e mais escuro que o ambar aprovado da marca. */
  --marca-sombra: #e2b35e;
  --secundaria-cont: #47360f;
  --sobre-secundaria-cont: #ffe0a8;
  --erro: #f2b4a6;
  --erro-cont: #5a2317;
  --sobre-erro-cont: #ffdad2;
  /* prioridade: alta escarlate, media trigo, baixa verde */
  --prio-alta: #ff4d3d;  --prio-alta-cont: rgba(255, 77, 61, 0.18);  --sobre-prio-alta: #ffd8d3;
  --prio-media: #f0d08c; --prio-media-cont: rgba(240, 208, 140, 0.17); --sobre-prio-media: #f8e8c4;
  --prio-baixa: #5cc986; --prio-baixa-cont: rgba(92, 201, 134, 0.16); --sobre-prio-baixa: #cff2dc;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px 1px rgba(0, 0, 0, 0.22);
  --sombra-3: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 28px;
  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-enfase: cubic-bezier(0.05, 0.7, 0.1, 1);
  --recuo: 32px;
  --ruido: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

:root[data-tema="claro"] {
  color-scheme: light;
  /* Prazo, no tema claro: as MESMAS matizes do bloco escuro, escurecidas para
     o fundo branco. `#912B2B` e a versao escura do vermelho e `#84642A` a do
     dourado -- cada uma e o par da sua, nao uma cor nova.
     Os contrastes dos quatro valores estao na parte 44 do doc do projeto. */
  --vencida: #912B2B;
  --vence-hoje: #84642A;
  --fundo: #f4f2eb;
  --brilho-1: rgba(47, 107, 72, 0.10);
  --brilho-2: rgba(201, 150, 60, 0.12);
  --sup-1: #faf9f4;
  --sup-2: #ffffff;
  --sup-3: #efede5;
  --sup-4: #e6e3d9;
  --linha: rgba(26, 31, 23, 0.09);
  --linha-forte: rgba(26, 31, 23, 0.19);
  --texto: #191d17;
  --texto-2: #50574c;
  --texto-3: #80877b;
  --primaria: #1e6a44;
  --sobre-primaria: #ffffff;
  --primaria-cont: #c8ebd4;
  --sobre-primaria-cont: #072c19;
  --secundaria: #8c6211;
  --marca-sombra: #c29733;
  --secundaria-cont: #f5e1b3;
  --sobre-secundaria-cont: #2c2000;
  --erro: #b3261e;
  --erro-cont: #f9dedc;
  --sobre-erro-cont: #410e0b;
  --prio-alta: #d7261e;  --prio-alta-cont: rgba(215, 38, 30, 0.12);  --sobre-prio-alta: #8f1711;
  --prio-media: #c29733; --prio-media-cont: rgba(194, 151, 51, 0.18); --sobre-prio-media: #654a0f;
  --prio-baixa: #2e8b57; --prio-baixa-cont: rgba(46, 139, 87, 0.13); --sobre-prio-baixa: #1b5a37;
  --sombra-1: 0 1px 2px rgba(20, 25, 15, 0.08), 0 1px 3px 1px rgba(20, 25, 15, 0.05);
  --sombra-3: 0 12px 30px rgba(20, 25, 15, 0.12), 0 2px 6px rgba(20, 25, 15, 0.08);
}

/* ---------------------------------------------------------------- base */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 540px at 8% -12%, var(--brilho-1), transparent 62%),
    radial-gradient(760px 520px at 108% 4%, var(--brilho-2), transparent 60%),
    var(--ruido);
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ZOOM DO ANDROID [2026-09-14, parte 54, comportamento erratico filmado por
   Daniel no celular].
   O navegador do Android AMPLIA a pagina inteira quando um campo de texto com
   fonte menor que 16px recebe foco -- e nao volta sozinho. O resultado e a tela
   toda fora de escala: a gaveta passa da borda, o "x" de fechar e o "Remover"
   somem cortados, e nada disso parece ter a ver com o campo que foi tocado.
   O corpo aqui e 15px, entao TODO campo com `font: inherit` cai na armadilha.
   O app ja sabia da regra em dois lugares (`.novo input` e `.ed-texto`, ambos
   16px) e ela nao estava escrita em lugar nenhum -- por isso os dois campos que
   nasceram na parte 51 (nome da pasta e seletor de pasta) repetiram o defeito,
   e a BUSCA, que e de muito antes, o tinha desde sempre.
   Uma regra so, e nao um numero por campo: numero por campo garante que o
   proximo campo novo repita isto.
   ~~`pointer: coarse` sozinho~~ **[ALARGADO 2026-09-14, parte 56]**: a condicao
   pode simplesmente NAO CASAR. `pointer: coarse` descreve o ponteiro PRIMARIO,
   e ha Android que responde `fine` -- com caneta, com mouse ou teclado
   acoplado, ou em modo de janela. Nesses, a regra nao se aplicava e o zoom
   continuava, que e o que Daniel filmou no Chrome DEPOIS da correcao. Uma
   condicao que falha em silencio e pior que nenhuma: some com a correcao sem
   dizer que sumiu.
   Duas portas, `ou`: o ponteiro grosso OU a largura de celular. Um aparelho
   estreito que se declare `fine` entra pela segunda; um tablet largo com toque
   entra pela primeira. No computador de janela larga nada muda. */
@media (pointer: coarse), (max-width: 900px) {
  input:not([type="radio"]):not([type="checkbox"]), select, textarea { font-size: 16px; }
}
:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--primaria) 32%, transparent); }

.tela { position: relative; z-index: 1; }

svg.ic {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Camada de estado (Material 3): o elemento escurece/clareia 8% no hover e
   12% no toque, na cor do proprio texto. */
.bt-icone, .bt-texto, .bt-preenchido, .bt-perigo, .chip, .segmentado button,
.fab, .acoes-item button, button.pilula, button.sinal, .ed-mover-alvo, .secao-cab, .botao-google, .nova-sub button, .ed-hist {
  position: relative; overflow: hidden; isolation: isolate;
}
.bt-icone::after, .bt-texto::after, .bt-preenchido::after, .bt-perigo::after, .chip::after,
.segmentado button::after, .fab::after, .acoes-item button::after, button.pilula::after, button.sinal::after, .ed-mover-alvo::after,
.secao-cab::after, .botao-google::after, .nova-sub button::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: currentColor; opacity: 0; transition: opacity 0.15s var(--ease);
}
@media (hover: hover) {
  .bt-icone:hover::after, .bt-texto:hover::after, .bt-preenchido:hover::after, .bt-perigo:hover::after,
  .chip:hover::after, .segmentado button:hover::after, .fab:hover::after, .acoes-item button:hover::after,
  button.pilula:hover::after, button.sinal:hover::after, .ed-mover-alvo:hover::after, .secao-cab:hover::after, .botao-google:hover::after, .nova-sub button:hover::after { opacity: 0.08; }
}
.bt-icone:active::after, .bt-texto:active::after, .bt-preenchido:active::after, .bt-perigo:active::after,
.chip:active::after, .segmentado button:active::after, .fab:active::after, .acoes-item button:active::after,
button.pilula:active::after, button.sinal:active::after, .ed-mover-alvo:active::after, .secao-cab:active::after, .botao-google:active::after, .nova-sub button:active::after { opacity: 0.12; }

/* ------------------------------------------------------------- botoes */

.bt-icone {
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: none; color: var(--texto-2); cursor: pointer;
  display: grid; place-items: center;
}
.bt-texto {
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--primaria); font-weight: 600; letter-spacing: 0.01em;
  padding: 10px 16px; display: inline-flex; align-items: center; gap: 8px;
}
.bt-preenchido {
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--primaria); color: var(--sobre-primaria);
  font-weight: 600; letter-spacing: 0.01em; padding: 10px 22px;
}
.bt-perigo {
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--erro-cont); color: var(--sobre-erro-cont);
  font-weight: 600; padding: 10px 22px;
}

#btn-tema .ic-lua { display: none; }
#btn-visual .ic-material { display: none; }
:root[data-visual="liquid"] #btn-visual .ic-liquid { display: none; }
:root[data-visual="liquid"] #btn-visual .ic-material { display: block; }
:root[data-tema="claro"] #btn-tema .ic-sol { display: none; }
:root[data-tema="claro"] #btn-tema .ic-lua { display: block; }

/* ------------------------------------------------------------- marca */

.marca-bw { font-family: var(--serif); font-size: 21px; font-weight: 400; font-style: normal; letter-spacing: -0.01em; }
.marca-bw b { font-weight: 800; font-style: normal; }

/* ============================================================ ENTRADA */

.tela-login {
  min-height: 100vh; min-height: 100dvh;
  max-width: 1080px; margin: 0 auto;
  padding: calc(48px + env(safe-area-inset-top)) 28px calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center;
}
.login-fundo { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.fantasma {
  position: absolute; right: -5vw; bottom: -7vw;
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(170px, 36vw, 440px); line-height: 0.8; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--texto) 10%, transparent);
  user-select: none;
}
.login-conteudo { position: relative; max-width: 580px; animation: entrar 0.8s var(--ease-enfase) both; }
.sobretitulo {
  margin: 0 0 22px; display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--secundaria);
}
.sobretitulo::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.sobretitulo .marca-bw { font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--texto); }
/* A marca na linha do sobretitulo: beWild | toDone. O lockup vai a 24px de
   altura -- medido, nao escolhido: abaixo disso o check dentro da gota vira
   borrao, acima de 30 o nome do produto esmaga o da casa. */
.sobretitulo-sep { flex: 0 0 auto; width: 1px; height: 18px; background: var(--linha-forte); }
.sobretitulo .lockup-marca { flex: 0 0 auto; display: block; height: 24px; width: auto; }
/* A gota fecha a frase do titulo. A altura em `em` acompanha o clamp() do
   titulo, e 0.7em e a altura de capitular da Playfair 800 -- a gota fica do
   tamanho das maiusculas em qualquer largura de tela. `vertical-align:
   baseline` poe a sombra na linha de base, como ela fica dentro do lockup. */
/* [2026-09-14] A gota nao pode cair sozinha na linha seguinte. Com "Nas suas
   tarefas." ela caiu, e a tela ficou com tres linhas e um pingo orfo no fim.
   O nowrap vai na ULTIMA PALAVRA + a gota, e nao no <em> inteiro: no <em>
   inteiro a frase pararia de quebrar no celular. */
.login-titulo .fim-frase { white-space: nowrap; }
.login-titulo .gota-fim { display: inline-block; vertical-align: baseline; height: 0.7em; width: auto; margin-left: 0.17em; }
.login-titulo {
  margin: 0; font-family: var(--serif); font-weight: 800;
  font-size: clamp(44px, 9.5vw, 80px); line-height: 1.02; letter-spacing: -0.025em;
}
.login-titulo em { font-style: normal; font-weight: 500; color: var(--primaria); }
.login-texto { margin: 24px 0 34px; max-width: 460px; font-size: 17px; line-height: 1.65; color: var(--texto-2); }
/* [parte 254] O link da pagina de recursos, na frase de apresentacao: verde da marca, a seta anda no passar. */
.login-recursos { display: flex; width: max-content; align-items: center; gap: 6px; margin-top: 10px; color: var(--primaria);
  font-size: 15px; font-weight: 600; text-decoration: none; }
.login-recursos span { transition: transform 0.25s var(--ease); }
.login-recursos:hover span, .login-recursos:focus-visible span { transform: translateX(4px); }
.login-recursos:hover { text-decoration: underline; text-underline-offset: 4px; }
.botao-google {
  display: inline-flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 28px 0 12px; border-radius: 999px;
  background: var(--texto); color: var(--fundo); text-decoration: none;
  font-weight: 600; font-size: 15px; box-shadow: var(--sombra-3);
  transition: transform 0.25s var(--ease);
}
.botao-google svg { width: 20px; height: 20px; padding: 7px; box-sizing: content-box; background: #fff; border-radius: 50%; }
@media (hover: hover) { .botao-google:hover { transform: translateY(-2px); } }
.dica { margin: 18px 0 0; font-size: 13px; color: var(--texto-3); }
.erro { margin: 12px 0 0; font-size: 14px; color: var(--erro); }
/* [parte 103] Pedir acesso, no desenho da entrada do $obControle: botao
   contornado e, a direita, a nota cinza. Contornado de proposito -- a acao
   principal da tela continua sendo entrar. (~~[parte 100] folha clara com
   botao cheio, so depois da recusa~~ [SUPERSEDIDO]) */
/* A nota fica a direita do botao quando cabe INTEIRA; quando nao cabe (o celular),
   desce inteira para logo abaixo dele -- nunca partida em duas linhas ao lado
   [Daniel, 2026-10-23; ~~nowrap, quebrando ao lado~~ SUPERSEDIDO no mesmo dia].
   `flex: 0 1 auto` mede a nota pelo texto inteiro: se nao couber, ela vai
   para a linha de baixo, e la ainda pode quebrar se for longa. */
.pedido-linha { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.pedido-linha[hidden] { display: none; }
.botao-pedir {
  display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 999px;
  background: transparent; color: var(--texto); border: 1px solid var(--linha-forte);
  font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer;
}
.botao-pedir:hover { border-color: var(--texto-3); }
.botao-pedir[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.botao-pedir { flex: none; }
.pedido-nota { flex: 0 1 auto; color: var(--texto-3); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.pedido-feito { margin: 22px 0 0; max-width: 440px; font-size: 14px; line-height: 1.5; color: var(--primaria); overflow-wrap: anywhere; }
#dlg-pedidos .comp-lista li { flex-wrap: wrap; }
#dlg-pedidos .comp-estado { flex-basis: 100%; order: 3; margin-top: -2px; }
#dlg-pedidos .perigo { color: var(--erro); }   /* recusar e tirar: o vermelho do "Tirar lembrete" */
.login-rodape { position: relative; margin-top: 64px; font-size: 12px; letter-spacing: 0.1em; color: var(--texto-3); }

/* ================================================================ APP */

.tela-app {
  max-width: 760px; margin: 0 auto;
  padding: 0 20px calc(104px + env(safe-area-inset-bottom));
}

.topo {
  position: sticky; top: 0; z-index: 10;
  margin: 0 -20px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px 20px;
  background: color-mix(in srgb, var(--fundo) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--linha);
}
.topo-in { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.marca-app { display: flex; align-items: center; gap: 12px; }
.marca-sep { width: 1px; height: 16px; background: var(--linha-forte); }
/* [2026-09-14] O nome do produto no topo virou o lockup. A regra de texto
   abaixo fica: o markup dela saiu, mas ela e o caminho de volta se o nome
   precisar ser texto outra vez (um e-mail, um modo de alto contraste). */
.marca-produto { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--texto-2); }
/* [2026-09-14] 20px, e o numero saiu de olhar o PIXEL, nao a proporcao:
   desenhado numa escada de 16 a 24 e ampliado 6x, o check dentro da gota
   some a 16, e um risco duvidoso a 18, e so a partir de 20 se le como
   check. Entre o piso de legibilidade e o equilibrio com o beWild de
   21px ao lado, fica o piso: qualquer numero maior aumenta o nome do
   produto em cima do nome da casa, na propria barra da casa. */
.marca-app .lockup-marca { flex: 0 0 auto; display: block; height: 20px; width: auto; }
.topo-acoes { display: flex; align-items: center; gap: 2px; }
/* [2026-10-20, parte 65, pedido de Daniel] CABECALHO QUE NAO CABE. Com o botao
   "Instalar" visivel, o conteudo passava da tela (medido a 384px, o S22+ de
   Daniel: 417px de conteudo para 334 de espaco) e o Chrome do Android ALARGAVA
   A PAGINA inteira para caber -- zoom reduzido e a tela pulando ao rolar, e o
   "sair" fora da vista. Duas camadas:
   (1) o cabecalho nunca mais alarga a pagina: o que sobrar e recortado aqui
       dentro (`clip`, com margem para o anel de foco nao ser cortado);
   (2) o app MEDE (app.js, ajustarTopo) e, so quando nao cabe, aperta as folgas e
       deixa so a seta -- quando cabe (paisagem, tela larga), fica tudo como era.
       Se nem apertado couber (360px), o "Instalar" sai do cabecalho.
   Medido a 384px: apertado + so a seta sobra 10px; o logotipo nao muda (20px e
   o piso de legibilidade dele, ver acima). */
.topo-in { overflow: clip; overflow-clip-margin: 6px; }
/* [parte 66] Aviso de que as subtarefas saem junto: na cor de perigo do proprio
   botao Remover, para ler como parte do que esta sendo confirmado. */
.aviso-subs { margin: 12px 0 10px; font-size: 14px; font-weight: 600; color: var(--erro); }
:root[data-visual] .topo.apertado, .topo.apertado { padding-left: 14px; padding-right: 6px; }
.topo.apertado .marca-app { gap: 8px; }
.topo.apertado .topo-acoes { gap: 0; }
.topo.apertado .topo-acoes .bt-icone { width: 36px; height: 36px; }
.topo.apertado #btn-instalar { padding: 8px; }
.topo.apertado #btn-instalar span { display: none; }
.topo.sem-instalar #btn-instalar { display: none; }

.hero { padding: 34px 0 24px; animation: entrar 0.6s var(--ease-enfase) both; }
.hero-data {
  margin: 0 0 8px; min-height: 1.4em;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--secundaria);
}
.hero-titulo {
  margin: 0; font-family: var(--serif); font-weight: 800;
  font-size: clamp(34px, 7.4vw, 54px); line-height: 1.04; letter-spacing: -0.022em;
}
.hero-sub { margin: 10px 0 0; min-height: 1.5em; font-size: 15px; color: var(--texto-2); }

.novo {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 18px;
  background: var(--sup-2); border: 1px solid var(--linha); border-radius: var(--r-xl);
  box-shadow: var(--sombra-1);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.novo:focus-within {
  border-color: color-mix(in srgb, var(--primaria) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primaria) 13%, transparent), var(--sombra-1);
}
.novo > .ic { color: var(--texto-3); }
/* [2026-09-14, parte 37] Dica da sintaxe, abaixo do campo. Quieta de
   proposito: quem ja sabe escrever nao deve ter de olhar em volta dela todo
   dia. Os marcadores saem realcados porque sao a unica coisa que se digita
   literalmente -- o resto e explicacao.
   `flex-wrap` em vez de texto corrido: assim a quebra cai ENTRE marcadores,
   e nao no meio de um `dd/mm/aa`, que leria como duas coisas. */
/* CARCACA DE BALAO [2026-09-14, parte 43] -- usada pela dica de sintaxe e pela
   lista de vencidas. Nasceu por extracao, nao por antecipacao: o segundo balao
   ia copiar estas oito linhas, e duas copias da mesma carcaca divergem no dia
   em que uma delas mudar -- e neste projeto ja houve tres episodios assim.
   Quem posiciona os dois tambem e um so: `posicionarBalao` no app.js. */
.balao {
  position: fixed; z-index: 60; margin: 0;
  padding: 10px 14px;
  background: var(--sup-4); border: 1px solid var(--linha-forte); border-radius: var(--r-m);
  box-shadow: var(--sombra-3);
  color: var(--texto-3); font-size: 12px; line-height: 1.5;
}
/* A pontinha, apontando para quem o ancora. `data-lado` diz de que lado ele
   nasceu: embaixo da ancora (padrao) ou acima, quando nao coube. */
.balao::after {
  content: ""; position: absolute; left: 22px; width: 10px; height: 10px;
  background: var(--sup-4); border: 1px solid var(--linha-forte);
  transform: rotate(45deg);
}
.balao[data-lado="baixo"]::after { top: -6px; border-right: 0; border-bottom: 0; }
.balao[data-lado="cima"]::after  { bottom: -6px; border-left: 0; border-top: 0; }
/* [parte 247] O balao do circulo de concluir: curto, numa linha, sem pegar o cursor. */
.balao-feito { padding: 6px 11px; color: var(--texto-2); font-size: 12.5px; white-space: nowrap; pointer-events: none; }
.balao-feito b { color: var(--texto); font-weight: 600; }

.dica-sintaxe {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
}
.dica-sintaxe b {
  font-weight: 600; color: var(--texto-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dica-sintaxe .fraco { color: color-mix(in srgb, var(--texto-3) 72%, transparent); }

/* VENCIDAS [2026-09-14, parte 43, pedido de Daniel] ------------------------- */
/* O "N vencidas" do cabecalho vira botao: ele ABRE a relacao de quais sao.
   Parece texto ate se aproximar, porque no meio de uma linha de resumo um
   botao com cara de botao pesaria mais que a informacao. */
.link-prazo {
  border: 0; padding: 0; background: none; cursor: pointer;
  font: inherit; color: var(--cor-prazo);
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, var(--cor-prazo) 55%, transparent);
  text-underline-offset: 3px;
}
.link-prazo.vencidas { --cor-prazo: var(--vencida); }
.link-prazo.hoje     { --cor-prazo: var(--vence-hoje); }
@media (hover: hover) { .link-prazo:hover { text-decoration-style: solid; } }
.link-prazo:focus-visible { outline: 2px solid var(--cor-prazo); outline-offset: 3px; border-radius: 3px; }

/* UM balao para os dois estados [2026-09-14, parte 44]: vencidas e de hoje
   nunca precisam estar na tela ao mesmo tempo, e um elemento so tira do mapa a
   chance de se sobreporem -- que era justamente o que eu teria de medir se
   fossem dois. `data-tipo` troca a cor. */
.balao-prazos { max-width: min(360px, calc(100vw - 24px)); }
.balao-prazos[data-tipo="vencidas"] { --cor-prazo: var(--vencida); }
.balao-prazos[data-tipo="hoje"]     { --cor-prazo: var(--vence-hoje); }
.balao-prazos ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.balao-prazos li { display: block; }
/* [2026-09-14, parte 49] A linha LEVA ate a tarefa. Ocupa a largura toda e tem
   area de toque de 32px: alvo de dedo, nao de mouse -- no celular a relacao
   chega a cinco linhas e errar a de cima e o padrao quando elas se encostam. */
.balao-prazos .ir-tarefa {
  width: 100%; min-height: 32px; display: flex; gap: 8px; align-items: baseline;
  margin: 0; padding: 5px 8px; border: 0; border-radius: var(--r-s);
  background: none; cursor: pointer; font: inherit; text-align: left;
  transition: background 0.15s var(--ease);
}
@media (hover: hover) { .balao-prazos .ir-tarefa:hover { background: var(--sup-3); } }
.balao-prazos .ir-tarefa:active { background: var(--sup-3); }
.balao-prazos .ir-tarefa:focus-visible { outline: 2px solid var(--cor-prazo); outline-offset: -2px; }
.balao-prazos .qual { flex: 1; min-width: 0; color: var(--texto-2); overflow-wrap: anywhere; }
/* Onde a subtarefa mora [2026-09-14, parte 50]. Em tom fraco e na MESMA linha:
   e contexto, nao um segundo item -- duas linhas por entrada fariam a relacao
   de cinco parecer de dez. */
.balao-prazos .onde { color: var(--texto-3); }
.balao-prazos .quando { flex: 0 0 auto; color: var(--cor-prazo); font-variant-numeric: tabular-nums; }

/* Realce de chegada: diz "e esta" e sai sozinho. Anel na cor do prazo, sem
   mexer no fundo do cartao -- o fundo ja carrega o estado de feita e de
   pendente, e um terceiro dono ali brigaria com os dois. */
@keyframes realce-chegada {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primaria) 70%, transparent); }
  30%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 55%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primaria) 0%, transparent); }
}
.item.realcada > .cartao { animation: realce-chegada 2s var(--ease) both; }
/* Quem pediu menos movimento recebe o anel parado, nao a ausencia do sinal:
   sem ele o clique nao teria resposta nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .item.realcada > .cartao { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 55%, transparent); }
}
/* Sobra: a relacao e cortada para o balao nao virar uma segunda lista. */
.balao-prazos .sobra { margin: 6px 0 0; color: var(--texto-3); }

/* A tarefa vencida na LISTA. Vermelho na borda E no titulo: a borda sozinha
   se perde entre cartoes num rolar rapido, e o titulo sozinho some quando o
   cartao esta em uma linha ao lado de outro tambem em uma linha.
   NAO usa o filete da lateral: ele e da prioridade, e uma tarefa pode ser
   vencida E prioritaria -- dois donos no mesmo pixel e briga garantida. */
/* ~~Borda vermelha no cartao~~ **[REVOGADA por Daniel, 2026-09-14, parte 44:
   "sem borda"]** -- junto com ela saiu a regra que resolvia a briga de cascata
   com `.item.pendente`, que existia so por causa da borda. O estado do prazo
   passou a viver INTEIRO no titulo, na lista e no cabecalho. */
.item.vencida    > .cartao > .linha > .texto { color: var(--vencida); }
.item.vence-hoje > .cartao > .linha > .texto { color: var(--vence-hoje); }
/* Etiqueta e endereco dentro do titulo mantem a cor de acento: a cor do prazo
   diz "esta data importa", nao "este texto e outro". */
.item.vencida    > .cartao > .linha > .texto .etq,
.item.vence-hoje > .cartao > .linha > .texto .etq { color: var(--primaria); }
.novo input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 11px 0; font-size: 16px; }
.novo input::placeholder { color: var(--texto-3); }

/* [2026-10-20, parte 60] Ditar tarefa. O botao e um `.bt-icone` comum -- mesma
   camada de estado, mesmo circulo -- e so muda de cor no estado que importa:
   GRAVANDO em vermelho de erro, porque microfone aberto e a unica coisa aqui
   que a pessoa precisa enxergar de longe; ENVIANDO em verde, piscando, ate a
   linha voltar. 44px como o Adicionar do celular: alvo de toque, nao enfeite. */
.bt-voz { flex: none; width: 44px; height: 44px; }
.bt-voz svg.ic { width: 22px; height: 22px; }
.bt-voz .ic-parar { display: none; fill: currentColor; stroke: none; }
.bt-voz.gravando {
  color: var(--erro);
  background: color-mix(in srgb, var(--erro) 16%, transparent);
  animation: voz-onda 1.4s var(--ease) infinite;
}
.bt-voz.gravando .ic-mic { display: none; }
.bt-voz.gravando .ic-parar { display: block; }
.bt-voz.enviando { color: var(--primaria); cursor: progress; }
.bt-voz.enviando svg.ic { animation: voz-espera 0.8s ease-in-out infinite alternate; }
@keyframes voz-onda {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--erro) 45%, transparent); }
  to   { box-shadow: 0 0 0 10px color-mix(in srgb, var(--erro) 0%, transparent); }
}
@keyframes voz-espera { from { opacity: 1; } to { opacity: 0.3; } }

.ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 10px; }
.busca {
  flex: 1 1 220px; display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--sup-1); border: 1px solid var(--linha); color: var(--texto-3);
  transition: border-color 0.2s var(--ease);
}
.busca:focus-within { border-color: var(--linha-forte); color: var(--texto-2); }
.busca input { flex: 1; min-width: 0; border: 0; background: none; outline: none; }
.busca input::placeholder { color: var(--texto-3); }

.segmentado {
  flex: none; display: inline-flex; height: 40px;
  border: 1px solid var(--linha-forte); border-radius: 999px; overflow: hidden;
}
.segmentado button {
  border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 15px; font-size: 13px; font-weight: 500; color: var(--texto-2);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.segmentado button + button { border-left: 1px solid var(--linha-forte); }
.segmentado button.ativo { background: var(--primaria-cont); color: var(--sobre-primaria-cont); }
.segmentado button.ativo::before {
  content: ""; width: 10px; height: 5px; margin: -3px 1px 0 0;
  border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.segmentado.pequeno { height: 36px; }
/* [parte 63] Seta do botao "Modificacao": para baixo = mais recentes primeiro
   (a lista "desce" no tempo); para cima = mais antigas primeiro. Gira, nao troca
   de icone, para o toque que inverte se ver como inversao. Fica visivel tambem
   com o botao inativo: mostra o sentido guardado, que e o que vale ao voltar. */
.segmentado .seta-mod { width: 14px; height: 14px; stroke-width: 2; transition: transform 0.2s var(--ease); }
.segmentado .bt-modificacao.antiga .seta-mod { transform: rotate(180deg); }
.segmentado .bt-modificacao { gap: 4px; }
.segmentado.pequeno button { padding: 0 13px; }
@media (max-width: 540px) {
  .ferramentas > .segmentado { width: 100%; }
  .ferramentas > .segmentado button { flex: 1; padding: 0 8px; }
  /* [parte 63] Com o 4º botao cada um ficava com 83px a 375px, e os ATIVOS mais
     largos pediam mais: o tique saia cortado. Mesmo recurso do .ed-prio-grupo:
     tique menor e menos folga, so no celular. E largura pelo CONTEUDO (1 1 auto)
     em vez de quatro partes iguais: "Modificacao" e o dobro de "Prazo". */
  .ferramentas > .segmentado button { flex: 1 1 auto; padding: 0 3px; gap: 4px; min-width: 0; }
  .ferramentas > .segmentado button.ativo::before { width: 8px; height: 4px; margin-right: 0; }
}

.chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; border-radius: var(--r-s);
  border: 1px solid var(--linha-forte); background: transparent; color: var(--texto-2);
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.chip.ativo { background: var(--secundaria-cont); border-color: transparent; color: var(--sobre-secundaria-cont); }
.chip.ativo::before {
  content: ""; width: 9px; height: 5px; margin: -3px 1px 0 -2px;
  border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.chip-n { font-size: 12px; opacity: 0.7; font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; } }

/* -------------------------------------------------------------- secoes */

.secao { margin-top: 22px; }
.secao-cab {
  width: 100%; display: flex; align-items: center; gap: 10px;
  border: 0; background: none; color: var(--texto); cursor: pointer;
  padding: 10px 8px 10px 4px; border-radius: var(--r-m); text-align: left;
}
.secao-titulo { font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.contagem {
  min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sup-3); color: var(--texto-2);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.secao-cab .seta { margin-left: auto; color: var(--texto-3); transform: rotate(180deg); transition: transform 0.3s var(--ease); }
.secao.fechada .seta { transform: none; }
.secao.fechada .lista, .secao.fechada .vazio { display: none; }
/* [2026-09-13, parte 30] Recolher/mostrar todas as tarefas da secao. Fica
   ENTRE o cabecalho e a lista, alinhado com o titulo. Some quando a secao
   nao tem tarefa (`:empty`) e quando a propria secao esta fechada -- ali a
   lista ja nao aparece, e um botao que promete mexer nela seria mentira. */
.secao-acoes { display: flex; margin: 2px 0 0 4px; }
.secao-acoes:empty { display: none; }
.secao.fechada .secao-acoes { display: none; }

.lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vazio {
  margin: 8px 0; padding: 30px 16px; text-align: center;
  font-family: var(--serif); font-style: normal; font-size: 19px; color: var(--texto-3);
  border: 1px dashed var(--linha-forte); border-radius: var(--r-l);
}

/* ------------------------------------------------------- gaveta das pastas */
/* [2026-09-14, parte 51] Barra LATERAL, nao menu suspenso: a lista cresce com
   o uso, e menu com quinze destinos vira rolagem dentro de rolagem.
   No celular cobre a tela inteira; no computador para em 320px. */
.gaveta-fundo {
  position: fixed; inset: 0; z-index: 70;
  background: color-mix(in srgb, #000 45%, transparent);
}
.gaveta {
  position: fixed; z-index: 71; top: 0; right: 0; bottom: 0;
  width: min(320px, 88vw); display: flex; flex-direction: column;
  padding: 16px; gap: 12px;
  background: var(--sup-2); border-left: 1px solid var(--linha-forte);
  box-shadow: var(--sombra-3); overflow: auto;
}
.gaveta-cab { display: flex; align-items: center; gap: 8px; }
.gaveta-titulo { flex: 1; margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 700; }
.gaveta-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gaveta-item { display: flex; align-items: center; gap: 4px; border-radius: var(--r-s); }
.gaveta-item.atual { background: color-mix(in srgb, var(--primaria) 14%, transparent); }
.gaveta-ir {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px;
  min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--r-s);
  background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) { .gaveta-ir:hover { background: var(--sup-3); } }
.gaveta-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gaveta-conta { flex: 0 0 auto; color: var(--texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Selos de prazo por destino [2026-09-14, parte 53]. Mesmas cores do titulo na
   lista e do gatilho no cabecalho -- os tokens sao os mesmos, entao a regra
   muda num lugar so e os tres acompanham.
   Vem ANTES da contagem total e so quando houver: selo de zero e ruido, e o
   olho aprende que cor ali significa prazo, nao quantidade. */
.gaveta-prazo {
  flex: 0 0 auto; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center;
}
.gaveta-prazo.vencida { color: var(--vencida);    background: color-mix(in srgb, var(--vencida) 16%, transparent); }
.gaveta-prazo.hoje    { color: var(--vence-hoje); background: color-mix(in srgb, var(--vence-hoje) 16%, transparent); }
/* As acoes so aparecem no item focado ou sob o cursor: a lista e para ESCOLHER,
   e quatro botoes por linha fariam a escolha competir com a manutencao. */
.gaveta-acoes { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s var(--ease); }
.gaveta-item:hover .gaveta-acoes,
.gaveta-item:focus-within .gaveta-acoes { opacity: 1; }
@media (hover: none) { .gaveta-acoes { opacity: 1; } }
.gaveta-acoes .bt-texto { padding: 6px 8px; font-size: 12px; }
/* [parte 73] A pasta de outra pessoa tem so "Sair"; sem isto o numero dela
   ficaria num terceiro alinhamento, entre o das fixas e o das pastas proprias. */
.gaveta-acoes.so-sair { min-width: 175px; justify-content: flex-end; }   /* [parte 74] 175 com o icone de compartilhar */
/* [parte 74] Compartilhar a pasta: icone ao lado de Renomear/Remover. */
.gaveta-acoes .gaveta-comp { padding: 6px; display: inline-flex; align-items: center; }
.gaveta-acoes .gaveta-comp svg { width: 16px; height: 16px; }
/* [2026-10-27, parte 215, pedido de Daniel, com print] As pastas proprias e as de outra pessoa:
   ⋮ a esquerda do nome; nome e pilulas no botao, com a contagem na ponta direita (o alinhamento
   de "Todas as pastas" e "Sem pasta"). As acoes ficam FECHADAS e sem largura (antes: invisiveis,
   mas ocupando o lugar); o ⋮ as abre a direita e o nome com as pilulas desliza para a esquerda.
   Aberta, o nome nao quebra letra a letra: corta com reticencias. */
.gaveta-item.com-kebab { gap: 0; }
/* A coluna da lista nao cresce alem da gaveta: aberta, o nome sem quebra entraria na largura minima. */
.gaveta-lista { grid-template-columns: minmax(0, 1fr); }
.gaveta-kebab {
  flex: none; width: 30px; height: 40px; padding: 0; border: 0; border-radius: var(--r-s);
  background: none; color: var(--texto-3); cursor: pointer; display: grid; place-items: center;
}
.gaveta-kebab svg.ic { width: 18px; height: 18px; }
.gaveta-kebab circle { fill: currentColor; stroke: none; }
@media (hover: hover) { .gaveta-kebab:hover { background: var(--sup-3); color: var(--texto); } }
.gaveta-item.acoes-abertas > .gaveta-kebab { color: var(--primaria); }
.gaveta-item.com-kebab > .gaveta-ir { padding-left: 6px; }
.gaveta-item.com-kebab > .gaveta-acoes {
  flex: none; min-width: 0; max-width: 0; overflow: hidden; visibility: hidden; opacity: 1;
  transition: max-width 0.22s var(--ease), margin 0.22s var(--ease), visibility 0s linear 0.22s;
}
.gaveta-item.com-kebab.acoes-abertas > .gaveta-acoes {
  max-width: 220px; margin-left: 4px; visibility: visible;
  transition: max-width 0.22s var(--ease), margin 0.22s var(--ease), visibility 0s;
}
.gaveta-item.com-kebab > .gaveta-acoes.so-sair { justify-content: flex-start; }
/* ~~.acoes-abertas~~ [parte 217] tambem `.fechando`: enquanto a bandeja recolhe, o nome segue sem
   quebrar (sem isso ele quebrava letra a letra por 0,22 s). */
.gaveta-item:is(.acoes-abertas, .fechando) .gaveta-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gaveta-item:is(.acoes-abertas, .fechando) .gaveta-quem { overflow: hidden; text-overflow: ellipsis; }
/* [parte 74] Selos de compartilhamento no cartao. */
.pilula.pessoas { background: var(--sup-3); color: var(--texto-2); }
.pilula.alterada { background: color-mix(in srgb, var(--primaria) 16%, transparent); color: var(--primaria); font-weight: 600; }
/* [parte 74] Dialogo de compartilhar. */
#dlg-compartilhar .comp-linha { margin-top: 12px; padding-top: 0; border-top: 0; }
.comp-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.comp-lista li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--linha); }
.comp-lista li:first-child { border-top: 0; }
.comp-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.comp-estado { font-size: 12px; color: var(--texto-3); }
.comp-lista .comp-vazio { color: var(--texto-3); font-size: 13px; }
/* [parte 75] Acessos de API: no rodape, discreto; o codigo gerado em fonte fixa. */
.rodape .bt-acessos { font-size: 12px; font-weight: 500; color: var(--texto-3); padding: 4px 6px; margin-left: 8px; }
.rodape .bt-acessos:hover { color: var(--primaria); }
#tok-valor { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
#dlg-tokens .comp-lista li { flex-wrap: wrap; }
#dlg-tokens .comp-estado { flex-basis: 100%; order: 3; margin-top: -2px; }
/* `align-items: center` e altura igual nos dois: sem isso o botao herda o
   esticamento do flex e fica de outro tamanho que o campo, desalinhado por
   baixo. [2026-09-14, parte 52, apontado por Daniel] */
.gaveta-nova {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linha);
}
.gaveta-nova .pilula { height: 40px; flex: 0 0 auto; }
.gaveta-nova input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: var(--r-s);
  border: 1px solid var(--linha-forte); background: var(--sup-1); color: var(--texto); font: inherit;
}
/* O botao do cabecalho DIZ que ha filtro: sem isso, lista curta por filtro e
   lista curta por falta de tarefa ficam iguais. */
.bt-icone.filtrando { color: var(--primaria); }
/* ~~Cracha com o NOME da pasta dentro do botao~~ **[CORRIGIDO 2026-09-14,
   parte 52, defeito apontado por Daniel: o rotulo aparecia pela metade]**.
   A causa: `.bt-icone` tem `overflow: hidden` (linha do efeito de toque), e
   qualquer texto que passe da caixa do botao e cortado -- botao de icone tem
   largura de icone, nao de palavra. Agora o botao carrega so um PONTO, e o
   nome da pasta vai para a linha de resumo, que tem largura de sobra e ja e o
   lugar onde a tela diz o que esta mostrando. */
.conta-pasta {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--primaria);
}
.resumo-pasta { color: var(--primaria); font-weight: 600; }
/* [2026-09-14, parte 52] `.ed-rotulo` tem `margin-bottom: -6px`, que SO
   funciona dentro de um flex com `gap` -- o negativo desconta o gap. Em bloco
   comum ele vira sobreposicao, e o rotulo monta em cima do campo. E o mesmo
   defeito da parte 35, com o mesmo conserto: a caixa vira flex com gap, e nao
   se mexe no rotulo (que atende outros seis lugares). */
.ed-pasta { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.ed-pasta-sel {
  width: 100%; height: 40px; padding: 0 10px; border-radius: var(--r-s);
  border: 1px solid var(--linha-forte); background: var(--sup-1); color: var(--texto); font: inherit;
}

/* ------------------------------------------------------------- cartoes */

.item { margin: 0; }
.cartao {
  position: relative;
  background: var(--sup-2); border: 1px solid var(--linha); border-radius: var(--r-l);
  padding: 13px 8px 13px 14px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
@media (hover: hover) { .cartao:hover { border-color: var(--linha-forte); box-shadow: var(--sombra-1); } }
/* [2026-10-26, parte 178, pedido de Daniel] A bolinha do canvas no cartao da
   lista: a mesma do icone de pasta (`.conta-pasta`: 7 px, cor primaria), no canto
   de cima a direita, num botao que abre o canvas em outra aba na visao da tarefa.
   ~~18 px, centro a 11 px das bordas~~ [CORRIGIDO no teste]: no celular o ⓘ fica
   sempre a vista no canto e o toque de 18 px cobria 12 x 13 px dele; agora 12 px,
   com o centro a 8 px das bordas (dentro da curva do cartao), longe do desenho do ⓘ. */
.ponto-canva {
  position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; z-index: 1;
  border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center;
}
.ponto-canva::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primaria); transition: transform 0.15s var(--ease); }
@media (hover: hover) { .ponto-canva:hover::before { transform: scale(1.35); } }
.ponto-canva:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }
.cartao:has(> .edicao) { background: var(--sup-3); border-color: var(--linha-forte); box-shadow: var(--sombra-3); padding: 16px; }

/* Prioridade: fio na lateral da tarefa -- alta escarlate, media trigo, baixa
   verde (decisao de Daniel, 2026-09-11; antes so a alta tinha fio, em ambar). */
/* Filete da prioridade: altura de UMA linha, a primeira do titulo (pedido de
   Daniel, parte 18; antes ia do topo ao pe do cartao). top = padding do cartao
   + 1px do texto; altura = a linha (15.5px x 1.45). */
.item:is(.prio-A, .prio-B, .prio-C) > .cartao::before {
  content: ""; position: absolute; left: -1px; top: 14px; height: 22px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--prio-cor);
}
.item.prio-A { --prio-cor: var(--prio-alta); }
.item.prio-B { --prio-cor: var(--prio-media); }
.item.prio-C { --prio-cor: var(--prio-baixa); }
.item.pendente > .cartao { border-style: dashed; border-color: color-mix(in srgb, var(--secundaria) 50%, transparent); }
.item.pronto > .cartao { background: var(--sup-1); }
.item.pronto > .cartao > .linha .texto { color: var(--texto-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--texto-3) 70%, transparent); }
.item.pronto > .cartao > .linha .etq { color: var(--texto-3); }

.linha { display: flex; align-items: flex-start; gap: 10px; }
.texto { flex: 1; min-width: 0; padding-top: 1px; font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere; }
/* [parte 80, pedido de Daniel] Titulo e descricao JUSTIFICADOS. A hifenizacao
   (o `lang="pt-BR"` do html diz a lingua) evita os buracos que o justificado
   abre em linha estreita -- a primeira linha, ao lado dos icones, e a mais curta.
   A ultima linha de cada paragrafo continua alinhada a esquerda (padrao). */
.texto, .notas li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
/* [parte 83, pedido de Daniel] Mais respiro entre o fim do texto e a borda
   direita do cartao: o cartao tem 14 px a esquerda e so 8 a direita, e com o
   justificado o texto encostava. +10 px no titulo (e na descricao), so na
   tarefa EXPANDIDA -- a recolhida ficou como esta, a pedido. A fileira de
   icones, que flutua dentro do titulo, devolve os 10 px com margem negativa
   e fica onde estava. */
.item:not(.recolhida) > .cartao > .linha > .texto { padding-right: 10px; }
.item:not(.recolhida) > .cartao > .notas { padding-right: 10px; }
.item:not(.recolhida) > .cartao > .linha > .texto > .acoes-item.no-fim { margin-right: -10px; }
.etq { color: var(--primaria); font-weight: 600; }
/* Enderecos clicaveis no titulo e na descricao. */
.texto a, .notas a {
  color: var(--primaria); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primaria) 45%, transparent);
  text-underline-offset: 2px; overflow-wrap: anywhere;
}
@media (hover: hover) { .texto a:hover, .notas a:hover { text-decoration-color: currentColor; } }
.item.pronto > .cartao > .linha .texto a { color: var(--texto-3); }

.feito {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 22px; height: 22px; margin: 0; border-radius: 50%;
  border: 1.75px solid var(--texto-3); background: transparent; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.feito::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border: solid var(--sobre-primaria); border-width: 0 0 2px 2px;
  transform: rotate(-45deg) scale(0); transition: transform 0.25s var(--ease-enfase);
}
@media (hover: hover) { .feito:hover { border-color: var(--primaria); } }
.feito:checked { background: var(--primaria); border-color: var(--primaria); }
.feito:checked::after { transform: rotate(-45deg) scale(1); }

/* DISPENSADA [2026-09-14, parte 40]: a tarefa que nao vai ser feita e mesmo
   assim fecha. Fechada é fechada -- risco no texto, contagem e secao sao os
   mesmos da concluida; o que distingue e o desenho do circulo.
   TRACO no lugar do tique, e enchimento NEUTRO em vez da cor de acento: as
   duas fecham a tarefa, mas so uma delas e conquista, e um circulo da cor de
   acento com traco diria as duas coisas ao mesmo tempo.
   [TROCADO 2026-09-14 por Daniel, com exemplo em imagem: era um X. O traco diz
   "nao vai acontecer" sem a carga de erro que o X carrega -- X e o simbolo de
   fechar e de errado, e dispensar nao e nenhum dos dois.] */
.feito.dispensada:checked { background: var(--texto-3); border-color: var(--texto-3); }
.feito.dispensada::after   { transform: none; opacity: 0; }   /* sem tique */
.feito.dispensada::before {
  content: ""; grid-area: 1 / 1; width: 10px; height: 2px; border-radius: 1px;
  /* `--fundo`, e nao `--sobre-primaria`: o tique senta sobre a cor de ACENTO e
     por isso usa a cor de cima-dela; este traco senta sobre `--texto-3`, que e
     cor de TEXTO -- e cor de texto contrasta com o fundo por construcao, nos
     dois temas. MEDIDO nos dois, nao estimado: `--fundo` sobre `--texto-3` da
     4,45:1 no escuro e 3,31:1 no claro; `--sobre-primaria` daria 3,31 e 3,70.
     Os dois passam do minimo de 3:1 que vale para elemento GRAFICO (o de 4,5:1
     e para texto), e `--fundo` ganha no pior caso conjunto. Usar
     `--sobre-primaria` aqui seria aplicar fora de lugar um token que nomeia
     "cor de cima do acento", e aqui embaixo nao ha acento nenhum.
     No tema escuro o traco fica ESCURO sobre o cinza -- mesmo idioma do tique,
     que tambem e escuro sobre o acento. */
  background: var(--fundo);
  transform: scale(0); transition: transform 0.25s var(--ease-enfase);
}
.feito.dispensada:checked::before { transform: scale(1); }
/* Na subtarefa o circulo e menor (20px): o traco acompanha, senao encosta na
   borda -- o tique ja e desenhado em tamanho fixo e nao tem esse problema. */
.item.filho .feito.dispensada::before { width: 9px; }
/* `::after` e `::before` na MESMA celula da grade: sem isto o flex do grid
   poria os dois lado a lado e o circulo cresceria. */
.feito::after { grid-area: 1 / 1; }
/* Segurar no celular seleciona texto e abre o menu do sistema por cima do
   cartao -- o gesto longo aqui tem dono. */
.feito { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }

.acoes-item { flex: none; display: flex; gap: 0; margin: -6px 0 -6px; opacity: 0; transition: opacity 0.15s var(--ease); }
.cartao:hover > .linha .acoes-item, .acoes-item:focus-within { opacity: 1; }
@media (hover: none) { .acoes-item { opacity: 1; } }
.acoes-item button {
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: none; color: var(--texto-3); cursor: pointer; display: grid; place-items: center;
}
.acoes-item button svg.ic { width: 18px; height: 18px; }
/* [parte 216] Canvas: a fileira aberta travada na largura fechada (app.js, `abrirFileira`),
   ancorada a direita -- os icones novos transbordam so para a esquerda, sobre uma pilula da
   cor do cartao (`--fundo-trava`) que cobre o que estiver embaixo. */
.acoes-item.trava { position: relative; isolation: isolate; justify-content: flex-end; }
.acoes-item.trava > * { flex-shrink: 0; }
.sob-gaveta { visibility: hidden; }   /* [parte 216] a pilula coberta pela fileira aberta */
.acoes-item.trava::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: var(--larg-aberta, 100%);
  border-radius: 999px; background: var(--fundo-trava, var(--sup-2)); z-index: -1; pointer-events: none;
}
@media (hover: hover) {
  .acoes-item button:hover { color: var(--texto); }
  .acoes-item .bt-lixo:hover { color: var(--erro); }
}

/* Alca de arrastar: so na ordem Manual. `touch-action: none` e o que impede o
   toque de virar rolagem da pagina no Android. */
.manual { --recuo: 58px; }
.alca {
  display: none; flex: none;
  width: 16px; height: 24px; margin: -1px 0 0; padding: 0; border: 0; border-radius: 4px;
  color: var(--texto-3); cursor: grab; touch-action: none; opacity: 0.55;
  background: radial-gradient(circle, currentColor 1.3px, transparent 1.75px) 1px 1.5px / 7px 7px;
}
.manual .alca { display: block; }
.alca:hover, .alca:focus-visible { opacity: 1; }
.item.arrastando { position: fixed; z-index: 30; margin: 0; pointer-events: none; }
.item.arrastando > .cartao { background: var(--sup-4); border-color: color-mix(in srgb, var(--primaria) 60%, transparent); box-shadow: var(--sombra-3); }
.item.filho.arrastando > .cartao { padding: 6px 10px; border: 1px solid var(--primaria); border-radius: var(--r-m); }
.marca-posicao {
  list-style: none; margin: 0;
  border: 1.5px dashed color-mix(in srgb, var(--primaria) 55%, transparent); border-radius: var(--r-l);
  background: color-mix(in srgb, var(--primaria) 6%, transparent);
}
.filhos .marca-posicao { border-radius: var(--r-m); }
.com-arrasto, .com-arrasto * { -webkit-user-select: none; user-select: none; cursor: grabbing !important; }

/* Metadados em chips de assistencia. */
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0 var(--recuo); }
.meta:empty { display: none; }
/* [2026-09-13, parte 29] O botao de recolher mora colado na lista dele: margem
   de baixo curta, para ler como cabecalho do bloco e nao como mais um chip
   solto. A `.notas`/`.filhos` logo abaixo ja tem a propria margem de topo,
   entao aqui a de baixo e zero. */
.cab-lista { display: flex; margin: 9px 0 0 var(--recuo); }
.cab-lista:empty { display: none; }
.cab-lista + .notas, .cab-lista + .filhos { margin-top: 6px; }
.pilula {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 9px; border: 0; border-radius: var(--r-s);
  background: var(--sup-3); color: var(--texto-2);
  font-size: 12px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums;
}
.pilula.hoje { background: var(--secundaria-cont); color: var(--sobre-secundaria-cont); }
.pilula.prio-A { background: var(--prio-alta-cont); color: var(--sobre-prio-alta); }
.pilula.prio-B { background: var(--prio-media-cont); color: var(--sobre-prio-media); }
.pilula.prio-C { background: var(--prio-baixa-cont); color: var(--sobre-prio-baixa); }
.pilula.vencido { background: var(--erro-cont); color: var(--sobre-erro-cont); }
.pilula.completa { color: var(--primaria); }
.pilula.fila { background: transparent; color: var(--secundaria); padding: 0 2px; }
button.pilula { cursor: pointer; background: transparent; border: 1px solid var(--linha-forte); font: inherit; font-size: 12px; font-weight: 500; }
button.pilula svg.ic { width: 13px; height: 13px; stroke-width: 2; transition: transform 0.25s var(--ease); }
/* A seta indica a ACAO: aberto aponta para cima (recolher), fechado para baixo
   (expandir). Antes era o contrario, e lia como "clique para abrir" (Daniel). */
button.pilula[aria-expanded="true"] svg.ic { transform: rotate(180deg); }

/* Descricao. */
.notas {
  list-style: none; margin: 10px 0 0 var(--recuo); padding: 6px 0 6px 14px;
  border-left: 2px solid color-mix(in srgb, var(--primaria) 45%, transparent);
  color: var(--texto-2); font-size: 14px; line-height: 1.5;
}
.notas li { overflow-wrap: anywhere; }
.notas li + li { margin-top: 4px; }

/* Subtarefas em arvore: fio fino a esquerda. */
.filhos {
  list-style: none; display: flex; flex-direction: column;
  margin: 10px 0 0 var(--recuo); padding: 2px 0 2px 12px;
  border-left: 1px solid var(--linha-forte);
}
.item.filho > .cartao { background: none; border: 0; border-radius: var(--r-m); padding: 7px 0 7px 2px; box-shadow: none; }
.item.filho > .cartao:has(> .edicao) { background: var(--sup-4); padding: 14px; margin: 4px 0; }
.item.filho:is(.prio-A, .prio-B, .prio-C) > .cartao::before { top: 8px; height: 21px; left: -13px; }
.item.filho .feito { width: 20px; height: 20px; }
.item.filho .texto { font-size: 14.5px; }

.nova-sub { display: flex; gap: 8px; margin: 10px 0 0 var(--recuo); }
.nova-sub input {
  flex: 1; min-width: 0; height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--linha-forte); background: var(--sup-1); outline: none;
  transition: border-color 0.15s var(--ease);
}
.nova-sub input:focus { border-color: var(--primaria); }
.nova-sub button {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--primaria); color: var(--sobre-primaria); display: grid; place-items: center;
}

/* Botao "mais" e linha de acoes: so no celular. No cartao estreito, tres
   icones lado a lado espremiam o texto em tres linhas. */
.bt-adicionar { display: inline-flex; align-items: center; gap: 6px; }
.bt-adicionar svg.ic { display: none; }
.acoes-item > .bt-mais { display: none; }
.bt-mais circle { fill: currentColor; stroke: none; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px 0 -4px calc(var(--recuo) - 14px); }
.acoes-linha .bt-texto { padding: 8px 12px; font-size: 13px; }
.acoes-linha .bt-texto svg.ic { width: 16px; height: 16px; }
.acoes-linha .perigo { color: var(--erro); }
@media (max-width: 540px) {
  .novo { padding-left: 16px; }
  .novo > .ic { display: none; }
  .bt-adicionar { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .bt-adicionar span { display: none; }
  .bt-adicionar svg.ic { display: block; }
}
/* [parte 92, pedido de Daniel: uso em PAISAGEM no celular] Os icones do
   cartao no jeito do celular (⋮ e ⓘ, o resto na linha de acoes) valem na tela
   estreita E em qualquer tela de TOQUE: deitado, o celular passa de 541 px e
   caia no layout de desktop, cujos icones so aparecem com o cursor em cima --
   coisa que o dedo nao tem. */
@media (max-width: 540px), (hover: none) {
  .acoes-item > button { display: none; }
  .acoes-item > .bt-mais { display: grid; }
  .acoes-item > .bt-info { display: grid; }
  /* [2026-10-27, parte 211, Daniel, com prints do celular e do desktop: "no mobile, os icones de
     'tem itens no canvas' e de lembrete devem aparecer tambem no oneliner"] Na tarefa RECOLHIDA, a
     grade acesa e o sino aceso ficam a vista, como no desktop. Vem antes do ⋮ e do ⓘ: os dois
     seguem na mesma coluna em todas as linhas. Aberta, as pilulas ja dizem o mesmo. */
  .item.recolhida > .cartao > .linha > .acoes-item > :is(.bt-canva, .bt-lembrete).ligado:not([hidden]) { display: grid; }
  .item.recolhida > .cartao > .linha > .acoes-item > .bt-canva.ligado { order: -2; }
  .item.recolhida > .cartao > .linha > .acoes-item > .bt-lembrete.ligado { order: -1; }
}

/* ------------------------------------------------------ painel de edicao */

.edicao { display: flex; flex-direction: column; gap: 12px; }
.ed-rotulo { margin: 0 0 -6px 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-3); }
.ed-texto, .ed-desc, .campo-data input {
  width: 100%; border: 1px solid var(--linha-forte); border-radius: var(--r-m);
  background: var(--sup-1); outline: none; padding: 12px 14px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.ed-texto { font-size: 16px; font-weight: 500; }
.ed-desc { min-height: 92px; resize: vertical; font-size: 14px; line-height: 1.55; }
.ed-texto:focus, .ed-desc:focus, .campo-data input:focus {
  border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 15%, transparent);
}
.ed-campos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 2px; }
.campo-data { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-3); }
.campo-data input { width: auto; height: 36px; padding: 0 12px; border-radius: 999px; }
.ed-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.ed-rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding-top: 12px; border-top: 1px solid var(--linha);
  font-size: 12px; color: var(--texto-3);
}
/* [2026-09-19] Datas e etiqueta da pasta andam JUNTAS do lado esquerdo. Sem
   este agrupamento, o `space-between` do rodape jogaria a etiqueta para o meio,
   entre as datas e o "Historico", e ela leria como um terceiro assunto.
   ~~A etiqueta vem ANTES das datas (Daniel, mesmo dia).~~ **[DESFEITO 2026-09-20
   -- expressa: "retorne para a direita como estava antes".]** Voltou para depois
   das datas, que e onde ela nasceu. A ordem continua sendo do HTML, e nao do
   CSS: `order` poria a ordem visual em desacordo com a de leitura de um leitor
   de tela, e as duas viagens de ida e volta teriam sido feitas no lugar errado. */
.ed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.selo-pasta { gap: 5px; }
.selo-pasta svg.ic { width: 13px; height: 13px; stroke-width: 1.9; }
/* [2026-09-20] A etiqueta virou BOTAO (clicar abre a pasta). A regra geral de
   `button.pilula` e contorno sem fundo -- serve o botao de recolher, que e um
   comando. Este nao: ele e um DADO que tambem leva a algum lugar, e mudar de
   cara ao virar clicavel faria a mesma informacao parecer duas coisas
   diferentes em duas versoes do app. Entao mantem o fundo da pilula e ganha so
   o que diz que responde ao toque: cursor, realce no hover e o foco visivel. */
button.selo-pasta {
  border: 0; background: var(--sup-3); color: var(--texto-2);
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
button.selo-pasta:hover { background: var(--sup-4); color: var(--texto); }
button.selo-pasta:active { transform: scale(0.97); }
.ed-hist { border: 0; background: none; cursor: pointer; padding: 4px 2px; font-size: 12px; font-weight: 600; color: var(--primaria); }
.ed-hist:disabled { opacity: 0.5; cursor: progress; }

/* Historico em linha do tempo. */
.ed-historico { list-style: none; margin: 0; padding: 2px 0 0; max-height: 340px; overflow: auto; }
.ed-historico li {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 8px 0 10px 20px; font-size: 13px;
}
.ed-historico li::before {
  content: ""; position: absolute; left: 3px; top: 13px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 18%, transparent);
}
.ed-historico li::after { content: ""; position: absolute; left: 7px; top: 24px; bottom: -10px; width: 1px; background: var(--linha-forte); }
.ed-historico li:nth-last-child(2)::after, .ed-historico li.h-base::before, .ed-historico li.h-base::after { display: none; }
.h-quando { color: var(--texto-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.h-quem { color: var(--secundaria); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-align: right; }
/* [2026-10-21, parte 71] Com o nome de OUTRA pessoa ("mariagabriela.fernandes · API"),
   a coluna `auto` crescia ate a palavra inteira e, em subtarefa a 375 px, empurrava
   o historico para rolagem lateral. `anywhere` deixa o nome quebrar em vez disso. */
.h-quem { overflow-wrap: anywhere; min-width: 0; }
/* [parte 73] "de Ana" / "com Ana" ao lado do nome da pasta compartilhada. */
.gaveta-quem { display: block; font-size: 11px; color: var(--texto-3); margin-top: 1px; overflow-wrap: anywhere; }
.h-o-que { grid-column: 1 / -1; color: var(--texto); white-space: pre-line; overflow-wrap: anywhere; }
.ed-historico li.h-base { display: block; padding: 6px 0 0; color: var(--texto-3); font-size: 11px; }

/* [2026-09-14, parte 34] Mover subtarefa entre tarefas.
   CENARIO A -- o cartao que vai receber o item arrastado. Filete na primaria,
   como o da descricao, para o destaque falar a mesma lingua do resto. */
.item.alvo-soltura > .cartao {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--primaria) 10%, var(--sup-2));
}
/* CENARIO B -- a lista de destinos no painel de edicao. */
/* [CORRIGIDO 2026-09-14, parte 35] Era `margin-top: 14px` num bloco comum, e o
   rotulo SOBREPUNHA o campo. A causa nao estava aqui: `.ed-rotulo` tem
   `margin-bottom: -6px`, que so faz sentido dentro de `.edicao`, um flex
   column com `gap: 12px` -- o negativo DESCONTA do gap e sobra 6px. Fora de
   um flex com gap, nao ha o que descontar e o -6px vira sobreposicao.
   A correcao e este bloco passar a ser o mesmo tipo de caixa que `.edicao`,
   e nao neutralizar o rotulo aqui: um `margin-bottom` proprio faria a secao
   divergir das outras no dia em que o espacamento do painel mudasse. */
.ed-mover { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.ed-mover-busca {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px;
  border: 1px solid var(--linha-forte); border-radius: var(--r-m);
  background: var(--sup-2); color: var(--texto); font: inherit; font-size: 14px;
}
.ed-mover-lista {
  list-style: none; margin: 8px 0 0; padding: 0;
  max-height: 190px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.ed-mover-alvo {
  width: 100%; text-align: left; cursor: pointer;
  padding: 9px 12px; border: 0; border-radius: var(--r-s);
  background: var(--sup-3); color: var(--texto); font: inherit; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ed-mover-vazio { margin: 8px 0 0; color: var(--texto-3); font-size: 13px; }

/* Tarefa recolhida: uma linha so. Recolhe e expande ao tocar no cartao. */
.item.recolhida > .cartao > :is(.meta, .cab-lista, .notas, .filhos, .nova-sub, .acoes-linha, .rodape-item, .ed-historico) { display: none !important; }
.item.recolhida > .cartao > .linha .texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sinais da recolhida: o que ficou escondido, colado ao titulo -- subtarefas
   por feitas/total dentro de um circulo, descricao por tres pontos na linha de
   base, como reticencias. So aparecem recolhida. [CORRIGIDO na parte 18, a pedido
   de Daniel: antes ficavam junto das acoes, com seta e pontos no meio da linha.]
   [parte 21, a pedido de Daniel: os tres pontos mais discretos, dentro do mesmo
   circulo do numero, rentes a linha de base do numero.] Os circulos ficam
   centrados na primeira linha do titulo; as acoes vao para a direita. */
.sinais { display: none; }
.item.recolhida > .cartao > .linha > .texto { flex: 0 1 auto; }
.item.recolhida > .cartao > .linha > .sinais:not(:empty) {
  flex: none; display: inline-flex; align-items: center; gap: 6px; margin: 3px 0 0 -3px;
  height: 18px; color: var(--texto-3); font-variant-numeric: tabular-nums;
}
.item.recolhida > .cartao > .linha > .acoes-item { margin-left: auto; }
.sinal { display: inline-flex; align-items: center; }
/* [2026-09-13, parte 29, pedido de Daniel] Os sinais da recolhida passaram a
   ser BOTOES: clicar abre a tarefa E expande aquela secao. Aqui so se zera o
   que o navegador poe de proprio -- fundo, fonte, cor, margem. A geometria
   (30x18, borda, raio) continua vindo de `.sinal:is(.sub,.desc)`, que tem
   mais especificidade, para o visual medido nas partes 18-25 nao mudar. */
button.sinal { cursor: pointer; background: none; font: inherit; color: inherit; margin: 0; }
/* [parte 88] `.prazo`: a data do prazo na recolhida, no mesmo barril do contador. */
.sinal:is(.sub, .desc, .prazo) {   /* [parte 189] ~~.canva~~ [CORRIGIDO]: a grade saiu do barril */
  box-sizing: border-box; justify-content: center; min-width: 30px; height: 18px; padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--texto-3) 45%, transparent); border-radius: 999px;
  font-size: 10.5px; line-height: 1;
}
/* [parte 185] A grade do canvas no barril: 11 px, traco que da 1 px nesse tamanho.
   [parte 186, Daniel: "a cor do icone na pilula deve ficar discreta, como as demais"]
   ~~stroke-width: 2.2~~ [CORRIGIDO]: a grade cheia de linhas pesava mais que o "1/1";
   agora traco 1,7 e a cor dos "..." (o --texto-3 a 75%). */
/* ~~.sinal.canva { color: color-mix(in srgb, var(--texto-3) 75%, transparent); }~~
   ~~.sinal.canva svg.ic { width: 11px; height: 11px; stroke-width: 1.7; }~~
   [CORRIGIDO pela parte 189, Daniel: "na tarefa colapsada, retire o icone de dentro da
   pilula e coloque-o do tamanho do texto do titulo da tarefa, e pinte de verde"] Sem
   barril, na cor primaria. A caixa tem o tamanho da letra do titulo (15,5 px); o
   quadrado desenhado ocupa 17/24 dela, ~11 px -- a altura das maiusculas. */
.sinal.canva { color: var(--primaria); border: 0; padding: 0; border-radius: 4px; }
.sinal.canva svg.ic { width: 15.5px; height: 15.5px; stroke-width: 1.7; }
/* [parte 186] Com a tarefa aberta: a pilula da fileira, so com a grade, no tom discreto.
   [parte 187, Daniel: "faca como a de lembrete"] ~~contorno de button.pilula, so a
   grade~~ [CORRIGIDO]: o desenho do "Lembrete passou" (.pilula.lembrete.parado) --
   fundo --sup-3, texto --texto-3, peso 500, icone de 13 px a esquerda --, com o texto. */
button.pilula.canva { border: 0; background: var(--sup-3); color: var(--texto-3); font-weight: 500; }   /* ~~cinza~~ [SUPERSEDIDO pela parte 196, abaixo] */
/* [2026-10-26, parte 196, Daniel: "na tela de lista de tarefas, pinte tambem de verde o
   rotulo de que tem itens no canvas, conforme ocorre no rotulo de lembrete"] O desenho do
   lembrete ATIVO (.pilula.lembrete): fundo --primaria a 14%, texto e icone --primaria, peso 600. */
button.pilula.canva { background: color-mix(in srgb, var(--primaria) 14%, transparent); color: var(--primaria); font-weight: 600; }
.pilula.canva svg.ic { width: 13px; height: 13px; stroke-width: 1.9; flex: none; }
.sinal.sub.completa { color: var(--primaria); border-color: color-mix(in srgb, var(--primaria) 45%, transparent); }
/* Pontos menores e mais claros que o numero; embaixo, na linha de base dele.
   [parte 22: elipse achatada; parte 23, a pedido de Daniel: barril igual ao do
   numero; parte 24: 23px de largura; parte 25: as medidas exatas do "0/2".] */
.sinal.desc { position: relative; color: color-mix(in srgb, var(--texto-3) 75%, transparent); }
/* Medidas exatas do "0/2" (pedido de Daniel, parte 25): os dois barris saem da
   mesma regra, com largura minima de 30px -- cabe qualquer x/y de um digito, e
   os dois ficam iguais em qualquer fonte. [Tentado antes, e medido 0,92px mais
   largo: um "0/0" invisivel; a fonte nao tem algarismos de largura igual.] Os
   pontos ficam por cima, centrados, na linha de base do numero. */
.sinal.desc svg {
  position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  display: block; width: 9px; height: 2px; fill: currentColor; stroke: none;
}

/* Botao de prioridade ativo na cor da prioridade. */
.ed-prio-grupo button[data-prio="A"].ativo { background: var(--prio-alta-cont); color: var(--sobre-prio-alta); }
.ed-prio-grupo button[data-prio="B"].ativo { background: var(--prio-media-cont); color: var(--sobre-prio-media); }
.ed-prio-grupo button[data-prio="C"].ativo { background: var(--prio-baixa-cont); color: var(--sobre-prio-baixa); }

/* Sugestoes de etiqueta. */
.sugestoes {
  position: fixed; z-index: 60; margin: 0; padding: 6px; list-style: none;
  max-height: 240px; overflow: auto;
  background: var(--sup-4); border: 1px solid var(--linha-forte); border-radius: var(--r-m);
  box-shadow: var(--sombra-3);
}
.sugestoes li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 10px; border-radius: var(--r-s); cursor: pointer; font-size: 14px; color: var(--texto-2);
}
.sugestoes li b { color: var(--texto); font-weight: 600; }
.sugestoes li .n { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.sugestoes li.ativa { background: color-mix(in srgb, var(--primaria) 18%, transparent); color: var(--texto); }
@media (hover: hover) { .sugestoes li:hover { background: color-mix(in srgb, var(--primaria) 12%, transparent); } }

/* Prioridade no painel: quatro opcoes por extenso precisam caber no cartao do celular. */
@media (max-width: 540px) {
  .segmentado.pequeno.ed-prio-grupo button { padding: 0 7px; font-size: 12px; }
  .segmentado.pequeno.ed-prio-grupo button.ativo::before { width: 8px; height: 4px; margin-right: 0; }
}
/* [2026-10-27, parte 224, Daniel, com print do canvas: "o elemento de selecao de prioridade esta
   transbordando o tamanho do card"] O corte acima e pela largura da TELA; o cartao do canvas e
   estreito (300 px) mesmo no desktop, e o seletor (316 px) saia dele. Agora o corte e pela largura
   do PROPRIO editor (consulta de conteiner): estreito, o seletor fica compacto e cabe (240 px). */
.edicao { container-type: inline-size; }
@container (max-width: 340px) {
  .segmentado.pequeno.ed-prio-grupo { max-width: 100%; }
  .segmentado.pequeno.ed-prio-grupo button { padding: 0 6px; font-size: 12px; flex: 1 1 auto; min-width: 0; gap: 3px; }
  .segmentado.pequeno.ed-prio-grupo button.ativo::before { width: 8px; height: 4px; margin-right: 0; }
}

/* Cartao clicavel: tocar recolhe e expande. */
.lista .item > .cartao { cursor: pointer; }
.lista .item > .cartao:has(> .edicao) { cursor: auto; }
/* Icone de informacao: no grupo de acoes, onde ficava a seta; verde com o rodape aberto. */
.item.detalhe > .cartao > :is(.linha, .meta, .cab-lista) .bt-info { color: var(--primaria); }

/* Rodape da tarefa: revelado pelo icone de informacao. */
.cartao > .rodape-item { margin: 12px 0 0 var(--recuo); }
.cartao > .ed-historico { margin: 4px 0 0 var(--recuo); }
.item.detalhe > .cartao { border-color: var(--linha-forte); }
.item.filho.detalhe > .cartao { background: color-mix(in srgb, var(--sup-3) 70%, transparent); padding-left: 8px; padding-right: 8px; }

/* ---------------------------------------------------------------- rodape */

.rodape { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--linha); text-align: center; font-size: 12px; color: var(--texto-3); }

/* ------------------------------------------------------ FAB e snackbar */

.fab {
  display: none; position: fixed; z-index: 30;
  right: 16px; bottom: calc(18px + env(safe-area-inset-bottom));
  height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: var(--r-l); cursor: pointer;
  align-items: center; gap: 10px;
  background: var(--primaria-cont); color: var(--sobre-primaria-cont);
  font-weight: 600; box-shadow: var(--sombra-3);
}
/* Botao dentro do recado [2026-09-14, parte 55]: o aviso de versao nova precisa
   de uma acao, e ela tem de caber na mesma faixa sem virar um dialogo. */
.faixa-acao {
  margin-left: 12px; padding: 6px 12px; border: 0; border-radius: var(--r-s);
  background: var(--primaria); color: var(--sobre-primaria);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; flex: 0 0 auto;
}
.faixa-acao.fraca { background: none; color: var(--texto-3); font-weight: 500; }
/* [parte 67] Prazo do "Desfazer", visivel: a barrinha encolhe em 5 s. Com
   movimento reduzido ela fica parada (a regra geral desliga a animacao), e o
   recado some no mesmo prazo de qualquer jeito. */
.faixa-tempo {
  display: block; height: 2px; margin: 8px 0 -3px; border-radius: 2px;
  background: currentColor; opacity: 0.35; transform-origin: left center;
  animation: faixa-tempo linear forwards;
}
@keyframes faixa-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* [2026-10-20, parte 60] Exemplo de ditado, embaixo do "Gravando...". Linha
   propria e mais apagada: e ajuda, nao o recado. Sem italico -- a fonte em
   italico nao foi baixada, e o navegador inventaria um inclinado falso. */
.faixa-exemplo { display: block; margin-top: 4px; font-size: 13px; opacity: 0.72; }
.snackbar {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  bottom: calc(22px + env(safe-area-inset-bottom));
  width: max-content; max-width: min(560px, calc(100% - 32px));
  padding: 14px 18px; border-radius: var(--r-s);
  background: var(--texto); color: var(--fundo); font-size: 14px; line-height: 1.4;
  box-shadow: var(--sombra-3); animation: subir 0.3s var(--ease-enfase);
}
@media (max-width: 700px) {
  .fab { display: inline-flex; }
  .snackbar { bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* -------------------------------------------------------------- dialogos */

dialog {
  width: min(460px, calc(100% - 32px)); padding: 26px 24px 20px;
  border: 0; border-radius: var(--r-xl);
  background: var(--sup-3); color: var(--texto); box-shadow: var(--sombra-3);
}
dialog[open] { animation: surgir 0.3s var(--ease-enfase); }
dialog::backdrop { background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 25px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
dialog p { margin: 0 0 12px; font-size: 14px; color: var(--texto-2); }
dialog p.nota-dialogo { font-size: 12px; color: var(--texto-3); }
.previa { list-style: none; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-m); background: var(--sup-2); font-size: 14px; }
.previa li { padding: 2px 0; overflow-wrap: anywhere; }
.previa li.sub { padding-left: 14px; color: var(--texto-2); }
.escolha {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; padding: 12px 14px;
  border: 1px solid var(--linha-forte); border-radius: var(--r-m); cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.escolha:has(input:checked) { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 9%, transparent); }
.escolha input { margin: 3px 0 0; accent-color: var(--primaria); }
.escolha strong { display: block; font-size: 14px; }
.escolha em { display: block; margin-top: 2px; font-style: normal; font-size: 13px; color: var(--texto-2); white-space: pre-line; overflow-wrap: anywhere; }
dialog menu { display: flex; justify-content: flex-end; gap: 8px; margin: 20px 0 0; padding: 0; }
/* [2026-10-21, parte 72] O "Recusar" tem TRES botoes, e em 375 px eles nao cabem
   numa linha -- "Cancelar" e "Recusar" saiam cortados. No estreito, um embaixo do
   outro, a acao principal em cima e o Cancelar por ultimo, todos na largura. */
@media (max-width: 480px) {
  #dlg-sair menu { flex-direction: column-reverse; align-items: stretch; }
  #dlg-sair menu button { width: 100%; justify-content: center; text-align: center; }
}

/* ------------------------------------------------- lembretes [parte 78] */

/* O sino e da familia dos outros icones do cartao (traco 1,7, grade 24).
   ~~O estado era um PONTO verde sobre o sino.~~ **[REVOGADO 2026-10-21, parte 79,
   pedido de Daniel]**: ligado, o sino fica VERDE e FIXO a vista -- isso ja diz
   que esta ativo, e o ponto era a mesma informacao duas vezes. Vale no celular
   tambem. */
.bt-lembrete.ligado, .acoes-item .bt-lembrete.ligado:hover { color: var(--primaria); }
/* [parte 190] O botao do canvas e irmao do sino: aceso (com itens no canvas), verde e
   fixo; na linha de acoes do celular, o mesmo ponto do "Lembrete" ligado. */
.bt-canva.ligado, .acoes-item .bt-canva.ligado:hover { color: var(--primaria); }
.acoes-linha [data-acao="canva"].ligado { position: relative; }
.acoes-linha [data-acao="canva"].ligado::before {
  content: ""; position: absolute; top: 7px; left: 24px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--primaria);
}

/* --------------------- acoes do cartao no desktop [parte 79, pedido de Daniel]
   ~~v70: seis icones lado a lado aparecendo no hover, o sino no meio deles.~~
   **[SUBSTITUIDO]** Ocupavam muito espaco. Agora, da direita para a esquerda:
     SINO (sempre o ultimo) · ⋮ · e, atras do ⋮, os demais.
   Tres estados:
     1. sem hover: nada, so o sino se ligado (e o ⓘ se as informacoes estao abertas);
     2. hover no cartao: ⋮ e sino;
     3. hover no ⋮ (ou toque nele): os demais abrem para a esquerda e o ⓘ toma
        o lugar do ⋮; ficam enquanto o cursor estiver na fileira (`.abertas`,
        posto e tirado pelo app.js).
   O TEXTO usa a largura toda: a fileira e um FLUTUANTE dentro do `.texto`
   (`.flutua`, posto pelo app.js), da altura de uma linha -- entao so a primeira
   linha se encolhe para os icones, e a partir da segunda o texto vai ate a
   borda. Os icones somem por `display: none`, nao por opacidade, justamente
   para devolver o espaco ao texto.
   Abaixo de 541 px nada disso vale: fica o celular de sempre (⋮ e ⓘ).
   **[parte 92]** E so com CURSOR (`hover: hover`): tela de toque larga -- o
   celular deitado, o tablet -- fica com o jeito do celular.

   **[AJUSTADO no mesmo dia, parte 80, pedido de Daniel]** (1) O sino so fica FORA
   do ⋮ quando ha lembrete; sem lembrete, mora dentro dele com os demais. (2) Ordem
   da fileira aberta: + · editar · compartilhar · remover · ⓘ · sino. (3) Fechada,
   o ⋮ vem SEMPRE a esquerda do que esta fixo: `⋮ 🔔`, ou `⋮ ⓘ 🔔` com as
   informacoes abertas -- por isso `order: 0` no ⋮. */
@media (min-width: 541px) and (hover: hover) {
  .acoes-item { opacity: 1; margin: -6px 0 -6px 0; }
  /* [parte 80] ~~`.flutua`: flutuante na PRIMEIRA linha do titulo~~ [SUBSTITUIDO].
     Agora: no FIM do titulo (`.no-fim`, flutuante posto depois do texto: fica na
     linha em que ele acabou se couber, senao desce) ou na linha dos rotulos
     (`.na-meta`, empurrado para a direita). Altura de caixa menor que uma linha
     de texto, para nao abrir linha em branco. */
  .acoes-item.no-fim { float: right; margin: -6px 0 -8px 12px; text-align: left; }
  /* ~~[parte 82] `.na-meta` nao e mais usada~~ [parte 84] voltou a ser usada:
     e o SINO LIGADO na linha dos rotulos, a direita (app.js, `posicionarAcoes`). */
  .meta > .acoes-item.na-meta { margin: -5px 0 -5px auto; align-self: center; }
  /* [parte 85] A fileira (⋮) na linha dos rotulos quando nao cabe no fim do
     titulo (`ajustarFileiras`, app.js); o sino ligado vem logo DEPOIS dela,
     sem a margem automatica -- duas `auto` dividiriam o espaco e afastariam o
     sino do ⋮. `.medindo` mostra o ⋮ so durante a medida. */
  .meta > .acoes-item.fileira-na-meta { margin: -5px 0 -5px auto; align-self: center; }
  /* [parte 86] Tambem na linha dos botoes "Descricao" / "0/1" (`.cab-lista`). */
  .cab-lista > .acoes-item.fileira-na-meta { margin: -5px 0 -5px auto; align-self: center; }
  /* [2026-10-26, parte 207, Daniel, com print do canvas: "por que a pilula das subtarefas nao
     desceu quando a gaveta de acoes abriu, ja que nao cabia inteira no card?" -- "sim" para a
     correcao] A medida da parte 85 e feita com a gaveta FECHADA (so o ⋮); aberta, a fileira cresce
     e a linha, sem quebra, espremia a pilula (sobrava so o "^"). Agora, com a gaveta aberta nesta
     linha, ela pode quebrar AO CONTRARIO (wrap-reverse): a fileira sobe e a pilula desce inteira.
     Ninguem encolhe. Coube: nada muda. */
  .cab-lista:has(> .acoes-item.fileira-na-meta.abertas) { flex-wrap: wrap-reverse; row-gap: 8px; }
  .cab-lista:has(> .acoes-item.fileira-na-meta.abertas) > * { flex-shrink: 0; }
  .meta > .acoes-item.fileira-na-meta + .acoes-item.na-meta { margin-left: 0; }
  .acoes-item.medindo > .bt-mais { display: grid !important; }
  .acoes-item > button { display: none; }
  .acoes-item > .bt-mais { order: 0; }
  .acoes-item > .bt-sub { order: 1; }
  .acoes-item > .bt-editar { order: 2; }
  .acoes-item > .bt-compartilhar { order: 3; }
  .acoes-item > .bt-lixo { order: 4; }   /* ~~4~~ [SUPERSEDIDO pela parte 192, logo abaixo] */
  /* [2026-10-26, parte 192, Daniel: "em desktop, sempre que o hover for funcional e estiver
     ativado, o icone de remover deve ser o ultimo a esquerda, uma vez que e o mais distante
     de onde se esta com o mouse, que sempre inicia no hover sobre o icone de tres
     pontinhos que abre a gaveta -- ate para evitar que o mouse cruze o icone nessa
     direcao"] O lixo vai para a ponta esquerda da fileira aberta (antes do +). Vale onde
     ha hover, inclusive nos cartoes do canvas, que usam esta mesma fileira. */
  .acoes-item > .bt-lixo { order: -1; }
  .acoes-item > .bt-info { order: 5; }
  .acoes-item > .bt-lembrete { order: 6; }
  .acoes-item > .bt-canva { order: 6; }   /* [parte 190] mesma ordem do sino; vem antes dele no HTML */
  /* [2026-10-25, parte 155, Daniel: "aplique tambem na lista do toDone" -- a
     troca da parte 154 do canvas] Sem lembrete ativo, o sino vem ANTES do ⓘ:
     + editar compartilhar remover sino ⓘ. Com lembrete ligado, nada muda (o
     sino ligado mora fora da fileira, a direita). */
  .acoes-item:has(> .bt-lembrete:not(.ligado)) > .bt-info { order: 7; }
  /* [parte 190] O canvas apagado tambem vem antes do ⓘ, como o sino apagado. */
  .acoes-item:has(> .bt-canva:not(.ligado):not([hidden])) > .bt-info { order: 7; }
  /* [2026-10-26, parte 191, Daniel, com video: "os botoes acesos na tarefa devem
     permanecer onde estao fixados quando for feito hover no icone de tres pontinhos para
     abrir a gaveta; e o icone que aparece na mesma posicao dos tres pontinhos deve ser
     sempre o de informacoes"] A regra de cima (parte 190) punha o ⓘ DEPOIS do sino
     aceso, e o aceso andava para dentro da fileira. Ordem fixa, sem depender de quem esta
     aceso: os apagados (6) · o ⓘ (7, no lugar do ⋮) · o canvas aceso (8) · o sino aceso (9). */
  .acoes-item > .bt-info { order: 7; }
  .acoes-item > .bt-canva.ligado { order: 8; }
  .acoes-item > .bt-lembrete.ligado { order: 9; }
  /* 1. fixos: o sino com lembrete, o ⓘ com as informacoes abertas */
  .acoes-item > .bt-lembrete.ligado,
  .acoes-item > .bt-canva.ligado,
  .item.detalhe > .cartao > :is(.linha, .meta, .cab-lista) .acoes-item > .bt-info { display: grid; }
  /* 2. hover no cartao (ou foco de teclado dentro dele): so o ⋮ a mais */
  .cartao:hover > :is(.linha, .meta, .cab-lista) .acoes-item > .bt-mais,
  .cartao:focus-within > :is(.linha, .meta, .cab-lista) .acoes-item > .bt-mais { display: grid; }
  /* 3. a fileira aberta: todos, menos o ⋮ */
  .acoes-item.abertas > button { display: grid; }
  /* `!important`: a regra do hover no cartao, acima, pesa mais e mostraria o ⋮
     junto -- e ele tem de dar o lugar aos outros. */
  .acoes-item.abertas > .bt-mais { display: none !important; }
}
/* ~~Ligado, o "Lembrete" da linha de acoes do celular ganhava FUNDO verde.~~
   **[SUBSTITUIDO 2026-10-21, parte 91, pedido de Daniel: "o botao lembrete [...]
   deve ficar nu, e com a bolinha verde, conforme esta la no icone de pasta, no
   header [...] do lado direito superior da palavra lembrete"]** -- o MESMO ponto
   do `.conta-pasta` (7 px, cor primaria), no canto de cima a direita da palavra.
   Vai no `::before`: o `::after` do `.bt-texto` e a camada do toque. */
/* **[AJUSTADO no mesmo dia -- Daniel escolheu a "ideia 2" entre tres simuladas]**
   ~~no canto da PALAVRA~~ -> no canto de cima a direita do SINO, como o ponto
   sobre o icone de pasta. O sino ocupa 12-28 px na horizontal e comeca em 10 px
   (padding 8 + alinhamento); o ponto sai 4 px para dentro da borda dele e 3 px
   acima -- as medidas da simulacao aprovada. */
.acoes-linha [data-acao="lembrete"].ligado::before {
  content: ""; position: absolute; top: 7px; left: 24px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--primaria);
}
.pilula.lembrete { background: color-mix(in srgb, var(--primaria) 14%, transparent); color: var(--primaria); font-weight: 600; }
.pilula.lembrete svg.ic { width: 13px; height: 13px; stroke-width: 1.9; flex: none; }
/* Na subtarefa em 375 px, "1 dia antes · qui 22/10 · 09:00" nao cabe numa linha:
   a pilula cresce em vez de espremer duas linhas em 24 px. */
.pilula.lembrete { height: auto; min-height: 24px; padding-top: 4px; padding-bottom: 4px; line-height: 1.25; }
.pilula.lembrete.parado { background: var(--sup-3); color: var(--texto-3); font-weight: 500; }

/* Dialogo do lembrete: os campos do app (o mesmo desenho do seletor de pasta da
   edicao), nada do controle cru do navegador alem do que so ele sabe fazer --
   o calendario e o relogio. */
#dlg-lembrete form { display: flex; flex-direction: column; gap: 14px; }
#dlg-lembrete h2 { margin-bottom: 0; }
#dlg-lembrete .lem-sub { margin: -8px 0 0; overflow-wrap: anywhere; }
.lem-campo {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--texto-2);
}
fieldset.lem-campo { margin: 0; padding: 0; border: 0; }
fieldset.lem-campo legend { padding: 0; margin-bottom: 6px; }
.lem-sel {
  width: 100%; height: 42px; padding: 0 12px; border-radius: var(--r-s);
  border: 1px solid var(--linha-forte); background: var(--sup-1); color: var(--texto);
  font: inherit; font-size: 15px; font-weight: 400; outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.lem-sel:focus { border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 15%, transparent); }
.lem-sel:invalid, .lem-sel.falta { border-color: var(--erro); }
.lem-grade { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 14px 10px; }
.lem-grade > .lem-repete { grid-column: 1 / -1; }
.lem-grade:has(> #lem-campo-data[hidden]) { grid-template-columns: 120px minmax(0, 1fr); }
.lem-grade:has(> #lem-campo-data[hidden]) > .lem-repete { grid-column: auto; }
/* [parte 97] Personalizar: 2 x 2 -- [A cada | Unidade] / [Quantas vezes | Ate].
   O dialogo do toDone e estreito; os quatro numa linha, como no $obControle
   largo, apertariam o numero entre o - e o +. */
.lem-perso { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.lem-perso[hidden] { display: none; }
.lem-passo { display: flex; align-items: stretch; gap: 6px; }
.lem-passo .lem-sel { flex: 1; min-width: 0; padding: 0 6px; text-align: center; }
.lem-passo .lem-sel::placeholder { color: var(--texto-3); font-size: 17px; }
.lem-passo-bt {
  flex: none; width: 38px; height: 42px; border-radius: var(--r-s); cursor: pointer;
  border: 1px solid var(--linha-forte); background: var(--sup-1); color: var(--texto);
  font: inherit; font-size: 18px; line-height: 1;
}
.lem-passo-bt:hover { background: var(--sup-2); }
.lem-passo-bt:focus-visible { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 15%, transparent); }
.lem-dias { display: flex; flex-wrap: wrap; gap: 6px; }
.lem-dias button {
  min-width: 44px; height: 36px; padding: 0 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linha-forte); background: none; color: var(--texto-2);
  font: inherit; font-size: 13px; font-weight: 500;
}
.lem-dias button[aria-pressed="true"] { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); font-weight: 600; }
#dlg-lembrete .lem-resumo {
  margin: 0; padding: 10px 12px; border-radius: var(--r-m); line-height: 1.45;
  background: color-mix(in srgb, var(--primaria) 12%, transparent); color: var(--texto-2); font-size: 13px;
}
.lem-resumo b { color: var(--primaria); }
.lem-resumo.lem-resumo-falta { background: var(--sup-2); }
#dlg-lembrete .bt-preenchido:disabled { opacity: 0.4; cursor: default; }
#dlg-lembrete .aviso-subs { margin: 0; }
#dlg-lembrete menu { margin-top: 6px; }
.lem-faixa {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-m);
  background: var(--secundaria-cont); color: var(--sobre-secundaria-cont); font-size: 13px; line-height: 1.4;
}
.lem-faixa > span { flex: 1; }
.lem-faixa .pilula { height: 32px; flex: none; background: var(--sup-2); color: var(--texto); border-color: var(--linha-forte); }
/* O "Tirar" fica a esquerda, longe do Salvar: errar o dedo entre os dois teria
   o efeito contrario do pretendido. */
menu .lem-tirar { margin-right: auto; color: var(--erro); }
@media (max-width: 480px) {
  #dlg-lembrete menu, #dlg-avisos menu { flex-direction: column-reverse; align-items: stretch; }
  #dlg-lembrete menu button, #dlg-avisos menu button { width: 100%; justify-content: center; text-align: center; }
  menu .lem-tirar { margin-right: 0; }
  .lem-grade { grid-template-columns: minmax(0, 1fr) 108px; }
  .lem-grade:has(> #lem-campo-data[hidden]) { grid-template-columns: 108px minmax(0, 1fr); }
}

/* Avisos: o selo de tres degraus e a lista de aparelhos. */
.av-selo {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; background: var(--sup-2); color: var(--texto-2);
}
.av-selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.av-selo.ligado { background: color-mix(in srgb, var(--primaria) 14%, transparent); color: var(--primaria); }
.av-selo.bloqueado { background: var(--erro-cont); color: var(--sobre-erro-cont); }
#dlg-avisos .av-selo + p { margin-top: 10px; }
/* Tres botoes: rotulo inteiro em cada um; faltando espaco, desce o botao, nao
   a palavra (visto em 663 px: "Mandar um de / teste" em duas linhas). */
#dlg-avisos menu, #dlg-lembrete menu { flex-wrap: wrap; }
#dlg-avisos menu button, #dlg-lembrete menu button { white-space: nowrap; }
#dlg-avisos .comp-lista li { flex-wrap: wrap; }

/* -------------------------------------------------------------- movimento */

@keyframes entrar { from { opacity: 0; transform: translateY(14px); } }
@keyframes surgir { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes subir  { from { opacity: 0; transform: translate(-50%, 12px); } }

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

/* ------------------------------------- controles que abrem [parte 90] --
   Lista do <select>, calendario do <input type=date> e relogio do
   <input type=time> na identidade do app -- `controles.js`, porte do
   $obControle (pedido de Daniel, com video: "as opcoes que abrem [...] nao
   estao na identidade do resto do aplicativo"). Lado FECHADO: seta,
   calendario e relogio sao do app, na cor do tema; o indicador nativo SAI
   (invisivel ele ainda abria o do sistema por cima, no Chrome -- licao de la). */
:root {
  --icone-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23A9B2AA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icone-calendario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A9B2AA' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='2.5' y='3' width='11' height='10.5' rx='2'/%3E%3Cpath d='M2.5 6.5h11M5.5 1.8v2.4M10.5 1.8v2.4'/%3E%3C/svg%3E");
  --icone-relogio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A9B2AA' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath d='M8 4.6V8l2.4 1.5'/%3E%3C/svg%3E");
}
:root[data-tema="claro"] {
  --icone-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%234A524C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icone-calendario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234A524C' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='2.5' y='3' width='11' height='10.5' rx='2'/%3E%3Cpath d='M2.5 6.5h11M5.5 1.8v2.4M10.5 1.8v2.4'/%3E%3C/svg%3E");
  --icone-relogio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234A524C' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath d='M8 4.6V8l2.4 1.5'/%3E%3C/svg%3E");
}
select.lem-sel, select.ed-pasta-sel {
  -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer; text-overflow: ellipsis;
  background-image: var(--icone-seta); background-repeat: no-repeat;
  background-position: right 10px center; background-size: 16px;
}
:is(.lem-sel, .campo-data input):is([type="date"], [data-data]) {
  -webkit-appearance: none; appearance: none; text-align: left; padding-right: 36px;
  background-image: var(--icone-calendario); background-repeat: no-repeat;
  background-position: right 11px center; background-size: 17px;
}
:is(.lem-sel, .campo-data input):is([type="time"], [data-hora]) {
  -webkit-appearance: none; appearance: none; text-align: left; padding-right: 36px;
  background-image: var(--icone-relogio); background-repeat: no-repeat;
  background-position: right 11px center; background-size: 17px;
}
:is(.lem-sel, .campo-data input)::-webkit-calendar-picker-indicator { display: none; }
:is(.lem-sel, .campo-data input)::-webkit-date-and-time-value { text-align: left; }
:is(.lem-sel, .campo-data input)::-webkit-datetime-edit-fields-wrapper { padding: 0; }

/* O PAINEL que abre: folha elevada do app (cor de cartao, borda, sombra e
   canto da casa). Dentro de um <dialog> ele mora no proprio dialogo -- ver o
   cabecalho de `controles.js`. */
.flutuante {
  --realce: color-mix(in srgb, var(--texto) 7%, transparent);
  position: fixed; z-index: 70; overscroll-behavior: contain; display: flex; flex-direction: column;
  background: var(--sup-2); color: var(--texto); border: 1px solid var(--linha-forte);
  border-radius: var(--r-m); box-shadow: var(--sombra-3); overflow-y: auto;
  font-size: 14.5px; font-weight: 400; margin: 0; padding: 0;
}
.flutuante button { font: inherit; color: inherit; cursor: pointer; border: 1px solid transparent; background: none; }
.flutuante .truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-opcoes { display: flex; flex-direction: column; }
.lista-opcoes button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; border-radius: 0; padding: 10px 12px; font-size: 14.5px;
}
.lista-opcoes button + button { border-top: 1px solid var(--linha); }
.lista-opcoes button:hover:not(:disabled), .lista-opcoes button:focus { background: var(--realce); outline: none; }
.lista-opcoes button .truncar { flex: 1; min-width: 0; }
.lista-opcoes button.escolhido { font-weight: 600; color: var(--primaria); }
.lista-opcoes .marca { flex: none; }
.lista-opcoes button:disabled { color: var(--texto-3); }

.calendario { padding: 10px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-topo b { font-size: 14.5px; }
.cal-titulo { display: flex; align-items: center; gap: 6px; }
.flutuante .cal-vista {
  padding: 4px 22px 4px 9px; font-size: 14.5px; font-weight: 600;
  border: 1px solid var(--linha-forte); background-color: var(--sup-1); color: var(--texto); border-radius: var(--r-s);
  background-image: var(--icone-seta); background-repeat: no-repeat;
  background-position: right 5px center; background-size: 13px;
}
.flutuante .cal-vista:hover { background-color: var(--realce); }
.flutuante .cal-vista:focus-visible { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 22%, transparent); }
.cal-grade { display: grid; gap: 4px; flex: 1; min-height: 0; grid-auto-rows: minmax(28px, 40px); align-content: start; }
.cal-meses, .cal-anos { grid-template-columns: repeat(3, 1fr); }
.cal-grade button { height: 100%; padding: 0; font-size: 14px; border-radius: var(--r-s); font-variant-numeric: tabular-nums; }
.cal-grade button:hover:not(:disabled) { background: var(--realce); }
.cal-grade button.escolhido { background: var(--primaria); color: var(--sobre-primaria); font-weight: 600; }
.cal-grade button:disabled { opacity: .35; }
.flutuante .cal-seta { width: 34px; height: 34px; padding: 0; font-size: 19px; border-radius: 999px; }
.flutuante .cal-seta:hover { background: var(--realce); }
.cal-semana, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-semana, .cal-topo, .cal-rodape { flex: none; }
.cal-dias { flex: 1; min-height: 0; grid-auto-rows: minmax(20px, 34px); align-content: start; overflow: hidden; }
.cal-semana span { font-size: 11.5px; color: var(--texto-3); padding: 4px 0; }
.cal-dias button { height: 100%; padding: 0; font-size: 14px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.cal-dias button:hover:not(:disabled) { background: var(--realce); }
.cal-dias button:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; }
.cal-dias button.hoje { border-color: var(--linha-forte); }
.cal-dias button.escolhido { background: var(--primaria); color: var(--sobre-primaria); border-color: var(--primaria); font-weight: 600; }
.cal-dias button:disabled { opacity: .35; }
.cal-rodape { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linha); }
.flutuante button.cal-acao { color: var(--texto-2); padding: 6px 10px; border-radius: var(--r-s); }
.flutuante button.cal-acao:hover { background: var(--realce); color: var(--texto); }

.relogio { align-items: center; }
.rel-topo { justify-content: center; gap: 6px; margin-bottom: 8px; }
.flutuante .rel-aba { font-size: 13px; padding: 4px 12px; color: var(--texto-2); border-radius: 999px; }
.flutuante .rel-aba.ativa { color: var(--primaria); font-weight: 600; background: color-mix(in srgb, var(--primaria) 14%, transparent); }
.rel-face { display: block; touch-action: none; user-select: none; cursor: pointer; }
.rel-fundo { fill: var(--realce); }
.rel-ponteiro { stroke: var(--primaria); stroke-width: 2; }
.rel-alvo, .rel-pino { fill: var(--primaria); }
.rel-num { font-size: 14px; fill: var(--texto); text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; pointer-events: none; }
.rel-interno { font-size: 12.5px; fill: var(--texto-2); }
.rel-sel { fill: var(--sobre-primaria); font-weight: 600; }

/* --------------------------------------- paisagem no celular [parte 92] --
   Pedido de Daniel: uso e visualizacao com o celular DEITADO. Em 360 px de
   altura, o cabecalho preso (74 px) e a barra "Nova tarefa" presa (76 px)
   levavam quase metade da tela. Deitado e baixo: o cabecalho ROLA com a pagina
   (pastas, tema e sair continuam la em cima, a um gesto), o titulo encolhe, e
   a barra de nova tarefa -- o caminho de criar -- continua a mao. */
@media (orientation: landscape) and (max-height: 500px) {
  .topo { position: static; }
  .hero { padding: 14px 0 12px; }
  .hero-titulo { font-size: 32px; }
}