:root{
    --bg:#f4f6f5; --text:#23282a; --muted:#8a9290; --border:#dfe3e1;
    --est:#c96a1e; --est-l:#fdf1e4;
    --sis:#1e2f52; --sis-l:#eef1f8;
    --fin:#7b3f8f; --fin-l:#f6eef9;
    --sta:#2f6d4f; --sta-l:#ecf7f0;
    --trf:#2a5a9c; --trf-l:#e9f0fa;
    --dev-v:#2f6d3d; --dev-v-l:#eaf6ec;
    --dev-e:#c96a1e; --dev-e-l:#fdf1e4;
    --ok:#2f8f4e; --pending:#c9942e; --danger:#c94f4f; --andamento:#2a6fbf;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);padding:20px;}

  .tabs{display:flex;gap:4px;margin-bottom:0;}
  .tab-btn{
    padding:12px 20px;border:none;border-radius:10px 10px 0 0;background:#dfe3e1;color:#5a6260;
    font-weight:600;font-size:14px;cursor:pointer;transition:.15s;
  }
  .tab-btn.active[data-tab="estornos"]{background:var(--est);color:#fff;}
  .tab-btn.active[data-tab="transferencias"]{background:var(--trf);color:#fff;}
  .tab-btn.active[data-tab="devolucoes"]{background:var(--dev-v);color:#fff;}
  .tab-btn.active[data-tab="relatorio"]{background:var(--sis);color:#fff;}
  .tab-btn:not(.active):hover{background:#cfd5d3;}

  .panel{display:none;}
  .panel.active{display:block;}

  .header{
    color:#fff;padding:16px 24px;border-radius:0 10px 10px 0;
    display:flex;align-items:center;justify-content:space-between;font-size:19px;font-weight:700;
  }
  .header .actions{display:flex;gap:10px;}
  .header button{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.4);color:#fff;padding:8px 14px;border-radius:6px;font-size:13px;cursor:pointer;}
  .header button:hover{background:rgba(255,255,255,0.28);}

  .table-wrap{overflow-x:auto;background:#fff;border-radius:0 0 10px 10px;box-shadow:0 2px 10px rgba(0,0,0,.06);}
  table{border-collapse:collapse;width:100%;min-width:1300px;font-size:13px;table-layout:auto;}
  thead tr.group th{padding:8px 10px;color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.5px;text-align:center;border-right:2px solid #fff;}
  thead tr.cols th{padding:8px 8px;font-size:12px;font-weight:600;border:1px solid var(--border);white-space:nowrap;text-align:left;}
  tbody td{border:1px solid var(--border);padding:0;vertical-align:middle;}
  tbody td input,tbody td select{width:100%;min-width:100px;border:none;background:transparent;padding:7px 8px;font-size:13px;font-family:inherit;color:var(--text);box-sizing:border-box;}
  tbody td input:focus,tbody td select:focus{outline:2px solid #4a90d9;outline-offset:-2px;background:#fffef0;}
  tbody td.id-cell{font-weight:700;text-align:center;white-space:nowrap;}
  select.badge{-webkit-appearance:none;appearance:none;font-weight:600;border-radius:4px;cursor:pointer;padding-right:24px;min-width:130px;
    background-repeat:no-repeat;background-position:right 8px center;background-size:10px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");}
  .st-pendente{background-color:#fdf0d8;color:#8a5a10;}
  .st-andamento{background-color:#dbe9fb;color:#1c4f8a;}
  .st-concluido{background-color:#dceedd;color:#1f4d36;}
  .st-cancelado{background-color:#fbe0e0;color:#8f2f2f;}
  .st-vazio{background-color:#f1f1f1;color:#888;}
  .motivo-outro-input{
    border:1px solid #f0c95f !important; background:#fffdf5 !important; border-radius:4px;
    color:#7a5c00; font-weight:500;
  }
  .motivo-outro-input:focus{ border-color:#4a90d9 !important; background:#fffef0 !important; }

  .add-row-bar{padding:10px 16px;display:flex;justify-content:space-between;align-items:center;background:#fafbfa;border-top:1px solid var(--border);}
  .add-row-bar button{color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;font-weight:600;}
  .summary{font-size:12px;color:var(--muted);}

  /* Relatorio */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0;}
  .card{border-radius:10px;padding:16px;text-align:center;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.05);}
  .card .label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
  .card .value{font-size:32px;font-weight:800;}
  .card.total{border-top:4px solid var(--sis);} .card.total .label{color:var(--sis);} .card.total .value{color:var(--sis);}
  .card.conc{border-top:4px solid var(--ok);} .card.conc .label{color:var(--ok);} .card.conc .value{color:var(--ok);}
  .card.pend{border-top:4px solid var(--pending);} .card.pend .label{color:var(--pending);} .card.pend .value{color:var(--pending);}
  .card.and{border-top:4px solid var(--andamento);} .card.and .label{color:var(--andamento);} .card.and .value{color:var(--andamento);}
  .card.canc{border-top:4px solid var(--danger);} .card.canc .label{color:var(--danger);} .card.canc .value{color:var(--danger);}
  .card.hoje{border-top:4px solid var(--est);} .card.hoje .label{color:var(--est);} .card.hoje .value{color:var(--est);}

  .rep-table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.05);margin-bottom:20px;}
  .rep-table caption{text-align:left;font-weight:700;font-size:13px;padding:10px 14px;background:var(--sis);color:#fff;}
  .rep-table th{background:#eef1f8;color:var(--sis);font-size:12px;padding:8px 10px;text-align:center;border-bottom:1px solid var(--border);}
  .rep-table th:first-child{text-align:left;}
  .rep-table td{padding:8px 10px;text-align:center;font-size:13px;border-bottom:1px solid var(--border);}
  .rep-table td:first-child{text-align:left;font-weight:600;}

/* ---------- Login ---------- */
.login-screen{
  position:fixed; inset:0; background:linear-gradient(135deg,#1e2f52,#2a5a9c);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.login-box{
  background:#fff; border-radius:12px; padding:32px 28px; width:320px;
  box-shadow:0 10px 40px rgba(0,0,0,.25); text-align:center;
}
.login-box h2{ margin:0 0 20px; font-size:18px; color:var(--sis); }
.login-box input{
  width:100%; padding:10px 12px; margin-bottom:12px; border:1px solid var(--border);
  border-radius:6px; font-size:14px; font-family:inherit;
}
.senha-wrap{ position:relative; margin-bottom:12px; }
.senha-wrap input{ padding-right:40px; margin-bottom:0; }
.login-box button.btn-olho{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:auto; height:auto; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#334155; opacity:1; padding:4px; line-height:1; margin:0; z-index:2;
}
.login-box button.btn-olho:hover{ color:var(--sis); background:none; }
.login-box button.btn-olho.ativo{ color:var(--sis); }
.login-box button{
  width:100%; padding:11px; background:var(--sis); color:#fff; border:none;
  border-radius:6px; font-size:14px; font-weight:700; cursor:pointer;
  position:relative; transition:opacity .15s;
}
.login-box button:hover{ opacity:.9; }
.login-box button:disabled{ opacity:.75; cursor:not-allowed; }
.login-box button.btn-carregando{
  color:transparent;
}
.login-box button.btn-carregando::after{
  content:""; position:absolute; left:50%; top:50%; width:16px; height:16px;
  margin:-8px 0 0 -8px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:girar .7s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }
.login-erro{ color:var(--danger); font-size:12px; margin:10px 0 0; min-height:14px; text-align:left; }
.login-erro-visivel{
  background:#fdecea; border:1px solid #f5c6c2; border-radius:6px; padding:8px 10px; font-weight:600;
}

.app-hidden{ display:none; }

/* ---------- Topbar ---------- */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 4px; font-size:13px; color:var(--muted);
}
.logout-btn{
  background:none; border:1px solid var(--border); border-radius:6px;
  padding:5px 12px; font-size:12px; cursor:pointer; color:var(--text);
}
.logout-btn:hover{ background:#f1f1f1; }

/* ---------- Ocultar colunas por papel ---------- */
body.papel-vendedora .grupo-sistema,
body.papel-vendedora .grupo-financeiro,
body.papel-vendedora .grupo-estoque{ display:none; }

/* Grupo Sistema sai das 3 tabelas de trâmite pra todo mundo — resolve pelo Painel Sistema agora */
.grupo-sistema{ display:none; }

/* Grupo Financeiro sai da tabela de Estornos pra todo mundo — resolve pelo Painel Financeiro agora */
.grupo-financeiro{ display:none; }

/* Status Final travado pra vendedora (visível mas não editável) */
select:disabled, input:disabled{
  background:#f3f3f3; color:#888; cursor:not-allowed;
}

/* ---------- Topbar: papel + limpar tela ---------- */
.topbar-actions{ display:flex; align-items:center; gap:14px; }
.limpar-tela-wrap{
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); cursor:pointer;
}
.limpar-tela-wrap input{ cursor:pointer; }

/* ---------- Botão "Lançar" (sinal) ---------- */
.btn-lancar{
  background:var(--ok); color:#fff; border:none; border-radius:5px;
  padding:5px 10px; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.btn-lancar:hover{ opacity:.9; }
.badge-lancado{
  background:#e5e5e5; color:#666; border-radius:5px; padding:5px 10px;
  font-size:11px; font-weight:700; white-space:nowrap; display:inline-block;
}
.acao-cell-wrap{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 6px; flex-wrap:wrap; min-width:110px;
}
.btn-excluir-linha{
  border:none; background:none; color:var(--danger); cursor:pointer;
  font-size:15px; padding:2px 4px; line-height:1;
}
.btn-excluir-linha:hover{ opacity:.7; }

/* ---------- Painel de Usuários ---------- */
.form-usuario{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; padding:14px;
  background:#faf7fc; border-radius:8px; border:1px solid var(--border);
}
.form-usuario input, .form-usuario select{
  padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:inherit;
}
.form-usuario button{
  background:var(--fin); color:#fff; border:none; border-radius:6px;
  padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer;
}
.form-usuario button:hover{ opacity:.9; }
.btn-excluir-usuario{
  background:none; border:none; color:var(--danger); cursor:pointer; font-size:14px;
}
.badge-role{
  display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700;
}
.badge-role.admin, .badge-role.supervisor, .badge-role.sistema{ background:#dbe6f6; color:#1e2f52; }
.badge-role.financeiro{ background:#f6eef9; color:#5c2f6b; }
.badge-role.vendedora{ background:#fdf1e4; color:#7a3f10; }
.badge-role.deposito{ background:#e8f4ea; color:#1f4d36; }

.tab-badge{
  display:inline-block; background:#c94f4f; color:#fff; border-radius:10px;
  padding:1px 7px; font-size:11px; font-weight:700; margin-left:4px;
}

/* ---------- Modais (escolha devolução / devolução múltipla) ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,25,35,.55);
  display:flex; align-items:center; justify-content:center; z-index:2000;
}
.modal-box{
  background:#fff; border-radius:12px; padding:24px 28px; width:380px;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.modal-box-wide{ width:min(900px, 95vw); max-height:85vh; overflow-y:auto; }
.modal-box h3{ margin:0 0 4px; font-size:16px; color:var(--sis); }
.modal-actions{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.modal-actions button{
  padding:10px; border:1px solid var(--border); background:#f4f6f5; border-radius:6px;
  font-size:13px; font-weight:600; cursor:pointer; color:var(--text);
}
.modal-actions button:hover{ background:#e9ecea; }
.modal-actions .modal-btn-destaque{ background:var(--dev-v); color:#fff; border-color:var(--dev-v); }
.modal-actions .modal-btn-destaque:hover{ opacity:.9; }
.modal-fechar{
  width:100%; margin-top:10px; padding:8px; background:none; border:none;
  color:var(--muted); font-size:12px; cursor:pointer;
}
.modal-fechar:hover{ text-decoration:underline; }

/* ---------- Sub-abas de Devoluções ---------- */
.sub-tabs{
  display:flex; gap:4px; background:#e2e6e4; padding:6px 6px 0; border-radius:0;
}
.sub-tab-btn{
  padding:8px 18px; border:none; border-radius:6px 6px 0 0; background:transparent;
  color:#5a6260; font-weight:600; font-size:12px; cursor:pointer;
}
.sub-tab-btn.active{ background:#fff; color:var(--dev-v); }
.sub-tab-btn:not(.active):hover{ background:#d0d7d5; }
.dev-subpanel{ display:none; }
.dev-subpanel.active{ display:block; }

/* Linha de grupo (cabeçalho de uma devolução múltipla) */
.linha-grupo-multipla td{
  background:#eaf6ec !important; font-weight:700; color:#1f4d36; padding:8px 12px !important;
}
.linha-item-multipla td{ background:#f6fbf7; }

/* ---------- Painel Sistema (Kanban) ---------- */
.kanban-board{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
  padding:16px; background:#eef1f5; border-radius:0 0 10px 10px; min-height:420px;
}
.kanban-coluna{
  background:#f4f6f5; border-radius:10px; display:flex; flex-direction:column;
  max-height:75vh;
}
.kanban-coluna-header{
  padding:12px 14px; font-weight:700; font-size:13px; display:flex;
  align-items:center; justify-content:space-between; border-radius:10px 10px 0 0;
}
.kanban-estornos .kanban-coluna-header{ background:var(--est); color:#fff; }
.kanban-transferencias .kanban-coluna-header{ background:var(--trf); color:#fff; }
.kanban-devolucoes .kanban-coluna-header{ background:var(--dev-v); color:#fff; }
.kanban-contador{
  background:rgba(255,255,255,.25); border-radius:12px; padding:1px 9px; font-size:12px;
}
.kanban-cards{
  flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:10px;
}
.kanban-card{
  background:#fff; border-radius:8px; padding:12px 14px; box-shadow:0 1px 4px rgba(0,0,0,.08);
  border-left:4px solid var(--sis); font-size:12.5px;
}
.kanban-estornos .kanban-card{ border-left-color:var(--est); }
.kanban-transferencias .kanban-card{ border-left-color:var(--trf); }
.kanban-devolucoes .kanban-card{ border-left-color:var(--dev-v); }
.kanban-card-topo{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.kanban-card-codigo{ font-weight:800; color:var(--sis); font-size:13px; }
.kanban-card-tempo{
  font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:10px;
  background:#eef1f8; color:#556;
}
.kanban-card-tempo.urgente{ background:#fbe0e0; color:#8f2f2f; }
.kanban-card-linha{ color:var(--muted); margin-bottom:2px; }
.kanban-card-linha b{ color:var(--text); font-weight:600; }
.kanban-card-acao{ margin-top:10px; display:flex; gap:6px; }
.kanban-card-acao select{
  flex:1; padding:6px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px; font-family:inherit;
}
.kanban-card-ver{
  display:block; margin-top:8px; text-align:right; font-size:11px; color:var(--sis);
  text-decoration:underline; cursor:pointer; background:none; border:none; padding:0;
}
.kanban-card-concluir{
  display:block; width:100%; margin-top:8px; background:var(--ok); color:#fff; border:none;
  border-radius:6px; padding:7px; font-size:12px; font-weight:700; cursor:pointer;
}
.kanban-card-concluir:hover{ opacity:.9; }
.kanban-vazio{ text-align:center; color:#aaa; font-size:12px; padding:30px 10px; }

/* ---------- Painel Sistema: cards informativos (aguardando outro papel) ---------- */
.kanban-card-informativo{ opacity:.85; }
.kanban-card-bola{
  margin-top:10px; text-align:center; font-size:11px; font-weight:700;
  padding:6px; border-radius:6px;
}
.kanban-bola-financeiro{ background:var(--fin-l); color:var(--fin); }
.kanban-bola-deposito{ background:var(--dev-e-l); color:#7a3f10; }
.kanban-bola-outro{ background:#f1f1f1; color:#888; }

/* ---------- Busca no Relatório ---------- */
.busca-wrap{ margin-bottom:18px; position:relative; }
.busca-wrap input{
  width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:8px;
  font-size:14px; font-family:inherit;
}
.busca-wrap input:focus{ outline:2px solid #4a90d9; border-color:transparent; }
.busca-resultados{
  margin-top:8px; border:1px solid var(--border); border-radius:8px; overflow:hidden;
  max-height:320px; overflow-y:auto;
}
.busca-item{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border);
  font-size:13px; cursor:pointer;
}
.busca-item:last-child{ border-bottom:none; }
.busca-item:hover{ background:#f4f6f5; }
.busca-item-tipo{
  font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; white-space:nowrap;
}
.busca-item-tipo.estornos{ background:var(--est-l); color:var(--est); }
.busca-item-tipo.transferencias{ background:var(--trf-l); color:var(--trf); }
.busca-item-tipo.devolucoes{ background:var(--dev-v-l); color:var(--dev-v); }
.busca-item-codigo{ font-weight:700; color:var(--sis); min-width:70px; }
.busca-item-cliente{ flex:1; color:var(--text); }
.busca-item-vazio{ padding:14px; text-align:center; color:#aaa; font-size:13px; }

/* ---------- Barra de filtro (dentro das abas de trâmite) ---------- */
.filtro-bar{
  display:flex; gap:8px; padding:10px 16px; background:#fafbfa; border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.filtro-bar input{
  min-width:200px; flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:inherit;
}
.filtro-bar select{
  padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:inherit; background:#fff;
}

.kanban-card-input{
  width:100%; margin-top:3px; padding:5px 7px; border:1px solid var(--border);
  border-radius:5px; font-size:12px; font-family:inherit;
}

/* ---------- Botão Suporte (topbar) ---------- */
.btn-suporte{
  background:#c94f4f; color:#fff; border:none; border-radius:6px;
  padding:6px 14px; font-size:12px; font-weight:700; cursor:pointer;
}
.btn-suporte:hover{ opacity:.9; }

/* ---------- Kanban com 4 colunas ---------- */
.kanban-board-4{ grid-template-columns:repeat(4, 1fr); }
.kanban-suporte .kanban-coluna-header{ background:#c94f4f; color:#fff; }
.kanban-suporte .kanban-card{ border-left-color:#c94f4f; }

.kanban-card-prioridade{
  display:inline-block; font-size:9.5px; font-weight:800; text-transform:uppercase;
  padding:2px 7px; border-radius:8px; margin-left:6px;
}
.prioridade-baixa{ background:#eef1f8; color:#556; }
.prioridade-media{ background:#fdf0d8; color:#8a5a10; }
.prioridade-alta{ background:#ffe1cc; color:#a34a06; }
.prioridade-urgente{ background:#fbe0e0; color:#8f2f2f; }

.kanban-card-resolver{
  margin-top:8px; width:100%; background:var(--ok); color:#fff; border:none;
  border-radius:6px; padding:6px; font-size:11px; font-weight:700; cursor:pointer;
}
.kanban-card-resolver:hover{ opacity:.9; }

/* ---------- Modal de consulta / histórico ---------- */
.consulta-secao{ margin-top:14px; }
.consulta-secao h4{
  font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
  margin:0 0 8px; border-bottom:1px solid var(--border); padding-bottom:4px;
}
.consulta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; font-size:13px; }
.consulta-grid div b{ color:var(--muted); font-weight:600; }

.consulta-timeline{ max-height:220px; overflow-y:auto; }
.consulta-evento{
  display:flex; gap:10px; padding:8px 0; border-bottom:1px solid #f0f0f0; font-size:12.5px;
}
.consulta-evento:last-child{ border-bottom:none; }
.consulta-evento-data{ color:var(--muted); white-space:nowrap; min-width:110px; }
.consulta-evento-corpo b{ color:var(--sis); }

.consulta-cancelar{
  margin-top:16px; padding:14px; background:#fff5f5; border:1px solid #fbdada; border-radius:8px;
}
.consulta-cancelar textarea{
  width:100%; margin-top:8px; padding:8px; border:1px solid var(--border); border-radius:6px;
  font-family:inherit; font-size:13px; box-sizing:border-box;
}
.consulta-cancelar button{
  margin-top:8px; background:var(--danger); color:#fff; border:none; border-radius:6px;
  padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer;
}

/* Coluna Cliente mais larga, pra não cortar o nome */
.col-cliente{ min-width:220px; }

.kanban-board-2{ grid-template-columns:repeat(2, 1fr); }