/* Painel admin da Renda Play. Cores e fontes vêm de marca/v2/tokens.css. */

@font-face {
  font-family: "Lexend";
  src: url("../fontes/Lexend-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Arquivo estático Bold: atende qualquer peso pedido, então o número grande nunca sai fino. */
@font-face {
  font-family: "Lexend Titulo";
  src: url("../fontes/Lexend-Bold.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --verde: #17F864;
  --verde-luz: #61FC78;
  --verde-sombra: #01AC50;
  --ouro: #FFC81E;
  --prata: #E9ECE4;
  --noite: #031610;
  --noite-2: #0A2219;
  --noite-3: #16382A;
  --presente: #FF3D7F;
  --branco: #F4F8F3;

  --fundo: var(--noite);
  --painel: #071C14;
  --painel-alto: var(--noite-2);
  --linha: rgba(233, 236, 228, 0.09);
  --linha-forte: var(--noite-3);
  --texto: var(--branco);
  --texto-2: rgba(233, 236, 228, 0.74);
  --texto-3: rgba(233, 236, 228, 0.56);
  --perigo: #FF8A7A;

  --fonte: "Lexend", "Segoe UI", system-ui, sans-serif;
  --fonte-marca: "Lexend Titulo", "Segoe UI", system-ui, sans-serif;
  --raio: 10px;
  --raio-pequeno: 6px;
  --espessura: 4px;
  --lateral: 216px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 14px/1.45 var(--fonte);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

a { color: inherit; }

button, input, select { font: inherit; color: inherit; }

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

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }

/* ---------- botões ---------- */

.botao-principal {
  border: 0;
  border-radius: 999px;
  background: var(--verde);
  color: var(--noite);
  font-weight: 750;
  padding: 0.6em 1.4em;
  box-shadow: 0 var(--espessura) 0 var(--verde-sombra);
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
}

.botao-principal:active { transform: translateY(var(--espessura)); box-shadow: 0 0 0 var(--verde-sombra); }
.botao-principal:disabled { opacity: 0.6; cursor: progress; }

.botao-borda {
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: transparent;
  padding: 0.5em 1.1em;
  font-weight: 600;
  cursor: pointer;
}

.botao-borda:hover { border-color: var(--texto-3); }
.botao-borda.perigo { color: var(--perigo); border-color: rgba(255, 138, 122, 0.4); }

.botao-texto {
  border: 0;
  background: none;
  padding: 0;
  color: var(--texto-2);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linha-forte);
}

.botao-texto:hover { color: var(--texto); }

/* ---------- entrada ---------- */

.entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.entrada-caixa {
  width: min(360px, 100%);
  display: grid;
  gap: 16px;
}

.entrada-logo { width: 196px; height: auto; margin-bottom: 20px; }

.entrada h1 { font-size: 22px; margin-bottom: 4px; }

.entrada label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  color: var(--texto-2);
  font-size: 13px;
}

.entrada input {
  height: 44px;
  padding: 0 14px;
  border-radius: var(--raio);
  border: 1px solid var(--linha-forte);
  background: var(--painel);
  font-size: 15px;
  color: var(--texto);
}

.entrada input[name="codigo"] { letter-spacing: 0.3em; font-weight: 650; }
.entrada input[name="codigo"]::placeholder { letter-spacing: 0; font-weight: 400; }
.entrada input:focus-visible { outline: 0; border-color: var(--verde); }

.entrada-erro { margin: 0; min-height: 20px; color: var(--perigo); font-weight: 600; }

.entrada .botao-principal { height: 46px; font-size: 16px; margin-bottom: var(--espessura); }

/* ---------- moldura ---------- */

.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }

/* A coluna da lateral pinta a altura toda, mesmo com página mais alta que a tela. */
.app {
  background: linear-gradient(90deg, var(--painel) calc(var(--lateral) - 1px), var(--linha) 0 var(--lateral), transparent 0);
}

.lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 22px 14px 18px;
  border-right: 1px solid var(--linha);
  background: var(--painel);
}

.lateral-logo { padding: 0 10px; }
.lateral-logo img { display: block; width: 138px; height: auto; }

.menu { display: grid; gap: 2px; }

.menu a {
  padding: 8px 10px;
  border-radius: var(--raio-pequeno);
  text-decoration: none;
  color: var(--texto-2);
  font-weight: 550;
}

.menu a:hover { color: var(--texto); background: rgba(233, 236, 228, 0.04); }

.menu a[aria-current="page"] {
  color: var(--texto);
  background: var(--painel-alto);
  box-shadow: inset 3px 0 0 var(--verde);
}

.lateral-pe {
  margin-top: auto;
  display: grid;
  gap: 8px;
  padding: 0 10px;
  font-size: 12.5px;
  color: var(--texto-3);
  justify-items: start;
}

.conteudo { padding: 28px 36px 64px; max-width: 1280px; width: 100%; outline: 0; }

/* ---------- cabeçalho da página ---------- */

.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 22px;
}

.topo h1 { font-family: var(--fonte-marca); font-weight: 400; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }

.topo p { margin: 4px 0 0; color: var(--texto-3); }

.periodo {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--painel);
}

.periodo button {
  border: 0;
  background: none;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--texto-2);
  font-weight: 600;
  cursor: pointer;
}

.periodo button[aria-pressed="true"] { background: var(--painel-alto); color: var(--texto); }

.faixa-demo {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  padding: 9px 14px;
  border-radius: var(--raio);
  border: 1px dashed rgba(23, 248, 100, 0.45);
  color: var(--verde-luz);
  font-weight: 600;
}

/* ---------- números ---------- */

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
  margin-bottom: 20px;
  overflow: hidden;
}

.numero {
  padding: 16px 18px 15px;
  border-right: 1px solid var(--linha);
  margin-right: -1px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: -1px;
  min-width: 0;
}

.numero dt { color: var(--texto-2); font-size: 13px; font-weight: 550; }

.numero dd {
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

.numero small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--texto-3); font-weight: 500; white-space: normal; }

.numero.dinheiro dd { color: var(--ouro); }

.numero.principal dd { font-family: var(--fonte-marca); font-weight: 400; font-size: 26px; letter-spacing: -0.02em; }

/* ---------- blocos ---------- */

.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.grade.larga { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

.bloco {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
  margin-bottom: 20px;
  min-width: 0;
}

.grade > .bloco { margin-bottom: 0; }

.bloco-topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  padding: 14px 18px 0;
}

.bloco-topo h2 { font-size: 15px; }
.bloco-topo p { margin: 0; color: var(--texto-3); font-size: 12.5px; }

.bloco-corpo { padding: 12px 18px 16px; }
.bloco-corpo.sem-margem { padding: 8px 0 4px; }

.nota { color: var(--texto-3); font-size: 12.5px; margin: 0; }

/* ---------- gráficos ---------- */

.grafico { position: relative; width: 100%; }
.grafico svg { display: block; width: 100%; overflow: visible; }
.grafico .eixo { fill: var(--texto-3); font-size: 11px; }
.grafico .grade-linha { stroke: var(--linha); stroke-width: 1; }
.grafico .base { stroke: var(--linha-forte); stroke-width: 1; }
.grafico .barra { fill: var(--prata); opacity: 0.82; }
.grafico .barra.ouro { fill: var(--ouro); opacity: 1; }
.grafico .barra.verde { fill: var(--verde); opacity: 1; }
.grafico .alvo { fill: transparent; cursor: default; }
.grafico .alvo:hover + .realce, .grafico .realce.ativo { opacity: 1; }
.grafico .realce { fill: rgba(233, 236, 228, 0.06); opacity: 0; pointer-events: none; }

.dica {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  padding: 7px 10px;
  border-radius: var(--raio-pequeno);
  background: #082019;
  border: 1px solid var(--linha-forte);
  font-size: 12.5px;
  line-height: 1.35;
  max-width: 240px;
}

.dica strong { display: block; font-weight: 650; }
.dica span { color: var(--texto-2); }

/* Funil: barra por etapa, largura = proporção do topo. */
.funil { display: grid; gap: 14px; }
.funil-etapa { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 150px; gap: 16px; align-items: center; }
.funil-nome { font-weight: 600; }
.funil-nome small { display: block; color: var(--texto-3); font-weight: 500; font-size: 12.5px; }
.funil-trilho { height: 28px; }
.funil-trilho svg { display: block; width: 100%; height: 28px; }
.funil-trilho .cheio { fill: var(--prata); opacity: 0.82; }
.funil-trilho .cheio.queda { fill: var(--perigo); opacity: 1; }
.funil-trilho .vazio { fill: rgba(233, 236, 228, 0.05); }
.funil-numero { text-align: right; }
.funil-numero strong { font-size: 18px; }
.funil-numero span { display: block; color: var(--texto-3); font-size: 12.5px; }
.funil-numero .queda { color: var(--perigo); font-weight: 650; }

/* ---------- tabelas ---------- */

.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; }

th, td { padding: 9px 18px; text-align: left; white-space: nowrap; }
th { color: var(--texto-3); font-weight: 550; font-size: 12.5px; border-bottom: 1px solid var(--linha); }
td { border-bottom: 1px solid var(--linha); }
tbody tr:last-child td { border-bottom: 0; }
th.num, td.num { text-align: right; }
td.ouro { color: var(--ouro); font-weight: 650; }
td.apagado, .apagado { color: var(--texto-3); }
td.quebra { white-space: normal; }

tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover td { background: rgba(233, 236, 228, 0.035); }
tbody tr.clicavel a { text-decoration: none; font-weight: 600; }
tbody tr.clicavel:hover a { text-decoration: underline; text-underline-offset: 3px; }

.barrinha { display: inline-block; width: 72px; height: 6px; vertical-align: middle; margin-left: 10px; }
.barrinha svg { display: block; width: 100%; height: 6px; }
.barrinha .fundo-barra { fill: rgba(233, 236, 228, 0.07); }
.barrinha .cheio { fill: var(--verde); }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  border: 1px solid var(--linha-forte);
  color: var(--texto-2);
}

.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo.ativo { color: var(--verde); border-color: rgba(23, 248, 100, 0.35); }
.selo.bloqueado { color: var(--perigo); border-color: rgba(255, 138, 122, 0.4); }
.selo.inativo { color: var(--texto-3); }

/* ---------- ao vivo ---------- */

.ao-vivo-marca { display: inline-flex; align-items: center; gap: 8px; color: var(--presente); font-weight: 700; }
.ao-vivo-marca::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--presente);
  box-shadow: 0 0 0 0 rgba(255, 61, 127, 0.6);
  animation: pulso 1.8s ease-out infinite;
}

@keyframes pulso {
  to { box-shadow: 0 0 0 7px rgba(255, 61, 127, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ao-vivo-marca::before { animation: none; }
  .botao-principal { transition: none; }
}

.ao-vivo-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); border-top: 1px solid var(--linha); }
.ao-vivo-item { padding: 12px 18px; display: grid; gap: 2px; min-width: 0; box-shadow: 1px 0 0 var(--linha); }
.ao-vivo-item a { font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-vivo-item a:hover { text-decoration: underline; }
.ao-vivo-item span { color: var(--texto-3); font-size: 12.5px; }
.ao-vivo-item strong { color: var(--ouro); }

/* ---------- vazio, carregando, erro ---------- */

.vazio { padding: 28px 18px 30px; display: grid; gap: 6px; justify-items: start; max-width: 520px; }
.bloco-corpo .vazio { padding: 6px 0 8px; }
.bloco-corpo.sem-margem .vazio { padding: 6px 18px 12px; }
.vazio h3 { font-size: 15px; }
.vazio p { margin: 0; color: var(--texto-2); }

.carregando { color: var(--texto-3); padding: 40px 0; }

.aviso-erro {
  padding: 12px 16px;
  border-radius: var(--raio);
  border: 1px solid rgba(255, 138, 122, 0.4);
  color: var(--perigo);
  margin-bottom: 20px;
}

/* ---------- clientes ---------- */

.busca {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.busca input {
  width: min(360px, 100%);
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  background: var(--painel);
}

.busca input:focus-visible { outline: 0; border-color: var(--verde); }

.paginas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--linha); color: var(--texto-3); }
.paginas div { display: flex; gap: 8px; }
.paginas button:disabled { opacity: 0.4; cursor: default; }

.mais-linhas { padding: 12px 18px; border-top: 1px solid var(--linha); }
tr.oculta { display: none; }

.voltar { display: inline-block; margin-bottom: 14px; color: var(--texto-2); text-decoration: none; font-weight: 600; }
.voltar:hover { color: var(--texto); }

.ficha-topo h1 { font-family: var(--fonte); font-weight: 700; font-size: 22px; word-break: break-all; }
.ficha-topo .selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; }

.etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.etapas li { display: flex; justify-content: space-between; gap: 12px; color: var(--texto-3); }
.etapas li.feita { color: var(--texto); }
.etapas b { font-weight: 600; }
.etapas span { color: var(--texto-3); font-size: 12.5px; }

.mensagem {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 30;
  padding: 10px 16px;
  border-radius: var(--raio);
  background: var(--painel-alto);
  border: 1px solid var(--linha-forte);
  font-weight: 600;
}

/* ---------- acessos cortesia ---------- */
/* Ouro marca a cortesia (presente) em todo o painel; o verde segue nas ações. */

.selo.cortesia { color: var(--ouro); border-color: rgba(255, 200, 30, 0.38); }
.numero.cortesia dd { color: var(--ouro); }
.vence-logo { color: var(--ouro); font-weight: 650; }
.erro-linha { color: var(--perigo); font-weight: 600; }
.botao-texto.perigo { color: var(--perigo); }

.faixa-cortesia {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin: -6px 0 20px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 200, 30, 0.3);
  border-radius: var(--raio);
  color: var(--texto-2);
  text-decoration: none;
}

.faixa-cortesia strong { color: var(--ouro); font-weight: 650; }
.faixa-cortesia-link { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linha-forte); }
.faixa-cortesia:hover .faixa-cortesia-link { color: var(--texto); }

.abas { display: flex; gap: 22px; padding: 0 18px; border-bottom: 1px solid var(--linha); }

.abas button {
  border: 0;
  background: none;
  padding: 14px 0 11px;
  color: var(--texto-2);
  font-weight: 650;
  cursor: pointer;
}

.abas button:hover { color: var(--texto); }
.abas button[aria-selected="true"] { color: var(--texto); box-shadow: inset 0 -2px 0 var(--verde); }

.form-cortesia, .lote-lado { display: grid; gap: 16px; align-content: start; }

.campo {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 600;
}

.campo legend { padding: 0; margin-bottom: 7px; }

.campo input, .campo textarea {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--raio);
  border: 1px solid var(--linha-forte);
  background: var(--fundo);
  color: var(--texto);
  font-size: 14.5px;
  font-weight: 400;
}

.campo textarea { font-family: var(--fonte); height: auto; min-height: 212px; padding: 11px 14px; line-height: 1.6; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 0; border-color: var(--verde); }
.campo ::placeholder { color: var(--texto-3); }

.escolhas { display: flex; flex-wrap: wrap; gap: 8px; }
.escolhas label { position: relative; }
.escolhas input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.escolhas span {
  display: inline-block;
  padding: 0.45em 1.05em;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  color: var(--texto-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.escolhas label:hover span { color: var(--texto); border-color: var(--texto-3); }
.escolhas input:checked + span { color: var(--texto); background: var(--painel-alto); border-color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde); }
.escolhas input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 2px; }

.form-erro { margin: 0; color: var(--perigo); font-weight: 600; }
.form-erro:empty { display: none; }
.form-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: var(--espessura); }

/* O passe: código em cima, picote, mensagem embaixo. */
.passe { border-color: rgba(255, 200, 30, 0.34); overflow: hidden; }
.passe-cabeca { display: grid; gap: 16px; padding: 18px 20px 20px; background: var(--painel-alto); }
.passe-codigo { display: grid; gap: 2px; }
.passe-codigo span { color: var(--texto-3); font-size: 12.5px; font-weight: 550; }

.passe-codigo strong {
  font-family: var(--fonte-marca);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: 0.14em;
  color: var(--ouro);
  white-space: nowrap;
}

.passe-dados { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0; }
.passe-dados div:first-child { grid-column: 1 / -1; }
.passe-dados dt { color: var(--texto-3); font-size: 12px; }
.passe-dados dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

.passe-corpo { position: relative; display: grid; gap: 14px; padding: 20px; border-top: 2px dashed rgba(255, 200, 30, 0.34); }

.passe-corpo::before, .passe-corpo::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fundo);
  border: 1px solid rgba(255, 200, 30, 0.34);
}

.passe-corpo::before { left: -10px; }
.passe-corpo::after { right: -10px; }

.passe-mensagem {
  margin: 0;
  padding: 13px 15px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.6;
}

.passe-aviso { margin: 0; padding-left: 11px; border-left: 3px solid var(--ouro); color: var(--texto-2); }
.passe-corpo .acoes { padding-bottom: var(--espessura); }
.passe-corpo .acoes a { text-decoration: none; }
.passe-link { margin: 0; display: grid; gap: 2px; font-size: 12px; color: var(--texto-3); }
.passe-link a { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.lote-campos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; }
.lote-lado button { justify-self: start; }
.lote-lado .nota b { color: var(--texto-2); font-weight: 650; }
.lote-previa { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); }
.lote-resumo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-bottom: var(--espessura); }
.lote-resumo p { margin: 0; max-width: 62ch; }
.lote-tabela { margin: 14px -18px -16px; border-top: 1px solid var(--linha); }

.codigo-tabela { letter-spacing: 0.08em; font-weight: 600; color: var(--texto-2); }
strong.codigo-tabela { color: var(--ouro); font-weight: 700; }

.lista-controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 18px 6px; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }

.filtros button {
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: none;
  padding: 4px 11px;
  color: var(--texto-2);
  font-weight: 600;
  cursor: pointer;
}

.filtros button span { color: var(--texto-3); margin-left: 3px; }
.filtros button:hover { border-color: var(--linha-forte); }
.filtros button[aria-pressed="true"] { background: var(--painel-alto); border-color: var(--linha-forte); color: var(--texto); }

.busca-cortesia { width: min(280px, 100%); height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--fundo); }
.busca-cortesia:focus-visible { outline: 0; border-color: var(--verde); }

td.motivo { white-space: normal; min-width: 150px; max-width: 220px; color: var(--texto-2); }
td .sub { display: block; color: var(--texto-3); font-size: 12.5px; }
.so-celular { display: none; }
.acoes-mini { display: inline-flex; gap: 14px; }

.confirmar .campo { margin-top: 4px; }
.confirmar .prorrogar-previa { margin: 16px 0 20px; color: var(--ouro); font-weight: 650; }

/* ---------- confirmação ---------- */

.confirmar {
  border: 1px solid var(--linha-forte);
  border-radius: 14px;
  background: var(--painel);
  color: var(--texto);
  padding: 22px;
  width: min(420px, calc(100vw - 32px));
}

.confirmar::backdrop { background: rgba(1, 8, 6, 0.75); }
.confirmar h2 { font-size: 18px; }
.confirmar p { color: var(--texto-2); margin: 8px 0 20px; }
.confirmar-botoes { display: flex; justify-content: flex-end; gap: 10px; padding-bottom: var(--espessura); }

/* ---------- celular ---------- */

@media (max-width: 1080px) {
  .grade, .grade.larga { grid-template-columns: minmax(0, 1fr); }
  .conteudo { padding: 24px 24px 56px; }
}

@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }

  .lateral {
    position: sticky;
    z-index: 10;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 16px 0;
    border-right: 0;
    border-bottom: 1px solid var(--linha);
  }

  .lateral-logo { padding: 0; }
  .lateral-logo img { width: 118px; }

  .lateral-pe { order: 2; margin: 0 0 0 auto; padding: 0; grid-auto-flow: column; align-items: center; gap: 12px; }

  .menu {
    order: 3;
    width: calc(100% + 32px);
    margin: 0 -16px;
    padding: 0 12px;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .menu::-webkit-scrollbar { display: none; }

  .menu a { flex: none; border-radius: 0; padding: 10px 10px 11px; }
  .menu a[aria-current="page"] { background: none; box-shadow: inset 0 -2px 0 var(--verde); }

  .conteudo { padding: 20px 16px 48px; }
  .topo h1 { font-size: 24px; }

  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numero { padding: 13px 14px; }
  .numero dd { font-size: 20px; }
  .numero.principal dd { font-size: 26px; }

  .bloco-topo { padding: 12px 14px 0; }
  .bloco-corpo { padding: 10px 14px 14px; }
  th, td { padding: 9px 14px; }
  .bloco-corpo.sem-margem .vazio { padding: 6px 14px 12px; }

  .funil-etapa { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .funil-trilho { grid-column: 1 / -1; grid-row: 2; }

  .esconde-celular, .barrinha { display: none; }

  .abas { padding: 0 14px; }
  .lote-campos { grid-template-columns: minmax(0, 1fr); }
  .lote-tabela { margin: 14px -14px -14px; }
  .passe-cabeca, .passe-corpo { padding-left: 16px; padding-right: 16px; }
  .passe-codigo strong { font-size: 34px; }
  #cortesia-lista td:first-child { white-space: normal; }
  #cortesia-lista td:first-child a { overflow-wrap: anywhere; }
  .acoes-mini { flex-wrap: wrap; gap: 4px 14px; }
  #cortesia-lista td:nth-child(2) { width: 1%; padding-left: 0; }
  td .so-celular { display: inline; }
  td div.so-celular { display: block; margin-top: 6px; }
  .lista-controles { padding: 12px 14px 6px; }
  .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; width: calc(100% + 28px); }
  .filtros::-webkit-scrollbar { display: none; }
  .filtros button { flex: none; }
  .busca-cortesia { width: 100%; }
}