:root {
  --azul: #1f4e79;
  --azul-escuro: #173c5e;
  --fundo: #f4f6f8;
  --borda: #d9dee4;
  --texto: #1f2933;
  --suave: #61707f;
  --erro: #b42318;
  --laranja: #c2410c;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* o atributo hidden vale mesmo com display definido na classe */
b, strong, th { font-weight: 500; }   /* negrito mais leve em toda a tela */
h1, h2, h3 { font-weight: 600; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--texto); background: var(--fundo); }
button { font: inherit; cursor: pointer; }
input, select { font: inherit; }

/* login */
.login-pagina { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 32px; width: 100%; max-width: 380px; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.login-card h1 { margin: 0 0 4px; font-size: 1.4rem; }
.login-card p { margin: 0 0 24px; color: var(--suave); font-size: .9rem; }
.login-card label { display: block; font-size: .85rem; margin: 0 0 6px; color: var(--suave); }
.login-card input { width: 100%; padding: 11px 12px; border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 16px; }
.login-card input:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.btn-primario { width: 100%; padding: 12px; background: var(--azul); color: #fff; border: none; border-radius: 8px; font-weight: 500; }
.btn-primario:hover { background: var(--azul-escuro); }
.btn-primario:disabled { opacity: .6; cursor: wait; }
.msg-erro { color: var(--erro); font-size: .9rem; min-height: 1.2em; margin-top: 12px; }

/* app */
.topo { display: flex; gap: 10px; align-items: center; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.marca { font-weight: 600; color: var(--azul); margin-right: 8px; white-space: nowrap; }
.busca { flex: 1; min-width: 240px; display: flex; gap: 8px; }
.busca input { flex: 1; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; }
.busca button { padding: 10px 18px; background: var(--azul); color: #fff; border: none; border-radius: 8px; font-weight: 500; }
.chip { padding: 9px 14px; background: #fff; border: 1px solid var(--borda); border-radius: 8px; font-weight: 500; white-space: nowrap; }
.chip select { border: none; background: transparent; font-weight: 500; }
.chip-usuario { border-color: var(--azul); color: var(--azul); }
.conteudo { padding: 48px 16px; text-align: center; color: var(--suave); }
.conteudo h2 { color: var(--texto); font-size: 1.05rem; }
.conteudo strong { color: var(--texto); }

/* resultados */
.resultados { max-width: 1240px; margin: 0 auto; padding: 16px; text-align: left; }
.resumo { color: var(--suave); font-size: .85rem; margin: 0 0 12px; }
.aviso { background: #fff7e6; border: 1px solid #f5d38a; color: #7a5200; padding: 12px 14px; border-radius: 8px; }
.peca { margin-bottom: 18px; }
.card { background: #fff; border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 8px; }
.card-corpo { display: grid; grid-template-columns: 120px 1fr 210px; gap: 16px; padding: 14px; }
.foto { width: 120px; height: 120px; border: 1px solid var(--borda); border-radius: 8px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .72rem; color: var(--suave); background: #fafbfc; overflow: hidden; }
.foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.titulo { font-size: 1.02rem; margin: 0 0 6px; font-weight: 400; }
.titulo b { font-weight: 600; }  /* descrição: seminegrito; complemento: normal */
.dados { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; font-size: .86rem; }
.dados span { color: var(--suave); }
.dados b { font-weight: 500; }
.obs { font-size: .86rem; margin: -2px 0 6px; color: var(--texto); }
.obs .dif { font-weight: 500; }
.dados .dif, .titulo .dif, .aplicacao .dif, .obs .dif { background: #fff3c4; font-weight: 500; padding: 0 2px; border-radius: 3px; }
.aplicacao { margin-top: 8px; background: #eef4fa; border-radius: 6px; padding: 6px 10px; font-size: .84rem; }
.aplicacao ul { margin: 2px 0 0; padding-left: 0; list-style: none; }
.aplicacao li.bateu, .aplic-linha.bateu { font-weight: 600; }  /* linha que bateu com o veículo */
.aplic-mais { margin-left: 6px; }
.aplicacao { position: relative; }
button.aplic-mais { border: none; background: none; padding: 0; cursor: pointer; font: inherit; font-size: .78rem; color: var(--azul); text-decoration: underline; }
.aplic-unica { color: var(--suave); font-size: .76rem; font-style: italic; }
.aplic-todas { display: none; position: absolute; left: 0; top: 100%; z-index: 20; margin-top: 4px; min-width: 100%; max-width: 640px; max-height: 320px; overflow: auto;
  background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(15,23,42,.15); font-size: .84rem; }
.aplicacao.aberta .aplic-todas { display: block; }
.aplicacao.dif-borda { box-shadow: inset 3px 0 0 #e0b400; }
.aplic-mais { display: inline-block; margin-top: 2px; color: var(--azul); font-size: .78rem; }
.precos { text-align: right; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.precos .tabela { color: var(--suave); font-size: .82rem; }
.precos .desconto { color: var(--laranja); font-size: 1.5rem; font-weight: 600; }
.precos small { color: var(--suave); font-size: .72rem; }
.card-rodape { border-top: 1px solid var(--borda); padding: 8px 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: .86rem; }
.estoque-loja.minha { font-weight: 600; color: var(--texto); }  /* loja do usuário (escopo) */
.estoque-loja small { color: var(--suave); font-weight: 400; }
.zerado { color: var(--erro); font-weight: 500; }
.btn-sec { background: #fff; border: 1px solid var(--borda); border-radius: 6px; padding: 5px 10px; font-size: .82rem; }
.btn-sec:hover { border-color: var(--azul); color: var(--azul); }
.btn-outras { margin: 0 0 8px 12px; }
.outras { margin-left: 24px; }
dialog { border: none; border-radius: 12px; padding: 0; width: min(1100px, 96vw); max-height: 88vh; }
dialog::backdrop { background: rgba(15,23,42,.45); }
.dialog-topo { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: #fff; }
.dialog-corpo { padding: 14px; background: var(--fundo); }
table.pedidos { width: 100%; border-collapse: collapse; background: #fff; font-size: .86rem; }
table.pedidos th, table.pedidos td { padding: 7px 10px; border-bottom: 1px solid var(--borda); text-align: left; }
@media (max-width: 760px) {
  .card-corpo { grid-template-columns: 1fr; }
  .foto { width: 100%; height: 140px; }
  .precos { text-align: left; }
  .dados { grid-template-columns: 1fr; }
}

/* veículo em atendimento */
.atendendo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--borda); font-size: .82rem; color: var(--suave); }
.atendendo .rotulo { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.chip-veiculo { display: inline-flex; align-items: center; gap: 6px; background: #eef4fa; color: var(--azul); font-weight: 600; padding: 5px 6px 5px 12px; border-radius: 6px; }
.chip-veiculo button { border: none; background: none; color: var(--azul); font-size: 1rem; line-height: 1; padding: 0 4px; }
.interpretacao { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.interpretacao span { background: #fff; border: 1px solid var(--borda); border-radius: 6px; padding: 6px 10px; font-size: .78rem; color: var(--suave); text-transform: uppercase; }
.interpretacao b { color: var(--texto); margin-left: 4px; }
.sem-aplic { margin-top: 8px; font-size: .8rem; color: var(--suave); font-style: italic; }

/* quadro de descrições de peça */
.quadro-pecas { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 14px; margin-top: 18px; }
.quadro-pecas.escolha { margin-top: 0; }
.quadro-pecas h3 { margin: 0 0 10px; font-size: .95rem; }
.filtro-pecas { width: 100%; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 10px; }
.lista-chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 260px; overflow: auto; }
.escolha .lista-chips { max-height: none; }
.chip-peca { background: #fff; border: 1px solid var(--borda); border-radius: 6px; padding: 7px 10px; font-size: .8rem; color: var(--texto); text-align: left; }
.chip-peca:hover { border-color: var(--azul); color: var(--azul); background: #eef4fa; }
.chip-peca small { color: var(--suave); margin-left: 4px; }
.escolha .chip-peca { padding: 12px 14px; font-size: .88rem; font-weight: 500; }

/* compatibilidade com o veículo */
.selo { display: inline-block; font-size: .68rem; font-weight: 500; padding: 2px 7px; border-radius: 10px; vertical-align: middle; margin-left: 6px; }
.selo-ok { background: #e6f4ea; color: #1e6b34; }
.selo-universal { background: #eef2f7; color: #475467; }
.selo-indef { background: #fff3c4; color: #7a5200; }
.secao-indef { margin: 22px 0 8px; font-size: .9rem; color: #7a5200; }
.bloco-indef .card { border-color: #f1d79a; }

.interpretacao .apelido { border-color: #c9dcef; background: #f3f8fd; }
a.chip { text-decoration: none; color: var(--texto); }

/* tela de apelidos */
.admin { max-width: 1000px; margin: 0 auto; padding: 16px; }
.admin h1 { font-size: 1.2rem; margin: 8px 0 4px; }
.admin .ajuda { color: var(--suave); font-size: .86rem; margin: 0 0 14px; }
.form-apelido { display: grid; grid-template-columns: 130px 1fr 1fr auto; gap: 8px; background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.form-apelido input, .form-apelido select { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; }
.form-apelido button { padding: 9px 16px; background: var(--azul); color: #fff; border: none; border-radius: 8px; font-weight: 500; }
.tabela-admin { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--borda); border-radius: 10px; font-size: .86rem; }
.tabela-admin th, .tabela-admin td { padding: 7px 10px; border-bottom: 1px solid var(--borda); text-align: left; }
.tabela-admin th { background: #f7f9fb; color: var(--suave); font-weight: 500; }
.msg { min-height: 1.2em; font-size: .86rem; margin: 0 0 10px; }
.msg.erro { color: var(--erro); }
.msg.ok { color: #1e6b34; }
@media (max-width: 760px) { .form-apelido { grid-template-columns: 1fr; } }

/* menu lateral */
.app { display: grid; grid-template-columns: 92px 1fr; min-height: 100vh; }
.lateral { background: #fff; border-right: 1px solid var(--borda); display: flex; flex-direction: column; align-items: stretch; padding: 10px 6px; gap: 4px; position: sticky; top: 0; height: 100vh; }
.lateral .logo { text-align: center; font-weight: 600; color: #fff; background: var(--azul); border-radius: 10px; padding: 10px 4px; font-size: .72rem; line-height: 1.15; margin-bottom: 8px; text-decoration: none; }
.lateral a, .lateral button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border-radius: 8px; color: var(--suave); text-decoration: none; font-size: .72rem; border: none; background: none; cursor: pointer; font-family: inherit; }
.lateral a:hover, .lateral button:hover { background: #eef4fa; color: var(--azul); }
.lateral a.ativo { background: #eef4fa; color: var(--azul); font-weight: 500; }
.lateral svg { width: 20px; height: 20px; }
.lateral .rodape { margin-top: auto; }
.principal { min-width: 0; }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; border-right: none; border-bottom: 1px solid var(--borda); padding: 6px; overflow-x: auto; }
  .lateral .logo { margin: 0 6px 0 0; }
  .lateral .rodape { margin-top: 0; margin-left: auto; }
}