:root{
    --bg:#EEF1EC;
    --surface:#FFFFFF;
    --ink:#1B2B2B;
    --ink-soft:#5B6B68;
    --line:#D7DBD2;
    --primary:#1E4D5B;
    --primary-dark:#123039;
    --amber:#C98A34;
    --amber-bg:#FBF0E1;
    --green:#3F7859;
    --green-bg:#E9F2EC;
    --red:#B0473A;
    --red-bg:#F7E9E7;
    --mono:'IBM Plex Mono', monospace;
    --slab:'Roboto Slab', serif;
    --sans:'Inter', sans-serif;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);}
  body.auth-pending > :not(.login-screen):not(script){visibility:hidden;}
  .login-screen{
    position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
    padding:clamp(24px,5vw,76px);overflow:auto;background:#082d21;color:#fff;
  }
  .login-screen::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 15% 15%,rgba(77,137,111,.18),transparent 35%),
      linear-gradient(115deg,rgba(255,255,255,.018),transparent 48%);
  }
  .login-screen.show{display:flex;}
  .login-layout{
    position:relative;width:min(1120px,100%);display:grid;grid-template-columns:minmax(0,1fr) 404px;
    align-items:center;gap:clamp(58px,10vw,150px);
  }
  .login-intro{min-height:430px;display:flex;flex-direction:column;justify-content:space-between;padding:8px 0 18px;}
  .wr-wordmark{display:flex;align-items:center;width:270px;height:155px;}
  .wr-wordmark img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;}
  .login-copy h1{font-family:var(--sans);font-size:clamp(34px,4vw,48px);line-height:1.08;margin:0 0 10px;font-weight:700;letter-spacing:-1.3px;}
  .login-copy>p{margin:0;color:#64aa8c;font-size:15px;letter-spacing:.1px;}
  .login-divider{width:86px;height:1px;background:rgba(255,255,255,.22);margin:34px 0 24px;}
  .secure-note{display:flex;align-items:center;gap:14px;}
  .secure-icon{width:32px;height:32px;display:grid;place-items:center;background:rgba(92,151,125,.16);}
  .secure-icon svg{width:19px;height:19px;fill:#b9d2c8;}
  .secure-note strong,.secure-note small{display:block;}
  .secure-note strong{font-size:14px;margin-bottom:3px;}
  .secure-note small{color:#65a78c;font-size:12px;}
  .login-card{
    width:100%;background:#fff;color:#0e211b;border-radius:14px;padding:42px 36px 38px;
    box-shadow:0 28px 80px rgba(0,0,0,.24);
  }
  .login-card-brand{height:62px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .login-card-brand img{display:block;width:105px;height:74px;object-fit:contain;}
  .login-card-subtitle{margin:0 0 24px;text-align:center;color:#63756e;font-size:13px;}
  .login-card label{color:#0b1713;margin:0 0 7px;font-weight:500;font-size:13px;}
  .login-card input{
    width:100%;height:44px;font:inherit;font-size:13px;padding:0 12px;border:1px solid #cdd7d2;
    border-radius:8px;background:#eaf1fb;color:#10201a;margin:0 0 15px;transition:border-color .15s,box-shadow .15s,background .15s;
  }
  .login-card input:focus{outline:none;border-color:#087c51;box-shadow:0 0 0 3px rgba(8,124,81,.12);background:#fff;}
  .password-field{position:relative;}
  .password-field input{padding-right:64px;}
  .password-toggle{
    position:absolute;right:9px;top:8px;padding:6px;border:0;background:transparent;color:#477064;
    font-size:10px;font-weight:600;cursor:pointer;
  }
  .password-toggle:hover{color:#087c51;}
  .login-submit{width:100%;height:44px;margin-top:0;padding:0 16px;border-radius:8px;background:#087c51;color:#fff;font-size:13px;font-weight:700;}
  .login-submit:hover{background:#066941;box-shadow:0 7px 18px rgba(8,124,81,.2);}
  .login-submit:disabled{opacity:.6;cursor:wait;}
  .login-error{min-height:20px;color:var(--red);font-size:12px;margin-top:-4px;}
  .login-help{text-align:center;color:#71817b;font-size:11px;margin-top:20px;}
  .current-user{align-self:center;font-size:12px;color:#c5dadd;font-family:var(--mono);}
  ::selection{background:var(--primary);color:#fff;}

  /* ---------- topbar ---------- */
  header.topbar{
    background:var(--primary-dark);
    color:#fff;
    padding:18px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
    border-bottom:4px solid var(--primary);
  }
  header.topbar .brand{display:flex;align-items:baseline;gap:12px;}
  header.topbar .brand h1{
    font-family:var(--slab);font-weight:700;font-size:20px;margin:0;letter-spacing:.2px;
  }
  header.topbar .brand span{
    font-family:var(--mono);font-size:12px;color:#9FC2C9;text-transform:uppercase;letter-spacing:1.5px;
  }
  .topbar-actions{display:flex;gap:10px;flex-wrap:wrap;}
  button{
    font-family:var(--sans);font-weight:600;font-size:13.5px;border:none;border-radius:3px;
    padding:10px 16px;cursor:pointer;transition:transform .1s ease, box-shadow .15s ease;
  }
  button:active{transform:translateY(1px);}
  .btn-primary{background:#fff;color:var(--primary-dark);}
  .btn-primary:hover{box-shadow:0 2px 10px rgba(0,0,0,.25);}
  .btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);}
  .btn-ghost:hover{background:rgba(255,255,255,.12);}
  .btn-small{padding:6px 12px;font-size:12.5px;}

  /* ---------- stats strip ---------- */
  .stats{
    display:flex;gap:1px;background:var(--line);
    border-bottom:1px solid var(--line);
  }
  .stat{
    flex:1;background:var(--surface);padding:14px 20px;text-align:left;
  }
  .stat .n{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--primary-dark);}
  .stat .l{font-size:11.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:1px;margin-top:2px;}

  main{padding:24px 28px 60px;max-width:1400px;margin:0 auto;}

  /* ---------- tabs ---------- */
  .tabs{
    display:flex;gap:2px;background:var(--surface);border-bottom:1px solid var(--line);
    padding:0 28px;max-width:1400px;margin:0 auto;
  }
  .tab-btn{
    background:transparent;border:none;border-bottom:3px solid transparent;color:var(--ink-soft);
    padding:14px 18px;font-size:13.5px;font-weight:600;cursor:pointer;border-radius:0;font-family:var(--sans);
  }
  .tab-btn:hover{color:var(--primary-dark);}
  .tab-btn.active{color:var(--primary-dark);border-bottom-color:var(--primary);}

  /* ---------- alerta de atraso ---------- */
  .alerta-box{
    background:var(--red-bg);border:1px solid var(--red);border-radius:5px;
    padding:14px 18px;margin-bottom:20px;
  }
  .alerta-box .alerta-title{
    font-family:var(--slab);font-weight:700;color:var(--red);font-size:14px;margin-bottom:0;
    display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
    background:transparent;border:none;padding:0;cursor:pointer;text-align:left;
  }
  .alerta-box .alerta-title:hover{opacity:.85;}
  .alerta-box .alerta-lista{margin-top:12px;}
  .alerta-toggle-icon{
    font-family:var(--sans);font-weight:600;font-size:11.5px;color:var(--red);
    text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;
  }
  .alerta-lista{display:flex;flex-direction:column;gap:6px;}
  .alerta-item{
    display:flex;justify-content:space-between;align-items:center;background:var(--surface);
    border:1px solid var(--line);border-radius:3px;padding:8px 12px;font-size:12.5px;cursor:pointer;
  }
  .alerta-item:hover{border-color:var(--red);}
  .alerta-item .adias{
    font-family:var(--mono);font-weight:600;color:var(--red);background:var(--red-bg);
    padding:2px 8px;border-radius:10px;font-size:11px;
  }
  .card-badge-atraso{
    display:inline-flex;align-items:center;gap:4px;margin-top:8px;margin-left:6px;
    font-size:10.5px;font-weight:700;color:var(--red);background:var(--red-bg);
    padding:2px 7px;border-radius:2px;
  }

  /* ---------- resumo mensal ---------- */
  .resumo-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
  .resumo-toolbar label{margin:0;font-size:12.5px;}
  .resumo-toolbar select{width:auto;min-width:180px;}
  .resumo-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px;}
  .resumo-card{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:16px 18px;}
  .resumo-card h3{
    font-family:var(--slab);font-size:13px;text-transform:uppercase;letter-spacing:.6px;
    color:var(--primary-dark);margin:0 0 12px;
  }
  .resumo-row{
    display:flex;justify-content:space-between;align-items:center;padding:7px 0;
    border-bottom:1px solid var(--line);font-size:13px;
  }
  .resumo-row:last-child{border-bottom:none;}
  .resumo-row .rlabel{display:flex;align-items:center;gap:8px;}
  .resumo-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
  .resumo-row .rcount{font-family:var(--mono);font-weight:700;color:var(--primary-dark);}
  .resumo-vazio{font-size:12.5px;color:var(--ink-soft);font-style:italic;padding:6px 0;}
  .resumo-full{grid-column:1 / -1;}
  .aberto-table{width:100%;border-collapse:collapse;}
  .aberto-table th{
    text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);
    padding:6px 8px;border-bottom:2px solid var(--line);
  }
  .aberto-table td{padding:8px;font-size:12.5px;border-bottom:1px solid var(--line);}
  .aberto-table tr:hover td{background:var(--bg);cursor:pointer;}
  .dias-pill{font-family:var(--mono);font-weight:700;padding:2px 8px;border-radius:10px;font-size:11px;}
  .dias-ok{background:var(--green-bg);color:var(--green);}
  .dias-atraso{background:var(--red-bg);color:var(--red);}
  .input-frete{
    width:120px;font-family:var(--mono);font-size:13px;padding:6px 8px;
    border:1px solid var(--line);border-radius:3px;background:#FCFCFB;
  }
  .input-frete:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary);}

  /* ---------- board ---------- */
  .board{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:start;}
  .column{background:transparent;}
  .column h2{
    font-family:var(--slab);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
    color:var(--ink-soft);margin:0 0 10px 4px;display:flex;align-items:center;gap:8px;
  }
  .column h2 .count{
    font-family:var(--mono);background:var(--surface);border:1px solid var(--line);border-radius:10px;
    padding:1px 8px;font-size:11px;color:var(--ink);
  }
  .cards{display:flex;flex-direction:column;gap:10px;min-height:60px;}
  .card{
    background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--primary);
    border-radius:4px;padding:12px 14px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .card:hover{box-shadow:0 3px 10px rgba(0,0,0,.10);border-left-color:var(--primary-dark);}
  .card .ped{font-family:var(--mono);font-size:12px;color:var(--primary-dark);font-weight:600;}
  .card .cli{font-weight:600;font-size:14px;margin:3px 0 2px;}
  .card .meta{font-size:11.5px;color:var(--ink-soft);}
  .card .tag{
    display:inline-block;margin-top:8px;font-size:10.5px;font-weight:600;text-transform:uppercase;
    letter-spacing:.4px;padding:2px 7px;border-radius:2px;
  }
  .tag-interno{background:var(--amber-bg);color:var(--amber);}
  .tag-cliente{background:#EAEEF6;color:#4A5C8C;}
  .tag-naoconf{background:var(--red-bg);color:var(--red);}
  .tag-amostra{background:var(--green-bg);color:var(--green);}
  .empty-col{font-size:12px;color:var(--ink-soft);font-style:italic;padding:10px 4px;}

  /* ---------- modal ---------- */
  .overlay{
    position:fixed;inset:0;background:rgba(18,48,57,.55);display:none;
    align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;z-index:50;
  }
  .overlay.show{display:flex;}
  .modal{
    background:var(--surface);width:100%;max-width:760px;border-radius:6px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;
  }
  .modal-head{
    background:var(--primary-dark);color:#fff;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;
  }
  .modal-head h3{font-family:var(--slab);margin:0;font-size:18px;}
  .modal-head .sub{font-family:var(--mono);font-size:12px;color:#9FC2C9;margin-top:2px;}
  .close-x{background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1;padding:4px;}
  .modal-head-actions{display:flex;align-items:center;gap:12px;}
  .btn-danger{background:transparent;color:#F0B9AF;border:1px solid rgba(240,185,175,.5);}
  .btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red);}
  .btn-print{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);}
  .btn-print:hover{background:rgba(255,255,255,.15);}

  /* ============================================================
     IMPRESSÃO — layout no mesmo formato do formulário em papel
     ============================================================ */
  #print-area{display:none;}

  @media print{
    body *{visibility:hidden;}
    #print-area, #print-area *{visibility:visible;}
    #print-area{display:block;position:absolute;left:0;top:0;width:100%;}
    @page{size:landscape;margin:6mm;}
  }

  .print-sheet{
    font-family:Arial, Helvetica, sans-serif;color:#000;font-size:13.5px;
    width:100%;margin:0 auto;
    page-break-inside:avoid;
    break-inside:avoid;
  }
  .print-sheet table{width:100%;border-collapse:collapse;margin-top:-1px;}
  .print-sheet table:first-child{margin-top:0;}
  .plabel{font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.2px;}

  .ptable-top td{border:1px solid #000;padding:8px 14px;vertical-align:top;}
  .plogo{font-weight:800;font-size:24px;width:15%;letter-spacing:1px;}
  .ptipos{width:20%;}
  .ptipos .prow{margin:1.5px 0;font-size:12px;}
  .ptitle{font-weight:800;font-size:19px;text-align:center;letter-spacing:.4px;width:40%;}
  .pnumped{width:25%;text-align:center;}
  .pnumval{font-weight:700;font-size:17px;margin-top:4px;font-family:var(--mono);}

  .ptable-info td, .ptable-superv td, .ptable-assin td{border:1px solid #000;padding:7px 14px;font-size:12.5px;}

  .pline{border:1px solid #000;margin-top:-1px;padding:7px 14px;font-size:12.5px;}

  .pcols3{display:flex;border:1px solid #000;margin-top:-1px;}
  .pcol{flex:1;border-right:1px solid #000;padding:8px 14px;font-size:12px;}
  .pcol:last-child{border-right:none;}
  .pcolhead{font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:7px;font-size:12.5px;}

  .prow{display:flex;align-items:center;gap:7px;margin:3px 0;}
  .pchk{width:11px;height:11px;border:1.5px solid #000;display:inline-block;flex-shrink:0;}
  .pchk.on{background:#000;}
  .pblank{border-bottom:1px solid #000;flex:1;font-weight:400;min-width:20px;}

  .ptable-relato td, .ptable-etapa td{border:1px solid #000;padding:7px 14px;vertical-align:top;}
  .prelato{width:70%;}
  .presultado{width:30%;}
  .prelato-txt{margin-top:6px;min-height:21mm;font-size:13px;}

  .petapa-txt{width:70%;}
  .petapa-check{width:30%;}
  .modal-body{padding:22px 24px;max-height:70vh;overflow-y:auto;}

  fieldset{border:1px solid var(--line);border-radius:5px;padding:16px 18px 18px;margin:0 0 20px;}
#novo-stepper{margin-bottom:22px;}
  legend{font-family:var(--slab);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--primary-dark);padding:0 6px;}
  fieldset.fieldset-alerta{border-color:var(--red);background:var(--red-bg);}
  fieldset.fieldset-alerta legend{color:var(--red);}
  fieldset.fieldset-alerta .alerta-aviso{font-size:12.5px;color:var(--red);margin-bottom:8px;}

  /* fotos */
  .foto-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;}
  .foto-thumb{
    position:relative;width:84px;height:84px;border-radius:4px;overflow:hidden;border:1px solid var(--line);
    background:var(--bg);flex-shrink:0;
  }
  .foto-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .foto-del{
    position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:none;
    background:rgba(20,20,20,.65);color:#fff;font-size:12px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;padding:0;
  }
  .foto-del:hover{background:var(--red);}
  .foto-vazio{font-size:12.5px;color:var(--ink-soft);font-style:italic;padding:4px 0;}
  .btn-anexar{
    display:inline-flex;align-items:center;cursor:pointer;width:auto;
  }
  label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:4px;font-weight:500;}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px;}
  .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:12px;}
  .field{margin-bottom:12px;}
  input[type=text], input[type=date], textarea, select{
    width:100%;font-family:var(--sans);font-size:14px;padding:9px 10px;border:1px solid var(--line);
    border-radius:3px;background:#FCFCFB;color:var(--ink);
  }
  input:focus, textarea:focus, select:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary);}
  textarea{resize:vertical;min-height:64px;}

  .radio-group{display:flex;flex-wrap:wrap;gap:8px;}
  .radio-chip{
    border:1px solid var(--line);border-radius:3px;padding:8px 12px;font-size:13px;cursor:pointer;
    background:#FCFCFB;user-select:none;
  }
  .radio-chip input{display:none;}
  .radio-chip.checked{background:var(--primary);color:#fff;border-color:var(--primary);}

  .toggle-group{display:flex;gap:8px;}
  .toggle-btn{flex:1;text-align:center;padding:10px;border:1px solid var(--line);border-radius:3px;
    cursor:pointer;font-weight:600;font-size:13px;background:#FCFCFB;color:var(--ink-soft);}
  .toggle-btn.on-green.active{background:var(--green-bg);border-color:var(--green);color:var(--green);}
  .toggle-btn.on-red.active{background:var(--red-bg);border-color:var(--red);color:var(--red);}
  .toggle-btn.on-amber.active{background:var(--amber-bg);border-color:var(--amber);color:var(--amber);}

  .form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px;}
  .btn-outline{background:#fff;border:1px solid var(--line);color:var(--ink);}
  .btn-outline:hover{background:#F5F5F3;}
  .btn-confirm{background:var(--primary);color:#fff;}
  .btn-confirm:hover{background:var(--primary-dark);}

  /* stamp / carimbo */
  .stamp-row{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 4px;}
  .stamp{
    font-family:var(--slab);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:1px;
    border:2px double currentColor;border-radius:4px;padding:7px 12px;transform:rotate(-4deg);
    display:inline-flex;flex-direction:column;line-height:1.35;opacity:.92;
  }
  .stamp .l1{font-size:12.5px;}
  .stamp .l2{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.5px;text-transform:none;}
  .stamp-green{color:var(--green);}
  .stamp-amber{color:var(--amber);}
  .stamp-red{color:var(--red);}
  .stamp-primary{color:var(--primary);}

  .readonly-block{
    background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:12px 14px;margin-bottom:14px;font-size:13px;
  }
  .readonly-block b{color:var(--primary-dark);}
  .readonly-block .l{color:var(--ink-soft);font-size:11px;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:1px;}

  .stepper{display:flex;align-items:center;gap:4px;margin-bottom:18px;}
  .step{flex:1;text-align:center;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
    color:var(--ink-soft);padding-bottom:8px;border-bottom:3px solid var(--line);}
  .step.done{color:var(--green);border-color:var(--green);}
  .step.active{color:var(--primary-dark);border-color:var(--primary);}

  @media (max-width:1100px){ .board{grid-template-columns:repeat(2,1fr);} .stats{flex-wrap:wrap;} .stat{min-width:33%;} .resumo-grid{grid-template-columns:1fr;} }
  @media (max-width:820px){
    .login-screen{padding:28px 18px;align-items:flex-start;}
    .login-layout{grid-template-columns:1fr;gap:30px;max-width:430px;}
    .login-intro{min-height:auto;display:block;text-align:center;padding:0;}
    .wr-wordmark{margin:0 auto 22px;width:190px;height:112px;}
    .login-copy h1{font-size:31px;}
    .login-divider,.secure-note{display:none;}
  }
  @media (max-width:640px){ .board{grid-template-columns:1fr;} .row,.row3{grid-template-columns:1fr;} .login-card{padding:32px 24px;} }

  .autocomplete-field{position:relative;}
.autocomplete-list{
  display:none;position:absolute;left:0;right:0;top:100%;margin-top:2px;
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);max-height:220px;overflow-y:auto;z-index:20;
}
.autocomplete-list.show{display:block;}
.autocomplete-item{padding:8px 12px;font-size:12.5px;cursor:pointer;border-bottom:1px solid var(--line);}
.autocomplete-item:last-child{border-bottom:none;}
.autocomplete-item small{color:var(--ink-soft);}
.autocomplete-item:hover, .autocomplete-item.ativo{background:var(--bg);}