/* ==========================================================================
   PEIXES & CIA — Rastreio + Painel de Ordens de Serviço
   Mesmas cores e fonte do site (index.php / catalogo.php)
   ========================================================================== */
:root{
  --vinho:#0b2d52;
  --vinho-vivo:#3f8a2f;
  --vinho-escuro:#061a33;
  --texto:#1b2a3a;
  --texto-suave:#566577;
  --papel:#eef3f7;
  --linha:#d9e2ea;
  --branco:#fff;
  --ok:#2f7d4f;
  --alerta:#b26a00;
  --erro:#b3261e;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;color:var(--texto);background:var(--papel);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-weight:700;margin:0;line-height:1.2;color:var(--texto);}
a{color:var(--vinho);text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
:focus-visible{outline:2px dashed var(--vinho);outline-offset:3px;}
.container{max-width:1140px;margin:0 auto;padding:0 20px;}
.num{font-variant-numeric:tabular-nums;}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--vinho);color:#fff;border:2px solid var(--vinho);cursor:pointer;
     padding:12px 26px;border-radius:50px;font-size:15px;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.02em;transition:background .15s,border-color .15s;}
.btn:hover{background:var(--vinho-escuro);border-color:var(--vinho-escuro);color:#fff;}
.btn svg{width:17px;height:17px;flex:none;}
.btn-sm{padding:8px 16px;font-size:13px;}
.btn-contorno{background:#fff;color:var(--vinho);border-color:var(--linha);}
.btn-contorno:hover{background:var(--papel);color:var(--vinho);border-color:var(--vinho);}
.btn-perigo{background:#fff;color:var(--erro);border-color:#f0cfcc;}
.btn-perigo:hover{background:#fdf1f0;color:var(--erro);border-color:var(--erro);}
.btn-ok{background:var(--ok);border-color:var(--ok);}
.btn-ok:hover{background:#1f5c38;border-color:#1f5c38;}
.btn-whats{background:#1f9d55;border-color:#1f9d55;}
.btn-whats:hover{background:#177a42;border-color:#177a42;}
.btn-bloco{width:100%;}
.btn[disabled]{opacity:.55;cursor:wait;}

/* ---------- topo igual ao site ---------- */
.faixa{background:var(--vinho);color:#fff;text-align:center;text-transform:uppercase;font-size:15px;padding:10px 16px;letter-spacing:.02em;}
.cabecalho{background:#fff;position:sticky;top:0;z-index:60;box-shadow:0 1px 0 var(--linha);}
.cabecalho .container{display:flex;align-items:center;gap:24px;min-height:76px;}
.cabecalho .logo img{height:54px;width:auto;}
.menu{display:flex;gap:4px;margin:0 auto;list-style:none;padding:0;}
.menu a{display:block;padding:14px 12px;font-weight:800;color:var(--texto-suave);text-transform:uppercase;font-size:15px;}
.menu a:hover,.menu a[aria-current]{color:var(--vinho);}
.menu-toggle{display:none;background:none;border:none;color:var(--vinho);cursor:pointer;padding:8px;margin-left:auto;}
@media (max-width:1024px){
  .cabecalho .btn{display:none;}
  .menu-toggle{display:block;}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;margin:0;box-shadow:0 12px 20px -10px rgba(0,0,0,.2);}
  .menu.aberto{display:flex;}
  .menu li{border-bottom:1px solid var(--linha);}
  .menu a{padding:14px 20px;}
}
.rodape-base{background:var(--vinho-escuro);color:#fff;padding:16px 0;font-size:14px;margin-top:60px;}
.rodape-base .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.rodape-base a{color:#fff;text-decoration:underline;text-underline-offset:3px;}

/* ---------- busca pública ---------- */
.busca{position:relative;background:#0a1a2c url('../images/site/hero-viveiros.jpg') center/cover no-repeat;padding:64px 0 72px;color:#fff;}
.busca::before{content:"";position:absolute;inset:0;background:rgba(6,26,51,.82);}
.busca .container{position:relative;max-width:760px;}
.busca h1{color:#fff;font-size:48px;letter-spacing:-.01em;}
.busca p{margin:10px 0 26px;font-size:18px;color:rgba(255,255,255,.88);max-width:34em;}
.busca form{display:flex;gap:10px;background:#fff;padding:8px;border-radius:50px;}
.busca input{flex:1;min-width:0;border:none;background:transparent;padding:10px 18px;font-family:inherit;font-size:20px;font-weight:700;
             letter-spacing:.12em;text-transform:uppercase;color:var(--texto);font-variant-numeric:tabular-nums;}
.busca input::placeholder{color:#9fb0c0;letter-spacing:.12em;}
.busca input:focus{outline:none;}
.busca .erro-busca{margin-top:14px;background:#fff;color:var(--erro);border-left:4px solid var(--erro);padding:10px 14px;font-weight:600;}
.busca .erro-busca:empty{display:none;}
@media (max-width:600px){
  .busca{padding:40px 0 48px;}
  .busca h1{font-size:34px;}
  .busca form{flex-direction:column;border-radius:14px;}
  .busca input{font-size:18px;text-align:center;}
}

/* ---------- resultado: etiqueta ---------- */
.resultado{margin-top:-36px;position:relative;z-index:2;}
.resultado-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px;align-items:start;}
@media (max-width:900px){ .resultado-grid{grid-template-columns:1fr;} }

.etiqueta{background:#fff;border:1px solid var(--linha);box-shadow:0 18px 40px -24px rgba(6,26,51,.45);}
.etiqueta-topo{background:var(--vinho);color:#fff;padding:14px 22px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.etiqueta-topo img{height:36px;width:auto;}
.etiqueta-topo span{font-size:14px;opacity:.9;}
.etiqueta-codigo{padding:20px 22px 8px;text-align:center;}
.etiqueta-codigo .rot{font-size:14px;color:var(--texto-suave);}
.etiqueta-codigo b{display:block;font-size:clamp(22px,6.4vw,30px);letter-spacing:.04em;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--texto);line-height:1.15;}
.etiqueta-codigo svg.barcode{width:100%;max-width:320px;height:64px;margin:10px auto 0;}
.etiqueta-picote{height:0;border-top:2px dashed var(--linha);margin:12px 0 0;position:relative;}
.etiqueta-picote::before,.etiqueta-picote::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--papel);border:1px solid var(--linha);}
.etiqueta-picote::before{left:-11px;} .etiqueta-picote::after{right:-11px;}
.etiqueta-dados{padding:18px 22px 22px;display:grid;gap:14px;}
.etiqueta-dados dt{font-size:13px;color:var(--texto-suave);}
.etiqueta-dados dd{margin:2px 0 0;font-weight:600;}

.status-atual{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--papel);border-left:4px solid var(--vinho);}
.status-atual svg{width:28px;height:28px;color:var(--vinho);flex:none;}
.status-atual b{display:block;font-size:20px;line-height:1.2;}
.status-atual span{font-size:14px;color:var(--texto-suave);}
.status-atual.ok{border-color:var(--ok);} .status-atual.ok svg{color:var(--ok);}
.status-atual.excecao{border-color:var(--alerta);background:#fff6e8;} .status-atual.excecao svg{color:var(--alerta);}

.painel-bloco{background:#fff;border:1px solid var(--linha);padding:22px;}
.painel-bloco + .painel-bloco{margin-top:22px;}
.painel-bloco h2{font-size:20px;margin-bottom:16px;}

/* ---------- linha de etapas ---------- */
.etapas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative;}
.etapa{position:relative;text-align:center;padding:0 4px;}
.etapa::before{content:"";position:absolute;top:17px;left:-50%;width:100%;height:3px;background:var(--linha);z-index:0;}
.etapa:first-child::before{display:none;}
.etapa.feita::before{background:var(--vinho);}
.etapa-bola{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;
            background:#fff;border:3px solid var(--linha);color:var(--texto-suave);font-weight:800;font-size:14px;}
.etapa-bola svg{width:18px;height:18px;}
.etapa.feita .etapa-bola{background:var(--vinho);border-color:var(--vinho);color:#fff;}
.etapa.atual .etapa-bola{box-shadow:0 0 0 6px rgba(11,45,82,.14);}
.etapa.entregue-ok .etapa-bola{background:var(--ok);border-color:var(--ok);}
.etapa-nome{font-size:14px;font-weight:700;line-height:1.25;}
.etapa-data{font-size:12.5px;color:var(--texto-suave);margin-top:2px;}
@media (max-width:640px){
  .etapas{grid-template-columns:1fr;gap:0;}
  .etapa{display:grid;grid-template-columns:36px 1fr;gap:12px;text-align:left;padding:0 0 18px;}
  .etapa::before{top:-18px;left:16px;width:3px;height:36px;}
  .etapa-bola{margin:0;}
  .etapa-nome{padding-top:7px;}
}
@media (prefers-reduced-motion:no-preference){
  .etapa.atual .etapa-bola{animation:pulso 2.2s ease-in-out infinite;}
  @keyframes pulso{50%{box-shadow:0 0 0 10px rgba(11,45,82,.05);}}
}

.aviso-excecao{margin-top:18px;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:#fff6e8;border-left:4px solid var(--alerta);font-size:15px;}
.aviso-excecao svg{width:20px;height:20px;flex:none;color:var(--alerta);margin-top:2px;}

/* ---------- mapa + previsão ---------- */
.mapa-rota{height:340px;background:var(--papel);border:1px solid var(--linha);}
.mapa-rota .msg-mapa{display:flex;align-items:center;justify-content:center;height:100%;padding:20px;text-align:center;color:var(--texto-suave);font-size:14px;}
.previsao{margin-bottom:14px;}
.previsao-barra{height:8px;background:var(--linha);border-radius:8px;overflow:hidden;}
.previsao-barra i{display:block;height:100%;background:var(--vinho);border-radius:8px;transition:width 1s linear;}
.previsao-texto{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:15px;}
.previsao-texto span{color:var(--texto-suave);}
.pino{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);}
.pino.origem{background:var(--vinho-escuro);}
.pino.destino{background:var(--vinho);}
.pino.caminhao{width:38px;height:38px;background:#fff;color:var(--vinho);border:3px solid var(--vinho);}
.pino.caminhao svg{width:20px;height:20px;}
.nota-mapa{font-size:13px;color:var(--texto-suave);margin:8px 0 0;}

/* ---------- histórico ---------- */
.historico{list-style:none;margin:0;padding:0;}
.historico li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--linha);}
.historico li:first-child{border-top:none;padding-top:0;}
.historico time{font-size:14px;color:var(--texto-suave);font-variant-numeric:tabular-nums;line-height:1.35;}
.historico time b{display:block;color:var(--texto);font-size:15px;}
.historico .h-rot{font-weight:700;}
.historico .h-desc{font-size:15px;color:var(--texto-suave);}
.historico li.recente .h-rot{color:var(--vinho);}
.historico li.ex .h-rot{color:var(--alerta);}
@media (max-width:480px){ .historico li{grid-template-columns:1fr;gap:4px;} .historico time b{display:inline;margin-right:6px;} }

.ajuda{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.ajuda p{margin:0;max-width:30em;}
.ao-vivo{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--texto-suave);}
.ao-vivo i{width:8px;height:8px;border-radius:50%;background:var(--ok);}
@media (prefers-reduced-motion:no-preference){ .ao-vivo i{animation:piscar 2s infinite;} @keyframes piscar{50%{opacity:.25;}} }

/* ==========================================================================
   PAINEL (admin)
   ========================================================================== */
.admin-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
             background:#0a1a2c url('../images/site/hero-viveiros.jpg') center/cover;position:relative;}
.admin-login::before{content:"";position:absolute;inset:0;background:rgba(6,26,51,.85);}
.login-box{position:relative;width:100%;max-width:380px;background:#fff;padding:34px 30px;}
.login-box::before{content:"";display:block;width:50px;height:3px;background:var(--vinho);margin-bottom:22px;}
.login-box img{height:62px;width:auto;margin-bottom:18px;}
.login-box h1{font-size:24px;}
.login-box p{margin:4px 0 22px;color:var(--texto-suave);font-size:15px;}

.campo{margin-bottom:14px;}
.campo label{display:block;font-size:14px;font-weight:600;margin-bottom:5px;}
.campo input,.campo select,.campo textarea{width:100%;padding:10px 12px;font-family:inherit;font-size:15px;color:var(--texto);background:#fafafa;border:1px solid #c9d4de;border-radius:0;}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--vinho);background:#fff;}
.campo small{display:block;color:var(--texto-suave);font-size:13px;margin-top:4px;}
.alerta-erro{background:#fdf1f0;border-left:4px solid var(--erro);color:var(--erro);padding:10px 12px;font-size:14px;margin-bottom:14px;}

.admin-topo{background:#fff;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:50;}
.admin-topo .container{display:flex;align-items:center;gap:16px;min-height:68px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;}
.admin-topo img{height:44px;width:auto;}
.admin-topo .titulo{font-weight:700;font-size:17px;border-left:1px solid var(--linha);padding-left:16px;color:var(--texto-suave);}
.admin-topo .acoes{margin-left:auto;display:flex;gap:10px;align-items:center;}
.admin-topo .sair{font-weight:700;color:var(--texto-suave);font-size:14px;padding:8px;}
@media (max-width:600px){ .admin-topo .titulo{display:none;} }

.admin-main{padding-top:24px;}
.numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
.numeros div{background:#fff;border:1px solid var(--linha);padding:14px 16px;}
.numeros b{display:block;font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--vinho);}
.numeros span{font-size:14px;color:var(--texto-suave);}
@media (max-width:700px){ .numeros{grid-template-columns:repeat(2,1fr);} }

.barra-filtro{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.barra-filtro input{flex:1;min-width:220px;padding:10px 14px;border:1px solid #c9d4de;font-family:inherit;font-size:15px;background:#fff;}
.barra-filtro input:focus{outline:none;border-color:var(--vinho);}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.chips button{padding:7px 14px;border-radius:50px;border:1px solid var(--linha);background:#fff;color:var(--texto-suave);font-size:14px;font-weight:600;cursor:pointer;}
.chips button:hover{border-color:var(--vinho);color:var(--vinho);}
.chips button.ativo{background:var(--vinho);border-color:var(--vinho);color:#fff;}

.lista-os{display:grid;gap:12px;}
.os-card{background:#fff;border:1px solid var(--linha);border-left:4px solid var(--linha);padding:16px 18px;}
.os-card[data-etapa="confirmado"],.os-card[data-etapa="em_preparacao"]{border-left-color:#9fb6cc;}
.os-card[data-etapa="em_transito"],.os-card[data-etapa="saiu_para_entrega"]{border-left-color:var(--vinho);}
.os-card[data-etapa="entregue"]{border-left-color:var(--ok);}
.os-card.excecao{border-left-color:var(--alerta);}
.os-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.os-cab .ids b{font-size:18px;}
.os-cab .ids code{font-family:inherit;font-weight:700;letter-spacing:.06em;color:var(--vinho);background:var(--papel);padding:2px 8px;margin-left:8px;font-variant-numeric:tabular-nums;}
.selo{display:inline-block;padding:4px 12px;border-radius:50px;font-size:13px;font-weight:700;background:var(--papel);color:var(--texto);}
.selo.transito{background:var(--vinho);color:#fff;}
.selo.ok{background:#e3f1e8;color:var(--ok);}
.selo.excecao{background:#fff1dc;color:var(--alerta);}
.os-info{margin:10px 0 12px;font-size:15px;color:var(--texto-suave);display:grid;gap:2px;}
.os-info strong{color:var(--texto);}
.os-acoes{display:flex;gap:8px;flex-wrap:wrap;}
.os-mapa{display:none;margin-top:14px;}
.os-mapa .mapa-rota{height:280px;}
.vazio{background:#fff;border:1px dashed #c9d4de;padding:36px 20px;text-align:center;color:var(--texto-suave);}
.vazio b{display:block;color:var(--texto);font-size:18px;margin-bottom:4px;}

/* ---------- modais ---------- */
.fundo-modal{position:fixed;inset:0;background:rgba(6,26,51,.6);z-index:90;display:none;}
.fundo-modal.aberto{display:block;}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 24px));max-height:calc(100% - 24px);
       overflow:auto;background:#fff;z-index:100;display:none;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);}
.modal.grande{width:min(860px,calc(100% - 24px));}
.modal.aberto{display:block;}
.modal-cab{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--linha);position:sticky;top:0;background:#fff;z-index:2;}
.modal-cab h3{font-size:20px;}
.fechar{background:none;border:none;cursor:pointer;color:var(--texto-suave);padding:6px;}
.fechar svg{width:20px;height:20px;display:block;}
.modal-corpo{padding:20px 22px 24px;}
.modal fieldset{border:none;padding:0;margin:0 0 18px;}
.modal legend{font-weight:700;font-size:16px;margin-bottom:10px;color:var(--vinho);padding:0;}
.grade-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
.grade-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 12px;}
.grade-cep{display:grid;grid-template-columns:150px 1fr 110px;gap:0 12px;}
.grade-end{display:grid;grid-template-columns:1fr 1fr 1fr 80px;gap:0 12px;}
@media (max-width:640px){ .grade-2,.grade-3,.grade-cep,.grade-end{grid-template-columns:1fr;} }

.itens{width:100%;border-collapse:collapse;font-size:15px;}
.itens th{text-align:left;font-size:13px;font-weight:600;color:var(--texto-suave);padding:0 6px 6px 0;}
.itens td{padding:0 6px 8px 0;vertical-align:top;}
.itens input,.itens select{width:100%;padding:9px 10px;border:1px solid #c9d4de;background:#fafafa;font-family:inherit;font-size:15px;}
.itens input:focus,.itens select:focus{outline:none;border-color:var(--vinho);background:#fff;}
.itens .c-qtd{width:90px;} .itens .c-unid{width:120px;} .itens .c-preco{width:120px;} .itens .c-sub{width:110px;text-align:right;padding-top:9px;font-variant-numeric:tabular-nums;font-weight:600;} .itens .c-x{width:36px;}
.itens .remover{background:none;border:none;color:var(--texto-suave);cursor:pointer;padding:8px 4px;}
.itens .remover:hover{color:var(--erro);}
@media (max-width:640px){
  .itens thead{display:none;}
  .itens tr{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 0;border-top:1px solid var(--linha);}
  .itens td{padding:0;width:auto !important;}
  .itens td.c-desc{grid-column:1/-1;}
  .itens td.c-sub{text-align:left;}
}
.totais{display:grid;gap:4px;margin-top:10px;padding:12px 14px;background:var(--papel);font-size:15px;}
.totais div{display:flex;justify-content:space-between;}
.totais .total{font-size:19px;font-weight:800;color:var(--vinho);border-top:1px solid var(--linha);padding-top:6px;margin-top:4px;}
.linha-botoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.msg-auto{font-size:13.5px;color:var(--texto-suave);margin:6px 0 12px;min-height:1em;}

/* ---------- código emitido ---------- */
.emitido{text-align:center;}
.emitido .ok-icone{width:54px;height:54px;border-radius:50%;background:#e3f1e8;color:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.emitido .ok-icone svg{width:28px;height:28px;}
.emitido h3{font-size:22px;}
.emitido p{margin:4px 0 0;color:var(--texto-suave);}
.emitido .codigo-grande{margin:18px auto 6px;padding:16px;border:2px dashed var(--linha);max-width:420px;}
.emitido .codigo-grande b{display:block;font-size:clamp(22px,6.4vw,30px);letter-spacing:.05em;white-space:nowrap;font-variant-numeric:tabular-nums;}
.emitido .codigo-grande svg{width:100%;max-width:320px;height:60px;margin:8px auto 0;}
.emitido .linha-botoes{justify-content:center;margin-top:18px;}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--vinho-escuro);color:#fff;padding:12px 20px;font-weight:600;
       z-index:200;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 24px);}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast.erro{background:var(--erro);}