@font-face {
  font-family: "Atkinson";
  src: url("/conta/fonts/atkinson-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson";
  src: url("/conta/fonts/atkinson-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif";
  src: url("/conta/fonts/source-serif-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --bg-ceu: #0e1a20;
  --bg-portaria: #14242c;
  --papel: #faf6ec;
  --papel-borda: #ded6c2;
  --tinta: #1b2b34;
  --tinta-suave: #4a5c66;
  --tinta-fraca: #596a74;
  --ouro: #f2c14e;
  --ouro-escuro: #8a6508;
  --latao: #d4af37;
  --terracota: #c2362f;
  --azul-reparticao: #204556;
  --verde-selo: #1e6b42;
  --sombra-guiche: 0 24px 70px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  --fonte: "Atkinson", system-ui, -apple-system, sans-serif;
  --fonte-serif: "Source Serif", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte);
  color: var(--tinta);
  background-color: var(--bg-ceu);
  background-image:
    radial-gradient(ellipse 900px 500px at 50% 0%, #1e3845 0%, transparent 80%),
    linear-gradient(180deg, #0e1a20 0%, #16262f 60%, #1b2f3a 100%);
  background-attachment: fixed;
}

/* Container mestre: Portaria em 2 colunas no desktop, 1 coluna no mobile */
.portaria {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-height: 100vh;
  padding: 32px 24px;
  max-width: 1240px;
  margin: 0 auto;
}

/* Coluna 1: Fachada Ilustrada */
.cena {
  flex: 1 1 480px;
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fachada {
  width: 100%;
  height: auto;
  max-height: 82vh;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.45));
}

/* Estilos dos elementos SVG da fachada */
.fachada .astro { fill: #f8edd1; opacity: 0.85; }
.fachada .astro-recorte { fill: #13242c; }
.fachada .nuvens { fill: #ffffff; opacity: 0.08; }
.fachada .chao { fill: #0b151a; }
.fachada .calcada { fill: #1f343e; }
.fachada .mastro { stroke: #8a9ba3; stroke-width: 2.5; stroke-linecap: round; }
.fachada .bandeira { fill: var(--ouro); }
.fachada .frontao { fill: #1a323c; stroke: #2c4a56; stroke-width: 2; }
.fachada .frontao-int { fill: #152932; }
.fachada .cornija { fill: #24414e; stroke: #3a5c6c; stroke-width: 1.5; }
.fachada .corpo { fill: #1b313b; stroke: #284451; stroke-width: 2; }
.fachada .placa { fill: #0d1a20; stroke: var(--ouro); stroke-width: 1.8; }
.fachada .placa-t { fill: var(--ouro); font-family: var(--fonte); font-size: 15px; font-weight: 700; letter-spacing: 3.5px; }
.fachada .placa-s { fill: #b8c8cf; font-family: var(--fonte); font-size: 8.5px; font-weight: 700; letter-spacing: 1.6px; }
.fachada .placa-porta { fill: #0d1a20; stroke: #5b7987; stroke-width: 1; }
.fachada .placa-porta-t { fill: #f3efe6; font-family: var(--fonte); font-size: 7.5px; font-weight: 700; letter-spacing: 2px; }
.fachada .colunas rect { fill: #264350; stroke: #3b5f70; stroke-width: 1; }
.fachada .capiteis rect { fill: #335565; }
.fachada .janelas rect { fill: #ffdf7a; opacity: 0.88; filter: drop-shadow(0 0 6px rgba(255, 223, 122, 0.45)); }
.fachada .caixilhos path { stroke: #1a303a; stroke-width: 2.2; stroke-linecap: square; }
.fachada .porta { fill: #111d23; stroke: #3b5d6e; stroke-width: 1.8; }
.fachada .porta-div { stroke: #233b46; stroke-width: 2; }
.fachada .macaneta { fill: var(--ouro); }
.fachada .degrau { fill: #213945; stroke: #304e5d; stroke-width: 1; }
.fachada .vaso path { fill: #82472d; }
.fachada .vaso circle { fill: #2e8b57; }
.fachada .poste { stroke: #566e7a; stroke-width: 3; }
.fachada .senha { fill: #091317; stroke: #415965; stroke-width: 1.5; }
.fachada .senha-r { fill: #8fa6b0; font-family: var(--fonte); font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.fachada .senha-n { fill: #ff6b57; font-family: var(--fonte); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fachada .carimbo-muro rect { fill: none; stroke: #c2362f; stroke-width: 2; stroke-dasharray: 4 2; opacity: 0.75; }
.fachada .carimbo-muro text { fill: #c2362f; font-family: var(--fonte); font-size: 11px; font-weight: 700; letter-spacing: 2px; opacity: 0.85; }

/* Dinâmica do curso refletida na fachada */
body[data-curso="itanhaem-agente-2026"] .so-tjsp { display: none; }
body[data-curso="itanhaem-agente-2026"] .so-ita { display: block; }
body[data-curso="tjsp-escrevente-02-2026"] .so-ita { display: none; }
body[data-curso="tjsp-escrevente-02-2026"] .so-tjsp { display: block; }
body[data-curso="tjsp-escrevente-02-2026"] .fachada .placa { stroke: var(--latao); }

/* Coluna 2: Guichê / Ficha de Atendimento */
.guiche {
  flex: 0 1 480px;
  width: 100%;
  max-width: 480px;
  background: var(--bg-portaria);
  border: 1.5px solid #2e4a57;
  border-radius: 18px;
  padding: 6px;
  box-shadow: var(--sombra-guiche);
  position: relative;
}

.guiche-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 10px;
  color: #a5b9c2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.guiche-topo .aberto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64d896;
}

.guiche-topo .aberto i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #46c07b;
  box-shadow: 0 0 8px #46c07b;
}

/* Ficha em papel de repartição oficial */
.ficha {
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--papel-borda);
  border-radius: 14px;
  padding: 28px 24px 22px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 12px rgba(0, 0, 0, 0.18);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(220, 212, 194, 0.35) 28px);
}

/* Carimbo oficial inclinado no canto da ficha */
.carimbo-ficha {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--terracota);
  border: 1.8px dashed var(--terracota);
  border-radius: 5px;
  padding: 3px 8px;
  transform: rotate(6deg);
  opacity: 0.88;
  pointer-events: none;
}

.marca {
  color: var(--ouro-escuro);
  font-size: 11px;
  letter-spacing: 2.5px;
  font-weight: 700;
  margin: 0 0 6px;
  text-transform: uppercase;
}

h1 {
  font-family: var(--fonte-serif);
  font-size: 26px;
  line-height: 1.18;
  color: var(--tinta);
  margin: 0 0 8px;
  font-weight: 600;
}

.intro {
  color: var(--tinta-suave);
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0 0 16px;
}

.aviso {
  padding: 10px 12px;
  border: 1.5px solid #d49e24;
  background: #fff8e6;
  border-radius: 8px;
  color: #734f06;
  font-size: 12.5px;
  line-height: 1.4;
  margin-bottom: 14px;
}

/* Seletor de Setores / Concursos em cartões oficiais */
.setores {
  border: 1.5px solid var(--papel-borda);
  border-radius: 10px;
  padding: 10px 10px 8px;
  margin: 0 0 16px;
  background: rgba(255, 255, 255, 0.6);
  min-width: 0;
  width: 100%;
}

.setores legend {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: 0 6px;
}

.setores-lista {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.btn-curso {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid #cfc7b4;
  background: #ffffff;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  width: 100%;
  min-width: 0;
}

.btn-curso:hover {
  border-color: #9aa8af;
  transform: translateY(-1px);
}

.btn-curso[aria-pressed="true"] {
  background: #fdfaf0;
  border-color: var(--ouro-escuro);
  box-shadow: 0 0 0 1.5px var(--ouro-escuro), 0 3px 8px rgba(138, 101, 8, 0.15);
}

.setor-icone {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setor-icone svg {
  width: 100%;
  height: 100%;
  display: block;
}

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

.setor-txt strong {
  display: block;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setor-txt small {
  display: block;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--tinta-fraca);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-curso[aria-pressed="true"] .setor-txt strong {
  color: #111e24;
  font-weight: 700;
}

/* Selo de conferido no setor selecionado */
.setor-ok {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #b5a894;
  display: inline-block;
  flex: 0 0 14px;
}

.btn-curso[aria-pressed="true"] .setor-ok {
  border-color: var(--verde-selo);
  background: var(--verde-selo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Abas de Entrar / Criar Conta como guias de fichário */
.abas {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  border-bottom: 2px solid var(--papel-borda);
  padding-bottom: 0;
}

.abas button {
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 8px 14px;
  font-family: var(--fonte);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tinta-suave);
  cursor: pointer;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}

.abas button:hover {
  color: var(--tinta);
}

.abas button[aria-pressed="true"] {
  color: var(--tinta);
  border-bottom-color: var(--ouro-escuro);
  background: rgba(255, 255, 255, 0.7);
}

/* Formulário e campos */
.pasta label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: 12px;
}

.pasta input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  font-family: var(--fonte);
  font-size: 14px;
  color: var(--tinta);
  background: #ffffff;
  border: 1.5px solid #cac2b0;
  border-radius: 7px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pasta input:focus {
  outline: none;
  border-color: var(--ouro-escuro);
  box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.35);
}

.ajuda {
  font-size: 11.5px;
  color: #75550a;
  background: #fff8e8;
  border: 1px solid #ebd39c;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 0 0 12px;
  line-height: 1.4;
}

/* Botão principal de ação */
.principal {
  display: block;
  width: 100%;
  background: var(--ouro);
  color: #17242a;
  font-family: var(--fonte);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 12px 18px;
  border: 1.5px solid var(--ouro-escuro);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ouro-escuro), 0 5px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  margin-top: 4px;
}

.principal:hover {
  background: #f7cb63;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--ouro-escuro), 0 7px 16px rgba(0, 0, 0, 0.22);
}

.principal:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ouro-escuro), 0 2px 6px rgba(0, 0, 0, 0.18);
}

.principal:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

/* Mensagens de status */
#mensagem {
  font-size: 12.5px;
  line-height: 1.4;
  margin: 10px 0 6px;
  min-height: 18px;
  color: #21593c;
  font-weight: 700;
}

#mensagem.erro {
  color: var(--terracota);
}

.link {
  background: none;
  border: none;
  color: var(--azul-reparticao);
  font-family: var(--fonte);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  padding: 4px 0;
  cursor: pointer;
}

.link:hover {
  color: var(--tinta);
}

/* Rodapé estilo aviso regulamentar */
.regulamento {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--papel-borda);
  font-size: 11px;
  color: var(--tinta-fraca);
  line-height: 1.45;
}

.regulamento p {
  margin: 4px 0;
}

/* Acessibilidade: foco visível */
button:focus-visible, input:focus-visible {
  outline: 3px solid var(--ouro);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

/* Redução de movimento */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Responsividade: Tablet (<= 980px) */
@media (max-width: 980px) {
  .portaria {
    flex-direction: column;
    padding: 24px 16px;
    gap: 20px;
  }
  .cena {
    flex: 0 1 auto;
    max-width: 440px;
    width: 100%;
  }
  .fachada {
    max-height: 240px;
  }
  .guiche {
    max-width: 440px;
  }
}

/* Celular (<= 480px) */
@media (max-width: 480px) {
  .portaria {
    padding: 12px 10px 24px;
    gap: 12px;
  }
  .cena {
    max-width: 100%;
  }
  .fachada {
    max-height: 160px;
  }
  .guiche {
    max-width: 100%;
    border-radius: 14px;
    padding: 4px;
  }
  .ficha {
    padding: 20px 14px 16px;
    border-radius: 11px;
  }
  h1 {
    font-size: 22px;
  }
  .intro {
    font-size: 12.5px;
  }
  .setores-lista {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .carimbo-ficha {
    top: 10px;
    right: 12px;
    font-size: 9px;
    padding: 2px 6px;
  }
}

/* Telas muito pequenas (<= 340px) */
@media (max-width: 340px) {
  .fachada {
    display: none; /* Em relógios ou telas extremas, foca no formulário */
  }
  h1 {
    font-size: 19px;
  }
}