/* ==========================================================================
   PORTAL DO COLABORADOR — Design system
   Herda "The Audit Ledger", o design system do PRJ-01_AuditFlow (produto
   principal do ecossistema, servido em central.giulia-ai.com): navy em três
   camadas, um único accent (teal, "verificado/ativo"), Plus Jakarta Sans +
   DM Mono maiúsculo tracked para dado técnico. Fonte: DESIGN.md do AuditFlow.
   ========================================================================== */

:root {
  --bg:        #0B1829;  /* ledger-navy — fundo base, nunca branco */
  --painel:    #0e1e35;  /* ledger-surface — cards, listas */
  --painel-2:  #162844;  /* ledger-elevated — inputs, hover */
  --linha:     #1e3454;  /* ledger-rule — toda borda/linha divisória */
  --texto:     #e8f0ff;  /* ledger-ink — texto primário */
  --mudo:      #7a99c4;  /* faded-ink — texto secundário */
  --fantasma:  #3d5a85;  /* ghost-ink — placeholder, texto quase invisível */
  /* --marca é o único token que a empresa troca no painel (white-label).
     Por padrão é o Verified Teal do ecossistema; tudo o mais é fixo. */
  --marca:       #1D9E75;  /* verified-teal — accent único: ação primária, ativo/verificado */
  --marca-clara: #0F7A5C;  /* variante escurecida, contraste seguro no tema claro */
  --marca-fundo: color-mix(in srgb, var(--marca) 12%, transparent);
  --marca-borda: color-mix(in srgb, var(--marca) 20%, transparent);
  --aviso:       #f59e0b;  /* caution-amber — status: pendente/atenção, nunca decoração */
  --aviso-fundo: color-mix(in srgb, var(--aviso) 12%, transparent);
  --aviso-borda: color-mix(in srgb, var(--aviso) 20%, transparent);
  --verde:     #10b981;  /* approved-green — status ok/conforme */
  --vermelho:  #ef4444;  /* violation-red — status avaria/erro */
  --raio:    10px;         /* botão, input */
  --raio-lg: 16px;         /* card, container */
  --raio-pill: 20px;       /* badge */
  --telemetria-bg: #070d18; /* bezel do painel — uma camada abaixo do navy, escuro nos dois temas */
}

/* ---- Tema claro ----------------------------------------------------------
   Mesma família de cor, papéis invertidos: o navy do tema escuro vira o
   texto do modo claro, o branco-papel vira o fundo. A tira de telemetria
   NÃO muda — como o bezel de um painel de instrumentos real, que continua
   escuro independente da luz do dia. */
[data-tema="claro"] {
  --bg:        #F5F2EC;
  --painel:    #FFFFFF;
  --painel-2:  #ECE9E2;
  --linha:     #DEDAD0;
  --texto:     #1A2333;
  --mudo:      #5B6B85;
  --marca:       var(--marca-clara);
  --marca-fundo: color-mix(in srgb, var(--marca) 8%, transparent);
  --marca-borda: color-mix(in srgb, var(--marca) 32%, transparent);
  --aviso:       #B45309;
  --aviso-fundo: color-mix(in srgb, var(--aviso) 8%, transparent);
  --aviso-borda: color-mix(in srgb, var(--aviso) 32%, transparent);
  --verde:     #059669;
  --vermelho:  #DC2626;
}
/* Botão de ação continua com teal vivo — funciona em ambos os temas
   porque a base é sempre texto navy sobre fundo teal claro/vivo (contraste
   invertido, nunca branco-sobre-cor — regra do button-primary). */
/* :not() para o teal não vazar em botões que não são de ação — o "voltar"
   é um link disfarçado e o desabilitado precisa continuar apagado. */
[data-tema="claro"] button:not(.voltar):not(:disabled):not(.btn-perigo):not(.tri-estado button),
[data-tema="claro"] .btn { background: var(--marca); color: #041B14; }

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

body {
  background: var(--bg);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  padding-bottom: 74px;
  -webkit-font-smoothing: antialiased;
}

/* ---- Tira de telemetria (elemento de assinatura) ------------------------
   Presente no topo de toda tela: identifica o veículo em uso (contexto vindo
   da leitura NFC) como um painel real de caminhão — placa, status de conexão. */
.telemetria {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--telemetria-bg);
  border-bottom: 1px solid var(--linha);
  padding: 9px 16px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .66rem;
  letter-spacing: .02em;
  color: var(--mudo);
}
.telemetria .placa { color: var(--texto); font-weight: 600; }
.telemetria .status { display: flex; align-items: center; gap: 6px; }
.telemetria .ponto {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--verde); box-shadow: 0 0 6px var(--verde);
}
.telemetria .alterna-tema {
  background: none; border: 1px solid var(--linha); color: var(--mudo);
  border-radius: var(--raio); padding: 3px 8px; font-size: .6rem;
  font-family: inherit; cursor: pointer; letter-spacing: .04em;
}
.telemetria .alterna-tema:hover { color: var(--texto); }

/* ---- Cabeçalho de marca --------------------------------------------- */
header#topo {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--linha);
}
header#topo .eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--marca);
}
header#topo h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 1.35rem;
  letter-spacing: .005em; margin-top: 3px;
}

.tela { padding: 16px; }

.mono { font-family: 'DM Mono', monospace; }

/* ---- Menu principal — lista de navegação, neutra em repouso ------------
   Nenhum item do menu é "ativo" na home — o accent teal fica reservado
   pra ação primária e pro estado ativo do menu inferior (One Accent Rule). */
.menu-principal { list-style: none; }
.menu-principal li a,
.menu-principal li {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 10px;
  border-bottom: 1px solid var(--linha);
  color: var(--texto); text-decoration: none;
}
.menu-principal li:first-child { border-top: 1px solid var(--linha); }
.menu-principal .codigo {
  font-family: 'DM Mono', monospace;
  font-size: .68rem; font-weight: 700; color: var(--mudo);
  background: var(--painel-2); border: 1px solid var(--linha);
  border-radius: var(--raio);
  width: 34px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.menu-principal .titulo { font-size: .88rem; font-weight: 600; letter-spacing: .01em; }
.menu-principal .seta { margin-left: auto; color: var(--mudo); font-size: .85rem; }

/* ---- Badge de veículo (contexto NFC) ---------------------------------- */
.badge-veiculo {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--marca-fundo); border: 1px solid var(--marca-borda);
  border-radius: var(--raio); padding: 7px 12px; margin-bottom: 14px;
  font-family: 'DM Mono', monospace; font-size: .7rem; color: var(--marca);
}

/* ---- Formulários -------------------------------------------------------*/
.campo { margin-bottom: 14px; }
.campo label {
  display: block; font-size: .66rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mudo);
  margin-bottom: 6px;
}
input, .input-fake {
  width: 100%; background: var(--painel-2); color: var(--texto);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 13px 14px; font-size: .88rem; font-family: inherit;
}
input::placeholder { color: var(--fantasma); }
input:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 10%, transparent);
}
.input-fake { color: var(--mudo); }

button, .btn {
  width: 100%; padding: 14px; border: 0; border-radius: var(--raio);
  background: var(--marca); color: #041B14; font-size: .88rem; font-weight: 700;
  letter-spacing: .02em; cursor: pointer; font-family: inherit;
  transition: opacity .15s;
}
button:hover:not(:disabled), .btn:hover { opacity: .9; }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.link-secundario { text-align: center; margin-top: 14px; font-size: .74rem; color: var(--mudo); }

/* ---- Avisos ------------------------------------------------------------*/
.aviso {
  background: var(--painel); border: 1px solid var(--linha);
  border-left: 3px solid var(--marca);
  border-radius: var(--raio-lg); padding: 13px 14px; margin-bottom: 9px;
}
.aviso.lido { border-left-color: var(--linha); opacity: .6; }
.aviso h3 { font-size: .84rem; font-weight: 600; }
.aviso p { font-size: .74rem; color: var(--mudo); margin-top: 5px; line-height: 1.5; }
.aviso time {
  display: block; margin-top: 8px; font-family: 'DM Mono', monospace;
  font-size: .62rem; color: var(--mudo);
}

/* ---- Menu inferior -------------------------------------------------- */
#menu-inferior {
  position: fixed; bottom: 0; left: 0; right: 0; display: flex;
  background: var(--telemetria-bg); border-top: 1px solid var(--linha);
}
#menu-inferior button {
  flex: 1; background: none; color: var(--mudo); border-radius: 0;
  padding: 11px 4px 14px; font-size: .64rem; font-weight: 600;
  letter-spacing: .02em; display: flex; flex-direction: column; gap: 5px; align-items: center;
}
#menu-inferior button.ativo { color: var(--marca); }

/* Acessibilidade: respeita preferência de menos movimento */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Componentes das telas de módulo
   ========================================================================== */

.carregando { padding: 40px 18px; color: var(--mudo); font-size: .8rem; text-align: center; }
.vazio { padding: 28px 4px; color: var(--mudo); font-size: .82rem; text-align: center; }
.titulo-tela {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.25rem; font-weight: 800;
  letter-spacing: 0; margin-bottom: 4px;
}
.subtitulo {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mudo); margin: 22px 0 8px; font-family: 'DM Mono', monospace;
}
.voltar, [data-tema="claro"] .voltar {
  background: none; border: 0; color: var(--mudo); font-size: .76rem;
  padding: 0 0 10px; width: auto; font-weight: 500;
}

/* Cabeçalho da home */
.saudacao { margin-bottom: 14px; }
.saudacao strong { display: block; font-size: 1rem; }
.saudacao span { font-size: .72rem; color: var(--mudo); }
.saudacao + .badge-veiculo { margin-top: 0; }

.alerta-pendencia {
  display: block; padding: 12px 14px; margin-bottom: 14px; text-decoration: none;
  background: var(--aviso-fundo); border: 1px solid var(--aviso-borda);
  border-left: 3px solid var(--aviso); border-radius: var(--raio-lg); color: var(--texto);
}
.alerta-pendencia strong { display: block; font-size: .8rem; color: var(--aviso); }
.alerta-pendencia span { font-size: .7rem; color: var(--mudo); }

.menu-principal .icone { width: 30px; height: 30px; border-radius: var(--raio); object-fit: cover; }

/* Listas */
.lista-cartoes { list-style: none; display: grid; gap: 8px; }
.lista-cartoes > li, .lista-cartoes > li > a {
  display: block; text-decoration: none; color: var(--texto);
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: var(--raio-lg); padding: 12px 14px;
}
.lista-cartoes > li > a { background: none; border: 0; padding: 0; }
.lista-cartoes > li.proibido { border-left: 3px solid var(--vermelho); }
.linha-topo { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.linha-topo .titulo { font-size: .88rem; font-weight: 600; }
.linha-meta {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
  font-family: 'DM Mono', monospace; font-size: .64rem; color: var(--mudo);
}
.lista-simples { list-style: none; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.lista-simples li, .lista-simples li a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--painel); padding: 10px 12px; font-size: .78rem;
  color: var(--texto); text-decoration: none;
}
.lista-simples li a { width: 100%; padding: 0; background: none; }

/* Selos de status — pill, fundo semântico a 12% + borda a 20%, fonte DM Mono
   maiúsculo tracked (The Stamp Rule). Cor sempre carrega status real. */
.selo {
  font-family: 'DM Mono', monospace; font-size: .58rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px;
  border-radius: var(--raio-pill); border: 1px solid; white-space: nowrap;
}
.selo.ok       { color: var(--verde);   border-color: color-mix(in srgb, var(--verde) 20%, transparent);   background: color-mix(in srgb, var(--verde) 12%, transparent); }
.selo.pendente,
.selo.critico  { color: var(--aviso);   border-color: var(--aviso-borda);  background: var(--aviso-fundo); }
.selo.avaria   { color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 20%, transparent); background: color-mix(in srgb, var(--vermelho) 12%, transparent); }
.selo.foto     { color: var(--mudo);    border-color: var(--linha); }
.selo.grande   { display: inline-block; font-size: .72rem; padding: 8px 14px; }

/* Documento */
.texto {
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio-lg);
  padding: 14px; margin: 12px 0; font-size: .84rem; line-height: 1.6;
}
.player { margin: 12px 0; }
.player video { width: 100%; background: #000; border-radius: var(--raio-lg); display: block; }
.barra-video { height: 3px; background: var(--linha); margin-top: 2px; }
.barra-video .preenchida { height: 100%; background: var(--marca); transition: width .3s; }
.player small { display: block; margin-top: 6px; font-size: .66rem; color: var(--mudo); }
.dica { display: block; margin-top: 6px; font-size: .66rem; color: var(--mudo); text-align: center; }

/* Checklist */
.itens-checklist { list-style: none; display: grid; gap: 8px; margin: 14px 0; }
.itens-checklist li {
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: var(--raio-lg); padding: 12px;
}
.itens-checklist li.com-avaria { border-color: var(--vermelho); }
.itens-checklist .descricao {
  font-size: .82rem; margin-bottom: 8px; display: flex;
  flex-wrap: wrap; gap: 6px; align-items: center;
}
.tri-estado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tri-estado button {
  padding: 11px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  background: var(--painel-2); color: var(--mudo); border: 1px solid var(--linha);
}
.tri-estado button.marcado.ok     { background: var(--verde);    color: #04140A; border-color: var(--verde); }
.tri-estado button.marcado.avaria { background: var(--vermelho); color: #1A0505; border-color: var(--vermelho); }
.tri-estado button.marcado.na     { background: var(--painel-2); color: var(--texto); border-color: var(--mudo); }
.itens-checklist .observacao, .itens-checklist .resposta { margin-top: 8px; }
.campo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Filtros e busca */
.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
select, textarea {
  width: 100%; background: var(--painel-2); color: var(--texto);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 12px; font-size: .84rem; font-family: inherit;
}
.busca { margin-bottom: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tags em {
  font-style: normal; font-size: .62rem; padding: 2px 6px;
  background: var(--painel-2); border: 1px solid var(--linha); border-radius: var(--raio);
  color: var(--mudo);
}
.obs { font-size: .74rem; color: var(--mudo); margin-top: 8px; }
.acoes { display: flex; gap: 8px; margin-top: 10px; }

/* Telefones */
.bloco-emergencia { border: 1px solid var(--vermelho); border-radius: var(--raio-lg); padding: 10px; margin-bottom: 8px; }
.bloco-emergencia h3 {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vermelho); margin-bottom: 8px; font-family: 'DM Mono', monospace;
}
.telefone {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio-lg);
  padding: 12px 14px; margin-bottom: 6px; text-decoration: none; color: var(--texto);
}
.telefone .titulo { display: block; font-size: .84rem; font-weight: 600; }
.telefone .numero { font-family: 'DM Mono', monospace; font-size: .9rem; color: var(--marca); }

/* Pontos críticos do rotograma — ícone em âmbar: é sinalização de atenção
   na via, status real de cautela, não ação/marca (Status-Only Color Rule). */
.pontos-criticos { list-style: none; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.pontos-criticos li {
  display: grid; grid-template-columns: 62px 24px 1fr; gap: 8px; align-items: start;
  background: var(--painel); padding: 12px;
}
.pontos-criticos .km { font-family: 'DM Mono', monospace; font-size: .68rem; color: var(--mudo); }
.pontos-criticos .icone { font-size: .9rem; color: var(--aviso); text-align: center; }
.pontos-criticos strong { font-size: .8rem; font-weight: 600; }
.pontos-criticos .tipo-risco_roubo, .pontos-criticos .tipo-proibido_parar { border-left: 3px solid var(--vermelho); }

/* Formulários e retorno */
.marcador { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: .74rem; color: var(--mudo); }
.marcador input { width: auto; margin-top: 2px; }
.erro, .sucesso {
  padding: 10px 12px; border-radius: var(--raio); font-size: .78rem;
  margin: 10px 0; border: 1px solid;
}
.erro    { color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 20%, transparent); background: color-mix(in srgb, var(--vermelho) 8%, transparent); }
.sucesso { color: var(--verde);    border-color: color-mix(in srgb, var(--verde) 20%, transparent);    background: color-mix(in srgb, var(--verde) 8%, transparent); }
.resposta { margin-top: 8px; padding: 8px 10px; background: var(--painel-2); border-radius: var(--raio); font-size: .76rem; }
.btn-secundario {
  display: inline-block; padding: 10px 14px; margin-top: 10px;
  background: var(--painel-2); color: var(--texto); border: 1px solid var(--linha);
  border-radius: var(--raio); font-size: .76rem; font-weight: 600; text-decoration: none; text-align: center;
}
.btn-perigo { background: none; border: 1px solid var(--vermelho); color: var(--vermelho); margin-top: 20px; }

/* Login e perfil */
.tela-login { padding-top: 30px; }
.marca-login { text-align: center; margin-bottom: 26px; }
.marca-login .sigla {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2.4rem; font-weight: 800;
  color: var(--marca); letter-spacing: 0;
}
.ficha { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: 16px; }
.ficha h2 { font-size: 1.05rem; margin-bottom: 12px; }
.ficha dl { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: .8rem; }
.ficha dt { color: var(--mudo); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-family: 'DM Mono', monospace; }
.ficha dd small { color: var(--mudo); }

/* ---- Largura de cabine ---------------------------------------------------
   O app é feito para a mão do colaborador. No desktop (painel de gestão,
   demonstração, navegador do escritório) a coluna fica travada na mesma
   largura de celular em vez de esticar a linha de leitura. */
.telemetria, #topo, #app, #menu-inferior > * { max-width: 520px; margin-inline: auto; }
#menu-inferior { justify-content: center; }
#menu-inferior > * { flex: 1; max-width: 130px; }
@media (min-width: 560px) {
  body { background: color-mix(in srgb, var(--bg) 88%, #000); }
  #app { background: var(--bg); min-height: 60vh; }
}

/* Botão desabilitado precisa parecer desabilitado — senão o colaborador
   fica tocando num aceite que não vai responder. */
button:disabled, .btn:disabled {
  background: var(--painel-2); color: var(--mudo);
  border: 1px solid var(--linha); cursor: not-allowed;
}
[data-tema="claro"] button:disabled { background: var(--painel-2); color: var(--mudo); }
.player-vazio {
  background: var(--painel-2); border: 1px dashed var(--linha); border-radius: var(--raio-lg);
  padding: 26px 14px; text-align: center;
}
.player-vazio strong { display: block; font-size: .82rem; }
.player-vazio small { color: var(--mudo); font-size: .66rem; }