/* ==========================================================================
   Verllog Logística — telas internas
   Fase 8: resultado do rastreamento | Fase 9: painel administrativo
   Reaproveita as variáveis de cor definidas em style.css
   ========================================================================== */

/* ------------------------------------------------------ Mensagens do sistema */

.avisos { padding-top: 20px; }

.aviso {
  padding: 13px 18px;
  border-radius: var(--raio);
  margin-bottom: 10px;
  font-size: .93rem;
  font-weight: 500;
  border: 1px solid transparent;
}

.aviso--sucesso { background: #ecfdf3; color: #14532d; border-color: #bbf7d0; }
.aviso--erro    { background: #fef2f2; color: #7f1d1d; border-color: #fecaca; }

/* ------------------------------------------------- Código não encontrado */

.vazio { max-width: 560px; margin: 0 auto; text-align: center; padding: 48px 0; }

.vazio__icone { width: 56px; height: 56px; color: var(--cor-acento); margin-bottom: 20px; }

.vazio__titulo { margin: 0 0 10px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }

.vazio__texto { margin: 0 0 22px; color: var(--texto-suave); }

.vazio__codigo { margin: 0 0 24px; font-size: .9rem; color: var(--texto-suave); }

.vazio__codigo code {
  font-family: ui-monospace, Consolas, monospace;
  background: var(--fundo-suave);
  border: 1px solid var(--borda);
  padding: 3px 8px;
  border-radius: 5px;
}

.vazio__busca { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }

.vazio__campo {
  flex: 1;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  font-family: inherit;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.vazio__campo::placeholder { letter-spacing: normal; color: #93a2b5; }
.vazio__campo:focus { outline: 2px solid var(--cor-azul); outline-offset: 1px; }

.vazio__botao {
  border: 0;
  border-radius: 9px;
  padding: 13px 24px;
  background: var(--cor-primaria);
  color: #fff;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}

.vazio__botao:hover { background: var(--cor-primaria-clara); }

.vazio__dica { margin-top: 18px; font-size: .85rem; color: var(--texto-suave); }

/* ------------------------------------------------------ Bloco do resultado */

.resultado {
  background: linear-gradient(160deg, var(--cor-primaria) 0%, var(--cor-primaria-clara) 100%);
  color: #fff;
  padding: 52px 0 44px;
}

.resultado__rotulo {
  margin: 0 0 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cor-acento);
}

.resultado__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.resultado__codigo {
  margin: 0 0 6px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: .04em;
}

.resultado__destino { margin: 0; color: rgba(255, 255, 255, .8); font-size: .98rem; }

.etiqueta {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--cor-acento);
  color: #23180a;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.etiqueta--entregue { background: var(--cor-sucesso); color: #fff; }

.etiqueta--pequena {
  padding: 4px 11px;
  font-size: .7rem;
  letter-spacing: .04em;
  background: #e8edf4;
  color: #33465e;
}

.etiqueta--pequena.etiqueta--entregue { background: #dcfce7; color: #14532d; }

.progresso {
  margin: 28px 0 30px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}

.progresso__barra {
  height: 100%;
  border-radius: 999px;
  background: var(--cor-acento);
  transition: width .5s ease;
}

.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px;
  margin: 0;
}

.resumo__item dt {
  margin-bottom: 5px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.resumo__item dd { margin: 0; font-size: 1rem; font-weight: 500; }

.resumo__destaque { color: var(--cor-acento); font-weight: 700 !important; }

/* --------------------------------------------------------------- Timeline */

.linha-tempo { list-style: none; margin: 32px 0 0; padding: 0 0 0 6px; }

.etapa {
  position: relative;
  padding: 0 0 30px 34px;
  border-left: 2px solid var(--borda);
}

.etapa:last-child { border-left-color: transparent; padding-bottom: 6px; }

.etapa__marcador {
  position: absolute;
  left: -9px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--borda);
}

.etapa--concluida { border-left-color: var(--cor-sucesso); }

.etapa--concluida .etapa__marcador {
  border-color: var(--cor-sucesso);
  background: var(--cor-sucesso);
}

.etapa--concluida:last-child { border-left-color: transparent; }

.etapa--atual .etapa__marcador {
  border-color: var(--cor-azul);
  background: var(--cor-azul);
  box-shadow: 0 0 0 5px rgba(22, 104, 227, .18);
}

.etapa--prevista { opacity: .62; }

.etapa__status { margin: 0 0 4px; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }

.etapa__tag {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fundo-suave);
  border: 1px solid var(--borda);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  vertical-align: 2px;
}

.etapa__quando {
  margin: 0 0 2px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .88rem;
  color: var(--texto-suave);
}

.etapa__local { margin: 0 0 4px; font-size: .95rem; font-weight: 500; }

.etapa__descricao { margin: 0; font-size: .88rem; color: var(--texto-suave); }

/* ----------------------------------------------------- Endereço de entrega */

.entrega {
  margin-top: 40px;
  padding: 24px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-suave);
}

.entrega h3 { margin: 0 0 12px; font-size: 1rem; font-weight: 700; }
.entrega p  { margin: 0 0 4px; font-size: .95rem; }

.entrega__cpf { font-family: ui-monospace, Consolas, monospace; color: var(--texto-suave); }

.entrega__nota { margin-top: 12px !important; font-size: .82rem !important; color: var(--texto-suave); }

.voltar { margin-top: 34px; }
.voltar--topo { margin: 0 0 22px; }

.voltar a { color: var(--cor-azul); text-decoration: none; font-weight: 600; font-size: .95rem; }
.voltar a:hover { text-decoration: underline; }

.rodape__link { color: rgba(255, 255, 255, .6); text-decoration: underline; }

/* ==========================================================================
   Painel administrativo
   ========================================================================== */

.login {
  max-width: 400px;
  margin: 40px auto;
  padding: 34px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.login__titulo { margin: 0 0 6px; font-size: 1.4rem; font-weight: 700; }
.login__texto  { margin: 0 0 26px; color: var(--texto-suave); font-size: .93rem; }

.login__form { display: flex; flex-direction: column; gap: 6px; }

.login__form label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-top: 12px;
}

.login__form input {
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  font-family: inherit;
  font-size: 1rem;
}

.login__form input:focus { outline: 2px solid var(--cor-azul); outline-offset: 1px; }

.login__form button {
  margin-top: 24px;
  padding: 13px;
  border: 0;
  border-radius: 9px;
  background: var(--cor-primaria);
  color: #fff;
  font-family: inherit;
  font-size: .97rem;
  font-weight: 600;
  cursor: pointer;
}

.login__form button:hover { background: var(--cor-primaria-clara); }

.login__nota { margin: 22px 0 0; font-size: .8rem; color: var(--texto-suave); }

.painel__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}

.painel__titulo { margin: 0 0 4px; font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.painel__subtitulo { margin: 0; color: var(--texto-suave); font-size: .95rem; }

.botao-secundario {
  padding: 10px 20px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  color: var(--texto);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
}

.botao-secundario:hover { background: var(--fundo-suave); }

.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}

.indicador {
  padding: 20px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
}

.indicador--sucesso { border-color: #bbf7d0; background: #f0fdf4; }

.indicador__numero {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--cor-primaria);
  line-height: 1.1;
}

.indicador__rotulo { display: block; margin-top: 5px; font-size: .82rem; color: var(--texto-suave); }

.bloco {
  padding: 26px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: 24px;
}

.bloco__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.bloco__titulo { margin: 0 0 10px; font-size: 1.15rem; font-weight: 700; }
.bloco__cabecalho .bloco__titulo { margin: 0; }
.bloco__texto { margin: 0 0 18px; color: var(--texto-suave); font-size: .93rem; }

.upload { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.upload__arquivo {
  flex: 1;
  min-width: 220px;
  padding: 11px;
  border: 1px dashed var(--borda);
  border-radius: 9px;
  font-family: inherit;
  font-size: .9rem;
  background: var(--fundo-suave);
}

.upload__botao {
  padding: 12px 28px;
  border: 0;
  border-radius: 9px;
  background: var(--cor-acento);
  color: #23180a;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
}

.upload__botao:hover { filter: brightness(1.06); }

.relatorio { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--borda); }

.relatorio__titulo { margin: 0 0 14px; font-size: .98rem; font-weight: 700; }

.relatorio__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: .9rem;
  color: var(--texto-suave);
}

.relatorio__numeros .ok   { color: var(--cor-sucesso); }
.relatorio__numeros .aten { color: #b45309; }
.relatorio__numeros .err  { color: var(--cor-erro); }

.relatorio__gerados { margin: 14px 0 0; font-size: .88rem; color: var(--texto-suave); }

.pesquisa { display: flex; gap: 8px; align-items: center; }

.pesquisa input {
  padding: 10px 13px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  font-family: inherit;
  font-size: .92rem;
  min-width: 240px;
}

.pesquisa button {
  padding: 10px 18px;
  border: 0;
  border-radius: 9px;
  background: var(--cor-primaria);
  color: #fff;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}

.pesquisa__limpar { font-size: .85rem; color: var(--texto-suave); }

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

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

.tabela th {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 2px solid var(--borda);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}

.tabela td { padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }

.tabela tbody tr:hover { background: var(--fundo-suave); }

.tabela code { font-family: ui-monospace, Consolas, monospace; font-size: .86rem; }

.tabela--erros { margin-top: 16px; }
.tabela--erros td { font-size: .86rem; }

.link-tabela { color: var(--cor-azul); text-decoration: none; font-weight: 600; }
.link-tabela:hover { text-decoration: underline; }

.resumo--admin { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.resumo--admin dt { color: var(--texto-suave); }
.resumo--admin dd { color: var(--texto); }

/* ------------------------------------------------------------- Responsivo */

@media (max-width: 720px) {
  .resultado { padding: 40px 0 34px; }
  .pesquisa { width: 100%; }
  .pesquisa input { min-width: 0; flex: 1; }
  .bloco { padding: 20px; }
  .vazio__busca { flex-direction: column; }
  .vazio__botao { width: 100%; }
}

/* Aviso no fim da timeline publica, quando ainda ha etapas por vir */
.aguardando {
  margin: 4px 0 0 40px;
  padding: 14px 18px;
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-suave);
  color: var(--texto-suave);
  font-size: .9rem;
}

/* ==========================================================================
   Pagina institucional (Sobre nos) e rodape
   ========================================================================== */

.cabecalho-pagina {
  background: linear-gradient(160deg, var(--cor-primaria) 0%, var(--cor-primaria-clara) 100%);
  color: #fff;
  padding: 64px 0 58px;
}

.cabecalho-pagina__rotulo {
  margin: 0 0 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cor-acento);
}

.cabecalho-pagina__titulo {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
}

.cabecalho-pagina__texto {
  margin: 0;
  max-width: 620px;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .82);
}

.texto-duplo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 44px;
}

.texto-duplo .secao__titulo { font-size: 1.3rem; }
.texto-duplo .secao__texto { margin-bottom: 14px; max-width: none; }

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.numero {
  padding: 26px 22px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  text-align: center;
}

.numero__valor {
  display: block;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--cor-primaria);
  line-height: 1.05;
}

.numero__rotulo {
  display: block;
  margin-top: 8px;
  font-size: .85rem;
  color: var(--texto-suave);
}

@media (max-width: 720px) {
  .cabecalho-pagina { padding: 46px 0 42px; }
  .texto-duplo { gap: 30px; }
}