:root{--bg: #f3f6fb;--sidebar-top: #121826;--sidebar-bot: #1f2937;--primary: #2563eb;--primary-600:#1d4ed8;--muted:#6b7280;--card:#ffffff;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--info:#06b6d4;--shadow: 0 8px 24px rgba(0,0,0,.08)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(135deg,#f7f9ff,#eef2ff)}a{text-decoration:none;color:inherit}.layout{display:flex;min-height:100vh}.sidebar{width:260px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,var(--sidebar-top),var(--sidebar-bot));color:#e5e7eb;transition:transform .3s ease}.sidebar .logo{display:flex;align-items:center;gap:10px;margin-bottom:22px}.sidebar .logo img{width:42px;height:42px;border-radius:10px;object-fit:cover}.sidebar h2{margin:0;font-size:1.1rem;letter-spacing:.2px}.sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:8px;color:#cbd5e1}.sidebar nav a:hover,.sidebar nav a.active{background:var(--primary);color:#fff}.sidebar footer{font-size:.8rem;opacity:.7;text-align:center;margin-top:auto}main{flex:1;display:flex;flex-direction:column}header{background:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}header h1{margin:0;font-size:1.1rem}.menu{font-size:1.5rem;background:none;border:none;cursor:pointer}.content{padding:28px;animation:fade .4s}@keyframes fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.grid{display:grid;gap:18px}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:1000px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}@media (max-width:760px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}.card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:18px}.card h3{margin:0 0 8px;font-size:1rem}.card p{margin:.25rem 0;color:var(--muted)}.kpis{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}.kpi{background:var(--card);padding:16px;border-radius:16px;box-shadow:var(--shadow);border-top:4px solid var(--primary)}.kpi small{color:var(--muted)}.kpi .big{font-size:1.6rem;font-weight:700}.badge{font-size:.75rem;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#1e3a8a}.badge.green{background:#dcfce7;color:#065f46}.badge.amber{background:#fef3c7;color:#92400e}.badge.red{background:#fee2e2;color:#991b1b}.badge.gray{background:#f3f4f6;color:#374151}.btn{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;padding:10px 14px;border-radius:10px;border:none;cursor:pointer}.btn.secondary{background:#111827;color:#e5e7eb}.btn.ghost{background:transparent;border:1px solid #e5e7eb;color:#111827}.btn:hover{background:var(--primary-600)}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px;text-align:left}.table thead th{background:var(--primary);color:#fff}.table tr:nth-child(2n){background:#f8fafc}.progress{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}.progress>span{display:block;height:100%;background:var(--primary);border-radius:999px}.list{list-style:none;padding:0;margin:0}.list li{padding:10px 12px;border-radius:10px;background:#fff;box-shadow:var(--shadow);margin-bottom:10px}.hero{background:linear-gradient(135deg,#eef2ff,#dbeafe);border-radius:20px;padding:24px;display:flex;align-items:center;gap:18px;box-shadow:var(--shadow)}.hero img{width:120px;height:90px;object-fit:cover;border-radius:14px}@media (max-width:760px){.sidebar{position:fixed;height:100%;transform:translate(-100%);z-index:20}.sidebar.open{transform:translate(0)}}