/* Estilos de validacao.html — extraídos do HTML para separar estrutura de aparência. */

:root{
    --asfalto:#2b2e31;       /* texto principal */
    --concreto:#f2f1ed;      /* fundo */
    --placa-verde:#00693c;   /* sinalização de indicação */
    --placa-verde-esc:#00542f;
    --faixa-amarela:#f5b800; /* advertência */
    --alerta:#c0392b;
    --linha:#d8d6cf;
    --card:#ffffff;
    --mono:ui-monospace,'Cascadia Mono','Roboto Mono',Consolas,monospace;
  }
  *{box-sizing:border-box;margin:0}
  body{font:15px/1.5 'Segoe UI',Roboto,system-ui,sans-serif;color:var(--asfalto);
       background:var(--concreto);padding-bottom:80px}
  header{background:var(--asfalto);color:#fff;padding:14px 24px;
         display:flex;align-items:center;gap:14px}
  header .marco{background:var(--placa-verde);border:2px solid #fff;
    border-radius:6px;padding:3px 10px;font-weight:700;font-size:13px;
    letter-spacing:.5px}
  header h1{font-size:17px;font-weight:600}
  header small{opacity:.65;margin-left:auto;font-size:12px}
  main{max-width:1060px;margin:26px auto;padding:0 20px}

  /* etapa = marco quilométrico */
  .etapa{display:flex;align-items:baseline;gap:10px;margin:30px 0 12px}
  .etapa .km{background:#fff;border:2px solid var(--asfalto);border-radius:4px;
    font-family:var(--mono);font-weight:700;font-size:13px;padding:2px 9px}
  .etapa h2{font-size:16px;font-weight:600}
  .etapa p{color:#6b6e72;font-size:13px}

  .grade{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:700px){.grade{grid-template-columns:1fr}}
  .card{background:var(--card);border:1px solid var(--linha);border-radius:10px;
        padding:16px 18px}
  .card h3{font-size:14px;margin-bottom:6px}
  .card .estado{font-size:13px;color:#6b6e72;margin-bottom:12px;min-height:20px}
  .card .estado.ok{color:var(--placa-verde);font-weight:600}
  .card .estado.erro{color:var(--alerta)}

  input[type=file]{display:none}
  .botao{display:inline-block;background:var(--placa-verde);color:#fff;border:0;
    border-radius:8px;padding:9px 18px;font-size:14px;font-weight:600;
    cursor:pointer;transition:background .15s}
  .botao:hover{background:var(--placa-verde-esc)}
  .botao.secundario{background:#fff;color:var(--asfalto);
    border:1.5px solid var(--asfalto)}
  .botao:disabled{opacity:.45;cursor:not-allowed}

  /* zona de envio com faixa tracejada de rodovia */
  .zona{border:2px dashed var(--faixa-amarela);background:#fff;border-radius:12px;
    padding:34px 20px;text-align:center;cursor:pointer;transition:background .15s}
  .zona.arrasto{background:#fdf6df}
  .zona p{color:#6b6e72;font-size:13px;margin-top:6px}
  .zona .lista{font-family:var(--mono);font-size:12px;color:var(--asfalto);
    margin-top:10px;text-align:left;max-height:120px;overflow:auto}

  .acao{margin-top:14px;display:flex;gap:10px;align-items:center}
  .rodando{display:none;font-size:13px;color:#6b6e72}

  /* relatório */
  table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--linha);
        border-radius:10px;overflow:hidden;font-size:13.5px}
  th{background:var(--asfalto);color:#fff;text-align:left;padding:9px 12px;
     font-size:12px;letter-spacing:.4px;font-weight:600}
  td{padding:9px 12px;border-top:1px solid var(--linha);vertical-align:top}
  td.mono{font-family:var(--mono);font-size:12px}
  .chip{display:inline-block;border-radius:5px;padding:2px 9px;font-size:12px;
    font-weight:700;color:#fff;border:1.5px solid rgba(255,255,255,.7);
    box-shadow:0 0 0 1.5px currentColor inset}
  .chip.completo{background:var(--placa-verde)}
  .chip.parcial{background:var(--faixa-amarela);color:var(--asfalto)}
  .chip.insuficiente{background:var(--alerta)}
  .chip.neutro{background:#9aa0a6}
  .barra{height:7px;border-radius:4px;background:var(--linha);margin-top:5px;
    overflow:hidden;min-width:90px}
  .barra i{display:block;height:100%;background:var(--placa-verde)}
  .aviso{background:#fdf6df;border-left:4px solid var(--faixa-amarela);
    padding:8px 12px;border-radius:0 8px 8px 0;font-size:13px;margin-top:10px}
  .problema{background:#fdeceb;border-left:4px solid var(--alerta);
    padding:8px 12px;border-radius:0 8px 8px 0;font-size:13px;margin-top:10px}
  #secRelatorio{display:none}
  .resumo{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .resumo .num{background:#fff;border:1px solid var(--linha);border-radius:10px;
    padding:10px 16px;text-align:center}
  .resumo .num b{display:block;font-size:22px}
  .resumo .num span{font-size:12px;color:#6b6e72}