/* Peças que qualquer tela usa: botão, selo, chave, campo, diálogo, avisos. */

.marca { font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: 0.08em; font-size: var(--t-14); white-space: nowrap; }
.marca span { color: var(--dourado); }

.titulo-tela { font-size: var(--t-20); font-weight: 700; }
.titulo-coluna { font-size: var(--t-14); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--suave); }

/* ───────────── Botões ───────────── */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 36px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  border-radius: var(--raio-p);
  padding: var(--e-2) var(--e-4);
  font-size: var(--t-14);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.12s, border-color 0.12s;
}
.botao:hover { background: var(--painel); }
.botao:disabled { opacity: 0.5; cursor: default; }
/* O dourado é do botão que decide. */
.botao.primario { background: var(--dourado); border-color: var(--dourado); color: var(--preto); }
.botao.primario:hover { background: var(--dourado-forte); border-color: var(--dourado-forte); }
.botao.perigo { background: var(--perigo); border-color: var(--perigo); color: var(--branco); }
.botao.perigo:hover { background: var(--perigo-texto); border-color: var(--perigo-texto); }
.botao.discreto { border-color: transparent; background: transparent; font-weight: 500; color: var(--suave); }
.botao.discreto:hover { background: var(--painel); color: var(--texto); }
.botao.simulador { border-color: var(--simulador); color: var(--simulador); background: var(--superficie); }
.botao.simulador:hover { background: var(--simulador-fundo); }

/* ───────────── Selos ───────────── */

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  border-radius: var(--pilula);
  padding: 2px 10px;
  font-size: var(--t-12);
  font-weight: 600;
  background: var(--painel);
  color: var(--suave);
  white-space: nowrap;
  text-decoration: none;
}
.selo-agente { background: var(--marinho-fundo); color: var(--marinho); }
.selo-equipe { background: var(--dourado-fundo); color: var(--dourado-texto); }
.selo-alerta { background: var(--aviso-fundo); color: var(--aviso-texto); }
.selo-ok { background: var(--ok-fundo); color: var(--ok-texto); }
.selo-simulado { background: var(--simulador-fundo); color: var(--simulador); }

.erro { color: var(--perigo-texto); font-weight: 600; }
.vazio { padding: var(--e-6) var(--e-4); color: var(--suave); text-align: center; }

/* ───────────── Chave liga/desliga ───────────── */

.chave {
  position: relative;
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  border-radius: var(--pilula);
  padding: 6px 14px 6px 30px;
  font-size: var(--t-13);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.chave::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--perigo);
}
.chave[aria-pressed="true"]::before { background: var(--ok); }
.chave:disabled { opacity: 0.6; cursor: default; }
.chave-escura { border-color: var(--texto); }

/* ───────────── Campos ───────────── */

.campo {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  background: var(--superficie);
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-14);
}
.campo::placeholder { color: var(--suave); opacity: 0.8; }
.campo:focus-visible { outline: 2px solid var(--dourado); outline-offset: 0; border-color: var(--dourado); }
textarea.campo { resize: vertical; min-height: 44px; max-height: 40vh; }

/* ───────────── Entrar ───────────── */

.entrar { min-height: 100%; display: grid; place-items: center; padding: var(--e-6); background: var(--preto); }
.cartao-entrar {
  width: min(360px, 100%);
  background: var(--fundo);
  border-radius: var(--raio-g);
  padding: var(--e-8) var(--e-6);
  display: grid;
  gap: var(--e-2);
  box-shadow: var(--sombra-forte);
}
.cartao-entrar h1 { font-size: var(--t-24); margin: var(--e-2) 0 var(--e-3); }
.cartao-entrar label { font-size: var(--t-13); font-weight: 600; margin-top: var(--e-1); }
.cartao-entrar .botao { margin-top: var(--e-4); min-height: 44px; }

/* ───────────── Diálogos ───────────── */

.dialogo { border: 0; border-radius: var(--raio-g); padding: 0; width: min(440px, calc(100% - 32px)); background: var(--fundo); color: var(--texto); box-shadow: var(--sombra-forte); }
.dialogo::backdrop { background: var(--veu); }
.dialogo form { padding: var(--e-6); display: grid; gap: var(--e-3); }
.dialogo h2 { font-size: var(--t-20); }
.dialogo label { font-size: var(--t-13); font-weight: 600; }
.dialogo-acoes { display: flex; justify-content: flex-end; gap: var(--e-2); margin-top: var(--e-2); }

/* ───────────── Avisos ───────────── */

.avisos {
  position: fixed;
  left: 50%;
  bottom: var(--e-5);
  transform: translateX(-50%);
  display: grid;
  gap: var(--e-2);
  width: min(520px, calc(100% - 24px));
  z-index: 30;
  pointer-events: none;
}
.aviso { background: var(--preto); color: var(--texto-invertido); border-radius: var(--raio); padding: var(--e-3) var(--e-4); box-shadow: var(--sombra-forte); }
.aviso.erro { background: var(--perigo-texto); color: var(--branco); font-weight: 600; }

/* ───────────── Em construção ───────────── */

.em-construcao { max-width: 520px; margin: var(--e-10) auto; padding: var(--e-8) var(--e-6); display: grid; gap: var(--e-3); justify-items: start; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); }
.em-construcao-selo { font-size: var(--t-12); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--suave); }
.em-construcao .botao { margin-top: var(--e-3); }

/* ───────────── Visibilidade por largura ───────────── */

.so-celular { display: none !important; }
.so-estreito { display: none !important; }

@media (max-width: 1199px) {
  .so-estreito { display: inline-flex !important; }
}

@media (max-width: 767px) {
  .so-celular { display: inline-flex !important; }
  .avisos { bottom: calc(var(--barra-inferior) + var(--e-3)); }
}