/* =========================================================
   Fontes — hospedadas localmente em assets/fonts (sem depender do
   Google Fonts). Cobrem o subset "latin" (U+0000-00FF), que já
   inclui os acentos do português (á, é, ç, ã, õ etc.).
   ========================================================= */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/fraunces-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/fraunces-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/fraunces-500-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/work-sans-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/work-sans-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/work-sans-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/work-sans-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Icrumbs — design tokens
   ========================================================= */
:root {
  --amarelo:        #FFCC00;
  --amarelo-escuro: #E6B800;
  --acento:         #4D657F;
  --marinho:        #203E5F;
  --tinta:          var(--marinho);
  --tinta-suave:    #868686;
  --branco:         #FFFFFF;
  --salvia:         #EAEDF0;
  --menta:          #F3F3F3;
  --creme:          #F4F5F7;
  --manteiga:       #FFF9E0;
  --linha:          #D5D5D5;
  --fundo-neutro:   #F3F3F3;
  --cinza-medio:    #868686;
  --erro:           var(--tinta);
  --erro-fundo:     var(--manteiga);
  --sucesso:        var(--acento);
  --sucesso-fundo:  var(--salvia);

  --fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fonte-corpo:  'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --raio-grande: 32px;
  --raio-medio:  14px;
  --raio-pequeno: 8px;

  --sombra: 0 12px 30px -14px rgba(36, 31, 16, 0.35);

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo-neutro);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
  min-height: 100vh;
}

h1, h2, h3, .titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinta);
  margin: 0;
}

a {
  color: var(--acento);
  text-decoration: none;
}
a:hover, a:focus-visible { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

button, input, select, textarea { font-family: inherit; font-size: 1rem; }

/* ---------------------------------------------------------
   Campos de formulário
   --------------------------------------------------------- */
.campo {
  margin-bottom: 26px;
}

.campo label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-bottom: 8px;
}

.campo input {
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--linha);
  background: transparent;
  padding: 12px 4px;
  color: var(--tinta);
  transition: border-color 0.15s ease;
}
.campo input::placeholder { color: var(--tinta-suave); opacity: 0.6; }
.campo input:focus {
  border-bottom-color: var(--amarelo-escuro);
  outline: none;
}

.campo-pin-wrap { position: relative; }
.alternar-pin {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-6px);
  background: none;
  border: none;
  color: var(--tinta-suave);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px;
}

/* ---------------------------------------------------------
   Botões
   --------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 999px;
  background: var(--amarelo);
  color: var(--branco);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform 0.12s ease, background 0.15s ease, opacity 0.15s ease;
}
.botao:hover { background: var(--amarelo-escuro); }
.botao:active { transform: scale(0.98); }
.botao:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* Botão com cara de link (ex.: "Reenviar e-mail de ativação", logo
   abaixo do botão principal de um formulário). */
.botao-link {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 6px 0;
  border: none;
  background: none;
  color: var(--acento);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.botao-link:hover { color: var(--amarelo-escuro); }
.botao-link:disabled { color: inherit; opacity: 0.55; text-decoration: none; cursor: default; }

/* ---------------------------------------------------------
   "Permanecer conectado" (interruptor / toggle)
   --------------------------------------------------------- */
.campo-lembrar-conectado {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -6px 0 18px;
  cursor: pointer;
}
.interruptor { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.interruptor input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.interruptor-trilho {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.interruptor-bolinha {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--branco);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(36, 31, 16, 0.35);
  transition: transform 0.2s ease;
}
.interruptor:has(input:checked) .interruptor-trilho,
.interruptor input:checked ~ .interruptor-trilho {
  background: var(--branco);
  border-color: var(--branco);
}
.interruptor:has(input:checked) .interruptor-bolinha,
.interruptor input:checked ~ .interruptor-trilho .interruptor-bolinha {
  background: var(--acento);
  transform: translateX(18px);
}
.interruptor-texto { color: var(--branco); opacity: 0.9; font-size: 0.88rem; font-weight: 600; }

.campo-lembrar-conectado-claro .interruptor-texto { color: var(--tinta-suave); opacity: 1; }
.campo-lembrar-conectado-claro .interruptor-trilho { background: var(--menta); border-color: var(--linha); }
.campo-lembrar-conectado-claro .interruptor:has(input:checked) .interruptor-trilho,
.campo-lembrar-conectado-claro .interruptor input:checked ~ .interruptor-trilho {
  background: var(--acento);
  border-color: var(--acento);
}
.campo-lembrar-conectado-claro .interruptor:has(input:checked) .interruptor-bolinha,
.campo-lembrar-conectado-claro .interruptor input:checked ~ .interruptor-trilho .interruptor-bolinha {
  background: var(--branco);
}

/* ---------------------------------------------------------
   Links auxiliares e mensagens
   --------------------------------------------------------- */
.links-auxiliares {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}
.links-auxiliares-claro { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 0.9rem; }
.links-auxiliares-claro a { color: var(--acento); font-weight: 600; text-decoration: none; }
.links-auxiliares-claro a:hover { text-decoration: underline; }

.rodape-privacidade { text-align: center; margin-top: 20px; }
.rodape-privacidade a { color: rgba(32, 62, 95, 0.55); font-size: 0.8rem; }

.mensagem {
  border-radius: var(--raio-pequeno);
  padding: 14px 16px;
  font-size: 0.9rem;
  margin-bottom: 24px;
  width: 100%;
  max-width: 380px;
}
.mensagem-erro { background: var(--erro-fundo); color: var(--erro); }
.mensagem-sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }

/* ---------------------------------------------------------
   Chip de tag (usado no mockup do cartão)
   --------------------------------------------------------- */
.chip-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--manteiga);
  color: var(--acento);
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}
.chip-tag-pequena {
  padding: 3px 10px;
  font-size: 0.74rem;
  border: none;
}

/* =========================================================
   Login com apresentação dividida (index.php) — amarelo só na
   faixa da logo; o resto fica neutro, com um mockup de crumb de
   verdade como elemento decorativo em vez de foto de banco de imagem.
   ========================================================= */
.pagina-login-dividida {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--branco);
}
@media (min-width: 900px) {
  .pagina-login-dividida { flex-direction: row; }
}

.lado-apresentacao {
  flex: 1;
  padding: 56px 28px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--menta);
  gap: 20px;
}
@media (min-width: 900px) {
  .lado-apresentacao { align-items: center; text-align: center; padding: 0 6vw; }
}

.mockup-crumb-flutuante { position: relative; width: 100%; max-width: 340px; margin: 24px 0 100px; }

.forma-fundo-decorativa {
  position: absolute;
  top: -24px;
  right: -20px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: var(--manteiga);
  z-index: 0;
}

.foto-principal-apresentacao {
  position: relative;
  z-index: 1;
  width: 250px;
  height: 300px;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--raio-medio);
  border: 4px solid var(--branco);
  box-shadow: var(--sombra);
  display: block;
}

.mockup-cartao {
  position: absolute;
  z-index: 3;
  right: -36px;
  bottom: -50px;
  width: 210px;
  box-sizing: border-box;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-medio);
  box-shadow: var(--sombra);
  padding: 14px 16px;
  transform: rotate(4deg);
}
.mockup-data { font-size: 0.72rem; font-weight: 700; color: var(--acento); }
.mockup-texto { font-size: 0.86rem; color: var(--tinta); margin: 6px 0 10px; line-height: 1.4; }
.mockup-selo-flutuante {
  position: absolute;
  top: -16px;
  left: 190px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra);
  transform: rotate(8deg);
  z-index: 4;
}

.mockup-comentario-flutuante {
  position: absolute;
  bottom: -92px;
  left: -6px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--branco);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  box-shadow: var(--sombra);
  max-width: 210px;
}
.avatar-foto {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.mockup-comentario-texto { font-size: 0.76rem; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.foto-decorativa-polaroid {
  position: absolute;
  top: -22px;
  left: -30px;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--raio-pequeno);
  border: 4px solid var(--branco);
  box-shadow: var(--sombra);
  transform: rotate(-9deg);
  z-index: 2;
}

.headline-login {
  font-family: var(--fonte-titulo);
  font-size: 1.7rem;
  line-height: 1.25;
  color: var(--tinta);
  max-width: 420px;
  margin: 0;
}
.destaque-headline { color: var(--acento); }
/* margin-top extra pra abrir uma respiração entre ele e os links de
   "Esqueci minha senha"/"Quero me cadastrar" logo acima. */
.link-saiba-mais { font-weight: 700; color: var(--marinho); text-decoration: none; margin-top: 12px; }
.link-saiba-mais:hover { text-decoration: underline; }

/* Desktop: a arte cresce bastante — o contêiner passa a ocupar 70% do
   espaço livre do lado de apresentação, e cada elemento escala junto. */
@media (min-width: 900px) {
  .mockup-crumb-flutuante {
    width: 70%;
    max-width: 760px;
    margin: 24px 0 150px;
  }
  .forma-fundo-decorativa {
    width: 46%;
    height: 0;
    padding-bottom: 46%;
    top: -6%;
    right: -5%;
  }
  .foto-principal-apresentacao {
    width: 62%;
    height: auto;
    aspect-ratio: 5 / 6;
    object-position: top center;
  }
  .foto-decorativa-polaroid {
    width: 20%;
    height: auto;
    aspect-ratio: 1 / 1;
    top: -8%;
    left: -9%;
  }
  .mockup-selo-flutuante {
    width: 76px;
    height: 76px;
    top: -30px;
    left: 46%;
  }
  .mockup-selo-flutuante svg { width: 34px; height: 34px; }
  .mockup-cartao {
    width: 54%;
    right: -8%;
    bottom: -14%;
    padding: 26px 30px;
  }
  .mockup-data { font-size: 1rem; }
  .mockup-texto { font-size: 1.2rem; margin: 10px 0 16px; }
  .mockup-cartao .chip-tag-pequena { font-size: 0.9rem; padding: 5px 14px; }
  .mockup-comentario-flutuante {
    bottom: -19%;
    left: -2%;
    max-width: 60%;
    padding: 10px 24px 10px 10px;
  }
  .avatar-foto { width: 52px; height: 52px; }
  .mockup-comentario-texto { font-size: 1.05rem; }
  .headline-login { font-size: 1.9rem; max-width: 560px; }
}

.lado-login { flex: none; width: 100%; background: var(--branco); }
@media (min-width: 900px) {
  .lado-login { width: 400px; box-shadow: -8px 0 24px -18px rgba(32, 62, 95, 0.3); }
}

.faixa-logo-login { background: var(--amarelo); padding: 28px; display: flex; justify-content: center; }
.faixa-logo-login img { width: 55%; max-width: 190px; height: auto; display: block; }

.corpo-lado-login { padding: 32px 28px 44px; max-width: 360px; margin: 0 auto; }

/* =========================================================
   Carregamento em AJAX (assets/js/roteador.js) — o miolo de cada
   página (ex.: paginas/saiba-mais.php) é injetado dentro de
   #conteudo-lado-apresentacao. Esse elemento usa display:contents pra
   não interferir no layout flex do .lado-apresentacao — é como se seus
   filhos estivessem direto dentro dele, como antes.
   .lado-apresentacao vira "relative" pra poder hospedar o spinner,
   centralizado, enquanto busca o miolo. O atributo data-rota é setado
   pelo roteador antes de injetar, pra cada página poder ter seu
   próprio ajuste aqui no CSS, se precisar. */
.lado-apresentacao { position: relative; }

#conteudo-lado-apresentacao { display: contents; }

/* Enquanto uma página está sendo buscada, o conteúdo anterior some e
   só o spinner fica visível, centralizado no espaço. */
.spinner-carregando { display: none; }
.lado-apresentacao-carregando #conteudo-lado-apresentacao { display: none; }
.lado-apresentacao-carregando .spinner-carregando {
  display: block;
  margin: auto;
}

/* ---------------------------------------------------------
   Spinner — modelo usado de fato pelo roteador (modelo 2 do
   spinners-demo.html: anel duplo, os dois traços em amarelo). Pra
   trocar de novo, basta reaproveitar outro modelo de lá dentro de
   .spinner-carregando.
   --------------------------------------------------------- */
.spinner-carregando {
  width: 144px;
  height: 144px;
  position: relative;
}
.spinner-carregando::before,
.spinner-carregando::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 12px solid transparent;
}
.spinner-carregando::before {
  border-top-color: var(--amarelo);
  border-bottom-color: var(--amarelo);
  animation: icrumbs-girar 1s linear infinite;
}
.spinner-carregando::after {
  inset: 24px;
  border-left-color: var(--amarelo);
  border-right-color: var(--amarelo);
  animation: icrumbs-girar 0.7s linear infinite reverse;
}
@keyframes icrumbs-girar { to { transform: rotate(360deg); } }

/* =========================================================
   Miolo da página "Saiba mais" (paginas/saiba-mais.php) — segue o
   mesmo espírito do mockup do index (foto tipo "impressa", com
   decorações), só que com a foto do lado e o texto ao lado dela, em
   vez de embaixo. Empilhado no mobile, lado a lado a partir de 900px.
   ========================================================= */
.apresentacao-saiba-mais {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 36px;
  text-align: center;
}
@media (min-width: 900px) {
  .apresentacao-saiba-mais { flex-direction: row; align-items: center; text-align: left; gap: 56px; }
}

.cartao-foto-saiba-mais {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 300px;
  margin: 44px 56px 88px 48px;
}

/* Segundo círculo decorativo, além do .forma-fundo-decorativa que já
   existe pro mockup do index — aqui os dois aparecem juntos, um em
   cada canto, pra dar mais profundidade ao cartão. */
.forma-fundo-decorativa-2 {
  position: absolute;
  top: -28px;
  right: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--amarelo);
  opacity: 0.5;
  z-index: 0;
}

.cartao-foto-saiba-mais .forma-fundo-decorativa {
  top: auto;
  bottom: -26px;
  left: -30px;
  right: auto;
  width: 200px;
  height: 200px;
}

.foto-saiba-mais {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--raio-medio);
  border: 5px solid var(--branco);
  box-shadow: var(--sombra);
  transform: rotate(-4deg);
}

/* As duas fotos menores, no mesmo estilo "polaroid" do
   .foto-decorativa-polaroid do index — uma em cada canto livre do
   cartão principal. */
.foto-mini-saiba-mais {
  position: absolute;
  z-index: 3;
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: var(--raio-pequeno);
  border: 4px solid var(--branco);
  box-shadow: var(--sombra);
}
.foto-mini-saiba-mais-1 {
  top: -34px;
  left: -44px;
  transform: rotate(-9deg);
}
.foto-mini-saiba-mais-2 {
  bottom: 50px;
  right: -50px;
  transform: rotate(8deg);
}

.cartao-foto-saiba-mais .mockup-selo-flutuante {
  top: auto;
  left: auto;
  bottom: -18px;
  right: 40px;
  z-index: 4;
}

@media (min-width: 900px) {
  .cartao-foto-saiba-mais { width: 520px; max-width: 40%; margin: 24px 60px 60px 70px; }
  .foto-mini-saiba-mais { width: 128px; height: 128px; }
  .forma-fundo-decorativa-2 { width: 160px; height: 160px; }
}

.texto-saiba-mais {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 420px;
}
@media (min-width: 900px) {
  .texto-saiba-mais { align-items: flex-start; max-width: 460px; }
}

.texto-saiba-mais .lista-recursos-apresentacao {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.texto-saiba-mais .lista-recursos-apresentacao li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--tinta);
}
.texto-saiba-mais .lista-recursos-apresentacao svg { flex: none; color: var(--acento); }

.texto-saiba-mais .link-voltar-login {
  color: var(--acento);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   Miolo da página de erro (paginas/erro.php) — mostrada pelo roteador
   (assets/js/roteador.js) sempre que um fetch falha (rota sem
   fragmento, HTTP fora da faixa 2xx, ou qualquer outro erro de rede).
   Segue o mesmo esquema visual das outras telas: foto tipo "impressa",
   decorações de fundo e selo flutuante — só que com o texto de erro no
   lugar do conteúdo normal.
   ========================================================= */
.apresentacao-erro {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 36px;
  text-align: center;
}
@media (min-width: 900px) {
  .apresentacao-erro { flex-direction: row; align-items: center; text-align: left; gap: 56px; }
}

.cartao-foto-erro {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 300px;
  margin: 44px 56px 88px 48px;
}

.cartao-foto-erro .forma-fundo-decorativa {
  top: auto;
  bottom: -26px;
  left: -30px;
  right: auto;
  width: 200px;
  height: 200px;
}

.foto-erro {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 15%;
  border-radius: var(--raio-medio);
  border: 5px solid var(--branco);
  box-shadow: var(--sombra);
  transform: rotate(3deg);
}

.cartao-foto-erro .mockup-selo-flutuante {
  top: auto;
  left: auto;
  bottom: -18px;
  right: 40px;
  z-index: 4;
  background: var(--acento);
  color: var(--branco);
}

@media (min-width: 900px) {
  .cartao-foto-erro { width: 520px; max-width: 40%; margin: 24px 60px 60px 70px; }
}

.texto-erro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 420px;
}
@media (min-width: 900px) {
  .texto-erro { align-items: flex-start; max-width: 460px; }
}

.codigo-erro {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acento);
}

.texto-introdutorio-erro {
  font-size: 1rem;
  color: var(--tinta-suave);
  line-height: 1.5;
  max-width: 420px;
}

.texto-erro .botao-erro {
  display: inline-flex;
  margin-top: 8px;
  max-width: 260px;
  text-decoration: none;
}

.texto-erro .link-voltar-login {
  color: var(--acento);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   Miolo da página "Esqueci minha senha" (paginas/esqueci-senha.php) —
   mesmo esquema de foto "impressa" com decorações das outras telas,
   com um formulário curto ao lado (reaproveita .campo/.botao já usados
   no login).
   ========================================================= */
.apresentacao-esqueci-senha {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 36px;
  text-align: center;
}
@media (min-width: 900px) {
  .apresentacao-esqueci-senha { flex-direction: row; align-items: center; text-align: left; gap: 56px; }
}

.cartao-foto-esqueci-senha {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 300px;
  margin: 44px 56px 88px 48px;
}

.cartao-foto-esqueci-senha .forma-fundo-decorativa {
  top: auto;
  bottom: -26px;
  left: -30px;
  right: auto;
  width: 200px;
  height: 200px;
}

.foto-esqueci-senha {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--raio-medio);
  border: 5px solid var(--branco);
  box-shadow: var(--sombra);
  transform: rotate(-3deg);
}

.cartao-foto-esqueci-senha .mockup-selo-flutuante {
  top: auto;
  left: auto;
  bottom: -18px;
  right: 40px;
  z-index: 4;
}

@media (min-width: 900px) {
  .cartao-foto-esqueci-senha { width: 520px; max-width: 40%; margin: 24px 60px 60px 70px; }
}

.texto-esqueci-senha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 380px;
}
@media (min-width: 900px) {
  .texto-esqueci-senha { align-items: flex-start; max-width: 400px; }
}

.form-esqueci-senha {
  width: 100%;
  margin-top: 6px;
}
.form-esqueci-senha .campo { margin-bottom: 18px; text-align: left; }

.texto-esqueci-senha .link-voltar-login {
  color: var(--acento);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   Miolo da página "Quero me cadastrar" (paginas/cadastro.php) — mesmo
   esquema de foto "impressa" com decorações das outras telas, com o
   formulário de cadastro ao lado (reaproveita .campo/.botao já usados
   no login e em "esqueci minha senha").
   ========================================================= */
.apresentacao-cadastro {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 36px;
  text-align: center;
}
@media (min-width: 900px) {
  .apresentacao-cadastro { flex-direction: row; align-items: center; text-align: left; gap: 56px; }
}

.cartao-foto-cadastro {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 300px;
  margin: 44px 56px 88px 48px;
}

.cartao-foto-cadastro .forma-fundo-decorativa {
  top: auto;
  bottom: -26px;
  left: -30px;
  right: auto;
  width: 200px;
  height: 200px;
}

.foto-cadastro {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: var(--raio-medio);
  border: 5px solid var(--branco);
  box-shadow: var(--sombra);
  transform: rotate(4deg);
}

.cartao-foto-cadastro .mockup-selo-flutuante {
  top: auto;
  left: auto;
  bottom: -18px;
  right: 40px;
  z-index: 4;
}

@media (min-width: 900px) {
  .cartao-foto-cadastro { width: 520px; max-width: 40%; margin: 24px 60px 60px 70px; }
}

.texto-cadastro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 380px;
}
@media (min-width: 900px) {
  .texto-cadastro { align-items: flex-start; max-width: 400px; }
}

.form-cadastro {
  width: 100%;
  margin-top: 6px;
}
.form-cadastro .campo { margin-bottom: 18px; text-align: left; }

.texto-cadastro .link-voltar-login {
  color: var(--acento);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   Shell da área logada (inicio.php) — cabeçalho amarelo com a logo
   branca, menu principal e rodapé. O conteúdo das páginas internas
   entra em #conteudo-app-miolo (num próximo passo, via roteador).

   Menu:
     - celular (< 900px): barra fixa embaixo, SÓ ícones (o rótulo
       .menu-rotulo fica escondido — continua em aria-label/title);
     - desktop (>= 900px): no próprio cabeçalho, itens principais
       com ícone + palavra, utilitários (notificações, ajuda, sair)
       só com ícone.
   ========================================================= */

/* Guarda de sessão (script no <head> do inicio.php): enquanto
   redireciona pro login, nada aparece. */
html.sem-sessao body { visibility: hidden; }

:root {
  --altura-barra-menu: 64px;
}

.shell-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--fundo-neutro);
}

/* ---------- Cabeçalho ---------- */
.cabecalho-app {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--amarelo);
  color: var(--branco);
  padding-top: env(safe-area-inset-top);
  box-shadow: 0 6px 18px -12px rgba(32, 62, 95, 0.45);
}

.cabecalho-app-interno {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  min-height: 60px;
}

.logo-app { display: inline-flex; flex: none; }
.logo-app img { display: block; width: 116px; height: auto; }
.logo-app:hover, .logo-app:focus-visible { text-decoration: none; }
.logo-app:focus-visible { outline-color: var(--branco); }

/* ---------- Menu principal: celular (barra inferior, só ícones) ---------- */
.menu-principal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--branco);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -6px 18px -12px rgba(32, 62, 95, 0.35);
  padding-bottom: env(safe-area-inset-bottom);
}

.menu-principal-lista {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  list-style: none;
  margin: 0 auto;
  padding: 0 4px;
  max-width: 560px;
  height: var(--altura-barra-menu);
}

.menu-item { flex: 1 1 0; display: flex; }

.menu-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--tinta-suave);
  font: inherit;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}
.menu-link:hover, .menu-link:focus-visible { color: var(--marinho); text-decoration: none; }
.menu-link:focus-visible { outline-offset: -4px; border-radius: var(--raio-pequeno); }

.menu-icone { display: inline-flex; }
.icone-menu { width: 24px; height: 24px; display: block; }

/* No celular o rótulo existe só pra leitores de tela (o link já tem
   aria-label, então aqui ele some por completo). */
.menu-rotulo { display: none; }

/* Item ativo: ícone amarelo (a barra é branca) + tracinho amarelo em cima. */
.menu-link[aria-current="page"] { color: var(--amarelo); }
.menu-link[aria-current="page"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 3px;
  margin-left: -12px;
  border-radius: 0 0 3px 3px;
  background: var(--amarelo);
}

/* ---------- Conteúdo ---------- */
.conteudo-app {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
}

/* Mesmo spinner do login: aparece quando o shell ganha a classe
   conteudo-app-carregando (o roteador vai usar isso depois). */
/* (Com o id nas duas regras: antes a que esconde tinha o id e a que
   mostra não — o id vencia e o spinner nunca aparecia na troca de página.) */
#conteudo-app > .spinner-carregando { display: none; }
#conteudo-app.conteudo-app-carregando > .conteudo-app-miolo { display: none; }
#conteudo-app.conteudo-app-carregando > .spinner-carregando { display: block; margin: auto; }

.boas-vindas-app {
  background: var(--branco);
  border-radius: var(--raio-medio);
  padding: 28px 24px;
  box-shadow: var(--sombra);
}
.titulo-boas-vindas { font-size: 1.7rem; }
.texto-boas-vindas { margin: 10px 0 0; color: var(--tinta-suave); line-height: 1.5; }

/* ---------- Rodapé ---------- */
.rodape-app {
  color: var(--tinta-suave);
  font-size: 0.8rem;
  /* no celular, deixa espaço pra barra fixa do menu não cobrir o rodapé */
  padding-bottom: calc(var(--altura-barra-menu) + env(safe-area-inset-bottom));
}
.rodape-app-interno {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px 20px;
  border-top: 1px solid var(--linha);
}

/* ---------- Desktop: menu no cabeçalho, misto de palavras e ícones ----------
   Regra do projeto: texto sobre fundo amarelo é sempre BRANCO. */
@media (min-width: 900px) {
  .cabecalho-app-interno {
    justify-content: space-between;
    padding: 10px 28px;
    min-height: 72px;
  }
  .logo-app img { width: 140px; }

  .menu-principal {
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .menu-principal-lista {
    height: auto;
    max-width: none;
    padding: 0;
    gap: 4px;
    justify-content: flex-end;
  }

  .menu-item { flex: none; }

  .menu-link {
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--branco);
    font-size: 0.92rem;
    font-weight: 600;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .menu-link:hover, .menu-link:focus-visible {
    color: var(--branco);
    background: rgba(255, 255, 255, 0.18);
  }
  .menu-link:focus-visible { outline-color: var(--branco); outline-offset: 2px; }

  .icone-menu { width: 20px; height: 20px; }

  /* Itens principais mostram a palavra; utilitários, só o ícone. */
  .menu-item-principal .menu-rotulo { display: inline; }
  .menu-item-utilitario .menu-link { padding: 0; width: 42px; }

  /* Separador sutil antes do primeiro utilitário (notificações). */
  .menu-item-principal + .menu-item-utilitario {
    margin-left: 10px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.45);
  }

  /* Ativo: pílula branca com texto/ícone amarelo. */
  .menu-link[aria-current="page"],
  .menu-link[aria-current="page"]:hover {
    color: var(--amarelo);
    background: var(--branco);
  }
  .menu-link[aria-current="page"]::before { display: none; }

  .conteudo-app { padding: 40px 28px; }
  .boas-vindas-app { padding: 40px; }
  .titulo-boas-vindas { font-size: 2.1rem; }

  .rodape-app { padding-bottom: 0; }
  .rodape-app-interno { padding: 22px 28px 28px; }
}

/* =========================================================
   Mobile: nas páginas "Saiba mais", "Quero me cadastrar" e
   "Esqueci minha senha" o painel de login (logo + formulário) some —
   cada uma já tem o próprio "← Voltar" pro login. O id do <body> vem
   do JSON de cada página (posição 2) e, ao abrir a URL direto, já é
   definido logo no início do <body> do index.php (sem "piscar").
   ========================================================= */
@media (max-width: 899px) {
  body#pagina-saiba-mais .lado-login,
  body#pagina-cadastro .lado-login,
  body#pagina-esqueci-senha .lado-login {
    display: none;
  }
}

/* =========================================================
   Área logada — peças comuns das páginas internas
   ========================================================= */

/* Rota do app aberta direto pela URL: esconde a tela de login até o
   roteador trocar pro shell do app (ver index.php). */
html.carregando-app body { visibility: hidden; }
/* ...mas com o spinner no lugar da tela em branco: o mesmo anel duplo
   do .spinner-carregando, desenhado nos pseudo-elementos do <body>
   (visibility: visible vale mesmo com o body escondido). Some junto com
   a classe, quando a página está montada. */
html.carregando-app body::before,
html.carregando-app body::after {
  content: '';
  position: fixed;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  border-radius: 50%;
  border: 12px solid transparent;
  visibility: visible;
  pointer-events: none;
  z-index: 1000;
}
html.carregando-app body::before {
  width: 144px;
  height: 144px;
  margin: -72px 0 0 -72px;
  border-top-color: var(--amarelo);
  border-bottom-color: var(--amarelo);
  animation: icrumbs-girar 1s linear infinite;
}
html.carregando-app body::after {
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-left-color: var(--amarelo);
  border-right-color: var(--amarelo);
  animation: icrumbs-girar 0.7s linear infinite reverse;
}

.botao-boas-vindas { width: auto; padding: 0 28px; margin-top: 22px; }

.erro-app { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.erro-app .codigo-erro { display: block; margin-bottom: 8px; }
.foto-erro-app {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio-medio);
  border: 4px solid var(--branco);
  box-shadow: var(--sombra);
}
@media (min-width: 900px) {
  .erro-app { flex-direction: row; align-items: center; gap: 36px; }
}

.cabecalho-pagina-app { margin-bottom: 18px; }
.titulo-pagina-app { font-size: 1.7rem; }
.subtitulo-pagina-app { margin: 6px 0 0; color: var(--tinta-suave); font-size: 0.92rem; }

.cartao-app {
  background: var(--branco);
  border-radius: var(--raio-medio);
  padding: 20px 18px;
  margin-bottom: 16px;
  box-shadow: 0 10px 26px -20px rgba(32, 62, 95, 0.45);
}
@media (min-width: 900px) {
  .titulo-pagina-app { font-size: 2.1rem; }
  .cartao-app { padding: 26px 28px; }
}

.subtitulo-bloco {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  margin: 0 0 6px;
}
.subtitulo-bloco label { cursor: pointer; }
.texto-ajuda-bloco { margin: 0 0 14px; color: var(--tinta-suave); font-size: 0.86rem; line-height: 1.45; }

.conteudo-app .mensagem { max-width: none; margin-bottom: 14px; }

/* Botões secundários (fundo branco, texto marinho) e mini. */
.botao-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  color: var(--marinho);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.botao-secundario:hover { border-color: var(--acento); background: var(--fundo-neutro); }
.botao-secundario:disabled { opacity: 0.5; cursor: not-allowed; }
.botao-secundario svg { width: 18px; height: 18px; flex: none; }

.botao-mini {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  color: var(--acento);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.botao-mini:hover { border-color: var(--acento); }

.botao-link-inline {
  border: none;
  background: none;
  padding: 0;
  color: var(--acento);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* =========================================================
   Novo crumb (paginas/novo-crumb.php)
   ========================================================= */
.novo-crumb { width: 100%; max-width: 860px; margin: 0 auto; }

.aviso-rascunho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--raio-pequeno);
  background: var(--salvia);
  color: var(--acento);
  font-size: 0.88rem;
}
.aviso-rascunho[hidden] { display: none; }

/* Título + data */
.linha-titulo-data { display: grid; gap: 4px 24px; }
/* min-width: 0 impede que um item largo estique a grade pra fora do
   cartão (era isso que empurrava a linha do Título pra fora da tela). */
.linha-titulo-data > * { min-width: 0; }
.linha-titulo-data .campo { margin-bottom: 8px; }
@media (min-width: 700px) {
  .linha-titulo-data { grid-template-columns: 1fr auto; align-items: end; }
}
.opcional { font-weight: 400; opacity: 0.8; }

/* Celular: o campo de data ocupa a linha toda e os atalhos (Hoje,
   Ontem, Sem data) ficam na linha de baixo. A partir de 700px, tudo
   na mesma linha. */
.data-com-atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
.data-com-atalhos input[type="date"] { flex: 1 1 100%; min-width: 0; }
.data-com-atalhos .botao-mini[hidden] { display: none; }
@media (min-width: 700px) {
  .data-com-atalhos { flex-wrap: nowrap; }
  .data-com-atalhos input[type="date"] { flex: 1 1 auto; min-width: 150px; }
}

/* Texto do crumb: textarea comum, 100% da largura, ~15 linhas. */
.rotulo-texto-crumb {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-bottom: 8px;
}
.texto-crumb {
  display: block;
  width: 100%;
  min-height: calc(15 * 1.55em + 28px);
  padding: 14px 16px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-pequeno);
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 0.15s ease;
}
.texto-crumb:focus { outline: none; border-color: var(--amarelo-escuro); }
.texto-crumb::placeholder { color: var(--tinta-suave); opacity: 0.7; }

.barra-texto-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 12px;
}
.dica-barra-texto { color: var(--tinta-suave); font-size: 0.82rem; flex-basis: 100%; }
@media (min-width: 700px) {
  .dica-barra-texto { flex-basis: auto; flex: 1; }
}
.mensagem-barra-texto:not(:empty) { margin-top: 12px; }

/* Trechos ocultos (lista abaixo do texto) */
.bloco-ocultos { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); }
.bloco-ocultos[hidden] { display: none; }
.lista-ocultos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item-oculto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: var(--raio-pequeno);
  background: var(--fundo-neutro);
  border-left: 3px solid var(--acento);
}
.texto-item-oculto { font-size: 0.9rem; color: var(--tinta); word-break: break-word; flex: 1 1 220px; }
.acoes-item-oculto { display: flex; gap: 6px; }

/* Valores encontrados */
.bloco-valores[hidden] { display: none; }
.lista-valores { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.valor-item {
  padding: 12px 14px;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--linha);
  background: var(--branco);
}
.valor-item.valor-com-tags { border-left-color: var(--amarelo); }
.valor-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.valor-rotulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.15rem; color: var(--marinho); }
.valor-tipo, .valor-selo-oculto {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--acento);
  background: var(--salvia);
  padding: 2px 8px;
  border-radius: 999px;
}
.valor-selo-oculto { background: var(--fundo-neutro); color: var(--tinta-suave); }
.valor-situacao { flex-basis: 100%; font-size: 0.78rem; color: var(--tinta-suave); }
@media (min-width: 700px) {
  .valor-situacao { flex-basis: auto; margin-left: auto; }
}
.valor-com-tags .valor-situacao { color: var(--acento); font-weight: 600; }
.valor-contexto { margin: 4px 0 8px; font-size: 0.82rem; color: var(--tinta-suave); word-break: break-word; }
/* Descrição opcional do valor (aparece nos potes) */
.valor-descricao-caixa { position: relative; margin-top: 8px; }
.valor-descricao {
  display: block;
  width: 100%;
  padding: 6px 34px 6px 0;
  border: 0;
  border-bottom: 2px solid var(--linha);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  color: var(--marinho);
  transition: border-color 0.15s ease;
}
.valor-descricao::placeholder { color: var(--tinta-suave); }
.valor-descricao:focus { outline: none; border-bottom-color: var(--amarelo-escuro); }
.valor-descricao-sugerida { color: var(--tinta-suave); font-style: italic; }
.valor-descricao-sugerida:focus { color: var(--marinho); font-style: normal; }
.valor-descricao-limpar {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--acento);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.valor-descricao-limpar:hover, .valor-descricao-limpar:focus-visible { background: var(--fundo-neutro); }
.valor-descricao-limpar[hidden] { display: none; }

/* Campo de tags (chips + digitação) */
.campo-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 0 6px;
  border-bottom: 2px solid var(--linha);
  transition: border-color 0.15s ease;
}
.campo-tags:focus-within { border-bottom-color: var(--amarelo-escuro); }
.chips-tags { display: contents; list-style: none; }
.chip-tag-removivel { cursor: default; padding: 4px 4px 4px 12px; }
.remover-chip {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--acento);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.remover-chip:hover { background: rgba(77, 101, 127, 0.14); }
/* Tag que ainda não existe: selo "nova" (configurável logo abaixo). */
.chip-tag-nova { border-color: var(--acento); border-style: dashed; }
.chip-tag-selo-nova { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--acento); color: var(--branco); }
.chip-tag-selo-nova svg { width: 12px; height: 12px; }
.dica-tag-nova { margin: 12px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--tinta-suave); }
.dica-tag-nova[hidden] { display: none; }
.dica-tag-nova .chip-tag-selo-nova { display: inline-flex; vertical-align: -4px; margin-right: 6px; }
/* Módulo de compartilhar da tag nova, dentro do do crumb: sem moldura
   nem título repetido (o <summary> com o nome da tag já é o título). */
.config-tag-nova-corpo .area-compartilhar-tag .bloco-compartilhar { margin: 0; padding: 0; border: none; box-shadow: none; background: none; }
.config-tag-nova-corpo .bloco-compartilhar > .subtitulo-bloco { display: none; }
.link-dica-tag-nova { padding: 0; border: none; background: none; color: var(--acento); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.config-tags-novas-crumb { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }

/* Configurar tags novas já no Novo/Editar crumb. */
.config-tags-novas { margin-top: 14px; display: grid; gap: 8px; }
.config-tags-novas[hidden] { display: none; }
.rotulo-config-tags-novas { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--tinta-suave); }
.config-tag-nova { border: 1px solid var(--linha); border-radius: var(--raio-medio); background: var(--branco); }
.config-tag-nova-ativa { border-color: var(--acento); }
.config-tag-nova-resumo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.config-tag-nova-resumo::-webkit-details-marker { display: none; }
.config-tag-nova-resumo::after { content: '▾'; margin-left: auto; color: var(--acento); }
.config-tag-nova[open] > .config-tag-nova-resumo::after { content: '▴'; }
.config-tag-nova-nome { font-weight: 700; color: var(--marinho); word-break: break-word; }
.config-tag-nova-estado { font-size: 0.8rem; color: var(--tinta-suave); }
.config-tag-nova-ativa .config-tag-nova-estado { color: var(--acento); font-weight: 600; }
.config-tag-nova-corpo { padding: 0 14px 14px; }
.config-tag-nova-corpo .texto-ajuda-bloco a { font-weight: 700; }
.entrada-tags {
  flex: 1 1 160px;
  min-width: 120px;
  border: none;
  background: transparent;
  padding: 8px 2px;
  color: var(--tinta);
}
.entrada-tags:focus { outline: none; }

.sugestoes-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.sugestoes-tags[hidden] { display: none; }
.rotulo-sugestoes { font-size: 0.8rem; color: var(--tinta-suave); margin-right: 4px; }
.lista-sugestoes-tags { display: contents; }
.chip-sugestao { background: var(--fundo-neutro); color: var(--acento); font-family: inherit; }
.chip-sugestao:hover { border-color: var(--acento); }

/* Anexos */
.botoes-anexo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 12px; }
.botao-anexo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 10px 4px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-medio);
  background: var(--branco);
  color: var(--marinho);
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.botao-anexo:hover { border-color: var(--acento); background: var(--fundo-neutro); }
.botao-anexo svg { width: 24px; height: 24px; }

.entrada-oculta { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.lista-anexos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-items: start; }
@media (min-width: 700px) {
  .lista-anexos { grid-template-columns: repeat(2, 1fr); }
}
.anexo-item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linha);
  border-radius: var(--raio-medio);
  overflow: hidden;
  background: var(--branco);
}
.anexo-midia { background: var(--fundo-neutro); }
.anexo-midia img, .anexo-midia video { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.anexo-midia video { object-fit: contain; background: var(--marinho); }
.anexo-midia audio { display: block; width: 100%; padding: 14px 10px; }
.anexo-documento {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  color: var(--marinho);
  text-decoration: none;
}
.anexo-documento:hover { text-decoration: none; }
.anexo-extensao {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 60px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--acento);
  color: var(--branco);
  font-size: 0.78rem;
  font-weight: 700;
}
.anexo-nome { font-weight: 600; word-break: break-word; }
.anexo-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px 12px; }
.anexo-detalhes { flex-basis: 100%; font-size: 0.8rem; color: var(--tinta-suave); }
.anexo-legenda {
  flex: 1 1 160px;
  border: none;
  border-bottom: 2px solid var(--linha);
  padding: 8px 2px;
  background: transparent;
  color: var(--tinta);
}
.anexo-legenda:focus { outline: none; border-bottom-color: var(--amarelo-escuro); }
.botao-remover-anexo { margin-left: auto; }

/* Salvar: no celular fica "grudado" acima da barra do menu. */
.acoes-novo-crumb {
  position: sticky;
  bottom: calc(var(--altura-barra-menu) + env(safe-area-inset-bottom) + 10px);
  z-index: 5;
  margin-top: 8px;
}
@media (min-width: 900px) {
  .acoes-novo-crumb { position: static; display: flex; justify-content: flex-end; }
  .acoes-novo-crumb .botao { width: auto; padding: 0 40px; }
}

/* Gravador (foto/vídeo/áudio dentro da página) */
.gravador-fundo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(32, 62, 95, 0.72);
}
.gravador {
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  overflow: auto;
  padding: 20px;
  border-radius: var(--raio-medio);
  background: var(--branco);
  box-shadow: var(--sombra);
  text-align: center;
}
.gravador-titulo { font-size: 1.3rem; margin-bottom: 14px; }
.gravador-previa {
  display: block;
  width: 100%;
  max-height: 55vh;
  border-radius: var(--raio-pequeno);
  background: var(--marinho);
  object-fit: contain;
}
.gravador-audio { display: flex; justify-content: center; padding: 28px 0 8px; }
.gravador-ponto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--salvia);
  transition: background 0.2s ease;
}
.gravando .gravador-ponto { background: var(--amarelo); animation: pulsar-gravacao 1.2s ease-in-out infinite; }
@keyframes pulsar-gravacao {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.82); }
}
.gravador-tempo {
  margin-top: 12px;
  font-family: var(--fonte-titulo);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--marinho);
  font-variant-numeric: tabular-nums;
}
.gravador-tempo:empty { display: none; }
.gravador-aviso { margin-top: 8px; font-size: 0.88rem; color: var(--acento); }
.gravador-aviso:empty { display: none; }
.gravador-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.gravador-botoes .botao { width: auto; padding: 0 28px; }
.gravador-botoes [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .gravando .gravador-ponto { animation: none; }
}

/* Notificação fixa no topo da tela (ex.: "Crumb salvo") — ver
   notificarTopo() em assets/js/novo-crumb.js. */
.notificacao-topo {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 50%;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 32px);
  max-width: 520px;
  padding: 12px 10px 12px 14px;
  border-radius: var(--raio-medio);
  border-left: 5px solid var(--amarelo);
  background: var(--branco);
  color: var(--marinho);
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 14px 34px -12px rgba(32, 62, 95, 0.55);
  opacity: 0;
  transform: translate(-50%, -16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.notificacao-topo.visivel { opacity: 1; transform: translate(-50%, 0); }
.notificacao-topo-icone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--branco);
}
.notificacao-topo-texto { flex: 1; line-height: 1.35; }
.notificacao-topo-fechar {
  flex: none;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-suave);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.notificacao-topo-fechar:hover { background: var(--fundo-neutro); color: var(--marinho); }
@media (prefers-reduced-motion: reduce) {
  .notificacao-topo { transition: none; }
}

/* =========================================================
   Crumbs — lista (paginas/crumbs.php, assets/js/crumbs.js)
   ========================================================= */
.pagina-crumbs { width: 100%; max-width: 860px; margin: 0 auto; }

.cabecalho-crumbs { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.botao-novo-crumb-lista { flex: none; text-decoration: none; }
.botao-novo-crumb-lista:hover { text-decoration: none; }
@media (max-width: 699px) {
  .botao-novo-crumb-lista { display: none; } /* no celular o "+" do menu já faz isso */
}

/* Busca + botões de filtro */
.barra-busca-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

/* Escopo da lista (Meus crumbs): Todos / Só os meus / Que compartilhei /
   Compartilharam comigo — fora do painel de filtros, mesmo visual das abas. */
.escopo-crumbs {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 2px;
  padding: 3px;
  margin-bottom: 12px;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  width: max-content;
  max-width: 100%;
}
.escopo-crumbs button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}
.escopo-crumbs button:hover { color: var(--marinho); }
.escopo-crumbs button[aria-checked="true"] { background: var(--amarelo); color: var(--branco); }
.escopo-rotulo-curto { display: none; }
@media (max-width: 599px) {
  .escopo-crumbs { grid-template-columns: repeat(4, 1fr); width: 100%; }
  .escopo-crumbs button { padding: 0 6px; font-size: 0.82rem; }
  .escopo-rotulo-longo { display: none; }
  .escopo-rotulo-curto { display: inline; }
}
.remotos-crumbs[hidden] { display: none; }
.remotos-crumbs > .spinner-carregando { margin: 40px auto; }
.remotos-crumbs > .spinner-pequeno { margin: 18px auto; }
.botao-link-aviso {
  border: none; background: none; padding: 0;
  font: inherit; font-weight: 700; color: var(--acento);
  text-decoration: underline; cursor: pointer;
}
.campo-busca {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--branco);
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  transition: border-color 0.15s ease;
}
.campo-busca:focus-within { border-color: var(--amarelo-escuro); }
.campo-busca-icone { display: inline-flex; padding-left: 14px; color: var(--tinta-suave); }
.entrada-busca-crumbs, .entrada-busca-inicio, .entrada-busca-compartilhados {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 8px 0 10px;
  border: none;
  background: transparent;
  color: var(--tinta);
  -webkit-appearance: none;
  appearance: none;
}
.entrada-busca-crumbs:focus, .entrada-busca-inicio:focus, .entrada-busca-compartilhados:focus { outline: none; }
.entrada-busca-crumbs::-webkit-search-cancel-button, .entrada-busca-inicio::-webkit-search-cancel-button, .entrada-busca-compartilhados::-webkit-search-cancel-button { display: none; }
.entrada-busca-crumbs::placeholder, .entrada-busca-inicio::placeholder, .entrada-busca-compartilhados::placeholder { color: var(--tinta-suave); opacity: 0.8; }
.limpar-busca {
  flex: none;
  width: 34px;
  height: 34px;
  margin-right: 6px;
  border: none;
  border-radius: 50%;
  background: var(--fundo-neutro);
  color: var(--tinta-suave);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.limpar-busca[hidden] { display: none; }

/* Botão da lupa (assets/js/busca.js): a busca só acontece nele ou no
   Enter — nunca enquanto digita. Com texto digitado e ainda não buscado
   (.busca-pendente), a lupa fica amarela, pra lembrar de apertar. */
.campo-busca[hidden] { display: none; }
.campo-busca-com-botao > input { padding-left: 18px; }
.botao-buscar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 4px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.botao-buscar:hover { color: var(--marinho); background: var(--fundo-neutro); }
.botao-buscar:focus-visible { outline: 2px solid var(--amarelo-escuro); outline-offset: 1px; }
.busca-pendente .botao-buscar,
.busca-pendente .botao-buscar:hover { background: var(--amarelo); color: var(--branco); }
.campo-busca-inicio .botao-buscar { width: 44px; height: 44px; margin-right: 5px; }
.campo-busca-com-botao .limpar-busca { margin-right: 2px; }
/* Caixas "soltas" que ganharam a moldura (Procurar tag, Gerenciar). */
.campo-busca-compacto { flex: none; width: 100%; margin-bottom: 10px; }
.campo-busca-compacto .botao-buscar { width: 34px; height: 34px; margin-right: 3px; }
.campo-busca > .busca-tags-filtro {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 9px 8px 9px 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
}
.campo-busca > .busca-tags-filtro:focus { outline: none; }
.campo-busca-compacto:has(.busca-tags-gerenciar) { margin-bottom: 12px; }

.botao-icone {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--linha);
  border-radius: 50%;
  background: var(--branco);
  color: var(--marinho);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.botao-icone:hover { border-color: var(--acento); }
.botao-icone[hidden] { display: none; }
/* Filtro ativo: fundo amarelo, ícone branco + pontinho marinho. */
.botao-filtros-ativo, .botao-filtros-ativo:hover { background: var(--amarelo); border-color: var(--amarelo); color: var(--branco); }
/* Meus crumbs com o agrupamento por data desligado: mesmo destaque. */
.botao-agrupar-desligado, .botao-agrupar-desligado:hover { background: var(--amarelo); border-color: var(--amarelo); color: var(--branco); }
.indicador-filtro {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--marinho);
  border: 2px solid var(--branco);
}
.indicador-filtro[hidden] { display: none; }
.botao-limpar-filtros { color: var(--acento); }

.filtros-ativos { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; }
.filtros-ativos[hidden] { display: none; }
.chip-filtro-ativo { cursor: default; }

/* Estados (carregando, vazio) */
.estado-lista-crumbs .spinner-carregando { margin: 40px auto; }
.estado-lista-crumbs:empty { display: none; }
.lista-vazia {
  padding: 34px 24px;
  border-radius: var(--raio-medio);
  background: var(--branco);
  text-align: center;
}
.lista-vazia-titulo { margin: 0; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.2rem; color: var(--marinho); }
.lista-vazia-texto { margin: 6px 0 18px; color: var(--tinta-suave); font-size: 0.92rem; }
.botao-lista-vazia { width: auto; padding: 0 28px; text-decoration: none; }
.botao-lista-vazia:hover { text-decoration: none; }

/* Cartões */
.lista-crumbs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cartao-crumb {
  padding: 16px 18px;
  border-radius: var(--raio-medio);
  background: var(--branco);
  border-left: 4px solid transparent;
  box-shadow: 0 10px 26px -22px rgba(32, 62, 95, 0.5);
}
.item-crumb-grupo .cartao-crumb { border-left-color: var(--amarelo); }
.cartao-crumb-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.cartao-crumb-data {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--acento);
}
.cartao-crumb-qtd {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--acento);
  background: var(--salvia);
  padding: 2px 9px;
  border-radius: 999px;
}
.cartao-crumb-icones { display: inline-flex; gap: 6px; margin-left: auto; color: var(--tinta-suave); }
.icone-anexo { display: inline-flex; }
.cartao-crumb-titulo { font-size: 1.12rem; line-height: 1.3; margin: 2px 0 4px; word-break: break-word; }
.cartao-crumb-trecho {
  margin: 0;
  color: var(--tinta);
  font-size: 0.92rem;
  line-height: 1.5;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.cartao-crumb-trecho-linha { -webkit-line-clamp: 2; line-clamp: 2; }
.trecho-vazio { color: var(--tinta-suave); font-style: italic; }
.cartao-crumb-reticencias { margin: 0; color: var(--tinta-suave); line-height: 1.1; font-weight: 700; letter-spacing: 0.1em; }
.cartao-crumb mark, .cartao-crumb-titulo mark {
  background: var(--manteiga);
  color: inherit;
  border-radius: 3px;
  box-shadow: 0 0 0 2px var(--manteiga);
}
.sentinela-lista { height: 1px; }

@media (min-width: 900px) {
  .cartao-crumb { padding: 18px 24px; }
}

/* ---------- Painel de filtros ---------- */
html.painel-filtros-aberto, html.painel-filtros-aberto body,
html.visualizador-aberto, html.visualizador-aberto body { overflow: hidden; }

.painel-filtros-fundo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(32, 62, 95, 0);
  transition: background 0.2s ease;
}
.painel-filtros-fundo[hidden] { display: none; }
.painel-filtros-fundo.visivel { background: rgba(32, 62, 95, 0.55); }

.painel-filtros {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 92dvh;
  max-height: 92vh;
  border-radius: 22px 22px 0 0;
  background: var(--branco);
  box-shadow: var(--sombra);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.painel-filtros-fundo.visivel .painel-filtros { transform: none; opacity: 1; }
@media (min-width: 700px) {
  .painel-filtros-fundo { align-items: center; padding: 24px; }
  .painel-filtros { max-width: 520px; max-height: 90vh; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .painel-filtros, .painel-filtros-fundo { transition: none; }
}

.painel-filtros-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px 22px;
  border-bottom: 1px solid var(--fundo-neutro);
}
.painel-filtros-cabeca h2 { font-size: 1.3rem; }
.fechar-painel-filtros {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--fundo-neutro);
  color: var(--marinho);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.painel-filtros-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 22px 12px; }
.painel-filtros-rodape {
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--fundo-neutro);
}
.painel-filtros-rodape .botao-secundario { flex: none; min-height: 52px; }
.painel-filtros-rodape .botao { flex: 1; min-height: 52px; }

.grupo-filtro { padding: 14px 0 16px; }
.grupo-filtro + .grupo-filtro { border-top: 1px solid var(--linha); }
.grupo-filtro-cabeca { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.grupo-filtro-cabeca h3 { font-size: 1.05rem; }
.grupo-filtro-cabeca .botao-link-inline[hidden] { display: none; }

.alternador-modo-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--fundo-neutro);
}
.alternador-modo-data button {
  min-height: 38px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.alternador-modo-data button[aria-checked="true"] {
  background: var(--branco);
  color: var(--marinho);
  box-shadow: 0 2px 8px -4px rgba(32, 62, 95, 0.4);
}

/* Calendário */
.calendario-filtro { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cal-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.cal-nav {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--branco);
  color: var(--marinho);
  cursor: pointer;
}
.cal-nav:hover { border-color: var(--acento); }
.cal-titulo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--marinho);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.08rem;
  cursor: pointer;
}
.cal-titulo:hover { background: var(--fundo-neutro); }
.cal-titulo-seta { display: inline-flex; transition: transform 0.15s ease; }
.cal-titulo[aria-expanded="true"] .cal-titulo-seta { transform: rotate(180deg); }

.cal-semana, .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-semana span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tinta-suave);
  padding: 4px 0;
}
.cal-dia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  aspect-ratio: 1 / 1;
  min-height: 42px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  cursor: pointer;
}
.cal-dia:hover { background: var(--fundo-neutro); }
.cal-num { font-size: 0.92rem; line-height: 1; }
.cal-tem-crumbs .cal-num { font-weight: 700; color: var(--marinho); }
.cal-qtd {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--salvia);
  color: var(--acento);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.35;
}
.cal-hoje .cal-num { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--amarelo); }
.cal-no-periodo { background: var(--manteiga); border-radius: 0; }
.cal-inicio-periodo { border-radius: 12px 0 0 12px; }
.cal-fim-periodo { border-radius: 0 12px 12px 0; }
.cal-inicio-periodo.cal-fim-periodo { border-radius: 12px; }
/* Selecionado: amarelo com texto branco (regra do projeto). */
.cal-selecionado, .cal-selecionado:hover { background: var(--amarelo); }
.cal-selecionado .cal-num { color: var(--branco); font-weight: 700; text-decoration-color: var(--branco); }
.cal-selecionado .cal-qtd { background: rgba(255, 255, 255, 0.35); color: var(--branco); }

.cal-entra-proximo { animation: cal-entra-direita 0.22s ease; }
.cal-entra-anterior { animation: cal-entra-esquerda 0.22s ease; }
@keyframes cal-entra-direita { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes cal-entra-esquerda { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cal-entra-proximo, .cal-entra-anterior { animation: none; }
}

.cal-meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 0; }
.cal-mes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 58px;
  justify-content: center;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pequeno);
  background: var(--branco);
  color: var(--marinho);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cal-mes:hover { border-color: var(--acento); }
.cal-mes-atual { background: var(--amarelo); border-color: var(--amarelo); color: var(--branco); }
.cal-mes-atual .cal-qtd { background: rgba(255, 255, 255, 0.35); color: var(--branco); }

.cal-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.cal-dica { font-size: 0.76rem; color: var(--tinta-suave); }
@media (pointer: fine) {
  .cal-dica { visibility: hidden; } /* sem tela de toque, não há swipe */
}

.campos-periodo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.campos-periodo[hidden] { display: none; }
.campo-periodo span { display: block; font-size: 0.8rem; font-weight: 600; color: var(--tinta-suave); margin-bottom: 4px; }
.campo-periodo input {
  width: 100%;
  min-width: 0;
  padding: 10px 2px;
  border: none;
  border-bottom: 2px solid var(--linha);
  background: transparent;
  color: var(--tinta);
}
.campo-periodo input:focus { outline: none; border-bottom-color: var(--amarelo-escuro); }
.resumo-filtro-data { margin: 12px 0 0; font-size: 0.84rem; color: var(--acento); }

.busca-tags-filtro {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  color: var(--tinta);
}
.busca-tags-filtro[hidden] { display: none; }
.busca-tags-filtro:focus { outline: none; border-color: var(--amarelo-escuro); }
.lista-tags-filtro { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-tag-filtro { font-family: inherit; background: var(--fundo-neutro); gap: 6px; }
.chip-tag-filtro:hover { border-color: var(--acento); }
.chip-tag-qtd { font-size: 0.72rem; opacity: 0.75; }
.chip-tag-marcada, .chip-tag-marcada:hover { background: var(--amarelo); border-color: var(--amarelo); color: var(--branco); }

/* ---------- Filtro por tipo de anexo (chips com ícone) ----------
   Dentro do painel na página Crumbs; fora, sempre à vista, na Galeria. */
.filtro-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-tipo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  color: var(--marinho);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.chip-tipo:hover { border-color: var(--acento); }
.chip-tipo svg { flex: none; }
.chip-tipo-qtd { font-size: 0.72rem; opacity: 0.7; }
.chip-tipo-marcado, .chip-tipo-marcado:hover { background: var(--amarelo); border-color: var(--amarelo); color: var(--branco); }
.chip-tipo-marcado .chip-tipo-qtd { opacity: 0.9; }

/* Busca dentro do painel (galeria) */
.campo-busca-painel { background: var(--branco); }
.busca-painel-filtros {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px 0 10px;
  border: none;
  background: transparent;
  color: var(--tinta);
  -webkit-appearance: none;
  appearance: none;
}
.busca-painel-filtros:focus { outline: none; }

/* =========================================================
   Galeria (paginas/galeria.php, assets/js/galeria.js)
   ========================================================= */
.pagina-galeria { width: 100%; max-width: 1100px; margin: 0 auto; }

.barra-galeria { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.filtro-tipos-fora { flex: 1 1 100%; }
.acoes-galeria { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 900px) {
  .filtro-tipos-fora { flex: 1 1 auto; }
}
/* Celular: fora do painel, os tipos cabem numa linha só (ícone + número). */
@media (max-width: 599px) {
  .filtro-tipos-fora { flex-wrap: nowrap; gap: 6px; }
  .filtro-tipos-fora .chip-tipo { flex: 1 1 0; justify-content: center; padding: 0 8px; min-height: 42px; }
  .filtro-tipos-fora .chip-tipo-rotulo { display: none; }
  .filtro-tipos-fora .chip-tipo-qtd { font-size: 0.8rem; }
  .barra-galeria .acoes-galeria { width: 100%; justify-content: space-between; }
  .barra-galeria .acoes-galeria .alternador-visualizacao { margin-right: auto; }
}

.alternador-visualizacao {
  display: inline-flex;
  padding: 3px;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
}
.alternador-visualizacao button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
}
.alternador-visualizacao button:hover { color: var(--marinho); }
.alternador-visualizacao button[aria-checked="true"] { background: var(--amarelo); color: var(--branco); }

.estado-lista-galeria .spinner-carregando { margin: 40px auto; }
.estado-lista-galeria:empty { display: none; }

.grade-galeria { list-style: none; margin: 0; padding: 0; display: grid; }
.grade-galeria-pequena { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 3px; }
.grade-galeria-grande { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.grade-galeria-lista { grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 900px) {
  .grade-galeria-pequena { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px; }
  .grade-galeria-grande { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
}

.botao-item-galeria {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.botao-item-galeria:focus-visible { outline-offset: 1px; }

.miniatura-galeria {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--salvia);
}
.grade-galeria-grande .miniatura-galeria { border-radius: var(--raio-medio); }
.miniatura-galeria img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; }
.botao-item-galeria:hover .miniatura-galeria img { transform: scale(1.03); }

/* Ícone genérico (áudio, documento, ou foto/vídeo sem miniatura) */
.miniatura-generica {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--acento);
}
.miniatura-generica-audio { background: var(--manteiga); }
.miniatura-generica-documento { background: var(--fundo-neutro); border: 1px solid var(--linha); }
.miniatura-pendente .miniatura-generica-icone { animation: pulsar-miniatura 1.2s ease-in-out infinite; }
@keyframes pulsar-miniatura { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .miniatura-pendente .miniatura-generica-icone { animation: none; }
}
.grade-galeria-pequena .miniatura-generica-icone svg { width: 24px; height: 24px; }
.miniatura-extensao {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--acento);
  color: var(--branco);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.selo-midia {
  position: absolute;
  left: 5px;
  bottom: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--marinho);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
}
.selo-audio { padding-left: 7px; }
.grade-galeria-grande .selo-midia { left: 8px; bottom: 8px; font-size: 0.76rem; }

.nome-documento-grade {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--marinho);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lista */
.grade-galeria-lista .botao-item-galeria {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  border-radius: var(--raio-medio);
  background: var(--branco);
  box-shadow: 0 10px 26px -22px rgba(32, 62, 95, 0.5);
}
.grade-galeria-lista .miniatura-galeria { flex: none; width: 72px; border-radius: 10px; }
.grade-galeria-lista .miniatura-generica-icone svg { width: 26px; height: 26px; }
.grade-galeria-lista .selo-midia { left: 4px; bottom: 4px; font-size: 0.62rem; }
.info-galeria { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.info-galeria-titulo { font-weight: 600; color: var(--marinho); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-galeria-meta { font-size: 0.76rem; color: var(--acento); }
.info-galeria-crumb { font-size: 0.82rem; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Visualizador (claro — regra do projeto: nada de fundo escuro) ---------- */
.visualizador {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  background: var(--fundo-neutro);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.visualizador-topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.visualizador-contador { flex: 1; font-size: 0.86rem; font-weight: 600; color: var(--acento); }
.visualizador-baixar { min-height: 40px; text-decoration: none; }
.visualizador-baixar:hover { text-decoration: none; }
.visualizador-baixar[hidden] { display: none; }
.visualizador-fechar {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--branco);
  color: var(--marinho);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px -8px rgba(32, 62, 95, 0.5);
}
.visualizador-palco { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px; }
.visualizador-midia { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.visualizador-foto, .visualizador-video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra);
  background: var(--branco);
}
/* Visualizadores (galeria e fotos do crumb): setas no topo (como no
   cabeçalho do crumb) e trilho com o anterior e o próximo já carregados
   dos lados (swipe — assets/js/arrasto.js). */
.visualizador-navegacao { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.visualizador-navegacao .visualizador-contador { flex: none; min-width: 64px; text-align: center; }
.visualizador-topo-nav { background: var(--branco); }
/* A pinça é do zoom da foto (assets/js/zoom.js), não do navegador. */
.visualizador-galeria .visualizador-palco { padding: 0; overflow: hidden; touch-action: pan-y; }
.visualizador-galeria .visualizador-foto { touch-action: none; cursor: zoom-in; transform-origin: 50% 50%; will-change: transform; }
.visualizador-galeria .zoom-ampliado .visualizador-painel-atual .visualizador-foto { cursor: grab; }
.visualizador-galeria .zoom-movendo .visualizador-painel-atual .visualizador-foto { cursor: grabbing; }
.visualizador-galeria .zoom-ampliado .visualizador-painel-atual { z-index: 1; }
.visualizador-trilho { position: relative; width: 100%; height: 100%; will-change: transform; }
.visualizador-painel { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; display: flex; padding: 0 12px; }
.visualizador-painel-anterior { left: calc(-100% - 24px); }
.visualizador-painel-proximo { left: calc(100% + 24px); }
.visualizador-painel .visualizador-midia { flex: 1; min-width: 0; height: 100%; }
.visualizador-foto { -webkit-user-drag: none; user-select: none; }
.visualizador-rodape { padding: 12px 20px 16px; max-width: 760px; width: 100%; margin: 0 auto; text-align: center; }
.visualizador-legenda { margin: 0 0 4px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.05rem; color: var(--marinho); }
.visualizador-meta { margin: 0; font-size: 0.8rem; color: var(--acento); }
.visualizador-crumb { margin: 6px 0 0; font-size: 0.86rem; color: var(--tinta-suave); line-height: 1.45; }
.visualizador-arquivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  padding: 32px 24px;
  border-radius: var(--raio-medio);
  background: var(--branco);
  box-shadow: var(--sombra);
  text-align: center;
}
.visualizador-arquivo-icone { color: var(--acento); }
.visualizador-arquivo-nome { margin: 0; font-weight: 600; color: var(--marinho); word-break: break-word; }
.visualizador-audio { width: 100%; margin-top: 6px; }
.visualizador-aviso { margin: 0; font-size: 0.86rem; color: var(--tinta-suave); }

/* =========================================================
   Janela de confirmação (IcrumbsAvisos.confirmar — assets/js/avisos.js)
   e botão de ação da notificação do topo (ex.: "Desfazer").
   Paleta do projeto: nada de vermelho nem fundo escuro — o "perigo"
   é o marinho.
   ========================================================= */
.notificacao-topo-acao {
  flex: none;
  min-height: 34px;
  padding: 0 14px;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  color: var(--marinho);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
}
.notificacao-topo-acao:hover { border-color: var(--acento); background: var(--fundo-neutro); }

.confirmacao-fundo {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(243, 243, 243, 0.86);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.confirmacao {
  width: 100%;
  max-width: 420px;
  padding: 24px 22px 20px;
  border-radius: var(--raio-medio);
  background: var(--branco);
  box-shadow: 0 20px 44px -18px rgba(32, 62, 95, 0.55);
}
.confirmacao-titulo { font-size: 1.25rem; line-height: 1.25; margin: 0 0 8px; }
.confirmacao-texto { margin: 0 0 20px; color: var(--tinta); font-size: 0.92rem; line-height: 1.5; }
.confirmacao-botoes { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 10px; }
.confirmacao-botoes .botao { width: auto; min-height: 42px; padding: 0 20px; font-size: 0.92rem; box-shadow: none; }
.botao.botao-perigo { background: var(--marinho); color: var(--branco); }
.botao.botao-perigo:hover { background: var(--acento); }
.botao-secundario-perigo { color: var(--marinho); }
.botao-secundario-perigo:hover { border-color: var(--marinho); }

/* Texto só pra leitores de tela. */
.rotulo-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "← Crumbs" no topo das páginas internas da lista. */
.voltar-pagina {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--acento);
}
.voltar-pagina:hover { text-decoration: none; color: var(--marinho); }

/* Botão só com ícone (editar, excluir, minimizar). */
.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--branco);
  color: var(--acento);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.botao-icone:hover { border-color: var(--acento); background: var(--fundo-neutro); color: var(--marinho); text-decoration: none; }

/* =========================================================
   Crumbs — lista: cartões clicáveis e link da lixeira
   ========================================================= */
.cartao-crumb-link { display: block; color: inherit; border-radius: var(--raio-medio); }
.cartao-crumb-link:hover, .cartao-crumb-link:focus-visible { text-decoration: none; }
.cartao-crumb-link .cartao-crumb { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.cartao-crumb-link:hover .cartao-crumb { box-shadow: 0 14px 30px -18px rgba(32, 62, 95, 0.55); }
.cartao-crumb-link:active .cartao-crumb { transform: scale(0.995); }

.acoes-cabecalho-crumbs { display: flex; align-items: center; gap: 8px; flex: none; }
.link-lixeira { gap: 6px; text-decoration: none; }
.link-lixeira:hover { text-decoration: none; }
.link-lixeira-qtd {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--salvia);
  color: var(--marinho);
  font-size: 0.72rem;
  line-height: 20px;
  text-align: center;
}
.link-lixeira-qtd[hidden] { display: none; }

/* =========================================================
   Crumb — visualização (paginas/crumb.php, assets/js/paginas/crumb.js)
   ========================================================= */
.pagina-crumb { width: 100%; max-width: 860px; margin: 0 auto; }
.cabecalho-crumb .subtitulo-crumb[hidden] { display: none; }
/* Setas pra passar de crumb (anterior = mais antigo, próximo = mais recente). */
.cabecalho-crumb { display: flex; align-items: center; gap: 10px; }
.cabecalho-crumb-textos { flex: 1; min-width: 0; text-align: center; }
.cabecalho-crumb-textos .titulo-pagina-app { word-break: break-word; }
.botao-nav-crumb:disabled { opacity: 0.35; cursor: default; }
.lista-registros { transition: transform 0.14s ease, opacity 0.14s ease; }
.lista-registros.saindo-para-esquerda { transform: translateX(-24px); opacity: 0; }
.lista-registros.saindo-para-direita { transform: translateX(24px); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .lista-registros { transition: none; }
}
.estado-crumb:empty { display: none; }
.lista-registros { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* Swipe entre crumbs (assets/js/arrasto.js): o trilho anda com o dedo e
   os vizinhos (já montados) ficam fora da tela, um de cada lado. Parados,
   eles nem aparecem (não aumentam a página). */
.trilho-crumb-janela { position: relative; }
.trilho-crumb { position: relative; will-change: transform; }
.painel-crumb-vizinho {
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
}
.trilho-crumb.trilho-ativo .painel-crumb-vizinho { display: block; }
.painel-crumb-anterior { right: calc(100% + 24px); }
.painel-crumb-proximo { left: calc(100% + 24px); }
/* Os registros do vizinho, com o mesmo espaçamento da lista de verdade. */
.lista-registros-vizinho { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* Seta sem destino no cabeçalho de um vizinho (é só desenho). */
.botao-nav-crumb-apagado { opacity: 0.35; }
/* Durante o arrasto, nada de barra de rolagem lateral. */
html.arrastando-lateral { overflow-x: hidden; }
@supports (overflow: clip) {
  html.arrastando-lateral .trilho-crumb-janela { overflow-x: clip; }
}
.registro-crumb { min-width: 0; }

.registro-crumb { margin: 0; scroll-margin-top: 16px; border-left: 4px solid transparent; transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.registro-crumb-destacado { border-left-color: var(--amarelo); box-shadow: 0 16px 34px -18px rgba(32, 62, 95, 0.6); }

.registro-crumb-cabeca { display: flex; align-items: flex-start; gap: 12px; }
.registro-crumb-info { flex: 1; min-width: 0; }
.registro-crumb-ordem {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--salvia);
  color: var(--acento);
  font-size: 0.74rem;
  font-weight: 700;
}
.registro-crumb-titulo { font-size: 1.3rem; line-height: 1.25; margin: 0 0 4px; word-break: break-word; }
.registro-crumb-meta { margin: 0; font-size: 0.8rem; color: var(--tinta-suave); }
.registro-crumb-resumo {
  display: none;
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.registro-crumb-minimizado .registro-crumb-resumo { display: block; }
.registro-crumb-acoes { display: flex; gap: 6px; flex: none; }
.botao-minimizar-crumb svg { transition: transform 0.2s ease; transform: rotate(180deg); }
.registro-crumb-minimizado .botao-minimizar-crumb svg { transform: rotate(0deg); }

.registro-crumb-corpo { margin-top: 16px; }
.registro-crumb-corpo[hidden] { display: none; }

.registro-crumb-texto {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
  white-space: pre-wrap;
  word-break: break-word;
}
.trecho-oculto {
  background: var(--fundo-neutro);
  border-bottom: 2px dotted var(--acento);
  border-radius: 3px;
  padding: 0 2px;
}
.trecho-oculto-icone { display: inline-flex; vertical-align: -1px; margin-right: 3px; color: var(--acento); }
.registro-crumb-dica-oculto {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--tinta-suave);
}

.registro-crumb-subtitulo {
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 8px;
}
.registro-crumb-valores { margin-top: 18px; }
.lista-valores-registrados { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.valor-registrado {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--raio-pequeno);
  background: var(--fundo-neutro);
  font-size: 0.86rem;
}
.valor-registrado-rotulo { font-weight: 700; color: var(--marinho); }
.valor-registrado-tag { color: var(--acento); font-weight: 600; font-size: 0.8rem; }
.valor-registrado-descricao { color: var(--tinta-suave); font-size: 0.82rem; }

.registro-crumb-tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.registro-crumb-tags .chip-tag { cursor: default; }

/* Anexos */
.registro-crumb-anexos { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.registro-crumb-anexos[hidden] { display: none; }
#conteudo-app .registro-crumb-anexos .spinner-pequeno { display: block; width: 44px; height: 44px; margin: 8px auto; }
.spinner-pequeno::before { border-width: 5px; }
.spinner-pequeno::after { inset: 10px; border-width: 5px; }

.registro-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .registro-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.registro-foto { margin: 0; min-width: 0; }
.registro-foto-botao {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: var(--raio-pequeno);
  overflow: hidden;
  background: var(--fundo-neutro);
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
}
.registro-foto-botao img { display: block; width: 100%; height: 100%; object-fit: cover; }
.registro-fotos-unica { grid-template-columns: minmax(0, 1fr); }
.registro-fotos-unica .registro-foto-botao { aspect-ratio: auto; }
.registro-fotos-unica .registro-foto-botao img { height: auto; max-height: 70vh; object-fit: contain; margin: 0 auto; }
.registro-foto-legenda { display: flex; flex-direction: column; gap: 2px; margin: 6px 2px 0; font-size: 0.84rem; line-height: 1.4; color: var(--tinta); word-break: break-word; }
/* Quando e por quem o anexo foi criado (fotos, e dentro dos documentos). */
.registro-anexo-autoria { font-size: 0.74rem; line-height: 1.35; color: var(--tinta-suave); }
/* Legenda de vídeo e áudio (abaixo da linha de informações). */
.registro-midia-legenda { margin: 0; padding: 0 14px 10px; font-size: 0.86rem; line-height: 1.4; color: var(--tinta); word-break: break-word; }
.registro-audio .registro-midia-legenda { padding: 6px 0 0; }
.registro-documento-legenda { font-size: 0.84rem; line-height: 1.35; color: var(--tinta); word-break: break-word; }
.registro-foto-falha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 120px;
  padding: 10px;
  color: var(--acento);
  font-size: 0.76rem;
  text-align: center;
}

.registro-midia { border-radius: var(--raio-medio); background: var(--fundo-neutro); overflow: hidden; }
.registro-video video { display: block; width: 100%; max-height: 70vh; background: var(--marinho); }
.registro-audio { padding: 12px 14px; }
.registro-audio audio { display: block; width: 100%; margin-top: 8px; }
.registro-midia-info { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; font-size: 0.8rem; color: var(--acento); }
.registro-audio .registro-midia-info { padding: 0; }
.registro-audio-icone { display: inline-flex; color: var(--acento); }

.registro-documentos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.registro-documento {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-medio);
  background: var(--branco);
  color: var(--marinho);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.registro-documento:hover { text-decoration: none; border-color: var(--acento); background: var(--fundo-neutro); }
.registro-documento .anexo-extensao { min-width: 46px; height: 52px; }
.registro-documento-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.registro-documento-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.registro-documento-tamanho { font-size: 0.78rem; color: var(--tinta-suave); }
.registro-documento-baixar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--acento);
}
@media (max-width: 420px) {
  .registro-documento-baixar span { display: none; }
}
.registro-aviso { margin: 0; font-size: 0.84rem; color: var(--tinta-suave); }

/* Comentários */
.registro-comentarios { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linha); }
.registro-comentarios-alternar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 0;
  border: none;
  background: none;
  color: var(--marinho);
  font-weight: 700;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}
.registro-comentarios-icone { display: inline-flex; color: var(--acento); }
.registro-comentarios-rotulo { flex: 1; }
.registro-comentarios-seta { display: inline-flex; color: var(--acento); transition: transform 0.2s ease; transform: rotate(180deg); }
.registro-comentarios-minimizado .registro-comentarios-seta { transform: rotate(0deg); }
.registro-comentarios-corpo { margin-top: 10px; }
.registro-comentarios-corpo[hidden] { display: none; }

.form-comentario { display: grid; gap: 8px; }
.entrada-comentario {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-pequeno);
  background: var(--branco);
  color: var(--tinta);
  font-size: 0.95rem;
  line-height: 1.5;
  resize: vertical;
}
.entrada-comentario:focus { outline: none; border-color: var(--acento); }
.form-comentario-acoes { display: flex; justify-content: flex-end; }
.botao-comentar { width: auto; min-height: 42px; padding: 0 24px; font-size: 0.92rem; box-shadow: none; }
.mensagem-comentario:empty { display: none; }
.mensagem-comentario .mensagem { margin: 0; }

.lista-comentarios { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.comentario { padding: 12px 14px; border-radius: var(--raio-pequeno); background: var(--fundo-neutro); }
.comentario-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 4px; }
.comentario-autor { font-weight: 700; color: var(--marinho); font-size: 0.9rem; }
.comentario-data { font-size: 0.76rem; color: var(--tinta-suave); }
.comentario-texto { margin: 0; font-size: 0.93rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.comentario-excluir { margin-top: 6px; font-size: 0.78rem; font-weight: 600; }
.comentarios-vazio { margin: 12px 0 0; font-size: 0.86rem; color: var(--tinta-suave); }
.comentarios-vazio[hidden] { display: none; }

/* Link "Abrir o crumb" no visualizador da galeria. */
.visualizador-abrir-crumb { font-weight: 700; white-space: nowrap; }

/* =========================================================
   Lixeira (paginas/lixeira.php, assets/js/paginas/lixeira.js)
   ========================================================= */
.pagina-lixeira { width: 100%; max-width: 860px; margin: 0 auto; }
.cabecalho-lixeira { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.botao-esvaziar-lixeira[hidden] { display: none; }
.estado-lixeira:empty { display: none; }
.lista-lixeira { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cartao-lixeira-quando { margin: 8px 0 0; font-size: 0.78rem; color: var(--tinta-suave); }
.cartao-lixeira-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cartao-lixeira-acoes .botao-secundario { min-height: 38px; }

/* =========================================================
   Editar crumb (mesmo formulário do "Novo crumb")
   ========================================================= */
.mensagem-edicao:empty { display: none; }
.mensagem-edicao .botao-secundario { text-decoration: none; }
.editar-crumb .acoes-novo-crumb { display: flex; gap: 10px; align-items: center; }
.editar-crumb .acoes-novo-crumb .botao { flex: 1; }
.botao-cancelar-edicao { flex: none; min-height: 52px; box-shadow: var(--sombra); }
@media (min-width: 900px) {
  .editar-crumb .acoes-novo-crumb { flex-direction: row-reverse; justify-content: flex-start; }
  .editar-crumb .acoes-novo-crumb .botao { flex: none; }
  .botao-cancelar-edicao { box-shadow: none; }
}

/* =========================================================
   Gerenciar (paginas/gerenciar.php, assets/js/paginas/gerenciar.js
   e assets/js/gerenciar/*.js) — Conta, Potes e Tags.
   ========================================================= */
.pagina-gerenciar { width: 100%; max-width: 860px; margin: 0 auto; }

/* Abas (mesmo visual do alternador "Um dia / Período"). */
.abas-gerenciar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 4px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--branco);
  box-shadow: 0 10px 26px -20px rgba(32, 62, 95, 0.45);
}
.aba-gerenciar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 999px;
  color: var(--tinta-suave);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}
.aba-gerenciar:hover { color: var(--marinho); text-decoration: none; }
.aba-gerenciar[aria-current="page"] { background: var(--amarelo); color: var(--branco); }

/* Gerenciar → Tags: tags de crumb × tags de valor (segundo nível de abas). */
.abas-tipo-tag {
  grid-template-columns: repeat(2, 1fr);
  background: transparent;
  box-shadow: none;
  border: 1px solid #d5d5d5;
  margin-bottom: 16px;
}
.abas-tipo-tag .aba-gerenciar { min-height: 36px; font-size: 0.86rem; }
.abas-tipo-tag .aba-gerenciar[aria-current="page"] { background: var(--marinho); color: var(--branco); }

.corpo-gerenciar > .spinner-carregando { display: block; margin: 40px auto; }

/* Formulários */
.form-gerenciar .campo { margin-bottom: 20px; }
.form-gerenciar .campo[hidden] { display: none; }
.campo-ajuda { margin: 6px 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--tinta-suave); }
.alternar-pin-local {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--tinta-suave);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px;
}
.campo select,
.select-gerenciar {
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--linha);
  border-radius: 0;
  background: transparent;
  padding: 12px 4px;
  color: var(--tinta);
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--acento) 50%), linear-gradient(135deg, var(--acento) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.campo select:focus { border-bottom-color: var(--amarelo-escuro); outline: none; }
.campo select:disabled, .campo input:disabled { opacity: 0.55; }
.campo input[type="date"] { min-height: 46px; }
.botao-form-gerenciar { margin-top: 4px; }
.acoes-form-gerenciar { display: flex; gap: 10px; align-items: center; }
.acoes-form-gerenciar .botao { flex: 1; margin-top: 0; }
.acoes-form-gerenciar .botao-secundario { min-height: 52px; }
@media (min-width: 900px) {
  .botao-form-gerenciar { width: auto; padding: 0 28px; }
  .acoes-form-gerenciar { justify-content: flex-end; }
  .acoes-form-gerenciar .botao { flex: none; }
}
.entrada-gerenciar {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  color: var(--tinta);
}
.entrada-gerenciar:focus { outline: none; border-color: var(--amarelo-escuro); }
.linha-nova-tag { display: flex; gap: 8px; align-items: center; }
.linha-nova-tag .botao-secundario { flex: none; }

/* Conta */
.dados-conta { margin: 0; display: grid; gap: 10px; }
.dados-conta-linha { display: grid; gap: 2px; }
.dados-conta dt { font-size: 0.8rem; font-weight: 600; color: var(--tinta-suave); }
.dados-conta dd { margin: 0; font-weight: 600; color: var(--marinho); word-break: break-word; }
.pedido-troca-email-texto { margin: 0 0 8px; line-height: 1.5; }
.pedido-troca-email-texto strong { color: var(--marinho); word-break: break-word; }
.cartao-lixeira-gerenciar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cartao-lixeira-gerenciar-texto { flex: 1 1 220px; min-width: 0; }
.cartao-lixeira-gerenciar .texto-ajuda-bloco { margin: 0; }
.link-lixeira-gerenciar { text-decoration: none; }
.link-lixeira-gerenciar:hover { text-decoration: none; }
.acoes-pedido-troca { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Barra "N potes / + Novo pote" e busca de tags */
.barra-gerenciar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.barra-gerenciar-texto { margin: 0; color: var(--tinta-suave); font-size: 0.9rem; font-weight: 600; }
.busca-tags-gerenciar { margin-bottom: 12px; }
.acoes-barra-gerenciar { display: flex; align-items: center; gap: 8px; flex: none; }
.link-lixeira-secao { gap: 6px; text-decoration: none; }
.link-lixeira-secao:hover { text-decoration: none; }

/* "O que é um pote?" */
.explicacao-pote { padding: 0; }
.explicacao-pote-resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--marinho);
  cursor: pointer;
  list-style: none;
}
.explicacao-pote-resumo::-webkit-details-marker { display: none; }
.explicacao-pote-resumo::after { content: '▾'; font-family: var(--fonte-corpo); color: var(--acento); }
.explicacao-pote[open] .explicacao-pote-resumo::after { content: '▴'; }
/* Blocos recolhíveis que usam o mesmo resumo (ex.: "Valores recorrentes" em Potes e no Dashboard). */
.bloco-recorrentes-minimizado[open] > .explicacao-pote-resumo::after { content: '▴'; }
.explicacao-pote-corpo { padding: 0 18px 18px; font-size: 0.92rem; line-height: 1.55; }
.explicacao-pote-corpo p { margin: 0 0 10px; }
.exemplo-pote { padding: 12px 14px; border-radius: var(--raio-pequeno); background: var(--manteiga); }
.exemplo-pote-titulo { margin: 0 0 4px !important; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--acento); }
.exemplo-pote-lista { margin: 0; padding-left: 18px; }
.exemplo-pote-lista li + li { margin-top: 4px; }
@media (min-width: 900px) {
  .explicacao-pote-resumo { padding: 18px 28px; }
  .explicacao-pote-corpo { padding: 0 28px 22px; }
}

/* Cartão de pote */
.lista-potes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.cartao-pote-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cartao-pote-titulos { min-width: 0; }
.cartao-pote-nome { margin: 0; font-size: 1.2rem; word-break: break-word; }
.cartao-pote-descricao { margin: 4px 0 0; color: var(--tinta-suave); font-size: 0.88rem; }
.cartao-pote-saldo {
  flex: none;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--marinho);
  white-space: nowrap;
}
.cartao-pote-saldo-negativo { color: var(--acento); }
.cartao-pote-meta { margin: 8px 0 0; font-size: 0.8rem; color: var(--tinta-suave); line-height: 1.45; }
.cartao-pote-tags { margin-top: 12px; }
.cartao-pote-sem-tags { margin: 0; font-size: 0.86rem; color: var(--tinta-suave); }
.cartao-pote-sem-tags a { font-weight: 700; }
.cartao-pote-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cartao-pote-acoes .botao-secundario { min-height: 38px; }

/* Chips "+ #tag" / "− #tag" */
.lista-vinculos-pote { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chip-vinculo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.chip-vinculo-soma { background: var(--manteiga); color: var(--acento); }
.chip-vinculo-subtrai { background: var(--salvia); color: var(--marinho); }
.chip-vinculo-sinal { font-weight: 800; }

/* Lista de tags */
.lista-tags-gerenciar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.item-tag-gerenciar, .linha-pote-tag { min-width: 0; }
.lista-tags-sem-resultado { padding: 16px; color: var(--tinta-suave); font-size: 0.9rem; }
.item-tag-gerenciar {
  border-radius: var(--raio-medio);
  background: var(--branco);
  box-shadow: 0 10px 26px -22px rgba(32, 62, 95, 0.45);
}
.item-tag-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--raio-medio);
  background: none;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}
.item-tag-nome { font-weight: 700; color: var(--marinho); word-break: break-word; }
.item-tag-uso { font-size: 0.78rem; color: var(--tinta-suave); }
.item-tag-vinculos { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; order: 3; }
.item-tag-seta { margin-left: auto; color: var(--acento); }
.item-tag-aberta .item-tag-cabeca { border-bottom: 1px solid var(--linha); border-radius: var(--raio-medio) var(--raio-medio) 0 0; }

.painel-tag-gerenciar { padding: 14px 16px 16px; }
.rotulo-painel-tag { display: block; margin: 0 0 8px; font-size: 0.8rem; font-weight: 600; color: var(--tinta-suave); }
.bloco-potes-tag { margin-top: 18px; }
.bloco-potes-tag .texto-ajuda-bloco a { font-weight: 700; }
.lista-potes-tag { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.linha-pote-tag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.linha-pote-tag-info { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.linha-pote-tag-nome { font-weight: 600; color: var(--marinho); word-break: break-word; }
.linha-pote-tag-unidade { font-size: 0.78rem; color: var(--tinta-suave); white-space: nowrap; }
.alternador-sinal {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  padding: 3px;
  border-radius: 999px;
  background: var(--fundo-neutro);
}
.alternador-sinal-opcao {
  min-height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave);
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
}
.alternador-sinal-opcao:disabled { cursor: wait; }
.alternador-sinal-opcao[aria-checked="true"] { background: var(--branco); color: var(--marinho); box-shadow: 0 2px 8px -4px rgba(32, 62, 95, 0.4); }
.alternador-sinal-opcao[data-sinal="1"][aria-checked="true"] { background: var(--amarelo); color: var(--branco); }
.alternador-sinal-opcao[data-sinal="-1"][aria-checked="true"] { background: var(--marinho); color: var(--branco); }
.bloco-potes-nova-tag { margin-top: 16px; }
.rodape-painel-tag { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--fundo-neutro); }

/* Janela com várias escolhas (IcrumbsAvisos.escolher) */
.confirmacao-botoes-empilhados { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.confirmacao-botoes-empilhados .botao,
.confirmacao-botoes-empilhados .botao-secundario { width: 100%; min-height: 44px; }

/* Lixeira com abas (Crumbs / Tags / Potes) */
.abas-lixeira { margin-bottom: 14px; }
.aba-lixeira-qtd {
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--salvia);
  color: var(--marinho);
  font-size: 0.72rem;
  line-height: 20px;
  text-align: center;
}
.aba-lixeira-qtd[hidden] { display: none; }
.aba-gerenciar[aria-current="page"] .aba-lixeira-qtd { background: var(--branco); color: var(--marinho); }
.cartao-lixeira-tag { color: var(--marinho); }
.cartao-lixeira .lista-vinculos-pote { margin-top: 8px; }

/* Gerenciar com cinco seções: no celular as abas rolam de lado. */
.abas-secoes-gerenciar {
  position: relative;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.abas-secoes-gerenciar::-webkit-scrollbar { display: none; }
.abas-secoes-gerenciar .aba-gerenciar { flex: 1 0 auto; padding: 0 16px; white-space: nowrap; }

/* =========================================================
   Gerenciar → Amigos (assets/js/gerenciar/amigos.js)
   ========================================================= */
.abas-amigos { grid-template-columns: repeat(4, 1fr); }
.abas-amigos .aba-gerenciar { font-size: 0.8rem; padding: 0 4px; }
.abas-amigos .aba-lixeira-qtd { margin-left: 4px; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; }

.cartao-novo-pedido-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.cartao-novo-pedido-topo > div { flex: 1 1 240px; min-width: 0; }
.cartao-novo-pedido-topo .botao-secundario { flex: none; }
.form-novo-pedido { margin-top: 10px; }
.form-novo-pedido[hidden] { display: none; }

.form-gerenciar .campo textarea {
  display: block;
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-pequeno);
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  line-height: 1.45;
  resize: vertical;
}
.form-gerenciar .campo textarea:focus { outline: none; border-color: var(--amarelo-escuro); }

.pessoa-info { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pessoa-nome { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; color: var(--marinho); word-break: break-word; }
.pessoa-email { font-size: 0.8rem; color: var(--tinta-suave); word-break: break-all; }
.pessoa-obs {
  flex-basis: 100%;
  order: 4;
  font-size: 0.8rem;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-amigo .item-tag-cabeca { flex-wrap: wrap; }
.chip-grupo { background: var(--salvia); color: var(--marinho); }
.selo-sincronizando {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--manteiga);
  color: var(--acento);
  font-size: 0.7rem;
  font-weight: 600;
}

.lista-pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.item-pedido { padding: 14px 0; border-top: 1px solid var(--fundo-neutro); }
.item-pedido:first-child { border-top: none; padding-top: 4px; }
.item-pedido-data { margin: 4px 0 0; font-size: 0.82rem; color: var(--tinta-suave); line-height: 1.4; }
.item-pedido-mensagem {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: var(--raio-pequeno);
  background: var(--manteiga);
  color: var(--tinta);
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-line;
  word-break: break-word;
}
.item-pedido-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.item-pedido-acoes .botao-secundario { min-height: 38px; }
.botao-mini-pedido { width: auto; min-height: 38px; padding: 0 20px; font-size: 0.9rem; box-shadow: none; }
.rotulo-grupos-excluidos { margin-top: 18px; }

/* Checkboxes em forma de chip (grupos / membros) */
.lista-marcaveis { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.marcavel { position: relative; display: inline-flex; cursor: pointer; }
.marcavel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.marcavel span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  color: var(--tinta-suave);
  font-size: 0.86rem;
  font-weight: 600;
}
.marcavel input:checked + span { border-color: var(--amarelo); background: var(--amarelo); color: var(--branco); }
.marcavel input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }

/* =========================================================
   Gerenciar → Notificações (assets/js/gerenciar/notificacoes.js)
   ========================================================= */
.tabela-notificacoes { display: grid; }
.linha-notificacao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 52px);
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--fundo-neutro);
}
.linha-notificacao-cabeca { border-top: none; padding-top: 0; font-size: 0.78rem; font-weight: 600; color: var(--tinta-suave); }
.linha-notificacao-info { display: grid; gap: 2px; min-width: 0; }
.linha-notificacao-nome { font-weight: 600; color: var(--marinho); }
.linha-notificacao-ajuda { font-size: 0.78rem; color: var(--tinta-suave); line-height: 1.35; }
.coluna-canal { display: flex; justify-content: center; text-align: center; }
@media (min-width: 600px) {
  .linha-notificacao { grid-template-columns: minmax(0, 1fr) repeat(3, 64px); gap: 8px; }
}

/* Cartão "Push neste aparelho" (assets/js/push.js) */
.push-aparelho {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-medio);
  background: var(--fundo-neutro);
}
.push-aparelho .texto-ajuda-bloco { margin-bottom: 10px; }
.push-aparelho > :last-child { margin-bottom: 0; }
.push-aparelho .acoes-pedido-troca { margin-top: 4px; }
.push-aparelho-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.push-aparelho-titulo { margin: 0; font-size: 0.98rem; font-weight: 600; color: var(--marinho); }
.push-aparelho-estado {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--branco);
  border: 1.5px solid var(--linha);
  color: var(--tinta-suave);
  font-size: 0.76rem;
  font-weight: 600;
}
.push-aparelho-estado-ligado { background: var(--amarelo); border-color: var(--amarelo); color: var(--branco); }
.push-aparelho-msg { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--raio-pequeno); background: var(--sucesso-fundo); color: var(--marinho); font-size: 0.84rem; }
.push-aparelho-msg-erro { background: var(--erro-fundo); color: var(--erro); }
.botao-push-ligar { width: auto; min-height: 44px; padding: 0 22px; font-size: 0.92rem; }

.chave-liga { position: relative; display: inline-flex; cursor: pointer; }
.chave-liga input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chave-liga-trilho {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--linha);
  transition: background 0.15s ease;
}
.chave-liga-trilho::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--branco);
  box-shadow: 0 1px 3px rgba(32, 62, 95, 0.3);
  transition: transform 0.15s ease;
}
.chave-liga input:checked + .chave-liga-trilho { background: var(--amarelo); }
.chave-liga input:checked + .chave-liga-trilho::after { transform: translateX(18px); }
.chave-liga input:focus-visible + .chave-liga-trilho { outline: 2px solid var(--acento); outline-offset: 2px; }

/* =========================================================
   Página Notificações (assets/js/paginas/notificacoes.js)
   e contador no sino do menu
   ========================================================= */
.pagina-notificacoes { width: 100%; max-width: 760px; margin: 0 auto; }
.lista-notificacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item-notificacao {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: var(--raio-medio);
  background: var(--branco);
  box-shadow: 0 10px 26px -22px rgba(32, 62, 95, 0.45);
  color: var(--tinta);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.item-notificacao:hover { background: var(--fundo-neutro); }
.item-notificacao-ponto { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: transparent; }
.item-notificacao-nova .item-notificacao-ponto { background: var(--amarelo); }
.item-notificacao-corpo { display: grid; gap: 4px; min-width: 0; }
.item-notificacao-titulo { color: var(--marinho); font-weight: 600; line-height: 1.35; word-break: break-word; }
.item-notificacao-nova .item-notificacao-titulo { font-weight: 700; }
.item-notificacao-texto { font-size: 0.86rem; color: var(--tinta); line-height: 1.4; white-space: pre-line; word-break: break-word; }
.item-notificacao-meta { font-size: 0.76rem; color: var(--tinta-suave); }

.menu-contador {
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--marinho);
  color: var(--branco);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}
.menu-contador[hidden] { display: none; }
@media (min-width: 900px) {
  .menu-contador { top: 2px; left: auto; right: 0; margin-left: 0; }
}

/* =========================================================
   Dashboard (paginas/dashboard.php, assets/js/paginas/dashboard.js)
   e gráficos (assets/js/graficos.js)
   ========================================================= */
.pagina-dashboard { width: 100%; max-width: 1100px; margin: 0 auto; }

.abas-dashboard { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
.aba-dashboard { border: none; background: transparent; font-family: inherit; cursor: pointer; gap: 4px; }
.aba-dashboard-qtd { font-weight: 500; opacity: 0.8; }
.estado-dashboard .spinner-carregando { margin: 40px auto; }
.estado-dashboard:empty { display: none; }
.painel-dashboard[hidden] { display: none; }

.dash-grade { display: grid; gap: 14px; }
@media (min-width: 900px) {
  .dash-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .dash-grade-potes { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .dash-grade-potes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dash-cartao { margin-bottom: 0; min-width: 0; }

.dash-cartao-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dash-cartao-titulos { min-width: 0; }
.dash-cartao-titulo { margin: 4px 0 0; font-size: 1.1rem; word-break: break-word; }
.dash-agregacao { flex: none; width: 150px; margin: 0; }
.dash-agregacao button { min-height: 32px; font-size: 0.82rem; font-family: inherit; }

.dash-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.dash-chip { min-height: 30px; }
.dash-chip-sinal { font-weight: 700; }
.dash-limpar-tags { font-size: 0.8rem; margin-left: 4px; }

.dash-estats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 4px; }
.dash-estat { display: flex; flex-direction: column; min-width: 0; }
.dash-estat-rotulo { font-size: 0.76rem; color: var(--tinta-suave); }
.dash-estat-valor { font-size: 0.98rem; font-weight: 600; color: var(--marinho); word-break: break-word; }
.dash-estat-destaque .dash-estat-valor { font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.dash-nota { margin: 4px 0 0; font-size: 0.78rem; color: var(--tinta-suave); line-height: 1.4; }

.dash-grafico-legenda { margin: 14px 0 2px; font-size: 0.78rem; color: var(--tinta-suave); }
.dash-grafico { width: 100%; min-height: 190px; }

.grafico { position: relative; }
.grafico-svg { display: block; overflow: visible; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.grafico-svg:focus { outline: none; }
.grafico-svg:focus-visible { outline: 2px solid var(--amarelo-escuro); outline-offset: 4px; border-radius: 4px; }
.grafico-num { font-variant-numeric: tabular-nums; }
.grafico-svg text { font-family: var(--fonte-corpo); }
.grafico-balao {
  position: absolute;
  top: -4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px;
  border-radius: var(--raio-pequeno);
  background: var(--branco);
  border: 1px solid var(--linha);
  box-shadow: 0 8px 20px -12px rgba(32, 62, 95, 0.5);
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
.grafico-balao[hidden] { display: none; }
.grafico-balao-valor { font-size: 0.95rem; color: var(--marinho); }
.grafico-balao-rotulo, .grafico-balao-detalhe { font-size: 0.74rem; color: var(--tinta-suave); }
.grafico-vazio { margin: 14px 0 4px; font-size: 0.86rem; color: var(--tinta-suave); }

/* Lista de valores / extrato */
.dash-detalhes { margin-top: 10px; border-top: 1px solid var(--salvia); padding-top: 10px; }
.dash-detalhes-resumo { cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--acento); }
.dash-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.dash-linha + .dash-linha { border-top: 1px solid var(--salvia); }
.dash-linha-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
  color: var(--tinta);
  text-decoration: none;
}
a.dash-linha-link:hover { text-decoration: none; background: var(--creme); }
.dash-linha-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dash-linha-data { font-size: 0.74rem; color: var(--tinta-suave); }
.dash-linha-desc { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-linha-tags { font-size: 0.74rem; color: var(--acento); }
.dash-linha-numeros { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.dash-linha-valor { flex: none; font-weight: 700; color: var(--marinho); font-variant-numeric: tabular-nums; }
.dash-linha-valor-saida { color: var(--acento); }
.dash-linha-saldo { font-size: 0.74rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.dash-linha-inicial .dash-linha-desc { font-style: italic; }
.dash-selo {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--fundo-neutro);
  color: var(--tinta-suave);
  font-size: 0.7rem;
  font-weight: 600;
}
.dash-mais { margin-top: 8px; min-height: 38px; }
.dash-mais[hidden] { display: none; }

.dash-pote-saldo-rotulo { margin: 2px 0 0; text-align: right; font-size: 0.74rem; color: var(--tinta-suave); }
.dash-extrato { margin-top: 14px; border-top: 1px solid var(--salvia); padding-top: 10px; }
.dash-extrato-titulo { margin: 0; font-size: 0.95rem; color: var(--marinho); }
.aviso-mes-atual { margin: -4px 0 14px; font-size: 0.82rem; color: var(--tinta-suave); }
.aviso-mes-atual[hidden] { display: none; }

/* =========================================================
   Compartilhamento (assets/js/compartilhar.js)
   ========================================================= */
.area-compartilhar { margin-top: 18px; }
.area-compartilhar-tag, .area-compartilhar-pote { margin-top: 14px; }
.area-compartilhar-tag .bloco-compartilhar,
.area-compartilhar-pote .bloco-compartilhar { box-shadow: none; border: 1px solid var(--linha); }
.bloco-compartilhar .comp-corpo { display: grid; gap: 12px; }
.comp-linha {
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--branco);
}
.comp-linha-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.comp-alternar { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.comp-alternar input { width: 20px; height: 20px; accent-color: var(--marinho); }
.comp-alternar-texto { font-weight: 600; color: var(--marinho); }
.comp-link-comentar { margin-top: 10px; color: var(--marinho); }
.comentario-selo { font-size: 0.72rem; font-weight: 600; color: var(--acento); background: var(--fundo-neutro); border-radius: 999px; padding: 1px 8px; }
.comp-nivel, .comp-destino {
  min-height: 38px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--branco);
  color: var(--marinho);
  padding: 0 10px;
  font: inherit;
  font-size: 0.88rem;
  max-width: 100%;
}
.comp-nivel[hidden] { display: none; }
.comp-ajuda { margin: 8px 0 0; color: var(--tinta-suave); font-size: 0.84rem; line-height: 1.45; }
.comp-link-url { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.comp-link-url .entrada-gerenciar { flex: 1 1 200px; min-width: 0; font-size: 0.85rem; }
.comp-link-config { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.comp-campo { flex: 1 1 150px; margin: 0; }
.comp-campo label { font-size: 0.8rem; color: var(--tinta-suave); display: block; margin-bottom: 4px; }
.comp-campo .entrada-gerenciar { width: 100%; }
.comp-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.comp-lista { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.comp-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.comp-item-nome { flex: 1 1 140px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.comp-adicionar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.comp-adicionar .comp-destino { flex: 1 1 180px; }
.comp-herdados { margin: 0; font-size: 0.84rem; color: var(--acento); line-height: 1.45; }
.comp-status { margin: 10px 0 0; font-size: 0.82rem; color: var(--tinta-suave); }
.comp-status:empty { display: none; }

/* Selos de compartilhado */
.cartao-crumb-selo {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--marinho);
  background: var(--salvia);
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cartao-crumb-selo-mundo { background: var(--manteiga); }
.cartao-crumb-rodape-remoto { margin: 8px 0 0; font-size: 0.8rem; color: var(--tinta-suave); }
.item-tag-compartilhada {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--marinho);
  background: var(--salvia);
  padding: 1px 8px;
  border-radius: 999px;
}
.registro-crumb-compartilhado { margin: 2px 0 0; font-size: 0.82rem; color: var(--acento); font-weight: 600; }
.cartao-pote-conjunto { margin: 4px 0 10px; font-size: 0.84rem; color: var(--acento); font-weight: 600; }

/* Autoria (assets/js/autoria.js) — sublinhado na cor de cada pessoa */
.trecho-autor { border-bottom: 2px solid var(--cor-autor, var(--amarelo)); padding-bottom: 1px; }
.legenda-autoria { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: 0.8rem; color: var(--tinta-suave); }
.legenda-autoria-nome { color: var(--marinho); font-weight: 600; border-bottom: 3px solid var(--cor-autor, var(--amarelo)); }

/* Compartilhados comigo */
.aviso-so-online-icone { display: inline-flex; color: var(--acento); margin-bottom: 8px; }
.bloco-editar-junto { margin: 16px 0; padding: 14px; border-radius: 12px; background: var(--fundo-neutro); }
.bloco-editar-junto .botao { width: auto; }
.pagina-compartilhado .registro-documento { width: 100%; text-align: left; border: 1px solid var(--linha); background: var(--branco); cursor: pointer; font: inherit; }
.pagina-compartilhado .registro-crumb-subtitulo { margin-top: 18px; }

/* =========================================================
   Início — busca em todos os crumbs
   ========================================================= */
.pagina-inicio { max-width: 760px; margin: 0 auto; }
.inicio-topo { text-align: center; padding: 8vh 0 12px; transition: padding 0.2s ease; }
.pagina-inicio-buscando .inicio-topo { padding-top: 8px; }
.pagina-inicio-buscando .texto-boas-vindas,
.pagina-inicio-buscando .atalhos-inicio,
.pagina-inicio-buscando .dica-busca-inicio,
.pagina-inicio-buscando .titulo-boas-vindas { display: none; }
.form-busca-inicio { margin: 22px 0 0; }
.pagina-inicio-buscando .form-busca-inicio { margin-top: 0; }
.campo-busca-inicio { box-shadow: var(--sombra); }
.campo-busca-inicio .entrada-busca-inicio { height: 54px; font-size: 1.05rem; }
.dica-busca-inicio { margin: 12px 0 0; font-size: 0.85rem; color: var(--tinta-suave); }
.atalhos-inicio { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.atalhos-inicio .botao { width: auto; }
/* O espaçamento vem do próprio .atalhos-inicio; e o secundário fica do
   mesmo tamanho do principal (par de botões lado a lado no desktop). */
.atalhos-inicio .botao-boas-vindas { margin-top: 0; }
.atalhos-inicio .botao-secundario { min-height: 52px; padding: 0 28px; font-size: 1rem; }
.resultados-inicio { margin-top: 12px; }
.secao-resultados { margin: 18px 0 0; }
.secao-resultados-titulo {
  display: flex; align-items: center; gap: 8px;
  font-size: 1rem; margin: 0 0 10px; color: var(--marinho);
}
.secao-resultados-qtd {
  font-family: inherit; font-size: 0.74rem; font-weight: 700;
  background: var(--salvia); color: var(--marinho);
  padding: 1px 8px; border-radius: 999px;
}
.aviso-parcial {
  margin: 18px 0 0; padding: 12px 14px; border-radius: 12px;
  background: var(--manteiga); color: var(--marinho); font-size: 0.88rem; line-height: 1.45;
}
.ver-mais-resultados { display: inline-block; margin-top: 10px; color: var(--acento); font-weight: 600; }

/* Compartilhar na criação (Novo crumb, Nova tag) */
.area-compartilhar-novo { margin: 0 0 16px; }
.detalhes-compartilhar-nova-tag { margin-top: 12px; }
.resumo-compartilhar-nova-tag { cursor: pointer; font-weight: 600; color: var(--acento); font-size: 0.9rem; padding: 6px 0; }
.detalhes-compartilhar-nova-tag .area-compartilhar { margin-top: 8px; }

/* Ajuda (assets/js/paginas/ajuda.js) */
.pagina-ajuda .barra-busca-crumbs { margin-bottom: 16px; }
.ajuda-grupo { margin-top: 22px; }
.ajuda-grupo-titulo {
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--acento);
}
.ajuda-secao { margin-bottom: 10px; }
.ajuda-lista { margin: 0 0 10px; padding-left: 20px; }
.ajuda-lista li + li { margin-top: 5px; }
.ajuda-dica {
  padding: 10px 14px;
  border-radius: var(--raio-pequeno);
  background: var(--manteiga);
  border-left: 3px solid var(--amarelo);
}
.ajuda-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 !important; }
.ajuda-links a { text-decoration: none; }
.ajuda-sem-resultado { margin: 8px 0 16px; }

/* Módulo Compartilhar recolhido (Novo crumb / Editar crumb) */
.bloco-compartilhar-recolhido > .comp-cabeca-recolhivel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  cursor: pointer;
  list-style: none;
}
.bloco-compartilhar-recolhido > .comp-cabeca-recolhivel::-webkit-details-marker { display: none; }
.bloco-compartilhar-recolhido > .comp-cabeca-recolhivel .subtitulo-bloco { margin: 0; }
.bloco-compartilhar-recolhido > .comp-cabeca-recolhivel::after {
  content: '▾';
  margin-left: auto;
  color: var(--acento);
  order: 3;
}
.bloco-compartilhar-recolhido[open] > .comp-cabeca-recolhivel::after { content: '▴'; }
.comp-resumo { order: 2; font-size: 0.85rem; color: var(--tinta-suave); min-width: 0; }
.bloco-compartilhar-ativo .comp-resumo { color: var(--acento); font-weight: 600; }
.comp-conteudo-recolhivel { margin-top: 14px; }

/* =========================================================
   Depositar / Sacar (assets/js/movimento-pote.js) e
   Gerenciar → Recorrentes (assets/js/gerenciar/recorrentes.js)
   ========================================================= */
.cartao-pote-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.botoes-movimento { display: flex; gap: 6px; }
.botao-icone-movimento {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  color: var(--acento);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.botao-icone-movimento:hover { border-color: var(--acento); background: var(--fundo-neutro); }
.botao-icone-movimento:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.janela-movimento .campo { margin-bottom: 18px; }
.janela-movimento-saldo { margin-bottom: 16px; }
.janela-movimento-erro { margin: -6px 0 14px; color: var(--marinho); font-size: 0.86rem; font-weight: 600; }
.janela-movimento-erro[hidden] { display: none; }
.bloco-recorrentes-minimizado { padding: 0; margin-top: 8px; }
.bloco-recorrentes-corpo { padding: 0 18px 18px; }
.bloco-recorrentes-corpo .cartao-app { box-shadow: none; border: 1px solid var(--fundo-neutro); }
.bloco-recorrentes-corpo .barra-gerenciar { margin-top: 0; }
@media (min-width: 900px) { .bloco-recorrentes-corpo { padding: 0 28px 22px; } }

/* Rótulo de campo que não é <label> (grupo de botões/chips). */
.rotulo-campo { display: block; font-size: 0.85rem; font-weight: 600; color: var(--tinta-suave); margin-bottom: 8px; }
/* Chips marcáveis dentro de .campo: não herdam o visual de label de campo. */
.campo label.marcavel { display: inline-flex; margin-bottom: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.campo-potes-recorrente .lista-potes-tag { margin-top: 4px; }
.campo-potes-recorrente .campo-ajuda { margin-top: 8px; }
.marcavel-sem-fim { margin-top: 12px; }
.alternador-sinal-duplo { grid-template-columns: repeat(2, auto); }
.aviso-recorrente-edicao { padding: 10px 12px; border-radius: var(--raio-pequeno); background: var(--manteiga); color: var(--tinta); }
.previa-recorrente { margin: -4px 0 18px; font-size: 0.86rem; line-height: 1.45; color: var(--acento); font-weight: 600; }
.previa-recorrente:empty { display: none; }
.cartao-recorrente-valor { font-size: 1.2rem; }
.cartao-recorrente-potes { margin-top: 12px; }
.dash-recorrentes { margin-top: 16px; }

/* Seguir amigos (Gerenciar → Amigos e Compartilhados → De quem sigo) */
.chip-seguindo { background: var(--amarelo); color: var(--branco); }
.bloco-seguir .texto-ajuda-bloco { margin-bottom: 10px; }
.escopo-compartilhados { grid-template-columns: repeat(2, auto); justify-self: start; width: max-content; max-width: 100%; }
@media (max-width: 599px) {
  .escopo-compartilhados { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .escopo-compartilhados button { font-size: 0.88rem; }
}
.seguidos-resumo { margin: -4px 0 12px; font-size: 0.86rem; color: var(--tinta-suave); }
.seguidos-resumo[hidden] { display: none; }
.seguidos-resumo a { color: var(--acento); font-weight: 600; }
.potes-seguidos[hidden] { display: none; }
.potes-seguidos .secao-resultados { margin-top: 4px; }
.secao-resultados-titulo-crumbs { margin-top: 22px; }

/* ===== Dashboard → Potes: "Cartões | Planilha" e a planilha do pote ===== */
.escopo-visao-potes { grid-template-columns: repeat(2, auto); }
@media (max-width: 599px) {
  .escopo-visao-potes { grid-template-columns: repeat(2, 1fr); width: 100%; }
}
.dash-planilha { display: grid; gap: 12px; }
.dash-planilha-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 18px; }
.dash-planilha-rotulo { display: grid; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--tinta-suave); min-width: 0; flex: 1 1 220px; max-width: 420px; }
.dash-planilha-pote {
  min-height: 42px; padding: 0 12px; border: 1.5px solid var(--linha); border-radius: var(--raio-pequeno);
  background: var(--branco); color: var(--marinho); font: inherit; font-size: 0.95rem; font-weight: 600; max-width: 100%;
}
.dash-planilha-saldo { display: grid; justify-items: end; margin: 0; font-size: 0.8rem; color: var(--tinta-suave); }
.dash-planilha-saldo strong { font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 600; color: var(--marinho); }

.planilha-pote { display: grid; gap: 8px; }
.planilha-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.planilha-barra .botao-secundario { min-height: 38px; }
.planilha-selo { font-size: 0.78rem; font-weight: 700; color: var(--acento); background: var(--salvia); padding: 3px 10px; border-radius: 999px; }
.planilha-limpar[hidden] { display: none; }

.planilha-rolagem {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1.5px solid var(--linha); border-radius: var(--raio-medio); background: var(--branco);
}
.planilha { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.88rem; color: var(--marinho); }
.planilha th, .planilha td { padding: 8px 10px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: middle; }
.planilha thead th { background: var(--fundo-neutro); position: sticky; top: 0; z-index: 1; }
.planilha .planilha-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.planilha td[data-col="data"] { white-space: nowrap; }
.planilha td[data-col="descricao"] { min-width: 200px; }
.planilha-ordenar {
  border: none; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--marinho);
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.planilha-ordenar::after { content: attr(data-seta); font-size: 0.7rem; color: var(--acento); }
.planilha-ordenar-ativa { color: var(--acento); }
.planilha-num .planilha-ordenar { flex-direction: row-reverse; }
.planilha-linha-filtros td { background: var(--fundo-neutro); padding-top: 0; }
.planilha-filtro {
  width: 100%; min-width: 0; min-height: 32px; padding: 0 8px; box-sizing: border-box;
  border: 1px solid var(--linha); border-radius: 6px; background: var(--branco);
  font: inherit; font-size: 0.8rem; color: var(--marinho);
}
.planilha-acoes { width: 1%; white-space: nowrap; text-align: right; }
.planilha-acao { width: 32px; height: 32px; color: var(--acento); }
/* Coluna Origem: "Crumb" com o botão que abre o crumb logo ao lado. */
.planilha-origem-crumb { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.planilha .planilha-abrir-crumb { width: 28px; height: 28px; margin: -4px 0; }
.planilha tbody tr:hover td { background: var(--creme); }
.planilha-linha-inicial td { background: var(--manteiga); font-weight: 600; }
.planilha-linha-historico td, .planilha-linha-externo td, .planilha-linha-recorrente td[data-col="origem"] { color: var(--acento); }
.planilha-saida { color: var(--acento); }
.planilha .planilha-saida { font-weight: 600; }
.planilha-trecho { display: block; font-size: 0.78rem; color: var(--tinta-suave); }
.planilha-editavel { cursor: text; text-decoration: underline dotted var(--cinza-medio); text-underline-offset: 4px; }
.planilha tbody tr .planilha-editavel:hover, .planilha tbody tr .planilha-editavel:focus { background: var(--manteiga); outline: none; box-shadow: inset 0 0 0 1.5px var(--amarelo); }
.planilha-editavel .planilha-trecho { text-decoration: none; }
/* Data fica parada ao rolar a planilha para os lados (celular). */
.planilha th:first-child, .planilha td:first-child { position: sticky; left: 0; z-index: 1; background: var(--branco); box-shadow: 1px 0 0 var(--linha); }
.planilha thead th:first-child, .planilha .planilha-linha-filtros td:first-child, .planilha tfoot td:first-child { background: var(--fundo-neutro); z-index: 2; }
.planilha .planilha-linha-inicial td:first-child, .planilha .planilha-linha-nova td:first-child { background: var(--manteiga); }
.planilha-salvando { opacity: 0.5; }
.planilha-campo {
  width: 100%; min-width: 90px; min-height: 34px; box-sizing: border-box; padding: 0 8px;
  border: 1.5px solid var(--amarelo); border-radius: 6px; background: var(--branco);
  font: inherit; font-size: 0.88rem; color: var(--marinho);
}
.planilha-campo-num { text-align: right; }
.planilha-linha-nova td { background: var(--manteiga); vertical-align: middle; }
.planilha-acoes-nova { display: table-cell; }
/* Linha nova: Salvar e Cancelar lado a lado, do tamanho do texto (o
   .botao geral tem width: 100% e empurrava o Cancelar pra fora). */
.planilha-botoes-nova { display: inline-flex; align-items: center; gap: 12px; }
.planilha-acoes-nova .botao { width: auto; min-height: 34px; padding: 0 16px; font-size: 0.88rem; box-shadow: none; }
.planilha-vazia td { text-align: center; color: var(--tinta-suave); padding: 22px 10px; }
.planilha tfoot td { background: var(--fundo-neutro); border-bottom: none; font-weight: 600; vertical-align: middle; }
.planilha-total-linha { display: block; }
.planilha-total-rotulo-curto { display: block; font-size: 0.74rem; font-weight: 600; color: var(--tinta-suave); }
.planilha td[data-col="tag"] { white-space: nowrap; }
@media (max-width: 599px) {
  .dash-planilha-saldo { justify-items: start; }
  .planilha td:first-child .planilha-campo[type="date"] { min-width: 130px; }
}

/* ===== Crumb numa janela (planilha do pote → olho) ===== */
body.com-janela-crumb { overflow: hidden; }
.janela-crumb-fundo {
  position: fixed; inset: 0; z-index: 140;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(243, 243, 243, 0.86);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.janela-crumb {
  width: 100%; max-width: 720px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column;
  background: var(--fundo-neutro); border-radius: var(--raio-medio); box-shadow: var(--sombra); overflow: hidden;
}
.janela-crumb-topo {
  display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 18px;
  background: var(--branco); border-bottom: 1px solid var(--linha);
}
.janela-crumb-topo .cabecalho-crumb-textos { flex: 1; min-width: 0; }
.janela-crumb-titulo { margin: 0; font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 600; color: var(--marinho); }
.janela-crumb-topo .subtitulo-crumb { margin: 2px 0 0; font-size: 0.82rem; }
.janela-crumb-pagina, .janela-crumb-fechar { flex: 0 0 auto; color: var(--acento); }
.janela-crumb-fechar { font-size: 1.5rem; line-height: 1; }
.janela-crumb-pagina[hidden] { display: none; }
.janela-crumb-corpo { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px; overscroll-behavior: contain; }
.janela-crumb-corpo .registro-crumb { margin: 0; }
.janela-crumb .botao-minimizar-crumb { display: none; }
@media (max-width: 599px) {
  .janela-crumb-fundo { padding: 0; align-items: flex-end; }
  .janela-crumb { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: var(--raio-medio) var(--raio-medio) 0 0; }
  .janela-crumb-corpo { padding: 10px; }
}
.janela-crumb-topo .cabecalho-crumb-textos { text-align: left; }

/* =====================================================================
   Meus crumbs: escopos Amigos (com a antiga página "Compartilhados") e
   Editáveis — cinco opções na barra.
   ===================================================================== */
.escopo-crumbs-lista { grid-template-columns: repeat(5, auto); }
.secao-resultados-nota { margin: -4px 0 10px; font-size: 0.84rem; color: var(--tinta-suave); }
@media (max-width: 599px) {
  /* No celular a barra rola de lado se não couber (sem quebrar os rótulos). */
  .escopo-crumbs-lista {
    display: flex; width: 100%; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .escopo-crumbs-lista::-webkit-scrollbar { display: none; }
  .escopo-crumbs-lista button { flex: 1 0 auto; padding: 0 6px; font-size: 0.78rem; white-space: nowrap; }
}

/* =====================================================================
   Câmera (/camera) — tela cheia, clara (regra do projeto: nada de fundo
   escuro); só o visor mostra a imagem da câmera.
   ===================================================================== */
html.com-camera-aberta, html.com-camera-aberta body { overflow: hidden; }
.camera-tela {
  position: fixed; inset: 0; z-index: 150;
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 14px);
  background: var(--fundo-neutro); color: var(--marinho);
}
.camera-topo { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.camera-status { flex: 1; min-width: 0; margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--marinho); line-height: 1.3; }
.camera-topo .camera-concluir { flex: 0 0 auto; width: auto; margin: 0; min-height: 42px; padding: 0 20px; font-size: 0.95rem; box-shadow: none; }
.camera-concluir[hidden] { display: none; }
.camera-botao-redondo {
  flex: 0 0 auto; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--linha); border-radius: 50%; background: var(--branco); color: var(--marinho); cursor: pointer;
}
.camera-botao-redondo:disabled { opacity: 0.4; cursor: default; }
.camera-visor {
  position: relative; min-height: 0; overflow: hidden;
  border-radius: var(--raio-medio); background: var(--salvia); box-shadow: var(--sombra);
}
.camera-previa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--salvia); }
.camera-previa-espelhada { transform: scaleX(-1); }
.camera-flash { position: absolute; inset: 0; background: var(--branco); opacity: 0; pointer-events: none; }
.camera-flash-ativo { animation: camera-flash 0.28s ease-out; }
@keyframes camera-flash { from { opacity: 0.9; } to { opacity: 0; } }
.camera-tempo {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px;
  border-radius: 999px; background: var(--branco); color: var(--marinho);
  font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: var(--sombra);
}
.camera-tempo::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #D93B2B; animation: camera-pisca 1s infinite; }
.camera-tempo[hidden] { display: none; }
@keyframes camera-pisca { 50% { opacity: 0.25; } }
.camera-aviso {
  position: absolute; left: 14px; right: 14px; top: 50%; transform: translateY(-50%);
  padding: 18px; border-radius: var(--raio-medio); background: var(--branco); box-shadow: var(--sombra); text-align: center;
}
.camera-aviso[hidden] { display: none; }
.camera-aviso-texto { margin: 0 0 14px; line-height: 1.45; }
.camera-aviso-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.camera-base { display: grid; gap: 12px; justify-items: center; }
.camera-modos {
  display: inline-flex; gap: 2px; padding: 3px; border: 1.5px solid var(--linha); border-radius: 999px; background: var(--branco);
}
.camera-modos button {
  min-height: 34px; padding: 0 18px; border: none; border-radius: 999px; background: transparent;
  color: var(--tinta-suave); font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.camera-modos button[aria-checked="true"] { background: var(--amarelo); color: var(--branco); }
.camera-modos button:disabled { cursor: default; opacity: 0.5; }
.camera-controles {
  width: 100%; max-width: 420px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.camera-controles > :first-child { justify-self: start; }
.camera-controles > :last-child { justify-self: end; }
.camera-ultima {
  width: 52px; height: 52px; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid var(--branco); border-radius: 12px; background: var(--salvia); box-shadow: var(--sombra);
}
.camera-ultima[hidden] { visibility: hidden; display: block; }
.camera-ultima img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera-ultima-sem-imagem img { display: none; }
.camera-ultima-sem-imagem::after { content: '▶'; color: var(--acento); font-size: 1.1rem; }
.camera-disparo {
  width: 78px; height: 78px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 4px solid var(--amarelo); border-radius: 50%; background: var(--branco); cursor: pointer;
  box-shadow: var(--sombra); transition: transform 0.12s;
}
.camera-disparo:active { transform: scale(0.94); }
.camera-disparo:disabled { opacity: 0.45; cursor: default; }
.camera-disparo-miolo { width: 58px; height: 58px; border-radius: 50%; background: var(--amarelo); transition: all 0.18s; }
.camera-modo-video .camera-disparo { border-color: var(--marinho); }
.camera-modo-video .camera-disparo-miolo { background: #D93B2B; }
.camera-gravando .camera-disparo-miolo { width: 30px; height: 30px; border-radius: 7px; }
@media (min-width: 900px) {
  .camera-tela { padding: 18px max(18px, calc((100vw - 1100px) / 2)) 22px; }
}
/* Atalho da câmera na tela inicial. */
.atalhos-inicio .botao-camera-inicio { display: inline-flex; align-items: center; gap: 8px; }
.atalhos-inicio .botao-camera-inicio svg { flex: 0 0 auto; }

/* =====================================================================
   Agenda (Novo crumb / Editar crumb): data futura → "Transformar em
   agenda" + horário do lembrete.
   ===================================================================== */
.bloco-agenda { grid-column: 1 / -1; margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: var(--creme); border: 1px solid var(--salvia); }
.bloco-agenda[hidden] { display: none; }
.bloco-agenda-ligada { background: var(--manteiga); border-color: var(--amarelo); }
.campo-agenda { margin: 0; }
.campo-agenda .interruptor-texto { display: inline-flex; align-items: center; gap: 6px; color: var(--marinho); font-size: 0.95rem; }
.dica-agenda { margin: 8px 0 0; }
.dica-agenda[hidden], .campos-agenda[hidden], .dica-push-agenda[hidden] { display: none; }
.campos-agenda { margin-top: 12px; display: grid; gap: 6px; }
.campo-hora-lembrete { margin-bottom: 0; max-width: 220px; }
.resumo-agenda { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--acento); }
.resumo-agenda:empty { display: none; }
.resumo-agenda-erro { color: #B3261E; }
.dica-push-agenda { margin: 0; }
.dica-push-agenda a { color: var(--acento); font-weight: 600; }
.registro-crumb-agenda {
  display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 4px 10px;
  border-radius: 999px; background: var(--manteiga); color: var(--marinho); font-size: 0.84rem; font-weight: 600;
}
.registro-crumb-agenda-passou { background: var(--salvia); color: var(--acento); }
.cartao-crumb-selo-agenda { background: var(--manteiga); color: var(--marinho); }

/* =====================================================================
   Potes: lançamentos futuros (previstos, inativos) e os dois totais —
   saldo efetivo (consolidado) e saldo previsto.
   ===================================================================== */
.totais-pote { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.total-pote { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--creme); }
.total-pote-efetivo { background: var(--manteiga); }
.total-pote-rotulo { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-suave); }
.total-pote-valor { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.3rem; color: var(--marinho); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.total-pote-previsto .total-pote-valor { color: var(--acento); }
.total-pote-negativo { color: var(--acento); }
.total-pote-nota { font-size: 0.76rem; color: var(--tinta-suave); line-height: 1.3; }
.total-pote-sem-futuros .total-pote-valor { opacity: 0.6; }
.janela-movimento-dica { margin: 6px 0 0; font-size: 0.8rem; color: var(--tinta-suave); }
/* Extrato (Dashboard / pote do mundo): linha prevista = inativa. */
.dash-linha-futura .dash-linha-link { opacity: 0.62; }
.dash-linha-futura .dash-linha-valor { font-style: italic; }
.dash-selo-previsto { background: var(--manteiga); color: var(--marinho); }
.dash-extrato-separador { list-style: none; margin: 4px 0; padding: 6px 0 2px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-suave); border-top: 1px dashed var(--linha); }
/* Planilha: linhas previstas inativas + colunas Efetivo / Previsto. */
.planilha-linha-futura td { color: var(--tinta-suave); font-style: italic; }
.planilha-linha-futura td.planilha-acoes, .planilha-linha-futura td.planilha-editavel { font-style: normal; }
.planilha-selo-previsto { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--manteiga); color: var(--marinho); font-size: 0.7rem; font-weight: 700; font-style: normal; vertical-align: 1px; }
.planilha-total-previsto strong { color: var(--acento); }
.planilha-sem-valor { color: var(--linha); }
.dash-planilha-topo .totais-pote { margin-top: 0; flex: 0 1 420px; min-width: min(100%, 300px); }