:root { --rosa:#D494C4; --rosa-claro:#E8B4D4; --lil:#B4A8C4; --ameixa:#5B3A54; --txt:#4A3B45; --suave:#7A6A78; --fundo:#FBF1F7; --erro:#B0457E; --ok:#4F8A5B; --aviso:#B07A2A; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Segoe UI',Arial,sans-serif; color:var(--txt); background:var(--fundo); font-size:14px; }
.oculto { display:none !important; }
.suave { color:var(--suave); font-size:13px; }
h2 { margin:0 0 16px; color:var(--ameixa); } h3 { margin:0 0 10px; font-size:14px; color:var(--ameixa); }
a { color:#B0457E; }
input, select, textarea, button { font:inherit; }
input, select, textarea { border:1px solid var(--lil); border-radius:6px; padding:8px; width:100%; color:var(--txt); background:#fff; }
textarea { min-height:90px; resize:vertical; }
label { display:block; font-size:12px; color:var(--suave); margin:12px 0 4px; }
button { cursor:pointer; border-radius:6px; padding:8px 14px; font-weight:600; border:1px solid var(--rosa); }
button.primario { background:var(--rosa); color:#fff; }
button.secundario { background:#fff; color:#C97FB4; }
button.perigo { background:#fff; color:var(--erro); border-color:var(--erro); }
button.cheio { width:100%; margin-top:16px; }
button:disabled { opacity:.5; cursor:default; }
.msg { min-height:20px; font-size:13px; color:var(--erro); } .msg.ok { color:var(--ok); }

/* entrada */
.entrada { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:linear-gradient(135deg,#F6E5F0,#E9E2F0); }
.caixa { background:#fff; border:1px solid var(--lil); border-radius:14px; padding:28px 28px 18px; width:100%; max-width:380px; box-shadow:0 6px 28px rgba(91,58,84,.12); }
.caixa .logo { display:block; width:150px; margin:0 auto 6px; }
.caixa h1 { font-size:18px; text-align:center; color:var(--ameixa); margin:6px 0 10px; }

/* app */
.app { display:flex; min-height:100vh; }
.lateral { width:210px; background:#fff; border-right:1px solid #E7DDEA; padding:16px 12px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.marca { text-align:center; margin-bottom:18px; } .marca img { width:130px; display:block; margin:0 auto; } .marca small { color:var(--suave); }
#menu button { display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left; background:none; border:none; padding:10px 12px; margin-bottom:2px; color:var(--txt); border-radius:8px; font-weight:500; }
#menu button:hover { background:var(--fundo); }
#menu button.ativo { background:linear-gradient(90deg,var(--rosa-claro),var(--rosa)); color:#fff; font-weight:600; }
.selo { background:var(--erro); color:#fff; border-radius:10px; font-size:11px; padding:0 7px; }
.sair { margin-top:auto; }
.conteudo { flex:1; padding:22px 26px; min-width:0; }

.cartao { background:#fff; border:1px solid #E7DDEA; border-radius:10px; padding:16px; margin-bottom:16px; }
.barra { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.barra label { margin:0; display:flex; flex-direction:column; gap:3px; } .barra select, .barra input { width:auto; min-width:150px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:#fff; border:1px solid #E7DDEA; border-radius:10px; padding:14px; }
.kpi .v { font-size:28px; font-weight:700; color:var(--ameixa); line-height:1.1; } .kpi .r { font-size:12px; color:var(--suave); margin-top:4px; }
.kpi.alerta .v { color:var(--erro); } .kpi.atencao .v { color:var(--aviso); }
.graficos { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); gap:12px; }
.grafico { display:flex; align-items:flex-end; gap:3px; height:110px; padding-top:6px; }
.grafico .b { flex:1; background:var(--rosa); border-radius:3px 3px 0 0; min-height:2px; position:relative; }
.grafico .b.zero { background:#EADFEA; }
.grafico-eixo { display:flex; justify-content:space-between; font-size:11px; color:var(--suave); margin-top:4px; }

/* tabelas */
.tabela { padding:0; overflow:auto; } table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid #F0E8F0; vertical-align:top; } th { font-size:12px; color:var(--suave); font-weight:600; background:#FCF8FC; }
tr.item { cursor:pointer; } tr.item:hover { background:var(--fundo); }
.etiqueta { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; background:#EFE6EE; margin-right:4px; white-space:nowrap; }
.etiqueta.ativa { background:#E2F1E5; color:var(--ok); } .etiqueta.pendente { background:#FBF0DA; color:var(--aviso); } .etiqueta.revogada { background:#F8DDE9; color:var(--erro); } .etiqueta.vencida { background:#F8DDE9; color:var(--erro); }

/* kanban */
.kanban { display:grid; grid-template-columns:repeat(4, minmax(230px,1fr)); gap:12px; align-items:start; overflow-x:auto; }
.kanban.menos { grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); }
.coluna { background:#F4EFF8; border:1px solid #E3DAEB; border-radius:10px; padding:10px; min-height:220px; }
.coluna.alvo { outline:2px dashed var(--rosa); background:#FBE6F3; }
.coluna h3 { margin:2px 4px 10px; display:flex; justify-content:space-between; } .coluna h3 span { background:#fff; border-radius:10px; padding:0 8px; font-weight:600; color:var(--suave); }
.card { background:#fff; border:1px solid var(--lil); border-radius:8px; padding:10px; margin-bottom:8px; cursor:grab; }
.card:hover { border-color:var(--rosa); box-shadow:0 2px 8px rgba(212,148,196,.3); } .card.arrastando { opacity:.4; }
.card .t { font-weight:600; margin-bottom:4px; word-break:break-word; } .card .m { font-size:12px; color:var(--suave); }
.prazo { margin-top:6px; font-size:12px; font-weight:600; } .prazo.ok { color:var(--ok); } .prazo.logo { color:var(--aviso); } .prazo.vencido { color:var(--erro); }

/* gaveta */
.gaveta { position:fixed; top:0; right:0; width:min(600px,100%); height:100%; background:#fff; border-left:1px solid var(--lil); box-shadow:-4px 0 18px rgba(0,0,0,.12); padding:20px; overflow:auto; z-index:10; }
.gaveta-topo { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; } .gaveta-topo h2 { margin:0; font-size:17px; }
.bloco { border:1px solid #EDE3EE; border-radius:8px; padding:12px; margin:12px 0; } .bloco h3 { margin-bottom:6px; }
.acoes { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center; } .acoes select { width:auto; }
.msgt { padding:10px 12px; border-radius:8px; margin:8px 0; white-space:pre-wrap; word-break:break-word; } .msgt.cliente { background:#F4EFF8; } .msgt.suporte { background:#FBE6F3; margin-left:28px; }
.msgt small { display:block; color:var(--suave); margin-bottom:4px; }
.lista-simples { margin:0; padding-left:18px; } .lista-simples li { margin:3px 0; font-size:13px; }
.anexo { margin:4px 6px 0 0; }
@media (max-width:760px) { .app { flex-direction:column; } .lateral { width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; gap:6px; } #menu { display:flex; flex-wrap:wrap; } .sair { margin:0 0 0 auto; } .marca { margin:0; } }