/* cards.css — cartoes, cartoes de estatistica, e os blocos de empresa,
 * passageiro e alerta que aparecem dentro deles.
 *
 * Recorte das linhas 70-77, 84-99 e da parte de .stats-grid da media query 161.
 */

/* O cartao era mais CLARO que o fundo (bg3 sobre um fundo quase preto). Num
 * tema claro isso inverte, e a primeira versao usou #F5F8F8.
 *
 * TROCADO PARA BRANCO por medicao: os rotulos dos campos usam #477B80, que da
 * 4,76:1 sobre branco mas cai para 4,46:1 sobre #F5F8F8 -- reprova AA. A
 * tabela 4.5 do manual calcula os contrastes SO contra branco, e por isso nao
 * enxerga esse caso: o mesmo neutro que ela aprova como rotulo reprova sobre
 * o fundo de card que ela propria define.
 *
 * A secao 4.3 resolve sozinha, na propria redacao: "#F5F8F8 fundo de secao,
 * cards de DESTAQUE". Destaque, nao todo card. Card comum e branco com borda,
 * o que conserta o contraste sem inventar cor nenhuma -- e ainda aproxima os
 * ~70% de branco que a secao 4.4 exige. */
.card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px;
  transition: all .2s; cursor: pointer;
}
/* Sombra era preto a 40%. Sobre branco, petroleo a 9%. */
.card:hover {
  border-color: var(--border2); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 72, 78, .09);
}
.card-alert { border-color: rgba(153, 92, 0, .45) !important }

/* ------------------------------------------------------------ estatisticas */

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px }
.stat-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px;
  position: relative; overflow: hidden;
}
.stat-card::after {
  content: attr(data-icon); position: absolute; right: -8px; top: -8px;
  font-size: 72px; opacity: .05; pointer-events: none;
}
.stat-label {
  font-size: 11px; color: var(--text3); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 10px; font-weight: 600;
}
.stat-value { font-family: var(--fonte-titulo); font-size: 44px; font-weight: 700; line-height: 1 }

/* ---------------------------------------------------------------- empresa */

.co-name { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 2px }
.co-cnpj { font-size: 11.5px; color: var(--text3) }
.co-badge {
  background: var(--bg2); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 20px; color: var(--text2); font-size: 11px;
}
/* Fornecedor preferencial. --orange (#995C00) sobre o --bg2 do .co-badge da
 * 5,06:1 -- passa os 4,5:1 da WCAG 1.4.3 mesmo nos 11px. O tom da borda e o
 * mesmo ja usado em .card-alert, logo abaixo: nenhuma cor nova entra.
 *
 * O selo carrega a PALAVRA "Preferencial". A cor reforca, nao informa sozinha
 * -- e a regra da WCAG 1.4.1 que tokens.css registra na secao das cores, e o
 * motivo de este selo ser texto e nao so um icone colorido. */
.co-badge-pref { color: var(--orange); border-color: rgba(153, 92, 0, .45) }
/* FASE 2 — .co-grid virou <dl>, e os pares de dentro viraram <dt>/<dd>.
 *
 * Antes era <label> + <span>. E rotulo de dado somente-leitura: nao ha campo
 * nenhum ao lado, entao <label> estava errado -- e acrescentar for= seria
 * errado tambem, porque for tem que apontar para um controle de formulario, e
 * aqui nao existe controle. O conserto nao era ligar o rotulo; era parar de
 * chamar aquilo de rotulo.
 *
 * <dl> e exatamente a estrutura de "nome: valor". O leitor de tela passa a
 * anunciar termo e definicao como um par, em vez de dois textos soltos.
 *
 * O <div class="co-field"> em volta de cada par continua: o HTML permite
 * agrupar dt/dd em <div> dentro de <dl>, e e o que segura o layout em grade.
 *
 * As duas margens abaixo apagam o padrao do navegador -- <dl> traz margem
 * vertical e <dd> traz 40px de recuo a esquerda, que quebrariam a grade.
 */
.co-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 14px 0 0;
}
.co-field dt {
  font-size: 10px; color: var(--text3); text-transform: uppercase;
  letter-spacing: .8px; display: block; margin-bottom: 3px;
}
.co-field dd { font-size: 12.5px; color: var(--text2); font-weight: 500; margin: 0 }

/* ------------------------------------------------------------- passageiro */

.pass-name { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 700; color: var(--text) }
.pass-role { font-size: 12px; color: var(--text3); margin-top: 2px }

/* TAREFA 1.11 — usava o hex solto #2a4080, fora de qualquer variavel.
 * Sobre o fundo do cartao (--bg3) dava 1,90:1 em texto de 11px: o pior
 * contraste do sistema inteiro, reprovando TODOS os niveis da WCAG.
 * Com --petroleo-text sao 5,49:1. */
.pass-company { font-size: 11px; color: var(--petroleo-text); margin-top: 1px }

.doc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; border: 1px solid;
  font-size: 10px; font-weight: 600; background: var(--bg2);
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px }
.tag {
  background: var(--bg2); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 20px; font-size: 11px; color: var(--text3);
}

/* ----------------------------------------------------------------- alerta */

.alert-item {
  background: var(--bg3); border-radius: 10px; padding: 13px 18px;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; border-left: 3px solid;
}
.alert-name { font-size: 13.5px; font-weight: 600; color: var(--text) }
.alert-doc { font-size: 12px; color: var(--text3); margin-top: 2px }
.alert-days { font-size: 13px; font-weight: 700 }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: 1fr 1fr }
}