/* Hub DS — design system Descomplicando Sites */
:root{
  --roxo:#240045; --roxo-2:#3B0764; --rosa:#ee108c; --rosa-claro:#ff63ba;
  --lilas-claro:#eaa8fe; --lilas-escuro:#bf6dd8; --lilas:#9B7FDD;
  --lilas-palido:#F2EEFB; --rosa-palido:#FDEAF5; --borda-roxo:#D6C8F2;
  --branco:#FFFFFF; --bg:#f8fafc; --tinta:#0f172a; --tinta-2:#475569;
  --fonte-titulo:'Sora',system-ui,sans-serif;
  --fonte-texto:'Manrope',system-ui,sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s8:64px;
  --raio:14px; --raio-sm:8px; --raio-pill:999px;
  --sombra:0 4px 20px rgba(36,0,69,.08);
  --sidebar:264px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fonte-texto);background:var(--bg);color:var(--tinta);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:15px}
a{color:inherit}

.app{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{width:var(--sidebar);background:var(--roxo);padding:var(--s4) var(--s2);display:flex;flex-direction:column;gap:var(--s5);position:fixed;inset:0 auto 0 0;overflow-y:auto}
.marca{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 var(--s1)}
.marca img{width:100%;max-width:184px;height:auto;display:block}
.marca .nome{font-family:var(--fonte-titulo);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--lilas-claro);text-align:center}
.menu{display:flex;flex-direction:column;gap:4px}
.menu-titulo{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#8f7ab5;padding:0 var(--s2) var(--s1)}
.menu-item{display:flex;align-items:center;gap:12px;padding:12px var(--s2);border-radius:var(--raio-sm);color:#c9b6e8;font-size:15px;font-weight:500;position:relative;text-decoration:none;transition:background .15s,color .15s}
.menu-item:hover{background:rgba(255,255,255,.06);color:var(--branco)}
.menu-item.ativo{background:rgba(255,255,255,.08);color:var(--branco);font-weight:600}
.menu-item.ativo::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:var(--raio-pill);background:var(--lilas-claro)}
.menu-item svg{width:20px;height:20px;flex:0 0 20px}
.rodape-side{margin-top:auto;padding-top:var(--s2);border-top:1px solid rgba(255,255,255,.1)}
.usuario-side{display:flex;align-items:center;gap:12px;padding:var(--s1)}
.usuario-side .avatar{background:var(--lilas-escuro)}
.nome-side{color:var(--branco);font-weight:600;font-size:14px}
.sair{color:#c9b6e8;font-size:12px;text-decoration:none}
.sair:hover{color:var(--rosa-claro)}

/* CONTEUDO */
.conteudo{flex:1;margin-left:var(--sidebar);padding:var(--s5) var(--s4) var(--s8);min-width:0}
.wrap{max-width:1200px;margin:0 auto}
.topo{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-end;justify-content:space-between;margin-bottom:var(--s5)}
h1{font-family:var(--fonte-titulo);font-size:32px;line-height:1.2;font-weight:700}
h1 .destaque{color:var(--rosa)}
.legenda{color:var(--tinta-2);margin-top:var(--s1);max-width:650px}
.titulo-secao{font-family:var(--fonte-titulo);font-size:22px;margin:var(--s5) 0 var(--s2)}

/* BOTOES */
.btn{font-family:var(--fonte-titulo);font-weight:700;font-size:14px;padding:12px 24px;border-radius:var(--raio-pill);display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:filter .15s,background .15s}
.btn-rosa{background:var(--rosa);color:var(--branco)}
.btn-rosa:hover{filter:brightness(1.08)}
.btn-contorno{border:2px solid var(--roxo);color:var(--roxo);padding:10px 22px;background:transparent}
.btn-contorno:hover{background:var(--lilas-palido)}
.btn-card{padding:10px 20px}
.btn-texto{color:var(--tinta-2);font-size:13px;font-weight:600;font-family:var(--fonte-titulo);padding:6px 10px;border-radius:var(--raio-sm);text-decoration:none;display:inline-block}
.btn-texto:hover{background:var(--lilas-palido);color:var(--roxo)}
.btn-perigo:hover{background:var(--rosa-palido);color:var(--rosa)}
.em-linha{display:inline}
.linha-botoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s3);align-items:center}
.barra-salvar{position:sticky;bottom:var(--s2);background:var(--bg);padding:var(--s2) 0}

/* CARDS */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:var(--s3)}
.card{background:var(--branco);border:1px solid var(--borda-roxo);border-radius:var(--raio);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.card-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2)}
.icone{width:48px;height:48px;border-radius:var(--raio-sm);background:var(--lilas-palido);color:var(--roxo);display:flex;align-items:center;justify-content:center;flex:0 0 48px}
.icone.pequeno{width:36px;height:36px;flex:0 0 36px}
.card h3{font-family:var(--fonte-titulo);font-size:20px;line-height:1.3;font-weight:700}
.card p{font-size:14px;color:var(--tinta-2)}
.card .url{font-size:12px;color:var(--lilas);word-break:break-all}
.card-rodape{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:auto;padding-top:var(--s1)}

.pill{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:6px 12px;border-radius:var(--raio-pill);font-family:var(--fonte-titulo);letter-spacing:.3px;white-space:nowrap}
.pill-admin{background:var(--lilas-palido);color:var(--roxo)}
.pill-colaborador{background:#eef2ff;color:#3730a3}
.pill-vendas{background:var(--rosa-palido);color:var(--rosa)}
.pill-leitura{background:#f1f5f9;color:var(--tinta-2)}
.badge-inativo{font-size:11px;font-weight:700;color:var(--tinta-2);background:#f1f5f9;padding:3px 8px;border-radius:var(--raio-pill)}

.vazio{background:var(--branco);border:1px dashed var(--borda-roxo);border-radius:var(--raio);padding:var(--s6);text-align:center;color:var(--tinta-2)}
.vazio strong{display:block;font-family:var(--fonte-titulo);color:var(--roxo);font-size:20px;margin-bottom:var(--s1)}

/* TABELAS */
.tabela-wrap{background:var(--branco);border:1px solid var(--borda-roxo);border-radius:var(--raio);overflow-x:auto;box-shadow:var(--sombra)}
table{border-collapse:collapse;width:100%}
th,td{padding:var(--s2);text-align:left;border-bottom:1px solid var(--borda-roxo);font-size:14px}
thead th{font-family:var(--fonte-titulo);font-size:13px;font-weight:700;color:var(--roxo);background:var(--lilas-palido);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
.apoio{color:var(--tinta-2)}
.pessoa,.linha-sistema{display:flex;align-items:center;gap:12px;min-width:200px}
.avatar{width:40px;height:40px;border-radius:var(--raio-pill);flex:0 0 40px;background:var(--roxo);color:var(--branco);display:flex;align-items:center;justify-content:center;font-family:var(--fonte-titulo);font-weight:700;font-size:15px}
.pessoa .nome,.linha-sistema .nome{font-weight:700}
.pessoa .cargo,.linha-sistema .cargo{font-size:12px;color:var(--tinta-2)}
.pessoa .email{font-size:12px;color:var(--lilas)}
.link-url{color:var(--lilas);text-decoration:none;font-size:13px}
td.celula{text-align:center;vertical-align:middle}
.select-papel{border:1px solid var(--borda-roxo);border-radius:var(--raio-pill);padding:6px 12px;font-size:12px;font-weight:600;color:var(--roxo);background:var(--branco);cursor:pointer;outline:none}

/* PAINEIS E FORMULARIOS */
.painel{background:var(--branco);border:1px solid var(--borda-roxo);border-radius:var(--raio);padding:var(--s4);box-shadow:var(--sombra);max-width:720px}
.painel h2{font-family:var(--fonte-titulo);font-size:22px;margin-bottom:var(--s1)}
.ajuda{font-size:14px;color:var(--tinta-2);margin-bottom:var(--s3);max-width:650px}
.campo{margin-bottom:var(--s3)}
.campo label{display:block;font-size:13px;font-weight:700;font-family:var(--fonte-titulo);color:var(--roxo);margin-bottom:var(--s1)}
.campo input[type=text],.campo input[type=email],.campo input[type=password],.campo input[type=number],.campo select{width:100%;padding:12px var(--s2);border:1px solid var(--borda-roxo);border-radius:var(--raio-sm);outline:none;background:var(--branco);color:var(--tinta)}
.campo input:focus,.campo select:focus{border-color:var(--lilas);box-shadow:0 0 0 3px rgba(155,127,221,.18)}
.campo .dica{display:block;font-size:12px;color:var(--tinta-2);margin-top:6px;font-weight:400;font-family:var(--fonte-texto)}
.marcador{display:flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--fonte-titulo);font-size:13px;color:var(--roxo)}
.marcador input{width:auto}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}

.seletor-icone{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:var(--s1)}
.op-icone{width:56px;height:56px;border-radius:var(--raio-sm);border:1px solid var(--borda-roxo);background:var(--branco);color:var(--roxo);display:flex;align-items:center;justify-content:center;cursor:pointer}
.op-icone input{display:none}
.op-icone.sel{border-color:var(--rosa);background:var(--rosa-palido);color:var(--rosa)}

.recado{border-radius:var(--raio-sm);padding:12px var(--s2);font-size:14px;font-weight:600;margin-bottom:var(--s3)}
.recado-ok{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.recado-erro{background:var(--rosa-palido);color:var(--rosa);border:1px solid #fbcfe8}

.aviso{background:var(--lilas-palido);border-left:4px solid var(--rosa);border-radius:var(--raio-sm);padding:var(--s3);margin-top:var(--s4)}
.aviso strong{font-family:var(--fonte-titulo);color:var(--roxo);display:block;margin-bottom:var(--s1)}
.aviso p{font-size:15px;color:var(--tinta-2);max-width:650px}

.ver-como{background:var(--branco);border:1px solid var(--borda-roxo);border-radius:var(--raio);padding:12px var(--s2);display:flex;align-items:center;gap:12px;box-shadow:var(--sombra)}
.ver-como label{font-size:13px;font-weight:600;color:var(--tinta-2);white-space:nowrap}
.ver-como select{font-weight:600;color:var(--roxo);border:none;background:transparent;padding:4px;cursor:pointer;outline:none}

/* LOGIN */
.tela-login{background:linear-gradient(160deg,var(--roxo),var(--roxo-2));display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--s3)}
.caixa-login{background:var(--branco);border-radius:var(--raio);padding:var(--s5) var(--s4);width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.logo-login{display:block;width:196px;margin:0 auto var(--s4);background:var(--roxo);padding:20px 24px;border-radius:var(--raio)}
.caixa-login h1{font-size:24px;text-align:center;margin-bottom:var(--s1)}
.caixa-login .ajuda{text-align:center}
.rodape-login{font-size:12px;color:var(--tinta-2);text-align:center;margin-top:var(--s3)}

@media (max-width:900px){
  .app{flex-direction:column}
  .sidebar{position:static;width:100%;flex-direction:row;align-items:center;gap:var(--s3);padding:var(--s2);overflow-x:auto}
  .conteudo{margin-left:0;padding:var(--s4) var(--s2) var(--s6)}
  .marca{flex-direction:row;gap:12px}
  .marca img{max-width:132px}
  .marca .nome{display:none}
  .menu{flex-direction:row;gap:var(--s1)}
  .menu-titulo,.rodape-side{display:none}
  .menu-item{white-space:nowrap;padding:10px 12px}
  .menu-item.ativo::before{top:auto;bottom:2px;left:12px;right:12px;width:auto;height:3px}
  h1{font-size:28px}
  .dupla{grid-template-columns:1fr}
}