/*
  portal.css: o visual do simulador do portal de nuvem (versão 1 · 2026-10-26).
  Lembra o layout de um portal de nuvem (barra de cima com busca, menu lateral, formulários em abas),
  mas com as cores do site: nada de logo nem de visual copiado da Microsoft. Cópia comum a fundamentos-nuvem
  e seguranca-nuvem (portal/). Mudou? Aumente o ?v=N no index.html.
*/

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

/* ---------- aviso fixo ---------- */
.sim-aviso {
  margin: 0 0 1.2rem;
  padding: .8rem 1rem;
  border-radius: var(--raio-p);
  border: 1px solid color-mix(in srgb, var(--ouro) 55%, transparent);
  background: color-mix(in srgb, var(--ouro) 10%, transparent);
  color: var(--texto);
}

/* ---------- portal e missões lado a lado ---------- */
.sim-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 1.2rem;
  align-items: start;
}

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

/* ---------- o portal ---------- */
.sim-portal {
  position: relative;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.sim-topo {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .8rem;
  background: color-mix(in srgb, var(--neon) 22%, var(--chip));
  color: #f2efe6;
}

.sim-marca {
  font-family: var(--f-titulo);
  font-weight: 700;
  white-space: nowrap;
}

.sim-marca em {
  font-weight: 400;
  font-style: normal;
  opacity: .75;
}

.sim-busca {
  flex: 1;
  min-width: 0;
}

.sim-busca input {
  box-sizing: border-box;
  width: 100%;
  padding: .4rem .7rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .25);
  color: #f2efe6;
  font: inherit;
  font-size: .92rem;
}

.sim-busca input::placeholder {
  color: rgba(242, 239, 230, .7);
}

.sim-conta {
  font-size: .82rem;
  white-space: nowrap;
  opacity: .85;
}

.sim-hamburguer {
  display: none;
  padding: .2rem .5rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}

.sim-corpo {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  min-height: 30rem;
}

.sim-menu {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .6rem;
  border-right: 1px solid var(--borda);
  background: var(--superficie-2);
}

.sim-menu button {
  padding: .5rem .6rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: .92rem;
  text-align: left;
  cursor: pointer;
}

.sim-menu button:hover,
.sim-menu button[aria-current] {
  background: color-mix(in srgb, var(--neon) 16%, transparent);
}

.sim-tela {
  padding: 1rem 1.2rem 1.4rem;
  min-width: 0;
  outline: none;
}

/* no celular, o menu lateral abre pelo ☰ */
@media (max-width: 720px) {
  .sim-hamburguer {
    display: inline-block;
  }

  .sim-conta {
    display: none;
  }

  .sim-corpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .sim-menu {
    display: none;
    border-right: 0;
    border-bottom: 1px solid var(--borda);
  }

  .sim-menu.aberto {
    display: flex;
  }

  .sim-marca em {
    display: none;
  }
}

/* ---------- conteúdo das telas ---------- */
.sim-migalhas {
  margin: 0 0 .3rem;
  font-size: .82rem;
  color: var(--texto-3);
}

.sim-titulo {
  margin: 0 0 1rem;
  font-size: 1.35rem;
}

.sim-sub {
  margin: 1.2rem 0 .6rem;
  font-size: 1rem;
  color: var(--texto-2);
}

.sim-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--neon);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.sim-servicos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .6rem;
}

.sim-servicos button {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: .8rem .5rem;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-size: .88rem;
  text-align: center;
  cursor: pointer;
}

.sim-servicos button span {
  font-size: 1.5rem;
}

.sim-servicos button:hover {
  border-color: var(--neon);
}

.sim-barra-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .4rem 0 1rem;
}

.sim-botao {
  padding: .45rem .9rem;
  border-radius: 6px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2);
  color: var(--texto);
  font: 600 .9rem var(--f-texto);
  cursor: pointer;
}

.sim-botao.primario {
  border-color: var(--neon);
  background: color-mix(in srgb, var(--neon) 30%, var(--superficie));
}

.sim-botao.perigo {
  border-color: #e5786d;
}

.sim-botao:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.sim-botao:focus-visible,
.sim-servicos button:focus-visible,
.sim-menu button:focus-visible,
.sim-link:focus-visible,
.sim-abas button:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

.sim-tabela {
  overflow-x: auto;
}

.sim-tabela table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.sim-tabela th,
.sim-tabela td {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--borda);
  text-align: left;
  white-space: nowrap;
}

.sim-tabela th {
  color: var(--texto-2);
  font-weight: 600;
}

.sim-vazio,
.sim-nota {
  color: var(--texto-2);
  font-size: .92rem;
}

/* ---------- formulários ---------- */
.sim-form fieldset {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
}

.sim-form legend {
  padding: 0 .3rem;
  font-family: var(--f-titulo);
  font-weight: 700;
}

.sim-form label {
  display: grid;
  gap: .3rem;
  margin-bottom: .7rem;
  font-size: .9rem;
  color: var(--texto-2);
}

.sim-form select,
.sim-form input[type="text"],
.sim-form input:not([type]),
.sim-form input[name="nome"],
.sim-form input[name="usuario"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 34rem;
  padding: .45rem .6rem;
  border-radius: 6px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-size: .95rem;
}

.sim-form select:focus-visible,
.sim-form input:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 1px;
}

.sim-form select:disabled {
  opacity: .7;
}

.sim-radios,
.sim-portas {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.2rem;
  margin-bottom: .7rem;
}

.sim-radios label,
.sim-portas label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  color: var(--texto);
}

.sim-portas > span {
  flex-basis: 100%;
  font-size: .9rem;
  color: var(--texto-2);
}

.sim-obrig {
  color: #e5786d;
}

.sim-abas {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--borda-forte);
}

.sim-abas button {
  padding: .5rem .8rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--texto-2);
  font: 600 .92rem var(--f-texto);
  cursor: pointer;
}

.sim-abas button[aria-selected="true"] {
  border-bottom-color: var(--neon);
  color: var(--texto);
}

.sim-erro,
.sim-ok {
  padding: .6rem .8rem;
  border-radius: 6px;
  font-size: .92rem;
}

.sim-erro {
  border: 1px solid #e5786d;
  background: color-mix(in srgb, #e5786d 10%, transparent);
  color: var(--texto);
}

.sim-ok {
  border: 1px solid var(--menta);
  background: color-mix(in srgb, var(--menta) 12%, transparent);
  color: var(--texto);
}

.sim-erros {
  margin: .4rem 0 1rem;
  color: var(--texto);
}

.sim-detalhes {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .35rem 1rem;
  margin: 0 0 1rem;
  font-size: .92rem;
}

.sim-detalhes dt {
  color: var(--texto-2);
}

.sim-detalhes dd {
  margin: 0;
  color: var(--texto);
}

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

  .sim-detalhes dd {
    margin-bottom: .4rem;
  }
}

.sim-conferencia {
  padding: .7rem .9rem;
  border-radius: var(--raio-p);
  border: 1px dashed color-mix(in srgb, var(--ouro) 60%, transparent);
  background: color-mix(in srgb, var(--ouro) 7%, transparent);
}

.sim-conferencia ul {
  margin: .4rem 0 0;
}

.sim-notificacao {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  max-width: 22rem;
  padding: .6rem .9rem;
  border-radius: var(--raio-p);
  border: 1px solid var(--menta);
  background: var(--superficie-2);
  color: var(--texto);
  font-size: .9rem;
  box-shadow: var(--sombra);
}

/* ---------- missões ---------- */
.sim-missoes {
  position: sticky;
  top: 5rem;
}

@media (max-width: 980px) {
  .sim-missoes {
    position: static;
    order: -1;
  }
}

.sim-placar {
  margin: .4rem 0 .8rem;
  padding: .5rem .7rem;
  border-radius: var(--raio-p);
  border: 1px solid color-mix(in srgb, var(--neon) 45%, transparent);
  background: color-mix(in srgb, var(--neon) 8%, transparent);
  font-family: var(--f-mono);
  font-size: .85rem;
}

.sim-lista-missoes {
  display: grid;
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sim-lista-missoes li {
  display: grid;
  gap: .25rem;
  padding: .6rem .7rem;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte);
  font-size: .88rem;
  color: var(--texto-2);
}

.sim-lista-missoes li strong {
  color: var(--texto);
  font-family: var(--f-titulo);
}

.sim-lista-missoes li.feita {
  border-color: color-mix(in srgb, var(--menta) 60%, transparent);
}

.sim-xp {
  font-family: var(--f-mono);
  color: var(--menta);
}

.sim-dica {
  margin-top: .8rem;
  padding: .6rem .8rem;
  border-radius: var(--raio-p);
  border: 1px solid color-mix(in srgb, var(--ouro) 55%, transparent);
  background: color-mix(in srgb, var(--ouro) 9%, transparent);
  font-size: .88rem;
  color: var(--texto);
}

.sim-dica ul {
  margin: .4rem 0 0;
  padding-left: 1.1rem;
}

.sim-recomecar {
  margin-top: 1rem;
  width: 100%;
}