/* ════════════════════════════════════════════════
   CENTER TINTAS — Transferências v2
   Paleta: Preto · Laranja · Verde
   ════════════════════════════════════════════════ */
:root {
  --preto:      #111827;
  --preto-s:    #1F2937;
  --preto-b:    #374151;
  --laranja:    #F97316;
  --laranja-e:  #EA6C0A;
  --laranja-cl: #FFF7ED;
  --laranja-md: #FDBA74;
  --verde:      #059669;
  --verde-cl:   #D1FAE5;
  --vermelho:   #DC2626;
  --verm-cl:    #FEE2E2;
  --cinza:      #6B7280;
  --cinza-cl:   #F3F4F6;
  --borda:      #E5E7EB;
  --branco:     #FFFFFF;
  --texto:      #111827;
  --muted:      #6B7280;
  --topbar-h:   58px;
  --sidebar-w:  228px;
  --radius:     10px;
  --radius-s:   7px;
  --sombra:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --sombra-md:  0 4px 16px rgba(0,0,0,.1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:'Inter',-apple-system,sans-serif;background:#F9FAFB;color:var(--texto);min-height:100vh;line-height:1.5}

/* ── Utilitários ─────────────── */
.hidden{display:none!important}
.w100{width:100%}
.flex-gap{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.mt4{margin-top:.25rem}
.mt8{margin-top:.5rem}
.mb8{margin-bottom:.5rem}
.req{color:var(--vermelho)}
.txt-muted{color:var(--muted);font-size:.875rem}

/* ── Botões ──────────────────── */
button{cursor:pointer;border:none;font-family:inherit;font-size:.875rem;font-weight:600;transition:all .15s;border-radius:var(--radius-s)}

.btn-laranja{background:var(--laranja);color:#fff;padding:.55rem 1.1rem}
.btn-laranja:hover{background:var(--laranja-e)}
.btn-laranja:active{transform:scale(.97)}

.btn-verde{background:var(--verde);color:#fff;padding:.55rem 1.1rem}
.btn-verde:hover{background:#047857}

.btn-cinza{background:var(--cinza-cl);color:var(--muted);padding:.55rem 1rem;border:1px solid var(--borda)}
.btn-cinza:hover{background:var(--borda)}

.btn-sm{padding:.35rem .75rem;font-size:.8rem}
.btn-icone{background:transparent;border:none;padding:.4rem;border-radius:var(--radius-s);color:#9CA3AF;display:flex;align-items:center;justify-content:center}
.btn-icone:hover{background:rgba(255,255,255,.1);color:#fff}

/* ── Inputs ──────────────────── */
input,select,textarea{
  font-family:inherit;font-size:.9rem;
  border:1.5px solid var(--borda);border-radius:var(--radius-s);
  padding:.55rem .75rem;color:var(--texto);background:var(--branco);
  width:100%;outline:none;transition:border-color .15s,box-shadow .15s
}
input:focus,select:focus,textarea:focus{
  border-color:var(--laranja);
  box-shadow:0 0 0 3px rgba(249,115,22,.15)
}
textarea{resize:vertical;min-height:80px}

.campo{display:flex;flex-direction:column;gap:.35rem}
.campo label{font-size:.73rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* ── Alertas ─────────────────── */
.alerta-erro{background:var(--verm-cl);color:var(--vermelho);padding:.6rem .85rem;border-radius:var(--radius-s);font-size:.875rem;border-left:3px solid var(--vermelho)}

/* ════════════════════════════════════════════════
   LOGIN
   ════════════════════════════════════════════════ */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--preto);
  background-image:
    radial-gradient(ellipse at 15% 50%,rgba(249,115,22,.1) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 20%,rgba(5,150,105,.07) 0%,transparent 50%);
  padding:1rem
}
.login-box{
  background:var(--preto-s);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);padding:2.5rem 2rem;width:100%;max-width:400px;
  box-shadow:0 25px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:1.25rem
}
.login-logo{display:flex;align-items:center;gap:.85rem;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.07)}
.login-icone{width:46px;height:46px;background:rgba(249,115,22,.15);border-radius:var(--radius-s);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.login-marca{font-size:1.2rem;font-weight:800;color:#fff;line-height:1.2}
.login-sub{font-size:.75rem;color:var(--laranja);font-weight:600;letter-spacing:.04em}
.login-box .campo label{color:#9CA3AF}
.login-box input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#fff}
.login-box input::placeholder{color:#4B5563}
.login-box input:focus{border-color:var(--laranja);background:rgba(255,255,255,.09)}
.login-rodape{text-align:center;font-size:.78rem;color:#4B5563}

/* ════════════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════════════ */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar-h);
  background:var(--preto);border-bottom:2.5px solid var(--laranja);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;z-index:200
}
.topbar-esq,.topbar-dir{display:flex;align-items:center;gap:.75rem}
.topbar-marca{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#D1D5DB;font-weight:500}
.topbar-marca strong{color:var(--laranja)}
.u-info{display:flex;align-items:center;gap:.5rem}
.u-avatar{width:32px;height:32px;background:var(--laranja);color:#fff;border-radius:50%;font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.u-textos{display:flex;flex-direction:column}
.u-textos span:first-child{font-size:.85rem;font-weight:600;color:#fff;line-height:1.2}
.u-textos span:last-child{font-size:.72rem;color:#9CA3AF}

/* ════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════ */
.layout{display:flex;margin-top:var(--topbar-h);min-height:calc(100vh - var(--topbar-h))}

.sidebar{
  width:var(--sidebar-w);background:var(--preto-s);
  border-right:1px solid rgba(255,255,255,.06);
  padding:1rem .75rem;position:fixed;top:var(--topbar-h);bottom:0;left:0;
  overflow-y:auto;z-index:150;transition:transform .25s
}
.nav-btn{
  display:flex;align-items:center;gap:.6rem;padding:.65rem .85rem;
  border-radius:var(--radius-s);font-size:.875rem;font-weight:500;
  color:#9CA3AF;background:transparent;border:none;width:100%;text-align:left;margin-bottom:.15rem
}
.nav-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-btn.ativo{background:rgba(249,115,22,.18);color:var(--laranja);font-weight:700}
.nav-btn.destaque{background:var(--laranja);color:#fff;font-weight:700;margin-top:.25rem}
.nav-btn.destaque:hover{background:var(--laranja-e)}
.nav-badge{margin-left:auto;background:var(--laranja);color:#fff;border-radius:20px;font-size:.7rem;font-weight:800;padding:.1rem .5rem;min-width:20px;text-align:center}
.nav-sep{height:1px;background:rgba(255,255,255,.06);margin:.65rem 0}

.conteudo{flex:1;margin-left:var(--sidebar-w);padding:1.25rem;min-width:0}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:140}

/* ════════════════════════════════════════════════
   FILTROS
   ════════════════════════════════════════════════ */
.filtros{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--radius);
  padding:.85rem 1rem;margin-bottom:1rem;box-shadow:var(--sombra)
}
.f-campo{flex:1;min-width:130px;font-size:.85rem}
.filtros input[type="date"]{max-width:155px}

.aba-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.aba-titulo{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* ════════════════════════════════════════════════
   GRID E CARDS
   ════════════════════════════════════════════════ */
.grid{display:grid;grid-template-columns:1fr;gap:1rem}

/* ── Card ──────────────────────────────────────── */
.card{
  background:var(--branco);border-radius:var(--radius);
  border:2px solid var(--borda);box-shadow:var(--sombra);
  overflow:hidden;cursor:pointer;
  transition:box-shadow .2s,transform .15s,border-color .2s
}
.card:hover{box-shadow:var(--sombra-md);transform:translateY(-2px)}
.card.arquivada{opacity:1;border-color:var(--borda)}
.card.ativa{border-color:var(--laranja)}

/* Faixa topo */
.card-faixa{height:4px;background:var(--laranja)}
.card.arquivada .card-faixa{background:var(--cinza)}

/* Banner finalizado */
.banner-fin{
  display:flex;align-items:center;gap:.4rem;
  background:var(--verde-cl);color:#065F46;
  padding:.35rem .85rem;font-size:.75rem;font-weight:600
}

.card-topo{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:.8rem 1rem .5rem;gap:.5rem
}
.card-id{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:600;color:var(--muted)}
.card-badges{display:flex;gap:.35rem;flex-wrap:wrap;flex-shrink:0}

.card-corpo{padding:.4rem 1rem .8rem;display:flex;flex-direction:column;gap:.55rem}

/* Rota destino ← origem */
.card-rota{display:flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:700}
.loja-tag{background:var(--preto);color:var(--laranja);padding:.22rem .65rem;border-radius:5px;font-size:.78rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.seta{color:var(--muted);font-size:1rem}

/* Timer */
.card-timer{
  display:flex;align-items:center;gap:.4rem;
  font-size:.82rem;font-weight:700;
  padding:.3rem .65rem;border-radius:var(--radius-s);
  background:var(--laranja-cl);color:var(--laranja-e);
  width:fit-content
}
.card-timer.urgente{background:#FEF2F2;color:var(--vermelho)}
.card-timer.vencido{background:#FEE2E2;color:var(--vermelho)}
.card-timer svg{flex-shrink:0}

/* Itens resumo */
.card-itens-count{font-size:.8rem;color:var(--muted)}
.card-itens-count strong{color:var(--laranja);font-size:.95rem}

.card-transp{font-size:.78rem;color:var(--muted)}

.card-rodape{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.3rem;
  padding:.5rem 1rem;background:var(--cinza-cl);
  border-top:1px solid var(--borda);font-size:.75rem;color:var(--muted)
}

/* ── Badges ─────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:20px;font-size:.72rem;font-weight:700;white-space:nowrap}
.b-ativa{background:var(--laranja-cl);color:#C2410C}
.b-arquivada{background:var(--cinza-cl);color:var(--cinza)}

/* ════════════════════════════════════════════════
   TIMER BAR no detalhe
   ════════════════════════════════════════════════ */
.timer-bar{
  padding:.6rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
  font-size:.85rem;font-weight:700;gap:.5rem;flex-wrap:wrap
}
.timer-bar.ok     {background:var(--laranja-cl);color:var(--laranja-e)}
.timer-bar.urgente{background:#FEF2F2;color:var(--vermelho)}
.timer-bar.vencido{background:#FEE2E2;color:var(--vermelho)}
.timer-bar .t-label{font-size:.75rem;font-weight:600;opacity:.75}

/* ════════════════════════════════════════════════
   VAZIO / LOADING
   ════════════════════════════════════════════════ */
.vazio{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:4rem 2rem;text-align:center;color:var(--muted)}
.vazio p{font-size:.95rem;color:#9CA3AF}
.load{text-align:center;padding:3rem;color:var(--muted);font-size:.9rem}

/* ════════════════════════════════════════════════
   MODAIS
   ════════════════════════════════════════════════ */
.mfundo{
  position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);
  z-index:500;display:flex;align-items:flex-start;justify-content:center;
  padding:1rem;overflow-y:auto
}
.modal{
  background:var(--branco);border-radius:var(--radius);
  width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
  box-shadow:0 25px 60px rgba(0,0,0,.3);margin:auto
}
.modal-lg{max-width:700px}
.modal-sm{max-width:400px}

.mtopo{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:1.2rem 1.5rem 1rem;border-bottom:2.5px solid var(--laranja);
  position:sticky;top:0;background:var(--branco);z-index:2
}
.mtopo h2{font-size:1.1rem;font-weight:800;color:var(--preto)}
.mfechar{background:none;border:none;font-size:1.1rem;color:var(--cinza);padding:.25rem;cursor:pointer;border-radius:var(--radius-s);flex-shrink:0}
.mfechar:hover{background:var(--cinza-cl)}

.mcorpo{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.mrodape{padding:1rem 1.5rem;border-top:1px solid var(--borda);display:flex;justify-content:flex-end;gap:.5rem;position:sticky;bottom:0;background:var(--branco)}

/* ── Seções do detalhe ─────────── */
.det-id{font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:700;color:var(--preto)}
.det-secao{margin-bottom:1.25rem}
.det-secao h3{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:.65rem;padding-bottom:.35rem;border-bottom:2px solid var(--laranja-cl)}

.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.info-item label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.04em;margin-bottom:.15rem}
.info-item span{font-size:.9rem;font-weight:500}

/* ── Lista de itens ──────────────── */
.item-row{
  display:flex;align-items:center;gap:.5rem;
  background:var(--cinza-cl);border-radius:var(--radius-s);
  padding:.45rem .75rem;font-size:.875rem;margin-bottom:.35rem;flex-wrap:wrap
}
.item-row .i-produto{flex:1;font-weight:700;min-width:80px}
.item-row .i-qtd{font-weight:700;color:var(--laranja-e);white-space:nowrap}
.item-row .i-det{font-size:.75rem;color:var(--muted);white-space:nowrap}
.item-row .i-by{font-size:.72rem;color:var(--muted);flex-basis:100%;margin-top:.1rem}
.item-row .i-rm{color:var(--vermelho);background:none;border:none;font-size:1rem;padding:0 .25rem;cursor:pointer;flex-shrink:0;margin-left:auto}

/* ── Formulário add item ──────────── */
.add-item-form{
  background:var(--laranja-cl);border-radius:var(--radius-s);
  padding:.85rem;display:flex;flex-direction:column;gap:.65rem;margin-top:.5rem;
  border:1.5px dashed var(--laranja-md)
}
.add-item-form .grid2{gap:.5rem}

/* ── Histórico ──────────────────── */
.hist-lista{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.hist-item{display:flex;gap:.65rem;font-size:.82rem}
.hist-dot{width:8px;height:8px;border-radius:50%;background:var(--laranja);flex-shrink:0;margin-top:.3rem}
.hist-acao{font-weight:600}
.hist-meta{color:var(--muted);font-size:.75rem}

/* ── Tabela usuários ──────────── */
.tabela{width:100%;border-collapse:collapse;font-size:.875rem}
.tabela th{text-align:left;padding:.5rem .75rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:2px solid var(--borda)}
.tabela td{padding:.6rem .75rem;border-bottom:1px solid var(--cinza-cl)}
.tabela tr:hover td{background:var(--cinza-cl)}
.nivel-tag{padding:.18rem .6rem;border-radius:20px;font-size:.72rem;font-weight:700}
.n-admin{background:var(--verm-cl);color:var(--vermelho)}
.n-gerente{background:var(--laranja-cl);color:#C2410C}
.n-usuario{background:#EFF6FF;color:#1D4ED8}

.form-user{margin-top:1.5rem;padding-top:1.5rem;border-top:2px dashed var(--borda);display:flex;flex-direction:column;gap:1rem}
.form-user h3{font-size:1rem;font-weight:700}

/* ── Grids ──────────── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

/* ════════════════════════════════════════════════
   RESPONSIVO
   ════════════════════════════════════════════════ */
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}

@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.aberta{transform:translateX(0)}
  .conteudo{margin-left:0;padding:.85rem}
  .topbar-marca span{display:none}
  .u-textos{display:none}
  .info-grid,.grid2{grid-template-columns:1fr}
  .filtros .f-campo{min-width:100%}
}
@media(min-width:769px){
  .btn-menu{display:none}
  .overlay{display:none!important}
  .btn-nova-topo{display:none}
}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--borda);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#CBD5E1}

/* Botão excluir */
.btn-excluir{
  background:#FEE2E2;color:#DC2626;padding:.55rem 1.1rem;
  border:1.5px solid #FECACA;font-weight:700;width:100%
}
.btn-excluir:hover{background:#DC2626;color:#fff}

/* Horarios de Coleta */
.sidebar-horarios{padding:.25rem 0}
.sh-titulo{display:flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#6B7280;padding:.4rem .85rem;margin-bottom:.35rem}
.sh-cidade{margin-bottom:.6rem}
.sh-cidade-nome{font-size:.75rem;font-weight:700;color:#F97316;padding:.2rem .85rem;display:flex;align-items:center;justify-content:space-between}
.sh-cidade-nome button{background:none;border:none;color:#F97316;font-size:1.1rem;cursor:pointer;padding:0;line-height:1}
.sh-item{display:flex;align-items:center;justify-content:space-between;padding:.2rem .85rem .2rem 1.5rem;gap:.35rem}
.sh-item-info{display:flex;flex-direction:column}
.sh-item-transp{font-size:.75rem;font-weight:600;color:#D1D5DB}
.sh-item-hora{font-size:.7rem;color:#9CA3AF}
.sh-item-rm{background:none;border:none;color:#6B7280;cursor:pointer;font-size:.85rem;padding:0;flex-shrink:0}
.sh-item-rm:hover{color:#DC2626}
.sh-add-form{padding:.35rem .85rem .35rem 1.5rem;display:flex;flex-direction:column;gap:.3rem}
.sh-add-form input{font-size:.75rem;padding:.3rem .5rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:5px}
.sh-add-form input:focus{border-color:#F97316;outline:none}
.sh-add-btn{background:#F97316;color:#111;border:none;border-radius:5px;padding:.28rem .5rem;font-size:.72rem;font-weight:700;cursor:pointer;margin-top:.1rem}
.sh-add-btn:hover{background:#EA6C0A}
.sh-vazio{font-size:.7rem;color:#4B5563;padding:.1rem .85rem .1rem 1.5rem}
/* Validacoes no card */
.card-vals{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.1rem}
.cv-item{font-size:.72rem;font-weight:600;padding:.2rem .55rem;border-radius:20px;white-space:nowrap}
.cv-ok{background:var(--verde-cl);color:#065F46}
.cv-pen{background:#F3F4F6;color:#9CA3AF}