/* ===== VLTAPP — tema LEVE (paleta do logo) ===== Menu em trilho fino com submenu que abre para o lado (ver includes/header.php). Dark mode opcional via [data-theme="dark"] no (toggle no topo). Todos os nomes de classe/variaveis antigos foram mantidos. */ :root{ /* marca */ --primary:#1B84C4; --primary-dark:#0F5A92; --primary-2:#2DA9E0; --primary-light:#E9F4FC; --primary-soft:#F4FAFE; --grad:linear-gradient(135deg,#2DA9E0 0%,#1668A6 100%); --grad-rail:linear-gradient(180deg,#2DA9E0 0%,#1B84C4 45%,#0F5A92 100%); --indigo:#6366F1; --indigo-2:#818CF8; --grad-indigo:linear-gradient(135deg,#818CF8,#4F46E5); /* neutros (vies azulado, bem claros) */ --bg:#F5F8FC; --surface:#FFFFFF; --surface-2:#F7FAFD; --glass:rgba(255,255,255,.78); --glass-brd:rgba(255,255,255,.9); --text:#16283D; --muted:#6B7C93; --faint:#9AAABF; --border:#EBF1F8; --border-2:#DDE7F1; --input-bg:#F8FBFD; /* semanticos */ --danger:#E5484D; --success:#16A34A; --accent:#F59E0B; --warn:#D97706; --ok-bg:#EAF8EF; --danger-bg:#FDEBEE; --warn-bg:#FEF5E7; --radius:14px; --radius-lg:20px; --radius-sm:10px; --rail-w:78px; --fly-w:246px; --sh-sm:0 1px 2px rgba(20,45,80,.04); --sh:0 1px 2px rgba(20,45,80,.04), 0 10px 28px rgba(20,45,80,.055); --sh-lg:0 22px 58px rgba(20,45,80,.12); --sh-brand:0 8px 20px rgba(27,132,196,.26); --bg-glow-1:rgba(45,169,224,.10); --bg-glow-2:rgba(99,102,241,.07); } :root[data-theme="dark"]{ --primary:#4FB4E8; --primary-dark:#8AD0F2; --primary-2:#38B0EA; --primary-light:rgba(45,169,224,.15); --primary-soft:rgba(45,169,224,.09); --grad-rail:linear-gradient(180deg,#12395C 0%,#0D2E4C 50%,#08203A 100%); --indigo:#818CF8; --indigo-2:#A5B4FC; --bg:#0A1220; --surface:#111E31; --surface-2:#0D1826; --glass:rgba(19,31,50,.66); --glass-brd:rgba(120,160,210,.14); --text:#E7EEF8; --muted:#93A6C0; --faint:#5E718C; --border:rgba(130,165,210,.13); --border-2:rgba(130,165,210,.2); --input-bg:#0C1728; --danger:#FB7185; --success:#34D399; --accent:#FBBF24; --warn:#FBBF24; --ok-bg:rgba(52,211,153,.13); --danger-bg:rgba(251,113,133,.13); --warn-bg:rgba(251,191,36,.13); --sh-sm:0 1px 2px rgba(0,0,0,.32); --sh:0 1px 3px rgba(0,0,0,.34), 0 10px 28px rgba(0,0,0,.4); --sh-lg:0 22px 55px rgba(0,0,0,.55); --sh-brand:0 8px 24px rgba(45,169,224,.32); --bg-glow-1:rgba(45,169,224,.16); --bg-glow-2:rgba(99,102,241,.14); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:'Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:13px;line-height:1.55;letter-spacing:-.01em} body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(720px 480px at 12% -8%, var(--bg-glow-1), transparent 62%), radial-gradient(780px 520px at 102% 4%, var(--bg-glow-2), transparent 64%)} a{color:inherit;text-decoration:none} ::selection{background:rgba(45,169,224,.22)} .num{font-variant-numeric:tabular-nums} /* ---- Layout ---- */ .layout{display:flex;min-height:100vh} /* trilho fino (menu PAI) */ .sidebar{width:var(--rail-w);background:var(--grad-rail);position:fixed;left:0;top:0;height:100vh;z-index:22; display:flex;flex-direction:column;align-items:center;padding:14px 6px 12px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none} .sidebar::-webkit-scrollbar{display:none} .brand{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 0 12px;margin-bottom:8px;width:100%;border-bottom:1px solid rgba(255,255,255,.16)} .brand img{height:34px;width:auto;max-width:44px;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,0,0,.28))} .brand b{font-size:10px;font-weight:800;letter-spacing:.1em;color:#fff;text-transform:uppercase;opacity:.92} .nav{display:flex;flex-direction:column;gap:3px;width:100%} .rail-item{width:100%;background:transparent;border:none;cursor:pointer;font-family:inherit;color:rgba(255,255,255,.78); display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 3px;border-radius:15px; font-size:8.8px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1.2;text-align:center; transition:background .16s,color .16s} .rail-item svg{width:21px;height:21px;flex:none;stroke-width:1.9} .rail-item span{display:block;max-width:100%;word-break:break-word} .rail-item:hover{background:rgba(255,255,255,.14);color:#fff} .rail-item.active,.rail-item.on{background:rgba(255,255,255,.96);color:var(--primary-dark);box-shadow:0 6px 16px rgba(0,0,0,.16)} :root[data-theme="dark"] .rail-item.active,:root[data-theme="dark"] .rail-item.on{background:rgba(255,255,255,.14);color:#fff} .rail-sep{width:34px;height:1px;background:rgba(255,255,255,.16);margin:7px auto} /* submenu que abre para o lado */ .fly{position:fixed;left:var(--rail-w);top:0;bottom:0;width:var(--fly-w);background:var(--surface); border-right:1px solid var(--border);box-shadow:var(--sh-lg);padding:18px 12px 22px;z-index:21;overflow-y:auto;display:none} .fly.open{display:block;animation:flyin .18s cubic-bezier(.2,.8,.3,1)} @keyframes flyin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}} .fly-h{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);padding:2px 10px 12px} .fly a{display:flex;align-items:center;gap:11px;padding:10px 12px;font-size:13.5px;color:var(--muted);border-radius:12px; font-weight:550;letter-spacing:-.005em;transition:background .15s,color .15s} .fly a svg{width:18px;height:18px;flex:none;opacity:.7;transition:opacity .15s} .fly a span{flex:1;min-width:0} .fly a:hover{background:var(--surface-2);color:var(--text)} .fly a:hover svg{opacity:1} .fly a.active{background:var(--primary-light);color:var(--primary-dark);font-weight:700} .fly a.active svg{opacity:1} .fly-back{position:fixed;inset:0;z-index:20;display:none} .fly-back.on{display:block} .main{flex:1;margin-left:var(--rail-w);padding:24px 30px 56px;max-width:1320px} .topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:14px;flex-wrap:wrap} .topbar h1{font-size:22px;font-weight:800;letter-spacing:-.03em} .user-chip{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)} .user-chip .av{width:34px;height:34px;border-radius:50%;background:var(--grad-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;box-shadow:0 5px 14px rgba(99,102,241,.32)} /* botao de tema */ .theme-toggle{width:38px;height:38px;flex:none;border-radius:12px;border:1px solid var(--border-2);background:var(--surface); color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-sm);transition:color .15s,border-color .15s,transform .1s} .theme-toggle:hover{color:var(--primary);border-color:var(--primary-2);transform:translateY(-1px)} .theme-toggle svg{width:18px;height:18px} .theme-toggle .i-sun{display:none} :root[data-theme="dark"] .theme-toggle .i-sun{display:block} :root[data-theme="dark"] .theme-toggle .i-moon{display:none} /* ---- Cards / grid ---- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px;box-shadow:var(--sh)} .grid{display:grid;gap:14px} .grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)} @media(max-width:1100px){.grid-4{grid-template-columns:repeat(3,1fr)}} @media(max-width:820px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}} .metric{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--sh);transition:transform .16s,box-shadow .16s} .metric::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)} .metric:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)} .metric .v{font-size:27px;font-weight:800;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums} .metric .l{font-size:11px;color:var(--muted);margin-top:3px;font-weight:700;text-transform:uppercase;letter-spacing:.06em} .section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;color:var(--faint);margin:22px 0 11px} /* ---- Buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--grad);color:#fff;border:none;border-radius:12px; padding:10px 17px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;letter-spacing:-.01em; box-shadow:var(--sh-brand);transition:transform .12s,box-shadow .15s,filter .15s} .btn:hover{filter:brightness(1.05);box-shadow:0 10px 22px rgba(27,132,196,.32);transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn-ghost{background:var(--surface);color:var(--muted);border:1px solid var(--border-2);box-shadow:var(--sh-sm)} .btn-ghost:hover{filter:none;background:var(--surface-2);border-color:var(--primary-2);color:var(--primary-dark)} .btn-danger{background:linear-gradient(135deg,#F26A6E,#D63A3F);box-shadow:0 6px 16px rgba(214,58,63,.24)} .btn-success{background:linear-gradient(135deg,#34C759,#16A34A);box-shadow:0 6px 16px rgba(22,163,74,.24)} /* ---- Forms ---- */ label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:12px 0 6px} /* caixa alta só nos rótulos de campo; label que embrulha um checkbox/radio é frase, não rótulo */ label:has(input[type=checkbox]),label:has(input[type=radio]){text-transform:none;letter-spacing:-.01em;font-size:12.5px;font-weight:600;color:var(--text)} input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--border-2);border-radius:12px;font-size:13px;font-family:inherit;color:var(--text);background:var(--input-bg);transition:border-color .15s,box-shadow .15s,background .15s} input::placeholder,textarea::placeholder{color:var(--faint)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary-2);background:var(--surface);box-shadow:0 0 0 4px rgba(45,169,224,.14)} select{cursor:pointer} input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--primary)} /* ---- Tables ---- */ table{width:100%;border-collapse:collapse} th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);padding:10px 12px;border-bottom:1px solid var(--border);font-weight:800} td{padding:12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle} tbody tr{transition:background .12s} tbody tr:hover{background:var(--primary-soft)} tbody tr:last-child td{border-bottom:none} /* ---- Pills / tags ---- */ .pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:4px 11px;border-radius:999px;letter-spacing:.01em} .tag{display:inline-block;font-size:11px;font-weight:700;color:var(--primary-dark);background:var(--primary-light);padding:4px 11px;border-radius:999px} .av-sm{width:34px;height:34px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px} /* ---- Flash ---- */ .flash{padding:12px 15px;border-radius:14px;margin-bottom:16px;font-size:13px;font-weight:600;box-shadow:var(--sh-sm)} .flash-ok{background:var(--ok-bg);color:var(--success);border:1px solid var(--success)} .flash-err{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger)} .muted{color:var(--muted)}.right{text-align:right} /* ---- Login ---- */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px; background:radial-gradient(1100px 560px at 50% -12%, var(--primary-light), var(--bg))} .login-card{background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:38px 34px;width:376px;box-shadow:var(--sh-lg)} .login-logo{width:64px;height:64px;border-radius:20px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 14px;box-shadow:0 10px 24px rgba(27,132,196,.36)} .login-logo-img{display:block;width:110px;height:auto;max-height:110px;object-fit:contain;margin:0 auto 12px;filter:drop-shadow(0 8px 18px rgba(27,132,196,.26))} .login-card h2{text-align:center;margin-bottom:4px;font-size:25px;font-weight:800;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .login-card .sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:20px} @media(max-width:760px){ .main{padding:18px 14px 48px} .fly{width:min(86vw,var(--fly-w))} } @media (prefers-reduced-motion:reduce){*{transition:none!important}}