@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* Painel Lexo — base visual de todas as telas.
   Destaque azul Lexo; menu lateral preto. */
:root{
  --acc:#2e6bff; --acc-hover:#1f57e0; --acc-bg:#e8efff; --acc-border:#b9ccff;
  --acc-text:#1d4ed8;   /* destaque em texto sobre fundo claro */
  --acc-ink:#ffffff;    /* texto em cima do azul */

  --green:hsl(150,80%,34%); --green-bg:hsl(148,76%,95%); --green-border:hsl(148,55%,86%);
  --amber:hsl(35,95%,46%); --amber-hover:hsl(35,95%,40%); --amber-bg:hsl(42,100%,94%); --amber-border:hsl(42,80%,85%);
  --red:hsl(354,76%,51%); --red-hover:hsl(354,76%,43%); --red-bg:hsl(354,100%,96.5%); --red-border:hsl(354,70%,89%);

  --bg:#f5f5f4; --card:#ffffff; --border:#e7e5e4;
  --ink:#08090c; --text:#171717; --muted:#737373; --white:#ffffff; --soft:hsl(40,5%,96.5%);

  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 4px 14px -6px rgba(16,24,40,.06);
  --shadow-md:0 4px 8px -2px rgba(16,24,40,.05),0 16px 32px -12px rgba(16,24,40,.10);
  --shadow-lg:0 12px 24px -8px rgba(16,24,40,.12),0 28px 56px -16px rgba(16,24,40,.14);
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:24px; --r-pill:999px;
  --tr:all .2s cubic-bezier(.4,0,.2,1);
  --menu-w:236px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:hsl(40,5%,82%);border-radius:4px}

.content{margin-left:var(--menu-w);flex:1;min-width:0;padding:32px 36px;min-height:100vh;transition:var(--tr)}
.page-header{margin-bottom:28px;animation:surge .4s ease-out}
.page-header h1{font-family:'Outfit',sans-serif;font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.page-header .sub{font-size:14px;color:var(--muted);margin-top:4px;font-weight:500}

.card{background:var(--card);border-radius:var(--r-lg);border:1px solid var(--border);padding:24px;box-shadow:var(--shadow-sm);transition:var(--tr);position:relative}
.card:hover{box-shadow:var(--shadow-md)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--acc);color:var(--acc-ink);border:none;border-radius:var(--r-pill);padding:11px 22px;font-weight:700;font-size:13.5px;cursor:pointer;transition:var(--tr);font-family:inherit;text-decoration:none}
.btn:hover{background:var(--acc-hover);transform:translateY(-1px);box-shadow:0 6px 16px rgba(46,107,255,.28)}
.btn.ghost{background:var(--white);color:var(--text);border:1px solid var(--border)}
.btn.ghost:hover{background:var(--bg);transform:none;box-shadow:none}

/* aviso de modo demonstração */
.demo-faixa{display:flex;align-items:center;gap:10px;background:var(--acc-bg);border:1px solid var(--acc-border);color:var(--acc-text);border-radius:var(--r-md);padding:10px 14px;font-size:12.5px;font-weight:600;margin-bottom:18px}
.demo-faixa b{font-weight:800}

/* ── Menu lateral ─────────────────────────────────────────────────────────── */
.menu{width:var(--menu-w);background:#08090c;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;overflow-y:auto;z-index:100;border-right:1px solid #1c1f26;transition:var(--tr);scrollbar-color:#2a2e38 #08090c}
.menu-logo{display:flex;align-items:center;gap:9px;padding:24px 44px 24px 20px;font-family:'Outfit',sans-serif;font-weight:900;font-size:19px;color:#fff;text-decoration:none;border-bottom:1px solid #1c1f26;letter-spacing:-.02em}
.menu-logo .sel{width:30px;height:30px;border-radius:9px;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#fff;flex:none}
.menu-logo b{color:var(--acc)}
.menu-recolher{position:absolute;top:24px;right:12px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:#8a909c;border-radius:var(--r-sm);cursor:pointer}
.menu-recolher:hover{background:#171a21;color:#fff}

.menu-conta{padding:12px;border-bottom:1px solid #1c1f26;position:relative}
.menu-conta-btn{width:100%;background:#12151b;border:1px solid #1c1f26;border-radius:var(--r-md);padding:10px 12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:inherit;font-size:12.5px;font-weight:700;color:#fff;text-align:left}
.menu-conta-btn:hover{background:#171a21}
.menu-conta-lista{display:none;position:absolute;top:100%;left:0;right:0;margin:6px 12px 0;background:#12151b;border:1px solid #1c1f26;border-radius:var(--r-md);box-shadow:0 12px 32px -8px rgba(0,0,0,.6);z-index:200;overflow:hidden}
.menu-conta-lista.aberta{display:block}
.menu-conta-lista button{width:100%;background:transparent;border:0;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:inherit;font-size:13px;color:#e5e7eb;cursor:pointer;text-align:left}
.menu-conta-lista button:hover{background:#1b1f27;color:#fff}
.menu-conta-lista button.on{background:var(--acc);color:#fff;font-weight:700}
.menu-conta-lista .add{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:12px;font-weight:700;color:#8fb0ff;text-decoration:none;border-top:1px solid #1c1f26}
.ponto{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;flex:none}

.menu-secao{padding:16px 12px 4px}
.menu-secao-tit{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;color:#6b7280;text-transform:uppercase;letter-spacing:.08em;padding:0 10px;margin-bottom:6px;cursor:pointer;user-select:none;border-radius:6px}
.menu-secao-tit:hover{color:#fff}
.menu-secao-tit svg{margin-left:auto;transition:transform .15s}
.menu-secao.fechada .menu-secao-tit svg{transform:rotate(-90deg)}
.menu-secao.fechada .menu-secao-tit{margin-bottom:0}
.menu-secao.fechada .menu-link{display:none}
.menu-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-md);font-size:13.5px;color:#a3a7b0;text-decoration:none;margin-bottom:2px;font-weight:600;transition:var(--tr)}
.menu-link svg{color:#6b7280;flex:none}
.menu-link:hover{background:#171a21;color:#fff}
.menu-link:hover svg{color:#fff}
.menu-link.on{background:var(--acc);color:#fff;font-weight:800}
.menu-link.on svg{color:#fff}
.menu-selo{margin-left:auto;min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center}
.menu-link.on .menu-selo{background:#fff;color:var(--acc)}
.menu-rodape{margin-top:auto;padding:16px 20px;border-top:1px solid #1c1f26;background:#0d0f14}
.menu-rodape .t{font-size:10px;font-weight:800;color:#6b7280;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.menu-rodape .v{font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;color:#fff}
.menu-sair{margin-top:8px;background:none;border:1px solid #2a2e37;color:#a3a7b0;border-radius:var(--r-md);padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.menu-sair:hover{color:#fff;border-color:#6b7280}

.menu-abrir{display:none;position:fixed;top:12px;left:12px;z-index:300;width:44px;height:44px;align-items:center;justify-content:center;background:#08090c;color:#fff;border:1px solid #1c1f26;border-radius:var(--r-md);box-shadow:var(--shadow-md);cursor:pointer}
.menu-fundo{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);z-index:90}
@media(min-width:901px){
  html.menu-recolhido .menu{transform:translateX(-100%);visibility:hidden}
  html.menu-recolhido .content{margin-left:0;padding-left:72px}
  html.menu-recolhido .menu-abrir{display:flex}
}
@media(max-width:900px){
  .menu-recolher{display:none}
  .content{margin-left:0;padding:20px;padding-top:70px}
  .menu{transform:translateX(-100%);box-shadow:var(--shadow-lg)}
  .menu.aberto{transform:none}
  .menu-abrir{display:flex}
  .menu-fundo.aberto{display:block}
}
@media(max-width:640px){
  .content{padding:14px;padding-top:68px}
  .page-header h1{font-size:22px}
  .card{padding:18px;border-radius:16px}
}

@keyframes surge{from{opacity:0}to{opacity:1}}
@keyframes gira{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.spinner{display:inline-block;width:15px;height:15px;border:2.5px solid var(--border);border-top-color:var(--acc);border-radius:50%;animation:gira .8s linear infinite;vertical-align:-2px;margin-right:7px}
.vazio{padding:30px 18px;text-align:center;color:var(--muted);font-size:12.5px}

/* tela ainda não construída */
.em-obra{max-width:520px;margin:60px auto;text-align:center}
.em-obra h2{font-family:'Outfit',sans-serif;font-size:20px;font-weight:800;color:var(--ink);margin-bottom:8px}
.em-obra p{color:var(--muted);font-size:14px;line-height:1.5}