/* app-rakkau: estilos do CRM Rakkau. Layout sidebar + topbar no padrão Teclak CRM, KPIs, gráficos, tabela de leads e login. Paleta Rakkau. */
:root{
  --oliva:#5B6D41;--oliva-900:#2E3820;--oliva-800:#384528;--oliva-700:#45542F;
  --creme:#FEF9D0;--vinho:#72232D;--vinho-700:#5C1C24;--ambar:#B7832F;
  --fundo:#F4F2EA;--branco:#FFFFFF;--texto:#23281C;--suave:#6B7160;--borda:#E3E0D2;
  --raio:14px;--sombra:0 1px 2px rgba(35,40,28,.06),0 4px 16px rgba(35,40,28,.05);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--fundo);color:var(--texto);font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--vinho);outline-offset:2px}

/* Estrutura */
.app{display:flex;min-height:100vh}
.principal{flex:1;margin-left:264px;min-width:0;display:flex;flex-direction:column}
.conteudo{padding:28px 32px 48px}

/* Sidebar */
.sidebar{width:264px;background:var(--oliva-900);color:#E9EAD9;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:40;transition:transform .2s ease}
.sidebar__marca{display:flex;align-items:center;gap:12px;padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar__logo{width:46px;height:46px;border-radius:50%;background:var(--creme);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.sidebar__logo img{width:100%;height:100%;object-fit:cover}
.sidebar__logo span{font-weight:900;color:var(--vinho);font-size:20px}
.sidebar__nome{font-weight:900;letter-spacing:.06em;font-size:17px;color:#FFFFFF;line-height:1.1}
.sidebar__sub{font-size:11px;color:#B9BEA4;font-weight:600}
.sidebar__nav{flex:1;overflow-y:auto;padding:10px 12px 16px}
.sidebar__secao{font-size:11px;font-weight:800;letter-spacing:.12em;color:#8E9579;text-transform:uppercase;padding:16px 12px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;font-weight:700;color:#DADDC8;margin-bottom:2px;transition:background .15s,color .15s}
.nav-item svg{width:19px;height:19px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-item:hover{background:var(--oliva-800);color:#FFFFFF}
.nav-item.ativo{background:var(--vinho);color:#FFFFFF;box-shadow:0 6px 16px rgba(114,35,45,.35)}
.nav-item.em-breve{opacity:.5;cursor:default}
.nav-item.em-breve:hover{background:none;color:#DADDC8}
.tag-breve{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(254,249,208,.12);color:var(--creme);padding:2px 7px;border-radius:999px;white-space:nowrap}
.sidebar__usuario{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.12)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--vinho);color:#FFFFFF;display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0}
.sidebar__usuario-nome{font-weight:800;font-size:14px;color:#FFFFFF;line-height:1.2}
.sidebar__usuario-papel{font-size:12px;color:#B9BEA4}
.sidebar__usuario form{margin-left:auto}
.btn-sair{background:none;border:0;color:#B9BEA4;cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center}
.btn-sair:hover{color:#FFFFFF;background:var(--oliva-800)}
.btn-sair svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Topbar */
.topbar{height:68px;background:var(--branco);border-bottom:1px solid var(--borda);display:flex;align-items:center;gap:14px;padding:0 32px;position:sticky;top:0;z-index:30}
.migalha{font-size:15px;color:var(--suave)}
.migalha strong{color:var(--texto);font-weight:800}
.migalha span{margin:0 6px;color:#C5C2B2}
.topbar__acoes{margin-left:auto;display:flex;gap:10px}
.btn-menu{display:none;background:none;border:0;cursor:pointer;padding:6px}
.btn-menu svg{width:22px;height:22px;stroke:var(--texto);fill:none;stroke-width:2;stroke-linecap:round}

/* Botões */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;font:inherit;font-weight:800;font-size:14px;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:background .15s,border-color .15s}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--primario{background:var(--vinho);color:#FFFFFF}
.btn--primario:hover{background:var(--vinho-700)}
.btn--secundario{background:var(--branco);color:var(--texto);border-color:var(--borda)}
.btn--secundario:hover{border-color:var(--oliva)}
.btn--texto{background:none;color:var(--suave)}
.btn--texto:hover{color:var(--vinho)}
.desabilitado{opacity:.45;pointer-events:none}

/* Conteúdo */
.saudacao{font-size:16px;font-weight:700;color:var(--suave);margin:0 0 6px}
.secao-titulo{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--oliva);margin:26px 0 12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);overflow:hidden}
.kpi{padding:24px 18px;text-align:center;border-right:1px solid var(--borda)}
.kpi:last-child{border-right:0}
.kpi__rotulo{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.kpi__valor{font-size:34px;font-weight:900;margin:8px 0 4px;line-height:1}
.kpi__legenda{font-size:13px;font-weight:600;color:var(--suave)}
.kpis--compacto .kpi{padding:16px 14px}
.kpis--compacto .kpi__valor{font-size:26px;margin-bottom:0}
.cor-vinho{color:var(--vinho)}
.cor-oliva{color:var(--oliva)}
.cor-ambar{color:var(--ambar)}
.cartao{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);padding:22px}
.cartao__titulo{font-weight:800;font-size:15px;margin-bottom:14px}
.cartao__titulo--espaco{margin-top:24px}
.alerta{padding:12px 16px;border-radius:10px;font-weight:700;font-size:14px;margin-bottom:18px}
.alerta--erro{background:#F8E6E8;color:var(--vinho);border:1px solid #EBC5CA}
.alerta--info{background:#F1F4EA;color:var(--oliva);border:1px solid #D9E0C8}
.suave{color:var(--suave);font-size:13px}
.vazio{color:var(--suave);font-size:14px;margin:0}
.nowrap{white-space:nowrap}
.link{color:var(--oliva);font-weight:700}
.link:hover{color:var(--vinho)}

/* Gráficos */
.grade-graficos{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
.grafico{position:relative;height:300px}
.barras{display:flex;flex-direction:column;gap:9px}
.barra{display:grid;grid-template-columns:34px 1fr 40px;align-items:center;gap:10px;font-size:13px}
.barra--larga{grid-template-columns:110px 1fr 40px}
.barra__rotulo{font-weight:800;color:var(--texto);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra__trilho{height:10px;background:#EEEBDF;border-radius:999px;overflow:hidden}
.barra__valor{display:block;height:100%;background:var(--oliva);border-radius:999px}
.barra__valor--vinho{background:var(--vinho)}
.barra__numero{text-align:right;font-weight:800;color:var(--suave)}

/* Próximas entregas */
.lista-breve{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.breve{background:var(--branco);border:1px dashed #D6D2BF;border-radius:var(--raio);padding:18px;display:flex;gap:14px;align-items:flex-start}
.breve__icone{width:40px;height:40px;border-radius:10px;background:#F1F4EA;display:grid;place-items:center;flex-shrink:0}
.breve__icone svg{width:20px;height:20px;stroke:var(--oliva);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.breve__titulo{font-weight:800;margin-bottom:4px}
.breve__texto{font-size:13px;color:var(--suave);line-height:1.45}

/* Filtros e tabela de leads */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 12px}
.filtros input,.filtros select{padding:10px 12px;border:1px solid var(--borda);border-radius:10px;font:inherit;font-size:14px;background:var(--branco);color:var(--texto)}
.filtros input:focus,.filtros select:focus{outline:0;border-color:var(--oliva);box-shadow:0 0 0 3px rgba(91,109,65,.18)}
.filtros__busca{flex:1;min-width:260px}
.tabela-info{font-size:13px;color:var(--suave);font-weight:700;margin-bottom:10px}
.tabela-caixa{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{text-align:left;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--suave);padding:12px 14px;border-bottom:1px solid var(--borda);background:#FBFAF5;white-space:nowrap}
.tabela td{padding:12px 14px;border-bottom:1px solid #EFECE2;vertical-align:top}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr:hover{background:#FCFBF6}
.detalhe summary{cursor:pointer;list-style:none}
.detalhe summary::-webkit-details-marker{display:none}
.detalhe summary strong{border-bottom:1px dashed #C9C5B2}
.detalhe__corpo{margin-top:8px;padding:10px 12px;background:#F7F5EC;border-radius:8px;font-size:13px;line-height:1.5;color:var(--texto)}
.pilula{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:800}
.pilula--oliva{background:#EAEFDF;color:var(--oliva)}
.pilula--ambar{background:#F7EBD5;color:#8A5F18}
.paginacao{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.paginacao__info{font-size:14px;font-weight:700;color:var(--suave)}

/* Login */
.login-fundo{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--oliva-900);background-image:radial-gradient(circle at 15% 20%,rgba(254,249,208,.08),transparent 40%),radial-gradient(circle at 85% 85%,rgba(114,35,45,.35),transparent 45%)}
.login-cartao{width:100%;max-width:400px;background:var(--branco);border-radius:18px;padding:34px 30px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-marca{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.login-logo{background:var(--oliva-900)}
.login-logo span{color:var(--creme)}
.login-nome{font-weight:900;font-size:20px;letter-spacing:.08em;color:var(--oliva-900)}
.login-sub{font-size:13px;color:var(--suave);font-weight:600}
.campo{display:block;margin-bottom:16px}
.campo span{display:block;font-size:13px;font-weight:800;color:var(--texto);margin-bottom:6px}
.campo input{width:100%;padding:12px 14px;border:1px solid var(--borda);border-radius:10px;font:inherit;background:#FCFBF6;transition:border-color .15s,box-shadow .15s}
.campo input:focus{outline:0;border-color:var(--oliva);box-shadow:0 0 0 3px rgba(91,109,65,.18)}
.lembrar{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--suave);margin:4px 0 20px;font-weight:600}
.btn-primario{width:100%;padding:13px;border:0;border-radius:10px;background:var(--vinho);color:#FFFFFF;font:inherit;font-weight:800;font-size:15px;cursor:pointer;transition:background .15s}
.btn-primario:hover{background:var(--vinho-700)}

/* Mobile */
.sombra-menu{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:35}
.sombra-menu.ativa{display:block}
@media (max-width:1100px){
  .grade-graficos{grid-template-columns:1fr}
}
@media (max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.aberta{transform:none}
  .principal{margin-left:0}
  .btn-menu{display:block}
  .topbar{padding:0 16px}
  .conteudo{padding:20px 16px 40px}
  .kpi{border-right:0;border-bottom:1px solid var(--borda)}
  .kpi:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* Cupons: filtros com rótulo, KPIs em seis colunas, linha clicável e gaveta lateral de pedidos */
.filtros--cupons{align-items:flex-end;background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:16px;margin-top:0}
.filtros__campo{display:flex;flex-direction:column;gap:6px}
.filtros__campo span{font-size:12px;font-weight:800;color:var(--suave)}
.filtros__campo--busca{flex:1;min-width:240px}
.filtros__checks{display:flex;flex-wrap:wrap;gap:16px;width:100%;order:5}
.filtros__checks label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--texto)}
.filtros__botoes{display:flex;gap:8px}
.kpis--seis{margin-bottom:18px}
.kpi__valor--menor{font-size:24px}
.num{text-align:right}
.tabela th.num{text-align:right}
.codigo{font-weight:900;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.tabela tr.clicavel{cursor:pointer}
.tabela tr.clicavel:focus-visible{outline:2px solid var(--vinho);outline-offset:-2px}
.pilula--cinza{background:#EEEDE6;color:#5E6253}
.cartao.vazio{text-align:center;padding:28px}
.sombra-gaveta{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50}
.sombra-gaveta.ativa{display:block}
.gaveta{position:fixed;top:0;right:0;height:100%;width:min(760px,94vw);background:var(--fundo);box-shadow:-18px 0 50px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .2s ease;z-index:60;display:flex;flex-direction:column}
.gaveta.aberta{transform:none}
.gaveta__cabeca{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;background:var(--branco);border-bottom:1px solid var(--borda)}
.gaveta__titulo{font-weight:900;font-size:16px}
.gaveta__acoes{display:flex;gap:8px}
.gaveta__corpo{padding:16px 20px;overflow:auto}
.gaveta__resumo{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:12px;font-size:14px;color:var(--suave)}
.gaveta__resumo strong{color:var(--texto)}
.carregando{padding:16px;border:1px dashed #D6D2BF;border-radius:10px;color:var(--suave);background:var(--branco)}
@media (max-width:900px){
  .gaveta__cabeca{flex-direction:column;align-items:flex-start}
}