/* Camada da app. O padrão visual mora em `fb-consult.css`, que é importado antes
   e não deve ser editado aqui — o que segue é só o que a tela de conferência tem
   de próprio: o cartão do ticket, as críticas e os estados da revisão. */

.lateral .logo { height: auto; width: 148px; }

/* --- Entrada e troca de senha --- */
.acesso {
  min-height: 100vh; padding: 40px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
}
.acesso-logo { width: 168px; height: auto; }
.acesso-card { width: 100%; max-width: 380px; }
.acesso-titulo { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.acesso-sub { margin: 4px 0 22px; }
.acesso-espaco { margin-top: 16px; }
.acesso-botao { width: 100%; margin-top: 22px; justify-content: center; }

.lateral-conta .linkbtn { margin-left: auto; flex: none; }


.card + .card, .card + .destaque, section[hidden] + .card { margin-top: 12px; }
.row.separa { margin-top: 14px; }
/* Botão em linha com campo: desce à mesma base do input, que tem rótulo em cima. */
.alinha-botao { display: flex; align-items: flex-end; padding-bottom: 1px; }
.alinha-botao .sub { padding-bottom: 12px; }

.destaque-n.peq { font-size: 34px; }
.destaque-un { font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, .55); }
.destaque-dir { text-align: right; }
.destaque-dir .destaque-linha { justify-content: flex-end; gap: 6px; }
.destaque-frase b { color: #fff; }

.barra-acoes { display: flex; align-items: center; gap: 16px; margin: 26px 0 12px; }
.barra-acoes .secao { margin: 0; }
.barra-acoes .btn { margin-left: auto; }

input[type=file] { font-size: 13.5px; font-family: inherit; color: var(--muted-2); }

.btn.recusa { background: var(--card); color: var(--erro); border: 1px solid rgba(192, 57, 43, .35); }
.btn.recusa:hover { background: rgba(192, 57, 43, .06); }

/* --- Cartão do ticket --- */
.ticket {
  display: grid; grid-template-columns: 186px 1fr;
  margin-bottom: 12px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.ticket .foto { background: var(--escuro-1); display: flex; align-items: center; justify-content: center; }
.ticket .foto img { width: 100%; height: 100%; object-fit: cover; }
.ticket .foto .sem {
  padding: 14px; text-align: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: rgba(255, 255, 255, .5);
}
.ticket .corpo { padding: 18px 20px; min-width: 0; }
.ticket .cabeca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ticket .numero { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }

.pill.pendente   { background: var(--card-2); color: var(--muted-2); }
.pill.confirmado { background: rgba(22, 179, 100, .13); color: var(--verde-2); }
.pill.refazer    { background: rgba(224, 154, 30, .17); color: var(--atencao); }

.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 11px 18px; margin-bottom: 12px; }
.campos > * { min-width: 0; }
.campo .r { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.campo .v { margin-top: 2px; font-size: 14px; }

.criticas { list-style: none; margin: 10px 0 14px; }
.criticas li {
  margin-bottom: 6px; padding: 9px 13px; border-radius: var(--radius-sm);
  background: rgba(192, 57, 43, .07); border: 1px solid rgba(192, 57, 43, .22);
  font-size: 13px; color: var(--erro);
}
.criticas li b { font-weight: 800; }

.acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acoes .motivo { flex: 1 1 260px; width: auto; min-width: 220px; }

details.cru { margin-top: 14px; }
details.cru summary {
  cursor: pointer;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
}
details.cru pre {
  margin-top: 9px; padding: 12px; max-height: 220px; overflow: auto; white-space: pre-wrap;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12.5px; line-height: 1.55; color: var(--muted-2);
}

@media (max-width: 720px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket .foto { height: 190px; }
}