:root{
  --bg:#07111f;
  --panel:#101827;
  --panel2:#152034;
  --text:#e8eefc;
  --muted:#9badc7;
  --line:#2d3d5c;
  --blue:#3478f6;
  --green:#22c55e;
  --red:#ef476f;
  --radius:16px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  background:#07111f;
  color:var(--text);
}
a{text-decoration:none;color:inherit}
h1,h2,h3{margin:0}
.muted{color:var(--muted)}
.mt{margin-top:14px}

/* inputs */
.input,select,textarea{
  width:100%;
  background:#0b1322;
  border:1px solid var(--line);
  color:var(--text);
  border-radius:10px;
  padding:9px 11px;
  min-height:38px;
  outline:none;
  font-size:13px;
}
label{
  display:block;
  font-weight:800;
  font-size:13px;
  margin:9px 0 5px;
}

/* buttons */
.btn{
  border:1px solid transparent;
  border-radius:9px;
  padding:8px 11px;
  min-height:34px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#22304a;
  color:#e8eefc;
  line-height:1;
}
.btn:hover{filter:brightness(1.12)}
.btn.primary{background:#3478f6;color:white}
.btn.green{background:#22c55e;color:#05210f}
.btn.red{background:#431b2a;color:#ffdce6;border-color:#b74361}
.btn.sm{
  padding:6px 8px;
  min-height:28px;
  font-size:12px;
  border-radius:8px;
}

/* login */
.login-body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
}
.login-card{
  width:min(390px,100%);
  background:#101827;
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px;
}
.logo{
  width:46px;
  height:46px;
  border-radius:14px;
  background:#3478f6;
  display:grid;
  place-items:center;
}
.logo svg{width:26px;height:26px;fill:white}
.brand{display:flex;align-items:center;gap:12px}
.login-card .brand{
  flex-direction:column;
  text-align:center;
  justify-content:center;
}
.login-card h1{font-size:26px}

/* layout */
.app{display:flex;min-height:100vh}
.sidebar{
  width:240px;
  background:#0b1322;
  border-right:1px solid var(--line);
  padding:16px;
  position:sticky;
  top:0;
  height:100vh;
}
.sidebar .brand h2{font-size:18px}
.sidebar .brand p{margin:3px 0 0;font-size:13px}
.nav{margin-top:22px}
.nav a{
  display:flex;
  padding:10px 12px;
  border-radius:10px;
  color:var(--muted);
  font-weight:800;
  margin-bottom:6px;
}
.nav a:hover{background:#17243b;color:white}
.main{
  flex:1;
  padding:16px;
  min-width:0;
}
.content-wrap{
  max-width:1080px;
  margin:0 auto;
  width:100%;
}
.topbar{
  background:#101827;
  border:1px solid var(--line);
  border-radius:16px;
  padding:13px 15px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}
.topbar h2{font-size:20px}
.topbar p{font-size:13px;margin:5px 0 0}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* cards and grid */
.card{
  background:#101827;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}
.card-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.card h3{font-size:16px}
.grid{display:grid;gap:12px}
.forms.three{grid-template-columns:repeat(3,1fr)}
.forms.two{grid-template-columns:repeat(2,1fr)}
.kpis,.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi .value,.dash-kpi strong{font-size:20px;font-weight:900;margin-top:5px;display:block}
.dash-kpi span{font-size:12px;color:var(--muted)}

/* dashboard */
.dash-pro,.dashboard-compact{max-width:1040px;margin:0 auto}
.dash-filter-card,.dashboard-filter{
  padding:12px;
}
.dash-filter-pro,.filter-grid{
  display:grid !important;
  grid-template-columns:110px 160px 190px 78px 78px !important;
  gap:8px !important;
  align-items:end !important;
}
.dash-filter-pro label,.filter-grid label{font-size:12px;margin-bottom:5px}
.filter-summary,.filter-note{font-size:12px;color:var(--muted);margin-top:8px}
.dash-grid-2,.charts.v11,.charts.v9{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.dash-chart,.chart-box{height:205px !important}

/* tables */
.table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
  background:#0d1626;
}
th,td{
  padding:8px 9px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:middle;
  font-size:13px;
}
th{
  background:#18243a;
  color:#d9e6ff;
}
.table-compact input,.table-compact select{
  min-height:34px;
  padding:7px 9px;
}
.payment-table{min-width:1080px}
.payment-table td:last-child{min-width:190px}
.badge,.pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
}
.badge{padding:5px 8px}
.pill{
  color:var(--muted);
  border:1px solid var(--line);
  padding:4px 8px;
}
.pagado{background:#0d4d2a;color:#82ffb5}
.pendiente{background:#63460f;color:#ffd276}
.observado{background:#501b2a;color:#ff9bb4}
.revision{background:#173a61;color:#9fd0ff}

/* actions */
.actions-inline,.payment-actions{
  display:flex !important;
  flex-direction:row !important;
  gap:5px !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}
.actions-inline form,.payment-actions form{margin:0}

/* admin */
.panel-narrow,.admin-mini,.v7-admin-layout{
  max-width:920px;
  margin:0 auto;
}
.form-top-compact,.admin-form-card{
  max-width:780px;
  margin:0 auto 14px;
}
.admin-card-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.admin-item-card{
  background:#0d1626;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.admin-item-form{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:8px;
}
.admin-item-form.one{grid-template-columns:1fr}
.admin-item-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}

/* mobile cards */
.mobile-cards{display:none}
.mobile-payment-card,.mcard{
  background:#0d1626;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.mobile-payment-card .row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:5px 0;
}

/* sidebar toggle */
.sidebar-toggle{
  position:fixed;
  top:10px;
  left:10px;
  z-index:30;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#22304a;
  color:white;
  font-weight:900;
  cursor:pointer;
}
body.sidebar-hidden .sidebar{display:none}

/* whatsapp */
.whatsapp{
  position:fixed;
  right:14px;
  bottom:14px;
  background:#22c55e;
  color:#05210f;
  border-radius:999px;
  padding:10px 13px;
  font-size:13px;
  font-weight:900;
}

/* alerts */
.alert{padding:10px 12px;border-radius:10px;background:#153523;color:#b9ffcf;border:1px solid #285f43;margin:10px 0}
.error{background:#351724;color:#ffd8e2;border-color:#74364b}

@media(max-width:980px){
  .app{display:block}
  .sidebar{width:auto;height:auto;position:relative}
  .nav{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .nav a{margin:0;justify-content:center}
  .topbar{margin-top:44px;align-items:flex-start;flex-direction:column}
  .actions{width:100%}
  .actions .btn{flex:1}
  .dash-filter-pro,.filter-grid{
    grid-template-columns:1fr 1fr !important;
  }
  .kpis,.dash-kpis,.dash-grid-2,.charts.v11,.charts.v9{
    grid-template-columns:1fr 1fr
  }
  .forms.three{grid-template-columns:1fr 1fr}
  .admin-card-list{grid-template-columns:1fr}
}
@media(max-width:640px){
  .main{padding:10px}
  .sidebar{padding:12px}
  .nav{grid-template-columns:1fr 1fr}
  .dash-filter-pro,.filter-grid,
  .kpis,.dash-kpis,.dash-grid-2,.charts.v11,.charts.v9,
  .forms.three,.forms.two{
    grid-template-columns:1fr !important;
  }
  .table-wrap{display:none !important}
  .mobile-cards{display:grid !important;gap:10px}
  .dash-chart,.chart-box{height:190px !important}
  .card{padding:12px}
}


/* ===== V15 SUMMARY LAYOUT ===== */
.dashboard-summary-stack{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}
.dashboard-summary-stack .card{
  width:100% !important;
}
.dashboard-summary-stack .table-wrap{
  max-height:260px;
  overflow:auto;
}
.dashboard-summary-stack table{
  min-width:100%;
}
.dashboard-summary-stack th,
.dashboard-summary-stack td{
  padding:10px 12px !important;
}
.dashboard-summary-stack tbody tr:hover{
  background:rgba(52,120,246,.06);
}


/* ===== V16 MODERN DASHBOARD ===== */
.dash-pro{
  max-width:1080px !important;
}
.dash-grid-2{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  align-items:stretch !important;
}
.dash-grid-2 .card{
  min-height:0 !important;
  background:linear-gradient(180deg,#101827,#0d1626) !important;
  border:1px solid rgba(90,120,170,.42) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18) !important;
}
.dash-grid-2 .card-title{
  border-bottom:1px solid rgba(90,120,170,.18);
  padding-bottom:8px;
  margin-bottom:8px !important;
}
.dash-grid-2 h3{
  font-size:15px !important;
  letter-spacing:.2px;
}
.dash-chart{
  height:190px !important;
}
.dash-kpis{
  grid-template-columns:repeat(4,1fr) !important;
  gap:10px !important;
}
.dash-kpi{
  background:linear-gradient(180deg,#101827,#0d1626) !important;
  border:1px solid rgba(90,120,170,.38) !important;
  padding:11px 12px !important;
}
.dash-kpi strong{
  font-size:19px !important;
}
.dash-filter-card{
  background:linear-gradient(180deg,#101827,#0d1626) !important;
}
.dashboard-summary-stack{
  margin-top:14px !important;
}
.dashboard-summary-stack .card{
  background:linear-gradient(180deg,#101827,#0d1626) !important;
  border:1px solid rgba(90,120,170,.38) !important;
}
@media(max-width:900px){
  .dash-grid-2{
    grid-template-columns:1fr !important;
  }
  .dash-chart{
    height:210px !important;
  }
}
@media(max-width:640px){
  .dash-kpis{
    grid-template-columns:1fr 1fr !important;
  }
  .dash-chart{
    height:190px !important;
  }
}