/* A casca do sistema (src/components/Casca.tsx) sobre o estilo do Métricas.
 *
 * Carregado DEPOIS de public/metricas/estilo.css, que continua sendo a fonte
 * dos tokens (cores, fontes, raios) e do desenho do menu e da barra do topo.
 * Aqui fica só o que muda por o Métricas ter virado uma página entre outras.
 */

/* No Métricas o <body> era a grade (menu | conteúdo). O Next põe outros nós
   no <body> (o anunciador de rota, os scripts), e cada um viraria uma célula
   da grade: a grade passa para um wrapper só nosso. */
body { display: block; }
.casca {
  display: grid;
  grid-template-columns: var(--menu) minmax(0, 1fr);
  min-height: 100vh;
}

/* ------------------------------------------------- tablets e telas menores
   O estilo do Métricas empilha o menu abaixo de 1100px mexendo na grade do
   <body> — que deixou de ser a grade quando ela passou para a .casca. Sobrava
   o pior dos dois: o menu perdia a altura toda e cortava os itens, mas seguia
   ocupando os 248px da coluna.

   Entre 721 e 1100px (tablets, notebooks pequenos com zoom) o menu vira a
   coluna de ícones do "recolher", com a altura toda; abaixo disso, empilha em
   cima do conteúdo, como o Métricas fazia. O botão de recolher sai nessa
   faixa: não teria o que alternar. */
@media (min-width: 721px) and (max-width: 1100px) {
  .casca { grid-template-columns: 68px minmax(0, 1fr); }
  .casca #lateral {
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    border-right: 1px solid var(--borda); border-bottom: none;
  }
  .casca #menu { max-height: none; }
  .casca #lateral .marca { display: none; }
  .casca #lateral .busca-gatilho { justify-content: center; padding: 0; margin: 14px 12px 16px; width: auto; }
  .casca #lateral .busca-gatilho .rot,
  .casca #lateral .busca-gatilho kbd,
  .casca #lateral #menu a .rot { display: none; }
  .casca #lateral #menu a { justify-content: center; padding: 0; margin: 0 12px 3px; }
  .casca #lateral #menu h4 {
    height: 1px; margin: 18px 14px 12px; padding: 0; background: var(--borda);
    text-indent: -9999px; overflow: hidden;
  }
}

@media (max-width: 720px) {
  .casca { grid-template-columns: minmax(0, 1fr); }
}

/* Barra do topo estreita: os botões de ação ficam só com o ícone colorido (o
   title diz o que fazem; o texto continua no botão para o leitor de tela). Em
   tablet em pé, "Copiar" e a conta saíam da tela. Vale também na gaveta da
   página Leads, que é estreita assim em tablet. */
@media (max-width: 1100px) {
  #topo .bt.cor { font-size: 0; gap: 0; padding: 0 9px; }
  #topo .trilha { flex-wrap: nowrap; min-width: 0; }
  #topo .dir { flex: none; }
}

/* O ícone do item vem como HTML (menu.ts); o span que o embrulha não pode
   virar uma caixa entre o <a> flex e o <svg>. */
#menu a .ico { display: contents; }

/* ---------------------------------------------------------- menu de conta */

.casca-conta { position: relative; }

.casca-conta-caixa {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  width: 260px;
  background: var(--card);
  border: 1px solid var(--borda-forte);
  border-radius: 12px;
  box-shadow: var(--sombra);
}

.casca-conta-caixa .conta-cab { padding: 13px 16px 12px; border-bottom: 1px solid var(--borda); }
.casca-conta-caixa .conta-cab b { display: block; font-size: 0.8125rem; font-weight: 700; }
.casca-conta-caixa .conta-cab span {
  display: block; margin-top: 2px; font-size: 0.6875rem; color: var(--tinta-3);
  overflow-wrap: anywhere;
}

.casca-sair { margin: 0; padding: 6px; }
.casca-sair button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 0.9375rem; color: var(--tinta-2); cursor: pointer;
}
.casca-sair button:hover { background: var(--linha-hover); color: var(--tinta); }

/* ------------------------------------- envios de lead em segundo plano */
/* components/EnviosEmSegundoPlano.tsx. Acima da gaveta de cadastro (45) e
   abaixo do modal de envio (60): com o modal aberto, ele já mostra o envio. */

.envios-sp {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--borda-forte);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 10px 12px;
  font-size: 0.8125rem;
}
/* Na tela com o botão flutuante "Enviar lead" (lead-modal.css, mesmo canto),
   o painel e a pílula sobem para não cobri-lo. */
body:has(.btn-enviar-lead) .envios-sp,
body:has(.btn-enviar-lead) .envios-sp-pilula { bottom: 88px; }

.envios-sp-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.envios-sp-cab .envio-x { border: 0; background: none; color: var(--tinta-3); cursor: pointer; font: inherit; padding: 0 6px; border-radius: 6px; }
.envios-sp-cab .envio-x:hover { background: var(--linha-hover); color: var(--tinta); }

.envios-sp-pilula {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  box-shadow: var(--sombra);
  color: var(--tinta-2);
  font: inherit; font-size: 0.8125rem;
  cursor: pointer;
}
.envios-sp-pilula:hover { color: var(--tinta); }

.envios-sp-tit {
  margin: 0; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3);
}
.envios-sp-erro { margin: 0 0 6px; color: var(--critico); }
.envios-sp ul { list-style: none; margin: 0; padding: 0; }
.envios-sp .envio { padding: 8px 0; border-top: 1px solid var(--borda); }
.envios-sp .envio:first-child { border-top: 0; }
.envios-sp .envio-cab { display: flex; align-items: center; gap: 8px; }
.envios-sp .envio-cab b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); }
.envios-sp .envio-x {
  border: 0; background: none; color: var(--tinta-3); cursor: pointer;
  font: inherit; padding: 2px 4px; border-radius: 6px;
}
.envios-sp .envio-x:hover { background: var(--linha-hover); color: var(--tinta); }
.envios-sp .envio-txt { margin: 4px 0 0 26px; color: var(--tinta-2); }
.envios-sp .envio--erro .envio-txt { color: var(--critico); }
.envios-sp .envio--aviso .envio-txt,
.envios-sp .envio--pergunta .envio-txt { color: var(--atencao); }
.envios-sp .envio-pergunta { margin: 6px 0 0 26px; color: var(--tinta-2); }
.envios-sp .envio-pergunta p { margin: 0 0 6px; white-space: pre-line; }
.envios-sp .envio-acoes { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 0 26px; }
.envios-sp .envio-acoes:empty { display: none; }
.envios-sp .envio-link {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--acento); text-decoration: underline;
}
.envios-sp .envio-etapas { list-style: none; margin: 6px 0 0 26px; padding: 0; display: grid; gap: 4px; }
.envios-sp .envio-etapa { display: flex; gap: 6px; color: var(--tinta-2); }
.envios-sp .envio-etapa small { display: block; color: var(--tinta-3); }
.envios-sp .envio-etapa--erro small { color: var(--critico); }
.envios-sp .envio-etapa--aviso small { color: var(--atencao); }