/* ==========================================================================
   Portal ARFC — Nexus Insights
   Paleta e tipografia derivadas do manual de marca.
   ========================================================================== */

:root {
  --azul:          #08648C;   /* primaria do manual */
  --azul-escuro:   #06496A;   /* hover / estados pressionados */
  --azul-claro:    #E8F1F6;   /* fundos sutis, selecao */
  --grafite:       #2B2B33;   /* texto do logo */
  --carvao:        #14141A;   /* fundo do login */
  --nevoa:         #F4F6F8;   /* fundo das paginas internas */
  --borda:         #E1E7EC;
  --texto:         #2B2B33;
  --texto-suave:   #6B7683;
  --branco:        #FFFFFF;
  --alerta:        #B3261E;

  --raio:          10px;
  --sombra:        0 1px 3px rgba(20, 20, 26, .06), 0 8px 24px rgba(20, 20, 26, .05);
  --transicao:     160ms ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--texto);
  background: var(--nevoa);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); }

/* Foco visivel para navegacao por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

/* ==========================================================================
   LOGIN
   ========================================================================== */

.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(8, 100, 140, .38), transparent 62%),
    linear-gradient(160deg, var(--carvao) 0%, #1D2530 58%, #10161D 100%);
}

.cartao-login {
  width: 100%;
  max-width: 360px;
  background: var(--branco);
  border-radius: 14px;
  padding: 28px 30px 22px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .34);
}

.cartao-login .marca {
  text-align: center;
  margin-bottom: 16px;
}

.cartao-login .marca img {
  width: 104px;
  height: auto;
}

.cartao-login h1 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  text-align: center;
  margin-bottom: 18px;
}

.campo { margin-bottom: 14px; }

.campo label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 5px;
}

.campo input {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--texto);
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color var(--transicao);
}

.campo input:focus {
  border-color: var(--azul);
  outline: none;
}

.botao-entrar {
  width: 100%;
  padding: 11px;
  margin-top: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--branco);
  background: var(--azul);
  border: none;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background var(--transicao);
}

.botao-entrar:hover { background: var(--azul-escuro); }

.aviso-erro {
  padding: 11px 14px;
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--alerta);
  background: #FDECEA;
  border-left: 3px solid var(--alerta);
  border-radius: 6px;
}

.rodape-login {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
  font-size: 12px;
  color: var(--texto-suave);
  text-align: center;
}

/* ==========================================================================
   CABECALHO INTERNO
   ========================================================================== */

.cabecalho {
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 10;
}

.cabecalho .interno {
  max-width: 940px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* O logo da marca e empilhado (grafo sobre NEXUS sobre INSIGHTS). Num
   cabecalho de 34px isso deixaria "INSIGHTS" com ~4px, ilegivel. Por isso
   aqui usamos o simbolo isolado ao lado da assinatura tipografica, em
   Montserrat — a mesma substituta livre do Gotham usada no resto do portal.
   O logo completo aparece na tela de login, onde ha espaco para ele. */
.marca-cabecalho {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.marca-cabecalho img { height: 26px; width: auto; }

.assinatura {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.assinatura .nome {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--grafite);
}

.assinatura .qualificador {
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .34em;
  color: var(--texto-suave);
  margin-top: 2px;
}

.identificacao {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
}

.identificacao .empresa {
  font-weight: 600;
  color: var(--grafite);
}

.identificacao a {
  color: var(--texto-suave);
  text-decoration: none;
  transition: color var(--transicao);
}

.identificacao a:hover { color: var(--azul); }

/* ==========================================================================
   CONTEUDO
   ========================================================================== */

.conteudo {
  max-width: 940px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.titulo-pagina {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}

.subtitulo-pagina {
  font-size: 14.5px;
  color: var(--texto-suave);
  margin-bottom: 36px;
}

/* ==========================================================================
   ESPINHA DE SEMANAS — elemento assinatura
   Reproduz o grafo do logo da Nexus. Nao e ornamento: o Ciclo Assistido e
   uma serie encadeada, e cada semana carrega os compromissos da anterior.
   ========================================================================== */

.espinha {
  position: relative;
  padding-left: 34px;
}

/* a linha que conecta os nos */
.espinha::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, var(--azul) 0%, #9DB4C2 55%, var(--borda) 100%);
}

.semana { position: relative; margin-bottom: 18px; }

/* o no */
.semana::before {
  content: '';
  position: absolute;
  left: -34px;
  top: 26px;
  width: 16px;
  height: 16px;
  background: var(--branco);
  border: 3px solid #9DB4C2;
  border-radius: 50%;
  z-index: 1;
}

.semana.recente::before {
  border-color: var(--azul);
  box-shadow: 0 0 0 5px rgba(8, 100, 140, .13);
}

.cartao-semana {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px 22px;
  box-shadow: var(--sombra);
  transition: border-color var(--transicao);
}

.semana.recente .cartao-semana { border-color: #BCD3E0; }

.cabecalho-semana {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}

.codigo-semana {
  font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  font-size: 15px;
  font-weight: 500;
  color: var(--grafite);
  letter-spacing: -.01em;
}

.selo-novo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--branco);
  background: var(--azul);
  padding: 3px 8px;
  border-radius: 4px;
}

.periodo {
  font-size: 13.5px;
  color: var(--texto-suave);
}

.publicado {
  font-size: 12px;
  color: var(--texto-suave);
  margin-bottom: 16px;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.botao {
  display: inline-block;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 7px;
  transition: background var(--transicao), border-color var(--transicao);
}

.botao-primario {
  color: var(--branco);
  background: var(--azul);
  border: 1.5px solid var(--azul);
}

.botao-primario:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }

.botao-secundario {
  color: var(--azul);
  background: var(--branco);
  border: 1.5px solid var(--borda);
}

.botao-secundario:hover { border-color: var(--azul); background: var(--azul-claro); }

.botao-discreto {
  color: var(--texto-suave);
  background: transparent;
  border: 1.5px solid transparent;
  padding-left: 8px;
  padding-right: 8px;
}

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

.botao-indisponivel {
  color: var(--texto-suave);
  background: var(--nevoa);
  border: 1.5px solid var(--borda);
  cursor: not-allowed;
  opacity: .6;
}

/* ==========================================================================
   VAZIO E ERRO
   ========================================================================== */

.vazio {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 48px 32px;
  text-align: center;
  box-shadow: var(--sombra);
}

.vazio h2 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}

.vazio p {
  font-size: 14px;
  color: var(--texto-suave);
  max-width: 420px;
  margin: 0 auto;
}

.tela-erro {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.tela-erro .codigo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 52px;
  font-weight: 500;
  color: var(--borda);
  line-height: 1;
  margin-bottom: 14px;
}

.tela-erro h1 {
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 8px;
}

.tela-erro p {
  font-size: 14.5px;
  color: var(--texto-suave);
  margin-bottom: 26px;
}

/* ==========================================================================
   MOBILE — o gerente abre no celular
   ========================================================================== */

@media (max-width: 600px) {
  .cabecalho .interno { padding: 12px 16px; }
  .marca-cabecalho img { height: 22px; }
  .assinatura .nome { font-size: 14px; }
  .assinatura .qualificador { font-size: 7.5px; letter-spacing: .3em; }
  .identificacao { font-size: 12.5px; gap: 10px; }
  .conteudo { padding: 28px 16px 56px; }
  .titulo-pagina { font-size: 22px; }
  .subtitulo-pagina { margin-bottom: 26px; }
  .espinha { padding-left: 26px; }
  .espinha::before { left: 5px; }
  .semana::before { left: -26px; width: 13px; height: 13px; top: 24px; }
  .cartao-semana { padding: 17px 16px; }
  .acoes { flex-direction: column; }
  .botao { width: 100%; text-align: center; }
  .cartao-login { padding: 26px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}