/* Central da Trama · visual v3 (cara de produto Apple)
   Fonte do sistema (SF Pro no Mac e no iPhone, Inter nos outros), muito respiro,
   cards com borda finíssima, vidro fosco nas barras e seletores tipo iPhone.
   As cores são as mesmas da v2: azul royal, laranja e azul céu.
   Sem preto em lugar nenhum, nem em sombra. Degradê só no card do topo.
   Feito primeiro para o celular; no computador vira painel. */

:root {
  color-scheme: light;

  /* ============================================================
     PALETA. Troque as cores aqui e o painel inteiro acompanha.
     (Só o manifest.json e a linha "theme-color" dos dois .html
     repetem o azul royal e o fundo, porque não leem este arquivo.)
     ============================================================ */
  --lavanda: #E8ECFF;
  --cartao: #FBFBFF;
  --borda: #E3E7FF;
  --texto: #24306E;
  --texto2: #5C68A8;
  --royal: #3D5AFE;
  --laranja: #FF8A3D;
  --ceu: #4BA8F0;
  --royal-suave: #D9DFFF;
  --laranja-suave: #FFE1C8;
  --ceu-suave: #D4ECFF;
  --positivo: #2FA87A;
  --sobre-degrade: #FFF8F4;
  --hero-meio: #6B7CFF;

  /* Quem usa cada cor */
  --perfil-amanda: var(--ceu);
  --perfil-trama: var(--laranja);
  --rede-instagram: var(--royal);
  --rede-linkedin: var(--laranja);
  --rede-youtube: var(--ceu);
  --rede-tiktok: var(--texto);
  --rede-pinterest: var(--mistura);
  --rede-substack: var(--positivo);
  --sem-cor: var(--texto2);

  /* A cor de cada uma das 9 etapas do conteúdo (quadro, ficha e Visão geral):
     Ideia, Roteiro pronto, Falta gravar, Gravado, Enviado pra edição, Editado,
     Pronto pra programar, Programado e No ar */
  --etapa-1: var(--texto2);
  --etapa-2: var(--royal);
  --etapa-3: var(--laranja);
  --etapa-4: var(--hero-meio);
  --etapa-5: var(--ceu);
  --etapa-6: var(--mistura);
  --etapa-7: color-mix(in srgb, var(--positivo) 50%, var(--ceu));
  --etapa-8: var(--texto);
  --etapa-9: var(--positivo);

  /* Alertas: a cor que chama é o laranja cheio, com texto azul escuro */
  --alerta: var(--laranja);

  /* O único degradê do painel: o card do topo da Visão geral */
  --degrade-hero: linear-gradient(135deg, var(--royal) 0%, var(--hero-meio) 50%, var(--laranja) 100%);

  /* Tons que saem das cores de cima (não são cores novas) */
  --fundo: color-mix(in srgb, var(--lavanda) 55%, var(--cartao));
  --linha: var(--borda);
  --linha-forte: color-mix(in srgb, var(--texto2) 75%, var(--cartao));
  --toque: color-mix(in srgb, var(--royal-suave) 62%, var(--cartao));
  --trilho: color-mix(in srgb, var(--texto2) 14%, var(--fundo));
  --positivo-suave: color-mix(in srgb, var(--positivo) 16%, var(--cartao));
  --tiktok-suave: color-mix(in srgb, var(--texto) 12%, var(--cartao));
  --mistura: color-mix(in srgb, var(--laranja) 50%, var(--royal));
  --pinterest-suave: color-mix(in srgb, var(--mistura) 20%, var(--cartao));
  --vidro-claro: color-mix(in srgb, var(--cartao) 88%, transparent);
  --vidro-barra: color-mix(in srgb, var(--cartao) 72%, transparent);
  --royal-forte: color-mix(in srgb, var(--royal) 84%, var(--texto));
  --texto-no-fundo: color-mix(in srgb, var(--texto) 70%, var(--texto2));
  --vidro: color-mix(in srgb, var(--texto) 30%, transparent);
  --veu: color-mix(in srgb, var(--texto) 34%, transparent);
  --brilho: color-mix(in srgb, var(--sobre-degrade) 12%, transparent);

  /* Sombras: sempre azuis, bem suaves */
  --sombra-leve: 0 1px 2px color-mix(in srgb, var(--royal) 6%, transparent);
  --sombra: 0 1px 2px color-mix(in srgb, var(--royal) 5%, transparent), 0 10px 30px color-mix(in srgb, var(--royal) 8%, transparent);
  --sombra-forte: 0 6px 16px color-mix(in srgb, var(--royal) 22%, transparent);
  --sombra-janela: 0 24px 70px color-mix(in srgb, var(--texto) 22%, transparent);
  --sombra-alerta: 0 10px 26px color-mix(in srgb, var(--alerta) 30%, transparent);
  --vidro-fosco: saturate(180%) blur(20px);

  /* Formas */
  --raio: 24px;
  --raio-p: 20px;
  --raio-hero: 24px;
  --raio-campo: 14px;
  --raio-fatia: 12px;
  --pilula: 999px;

  /* Respiro: a calha é a margem da página, o dentro é o recheio dos cards */
  --calha: 16px;
  --dentro: 20px;
  --respiro: 26px;

  /* Fonte: a do sistema da Apple; nos outros aparelhos cai na Inter */
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif;
  --titulo: var(--fonte);
  --corpo: var(--fonte);

  /* Movimento: curto e macio */
  --suave: 240ms ease-out;
  --rapido: 200ms ease-out;

  --menu: 272px;
  --barra: 70px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--fundo);
  scrollbar-color: var(--linha-forte) transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  accent-color: var(--royal);
  caret-color: var(--royal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--royal-suave); color: var(--texto); }

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--texto);
}
h1 { font-size: 30px; line-height: 1.12; }
h2 { font-size: 19px; line-height: 1.25; }
h3 { font-size: 16px; line-height: 1.3; }
p { margin: 0 0 10px; }
strong, b { font-weight: 600; }
a { color: var(--royal-forte); text-decoration-color: color-mix(in srgb, var(--royal) 45%, transparent); text-underline-offset: 3px; transition: color var(--rapido); }
a:hover { color: var(--texto); }
small, .pequeno { font-size: 13px; color: var(--texto2); }
.sobre { font-size: 15px; font-weight: 500; color: var(--texto2); margin: 0 0 4px; }
[hidden] { display: none !important; }

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

.pular {
  position: absolute;
  left: 12px;
  top: -80px;
  background: var(--texto);
  color: var(--sobre-degrade);
  padding: 10px 16px;
  border-radius: var(--pilula);
  z-index: 60;
}
.pular:focus { top: 12px; color: var(--sobre-degrade); }

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.icone { flex: none; vertical-align: middle; }

/* Nenhum botão herda o preto padrão do navegador. */
button { color: var(--texto); font-family: var(--corpo); }

/* ---------- Botões e campos ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--pilula);
  border: none;
  background: var(--toque);
  color: var(--texto);
  font: 600 15px/1.2 var(--corpo);
  letter-spacing: -.01em;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--rapido), box-shadow var(--rapido), transform var(--rapido);
}
.botao:hover { background: var(--royal-suave); color: var(--texto); }
.botao:active { transform: scale(.97); }
.botao-forte {
  background: var(--royal);
  color: var(--sobre-degrade);
  box-shadow: var(--sombra-forte);
}
.botao-forte:hover { background: var(--royal-forte); color: var(--sobre-degrade); }
.botao-alerta { background: var(--laranja-suave); color: var(--texto); }
.botao-alerta:hover { background: color-mix(in srgb, var(--laranja) 34%, var(--cartao)); color: var(--texto); }
.botao-pequeno { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.botao[disabled] { opacity: .5; cursor: default; box-shadow: none; }
.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--texto2);
  cursor: pointer;
  transition: background-color var(--rapido), color var(--rapido);
}
.botao-icone:hover { background: var(--toque); color: var(--texto); }
.botao-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--royal-forte);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--rapido);
}
.botao-link:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }

label, .rotulo {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto2);
  margin-bottom: 6px;
}
input, select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--raio-campo);
  border: 1px solid var(--linha-forte);
  background: var(--cartao);
  color: var(--texto);
  font: 400 16px/1.4 var(--corpo);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
option { color: var(--texto); background: var(--cartao); }
input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
}
.marcar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--texto);
  cursor: pointer;
}
textarea { min-height: 120px; resize: vertical; border-radius: var(--raio-campo); }
input::placeholder, textarea::placeholder { color: var(--texto2); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--royal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--royal) 14%, transparent);
}
input[type="file"] { padding: 7px; }
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: none;
  border-radius: var(--pilula);
  background: var(--toque);
  color: var(--texto);
  font: 600 13px var(--corpo);
  cursor: pointer;
}
/* O desenho do calendário do campo de data, na cor do texto. */
input[type="date"]::-webkit-calendar-picker-indicator {
  background: var(--texto2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
.campo-largo { grid-column: 1 / -1; }
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
}
.acoes-esquerda { justify-content: flex-start; }
.dica { font-size: 13px; color: var(--texto2); margin: 10px 0 0; }

/* ---------- Bolinha de cor (perfil, rede, legenda) ---------- */
.ponto {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cor, var(--sem-cor));
  flex: none;
}
/* Meia bolinha de cada perfil (duas cores lado a lado, sem degradê). */
.ponto-duplo { background: linear-gradient(90deg, var(--perfil-amanda) 50%, var(--perfil-trama) 50%); }

/* ---------- Recados ---------- */
.recado {
  border-radius: var(--raio-campo);
  padding: 12px 14px;
  font-size: 14px;
  margin: 0;
  color: var(--texto);
}
.recado-erro { background: var(--laranja-suave); border: 2px solid var(--alerta); font-weight: 600; }
.recado-ok { background: var(--positivo-suave); border: 1px solid var(--positivo); }
.recado-teste { background: var(--toque); border: 1px solid var(--royal-suave); }

/* ---------- Tela de login ---------- */
.tela-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px var(--calha);
}
.cartao-login {
  width: 100%;
  max-width: 420px;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 34px 28px;
}
.cartao-login h1 { font-size: 32px; margin-bottom: 6px; }
.cartao-login form { display: grid; gap: 16px; margin-top: 26px; }
.cartao-login .botao { width: 100%; min-height: 50px; font-size: 16px; }
.cartao-login .botao-link { justify-self: center; padding: 6px; }
.cartao-login .marcar { margin: -6px 0 -4px; }
.marca-login {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 15px var(--titulo);
  letter-spacing: -.01em;
  color: var(--texto2);
  margin-bottom: 26px;
}
.marca-login .ponto {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: url("../icones/icone-192.png") center / cover no-repeat, var(--royal);
  box-shadow: var(--sombra-forte);
}

/* ============================================================
   ESTRUTURA. Base = celular (barra embaixo). Computador mais abaixo.
   ============================================================ */

/* Topo do celular, em vidro fosco: a marca de um lado, a troca de perfil do outro */
.topo-celular {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 50px;
  padding: calc(8px + env(safe-area-inset-top)) var(--calha) 8px;
  background: color-mix(in srgb, var(--fundo) 72%, transparent);
  -webkit-backdrop-filter: var(--vidro-fosco);
  backdrop-filter: var(--vidro-fosco);
  border-bottom: 1px solid color-mix(in srgb, var(--borda) 70%, transparent);
}
.topo-celular strong {
  min-width: 0;
  font: 600 16px/1.25 var(--titulo);
  letter-spacing: -.01em;
  color: var(--texto);
}
.perfil-topo {
  flex: none;
  display: flex;
  gap: 2px;
  max-width: 68%;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--trilho);
  border-radius: var(--raio-fatia);
}
.perfil-topo::-webkit-scrollbar { display: none; }
.perfil-topo button {
  flex: none;
  min-height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--texto-no-fundo);
  font: 500 13px var(--corpo);
  cursor: pointer;
  transition: background-color var(--rapido), color var(--rapido), box-shadow var(--rapido);
}
.perfil-topo button[aria-checked="true"] {
  background: var(--cartao);
  color: var(--texto);
  font-weight: 600;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--royal) 16%, transparent);
}
.perfil-topo .ponto { display: none; }

/* Fundo escurecido (azul, nunca preto) atrás da folha */
.fundo-gaveta { display: none; border: none; color: var(--texto); }
.fundo-gaveta.aberto {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  background: var(--veu);
  z-index: 35;
  cursor: pointer;
}

/* No celular o menu é a folha do botão Mais: as abas que não cabem na barra e a conta */
.menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 18px calc(18px + env(safe-area-inset-bottom));
  background: var(--cartao);
  border-radius: var(--raio) var(--raio) 0 0;
  box-shadow: var(--sombra-janela);
  transform: translateY(104%);
  visibility: hidden;
  transition: transform 280ms ease-out, visibility 0s linear 280ms;
}
/* Ao abrir, a folha fica visível na hora (pra o teclado conseguir entrar nela). */
.menu.aberto { transform: none; visibility: visible; transition: transform 280ms ease-out, visibility 0s; }
.menu nav { display: grid; gap: 4px; margin: 20px 0 8px; }
/* No celular, as abas que já estão na barra de baixo e a troca de perfil (que está no topo) não se repetem aqui. */
.menu nav .na-barra, .menu .rotulo-menu, .menu .seletor-perfil { display: none; }

.marca {
  position: relative;
  padding-left: 54px;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--titulo);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.marca::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border-radius: 12px;
  background: url("../icones/icone-192.png") center / cover no-repeat, var(--royal);
  box-shadow: var(--sombra-forte);
}
.marca small { display: block; font-family: var(--corpo); font-size: 12px; font-weight: 400; letter-spacing: 0; margin-top: 3px; }

.rotulo-menu {
  margin: 28px 0 8px 14px;
  font: 600 12px var(--corpo);
  color: var(--texto2);
}
.seletor-perfil { display: grid; gap: 2px; margin: 0 0 22px; }
.seletor-perfil button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--texto);
  font: 500 15px var(--corpo);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--rapido);
}
.seletor-perfil button:hover { background: color-mix(in srgb, var(--royal-suave) 55%, transparent); }
.seletor-perfil button[aria-checked="true"] { background: var(--royal-suave); font-weight: 600; }

.menu-rodape {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  display: grid;
  gap: 4px;
}
.menu-rodape > button, .menu nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--texto-no-fundo);
  font: 500 15px var(--corpo);
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--rapido), color var(--rapido);
}
.menu-rodape > button:hover, .menu nav button:hover { background: color-mix(in srgb, var(--royal-suave) 55%, transparent); color: var(--texto); }
/* Aba atual: fundo azul clarinho e ícone royal, como a barra lateral dos apps da Apple */
.menu nav button[aria-current="page"] {
  background: var(--royal-suave);
  color: var(--texto);
  font-weight: 600;
}
.menu nav button[aria-current="page"] .icone { color: var(--royal); }
.menu nav button .selo-alerta { margin-left: auto; }
.menu-rodape .estado {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: var(--pilula);
  background: var(--royal-suave);
  color: var(--texto);
  font-size: 12px;
  font-weight: 600;
}
#som[aria-pressed="false"] .estado { background: transparent; box-shadow: inset 0 0 0 1px var(--linha-forte); }
.conta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 4px 0 14px;
  border-top: 1px solid var(--linha);
}
.conta-quem { flex: 1; min-width: 0; display: grid; }
.conta-quem strong { font: 600 15px/1.3 var(--titulo); letter-spacing: -.01em; }
.conta .email { font-size: 13px; color: var(--texto2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sair {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 16px;
  border: none;
  border-radius: var(--pilula);
  background: var(--toque);
  color: var(--texto);
  font: 600 13px var(--corpo);
  cursor: pointer;
  transition: background-color var(--rapido);
}
#sair:hover { background: var(--royal-suave); }

/* Barra de navegação de baixo (só no celular): vidro fosco, com quatro abas e o Mais */
.barra-app {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  padding: 8px 6px;
  background: var(--vidro-barra);
  -webkit-backdrop-filter: var(--vidro-fosco);
  backdrop-filter: var(--vidro-fosco);
  border: 1px solid color-mix(in srgb, var(--cartao) 70%, transparent);
  border-radius: var(--raio);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--borda) 80%, transparent), 0 10px 30px color-mix(in srgb, var(--royal) 14%, transparent);
}
.barra-app button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 54px;
  padding: 0 1px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--texto-no-fundo);
  font: 500 11px/1.15 var(--corpo);
  text-align: center;
  cursor: pointer;
  transition: color var(--rapido);
}
.barra-app .bolha {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 32px;
  border-radius: 12px;
  transition: background-color var(--suave), color var(--suave);
}
.barra-app button[aria-current="page"], .barra-app button.atual { color: var(--royal-forte); font-weight: 600; }
.barra-app button[aria-current="page"] .bolha, .barra-app button.atual .bolha { background: color-mix(in srgb, var(--royal) 13%, transparent); }
.barra-app .selo-alerta { position: absolute; top: -6px; right: -4px; }

.principal {
  padding: 18px var(--calha) calc(var(--barra) + 48px + env(safe-area-inset-bottom));
  min-height: 100vh;
}
.miolo { max-width: 1160px; margin: 0 auto; }
.principal:focus { outline: none; }

/* Entrada macia do conteúdo quando a aba muda */
#aba.entrando { animation: entra 260ms ease-out both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--respiro);
}
.cabeca-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Texto pequeno direto em cima do fundo da página: um tom mais firme, pra ler bem. */
.cabeca .sobre, #aba > .dica, #aba > .meta, .atualizado { color: var(--texto-no-fundo); }

.bloco { margin-bottom: var(--respiro); }
.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--dentro);
}
.cartao > h2 { margin-bottom: 16px; }
.cartao-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.grade-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--respiro); }
.grade-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ---------- Card hero (topo da Visão geral): o único lugar com degradê ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 20px;
  margin-bottom: 16px;
  padding: 24px var(--dentro) var(--dentro);
  border-radius: var(--raio-hero);
  background: var(--degrade-hero);
  color: var(--sobre-degrade);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--royal) 20%, transparent);
}
.hero::before, .hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: var(--brilho);
}
.hero::before { width: 210px; height: 210px; right: -70px; top: -90px; }
.hero::after { width: 170px; height: 170px; right: -40px; bottom: -80px; }
.hero-texto { min-width: 0; }
.hero h1, .hero-numero, .hero-rotulo {
  color: var(--sobre-degrade);
  text-shadow: 0 1px 14px color-mix(in srgb, var(--texto) 32%, transparent);
}
.hero h1 { font-size: 26px; }
.hero .sobre {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: var(--pilula);
  background: var(--vidro);
  color: var(--sobre-degrade);
  font-size: 13px;
  font-weight: 500;
}
/* No código o nome vem antes do número (melhor para leitor de tela); na tela o número aparece em cima. */
.hero-destaque { display: flex; flex-direction: column-reverse; margin-top: 10px; }
.hero-numero {
  margin: 0;
  font: 700 50px/1.02 var(--titulo);
  letter-spacing: -.03em;
}
.hero-rotulo { margin: 4px 0 0; font: 600 17px/1.3 var(--corpo); letter-spacing: -.01em; }
.hero-var {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 12px 0 0;
  padding: 5px 14px 5px 10px;
  border-radius: var(--pilula);
  background: var(--cartao);
  color: var(--texto);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--sombra-leve);
}
.hero .var { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--texto); }
.hero-var .var.sobe, .hero-var .var.desce { box-shadow: none; }

/* Os três cartões de vidro dentro do hero */
.hero-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vidro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 10px;
  border-radius: var(--raio-p);
  background: var(--vidro-claro);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--texto);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cartao) 60%, transparent), 0 8px 20px color-mix(in srgb, var(--texto) 10%, transparent);
}
.vidro .rotulo { margin: 0; font-size: 11.5px; line-height: 1.25; color: var(--texto); overflow-wrap: anywhere; }
.vidro .valor {
  margin-top: auto;
  padding-top: 4px;
  font: 700 22px/1.1 var(--titulo);
  letter-spacing: -.02em;
}
.vidro .var { font-size: 11px; line-height: 1.2; }
.vidro .var.sobe, .vidro .var.desce { box-shadow: none; }
.vidro .nota { display: none; }
.hero :focus-visible { outline-color: var(--sobre-degrade); }

/* A linha "atualizado em", logo abaixo do topo */
.atualizado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 2px var(--respiro);
  font-size: 13px;
  line-height: 1.4;
}
.atualizado .icone { color: var(--texto2); }
.atualizado .botao-link { font-size: 13px; }

/* ---------- Atalhos das redes, em círculos (sempre com o ícone da rede) ---------- */
.circulos {
  display: flex;
  gap: 4px;
  margin: 0 calc(var(--calha) * -1) var(--respiro);
  padding: 4px 12px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.circulos::-webkit-scrollbar { display: none; }
.circulo {
  flex: 1 1 0;
  min-width: 50px;
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 96px;
  padding: 2px 0;
  border: none;
  border-radius: var(--raio-p);
  background: none;
  color: var(--texto);
  font: 500 11px var(--corpo);
  white-space: nowrap;
  cursor: pointer;
}
/* O aro é azul royal liso (o degradê ficou só no card do topo). */
.circulo .aro {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 2px;
  border-radius: 50%;
  background: var(--royal);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--royal) 16%, transparent);
  transition: transform var(--suave), box-shadow var(--suave);
}
.circulo .dentro {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--cartao);
  color: var(--texto);
}
.circulo .dentro .icone { width: 22px; height: 22px; }
.circulo:hover .aro { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--royal) 22%, transparent); }

/* O tom claro de cada rede (usado no dia dos próximos posts) */
[data-rede="instagram"] { --tom: var(--royal-suave); }
[data-rede="linkedin"] { --tom: var(--laranja-suave); }
[data-rede="youtube"] { --tom: var(--ceu-suave); }
[data-rede="tiktok"] { --tom: var(--tiktok-suave); }
[data-rede="pinterest"] { --tom: var(--pinterest-suave); }
[data-rede="substack"] { --tom: var(--positivo-suave); }

/* ---------- Visão geral: gráfico, roteiros e próximos posts ---------- */
.grade-visao { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--respiro); }
.cabeca-lado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.resumo { font-size: 13px; font-weight: 500; color: var(--texto2); }
.proximos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.proximo {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 12px 10px 10px;
  border: none;
  border-radius: var(--raio-p);
  background: color-mix(in srgb, var(--royal-suave) 26%, var(--cartao));
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--rapido), transform var(--rapido);
}
.proximo:hover { background: color-mix(in srgb, var(--royal-suave) 46%, var(--cartao)); }
.proximo:active { transform: scale(.99); }
.proximo .quando {
  flex: none;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  width: 76px;
  min-height: 54px;
  padding: 6px 4px;
  border-radius: 14px;
  background: var(--tom, var(--royal-suave));
  text-align: center;
}
.proximo .quando b { font: 700 13px/1.2 var(--titulo); letter-spacing: -.01em; }
.proximo .quando span { font-size: 12px; font-weight: 500; }
.proximo .corpo { min-width: 0; display: grid; gap: 4px; }
.proximo .corpo strong { font: 600 15px/1.3 var(--titulo); letter-spacing: -.01em; overflow-wrap: anywhere; }
.tag.tag-perfil { background: color-mix(in srgb, var(--cor, var(--sem-cor)) 24%, var(--cartao)); }

/* ---------- Avisos no topo ---------- */
.aviso {
  border-radius: var(--raio-p);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  background: var(--laranja-suave);
  border: 1px solid var(--laranja);
  color: var(--texto);
}
.aviso-teste { background: color-mix(in srgb, var(--royal-suave) 60%, var(--cartao)); border-color: var(--royal-suave); }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }
/* Aviso de problema: borda cheia e uma faixa laranja na lateral. */
.aviso[role="alert"] {
  padding-left: 24px;
  border: 2px solid var(--alerta);
  box-shadow: inset 7px 0 0 var(--alerta), var(--sombra-leve);
  font-weight: 500;
}
/* Aviso discreto da busca automática: informa sem gritar. */
.aviso-busca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--cartao);
  box-shadow: var(--sombra-leve);
  font-size: 14px;
  color: var(--texto);
}
.aviso-busca .icone { color: var(--laranja); }
.aviso-busca > span { flex: 1; min-width: 200px; }

/* ---------- Alertas (feitos para aparecer de verdade) ----------
   Laranja cheio, texto azul escuro, sino que balança e número nas abas. */
.alerta {
  margin-bottom: 18px;
  padding: 18px;
  border-radius: var(--raio);
  background: var(--alerta);
  color: var(--texto);
  box-shadow: var(--sombra-alerta);
}
.alerta-cabeca { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.alerta-cabeca h2 { flex: 1; min-width: 0; font-size: 18px; }
.alerta-sino {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cartao);
  color: var(--texto);
}
.alerta-sino .icone { transform-origin: 50% 12%; animation: sino 2.6s ease-in-out infinite; }
.alerta .botao-icone { flex: none; color: var(--texto); background: color-mix(in srgb, var(--cartao) 45%, transparent); }
.alerta .botao-icone:hover { background: var(--cartao); }
.alerta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alerta li button {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: var(--raio-p);
  background: var(--cartao);
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--rapido);
}
.alerta li button:hover { transform: translateY(-1px); }
.alerta-oque { font-size: 12px; font-weight: 600; }
.alerta li strong { font: 600 15px/1.3 var(--titulo); letter-spacing: -.01em; overflow-wrap: anywhere; }
.alerta-detalhe { font-size: 13px; color: var(--texto2); }
.alerta-resto {
  margin-top: 10px;
  padding: 6px 4px;
  border: none;
  background: none;
  color: var(--texto);
  font: 600 14px var(--corpo);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.alerta :focus-visible, .alerta-pilula:focus-visible { outline-color: var(--texto); }
/* Alertas encolhidos: continuam à vista, numa linha só. */
.alerta-pilula {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 18px;
  padding: 9px 10px 9px 16px;
  border: none;
  border-radius: var(--pilula);
  background: var(--alerta);
  color: var(--texto);
  font: 600 14px var(--corpo);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--sombra-alerta);
}
.alerta-pilula b { margin-left: auto; padding: 4px 14px; border-radius: var(--pilula); background: var(--cartao); font-size: 13px; }
/* O número de alertas em cima de uma aba */
.selo-alerta {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--pilula);
  background: var(--alerta);
  color: var(--texto);
  font: 700 12px/1 var(--corpo);
  animation: pulso 2s ease-out infinite;
}
h2 .selo-alerta { margin-left: 6px; vertical-align: 2px; }
.cartao-alerta { box-shadow: 0 0 0 2.5px var(--alerta), var(--sombra); }
@keyframes sino {
  0%, 55%, 100% { transform: rotate(0); }
  8% { transform: rotate(-16deg); }
  18% { transform: rotate(13deg); }
  28% { transform: rotate(-9deg); }
  38% { transform: rotate(6deg); }
  46% { transform: rotate(-3deg); }
}
@keyframes pulso {
  0% { box-shadow: 0 0 0 2px var(--cartao), 0 0 0 2px color-mix(in srgb, var(--alerta) 70%, transparent); }
  70%, 100% { box-shadow: 0 0 0 2px var(--cartao), 0 0 0 10px transparent; }
}

/* ---------- Cartões de número ---------- */
.stat { padding: 18px; }
.stat .rotulo { margin: 0 0 10px; color: var(--texto2); }
.stat .valor {
  font-family: var(--titulo);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.stat .var {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: var(--pilula);
  background: var(--cartao);
  font-size: 12px;
  font-weight: 600;
  color: var(--texto);
}
.var.sobe { box-shadow: inset 0 0 0 1px var(--positivo); }
.var.sobe .icone { color: var(--positivo); }
.var.desce { box-shadow: inset 0 0 0 1px var(--laranja); }
.var.desce .icone { color: var(--laranja); }
.stat .nota { display: block; font-size: 12px; color: var(--texto2); margin-top: 8px; font-weight: 400; }

/* ---------- Seletores em fatias (o "segmented control" do iPhone) ---------- */
.fatias {
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--trilho);
  border-radius: var(--raio-fatia);
}
.fatias::-webkit-scrollbar { display: none; }
.fatias button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--texto-no-fundo);
  font: 500 13px var(--corpo);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--rapido), color var(--rapido), box-shadow var(--rapido);
}
.fatias button:hover { color: var(--texto); }
.fatias button[aria-pressed="true"], .fatias button[aria-selected="true"] {
  background: var(--cartao);
  color: var(--texto);
  font-weight: 600;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--royal) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--borda) 70%, transparent);
}
.fatias button[aria-pressed="true"] .icone { color: var(--royal); }

/* ---------- Etiquetas ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--pilula);
  font-size: 12px;
  font-weight: 500;
  background: var(--toque);
  color: var(--texto);
  white-space: nowrap;
}
.tag-exemplo { background: var(--laranja-suave); }
.tag-parado { background: var(--alerta); font-weight: 600; box-shadow: 0 0 0 3px color-mix(in srgb, var(--alerta) 28%, transparent); }
.tag-claude { background: var(--royal-suave); }
.tag-eu { background: var(--ceu-suave); }
/* De onde veio o número: busca automática, formulário ou planilha */
.tag-origem-windsor { background: var(--ceu-suave); }
.tag-origem-manual { background: var(--toque); }
.tag-origem-csv { background: var(--positivo-suave); }
.linha-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Número que a rede não entregou: aparece escrito, nunca como zero */
.sem-dado { font-size: 12px; font-weight: 400; color: var(--texto2); white-space: nowrap; letter-spacing: 0; }

/* ---------- Estado vazio ---------- */
.vazio {
  margin: 0;
  padding: 30px 20px;
  text-align: center;
  color: var(--texto2);
  font-size: 14px;
  background: color-mix(in srgb, var(--royal-suave) 22%, var(--cartao));
  border: 1px dashed color-mix(in srgb, var(--texto2) 45%, var(--cartao));
  border-radius: var(--raio-p);
}

/* ---------- Tabelas ---------- */
/* O position: relative segura dentro da rolagem os textos só de leitor de tela (.so-leitor),
   que senão escapariam e criariam rolagem lateral na página inteira. */
.rolagem { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--texto2);
  padding: 8px 12px;
  white-space: nowrap;
}
td { padding: 13px 12px; border-top: 1px solid var(--linha); vertical-align: middle; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.titulo { min-width: 200px; }
td.acao { white-space: nowrap; text-align: right; }
/* Diário das buscas: a data fica numa linha só e o detalhe tem espaço para ler */
.tabela-buscas td:first-child { white-space: nowrap; }
.tabela-buscas td:last-child { min-width: 260px; }

/* ---------- Gráficos ---------- */
.grafico svg { display: block; width: 100%; height: auto; fill: none; }
.grafico text { font-family: var(--corpo); font-size: 11px; font-weight: 400; fill: var(--texto2); font-variant-numeric: tabular-nums; }
.grafico .grade { stroke: var(--linha); stroke-width: 1; }
.grafico .bolinha { fill: var(--cartao); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.legenda button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 4px 13px;
  border-radius: var(--pilula);
  border: none;
  background: var(--toque);
  color: var(--texto);
  font: 500 13px var(--corpo);
  cursor: pointer;
  transition: background-color var(--rapido), color var(--rapido);
}
.legenda button:hover { background: var(--royal-suave); }
.legenda button[aria-pressed="false"] { color: var(--texto2); text-decoration: line-through; background: transparent; box-shadow: inset 0 0 0 1px var(--linha-forte); }
.legenda button[aria-pressed="false"] .ponto { opacity: .35; }

.anel { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.anel svg { width: 168px; height: 168px; flex: none; fill: none; }
.anel .trilho { stroke: var(--toque); }
.anel .centro { font-family: var(--titulo); font-size: 22px; font-weight: 700; letter-spacing: -.02em; fill: var(--texto); }
.anel .centro-rotulo { font-size: 10px; fill: var(--texto2); }
.anel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; min-width: 150px; }
.anel li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.anel li strong { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 15px 0;
  border-top: 1px solid var(--linha);
}
.lista > li:first-child { border-top: none; padding-top: 0; }
.lista .posicao {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--toque);
  font-family: var(--titulo);
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
}
.lista .corpo { flex: 1; min-width: 180px; }
.lista .corpo strong { font-weight: 600; display: block; overflow-wrap: anywhere; }
.lista .numeros { display: flex; flex-wrap: wrap; gap: 4px 16px; width: 100%; font-size: 13px; color: var(--texto2); }
.lista .numeros b { color: var(--texto); font-weight: 600; }
.meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--texto2); }
.meta span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Faixa de conteúdos por etapa, na Visão geral ---------- */
.faixa {
  display: flex;
  gap: 10px;
  margin: 0 calc(var(--dentro) * -1);
  padding: 2px var(--dentro) 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.faixa::-webkit-scrollbar { display: none; }
.etapa {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 108px;
  padding: 16px 8px;
  border: none;
  border-radius: var(--raio-p);
  background: color-mix(in srgb, var(--royal-suave) 30%, var(--cartao));
  text-align: center;
  cursor: pointer;
  color: var(--texto);
  font: inherit;
  transition: background-color var(--rapido), transform var(--rapido);
}
.etapa:hover { background: color-mix(in srgb, var(--royal-suave) 62%, var(--cartao)); }
.etapa .ponto { width: 9px; height: 9px; margin: 0 auto 8px; }
.etapa:active { transform: scale(.97); }
.etapa b { display: block; font-family: var(--titulo); font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.etapa span { display: block; font-size: 12px; font-weight: 400; color: var(--texto); margin-top: 4px; }

/* ---------- Calendário ---------- */
.cal-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.cal-barra h2 { min-width: 170px; }
.cal-filtros { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.cal-filtros label { margin: 0; flex: 1; min-width: 96px; display: block; }
.cal-filtros select { min-height: 42px; padding: 6px 12px; font-size: 16px; width: 100%; margin-top: 4px; }
.cal-semana, .cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-semana div { font-size: 12px; font-weight: 500; color: var(--texto2); padding: 0 2px 4px; text-align: center; }
.cal-dia {
  min-height: 72px;
  background: color-mix(in srgb, var(--royal-suave) 22%, var(--cartao));
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color var(--rapido), background-color var(--rapido);
}
.cal-dia:hover { border-color: var(--linha-forte); }
.cal-dia.fora { background: transparent; }
.cal-dia.fora .cal-num { color: var(--texto2); font-weight: 400; }
.cal-dia.hoje { border-color: var(--royal); background: var(--royal-suave); }
.cal-num {
  align-self: flex-start;
  min-width: 28px;
  height: 26px;
  padding: 0 6px;
  border: none;
  border-radius: var(--pilula);
  background: transparent;
  color: var(--texto);
  font: 500 13px var(--corpo);
  cursor: pointer;
}
.cal-num:hover { background: var(--royal-suave); }
.cal-dia.hoje .cal-num { background: var(--royal); color: var(--sobre-degrade); font-weight: 600; }
.cal-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 4px 2px;
  border: none;
  border-bottom: 3px solid var(--cor, var(--sem-cor));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cor, var(--sem-cor)) 20%, var(--cartao));
  color: var(--texto);
  font: 500 12px/1.25 var(--corpo);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--rapido);
}
.cal-item:hover { background: color-mix(in srgb, var(--cor, var(--sem-cor)) 34%, var(--cartao)); }
.cal-item .txt { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cal-item.atrasado { outline: 2.5px solid var(--alerta); outline-offset: 0; }
.cal-item.atrasado:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }
.cal-item.publicado { opacity: .72; }
.cal-item.publicado .txt { text-decoration: line-through; text-decoration-color: var(--texto2); }

/* ---------- Quadro de conteúdos (as 9 etapas do fio) ---------- */
.quadro {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(80vw, 1fr);
  gap: 12px;
  margin: 0 calc(var(--calha) * -1);
  padding: 0 var(--calha) 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--calha);
}
.coluna {
  background: color-mix(in srgb, var(--cartao) 66%, transparent);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px;
  min-height: 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background-color var(--rapido), border-color var(--rapido);
}
.coluna.alvo { border: 1px dashed var(--royal); background: var(--royal-suave); }
.coluna-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 4px; }
.coluna-cabeca h2 { font-size: 15px; }
.conta-coluna {
  min-width: 26px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto);
  background: var(--toque);
  border-radius: var(--pilula);
  padding: 2px 8px;
}
.cartao-roteiro {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--cartao);
  border: none;
  border-radius: var(--raio-p);
  padding: 14px 14px 14px 18px;
  box-shadow: inset 4px 0 0 var(--cor, var(--sem-cor)), 0 0 0 1px var(--borda), var(--sombra);
  color: var(--texto);
  font: inherit;
  cursor: grab;
  transition: transform var(--rapido);
}
.cartao-roteiro:hover { transform: translateY(-2px); }
.cartao-roteiro.arrastando { opacity: .45; }
.cartao-roteiro.parado { box-shadow: inset 4px 0 0 var(--cor, var(--sem-cor)), 0 0 0 2.5px var(--alerta), var(--sombra); }
.cartao-roteiro strong { display: block; font-weight: 600; font-size: 15px; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 8px; overflow-wrap: anywhere; }
.cartao-roteiro .meta { font-size: 12px; gap: 4px 9px; }
.cartao-roteiro .linha-tags { margin-top: 10px; }
.coluna-vazia { font-size: 13px; color: var(--texto2); text-align: center; padding: 18px 6px; }

/* ---------- Ficha do roteiro ---------- */
.ficha-texto {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--royal-suave) 26%, var(--cartao));
  border-radius: var(--raio-campo);
  padding: 16px;
  font-size: 15px;
  line-height: 1.6;
  max-height: 46vh;
  overflow-y: auto;
  margin: 0;
  font-family: var(--corpo);
}
.ficha-secao { margin-top: 20px; }
.ficha-secao > .rotulo { margin-bottom: 6px; }
.ficha video { width: 100%; max-height: 60vh; border-radius: var(--raio-campo); background: var(--texto); display: block; }
.ficha-status { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ficha-status > div { flex: 1; min-width: 180px; }

/* ---------- Auditoria ---------- */
.texto-prompt { min-height: 260px; font-size: 13px; line-height: 1.5; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
details.historico {
  border-top: 1px solid var(--linha);
  padding: 15px 0;
}
details.historico:first-of-type { border-top: none; }
details.historico summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
details.historico summary::-webkit-details-marker { display: none; }
details.historico summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--royal);
  border-bottom: 1.5px solid var(--royal);
  transform: rotate(-45deg);
  transition: transform var(--rapido);
}
details.historico[open] summary::before { transform: rotate(45deg); }
details.historico .ficha-texto { margin-top: 12px; }

/* ---------- Importar CSV ---------- */
.mapa td select { min-height: 40px; padding: 5px 10px; font-size: 14px; }
.amostra { color: var(--texto2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Janelinha (no celular sobe de baixo, como folha) ---------- */
dialog.modal {
  border: none;
  padding: 0;
  margin: auto auto 0;
  width: 100%;
  max-width: 100%;
  max-height: 92vh;
  border-radius: var(--raio) var(--raio) 0 0;
  background: var(--cartao);
  color: var(--texto);
  box-shadow: var(--sombra-janela);
}
dialog.modal[open] { animation: sobe 280ms ease-out both; }
dialog.modal::backdrop { background: var(--veu); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes sobe {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.modal-caixa { padding: 22px var(--dentro) calc(22px + env(safe-area-inset-bottom)); }
.modal-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.modal-cabeca h2 { font-size: 22px; overflow-wrap: anywhere; }

/* ---------- Avisos rápidos ---------- */
#toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--barra) + 26px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  z-index: 2147483647;
  width: max-content;
  max-width: calc(100vw - 28px);
  pointer-events: none;
}
.toast {
  background: var(--texto);
  color: var(--sobre-degrade);
  padding: 12px 18px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--sombra-janela);
  animation: entra 240ms ease-out both;
  transition: opacity 300ms ease-out;
}
.toast-erro {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--alerta);
  color: var(--texto);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--cartao), var(--sombra-alerta);
}
.toast.some { opacity: 0; }

/* ============================================================
   O FIO DO CONTEÚDO (ficha, quadro, calendário e Visão geral)
   ============================================================ */

/* Campo vazio: um traço suave e a frase "ainda sem dado". Nunca zero inventado. */
.ainda {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 400;
  color: var(--texto2);
  white-space: nowrap;
  letter-spacing: 0;
}
.ainda::before {
  content: '';
  flex: none;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--texto2) 38%, var(--cartao));
}

/* Um ponto de cor por rede */
.pontos-rede { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.pontos-rede .ponto { width: 8px; height: 8px; }

/* Etiqueta da etapa, com a cor dela */
.tag-etapa { background: color-mix(in srgb, var(--cor, var(--sem-cor)) 16%, var(--cartao)); font-weight: 600; }
.tag-etapa .ponto { width: 8px; height: 8px; }
.tag-vazia { background: transparent; box-shadow: inset 0 0 0 1px var(--borda); color: var(--texto2); }
.tag-post-rascunho { background: transparent; box-shadow: inset 0 0 0 1px var(--linha-forte); }
.tag-post-programado { background: var(--royal-suave); }
.tag-post-publicado { background: var(--positivo-suave); }
.tag-post-erro { background: var(--laranja-suave); box-shadow: inset 0 0 0 1px var(--alerta); }

/* Botõezinhos em pílula (adicionar rede, conteúdo pronto) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  max-width: 100%;
  padding: 6px 14px;
  border: none;
  border-radius: var(--pilula);
  background: var(--toque);
  color: var(--texto);
  font: 500 13px var(--corpo);
  cursor: pointer;
  transition: background-color var(--rapido), transform var(--rapido);
}
.chip:hover { background: var(--royal-suave); }
.chip:active { transform: scale(.97); }
.linha-campo { display: flex; gap: 8px; align-items: center; }
.linha-campo > select, .linha-campo > input { flex: 1; min-width: 0; }
.linha-campo > .botao { flex: none; }

/* ---------- A ficha do conteúdo ---------- */
dialog.modal-lado { max-height: 94vh; }
dialog.modal-lado .modal-caixa { padding: 0 var(--dentro) calc(22px + env(safe-area-inset-bottom)); }
dialog.modal-lado .modal-cabeca {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 calc(var(--dentro) * -1) 16px;
  padding: 18px var(--dentro) 12px;
  background: color-mix(in srgb, var(--cartao) 90%, transparent);
  -webkit-backdrop-filter: var(--vidro-fosco);
  backdrop-filter: var(--vidro-fosco);
  border-bottom: 1px solid var(--borda);
}
.nasceu { margin: 10px 0 0; }
.ficha-conteudo .ficha-status { margin-top: 16px; }

/* Linha do tempo: cada etapa e a data em que aconteceu */
.linha-tempo { list-style: none; margin: 16px 0 0; padding: 0; display: grid; }
.linha-tempo li {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-size: 14px;
}
.linha-tempo li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--borda);
}
.linha-tempo li:first-child::before { top: 50%; }
.linha-tempo li:last-child::before { bottom: 50%; }
.linha-tempo .ponto { position: relative; z-index: 1; justify-self: center; box-shadow: 0 0 0 3px var(--cartao); }
.linha-tempo .futura .ponto { background: var(--cartao); box-shadow: inset 0 0 0 2px var(--linha-forte), 0 0 0 3px var(--cartao); }
.linha-tempo .atual .ponto { width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--cartao), 0 0 0 6px color-mix(in srgb, var(--cor) 28%, transparent); }
.linha-tempo .nome { font-weight: 500; overflow-wrap: anywhere; }
.linha-tempo .atual .nome { font-weight: 700; }
.linha-tempo .futura .nome { font-weight: 400; color: var(--texto2); }
.linha-tempo .quando { font-size: 13px; color: var(--texto2); text-align: right; font-variant-numeric: tabular-nums; }

/* As partes da ficha */
.ficha-bloco { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--borda); }
.ficha-bloco-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ficha-bloco-cabeca h3 { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; }
.ficha-bloco-cabeca h3 .icone { color: var(--royal); }
.ficha-campo { margin-top: 14px; }
.ficha-bloco-cabeca + .ficha-campo { margin-top: 0; }
.ficha-campo > .rotulo { margin-bottom: 4px; }
.ficha-fala { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; }
.ficha-conteudo .valor { min-height: 22px; display: flex; align-items: center; }
.ficha-conteudo .valor > p { flex: 1; min-width: 0; }
.ficha-conteudo .acoes-esquerda { margin-top: 12px; }
.ficha-conteudo .rotulo-linha { font-size: 13px; color: var(--texto2); }
.ficha-rodape { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--borda); justify-content: space-between; }

/* "Abrir o roteiro inteiro", "Versões anteriores", "Abrir a auditoria inteira" */
details.abre { margin-top: 4px; }
details.abre > summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--royal-forte);
}
details.abre > summary::-webkit-details-marker { display: none; }
details.abre > summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--royal);
  border-bottom: 1.5px solid var(--royal);
  transform: rotate(-45deg);
  transition: transform var(--rapido);
}
details.abre[open] > summary::before { transform: rotate(45deg); }
details.abre > .ficha-texto { margin-top: 8px; }
.lista-simples > li { padding: 10px 0; font-size: 14px; }

/* Vídeo */
.video-vazio {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px 18px;
  text-align: center;
  font-size: 14px;
  color: var(--texto2);
  background: color-mix(in srgb, var(--royal-suave) 26%, var(--cartao));
  border: 1px dashed color-mix(in srgb, var(--texto2) 45%, var(--cartao));
  border-radius: var(--raio-campo);
  overflow-wrap: anywhere;
}
.video-vazio .icone { color: var(--royal); }
.video-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; font-size: 13px; color: var(--texto2); }

/* Onde vai sair: uma linha por rede */
.redes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rede-linha {
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: color-mix(in srgb, var(--royal-suave) 20%, var(--cartao));
}
.rede-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.rede-nome { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; }
.rede-quando { margin-left: auto; font-size: 13px; color: var(--texto2); font-variant-numeric: tabular-nums; }
.rede-legenda {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.rede-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rede-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); }
.rede-form .acoes { margin-top: 16px; }
.rede-mais { margin-top: 16px; }
form.linha-campo { margin-top: 14px; }

/* Números, rede por rede */
.numeros-rede { margin-top: 18px; }
.ficha-bloco-cabeca + .numeros-rede { margin-top: 0; }
.numeros-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.numeros-cabeca .botao { margin-left: auto; }
.numeros-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.numero {
  display: grid;
  gap: 3px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-campo);
  background: color-mix(in srgb, var(--royal-suave) 20%, var(--cartao));
}
.numero .rotulo { margin: 0; font-size: 12px; }
.numero-valor { font: 700 20px/1.25 var(--titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.compara {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  max-width: 100%;
  margin-top: 4px;
  padding: 2px 9px;
  border-radius: var(--pilula);
  background: var(--cartao);
  font-size: 12px;
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.compara.neutro { box-shadow: inset 0 0 0 1px var(--linha-forte); }
.compara.neutro .icone { color: var(--texto2); }
.compara-vazia { margin-top: 4px; font-size: 12px; color: var(--texto2); }
.campos-numeros { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }

/* Auditoria com IA */
.aud-resumo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: color-mix(in srgb, var(--royal-suave) 26%, var(--cartao));
}
.aud-nota {
  flex: none;
  display: grid;
  justify-items: center;
  align-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--cartao);
  box-shadow: inset 0 0 0 2px var(--royal);
}
.aud-nota b { font: 700 24px/1 var(--titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.aud-nota span { font-size: 11px; color: var(--texto2); }
.aud-texto { min-width: 0; }
.aud-texto p { margin: 0; }
.aud-texto .aud-aprendizado { margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.aud-resumo + details.abre { margin-top: 10px; }
.aud-gerar {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--royal-suave);
  border-radius: var(--raio-p);
  background: color-mix(in srgb, var(--royal-suave) 18%, var(--cartao));
}
.aud-gerar .texto-prompt { min-height: 190px; }
.passo { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; font-size: 15px; font-weight: 600; }
.passo:first-child { margin-top: 0; }
.passo b {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--royal);
  color: var(--sobre-degrade);
  font-size: 13px;
}

/* Próximos passos */
.ideias { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ideias li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-campo);
  background: color-mix(in srgb, var(--royal-suave) 20%, var(--cartao));
}
.ideia-texto { display: inline-flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 190px; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.ideia-texto .icone { color: var(--laranja); margin-top: 2px; }

/* Confirmação do envio e escolha de dia e redes (janelinhas por cima da ficha) */
.resumo-envio { margin: 0 0 14px; display: grid; gap: 10px; }
.resumo-envio > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.resumo-envio dt { color: var(--texto2); }
.resumo-envio dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.resumo-envio .resumo-legenda { white-space: pre-wrap; font-weight: 400; }
.redes-escolha { border: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; min-width: 0; }
.redes-escolha legend { padding: 0; margin-bottom: 2px; font-size: 13px; font-weight: 500; color: var(--texto2); }
.redes-escolha .marcar { margin: 0; }

/* ---------- Quadro de conteúdos ---------- */
.coluna-cabeca h2 { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.coluna-cabeca h2 .ponto { width: 9px; height: 9px; }

/* ---------- Calendário: prontos pra programar, pontos por rede, rascunho ---------- */
.prontos .conta-coluna { margin-left: 6px; vertical-align: 2px; }
.prontos-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-pronto {
  min-height: 42px;
  background: var(--cartao);
  box-shadow: inset 0 0 0 1px var(--borda), var(--sombra-leve);
  font-size: 14px;
  cursor: grab;
}
.chip-pronto > span:not(.tag) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chip-pronto .icone { color: var(--royal); }
.chip-pronto.arrastando { opacity: .45; }
.cal-dia.alvo { border: 1px dashed var(--royal); background: var(--royal-suave); }
.cal-item .pontos-rede { flex-wrap: wrap; justify-content: center; }
.cal-grade .cal-item.rascunho {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--texto2) 60%, var(--cartao));
  box-shadow: none;
}
.legenda-redes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 0; font-size: 13px; color: var(--texto2); }
.legenda-redes li { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Visão geral: o que os números estão dizendo ---------- */
.dizendo-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.dizendo-parte {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: color-mix(in srgb, var(--royal-suave) 22%, var(--cartao));
}
.dizendo-parte > .rotulo { margin: 0 0 10px; }
.dizendo-valor { margin: 0; font: 700 22px/1.2 var(--titulo); letter-spacing: -.02em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dizendo-vazio { margin: 0; min-height: 26px; display: flex; align-items: center; }
.dizendo .dica { margin-top: 6px; }
.aprendizados { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aprendizado {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--raio-campo);
  background: var(--cartao);
  box-shadow: inset 0 0 0 1px var(--borda);
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--rapido);
}
.aprendizado:hover { background: var(--toque); }
.aprendizado .frase { font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }

/* Todo número fica com os algarismos da mesma largura, para não pular quando muda.
   (Fica aqui no fim de propósito: vem depois das regras que definem a fonte de cada um.) */
.hero-numero, .vidro .valor, .stat .valor, .etapa b, .anel .centro, .conta-coluna, .selo-alerta,
.lista .posicao, .lista .numeros, .proximo .quando b, .proximo .quando span, .cal-num, .resumo,
.hero-var, .var, td.num, th.num, .tabela-buscas td:first-child { font-variant-numeric: tabular-nums; }

/* ============================================================
   TELAS MAIORES
   ============================================================ */
@media (min-width: 560px) {
  .cal-filtros { width: auto; margin-left: auto; }
  .cal-filtros label { flex: none; display: flex; align-items: center; gap: 7px; }
  .cal-filtros select { width: auto; margin-top: 0; font-size: 14px; }
  .lista .numeros { width: auto; }
  dialog.modal {
    margin: auto;
    width: calc(100% - 28px);
    max-width: 540px;
    max-height: calc(100vh - 40px);
    border-radius: var(--raio);
  }
  dialog.modal[open] { animation-name: cresce; }
  dialog.modal-largo { max-width: 840px; }
  .modal-caixa { padding: 28px; }
}
@keyframes cresce {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: none; }
}

/* Computador: vira painel, com a barra lateral em vidro fosco à esquerda */
@media (min-width: 861px) {
  :root {
    --calha: 40px;
    --dentro: 26px;
    --respiro: 32px;
  }
  .topo-celular, .barra-app, .fundo-gaveta, .fundo-gaveta.aberto { display: none; }

  .menu {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: var(--menu);
    max-height: none;
    padding: 30px 18px 20px;
    border-radius: 0;
    background: var(--vidro-barra);
    -webkit-backdrop-filter: var(--vidro-fosco);
    backdrop-filter: var(--vidro-fosco);
    border-right: 1px solid var(--borda);
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .menu nav { gap: 3px; margin: 30px 0 8px; }
  .menu nav button { min-height: 44px; }
  .menu nav .na-barra { display: flex; }
  .menu .rotulo-menu { display: block; margin-top: 26px; }
  .menu .rotulo-menu:not([hidden]) ~ nav { margin-top: 0; }
  .menu .seletor-perfil { display: grid; margin-bottom: 18px; }
  .seletor-perfil button { min-height: 40px; }
  .menu-rodape { gap: 2px; padding-top: 12px; }
  .menu-rodape > button { min-height: 40px; padding: 6px 12px; gap: 10px; font-size: 14px; }
  .menu-rodape > button > span:not(.estado) { white-space: nowrap; }
  .menu-rodape .estado { padding: 2px 8px; font-size: 11px; }
  .conta { margin-top: 6px; padding-top: 14px; }

  .principal {
    margin-left: var(--menu);
    padding: 40px var(--calha) 72px;
  }
  h1 { font-size: 34px; }
  h2 { font-size: 20px; }
  .grade-cartoes { gap: 18px; }
  .stat { padding: 22px; }
  .stat .valor { font-size: 32px; }

  .hero { gap: 24px; margin-bottom: 18px; padding: 32px 34px; }
  .hero h1 { font-size: 32px; }
  .hero-numero { font-size: 62px; }
  .hero::before { width: 300px; height: 300px; right: 24%; top: -150px; }
  .hero::after { width: 240px; height: 240px; right: -50px; bottom: -120px; }
  .hero-cartoes { gap: 14px; }
  .vidro { gap: 6px; padding: 20px 18px; border-radius: var(--raio-p); }
  .vidro .rotulo { font-size: 13px; }
  .vidro .valor { font-size: 32px; }
  .vidro .var {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--pilula);
    background: var(--cartao);
    font-size: 12px;
  }
  .vidro .var.sobe { box-shadow: inset 0 0 0 1px var(--positivo); }
  .vidro .var.desce { box-shadow: inset 0 0 0 1px var(--laranja); }
  .vidro .nota { display: block; font-size: 12px; font-weight: 400; }

  .circulos { justify-content: space-between; gap: 10px; margin: 0 0 var(--respiro); padding: 4px 8px 8px; }
  .circulo { flex: 0 0 96px; font-size: 13px; }
  .circulo .aro { width: 76px; height: 76px; }
  .circulo .dentro .icone { width: 30px; height: 30px; }

  .alerta { padding: 22px; }
  .alerta ul { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

  .faixa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .etapa { width: auto; }

  .cal-semana, .cal-grade { gap: 6px; }
  .cal-semana div { padding: 0 6px 4px; text-align: left; }
  .cal-dia { min-height: 112px; padding: 5px; border-radius: var(--raio-campo); }
  .cal-item {
    justify-content: flex-start;
    padding: 4px 7px;
    border-bottom: none;
    box-shadow: inset 3px 0 0 var(--cor, var(--sem-cor));
  }
  .cal-item .txt { display: block; }

  .quadro { grid-auto-columns: minmax(232px, 1fr); margin: 0; padding: 0 0 14px; scroll-padding-left: 0; }

  #toasts { bottom: 24px; }
}

@media (min-width: 1081px) {
  .grade-cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grade-2 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  /* Como na imagem do computador: gráfico e próximos posts lado a lado, roteiros embaixo. */
  .grade-visao {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas: "grafico proximos" "roteiros roteiros";
  }
  .area-grafico { grid-area: grafico; }
  .area-proximos { grid-area: proximos; }
  .area-roteiros { grid-area: roteiros; }
  /* Hero em duas partes: texto e número grande à esquerda, os três cartões à direita. */
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 32px; padding: 36px 38px; }
  .vidro { min-height: 168px; }
}

/* O fio do conteúdo nas telas maiores */
@media (min-width: 560px) {
  .numeros-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .redes-escolha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A ficha vira painel lateral, encostada na direita, da altura da tela */
@media (min-width: 700px) {
  dialog.modal.modal-lado {
    margin: 0 0 0 auto;
    width: min(640px, 100%);
    max-width: 640px;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: var(--raio) 0 0 var(--raio);
  }
  dialog.modal.modal-lado[open] { animation-name: desliza; }
  dialog.modal-lado .modal-caixa { padding: 0 28px 28px; }
  dialog.modal-lado .modal-cabeca { margin: 0 -28px 18px; padding: 22px 28px 14px; }
}
@keyframes desliza {
  from { opacity: 0; transform: translateX(36px); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 861px) {
  .dizendo-grade { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* Quem pediu menos movimento no aparelho não vê animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}