/* GoldSniper — identidade do painel */
:root {
  --fundo: #070A0F;
  --superficie: #0C131B;
  --superficie-2: #0A1017;
  --borda: #1A2533;
  --borda-forte: #22303F;
  --texto: #E6EDF5;
  --texto-2: #8C9BAE;
  --texto-3: #5D6B7D;
  --ouro: #E9B949;
  --ouro-escuro: #C9972F;
  --azul: #4FA8E0;
  --verde: #35C66B;
  --verde-claro: #45D27B;
  --vermelho: #E5484D;
  --vermelho-claro: #E5707A;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ouro); }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

.mono { font-family: var(--mono); }
.verde { color: var(--verde); }
.vermelho { color: var(--vermelho); }
.oculto { display: none !important; }

/* ---------------------------------------------------------------- marca */

.marca {
  border: 1px solid var(--ouro-escuro);
  border-radius: 12px;
  padding: 14px 24px 11px;
  background: #0C1117;
  text-align: center;
  display: inline-block;
}
.marca-nome {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--ouro);
  line-height: 1;
}
.marca-sub {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #1F2A38;
  font-size: 10px;
  letter-spacing: 3.5px;
  color: var(--azul);
  font-weight: 600;
}
.marca-mini .marca-nome { font-size: 18px; letter-spacing: 2px; }
.marca-mini .marca-sub { font-size: 8px; letter-spacing: 2.2px; margin-top: 6px; padding-top: 6px; }
.marca-mini { padding: 10px 14px 8px; border-radius: 9px; }

/* ---------------------------------------------------------------- login */

.tela-entrada {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background-image: linear-gradient(rgba(40, 62, 88, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 62, 88, 0.1) 1px, transparent 1px);
  background-size: 72px 72px;
}
.cartao-entrada { width: 100%; max-width: 440px; text-align: center; }
.caixa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 20px;
  padding: 34px 32px;
  text-align: left;
}
.caixa h1 { margin: 0 0 6px; font-size: 24px; font-weight: 600; text-align: center; }
.caixa p.sub { margin: 0 0 24px; color: var(--texto-2); font-size: 14px; text-align: center; }

.abas {
  display: flex;
  gap: 6px;
  background: var(--superficie-2);
  border: 1px solid #192330;
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 22px;
}
.abas button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--texto-2);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 8px;
  border-radius: 9px;
  min-height: 44px;
}
.abas button.ativo { background: #16202C; color: var(--ouro); box-shadow: inset 0 0 0 1px #2A3A4D; }

.campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; }
.campo label { font-size: 11px; letter-spacing: 1.3px; color: #8FA0B4; font-weight: 600; }
.campo input, .campo select {
  background: #080D13;
  border: 1px solid #1E2836;
  border-radius: 11px;
  padding: 14px 15px;
  color: var(--texto);
  font-size: 15px;
  min-height: 44px;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--ouro-escuro); }

.btn-ouro {
  width: 100%;
  border: 0;
  background: var(--ouro);
  color: #0B0F16;
  font-size: 16px;
  font-weight: 600;
  padding: 16px;
  border-radius: 12px;
  min-height: 44px;
  transition: filter 140ms ease;
}
.btn-ouro:hover { filter: brightness(1.08); }
.btn-ouro:disabled { opacity: 0.6; cursor: wait; }

.aviso {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.aviso.erro { background: #1A0E12; border: 1px solid #45242A; color: var(--vermelho-claro); }
.aviso.ok { background: #0C1F16; border: 1px solid #1C4430; color: var(--verde-claro); }

/* ---------------------------------------------------------------- painel */

.topo {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  border-bottom: 1px solid #141E29;
}
.topo-dir { display: flex; align-items: center; gap: 12px; }

.selo {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
}
.selo.online { background: #0C1F16; border: 1px solid #1C4430; color: var(--verde-claro); }
.selo.offline { background: #1A0E12; border: 1px solid #45242A; color: var(--vermelho-claro); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.selo.online .ponto { animation: pisca 1.8s ease-in-out infinite; }
@keyframes pisca { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.btn-simples {
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  color: var(--texto-2);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 600;
  min-height: 44px;
}
.btn-simples:hover { color: var(--texto); }

.conteudo { padding: 24px 26px 60px; max-width: 1500px; margin: 0 auto; }

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 15px;
  margin-bottom: 18px;
}
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 19px;
}
.cartao .rotulo {
  font-size: 10.5px;
  letter-spacing: 1.6px;
  color: #78889B;
  font-weight: 600;
  margin-bottom: 10px;
}
.cartao .valor { font-size: 25px; font-weight: 600; font-family: var(--mono); }

.colunas { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.coluna-principal { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.coluna-lateral { flex: 1 1 330px; min-width: 300px; display: flex; flex-direction: column; gap: 18px; }

.bloco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 20px 22px;
}
.bloco h2 {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 2.2px;
  color: #78889B;
  font-weight: 600;
}
.bloco.destaque { background: #0B1620; border-color: #16303F; }

#grafico { height: 420px; border-radius: 12px; overflow: hidden; background: #080D13; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left;
  padding: 12px 14px;
  color: #78889B;
  font-size: 10.5px;
  letter-spacing: 1.3px;
  font-weight: 600;
}
td { padding: 14px; border-top: 1px solid #141E29; }
td.num, th.num { text-align: right; font-family: var(--mono); }
.rolagem { overflow-x: auto; }
.vazio { padding: 40px 14px; text-align: center; color: var(--texto-3); font-size: 13.5px; }

.etiqueta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: 6px;
}
.etiqueta.compra { color: var(--verde-claro); background: rgba(53, 198, 107, 0.12); }
.etiqueta.venda { color: var(--vermelho-claro); background: rgba(229, 72, 77, 0.12); }

.linha-volume { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.linha-volume button {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2);
  color: #C3CEDC;
  font-size: 19px;
}
.linha-volume input {
  flex: 1;
  text-align: center;
  background: #080D13;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 12px;
  font-size: 19px;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--texto);
  min-height: 44px;
}

.atalhos { display: flex; gap: 7px; margin-bottom: 16px; }
.atalhos button {
  flex: 1;
  border: 1px solid var(--borda);
  background: #080D13;
  color: var(--texto-2);
  border-radius: 9px;
  padding: 11px 4px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--mono);
  min-height: 44px;
}
.atalhos button.ativo { border-color: #3A2F16; background: #1A1509; color: var(--ouro); }

.dupla { display: flex; gap: 10px; margin-bottom: 14px; }
.btn-op {
  flex: 1;
  border-radius: 12px;
  padding: 16px 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.6px;
  transition: filter 140ms ease, transform 140ms ease;
}
.btn-op:hover { filter: brightness(1.2); }
.btn-op:active { transform: scale(0.98); }
.btn-op small { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; font-family: var(--mono); }
.btn-compra { border: 1px solid #1C4430; background: #0C1F16; color: var(--verde-claro); }
.btn-venda { border: 1px solid #45242A; background: #1A0E12; color: var(--vermelho-claro); }

.btn-fechar {
  width: 100%;
  text-align: left;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-height: 44px;
  transition: filter 140ms ease;
}
.btn-fechar:hover { filter: brightness(1.2); }
.btn-fechar b { display: block; font-size: 14px; font-weight: 600; }
.btn-fechar span.desc { display: block; font-size: 12px; margin-top: 3px; opacity: 0.75; }
.btn-fechar .conta { font-size: 13px; font-weight: 600; font-family: var(--mono); white-space: nowrap; }
.btn-lucro { border: 1px solid #1C4430; background: #0C1F16; color: var(--verde-claro); }
.btn-prejuizo { border: 1px solid #45242A; background: #1A0E12; color: var(--vermelho-claro); }
.btn-tudo { border: 1px solid #3A2F16; background: #1A1509; color: var(--ouro); }

.btn-mini {
  border: 1px solid #3A2228;
  background: #190E11;
  color: var(--vermelho-claro);
  font-size: 12px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 8px;
  min-height: 40px;
}

.token-caixa {
  background: #081219;
  border: 1px solid #16303F;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.token-valor {
  flex: 1 1 220px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--ouro);
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

.lista-dados { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; }
.lista-dados div { display: flex; justify-content: space-between; gap: 12px; }
.lista-dados span:first-child { color: var(--texto-2); }
.lista-dados span:last-child { font-family: var(--mono); }

.recado {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  padding: 15px 19px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  max-width: 340px;
  animation: entra 280ms ease-out;
}
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.recado.ok { background: #0C1F16; border: 1px solid #1C4430; color: var(--verde-claro); }
.recado.erro { background: #1A0E12; border: 1px solid #45242A; color: var(--vermelho-claro); }
.recado.neutro { background: #1A1509; border: 1px solid #3A2F16; color: var(--ouro); }

.rodape { margin-top: 26px; font-size: 12px; color: var(--texto-3); line-height: 1.6; }

@media (max-width: 640px) {
  .conteudo { padding: 18px 14px 50px; }
  .topo { padding: 14px; }
  #grafico { height: 320px; }
}

/* ------------------------------------------------------- layout com menu */

.app { display: flex; min-height: 100vh; align-items: stretch; }

.menu-lateral {
  flex: 0 0 236px;
  background: #0A0F16;
  border-right: 1px solid #141E29;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
}
.lista-menu { display: flex; flex-direction: column; gap: 4px; }
.item-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 10px;
  color: var(--texto-2);
  text-decoration: none;
  font-size: 14.5px;
  min-height: 44px;
}
.item-menu:hover { background: #0F1822; color: var(--texto); }
.item-menu.ativo {
  background: #111A24;
  color: var(--ouro);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--ouro);
}
.rodape-menu { margin-top: auto; padding-top: 20px; }

.area { flex: 1 1 auto; min-width: 0; }

.cabecalho-pagina {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid #141E29;
}
.cabecalho-pagina h1 { margin: 0; font-size: 21px; font-weight: 600; }
.cabecalho-pagina p { margin: 5px 0 0; font-size: 13.5px; color: var(--texto-2); }

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.cartao-link {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 22px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.cartao-link:hover { border-color: var(--borda-forte); transform: translateY(-2px); }
.cartao-link .icone {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.cartao-link h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--texto); }
.cartao-link p { margin: 0; font-size: 13.5px; color: var(--texto-2); line-height: 1.5; }
.cartao-link .seta { font-size: 13.5px; font-weight: 500; }

.item-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  background: var(--superficie-2);
  border: 1px solid #16202C;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 10px;
}
.item-lista h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.item-lista p { margin: 0; font-size: 13px; color: var(--texto-2); }

@media (max-width: 820px) {
  .app { flex-wrap: wrap; }
  .menu-lateral { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid #141E29; }
  .lista-menu { flex-direction: row; flex-wrap: wrap; }
  .item-menu { flex: 1 1 140px; }
  .rodape-menu { display: flex; gap: 10px; margin-top: 16px; }
  .rodape-menu > * { flex: 1; margin-top: 0 !important; }
}

/* ------------------------------------------------------------- modal */

.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 7, 11, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: aparece 160ms ease-out;
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%;
  max-width: 430px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: 18px;
  padding: 26px;
  animation: sobe 200ms ease-out;
  /* nenhuma janela pode passar da tela: senão o conteúdo de baixo (o botão de
     sair) fica fora do alcance e não dá para fechar a janela no celular */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* janela com cabeçalho e rodapé presos: só o miolo rola. É o que a tela de
   fechamento precisa, porque a lista "fechar apenas um par" cresce conforme
   os pares abertos e empurrava o botão de sair para fora da tela. */
.modal-rolante {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.topo-modal {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 15px;
  border-bottom: 1px solid #141E29;
}
.topo-modal h2 { margin: 0 0 5px; font-size: 18px; font-weight: 600; }
.topo-modal p { margin: 0; font-size: 13px; color: var(--texto-2); }
.x-modal {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2);
  color: var(--texto-2);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 140ms ease;
}
.x-modal:hover { color: var(--texto); filter: brightness(1.3); }
.x-modal:active { transform: scale(0.94); }
.corpo-modal {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 22px 6px;
}
.rodape-modal {
  flex: 0 0 auto;
  padding: 12px 22px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #141E29;
  background: var(--superficie);
}
.rodape-modal .btn-simples { width: 100%; }
@keyframes sobe { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* --------------------------------------------------------- paginação */

.paginacao {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px 2px;
  border-top: 1px solid #141E29;
  margin-top: 4px;
}
.info-paginas { font-size: 12.5px; color: var(--texto-3); }
.botoes-paginas { display: flex; gap: 6px; align-items: center; }
.botoes-paginas button {
  min-width: 40px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--texto-2);
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--mono);
}
.botoes-paginas button:hover:not(:disabled) { border-color: var(--borda-forte); color: var(--texto); }
.botoes-paginas button.ativo {
  border-color: #3A2F16;
  background: #1A1509;
  color: var(--ouro);
}
.botoes-paginas button:disabled { opacity: 0.35; cursor: not-allowed; }
.reticencias { color: var(--texto-3); padding: 0 2px; }

/* ------------------------------------------------- cabeçalho do robô */

.faixa-robo {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.faixa-robo-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.identidade { display: flex; align-items: center; gap: 15px; min-width: 0; }
.emblema {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 13px;
  background: #16202C;
  border: 1px solid #2A3A4D;
  display: flex; align-items: center; justify-content: center;
}
.titulo-robo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.nome-robo { font-size: 23px; font-weight: 700; letter-spacing: 1.4px; color: var(--ouro); }
.sub-robo { font-size: 10.5px; letter-spacing: 2.8px; color: var(--azul); font-weight: 600; }
.operando { margin-top: 5px; font-size: 13.5px; color: var(--texto-2); }
.operando b { color: var(--ouro); }

.faixa-robo-dados {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid #16202C;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12.5px;
  color: #6E7E92;
}

.cartao .moeda {
  float: right;
  font-size: 10px;
  color: var(--ouro);
  border: 1px solid #3A2F16;
  background: #1A1509;
  border-radius: 5px;
  padding: 2px 7px;
  letter-spacing: 0;
}

/* -------------------------------------------------- faixa de análise */

.faixa-analise { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.anel { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.indicadores { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.indicador {
  background: var(--superficie-2);
  border: 1px solid #192431;
  border-radius: 11px;
  padding: 14px 16px;
}
.indicador .rotulo { font-size: 10.5px; letter-spacing: 1.4px; color: #78889B; font-weight: 600; margin-bottom: 7px; }
.indicador .texto { font-size: 14.5px; font-weight: 600; color: #D6E0EC; }
.indicador .nota { font-size: 12.5px; color: #78889B; margin-top: 3px; }
.indicador .numero { font-size: 20px; font-weight: 600; font-family: var(--mono); }
.linha-indicadores { display: flex; flex-wrap: wrap; gap: 10px; }
.linha-indicadores .indicador { flex: 1 1 110px; }

/* ----------------------------------------------------- abas da tabela */

.abas-tabela {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px 0;
  border-bottom: 1px solid #16202C;
}
.abas-tabela button {
  border: 0;
  background: transparent;
  color: var(--texto-2);
  font-size: 14px;
  font-weight: 600;
  padding: 15px 16px;
  min-height: 44px;
}
.abas-tabela button.ativo { color: var(--ouro); box-shadow: inset 0 -2px 0 var(--ouro); }
.bolha {
  background: #17222E;
  color: #8C9BAE;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11px;
  margin-left: 6px;
  font-family: var(--mono);
}
.abas-tabela button.ativo .bolha { background: #1A1509; color: var(--ouro); }

.paginacao { padding: 14px 20px 2px; }

/* ------------------------------------------------------ gráfico próprio */

.bloco-grafico { padding: 0; overflow: hidden; }

.barra-grafico {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #141E29;
}
.par-grafico { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.nome-par { font-size: 18px; font-weight: 600; }
.tf-atual {
  font-size: 11px; font-weight: 600;
  color: var(--azul);
  border: 1px solid #1C3A50;
  background: #0A1A26;
  border-radius: 6px;
  padding: 4px 9px;
}
.preco-par { font-size: 17px; font-weight: 600; }
.variacao { font-size: 12.5px; }

.timeframes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--superficie-2);
  border: 1px solid #192431;
  border-radius: 10px;
  padding: 4px;
}
.timeframes button {
  border: 0;
  background: transparent;
  color: var(--texto-2);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 13px;
  border-radius: 8px;
  min-height: 40px;
  font-family: var(--mono);
}
.timeframes button:hover { color: var(--texto); }
.timeframes button.ativo { background: #16202C; color: var(--ouro); box-shadow: inset 0 0 0 1px #2A3A4D; }

#grafico { height: 430px; width: 100%; background: #080D13; }

.aviso-grafico {
  padding: 13px 18px;
  font-size: 12.5px;
  color: var(--texto-3);
  border-top: 1px solid #141E29;
}
.aviso-grafico.oculto { display: none; }

@media (max-width: 640px) { #grafico { height: 300px; } }

/* ------------------------------------------- ajustes de tela pequena */

@media (max-width: 640px) {
  /* dois cartões por linha, como no app */
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .cartao { padding: 15px; }
  .cartao .valor { font-size: 20px; }
  .cartao .rotulo { font-size: 9.5px; letter-spacing: 1.2px; }

  .faixa-robo { padding: 16px; }
  .nome-robo { font-size: 19px; }
  .sub-robo { font-size: 9px; letter-spacing: 2px; }

  .barra-grafico { padding: 12px 14px; }
  .timeframes { width: 100%; justify-content: space-between; }
  .timeframes button { flex: 1; padding: 9px 6px; }

  .bloco { padding: 16px; }
  .abas-tabela button { flex: 1; padding: 14px 8px; font-size: 13px; }
  .faixa-analise { justify-content: center; }
  .btn-op { padding: 18px 10px; }
}

/* ------------------------------------------------ fechar por par / pendentes */

.titulo-por-par {
  font-size: 10.5px;
  letter-spacing: 1.6px;
  color: var(--texto-3);
  font-weight: 600;
  margin: 18px 0 10px;
  padding-top: 16px;
  border-top: 1px solid #1A2533;
}
.btn-par { border: 1px solid var(--borda-forte); background: var(--superficie-2); color: var(--texto); }
.btn-par .desc { color: var(--texto-3); }

.etiqueta.pendente-compra { color: var(--azul); background: rgba(79,168,224,0.12); }
.etiqueta.pendente-venda { color: #C58BE0; background: rgba(197,139,224,0.12); }
.linha-pendente { background: rgba(10,20,30,0.45); }

/* histórico: colunas que não quebram em telas pequenas */
table { table-layout: auto; }
td, th { white-space: nowrap; }
td:first-child, th:first-child { white-space: normal; }

@media (max-width: 640px) {
  table { font-size: 12.5px; min-width: 580px; }
  td { padding: 11px 10px; }
  th { padding: 10px; font-size: 9.5px; letter-spacing: 1px; }
  .etiqueta { font-size: 9.5px; padding: 3px 7px; }
  .modal { padding: 20px; }
}

/* ---------------------------------------------- correção de largura */

/* sem isto a área flex não encolhe: uma tabela larga empurra a página
   inteira e tudo passa a rolar de lado */
html, body { max-width: 100%; overflow-x: hidden; }
.area { min-width: 0; }
.conteudo { max-width: 100%; }
.bloco { max-width: 100%; }
.rolagem { max-width: 100%; width: 100%; }
.rolagem table { width: 100%; }

/* histórico no celular: cabe sem esticar o layout */
@media (max-width: 560px) {
  table { min-width: 0; font-size: 12px; }
  td, th { padding: 10px 8px; }
  /* some com as colunas menos essenciais, a informação principal continua */
  .tabela-historico td:nth-child(3), .tabela-historico th:nth-child(3) { display: none; }
  .tabela-operacoes td:nth-child(1), .tabela-operacoes th:nth-child(1) { display: none; }
  .tabela-operacoes td:nth-child(5), .tabela-operacoes th:nth-child(5) { display: none; }
  /* a célula de aviso ocupa a linha inteira e nunca é escondida */
  td.vazio { display: table-cell !important; }
}

/* blocos sempre na largura do conteúdo, cheios ou vazios */
.bloco { width: 100%; box-sizing: border-box; }
.rolagem table { width: 100%; table-layout: auto; }
tbody:empty + tbody, .vazio { width: auto; }

/* ------------------------------------------- períodos do histórico */

.periodos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 18px 4px;
}
.periodos button {
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--texto-2);
  border-radius: 9px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
}
.periodos button.ativo { border-color: #3A2F16; background: #1A1509; color: var(--ouro); }
.periodos.oculto { display: none; }

.nota-cartao {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--texto-3);
  font-family: var(--mono);
}

/* --------------------------------------- botão de fechar a cesta */

.btn-cesta {
  width: 100%;
  border: 1px solid #45242A;
  background: #1A0E12;
  color: var(--vermelho-claro);
  border-radius: 12px;
  padding: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  transition: filter 140ms ease, transform 140ms ease;
}
.btn-cesta:hover { filter: brightness(1.2); }
.btn-cesta:active { transform: scale(0.98); }
.rotulo-cesta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.6px;
}
.btn-cesta .mono { font-size: 12.5px; color: #A1737A; white-space: nowrap; }

/* ------------------------------------------------- menu da conta */

.barra-conta { position: fixed; top: 16px; right: 20px; z-index: 40; }

.botao-conta {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  color: var(--ouro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  transition: border-color 150ms ease;
}
.botao-conta:hover { border-color: var(--ouro-escuro); }

.menu-conta {
  position: absolute;
  top: 54px;
  right: 0;
  width: 260px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  animation: cai 160ms ease-out;
}
@keyframes cai { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.menu-conta.oculto { display: none; }

.cabecalho-conta { padding: 14px 14px 13px; border-bottom: 1px solid #16202C; margin-bottom: 6px; }
.nome-conta { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.email-conta { font-size: 12.5px; color: var(--texto-2); margin-top: 4px; overflow-wrap: anywhere; }

.item-conta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--texto-2);
  text-decoration: none;
  font-size: 14px;
  border-radius: 10px;
  min-height: 44px;
  text-align: left;
}
.item-conta:hover { background: #111A24; color: var(--texto); }
.item-conta.sair { color: var(--vermelho-claro); margin-top: 4px; border-top: 1px solid #16202C; border-radius: 0 0 10px 10px; }
.item-conta.sair:hover { background: #1A0E12; color: var(--vermelho-claro); }

/* o cabeçalho das páginas abre espaço para o botão */
.cabecalho-pagina { padding-right: 78px; }

.campo-senha { position: relative; }
.campo-senha input { width: 100%; padding-right: 48px; }
.olho {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--texto-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.olho:hover { color: var(--texto-2); }
.olho.aberto { color: var(--ouro); }

.dica { margin: 7px 0 0; font-size: 12.5px; color: var(--texto-3); }
.campo input:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 820px) {
  .barra-conta { top: 12px; right: 12px; }
  .cabecalho-pagina { padding-right: 70px; }
}

/* etiqueta do plano dentro do menu da conta */
.etiqueta-plano {
  display: inline-block;
  margin-top: 11px;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--azul);
  background: rgba(79, 168, 224, 0.12);
  border: 1px solid rgba(79, 168, 224, 0.3);
}

/* -------------------------------------------- chave do modo automático */

.chave-modo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 15px 16px;
  min-height: 56px;
  text-align: left;
  transition: border-color 150ms ease;
}
.chave-modo:hover:not(:disabled) { border-color: var(--borda-forte); }
.chave-modo:disabled { opacity: 0.55; cursor: not-allowed; }

.chave-texto b { display: block; font-size: 14.5px; font-weight: 600; color: var(--texto); }
.chave-texto .desc { display: block; font-size: 12.5px; color: var(--texto-2); margin-top: 3px; }

.chave {
  flex-shrink: 0;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: #16202C;
  border: 1px solid var(--borda-forte);
  position: relative;
  transition: background 200ms ease, border-color 200ms ease;
}
.chave .bolinha {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #6E7E92;
  transition: transform 200ms ease, background 200ms ease;
}
.chave.ligada { background: rgba(53, 198, 107, 0.2); border-color: #1C4430; }
.chave.ligada .bolinha { transform: translateX(22px); background: var(--verde); }

/* a chave do modo mora dentro da faixa do robô */
.faixa-robo-rodape {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid #16202C;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.faixa-robo-rodape .faixa-robo-dados {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  flex: 1 1 280px;
  min-width: 0;
}
/* a chave e o gatilho dividem um campo só */
.painel-modo {
  flex: 0 1 330px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 150ms ease;
}
.painel-modo:hover { border-color: var(--borda-forte); }

.faixa-robo-rodape .chave-modo {
  padding: 11px 14px;
  min-height: 48px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.faixa-robo-rodape .chave-modo:hover:not(:disabled) { background: rgba(255, 255, 255, 0.015); }
.faixa-robo-rodape .chave-texto b { font-size: 13.5px; }
.faixa-robo-rodape .chave-texto .desc { font-size: 11.5px; }
.faixa-robo-rodape .chave { width: 46px; height: 27px; }
.faixa-robo-rodape .chave .bolinha { width: 19px; height: 19px; }
.faixa-robo-rodape .chave.ligada .bolinha { transform: translateX(19px); }

/* -------------------------------------- gatilho de confluência mínima */

.campo-gatilho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--borda);
  padding: 11px 14px;
  min-height: 48px;
}
.campo-gatilho .chave-texto b { font-size: 13.5px; }
.campo-gatilho .chave-texto .desc { font-size: 11.5px; }
.campo-gatilho.desligado { opacity: 0.55; }

.passo-gatilho {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  background: #121B25;
  border: 1px solid var(--borda-forte);
  border-radius: 10px;
  padding: 3px;
}
.passo-gatilho button {
  width: 28px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--texto-2);
  font-size: 17px;
  line-height: 1;
  font-weight: 600;
  transition: background 120ms ease, color 120ms ease;
}
.passo-gatilho button:hover:not(:disabled) { background: #1B2733; color: var(--texto); }
.passo-gatilho button:disabled { opacity: 0.4; cursor: not-allowed; }
.passo-gatilho span,
.passo-gatilho input {
  min-width: 56px;
  width: 56px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ouro);
}
/* o lote também pode ser digitado: muda muito mais que a confluência */
.passo-gatilho input {
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 3px 0;
  font-family: var(--mono);
}
.passo-gatilho input:focus { outline: none; background: #1B2733; }

.btn-gatilho {
  flex: 1 1 100%;
  border: 1px solid rgba(233, 185, 73, 0.4);
  border-radius: 9px;
  background: rgba(233, 185, 73, 0.12);
  color: var(--ouro);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 8px 10px;
  transition: background 140ms ease;
}
.btn-gatilho:hover:not(:disabled) { background: rgba(233, 185, 73, 0.2); }
.btn-gatilho:disabled { opacity: 0.6; cursor: progress; }

@media (max-width: 640px) {
  .faixa-robo-rodape .painel-modo { flex: 1 1 100%; }
  /* no celular o passo ocupa a linha toda: − e + ficam longe um do outro */
  .passo-gatilho { flex: 1 1 100%; justify-content: space-between; }
  .passo-gatilho button { width: 42px; height: 30px; }
  .passo-gatilho span, .passo-gatilho input { flex: 1; width: auto; }
}

/* seletor de plano na tabela de alunos */
.seletor-plano {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 9px;
  color: var(--texto);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 10px;
  min-height: 40px;
  cursor: pointer;
}
.seletor-plano:hover { border-color: var(--ouro-escuro); }
.seletor-plano:disabled { opacity: 0.5; cursor: wait; }
.celula-plano { white-space: nowrap; }

/* ------------------------------------------- busca e filtros do admin */

.cabecalho-alunos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.cabecalho-alunos h2 {
  font-size: 11px;
  letter-spacing: 2.2px;
  color: #78889B;
  font-weight: 600;
  margin-right: 4px;
}

.busca {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #080D13;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 0 12px;
  position: relative;
}
.busca:focus-within { border-color: var(--ouro-escuro); }
.busca input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--texto);
  font-size: 14px;
  padding: 12px 0;
  min-height: 44px;
}
.busca input:focus { outline: none; }
.busca input::-webkit-search-cancel-button { display: none; }

.limpar-busca {
  border: 0;
  background: transparent;
  color: var(--texto-3);
  font-size: 15px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
}
.limpar-busca:hover { color: var(--texto); background: #16202C; }

.filtros-aluno { display: flex; flex-wrap: wrap; gap: 5px; }
.filtros-aluno button {
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--texto-2);
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  min-height: 40px;
}
.filtros-aluno button:hover { color: var(--texto); }
.filtros-aluno button.ativo { border-color: #3A2F16; background: #1A1509; color: var(--ouro); }

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

/* ------------------------------------------------- cartão do plano */

.cartao-plano {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 20px;
  transition: border-color 250ms ease;
}
.cartao-plano.tranquilo, .cartao-plano.vitalicia { border-color: #1C4430; }
.cartao-plano.atencao { border-color: #3A2F16; }
.cartao-plano.critico, .cartao-plano.vencido { border-color: #45242A; }

.plano-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}
.plano-nome { font-size: 19px; font-weight: 600; }
.plano-situacao { font-size: 13px; color: var(--texto-2); margin-top: 4px; }

.plano-contador { text-align: right; font-family: var(--mono); }
.plano-contador b { display: block; font-size: 26px; font-weight: 600; line-height: 1.1; }
.plano-contador span { display: block; font-size: 11.5px; color: var(--texto-2); margin-top: 3px; }
.plano-contador .infinito { font-size: 30px; color: var(--verde); font-family: inherit; }

.tranquilo .plano-contador b, .vitalicia .plano-contador b { color: var(--verde); }
.atencao .plano-contador b { color: var(--ouro); }
.critico .plano-contador b, .vencido .plano-contador b { color: var(--vermelho); }

.barra-plano {
  height: 6px;
  background: #16202C;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 18px;
}
.barra-plano.oculto { display: none; }
.barra-cheia {
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: width 700ms ease, background 400ms ease;
}

.plano-datas {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #16202C;
}
.plano-datas span { display: block; font-size: 11px; letter-spacing: 1.2px; color: #78889B; font-weight: 600; }
.plano-datas b { display: block; font-size: 14px; font-weight: 500; margin-top: 5px; font-family: var(--mono); }

.dias-restantes { font-size: 11px; font-family: var(--mono); margin-top: 5px; }

/* ------------------------------- chamada para a página de vendas (login) */

.chamada-assinar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 11px;
  background: var(--superficie-2);
  font-size: 13px;
  color: var(--texto-2);
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}
.chamada-assinar b { color: var(--ouro); font-weight: 600; }
.chamada-assinar svg { color: var(--ouro); transition: transform 150ms ease; }
.chamada-assinar:hover { border-color: rgba(233, 185, 73, 0.45); background: rgba(233, 185, 73, 0.07); }
.chamada-assinar:hover svg { transform: translateX(3px); }

@media (max-width: 420px) {
  .chamada-assinar { flex-wrap: wrap; gap: 5px; }
}

/* -------------------------------------- emissão da licença (admin) */

.escolhas-licenca { display: grid; gap: 9px; }

.escolha {
  text-align: left;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 11px;
  padding: 12px 14px;
  color: var(--texto);
  font: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.escolha b { display: block; font-size: 14px; font-weight: 600; }
.escolha .desc { display: block; font-size: 12.5px; color: var(--texto-2); margin-top: 3px; }
.escolha:hover { border-color: var(--borda-forte); }
.escolha.ativa { border-color: var(--ouro); background: rgba(233, 185, 73, 0.08); }
.escolha.ativa b { color: var(--ouro); }

#lic-saida .mono { font-size: 15px; letter-spacing: 1px; }

/* endereço do WebRequest, com botão de copiar ao lado */
.endereco-ea {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.endereco-ea .mono { color: var(--ouro); word-break: break-all; }

/* ------------------------------- contadores por plano (gestão de alunos) */

.contadores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 clamp(16px, 3vw, 34px) 18px;
}

.contador {
  flex: 1 1 110px;
  min-width: 102px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  font: inherit;
  color: var(--texto);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.contador:hover { border-color: var(--borda-forte); }
.contador.ativo { border-color: var(--ouro); background: rgba(233, 185, 73, 0.07); }

.contador b {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
}
.contador span {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.6px;
  color: var(--texto-2);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .contadores { gap: 8px; }
  .contador { flex: 1 1 calc(50% - 4px); padding: 10px 12px; }
  .contador b { font-size: 19px; }
}

/* ------------------------------------------------------ modo descanso */

.bloco-descanso {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 18px;
  transition: border-color 160ms ease, background 160ms ease;
}
.bloco-descanso.ligado {
  border-color: rgba(79, 168, 224, 0.45);
  background: linear-gradient(180deg, rgba(79, 168, 224, 0.07), rgba(79, 168, 224, 0.02));
}
.bloco-descanso.desligado { opacity: 0.55; }

.topo-descanso {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.topo-descanso:disabled { cursor: not-allowed; }

.escudo {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte);
  color: var(--texto-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bloco-descanso.ligado .escudo {
  border-color: rgba(79, 168, 224, 0.5);
  background: rgba(79, 168, 224, 0.12);
  color: #4FA8E0;
}

.texto-descanso { flex: 1 1 auto; min-width: 0; }
.texto-descanso b { display: block; font-size: 15px; font-weight: 600; }
.texto-descanso span {
  display: block;
  font-size: 12.5px;
  color: var(--texto-2);
  margin-top: 3px;
}

.ajustes-descanso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
}

.ajuste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 11px;
  padding: 10px 12px;
  min-width: 0;
}
.ajuste .rot { font-size: 13px; font-weight: 600; min-width: 0; }
.ajuste .sub {
  display: block;
  font-size: 11.5px;
  color: var(--texto-2);
  margin-top: 2px;
  font-weight: 400;
}
.ajuste .passo-gatilho { flex-shrink: 0; }
.ajuste .chave { flex-shrink: 0; width: 46px; height: 27px; }
.ajuste .chave .bolinha { width: 19px; height: 19px; }
.ajuste .chave.ligada .bolinha { transform: translateX(19px); }

.rodape-descanso {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rodape-descanso .btn-gatilho { flex: 0 0 auto; padding: 9px 18px; }
.nota-descanso { font-size: 12.5px; color: var(--texto-2); flex: 1 1 240px; }
.nota-descanso b { color: #4FA8E0; }

/* selo da lua ao lado do EA ONLINE */
.selo.descanso {
  background: rgba(79, 168, 224, 0.12);
  border-color: rgba(79, 168, 224, 0.35);
  color: #4FA8E0;
}

@media (max-width: 640px) {
  .bloco-descanso { padding: 14px; }
  .ajustes-descanso { grid-template-columns: 1fr; }

  /* no celular cada ajuste empilha: rótulo em cima, controle embaixo e inteiro */
  .ajuste { flex-direction: column; align-items: stretch; gap: 9px; }
  /* o passo herda "flex: 1 1 100%" da regra geral do celular. Dentro do ajuste,
     que é uma coluna, esse 100% vira ALTURA e o controle vaza para fora do
     cartão, por cima do de baixo. Aqui ele volta a ter a altura do conteúdo. */
  .ajuste .passo-gatilho,
  .ajuste .chave {
    flex: 0 0 auto;
    width: auto;
    align-self: stretch;
  }
  .ajuste .chave { height: 30px; }
  .ajuste .chave .bolinha { width: 22px; height: 22px; }
  /* a chave ocupa a linha toda: a bolinha vai para a borda, não por deslocamento */
  .ajuste .chave.ligada .bolinha { transform: none; left: auto; right: 3px; }
  .rodape-descanso .btn-gatilho { flex: 1 1 100%; }
}

/* ------------------------------------------- janela de fechar, no celular */

@media (max-width: 640px) {
  /* a regra geral do celular devolve 26px de padding ao .modal; nesta janela
     o padding vive no cabeçalho, no miolo e no rodapé, não no quadro */
  .modal-rolante { padding: 0; }
  /* menos moldura = mais altura útil para a lista de pares */
  .modal-fundo { padding: 12px; align-items: flex-end; }
  .modal { max-height: calc(100dvh - 24px); }
  .topo-modal { padding: 17px 16px 13px; }
  .topo-modal h2 { font-size: 17px; }
  .corpo-modal { padding: 15px 16px 4px; }
  .rodape-modal { padding: 11px 16px; padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------- limpeza do banco (admin) */

.nota-faxina {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--texto-2);
}
.dica-faxina {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--texto-3);
}
#bloco-faxina .btn-ouro { width: 100%; }
.placar-faxina {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid #1A2533;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12.5px;
}
.placar-faxina div { display: flex; justify-content: space-between; gap: 12px; }
.placar-faxina span:first-child { color: var(--texto-3); }
.placar-faxina span:last-child { font-family: var(--mono); color: var(--texto-2); }