/* Rosa: papel claro, painéis azul-marinho, destaque laranja, rótulos em mono maiúsculo.
   Celular primeiro; a partir de 900 px entra o menu lateral. Claro e escuro pelo sistema. */

@font-face { font-family: "Atkinson Hyperlegible"; src: url("/static/fontes/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/static/fontes/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fontes/bricolage-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fontes/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Azul-marinho estrutural, laranja de destaque (complementares: 214° e 25° no círculo cromático),
     âmbar e azul-claro como apoio. Contraste AA conferido em todos os pares de texto. */
  --papel: #f5f7fa; --papel-2: #e9eef5; --superficie: #ffffff; --tinta: #14233b; --sutil: #56657d; --linha: #d8e0ea;
  --marinho: #12284a; --marinho-2: #1d3a63; --sobre-marinho: #eef3fa; --sobre-marinho-sutil: #a9bad3;
  --laranja: #c2540f; --laranja-texto: #a3460b; --laranja-suave: #fde7d6; --sobre-laranja: #ffffff;
  --azul: #1f5fa8; --azul-suave: #dde9f7; --ambar-menu: #f2c46d; --laranja-menu: #f29a4f;
  --perigo: #b42318; --marca-busca: #ffd2ad;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --texto: "Atkinson Hyperlegible", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --raio: 14px; --toque: 44px; --altura-abas: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0e1726; --papel-2: #1b2b45; --superficie: #15233a; --tinta: #e7eef8; --sutil: #9fb1cb; --linha: #26395a;
    --marinho: #0a1220; --marinho-2: #1a2c49; --sobre-marinho: #eef3fa; --sobre-marinho-sutil: #a9bad3;
    --laranja: #f29a4f; --laranja-texto: #f29a4f; --laranja-suave: #3b2616; --sobre-laranja: #0e1726;
    --azul: #7db3ef; --azul-suave: #17304f; --perigo: #ffa198; --marca-busca: #7a4a1f;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 1rem/1.55 var(--texto); min-height: 100vh;
}
a { color: var(--laranja-texto); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; border-radius: 6px; }
main { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px 40px; }
main:focus { outline: none; }
h1 { font: 700 1.75rem/1.15 var(--display); margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 0 0 10px; }
h3 { font-size: 1.05rem; margin: 0 0 6px; }
h3 a { color: inherit; text-decoration: none; }
h3 a:hover { color: var(--laranja); }
.sutil, .vazio { color: var(--sutil); }
.vazio { margin: 0; }
.invisivel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rotulo, .bloco > h2, .secao {
  font: 500 .8rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sutil);
}
.topo { padding: 20px 0 14px; }
.topo p { margin: 4px 0 0; }
.topo .rotulo { margin: 0 0 4px; }
.icone { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--laranja); display: inline-block; flex: none; }
.marca { font: 700 1.3rem var(--display); color: inherit; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }

/* ---------- casca: celular ---------- */
.pular { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--marinho); color: var(--sobre-marinho);
  padding: 10px 14px; border-radius: 10px; }
.pular:focus { top: 12px; }
.lateral { display: none; }
.barra {
  position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha);
  padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 12px;
}
.busca-global { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.busca-global .icone { position: absolute; left: 12px; color: var(--sutil); width: 20px; height: 20px; pointer-events: none; }
.busca-global input[type=search] {
  width: 100%; min-height: var(--toque); padding: 10px 12px 10px 40px; border-radius: 12px;
  border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta); font: inherit;
}
.busca-global input::placeholder { color: var(--sutil); }
body.com-menu { padding-bottom: calc(var(--altura-abas) + env(safe-area-inset-bottom)); }
.abas {
  position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--superficie); border-top: 1px solid var(--linha);
  padding: 4px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
}
.abas a {
  min-height: 56px; display: grid; justify-items: center; align-content: center; gap: 2px; text-decoration: none;
  color: var(--sutil); font: 500 .72rem var(--mono); letter-spacing: .02em; border-radius: 10px;
}
.abas a.ativo { color: var(--laranja-texto); }
.abas a.ativo .icone { stroke-width: 2.3; }
.abas a.enviar .icone { background: var(--laranja); color: var(--sobre-laranja); border-radius: 50%; padding: 5px; width: 32px; height: 32px; margin-top: -4px; }

/* ---------- casca: computador ---------- */
@media (min-width: 900px) {
  body.com-menu { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto 1fr; padding-bottom: 0; }
  .abas, .barra .marca { display: none; }
  .lateral {
    display: flex; flex-direction: column; gap: 4px; grid-row: 1 / span 2; position: sticky; top: 0; height: 100vh;
    overflow-y: auto; background: var(--marinho); color: var(--sobre-marinho); padding: 18px 12px 20px; gap: 2px;
  }
  .lateral .marca { padding: 2px 10px 12px; }
  .lateral ul { list-style: none; margin: 0; padding: 0; }
  .lateral a {
    display: flex; align-items: center; gap: 10px; justify-content: flex-start; min-height: 34px; padding: 5px 10px;
    border-radius: 8px; color: var(--sobre-marinho-sutil); text-decoration: none; font-size: .95rem;
  }
  .lateral nav a span { flex: 1; }
  .lateral a:hover { color: var(--sobre-marinho); background: color-mix(in srgb, var(--marinho-2) 60%, transparent); }
  .lateral a.ativo { background: var(--marinho-2); color: var(--sobre-marinho); }
  .lateral a.ativo .icone { color: var(--laranja-menu); }
  .lateral a.ativo::before { content: ""; width: 3px; align-self: stretch; margin: 2px 0 2px -10px; border-radius: 3px; background: var(--laranja-menu); }
  .lateral a small { font: 500 .7rem var(--mono); letter-spacing: .08em; color: var(--ambar-menu); }
  .lateral :focus-visible { outline-color: var(--sobre-marinho); }
  .lateral .grupo { font: 500 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sobre-marinho-sutil); margin: 14px 10px 2px; }
  .barra { padding: 14px 32px; background: var(--papel); backdrop-filter: none; }
  .busca-global { max-width: 1160px; margin: 0 auto; }
  .busca-global input[type=search] { max-width: 640px; }
  main { padding: 0 32px 48px; max-width: 1224px; }
  h1 { font-size: 2.1rem; }
}

/* ---------- blocos e cartões ---------- */
.bloco, .card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.bloco + .bloco { margin-top: 12px; }
.bloco > h2 { margin-bottom: 12px; }
.grade-painel { display: grid; gap: 12px; }
.grade-painel .bloco + .bloco { margin-top: 0; }
@media (min-width: 900px) {
  .grade-painel { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .grade-painel .largo { grid-column: 1 / -1; }
}
/* Hoje: no celular uma coluna na ordem de urgência; no computador duas colunas que crescem cada uma no seu ritmo,
   sem buraco embaixo do bloco mais curto. */
.hoje { display: grid; gap: 12px; }
.hoje .coluna { display: contents; }
.hoje #agora { order: 1; } .hoje #precisa { order: 2; } .hoje #tarefas { order: 3; } .hoje #compras { order: 4; } .hoje #projetos { order: 5; } .hoje .largo { order: 6; }
.hoje .bloco + .bloco { margin-top: 0; }
@media (min-width: 900px) {
  .hoje { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
  .hoje .coluna { display: flex; flex-direction: column; gap: 12px; }
  .hoje .largo { grid-column: 1 / -1; }
}
.bloco.escuro { background: var(--marinho); border-color: var(--marinho); color: var(--sobre-marinho); }
.bloco.escuro > h2, .bloco.escuro .sutil, .bloco.escuro .vazio { color: var(--sobre-marinho-sutil); }
.bloco.escuro a { color: var(--laranja-menu); }

.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card img, .foto { width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; }
.card .resumo { margin: 0; color: var(--sutil); overflow-wrap: anywhere; }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.card dt { color: var(--sutil); font: 500 .8rem/1.9 var(--mono); text-transform: lowercase; }
.card dd { margin: 0; overflow-wrap: anywhere; }
.card select { align-self: flex-start; }
.tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { background: var(--papel-2); color: var(--sutil); border-radius: 999px; padding: 2px 10px; font: 500 .8rem/1.6 var(--mono); }

/* ---------- listas do dia ---------- */
.checklist { list-style: none; margin: 0 0 10px; padding: 0; }
.checklist li { border-bottom: 1px solid var(--linha); }
.checklist li:last-child { border-bottom: 0; }
.checklist label { display: flex; gap: 12px; align-items: center; min-height: var(--toque); padding: 6px 0; cursor: pointer; }
.checklist label > span:not(.etiquetas) { flex: 1; overflow-wrap: anywhere; }
.checklist li.feito span { text-decoration: line-through; color: var(--sutil); }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--laranja); flex: none; margin: 0; }
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.agenda li:last-child { border-bottom: 0; }
.agenda .hora { font: 500 .9rem var(--mono); font-variant-numeric: tabular-nums; color: var(--laranja-texto); min-width: 5.4em; flex: none; white-space: nowrap; }
.agenda .o-que { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.agenda .o-que small { display: block; color: var(--sutil); }
.pendencias { list-style: none; margin: 0; padding: 0; }
.pendencias li { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.pendencias li:last-child { border-bottom: 0; }
.pendencias li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pendencias small { display: block; color: var(--sutil); }
.bloco.escuro .pendencias li { border-color: var(--marinho-2); }
.bloco.escuro small, .bloco.escuro .sutil { color: var(--sobre-marinho-sutil); }
a.acao {
  flex: none; min-height: var(--toque); display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px;
  text-decoration: none; font-weight: 700; background: var(--laranja); color: var(--sobre-laranja);
}
.bloco.escuro a.acao { background: var(--sobre-marinho); color: var(--marinho); }
.prazo, .repete { font: 500 .74rem/1.8 var(--mono); letter-spacing: .04em; color: var(--sutil); flex: none; white-space: nowrap;
  background: var(--papel-2); border-radius: 999px; padding: 0 9px; }
.prazo.atrasada, .prazo.hoje { color: var(--perigo); background: color-mix(in srgb, var(--perigo) 12%, transparent); }
.repete { background: var(--azul-suave); color: var(--azul); }
/* Tarefa: no celular as etiquetas (prazo, repetição) vão embaixo do texto; no computador, à direita. */
.checklist label:has(.etiquetas) { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; }
.checklist .etiquetas { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 900px) {
  .checklist label:has(.etiquetas) { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .checklist .etiquetas { grid-column: 3; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 4px; }
}
@media (max-width: 899px) { .agenda .chip { display: none; } }
.urgente { color: var(--perigo); font-weight: 700; }

/* ---------- formulários ---------- */
input, select, button, textarea { font: inherit; }
input[type=text], input[type=search], input:not([type]), input[type=password], select, textarea {
  border: 1px solid var(--linha); background: var(--papel); color: var(--tinta); border-radius: 10px;
  padding: 10px 12px; min-height: var(--toque);
}
input[type=file] { font: inherit; min-height: var(--toque); }
button, a.botao {
  border: 0; border-radius: 10px; padding: 10px 16px; min-height: var(--toque); background: var(--laranja);
  color: var(--sobre-laranja); cursor: pointer; font-weight: 700; display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none;
}
button:hover, a.botao:hover { filter: brightness(1.06); }
button.secundario { background: var(--laranja-suave); color: var(--laranja-texto); }
button.perigo { background: var(--perigo); color: var(--sobre-laranja); }
.adicionar { display: flex; gap: 8px; }
.adicionar input { flex: 1; min-width: 0; }
.adicionar button { min-width: var(--toque); font-size: 1.3rem; padding: 0 14px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.selecionavel { display: flex; flex-direction: column; gap: 6px; }
.marcar { display: flex; gap: 8px; align-items: center; min-height: var(--toque); color: var(--sutil); }
.flutuante { position: sticky; bottom: calc(var(--altura-abas) + 12px + env(safe-area-inset-bottom)); margin-top: 16px; width: 100%; }
@media (min-width: 900px) { .flutuante { bottom: 16px; } }

/* ---------- fichas (filtros e ligações) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chip-link {
  min-height: 40px; display: inline-flex; gap: 6px; align-items: center; padding: 6px 14px; border-radius: 999px;
  text-decoration: none; background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta);
}
.chip-link:hover { border-color: var(--laranja); }
.chip-link.ativo { background: var(--laranja); border-color: var(--laranja); color: var(--sobre-laranja); }
.chip-link small { font: 500 .78rem var(--mono); opacity: .75; }
.chip {
  display: inline-block; font: 500 .74rem/1.7 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 0 9px; background: var(--papel-2); color: var(--sutil); white-space: nowrap;
}
.chip.livro, .chip.pdf { background: var(--laranja-suave); color: var(--laranja-texto); }
.chip.foto, .chip.video, .chip.audio, .chip.drive { background: var(--azul-suave); color: var(--azul); }

/* ---------- busca ---------- */
.resultados { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.resultado { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; min-width: 0; }
.resultado-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.resultado-topo a, .resultado-topo b { font-weight: 700; overflow-wrap: anywhere; }
.resultado .onde { margin: 4px 0 0; color: var(--sutil); font-size: .9rem; overflow-wrap: anywhere; }
.trecho { margin: 8px 0 0; overflow-wrap: anywhere; }
mark { background: var(--marca-busca); color: inherit; border-radius: 3px; padding: 0 2px; }
.secao { margin: 28px 0 10px; }
.erro { color: var(--perigo); margin: 0; }
.aviso { background: var(--laranja-suave); padding: 12px 14px; border-radius: 10px; }

/* esqueleto: enquanto a busca carrega e enquanto as ligações da nota chegam */
.esqueleto { display: grid; gap: 10px; }
.esqueleto i { display: block; height: 14px; border-radius: 6px; background: var(--papel-2); }
.esqueleto i:nth-child(2) { width: 82%; } .esqueleto i:nth-child(3) { width: 64%; }
body.buscando main > * { display: none; }
body.buscando main::before {
  content: ""; display: block; height: 360px; margin-top: 24px; border-radius: var(--raio);
  background:
    linear-gradient(var(--papel-2) 0 0) 0 0 / 40% 22px no-repeat,
    linear-gradient(var(--papel-2) 0 0) 0 52px / 100% 96px no-repeat,
    linear-gradient(var(--papel-2) 0 0) 0 160px / 100% 96px no-repeat,
    linear-gradient(var(--papel-2) 0 0) 0 268px / 100% 92px no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .esqueleto i, body.buscando main::before { animation: pulsar 1.2s ease-in-out infinite alternate; }
}
@keyframes pulsar { from { opacity: 1; } to { opacity: .45; } }

/* ---------- fotos e rostos ---------- */
.galeria { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 900px) { .galeria { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
.galeria figure { margin: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; min-width: 0; }
.galeria img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.galeria figcaption { font-size: .85rem; color: var(--sutil); padding: 6px 8px; overflow-wrap: anywhere; }
.cards.galeria { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.cards.galeria .card { border: 1px solid var(--linha); }
.pessoas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.pessoa { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 6px; text-align: center; }
.pessoa img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.pessoa small { color: var(--sutil); }
.grupo-rostos form { display: flex; flex-direction: column; gap: 10px; }
.rostos { display: flex; flex-wrap: wrap; gap: 8px; }
.rosto { position: relative; line-height: 0; cursor: pointer; }
.rosto img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; border: 2px solid var(--laranja); }
.rosto input { position: absolute; top: 4px; left: 4px; }
.rosto input:not(:checked) + img { opacity: .35; border-color: var(--linha); }
.nomear { display: flex; flex-wrap: wrap; gap: 8px; }
.nomear input { flex: 1 1 220px; min-width: 0; }

/* ---------- Biblioteca e Mais ---------- */
.atalhos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.atalho {
  display: flex; gap: 12px; align-items: center; padding: 14px 16px; min-height: 64px; border-radius: var(--raio);
  background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta); text-decoration: none;
}
.atalho:hover { border-color: var(--laranja); }
.atalho > span { flex: 1; min-width: 0; }
.atalho b { display: block; }
.atalho small { color: var(--sutil); display: block; }
.atalho .chip { flex: none; }
.atalho .icone { color: var(--sutil); width: 18px; height: 18px; }

/* ---------- vigilâncias, totais, tabelas ---------- */
.totais { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 12px 0; }
.totais div { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.totais small { font: 500 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sutil); }
.totais b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.grafico { width: 100%; height: 64px; color: var(--laranja); margin: 4px 0 8px; }
.vigilancia.encerrada { opacity: .65; }
.fontes { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.fontes li { overflow-wrap: anywhere; }
.fontes .sutil { font-size: .9rem; }
.tabela { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--superficie); border-radius: var(--raio); overflow: hidden; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linha); }
th { font: 500 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sutil); }
td img { width: 160px; max-height: 160px; object-fit: cover; border-radius: 8px; }
.corpo { white-space: pre-wrap; overflow-wrap: anywhere; }
code { font-family: var(--mono); font-size: .9em; background: var(--papel-2); padding: 1px 5px; border-radius: 5px; }
.envio { display: flex; flex-direction: column; gap: 12px; }
progress { width: 100%; height: 10px; accent-color: var(--laranja); }

/* ---------- área protegida ---------- */
.topo-protegido { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topo-protegido .secao { margin-top: 12px; }
.olho { background: var(--laranja-suave); color: var(--sutil); padding: 6px 10px; border-radius: 12px; line-height: 0; min-height: var(--toque); }
.olho.aberto { color: var(--laranja); }
.olho .risco { opacity: .8; }
.pin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pin input { width: 7em; letter-spacing: .4em; text-align: center; font-size: 1.2rem; }

/* ---------- entrada e textos ---------- */
body.sem-menu main { padding-top: env(safe-area-inset-top); }
.login { max-width: 380px; margin: 14vh auto 0; display: flex; flex-direction: column; gap: 4px; }
.login .marca { font-size: 2rem; }
.login form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.texto-longo { max-width: 760px; margin-top: 24px; }
.texto-longo h1 { margin-bottom: 4px; }
.texto-longo h2 { margin-top: 20px; }
.rodape { margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.subtitulo { margin: 16px 0 2px; }

/* ---------- Bastidores ---------- */
.filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fila-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; }
.bloco.escuro .totais div { background: var(--marinho-2); border-color: transparent; }
.bloco.escuro .totais small { color: var(--sobre-marinho-sutil); }
.totais .sutil { font-size: .85rem; }
progress { appearance: none; -webkit-appearance: none; border: 0; border-radius: 99px; background: var(--papel-2); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--papel-2); border-radius: 99px; }
progress::-webkit-progress-value { background: var(--laranja); border-radius: 99px; }
progress::-moz-progress-bar { background: var(--laranja); border-radius: 99px; }

/* ---------- Mapa (cartão no estilo dos grafos do CocoIndex; o cartão é sempre azul-marinho) ---------- */
.mapa-busca { margin-bottom: 12px; max-width: 560px; }
.mapa { margin: 0 0 12px; }
.grafo { display: block; width: 100%; height: auto; border-radius: 22px; }
.grafo.largo { display: none; }
@media (min-width: 900px) { .grafo.largo { display: block; } .grafo.alto { display: none; } }
.grafo .fundo { fill: #12284a; }
.grafo .grade { fill: none; stroke: rgb(238 243 250 / .055); stroke-width: 1; }
.grafo .pilula rect { fill: rgb(10 18 32 / .55); stroke: rgb(238 243 250 / .14); }
.grafo .pilula text { font: 600 11.5px var(--mono); letter-spacing: .12em; fill: #dbe5f3; }
.grafo .luz.l1 { fill: #f29a4f; } .grafo .luz.l2 { fill: #f2c46d; } .grafo .luz.l3 { fill: #7db3ef; }
.grafo .cartao rect { fill: #1d3a63; stroke: rgb(238 243 250 / .12); }
.grafo .cartao-titulo { font: 600 11.5px var(--mono); letter-spacing: .12em; fill: #f2c46d; }
.grafo .cartao-linha { font: 500 12.5px var(--mono); fill: #eef3fa; }
.grafo .cartao-tipo { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: #a9bad3; }
.grafo .cartao-rodape { font: italic 500 11px var(--mono); fill: #a9bad3; }
.grafo .seta { fill: none; stroke: #f29a4f; stroke-width: 2; stroke-dasharray: 6 6; }
.grafo .ponta { fill: #f29a4f; }
.grafo .seta-texto { font: 700 11.5px var(--mono); letter-spacing: .12em; fill: #f29a4f; }
.grafo .seta-sub { font: 500 11px var(--mono); fill: #a9bad3; }
.grafo .aresta { fill: none; stroke-width: 1.8; opacity: .85; }
.grafo .aresta.junto { stroke-width: 1.3; opacity: .5; }
.grafo .aresta.entre { stroke: #a9bad3; stroke-width: 1; opacity: .3; stroke-dasharray: 3 5; }
.grafo .no circle { stroke: #12284a; stroke-width: 2.5; }
.grafo .dentro { font: 700 13px var(--mono); fill: #12284a; pointer-events: none; }
.grafo .nome-no { font: 600 12.5px var(--mono); paint-order: stroke; stroke: #12284a; stroke-width: 4px; stroke-linejoin: round; }
.grafo .centro circle { fill: #fdf3e7; stroke: #fdf3e7; }
.grafo .centro .halo { fill: none; stroke: rgb(253 243 231 / .18); stroke-width: 10; }
.grafo .centro .dentro { font: 700 14px var(--texto); }
.grafo a.no:hover circle, .grafo a.no:focus-visible circle { stroke: #fdf3e7; stroke-width: 3; }
.grafo a.no:focus { outline: none; }
.grafo a.no:focus-visible .nome-no { text-decoration: underline; }
.g-pessoa circle, .aresta.g-pessoa { fill: #f29a4f; stroke: #f29a4f; } .g-pessoa .nome-no { fill: #f29a4f; }
.g-lugar circle, .aresta.g-lugar { fill: #7db3ef; stroke: #7db3ef; } .g-lugar .nome-no { fill: #7db3ef; }
.g-coisa circle, .aresta.g-coisa { fill: #f2c46d; stroke: #f2c46d; } .g-coisa .nome-no { fill: #f2c46d; }
.g-ideia circle, .aresta.g-ideia { fill: #a5b4fc; stroke: #a5b4fc; } .g-ideia .nome-no { fill: #a5b4fc; }
.g-obra circle, .aresta.g-obra { fill: #f6b89a; stroke: #f6b89a; } .g-obra .nome-no { fill: #f6b89a; }
.g-outro circle, .aresta.g-outro { fill: #a9bad3; stroke: #a9bad3; } .g-outro .nome-no { fill: #a9bad3; }
.aresta { fill: none !important; }
.ponto-tipo { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
.ponto-tipo.g-pessoa { background: #e8772e; } .ponto-tipo.g-lugar { background: #3f86d6; } .ponto-tipo.g-coisa { background: #e0a93a; }
.ponto-tipo.g-ideia { background: #7c8cf0; } .ponto-tipo.g-obra { background: #ec9a76; } .ponto-tipo.g-outro { background: #8a9bb5; }
.legenda-grafo { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 4px 2px; font: 500 .8rem var(--mono); color: var(--sutil); }
.legenda-grafo span { display: inline-flex; align-items: center; gap: 6px; }
.traco { width: 20px; height: 0; border-top: 2px solid var(--laranja); display: inline-block; }
.traco.junto { border-top: 2px dashed var(--sutil); }

/* ---------- Hoje: projetos compactos e concluídas recolhidas ---------- */
.projetos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.projeto { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linha);
  background: var(--papel); color: var(--tinta); text-decoration: none; min-width: 0; }
.projeto:hover { border-color: var(--laranja); }
.projeto b { overflow-wrap: anywhere; }
.resumo-curto { color: var(--sutil); font-size: .92rem; overflow-wrap: anywhere; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.progresso-linha { display: flex; align-items: center; gap: 10px; }
.progresso-linha progress { flex: 1; height: 6px; }
.progresso-linha small { font: 500 .78rem var(--mono); color: var(--sutil); white-space: nowrap; }
.concluidas { margin: 4px 0 10px; }
.concluidas summary { cursor: pointer; min-height: var(--toque); display: flex; align-items: center; color: var(--sutil);
  font: 500 .8rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.concluidas summary::marker { color: var(--laranja); }

/* ---------- Componentes: caixa de marcar, botões, avisos, estados ---------- */
input[type=checkbox] {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none; cursor: pointer;
  border: 2px solid var(--sutil); border-radius: 6px; background: var(--superficie) center / 16px no-repeat;
  transition: background-color .15s, border-color .15s;
}
input[type=checkbox]:hover { border-color: var(--laranja); }
input[type=checkbox]:checked {
  background-color: var(--laranja); border-color: var(--laranja);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230e1726' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
button.secundario, a.botao.secundario { background: transparent; color: var(--tinta); border: 1.5px solid var(--linha); }
button.secundario:hover { border-color: var(--laranja); filter: none; }
button.perigo { background: transparent; color: var(--perigo); border: 1.5px solid currentColor; }
button.perigo:hover { background: color-mix(in srgb, var(--perigo) 10%, transparent); filter: none; }
.avisos { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--altura-abas) + 14px + env(safe-area-inset-bottom)); width: min(92vw, 420px); }
@media (min-width: 900px) { .avisos { bottom: 24px; left: calc(50% + 124px); } }
.toast { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 8px 8px 8px 16px;
  border-radius: 14px; background: var(--marinho); color: var(--sobre-marinho); box-shadow: 0 12px 30px -12px rgb(0 0 0 / .45); }
.toast-acao { background: transparent; color: var(--laranja-menu); border: 0; min-height: 40px; padding: 0 12px; }
@media (prefers-reduced-motion: no-preference) { .toast { animation: subir .2s ease-out; } }
@keyframes subir { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.estado { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle;
  background: var(--sutil); }
.estado.ok { background: #3f9a5d; } .estado.rodando { background: var(--azul); } .estado.espera { background: var(--sutil); }
.estado.atencao { background: #d99a1e; } .estado.parado { background: var(--perigo); }
.situacao { margin: 4px 0 6px 17px; font-size: .9rem; color: var(--sutil); }
.situacao.parado { color: var(--perigo); }
.status { font: 500 .78rem var(--mono); border-radius: 999px; padding: 1px 10px; white-space: nowrap; flex: none;
  background: var(--papel-2); color: var(--sutil); }
.status.s-processada, .status.s-pronta { background: color-mix(in srgb, #3f9a5d 16%, transparent); color: #1f5c34; }
@media (prefers-color-scheme: dark) { .status.s-processada, .status.s-pronta { color: #8fd1a1; } }
.status.s-pendente, .status.s-processando { background: var(--azul-suave); color: var(--azul); }
.status.s-erro { background: color-mix(in srgb, var(--perigo) 14%, transparent); color: var(--perigo); }

/* ---------- Mapa legível ---------- */
.mapa { max-width: 980px; }
.grafo .aresta.acesa { opacity: 1; stroke-width: 3; }
.grafo .mais-nos rect { fill: rgb(10 18 32 / .6); stroke: rgb(238 243 250 / .2); }
.grafo .mais-nos text { font: 600 12px var(--mono); fill: #dbe5f3; }
.grafo .mais-nos:hover rect { stroke: #f29a4f; }
.grupo-mapa .grupo-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.grupo-mapa h2 { display: flex; align-items: center; gap: 8px; }
.grupo-mapa h2 small { font: 500 .8rem var(--mono); color: var(--sutil); }
.grupo-mapa .chips { margin: 0; }
.grupo-mapa + .grupo-mapa { margin-top: 12px; }
.relacoes li { overflow-wrap: anywhere; }
.topo .rotulo a { color: inherit; }

/* ---------- Notas: abas das áreas ---------- */
.abas-area { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 8px; padding: 0 16px;
  border-bottom: 1px solid var(--linha); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent); }
.abas-area::-webkit-scrollbar { display: none; }
.abas-area a { flex: none; min-height: var(--toque); display: inline-flex; align-items: center; gap: 6px; padding: 0 14px;
  color: var(--sutil); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas-area a:hover { color: var(--tinta); }
.abas-area a.ativo { color: var(--tinta); font-weight: 700; border-bottom-color: var(--laranja); }
.abas-area small { font: 500 .66rem var(--mono); letter-spacing: .08em; color: var(--sutil); }
@media (min-width: 900px) { .abas-area { margin: 0 0 8px; padding: 0; -webkit-mask-image: none; mask-image: none; } }
.contagem { margin: 4px 0 12px; }
/* Carregando: o que está esperando o servidor fica esmaecido e não aceita outro toque. */
.htmx-request, .htmx-request label { opacity: .55; pointer-events: none; transition: opacity .15s; }
form.htmx-request button[type=submit] { cursor: progress; }
.atalho-mapa { margin: 0 0 14px; border-color: var(--laranja); }