:root{--bg:#0b1020;--card:rgba(17,24,39,.85);--muted:#94a3b8;--line:#1f2937;--text:#e5e7eb;--accent:#22c55e;}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.card{background:rgba(17,24,39,.85);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.row{display:flex;gap:16px;flex-wrap:wrap}
.col{flex:1 1 320px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);border:none;color:#052e16;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.btn.secondary{background:#334155;color:#e2e8f0}
.btn.danger{background:#ef4444;color:#fff}
.input, select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #334155;background:#0b1224;color:var(--text)}
label{font-size:12px;color:var(--muted);display:block;margin:10px 0 6px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #1f2937;padding:10px;text-align:left;font-size:14px}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#0b1224;border:1px solid #334155;color:#cbd5e1;font-size:12px}
.badge.green{border-color:#14532d;background:#052e16;color:#bbf7d0}
.badge.red{border-color:#7f1d1d;background:#450a0a;color:#fecaca}
.sidebar{width:240px;flex:0 0 240px}
.main{flex:1 1 500px}
.menu a{display:block;padding:10px 12px;border-radius:10px;color:#cbd5e1;margin:6px 0;border:1px solid transparent}
.menu a:hover{border-color:#334155;background:#0b1224}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.h1{font-size:22px;margin:0}
.small{color:var(--muted);font-size:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:860px){.sidebar{width:100%;flex:1 1 100%}.grid2{grid-template-columns:1fr}}
.notice{padding:10px 12px;border-radius:12px;border:1px solid #334155;background:#0b1224;color:#e2e8f0;margin:10px 0}
.notice.ok{border-color:#14532d;background:#052e16;color:#bbf7d0}
.notice.err{border-color:#7f1d1d;background:#450a0a;color:#fecaca}

.rich h1,.rich h2,.rich h3{margin:0 0 8px}.rich p{margin:0 0 10px;line-height:1.5}.rich small{color:var(--muted)}

.grid-nums{display:grid;grid-template-columns:repeat(10,minmax(40px,1fr));gap:8px}
@media(max-width:900px){.grid-nums{grid-template-columns:repeat(5,minmax(40px,1fr));}}

.grid-nums input{height:44px;text-align:center;font-weight:800;font-size:16px;border:2px solid #334155}
.grid-nums input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,197,94,.25)}

/* ===== Dashboard Responsivo ===== */
.top-title.center { text-align:center; width:100%; }

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100%;
    width: 240px;
    z-index: 999;
    transition: left .3s ease;
  }
  .sidebar.open { left: 0; }
  .content {
    margin-left: 0 !important;
    padding: 16px;
  }
  .menu-toggle {
    display: inline-flex;
    cursor: pointer;
    margin-right: 10px;
  }
}

@media (min-width: 901px) {
  .menu-toggle { display: none; }
}


/* Topbar layout */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px;min-width:120px}
.topbar-center{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.logo-link{display:inline-flex;align-items:center;text-decoration:none}
.logo-img{height:42px;width:auto;border-radius:10px;border:1px solid var(--line);background:#0b1224;padding:4px}
.logo-fallback{font-size:22px}
@media (max-width: 600px){
  .topbar-left,.topbar-right{min-width:auto}
  .topbar-right .btn{padding:8px 10px}
  .h1{font-size:18px}
}

.menu-toggle{display:none}
@media(max-width:900px){.menu-toggle{display:inline-flex}}

.topbar .logo-img{max-width:140px;max-height:48px;object-fit:contain}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.hr{border:none;border-top:1px solid var(--line);margin:14px 0}

@media(max-width:900px){.topbar .logo-img{max-width:120px;max-height:44px}}