:root {
  --navy: #21264C;
  --navy-2: #2E3566;
  --verde: #90C10E;
  --fundo: #F4F6FA;
  --card: #FFFFFF;
  --texto: #1F2333;
  --suave: #6B7185;
  --borda: #E1E4EC;
  --erro: #C62828;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--fundo); color: var(--texto); }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-marca { background: var(--navy); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.login-marca img { width: 220px; background: #fff; border-radius: 12px; padding: 14px; }
.login-marca h1 { font-size: 28px; margin: 32px 0 8px; }
.login-marca p { color: #C9CCE0; margin: 0; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-form form { width: 100%; max-width: 360px; }
.login-form h2 { margin: 0 0 4px; }
.login-form .sub { color: var(--suave); margin: 0 0 24px; font-size: 14px; }
@media (max-width: 760px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-marca { padding: 32px 16px; }
}

label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px;
  font: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--verde); border-color: transparent; }

.btn { display: inline-block; border: 0; border-radius: 8px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.btn-primario { background: var(--navy); color: #fff; width: 100%; margin-top: 22px; }
.btn-primario:hover { background: var(--navy-2); }
.btn-sec { background: transparent; color: #C9CCE0; border: 1px solid #4A5080; }
.erro { color: var(--erro); font-size: 14px; min-height: 20px; margin-top: 12px; }

/* ---------- app ---------- */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--navy); color: #fff; display: flex; flex-direction: column; padding: 16px; }
.sidebar img { width: 100%; background: #fff; border-radius: 8px; padding: 8px; }
.sidebar nav { flex: 1; margin-top: 24px; display: flex; flex-direction: column; gap: 4px; }
.sidebar nav a { color: #C9CCE0; text-decoration: none; padding: 10px 12px; border-radius: 8px; }
.sidebar nav a.ativo, .sidebar nav a:hover { background: var(--navy-2); color: #fff; }
.sidebar nav a.ativo { border-left: 3px solid var(--verde); }
.sidebar .usuario { font-size: 13px; color: #C9CCE0; border-top: 1px solid #3A4070; padding-top: 12px; }
.sidebar .usuario strong { color: #fff; display: block; }
.sidebar .usuario .btn { margin-top: 10px; width: 100%; }
main { padding: 28px; }
main h1 { margin: 0 0 20px; }
.card { background: var(--card); border: 1px solid var(--borda); border-radius: 12px; padding: 20px; }
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  main { padding: 16px; }
}

.sidebar { position: sticky; top: 0; height: 100vh; }
.sidebar nav { overflow-y: auto; min-height: 0; }
.sidebar-titulo { color: var(--verde); font-weight: 700; letter-spacing: 3px; font-size: 12px; text-align: center; margin-top: 8px; }
.voltar-erp { display: block; text-align: center; color: #C9CCE0; text-decoration: none; font-size: 11px; margin-top: 10px; padding: 6px; border-radius: 6px; }
.voltar-erp:hover { background: var(--navy-2); color: #fff; }
.nav-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #8288AE; margin: 16px 12px 4px; }
.menu-toggle { display: none; }
@media (max-width: 760px) {
  .sidebar { position: sticky; top: 0; z-index: 40; height: auto; padding: 10px 16px; display: grid;
    grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
  .sidebar > a img { width: 120px; padding: 4px 8px; }
  .sidebar-titulo { margin: 0; text-align: left; }
  .menu-toggle { display: block; background: var(--navy-2); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; }
  .sidebar nav, .sidebar .usuario { display: none; grid-column: 1 / -1; }
  .sidebar.aberto nav, .sidebar.aberto .usuario { display: flex; }
  .sidebar.aberto nav { margin-top: 8px; max-height: 70vh; }
}

/* ---------- elementos comuns ---------- */
.topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.topo h1 { margin: 0; }
.topo .sub { color: var(--suave); font-size: 14px; margin-top: 4px; }
.btn-azul { background: var(--navy); color: #fff; }
.btn-azul:hover { background: var(--navy-2); }
.btn-verde { background: var(--verde); color: var(--navy); }
.btn-claro { background: #fff; color: var(--texto); border: 1px solid var(--borda); }
.btn-perigo { background: #fff; color: var(--erro); border: 1px solid #F1C4C4; }
.btn-peq { padding: 6px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filtros input, .filtros select { width: auto; min-width: 150px; }
.filtros input[type=search] { flex: 1; min-width: 200px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { border: 1px solid var(--borda); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.chip.ativo { background: var(--navy); border-color: var(--navy); color: #fff; }
.badge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #EEF0F6; color: var(--suave); white-space: nowrap; }
.badge-lead { background: #E3F0FF; color: #1D5FA8; }
.badge-cliente { background: #E6F4D2; color: #4B6B07; }
.badge-perdido, .badge-atrasada { background: #FDE2E2; color: var(--erro); }
.badge-ganho { background: #E6F4D2; color: #4B6B07; }
.badge-hoje { background: #FFF1CC; color: #8A6200; }
.badge-rascunho { background: #EEF0F6; color: var(--suave); }
.badge-aguardando_aprovacao { background: #FFF1CC; color: #8A6200; }
.badge-enviada { background: #E3F0FF; color: #1D5FA8; }
.badge-aceita { background: #E6F4D2; color: #4B6B07; }
.badge-recusada, .badge-expirada { background: #FDE2E2; color: var(--erro); }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 14px; flex-wrap: wrap; }
.aba { background: none; border: 0; padding: 10px 14px; font: inherit; font-size: 14px; color: var(--suave); cursor: pointer; border-bottom: 2px solid transparent; }
.aba.ativo { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }
.aba .badge { margin-left: 4px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
@media (max-width: 800px) { .grade-3 { grid-template-columns: 1fr; } }
.alerta { padding: 10px 14px; border-radius: 8px; font-size: 14px; margin: 10px 0; }
.alerta-aviso { background: #FFF6DB; color: #7A5600; border: 1px solid #F3DD9B; }
.alerta-erro { background: #FDECEC; color: #8E1C1C; border: 1px solid #F1C4C4; }
.alerta-ok { background: #EAF6DC; color: #3F5A06; border: 1px solid #CBE5A6; }
.busca-produto { position: relative; }
.resultados { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 10; max-height: 300px; overflow-y: auto; }
.resultados div { padding: 9px 12px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--borda); }
.resultados div:hover { background: #F4F6FA; }
.itens td input { padding: 7px 8px; min-width: 70px; }
.itens td.num input { text-align: right; }
.itens td.desc input { min-width: 220px; }
.totais { margin-left: auto; max-width: 360px; font-size: 14px; }
.totais div { display: flex; justify-content: space-between; padding: 4px 0; }
.totais .final { font-size: 18px; font-weight: 700; border-top: 1px solid var(--borda); margin-top: 6px; padding-top: 10px; }
.bloco-texto { border: 1px solid var(--borda); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.bloco-texto .linha-acoes input { flex: 1; font-weight: 600; }
.acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] textarea { background: #F7F8FB; color: var(--suave); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.vazio { color: var(--suave); text-align: center; padding: 28px; }
a { color: var(--navy); }

table { width: 100%; border-collapse: collapse; background: #fff; }
th { text-align: left; font-size: 12px; color: var(--suave); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
td { padding: 11px 12px; border-bottom: 1px solid var(--borda); font-size: 14px; vertical-align: middle; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: #F8F9FC; }
.tabela-wrap { background: #fff; border: 1px solid var(--borda); border-radius: 12px; overflow-x: auto; }
.suave { color: var(--suave); font-size: 13px; }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 600px) { .grade-2 { grid-template-columns: 1fr; } }

/* ---------- kanban ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; }
.coluna { background: #EBEEF4; border-radius: 12px; padding: 10px; min-height: 300px; }
.coluna.alvo { outline: 2px dashed var(--verde); }
.coluna h3 { margin: 2px 4px 2px; font-size: 14px; }
.coluna .total { font-size: 12px; color: var(--suave); margin: 0 4px 10px; }
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 12px; margin-bottom: 8px; cursor: grab; }
.cartao:hover { border-color: #B9C0D6; }
.cartao.arrastando { opacity: .4; }
.cartao .tit { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.cartao .tit span { color: var(--suave); font-weight: 400; }
.cartao .uni { font-size: 12px; color: var(--suave); text-transform: uppercase; margin-bottom: 8px; }
.cartao .rodape { display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 6px; }
.cartao .valor { font-weight: 700; font-size: 14px; }
.cartao .vend { font-size: 12px; color: var(--suave); margin-top: 6px; }

/* ---------- detalhe ---------- */
.grade-detalhe { display: grid; grid-template-columns: 1fr 260px; gap: 16px; }
@media (max-width: 900px) { .grade-detalhe { grid-template-columns: 1fr; } }
/* Sem isso, uma tabela larga estica a coluna além da tela; assim ela rola dentro do próprio cartão. */
.grade-detalhe > *, .grade-2 > *, .grade-3 > * { min-width: 0; }
.resumo-valor { text-align: center; }
.resumo-valor .rot { font-size: 11px; text-transform: uppercase; color: var(--suave); letter-spacing: 1px; margin-top: 10px; }
.resumo-valor .grande { font-size: 26px; font-weight: 700; color: var(--navy); }
.card + .card { margin-top: 16px; }
.card h2 { font-size: 16px; margin: 0 0 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.etapas { display: flex; margin: 8px 0 16px; }
.etapa { flex: 1; text-align: center; font-size: 12px; color: var(--suave); position: relative; }
.etapa .bola { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--borda); background: #fff; display: grid; place-items: center; margin: 0 auto 6px; font-weight: 700; }
.etapa.feita .bola { background: var(--verde); border-color: var(--verde); color: var(--navy); }
.etapa.atual .bola { background: var(--navy); border-color: var(--navy); color: #fff; }
.etapa.atual { color: var(--navy); font-weight: 700; }
.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.linha-acoes .direita { margin-left: auto; }
.item-lista { border-top: 1px solid var(--borda); padding: 10px 0; font-size: 14px; }
.item-lista:first-of-type { border-top: 0; }
.item-lista .meta { font-size: 12px; color: var(--suave); margin-top: 3px; }
.tarefa-item { display: flex; gap: 10px; align-items: flex-start; }
.tarefa-item input { width: auto; margin-top: 3px; }
.tarefa-item.feita .t { text-decoration: line-through; color: var(--suave); }
.encerrado { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; }
.encerrado.ganho { background: #E6F4D2; color: #3F5A06; }
.encerrado.perdido { background: #FDE2E2; color: #8E1C1C; }

/* ---------- contadores ---------- */
.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.contador { border-radius: 10px; padding: 12px; border: 1px solid var(--borda); background: #fff; cursor: pointer; }
.contador .n { font-size: 22px; font-weight: 700; }
.contador .r { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--suave); }
.contador.ativo { outline: 2px solid var(--navy); }
.c-atrasadas { background: #FDECEC; } .c-hoje { background: #FFF6DB; } .c-semana { background: #E8F2FD; }
.c-futuras { background: #F1ECFB; } .c-concluidas { background: #EAF6DC; }

/* ---------- painel ---------- */
.grade-metas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.grade-metas .card + .card { margin-top: 0; }
.meta-icone { font-size: 22px; }
.meta-numero { display: flex; align-items: baseline; gap: 4px; margin: 14px 0 8px; }
.meta-numero span:first-child { font-size: 34px; font-weight: 800; color: var(--navy); }
.meta-numero small { font-size: 18px; color: var(--suave); }
.meta-numero .direita { margin-left: auto; }
.barra { height: 8px; background: #E6E9F0; border-radius: 99px; overflow: hidden; }
.barra div { height: 100%; background: var(--navy); border-radius: 99px; transition: width .4s; }
.barra div.cheia { background: var(--verde); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cartoes .card + .card { margin-top: 0; }
.cartao-num { text-decoration: none; color: inherit; padding: 14px 16px; }
.cartao-num .r { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--suave); }
.cartao-num .n { font-size: 24px; font-weight: 700; margin-top: 4px; }
a.cartao-num:hover { border-color: #B9C0D6; }
.atencao { border-left: 3px solid #E8A33D; padding-left: 12px; margin-bottom: 16px; }
.atencao a.item-lista { text-decoration: none; color: inherit; display: flex; }
.atencao a.item-lista:hover { background: #F8F9FC; }
.card a.item-lista { text-decoration: none; color: inherit; }
h3.secao { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--suave); margin: 20px 0 10px; }
.card h2 a.suave { font-size: 13px; font-weight: 400; text-decoration: none; }

/* ---------- busca global e favoritos ---------- */
.busca-global { position: relative; margin-top: 14px; }
.busca-global input { background: var(--navy-2); border-color: #3A4070; color: #fff; }
.busca-global input::placeholder { color: #9AA0C4; }
.busca-global .resultados { color: var(--texto); }
.busca-global .resultados a { display: block; padding: 9px 12px; border-bottom: 1px solid var(--borda); color: inherit; text-decoration: none; font-size: 14px; }
.busca-global .resultados a:hover, .busca-global .resultados a.sel { background: #F4F6FA; }
.busca-global .resultados .tipo { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--suave); }
.estrela { background: none; border: 0; font-size: 22px; cursor: pointer; color: #C3C7D4; line-height: 1; padding: 0 4px; vertical-align: middle; }
.estrela.on { color: #F2B01E; }
@media (max-width: 760px) {
  .busca-global { display: none; grid-column: 1 / -1; margin-top: 8px; }
  .sidebar.aberto .busca-global { display: block; }
}

/* ---------- modal e aviso ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgba(15, 18, 40, .45); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { background: #fff; border-radius: 14px; padding: 22px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
.modal h2 { margin: 0 0 6px; font-size: 18px; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.toast { position: fixed; bottom: 20px; right: 20px; padding: 12px 18px; border-radius: 10px; color: #fff; z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.toast-ok { background: var(--navy); } .toast-erro { background: var(--erro); }