/* ═══════════════════════════════════════════════════════════════
   MP CORREIAS — Design System v5  "Terminal Precision"
   Display : IBM Plex Mono (números, labels, nav)
   Body    : IBM Plex Sans (texto corrido, inputs)
   Conceito: Aerospace HUD × Industrial Data Terminal
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

/* ─── TOKENS ESCURO ───────────────────────────────────────────── */
:root{
  --bg : #07090f;
  --s0 : #0d1018;
  --s1 : #111520;
  --s2 : #161b28;
  --s3 : #1c2232;
  --b1 : rgba(255,255,255,.10);
  --b2 : rgba(255,255,255,.17);
  --b3 : rgba(255,255,255,.26);

  --am : #fbbf24;   /* âmbar — mais brilhante para contraste */
  --am2: #fcd34d;
  --amd: rgba(251,191,36,.16);
  --amg: 0 0 22px rgba(251,191,36,.28);

  --cy : #38d9f5;   /* ciano — mais saturado */
  --cy2: #7ee8fa;
  --cyd: rgba(56,217,245,.14);

  --ok : #34d399;
  --okd: rgba(52,211,153,.16);
  --er : #fb4b6e;
  --erd: rgba(251,75,110,.16);
  --wa : #fde047;

  --t1 : #f4f7ff;   /* texto principal — mais branco */
  --t2 : #bcd0e8;   /* texto secundário — muito mais legível */
  --t3 : #8aadc9;   /* texto terciário — antes #6a87a6, muito escuro */

  --in : #0a0d15;
  --in2: #070910;

  --sh1: 0 1px 4px rgba(0,0,0,.55);
  --sh2: 0 4px 18px rgba(0,0,0,.6);
  --sh3: 0 14px 48px rgba(0,0,0,.75);

  --r1: 3px;
  --r2: 6px;
  --r3: 10px;
  --r4: 14px;

  --fm : 'IBM Plex Mono', 'Courier New', monospace;
  --fs : 'IBM Plex Sans', system-ui, sans-serif;

  --e1: cubic-bezier(.25,.46,.45,.94);
  --e2: cubic-bezier(.34,1.3,.64,1);
}

/* ─── TOKENS CLARO ────────────────────────────────────────────── */
[data-theme="light"]{
  --bg : #e8eaf5;
  --s0 : #ffffff;
  --s1 : #ffffff;
  --s2 : #f0f2fa;
  --s3 : #e2e5f0;
  --b1 : rgba(0,0,0,.10);
  --b2 : rgba(0,0,0,.18);
  --b3 : rgba(0,0,0,.28);
  --am : #b45309;   /* âmbar mais escuro — contraste em fundo claro */
  --am2: #92400e;
  --amd: rgba(180,83,9,.12);
  --amg: 0 0 22px rgba(180,83,9,.20);
  --cy : #0369a1;   /* azul mais escuro — contraste em fundo claro */
  --cy2: #0284c7;
  --cyd: rgba(3,105,161,.12);
  --ok : #047857;   /* verde mais escuro */
  --okd: rgba(4,120,87,.12);
  --er : #b91c1c;   /* vermelho mais escuro */
  --erd: rgba(185,28,28,.12);
  --wa : #92400e;
  --t1 : #06101e;   /* texto principal — quase preto, alto contraste */
  --t2 : #1a3352;   /* texto secundário — antes #2b4260, mais escuro */
  --t3 : #2d4f72;   /* texto terciário — antes #4a6280, mais escuro */
  --in : #e8eaf5;
  --in2: #dde0ee;
  --sh1: 0 1px 4px rgba(0,0,0,.10);
  --sh2: 0 4px 18px rgba(0,0,0,.13);
  --sh3: 0 14px 48px rgba(0,0,0,.18);
}

/* ─── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}

body{
  font-family:var(--fs);
  background:var(--bg);
  color:var(--t1);
  min-height:100vh;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* scan-lines: CSS puro, zero JS, zero performance */
body::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.012) 0px,
    rgba(255,255,255,.012) 1px,
    transparent 1px,
    transparent 3px
  );
}
[data-theme="light"] body::before{display:none}

a{text-decoration:none;color:inherit}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--b3)}

/* ═══════════════════════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════════════════════ */
.login-body{
  background:var(--bg);min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;overflow:hidden;
}

/* glow central leve */
.login-body::after{
  content:'';position:fixed;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:600px;height:600px;
  background:radial-gradient(ellipse,rgba(245,158,11,.07) 0%,transparent 65%);
  pointer-events:none;
}

.login-overlay{
  display:flex;align-items:center;justify-content:center;
  width:100%;position:relative;z-index:1;
}

.login-box{
  background:var(--s1);
  border:1px solid var(--b2);
  border-top:2px solid var(--am);
  border-radius:var(--r3);
  padding:48px 44px 40px;
  width:440px;max-width:95vw;
  box-shadow:var(--sh3);
  animation:boxIn .4s var(--e1);
  position:relative;
}

/* canto decorativo inferior direito */
.login-box::after{
  content:'';
  position:absolute;bottom:0;right:0;
  width:60px;height:60px;
  border-right:1px solid var(--am);
  border-bottom:1px solid var(--am);
  border-radius:0 0 var(--r3) 0;
  opacity:.25;
}

@keyframes boxIn{
  from{opacity:0;transform:translateY(20px)}
  to  {opacity:1;transform:translateY(0)}
}

.login-logo-wrap{margin-bottom:30px;text-align:center}
.login-logo-main{display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.login-logo-img{
  height:62px;width:auto;max-width:260px;object-fit:contain;
  filter:brightness(0) invert(1);transition:filter .2s;
}
[data-theme="light"] .login-logo-img{filter:brightness(0)}

.login-logo-sub{
  font-family:var(--fm);
  font-size:9px;font-weight:600;
  color:var(--t3);letter-spacing:4px;text-transform:uppercase;
}

.login-divider{
  display:flex;align-items:center;gap:12px;margin:24px 0;
}
.login-divider::before,.login-divider::after{
  content:'';flex:1;height:1px;background:var(--b1);
}
.login-divider span{
  font-family:var(--fm);font-size:9px;letter-spacing:2.5px;
  color:var(--t3);text-transform:uppercase;white-space:nowrap;
}

.login-title{
  font-family:var(--fm);
  font-size:22px;font-weight:700;
  color:var(--t1);margin-bottom:6px;letter-spacing:1px;
}
.login-subtitle{font-size:13px;color:var(--t2);margin-bottom:26px}

.login-field{margin-bottom:18px}
.login-field label{
  font-family:var(--fm);
  font-size:10px;font-weight:600;
  color:var(--t2);text-transform:uppercase;letter-spacing:1.5px;
  display:flex;align-items:center;gap:6px;margin-bottom:8px;
}

.login-field input{
  width:100%;padding:11px 13px;
  background:var(--in);
  border:1px solid var(--b2);
  border-left:2px solid var(--am);
  border-radius:var(--r1);
  font-family:var(--fm);font-size:13px;
  outline:none;color:var(--t1);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.login-field input:focus{
  border-color:var(--am);
  box-shadow:0 0 0 3px var(--amd);
  background:var(--in2);
}
.login-field input::placeholder{color:var(--t3)}

.btn-login{
  width:100%;margin-top:8px;
  padding:12px 20px;
  background:var(--am);color:#07090f;
  border:none;border-radius:var(--r1);
  font-family:var(--fm);font-size:12px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;transition:all .2s var(--e1);
  display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 4px 18px rgba(245,158,11,.28);
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(245,158,11,.38)}
.btn-login:active{transform:translateY(0)}

.login-error{
  display:none;margin-top:12px;
  background:var(--erd);border:1px solid rgba(244,63,94,.2);
  border-left:3px solid var(--er);
  border-radius:var(--r1);padding:11px 14px;
  font-family:var(--fm);font-size:12px;color:var(--er);
}
.login-footer{
  margin-top:28px;text-align:center;
  font-family:var(--fm);font-size:10px;color:var(--t3);
  border-top:1px solid var(--b1);padding-top:18px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  letter-spacing:1px;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════ */
.header{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--s0);
  padding:0 26px;height:58px;
  border-bottom:1px solid var(--b2);
  border-top:2px solid var(--am);
  position:sticky;top:0;z-index:1000;
  box-shadow:var(--sh1);
}

.logo-area{display:flex;align-items:center;gap:14px}
.logo-svg{display:flex;align-items:center}
.logo-img{
  height:32px;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);transition:filter .2s;
}
[data-theme="light"] .logo-img{filter:brightness(0)}

.logo{
  font-family:var(--fm);
  font-size:18px;font-weight:700;
  letter-spacing:2px;
  display:flex;align-items:center;
}
.logo-mark{color:var(--am)}
.logo-dot{color:var(--t3);margin:0 3px}
.logo-rest{color:var(--t1)}

.header-divider{width:1px;height:20px;background:var(--b2)}

.header-sub{
  font-family:var(--fm);
  font-size:9px;font-weight:600;
  color:var(--t3);letter-spacing:3px;text-transform:uppercase;
}

.header-actions{display:flex;align-items:center;gap:8px}

.header-user{
  background:var(--s2);border:1px solid var(--b1);
  border-radius:var(--r2);padding:4px 12px 4px 5px;
  font-size:13px;color:var(--t2);
  display:flex;align-items:center;gap:8px;
  transition:border-color .2s;
}
.header-user:hover{border-color:var(--b2)}

.header-avatar{
  width:28px;height:28px;
  background:var(--am);border-radius:var(--r1);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fm);font-size:13px;font-weight:700;
  color:#07090f;flex-shrink:0;
}

.header-user strong{color:var(--t1);font-weight:600;font-size:13px}

.header-role{
  background:var(--amd);color:var(--am);
  border:1px solid rgba(245,158,11,.22);
  padding:1px 7px;border-radius:20px;
  font-family:var(--fm);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;
}

/* ═══════════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════════ */
.nav{
  display:flex;
  background:var(--s0);
  border-bottom:1px solid var(--b1);
  padding:0 26px;overflow-x:auto;
  position:sticky;top:58px;z-index:999;
}
.nav::-webkit-scrollbar{height:0}

.nav-item{
  padding:0 16px;height:44px;line-height:44px;
  font-family:var(--fm);font-size:10.5px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  cursor:pointer;color:var(--t3);
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s,background .15s;
  white-space:nowrap;
}
.nav-item:hover{color:var(--t2)}
.nav-item.active{color:var(--am);border-bottom-color:var(--am);background:var(--amd)}

/* ═══════════════════════════════════════════════════════════════
   CONTAINER
═══════════════════════════════════════════════════════════════ */
.container{
  max-width:1480px;margin:0 auto;
  padding:22px 22px 80px;
  position:relative;z-index:1;
}
.page-section{display:none}
.page-section.active{display:block}

/* ═══════════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════════ */
.card{
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:var(--r3);
  padding:20px 22px;margin-bottom:14px;
  box-shadow:var(--sh1);
  transition:border-color .2s;
}
.card:hover{border-color:var(--b2)}

.card-header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:18px;padding-bottom:14px;
  border-bottom:1px solid var(--b1);
}

.card-icon{
  width:34px;height:34px;
  background:var(--amd);
  border:1px solid rgba(245,158,11,.2);
  border-radius:var(--r1);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--am);
}

.card-title{
  font-family:var(--fm);
  font-size:13px;font-weight:700;
  color:var(--t1);letter-spacing:.5px;
}
.card-desc{font-size:12px;color:var(--t3);margin-top:2px}

/* ═══════════════════════════════════════════════════════════════
   GRID
═══════════════════════════════════════════════════════════════ */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}
@media(max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .col-span-2,.col-span-3{grid-column:span 1}
}

/* ═══════════════════════════════════════════════════════════════
   FORMULÁRIO
═══════════════════════════════════════════════════════════════ */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}

.field label{
  font-family:var(--fm);
  font-size:10px;font-weight:600;
  color:var(--t2);text-transform:uppercase;letter-spacing:1.2px;
}
.field label .req{color:var(--am)}

input,select,textarea{
  background:var(--in);
  border:1px solid var(--b2);
  border-left:2px solid transparent;
  border-radius:var(--r1);
  color:var(--t1);
  font-size:13.5px;font-family:var(--fs);
  padding:9px 12px;
  transition:border-color .18s,box-shadow .18s,background .18s;
  outline:none;width:100%;
}
input::placeholder,textarea::placeholder{color:var(--t3);font-size:13px}
input:focus,select:focus,textarea:focus{
  border-color:var(--b2);
  border-left-color:var(--am);
  box-shadow:0 0 0 3px var(--amd);
  background:var(--in2);
}

select{
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='%233d4f66' d='M5.5 7L0 0h11z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}
select option{background:var(--s2);color:var(--t1)}
.areatext{min-height:80px;resize:vertical}

.observacoes-textarea,
textarea#observacoes,
textarea#edit-observacoes{
  font-weight:500;color:#fda4af;
  background:rgba(244,63,94,.06);
  border-color:rgba(244,63,94,.22);
  border-left-color:var(--er);
}
.observacoes-textarea:focus,
textarea#observacoes:focus,
textarea#edit-observacoes:focus{
  border-color:rgba(244,63,94,.5);
  box-shadow:0 0 0 3px rgba(244,63,94,.09);
}
.observacoes-texto{font-weight:500;color:#fda4af;white-space:pre-wrap}

input[readonly]{
  background:rgba(255,255,255,.02);
  color:var(--t3);cursor:default;
  border-color:rgba(255,255,255,.04);
  border-left-color:transparent;
}
[data-theme="light"] input[readonly]{background:rgba(0,0,0,.03);color:var(--t3)}

/* ═══════════════════════════════════════════════════════════════
   AUTOCOMPLETE
═══════════════════════════════════════════════════════════════ */
.ac-wrap{position:relative}

.ac-list{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--s2);
  border:1px solid var(--am);
  border-radius:var(--r2);
  max-height:230px;overflow-y:auto;z-index:500;
  box-shadow:var(--sh3);display:none;
}
.ac-list.show{display:block;animation:acIn .15s var(--e1)}
@keyframes acIn{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:translateY(0)}
}
.ac-item{
  padding:9px 13px;cursor:pointer;
  font-family:var(--fm);font-size:12.5px;
  border-bottom:1px solid var(--b1);
  transition:background .1s;color:var(--t1);
}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.active{background:var(--amd);color:var(--am2)}
.ac-item .hint{font-size:10.5px;color:var(--t3);margin-top:2px}
.ac-item mark{background:rgba(245,158,11,.22);color:var(--am2);border-radius:2px;padding:0 2px}

/* ═══════════════════════════════════════════════════════════════
   BOTÕES
═══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;
  border-radius:var(--r1);
  font-family:var(--fm);
  font-size:11px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  border:none;cursor:pointer;
  transition:all .18s var(--e1);white-space:nowrap;
}
.btn:active{transform:scale(.98)}

.btn-primary{background:var(--cy);color:#07090f;box-shadow:0 2px 10px rgba(34,211,238,.22)}
.btn-primary:hover{background:var(--cy2);transform:translateY(-1px);box-shadow:0 5px 18px rgba(34,211,238,.32)}
[data-theme="light"] .btn-primary{color:#fff;background:var(--cy);box-shadow:0 2px 10px rgba(8,145,178,.22)}

.btn-success{background:var(--ok);color:#fff;box-shadow:0 2px 10px rgba(16,185,129,.22)}
.btn-success:hover{background:#059669;transform:translateY(-1px)}

.btn-outline{
  background:transparent;
  border:1.5px solid var(--b2);color:var(--t2);
}
.btn-outline:hover{border-color:var(--am);color:var(--am);background:var(--amd)}

.btn-gold{background:var(--am);color:#07090f;font-weight:700;box-shadow:0 2px 10px rgba(245,158,11,.24)}
.btn-gold:hover{background:var(--am2);transform:translateY(-1px);box-shadow:var(--amg)}

.btn-danger{background:var(--er);color:#fff}
.btn-danger:hover{background:#e11d48;transform:translateY(-1px)}

.btn-sm{padding:5px 12px;font-size:10px}

/* Tema toggle */
.btn-theme-toggle{
  width:34px;height:34px;border-radius:var(--r1);
  border:1px solid var(--b2);background:var(--s2);
  color:var(--t2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;padding:0;
}
.btn-theme-toggle:hover{border-color:var(--am);color:var(--am);background:var(--amd)}
.icon-sun{display:none}
.icon-moon{display:block}
[data-theme="light"] .icon-sun{display:block}
[data-theme="light"] .icon-moon{display:none}

/* ═══════════════════════════════════════════════════════════════
   TABELA DE ITENS
═══════════════════════════════════════════════════════════════ */
.items-table{width:100%;border-collapse:collapse}
.items-table th{
  background:var(--s2);padding:9px 8px;text-align:left;
  font-family:var(--fm);font-size:9px;font-weight:700;
  color:var(--t3);text-transform:uppercase;letter-spacing:1px;
  border-bottom:2px solid var(--b2);
}
.items-table td{
  padding:5px;border-bottom:1px solid var(--b1);
  vertical-align:middle;font-size:13px;color:var(--t1);
}
.items-table tbody tr:hover{background:rgba(255,255,255,.02)}
[data-theme="light"] .items-table tbody tr:hover{background:rgba(0,0,0,.02)}
.items-table input,.items-table textarea{
  background:var(--in);border:1px solid var(--b1);
  padding:6px 8px;font-size:12.5px;
  border-radius:var(--r1);color:var(--t1);
}
.items-table input:focus,.items-table textarea:focus{
  border-color:var(--am);background:var(--in2);
  box-shadow:0 0 0 2px var(--amd);
}
.row-num{font-family:var(--fm);font-size:10px;color:var(--t3);font-weight:700;width:28px;text-align:center}
.total-cell{font-family:var(--fm);font-weight:700;color:var(--am);font-size:12.5px}
.weight-cell{font-family:var(--fm);font-weight:600;color:var(--ok);font-size:11.5px}

.del-btn{
  background:none;border:none;cursor:pointer;
  color:var(--t3);padding:4px 7px;
  border-radius:var(--r1);font-size:13px;transition:all .15s;
}
.del-btn:hover{color:var(--er);background:var(--erd)}

/* ═══════════════════════════════════════════════════════════════
   TOTAL BAR
═══════════════════════════════════════════════════════════════ */
.total-bar{
  background:var(--s2);border:1px solid var(--b2);
  border-radius:var(--r2);padding:13px 22px;
  display:flex;align-items:center;justify-content:flex-end;
  gap:20px;margin-top:14px;flex-wrap:wrap;
}
.total-label{
  font-family:var(--fm);font-size:9px;color:var(--t3);
  font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
}
.total-value{
  font-family:var(--fm);
  font-size:24px;font-weight:700;color:var(--am);letter-spacing:-1px;
}
.total-weight{
  font-family:var(--fm);
  font-size:16px;font-weight:700;color:var(--ok);
  background:var(--okd);padding:4px 14px;border-radius:var(--r1);
  border:1px solid rgba(16,185,129,.2);
}

.form-actions{
  display:flex;gap:10px;align-items:center;
  padding:16px 0 0;border-top:1px solid var(--b1);
  margin-top:8px;flex-wrap:wrap;
}
.spacer{flex:1}

.cadastro-card{
  background:rgba(34,211,238,.04);
  border:1px dashed rgba(34,211,238,.22);
  border-radius:var(--r3);padding:18px 22px;margin-bottom:14px;
  transition:border-color .2s;
}
.cadastro-card:hover{border-color:rgba(34,211,238,.4)}

.cadastro-badge{
  background:var(--cyd);color:var(--cy2);
  border:1px solid rgba(34,211,238,.2);
  font-family:var(--fm);font-size:9px;font-weight:700;
  letter-spacing:1.5px;padding:3px 9px;
  border-radius:20px;text-transform:uppercase;
}

.editing-banner{
  background:rgba(245,158,11,.06);
  border:1px solid rgba(245,158,11,.18);
  border-left:3px solid var(--am);
  border-radius:var(--r1);padding:10px 18px;margin-bottom:14px;
  display:flex;align-items:center;gap:12px;
}
.banner-icon{font-size:16px}
.banner-text{
  font-family:var(--fm);font-size:12px;font-weight:700;
  color:var(--am);flex:1;letter-spacing:.5px;
}
.btn-cancel-edit{
  background:transparent;border:1px solid rgba(245,158,11,.28);color:var(--am);
  font-family:var(--fm);font-size:10px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--r1);cursor:pointer;transition:all .15s;
}
.btn-cancel-edit:hover{background:var(--amd)}

/* ═══════════════════════════════════════════════════════════════
   TABELA DE PEDIDOS
═══════════════════════════════════════════════════════════════ */
.orders-table{width:100%;border-collapse:collapse}
.orders-table th{
  background:var(--s2);padding:10px 13px;text-align:left;
  font-family:var(--fm);font-size:9px;font-weight:700;
  color:var(--t3);text-transform:uppercase;letter-spacing:1px;
  border-bottom:2px solid var(--b2);
}
.orders-table td{
  padding:10px 13px;border-bottom:1px solid var(--b1);
  font-size:13px;color:var(--t1);
}
.orders-table tbody tr{transition:background .1s}
.orders-table tbody tr:hover{background:rgba(255,255,255,.025);cursor:pointer}
[data-theme="light"] .orders-table tbody tr:hover{background:rgba(0,0,0,.025)}

/* número do pedido em mono */
.orders-table td:first-child{
  font-family:var(--fm);font-weight:700;color:var(--am);font-size:12px;letter-spacing:.5px;
}

.actions-cell{display:flex;align-items:center;gap:5px;flex-wrap:wrap}

.btn-edit{
  background:var(--cyd);border:1px solid rgba(34,211,238,.18);color:var(--cy2);
  font-family:var(--fm);font-size:9.5px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r1);cursor:pointer;transition:background .14s,border-color .14s,color .14s;
  /* Trava altura/alinhamento: evita deslocamento vertical na linha da tabela */
  display:inline-block;
  vertical-align:middle;
  line-height:1.4;
  min-height:22px;
  box-sizing:border-box;
  white-space:nowrap;
  transform:none;
}
.btn-edit:hover{background:rgba(34,211,238,.18)}
[data-theme="light"] .btn-edit{color:var(--cy)}
.btn-edit.btn-danger{background:var(--erd);border-color:rgba(244,63,94,.18);color:var(--er)}
.btn-edit.btn-danger:hover{background:rgba(244,63,94,.22)}
.btn-edit.btn-whatsapp{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.3);color:#25d366}
.btn-edit.btn-whatsapp:hover{background:rgba(37,211,102,.22);transform:translateY(-1px)}

/* BADGES */
.badge{
  display:inline-flex;align-items:center;
  padding:2px 9px;border-radius:3px;
  font-family:var(--fm);font-size:9px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;white-space:nowrap;
}
.badge-blue {background:var(--cyd);color:var(--cy2);border:1px solid rgba(34,211,238,.18)}
[data-theme="light"] .badge-blue{color:var(--cy)}
[data-theme="light"] .observacoes-textarea,
[data-theme="light"] textarea#observacoes,
[data-theme="light"] textarea#edit-observacoes{color:#b91c1c;background:rgba(220,38,38,.05);border-left-color:var(--er)}
[data-theme="light"] .observacoes-texto{color:#b91c1c}
.badge-green{background:var(--okd);color:var(--ok);border:1px solid rgba(16,185,129,.18)}

.badge-status-pendente {background:var(--erd);color:var(--er);border:1px solid rgba(244,63,94,.22)}
.badge-status-andamento{background:var(--amd);color:var(--am);border:1px solid rgba(245,158,11,.22)}
.badge-status-concluido{background:var(--okd);color:var(--ok);border:1px solid rgba(16,185,129,.22)}

.status-select{
  font-family:var(--fm);font-size:10.5px;letter-spacing:.5px;
  padding:4px 26px 4px 8px;border-radius:var(--r1);
  border:1px solid var(--b2);
  background:var(--in);color:var(--t2);
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%233d4f66' d='M5 7L0 0h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}

/* STAT CARDS */
.stat-card{
  background:var(--s1);border:1px solid var(--b1);
  border-top:2px solid var(--am);
  border-radius:var(--r3);padding:20px;text-align:center;
  transition:all .2s var(--e1);
}
.stat-card:hover{border-color:var(--b2);border-top-color:var(--am);transform:translateY(-2px);box-shadow:var(--sh2)}
.stat-card .stat-val{
  font-family:var(--fm);font-size:30px;font-weight:700;color:var(--am);
  letter-spacing:-1px;
}
.stat-card .stat-label{
  font-family:var(--fm);font-size:9px;color:var(--t3);
  margin-top:5px;text-transform:uppercase;letter-spacing:1.5px;
}

/* ═══════════════════════════════════════════════════════════════
   MODAIS
═══════════════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);
  display:none;align-items:center;justify-content:center;
  z-index:5000;padding:16px;
}
.modal-overlay.show{display:flex;animation:fadeIn .18s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal{
  background:var(--s1);
  border:1px solid var(--b2);border-top:2px solid var(--am);
  border-radius:var(--r3);padding:26px;width:700px;
  max-width:95vw;max-height:88vh;overflow-y:auto;
  box-shadow:var(--sh3);animation:modalIn .25s var(--e2);
  color:var(--t1);
}
@keyframes modalIn{
  from{opacity:0;transform:scale(.95) translateY(16px)}
  to  {opacity:1;transform:scale(1) translateY(0)}
}
.modal h2{
  font-family:var(--fm);font-size:16px;font-weight:700;
  color:var(--t1);margin-bottom:20px;letter-spacing:.5px;
}
.modal-view-content{
  background:var(--s1);border:1px solid var(--b2);border-top:2px solid var(--am);
  border-radius:var(--r3);padding:28px 30px;width:980px;
  max-width:98vw;max-height:90vh;overflow-y:auto;
  box-shadow:var(--sh3);animation:modalIn .25s var(--e2);
  color:var(--t1);
}
.modal-view-header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:20px;padding-bottom:16px;
  border-bottom:1px solid var(--b1);
}
.modal-view-title{
  font-family:var(--fm);font-size:20px;font-weight:700;
  color:var(--am);letter-spacing:1px;
}
.modal-view-num{font-family:var(--fm);font-size:12px;color:var(--t3);letter-spacing:.5px}

.view-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.view-full{grid-column:1/-1}
.view-section{
  background:var(--s2);border:1px solid var(--b1);
  border-radius:var(--r1);padding:10px 14px;
}
.view-label{
  font-family:var(--fm);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;
  color:var(--t3);margin-bottom:5px;
}
.view-value{font-size:13px;font-weight:600;color:var(--t1)}
.view-hint{font-family:var(--fm);font-size:10.5px;color:var(--t3);margin-top:2px}

.view-totals-bar{
  background:var(--s2);border:1px solid var(--b2);
  border-radius:var(--r2);padding:12px 20px;
  display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap;
}

.modal-input{background:var(--in) !important;border-color:var(--b2) !important;color:var(--t1) !important}
.modal-input:focus{border-left-color:var(--am) !important;box-shadow:0 0 0 3px var(--amd) !important}

/* ─── MODAL VISUALIZAR — cores explícitas dark/light (evita texto transparente) ─── */
.modal-view-content *,
.modal-view-content p,
.modal-view-content span,
.modal-view-content div,
.modal-view-content td,
.modal-view-content th,
.modal-view-content strong {
  -webkit-text-fill-color: unset;
}
.modal-view-content .view-value  { color: var(--t1) !important; }
.modal-view-content .view-label  { color: var(--t3) !important; }
.modal-view-content .view-hint   { color: var(--t3) !important; }
.modal-view-content .view-totals-bar { color: var(--t1); }
.modal-view-content .total-label { color: var(--t3) !important; }
.modal-view-content .total-value { color: var(--am) !important; }
.modal-view-content .total-weight{ color: var(--ok) !important; }
.modal-view-content .items-table th { color: var(--t3) !important; background: var(--s2) !important; }
.modal-view-content .items-table td { color: var(--t1) !important; }
.modal-view-content .items-table .row-num    { color: var(--t3) !important; }
.modal-view-content .items-table .weight-cell{ color: var(--ok) !important; }
.modal-view-content .items-table .total-cell { color: var(--am) !important; }
.modal-view-content .modal-view-title        { color: var(--am) !important; }
.modal-view-content .modal-view-num          { color: var(--t3) !important; }

@media(max-width:700px){.view-grid{grid-template-columns:1fr 1fr}}

/* ═══════════════════════════════════════════════════════════════
   ADMIN
═══════════════════════════════════════════════════════════════ */
.admin-tabs{
  display:flex;background:var(--s1);
  border:1px solid var(--b1);
  border-radius:var(--r3) var(--r3) 0 0;overflow:hidden;
}
.admin-tab{
  padding:12px 22px;font-family:var(--fm);
  font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  cursor:pointer;color:var(--t3);border-bottom:2px solid transparent;
  transition:all .18s;background:var(--s2);
}
.admin-tab:hover{color:var(--t2);background:var(--s3)}
.admin-tab.active{color:var(--am);border-bottom-color:var(--am);background:var(--s1)}
.admin-panel{display:none}
.admin-panel.active{display:block}
.admin-panel > .card{border-radius:0 0 var(--r3) var(--r3);border-top:none}

/* ═══════════════════════════════════════════════════════════════
   CARGOS
═══════════════════════════════════════════════════════════════ */
.cargo-card{
  border:1px solid var(--b1);border-radius:var(--r2);
  padding:16px 18px;margin-bottom:12px;
  background:var(--s2);transition:border-color .18s;
}
.cargo-card:hover{border-color:var(--b2)}
.cargo-card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--b1);
}
.cargo-nome{font-family:var(--fm);font-size:14px;font-weight:700;color:var(--t1);letter-spacing:.3px}
.cargo-slug-badge{
  display:inline-block;background:var(--amd);color:var(--am);
  border:1px solid rgba(245,158,11,.22);border-radius:var(--r1);
  padding:2px 8px;margin-left:8px;
  font-family:var(--fm);font-size:9.5px;font-weight:700;
}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:7px}
.perm-check{
  display:flex;align-items:center;gap:8px;
  background:var(--in);border:1px solid var(--b1);
  border-radius:var(--r1);padding:8px 12px;
  cursor:pointer;font-size:12.5px;font-weight:500;
  color:var(--t2);transition:all .14s;user-select:none;
}
.perm-check:hover{border-color:var(--am);background:var(--amd);color:var(--t1)}
.perm-check input[type="checkbox"]{width:14px;height:14px;accent-color:var(--am);cursor:pointer;flex-shrink:0}
.perm-check.perm-locked{opacity:.42;cursor:not-allowed}
.perm-check.perm-locked:hover{border-color:var(--b1);background:var(--in)}

/* ═══════════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════════ */
.toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--s1);border:1px solid var(--b2);
  border-left:3px solid var(--ok);
  border-radius:var(--r2);padding:13px 20px;
  box-shadow:var(--sh3);
  transform:translateY(120px) scale(.95);opacity:0;
  transition:all .32s var(--e2);
  z-index:9999;max-width:320px;min-width:220px;
}
.toast.show{transform:translateY(0) scale(1);opacity:1}
.toast.error{border-left-color:var(--er)}
.toast-title{
  font-family:var(--fm);font-weight:700;
  margin-bottom:3px;color:var(--t1);font-size:13px;letter-spacing:.3px;
}
.toast-msg{color:var(--t3);font-size:12px}

/* Empty states */
#no-orders,#no-clientes,#no-transportadoras{
  text-align:center;padding:52px 20px;
  color:var(--t3);font-family:var(--fm);font-size:12px;letter-spacing:.5px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  .header{padding:0 14px}
  .nav{padding:0 10px}
  .container{padding:14px 12px 60px}
  .card{padding:16px 14px}
  .modal,.modal-view-content{padding:18px 14px}
  .logo-img{height:26px}
  .login-box{padding:32px 22px 26px}
  .login-logo-img{height:54px}
  .header-divider,.header-sub{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════════════════ */
@media print{
  .header,.nav,.form-actions,.del-btn,.ac-list,
  .toast,.cadastro-card,.editing-banner,.btn,
  .modal-overlay,.actions-cell{display:none !important}
  body{background:#fff;color:#111}
  body::before{display:none}
  .card{border:1px solid #e5e7eb;box-shadow:none;background:#fff}
  .items-table th,.orders-table th{background:#f9fafb;color:#374151}
  .items-table td,.orders-table td{color:#111;border-color:#e5e7eb}
  .total-value{color:#d97706}
  .total-weight{color:#059669;background:none;border:none;padding:0}
  input,select,textarea{background:transparent;border-color:#e5e7eb;color:#111;box-shadow:none}
  .view-section{background:#f9fafb;border-color:#e5e7eb}
  .view-value{color:#111}
}

/* ═══════════════════════════════════════════════════════════════
   EXPEDIÇÃO — Mobile-first, equipe de despacho
═══════════════════════════════════════════════════════════════ */

/* ---- Navegação: destaque âmbar para a aba EXPEDIÇÃO ---------- */
.nav .nav-item-expedicao{
  color:var(--am);
  font-weight:600;
  letter-spacing:.8px;
}
.nav .nav-item-expedicao.active{
  background:rgba(251,191,36,.14);
  border-color:rgba(251,191,36,.35);
  color:var(--am2);
  box-shadow:var(--amg);
}
[data-theme="light"] .nav .nav-item-expedicao{ color:#c77a00; }
[data-theme="light"] .nav .nav-item-expedicao.active{
  background:rgba(251,191,36,.18);
  border-color:rgba(251,191,36,.5);
  color:#a86400;
}

/* ---- Filtros da aba (busca + tabs) --------------------------- */
.expedicao-filters{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}
.expedicao-filters .exp-search{
  width:100%;
  padding:12px 14px;
  font-size:15px;
  border-radius:var(--r2);
}
.exp-status-tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.exp-status-tab{
  flex:1;
  min-width:80px;
  padding:10px 12px;
  background:var(--s1);
  color:var(--t2);
  border:1px solid var(--b1);
  border-radius:var(--r2);
  font-family:var(--fm);
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  cursor:pointer;
  transition:all .15s var(--e1);
  text-transform:uppercase;
}
.exp-status-tab:hover{ background:var(--s2); border-color:var(--b2); color:var(--t1); }
.exp-status-tab.active{
  background:rgba(251,191,36,.14);
  border-color:rgba(251,191,36,.4);
  color:var(--am);
}
[data-theme="light"] .exp-status-tab{ background:#fff; color:#555; }
[data-theme="light"] .exp-status-tab.active{ background:#fff8e6; border-color:#e0a800; color:#a86400; }

/* ---- Lista de cards ----------------------------------------- */
.expedicao-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 768px){
  .expedicao-list{ grid-template-columns:1fr 1fr; gap:14px; }
}
@media (min-width: 1200px){
  .expedicao-list{ grid-template-columns:1fr 1fr 1fr; }
}

/* ---- Cartão do pedido --------------------------------------- */
.expedicao-card{
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:var(--r3);
  padding:14px 14px 12px;
  cursor:pointer;
  transition:all .15s var(--e1);
  box-shadow:var(--sh1);
  position:relative;
}
.expedicao-card:hover{
  border-color:var(--b2);
  background:var(--s2);
  transform:translateY(-1px);
  box-shadow:var(--sh2);
}
.expedicao-card-urgente{
  border-left:4px solid #dc2626;
  background:linear-gradient(90deg, rgba(220,38,38,.07), var(--s1) 40%);
}
.expedicao-card-urgente:hover{
  background:linear-gradient(90deg, rgba(220,38,38,.1), var(--s2) 40%);
}
[data-theme="light"] .expedicao-card{ background:#fff; }
[data-theme="light"] .expedicao-card:hover{ background:#fafbff; }
[data-theme="light"] .expedicao-card-urgente{
  background:linear-gradient(90deg, rgba(220,38,38,.07), #fff 40%);
}

.exp-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:6px;
}
.exp-card-num{
  font-family:var(--fm);
  font-size:16px;
  font-weight:700;
  color:var(--t1);
  letter-spacing:.5px;
}
.exp-card-oc{
  font-size:11px;
  color:var(--t3);
  font-family:var(--fm);
  margin-bottom:4px;
}
.exp-card-cliente{
  font-size:15px;
  font-weight:600;
  color:var(--t1);
  line-height:1.3;
  margin:4px 0 10px;
  word-break:break-word;
}
.exp-card-transp{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--t2);
  margin-bottom:10px;
}
.exp-card-transp svg{ color:var(--t3); flex-shrink:0; }
.exp-card-transp-empty{ color:var(--t3); font-style:italic; }

.exp-card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-top:8px;
  border-top:1px dashed var(--b1);
}
.exp-card-date{
  font-family:var(--fm);
  font-size:12px;
  color:var(--t3);
}
.exp-card-obs{
  margin-top:10px;
  padding:8px 10px;
  background:var(--s0);
  border-left:3px solid var(--am);
  border-radius:var(--r1);
  font-size:12px;
  color:var(--t2);
  line-height:1.4;
}
[data-theme="light"] .exp-card-obs{ background:#fffbe8; border-left-color:#e0a800; color:#555; }

/* ---- Badges de urgência ------------------------------------- */
.exp-badge-urgente{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 9px;
  background:rgba(220,38,38,.15);
  color:#ef4444;
  border:1px solid rgba(220,38,38,.35);
  border-radius:var(--r1);
  font-size:11px;
  font-weight:700;
  font-family:var(--fm);
  letter-spacing:.5px;
  animation:exp-pulse-urg 1.8s ease-in-out infinite;
}
@keyframes exp-pulse-urg{
  0%, 100%{ box-shadow:0 0 0 0 rgba(220,38,38,.5); }
  50%{ box-shadow:0 0 0 6px rgba(220,38,38,0); }
}
.exp-badge-normal{
  display:inline-flex;
  padding:4px 9px;
  background:var(--s0);
  color:var(--t3);
  border:1px solid var(--b1);
  border-radius:var(--r1);
  font-size:11px;
  font-weight:600;
  font-family:var(--fm);
  letter-spacing:.5px;
}

/* ---- Badge de status na expedição --------------------------- */
.exp-status-badge{
  display:inline-block;
  padding:5px 10px;
  border-radius:var(--r1);
  font-family:var(--fm);
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  white-space:nowrap;
}
.exp-st-pendente{ background:var(--erd); color:var(--er); border:1px solid rgba(244,63,94,.28); }
.exp-st-andamento{ background:var(--amd); color:var(--am); border:1px solid rgba(245,158,11,.28); }
.exp-st-concluido{ background:var(--okd); color:var(--ok); border:1px solid rgba(16,185,129,.28); }

/* ---- Botões de status (no card e no modal) ----------------- */
.exp-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--b1);
}
.exp-btn-st{
  padding:10px 8px;
  background:var(--s0);
  color:var(--t2);
  border:1px solid var(--b1);
  border-radius:var(--r2);
  font-family:var(--fm);
  font-size:11px;
  font-weight:600;
  letter-spacing:.4px;
  cursor:pointer;
  transition:all .12s var(--e1);
  text-transform:uppercase;
  min-height:40px;          /* touch target confortável */
}
.exp-btn-st:hover{ background:var(--s2); color:var(--t1); border-color:var(--b2); }
.exp-btn-st.active{
  background:rgba(56,217,245,.15);
  color:var(--cy);
  border-color:rgba(56,217,245,.45);
  font-weight:700;
}
.exp-btn-st[data-st="pendente"].active{
  background:var(--erd); color:var(--er); border-color:rgba(244,63,94,.4);
}
.exp-btn-st[data-st="em_andamento"].active{
  background:var(--amd); color:var(--am); border-color:rgba(245,158,11,.4);
}
.exp-btn-st[data-st="concluido"].active{
  background:var(--okd); color:var(--ok); border-color:rgba(16,185,129,.4);
}

/* ---- Botões "Liberar/Revogar" na lista de pedidos ---------- */
.btn-expedicao-off{
  background:rgba(251,191,36,.12) !important;
  color:var(--am) !important;
  border-color:rgba(251,191,36,.35) !important;
  /* Tamanho fixo: evita que o botão mude de tamanho no hover */
  min-width:80px;
  text-align:center;
  display:inline-block;
  vertical-align:middle;
  line-height:1.4;
  font-size:12px !important;
  padding:4px 10px !important;
  box-sizing:border-box;
}
.btn-expedicao-off:hover{
  background:rgba(251,191,36,.22) !important;
  border-color:rgba(251,191,36,.5) !important;
  /* Sem transform, sem mudança de tamanho */
  transform:none !important;
}
.btn-expedicao-on{
  background:var(--okd) !important;
  color:var(--ok) !important;
  border-color:rgba(16,185,129,.35) !important;
  /* Mesmo tamanho fixo */
  min-width:80px;
  text-align:center;
  display:inline-block;
  vertical-align:middle;
  line-height:1.4;
  font-size:12px !important;
  padding:4px 10px !important;
  box-sizing:border-box;
}
.btn-expedicao-on:hover{
  background:rgba(239,68,68,.12) !important;
  color:#ef4444 !important;
  border-color:rgba(239,68,68,.4) !important;
  transform:none !important;
}
/* Remove o ::after que adicionava conteúdo e causava deslocamento */
.btn-expedicao-on:hover::after{
  content:'' !important;
  display:none !important;
}

/* ---- Modal de visualização (mobile-first) ----------------- */
.exp-view-header-bar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  padding-bottom:14px;
  border-bottom:1px solid var(--b1);
  margin-bottom:16px;
}
.exp-view-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 600px){
  .exp-view-grid{ grid-template-columns:1fr 1fr; }
}
.exp-view-field{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.exp-view-field-full{ grid-column:1 / -1; }
.exp-view-field label{
  font-family:var(--fm);
  font-size:10px;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:600;
}
.exp-view-field > div{
  font-size:14px;
  color:var(--t1);
  padding:8px 10px;
  background:var(--s0);
  border:1px solid var(--b1);
  border-radius:var(--r2);
  min-height:36px;
}
[data-theme="light"] .exp-view-field > div{ background:#f8f9ff; }

.exp-view-actions{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--b1);
}
.exp-view-actions-label{
  font-family:var(--fm);
  font-size:11px;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:8px;
  font-weight:600;
}
.exp-view-actions-btns{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}
.exp-view-actions-btns .exp-btn-st{
  padding:14px 10px;
  font-size:12px;
  min-height:48px;
}
.exp-view-meta{
  margin-top:16px;
  padding-top:12px;
  border-top:1px dashed var(--b1);
  font-size:11px;
  color:var(--t3);
  line-height:1.6;
}

/* ---- Responsivo: esconder header-user/actions no mobile ---- */
@media (max-width: 640px){
  .expedicao-card{ padding:12px 12px 10px; }
  .exp-card-num{ font-size:15px; }
  .exp-card-cliente{ font-size:14px; }
  .exp-card-actions .exp-btn-st{ padding:12px 6px; font-size:10px; }
  .exp-view-actions-btns{ grid-template-columns:1fr; }
  .exp-view-actions-btns .exp-btn-st{ font-size:13px; }
}

/* ═══════════════════════════════════════════════════════════════
   V2 — NOTIFICAÇÕES, BOTÕES DE STATUS MODERNOS, ITENS NA EXPEDIÇÃO
═══════════════════════════════════════════════════════════════ */

/* ---- Sino de notificações no header ------------------------- */
.notif-wrap{ position:relative; }
.btn-notif{
  position:relative;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:var(--r2);
  color:var(--t2);
  cursor:pointer;
  transition:all .15s var(--e1);
}
.btn-notif:hover{ background:var(--s2); color:var(--t1); border-color:var(--b2); }
[data-theme="light"] .btn-notif{ background:#fff; color:#555; border-color:#d4d4d4; }
[data-theme="light"] .btn-notif:hover{ background:#f8f9ff; color:#111; }

.notif-badge{
  position:absolute;
  top:-4px; right:-4px;
  min-width:18px; height:18px;
  padding:0 5px;
  background:#ef4444; color:#fff;
  border-radius:9px;
  font-family:var(--fm);
  font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg);
  line-height:1;
}
.notif-badge.flash{ animation:notif-flash 1.2s ease-in-out; }
@keyframes notif-flash{
  0%,100%{ transform:scale(1); }
  25%{ transform:scale(1.3); box-shadow:0 0 0 8px rgba(239,68,68,0); }
  50%{ transform:scale(1); box-shadow:0 0 0 0 rgba(239,68,68,.5); }
}

/* ---- Dropdown de notificações ------------------------------- */
.notif-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:360px;
  max-width:calc(100vw - 24px);
  background:var(--s1);
  border:1px solid var(--b2);
  border-radius:var(--r3);
  box-shadow:var(--sh3);
  z-index:1000;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:all .18s var(--e1);
  overflow:hidden;
}
.notif-dropdown.open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
[data-theme="light"] .notif-dropdown{ background:#fff; border-color:rgba(0,0,0,.12); }

.notif-head{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--b1);
  background:var(--s0);
}
.notif-head strong{ font-size:13px; color:var(--t1); letter-spacing:.3px; }
.notif-mark-all{
  background:transparent;
  border:none;
  color:var(--cy);
  font-size:11px;
  cursor:pointer;
  font-family:var(--fm);
  padding:4px 8px;
  border-radius:var(--r1);
  transition:background .1s;
}
.notif-mark-all:hover{ background:var(--cyd); }
[data-theme="light"] .notif-head{ background:#f8f9ff; }

.notif-body{
  max-height:440px;
  overflow-y:auto;
}
.notif-empty{
  padding:32px 16px;
  text-align:center;
  color:var(--t3);
  font-size:13px;
}
.notif-item{
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--b1);
  cursor:pointer;
  transition:background .12s;
  align-items:flex-start;
  position:relative;
}
.notif-item:hover{ background:var(--s2); }
.notif-item:last-child{ border-bottom:none; }
.notif-item.lida{ opacity:.55; }
.notif-item.lida:hover{ opacity:.85; }

.notif-icon{
  width:28px; height:28px;
  background:rgba(251,191,36,.14);
  color:var(--am);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
}
.notif-item.lida .notif-icon{ background:var(--s0); color:var(--t3); }

.notif-content{ flex:1; min-width:0; }
.notif-title{
  font-size:13px;
  font-weight:600;
  color:var(--t1);
  margin-bottom:3px;
  line-height:1.3;
}
.notif-msg{
  font-size:12px;
  color:var(--t2);
  line-height:1.4;
  word-wrap:break-word;
}
.notif-time{
  font-size:10px;
  color:var(--t3);
  font-family:var(--fm);
  margin-top:4px;
}
.notif-dot{
  width:8px; height:8px;
  background:var(--cy);
  border-radius:50%;
  margin-top:8px;
  flex-shrink:0;
  box-shadow:0 0 8px rgba(56,217,245,.5);
}
[data-theme="light"] .notif-item:hover{ background:#f8f9ff; }

/* ---- BOTÕES DE STATUS MODERNOS (segmented control) -------- */
.status-seg{
  display:inline-flex;
  align-items:stretch;
  gap:0;
  background:var(--s0);
  border:1px solid var(--b1);
  border-radius:var(--r3);
  padding:3px;
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15);
}
[data-theme="light"] .status-seg{ background:#f3f4f6; border-color:#d4d4d4; box-shadow:inset 0 1px 2px rgba(0,0,0,.04); }

.status-seg .seg-btn{
  padding:7px 14px;
  background:transparent;
  border:none;
  color:var(--t3);
  font-family:var(--fm);
  font-size:11px;
  font-weight:600;
  letter-spacing:.4px;
  cursor:pointer;
  transition:all .16s var(--e1);
  text-transform:uppercase;
  border-radius:calc(var(--r3) - 3px);
  white-space:nowrap;
  position:relative;
}
.status-seg .seg-btn:hover:not(.active){ color:var(--t1); background:var(--s2); }
[data-theme="light"] .status-seg .seg-btn:hover:not(.active){ background:#e8eaf5; color:#111; }

/* Cada botão ativo pega a cor do seu status */
.status-seg .seg-btn.active{
  box-shadow:0 1px 3px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.08) inset;
  font-weight:700;
  transform:translateY(-0.5px);
}
.status-seg .seg-pendente.active{
  background:linear-gradient(180deg, #fecaca 0%, #fb7185 100%);
  color:#450a0a;
}
.status-seg .seg-andamento.active{
  background:linear-gradient(180deg, #fde68a 0%, #fbbf24 100%);
  color:#451a03;
}
.status-seg .seg-concluido.active{
  background:linear-gradient(180deg, #a7f3d0 0%, #10b981 100%);
  color:#064e3b;
}

/* Modo escuro: os gradients funcionam bem também */
@media (hover: none){
  .status-seg .seg-btn{ padding:9px 12px; }
}

/* ---- Versão maior dos botões para a aba Expedição (já existe, mas vamos reforçar as cores do .active) */
.exp-btn-st.active[data-st="pendente"],
.expedicao-card .exp-btn-st.active[onclick*="'pendente'"]{
  background:linear-gradient(180deg, #fecaca 0%, #fb7185 100%);
  color:#450a0a;
  border-color:#fb7185;
  box-shadow:0 2px 5px rgba(244,63,94,.3);
}
.exp-btn-st.active[data-st="em_andamento"],
.expedicao-card .exp-btn-st.active[onclick*="'em_andamento'"]{
  background:linear-gradient(180deg, #fde68a 0%, #fbbf24 100%);
  color:#451a03;
  border-color:#fbbf24;
  box-shadow:0 2px 5px rgba(251,191,36,.3);
}
.exp-btn-st.active[data-st="concluido"],
.expedicao-card .exp-btn-st.active[onclick*="'concluido'"]{
  background:linear-gradient(180deg, #a7f3d0 0%, #10b981 100%);
  color:#064e3b;
  border-color:#10b981;
  box-shadow:0 2px 5px rgba(16,185,129,.3);
}

/* ---- ITENS DO PEDIDO NO CARD DA EXPEDIÇÃO ----------------- */
.exp-card-itens{
  margin:10px 0;
  padding:10px 12px;
  background:var(--s0);
  border:1px dashed var(--b1);
  border-radius:var(--r2);
}
[data-theme="light"] .exp-card-itens{ background:#fafbff; border-color:#e0e0e0; }

.exp-card-itens-label{
  font-family:var(--fm);
  font-size:10px;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:600;
  margin-bottom:6px;
  padding-bottom:6px;
  border-bottom:1px solid var(--b1);
}
.exp-card-itens-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.exp-card-itens-list li{
  font-size:12px;
  color:var(--t2);
  display:flex;
  flex-wrap:wrap;
  gap:4px 8px;
  align-items:baseline;
  line-height:1.35;
}
.exp-item-qtd{
  font-family:var(--fm);
  font-weight:700;
  color:var(--cy);
  flex-shrink:0;
}
.exp-item-desc{
  color:var(--t1);
  font-weight:500;
  flex:1;
  min-width:140px;
  word-break:break-word;
}
.exp-item-extras{
  font-size:11px;
  color:var(--t3);
  font-family:var(--fm);
}
[data-theme="light"] .exp-item-qtd{ color:#0066cc; }

/* Em cards com mais de 6 itens, limita a altura e adiciona scroll suave */
.exp-card-itens-list{ max-height:180px; overflow-y:auto; }
.exp-card-itens-list::-webkit-scrollbar{ width:4px; }
.exp-card-itens-list::-webkit-scrollbar-thumb{ background:var(--b2); border-radius:2px; }

/* Mobile: ocultar dropdown super largo, abrir em tela cheia */
@media (max-width: 500px){
  .notif-dropdown{
    position:fixed;
    top:56px; left:8px; right:8px;
    width:auto;
    max-width:none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   V3 — Obs pre-wrap · Horário · Filtro urgente · Notif push
═══════════════════════════════════════════════════════════════ */

/* ---- Observações com quebra de linha preservada ------------- */
.exp-obs-text{
  white-space: pre-wrap;
  word-break: break-word;
}
/* O modal de visualização já tinha white-space:pre-wrap inline.
   Esta classe cuida dos cards da listagem. */

/* ---- Horário de liberação no rodapé do card ----------------- */
.exp-card-liberado{
  font-family: var(--fm);
  font-size: 11px;
  color: var(--t3);
  line-height: 1.3;
}
[data-theme="light"] .exp-card-liberado{ color: #888; }

/* ---- Número do item na lista (1. 2. 3.) --------------------- */
.exp-item-num{
  font-family: var(--fm);
  font-size: 11px;
  color: var(--t3);
  min-width: 18px;
  flex-shrink: 0;
}

/* ---- Tab Urgentes na Expedição ------------------------------ */
.exp-tab-urgente{
  background: rgba(220,38,38,.10) !important;
  color: #ef4444 !important;
  border-color: rgba(220,38,38,.28) !important;
  letter-spacing: .3px;
}
.exp-tab-urgente:hover{
  background: rgba(220,38,38,.18) !important;
  color: #fca5a5 !important;
}
.exp-tab-urgente.active{
  background: rgba(220,38,38,.22) !important;
  border-color: rgba(220,38,38,.5) !important;
  color: #fca5a5 !important;
  font-weight: 700 !important;
  animation: urg-pulse 1.8s ease-in-out infinite;
}
@keyframes urg-pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50%{ box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}

/* ---- Linha de busca + botão notificação juntos -------------- */
.exp-filter-row{
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.exp-filter-row .exp-search{ flex: 1; min-width: 0; }

/* ---- Botão Notificações (Ativar/Desativar) ------------------ */
.btn-push-notif{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--s1);
  color: var(--t3);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s var(--e1);
  text-transform: uppercase;
  flex-shrink: 0;
}
.btn-push-notif:hover{ background: var(--s2); color: var(--t1); border-color: var(--b2); }
.btn-push-notif.push-on{
  background: rgba(52,211,153,.12);
  color: var(--ok);
  border-color: rgba(52,211,153,.35);
}
.btn-push-notif.push-on:hover{
  background: rgba(239,68,68,.1);
  color: #ef4444;
  border-color: rgba(239,68,68,.35);
}
.btn-push-notif.push-blocked{
  opacity: .5;
  cursor: not-allowed;
}
[data-theme="light"] .btn-push-notif{ background: #fff; color: #666; border-color: #d4d4d4; }
[data-theme="light"] .btn-push-notif.push-on{ background: #dcfce7; color: #166534; border-color: #86efac; }

/* ---- Coluna Data/Hora na tabela de Pedidos ------------------ */
/* A data_pedido já existia; o fmtDatetime aparece num sub-div,
   herdando o estilo color:var(--t3) e font-size:11px do inline. */

/* Mobile: empilha busca e botão de notif verticalmente */
@media (max-width: 480px){
  .exp-filter-row{ flex-wrap: wrap; }
  .btn-push-notif{ width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   V4 — Painel Produtos
═══════════════════════════════════════════════════════════════ */

/* nav-item de Produtos com cor ciano */
.nav-item[data-page="produtos"]{
  color: var(--cy);
}
.nav-item[data-page="produtos"].active{
  background: var(--cyd);
  border-color: rgba(56,217,245,.35);
  color: var(--cy2);
}
[data-theme="light"] .nav-item[data-page="produtos"]{ color: #0369a1; }
[data-theme="light"] .nav-item[data-page="produtos"].active{
  background: #e0f7ff;
  border-color: #7dd3fc;
  color: #0c4a6e;
}

/* Coluna de obs truncada com tooltip nativo */
#produtos-body td:nth-child(6){
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge correia/mangueira/outro reutiliza classes existentes */

/* ═══════════════════════════════════════════════════════════════
   V5 — Filtro de data na Expedição + quem alterou status
═══════════════════════════════════════════════════════════════ */

/* ---- Bloco de filtro de data -------------------------------- */
.exp-date-filter{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:4px;
}
.exp-date-mode-tabs{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}
.exp-date-tab{
  padding:7px 12px;
  background:var(--s1);
  color:var(--t3);
  border:1px solid var(--b1);
  border-radius:var(--r2);
  font-family:var(--fm);
  font-size:11px;
  font-weight:600;
  letter-spacing:.4px;
  cursor:pointer;
  transition:all .15s var(--e1);
  text-transform:uppercase;
}
.exp-date-tab:hover{ background:var(--s2); color:var(--t1); border-color:var(--b2); }
.exp-date-tab.active{
  background:rgba(56,217,245,.13);
  border-color:rgba(56,217,245,.4);
  color:var(--cy);
  font-weight:700;
}
[data-theme="light"] .exp-date-tab{ background:#fff; color:#555; border-color:#d4d4d4; }
[data-theme="light"] .exp-date-tab.active{ background:#e0f7ff; border-color:#7dd3fc; color:#0c4a6e; }

/* Painéis de data (dia único / período) */
.exp-date-panel{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  padding:8px 10px;
  background:var(--s0);
  border:1px solid var(--b1);
  border-radius:var(--r2);
}
[data-theme="light"] .exp-date-panel{ background:#f8f9ff; border-color:#e0e0e0; }

.exp-date-input{
  padding:8px 10px;
  font-size:13px;
  border-radius:var(--r2);
  min-width:0;
  flex:1;
}
.exp-date-range{
  display:flex;
  gap:8px;
  align-items:center;
  flex:1;
  flex-wrap:wrap;
}
.exp-date-sep{
  font-size:12px;
  color:var(--t3);
  font-family:var(--fm);
  white-space:nowrap;
}

/* ---- Quem alterou o status no card -------------------------- */
.exp-card-status-alt{
  font-size:11px;
  color:var(--t3);
  padding:5px 8px;
  background:var(--s0);
  border-radius:var(--r1);
  border-left:2px solid var(--b2);
  margin:6px 0 0;
  line-height:1.4;
}
.exp-card-status-alt strong{ color:var(--t2); }
[data-theme="light"] .exp-card-status-alt{ background:#f8f9ff; color:#666; }
[data-theme="light"] .exp-card-status-alt strong{ color:#333; }

/* Mobile: datas empilham */
@media (max-width: 500px){
  .exp-date-range{ flex-direction:column; gap:6px; }
  .exp-date-input{ width:100%; }
  .exp-date-sep{ display:none; }
}