:root{
  --app-bg:#f6f7fb;
  --card-radius:18px;
  --shadow-sm:0 6px 18px rgba(15,23,42,.06);
  --shadow-md:0 16px 40px rgba(15,23,42,.10);
  --sidebar-bg:#0b1220;
  --sidebar-fg:#cbd5e1;
  --sidebar-fg-muted:#94a3b8;
  --sidebar-active-bg:rgba(59,130,246,.16);
  --sidebar-hover-bg:rgba(148,163,184,.10);
  --sidebar-border:rgba(148,163,184,.12);
}

html,body{height:100%}
body{
  background:var(--app-bg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:#0f172a;
}

.navbar{box-shadow:0 2px 10px rgba(15,23,42,.04)}
.navbar .navbar-brand{letter-spacing:.2px}

.card{
  border:1px solid rgba(148,163,184,.20);
  border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm);
}
.card:hover{box-shadow:var(--shadow-md);transition:box-shadow .2s ease}
.btn,.form-control,.form-select,.input-group-text{border-radius:14px}
.table{background:#fff;border-radius:var(--card-radius);overflow:hidden}
.table> :not(caption)>*>*{vertical-align:middle}

.sidebar{
  width:280px;
  background:var(--sidebar-bg)!important;
  color:var(--sidebar-fg);
  border-right:1px solid var(--sidebar-border)!important;
  min-height:100vh;
}
.sidebar .offcanvas-header{border-bottom:1px solid var(--sidebar-border)}
.sidebar .offcanvas-title{color:#fff}
.sidebar .border-bottom{border-color:var(--sidebar-border)!important}
.sidebar .small.text-muted{color:var(--sidebar-fg-muted)!important}

.sidebar .list-group{--bs-list-group-bg:transparent;--bs-list-group-border-color:transparent}
.sidebar .list-group-item{
  color:var(--sidebar-fg);
  background:transparent;
}
.sidebar .list-group-item i{opacity:.9}
.sidebar .list-group-item-action{
  border-radius:14px;
  margin:2px 10px;
  padding:.55rem .75rem;
}
.sidebar .list-group-item-action:hover{background:var(--sidebar-hover-bg);color:#fff}
.sidebar .list-group-item.active{
  background:var(--sidebar-active-bg);
  color:#fff;
}
.sidebar .list-group-item.active i{opacity:1}

/* Sidebar (nueva navegación con grupos colapsables) */
.sidebar-scroll{padding:10px 10px 18px; overflow-y:auto; overflow-x:hidden}
.sidebar-link{
  display:flex;align-items:center;gap:.65rem;
  color:var(--sidebar-fg);
  text-decoration:none;
  padding:.58rem .75rem;
  border-radius:14px;
  margin:2px 0;
}
.sidebar-link i{opacity:.9}
.sidebar-link:hover{background:var(--sidebar-hover-bg);color:#fff}
.sidebar-link.active{background:var(--sidebar-active-bg);color:#fff}
.sidebar-link.active i{opacity:1}

.sidebar-group{margin-top:8px}
.sidebar-group-btn{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;
  background:transparent;
  color:var(--sidebar-fg-muted);
  border:0;
  padding:.35rem .35rem .25rem;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.sidebar-group-btn .txt{color:var(--sidebar-fg-muted)}
.sidebar-group-btn:hover{color:#fff}
.sidebar-group-btn .chev{transition:transform .15s ease;opacity:.85}
.sidebar-group-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.sidebar .collapse .sidebar-link{margin-left:0}

.badge-soft{background:rgba(59,130,246,.15)!important;color:#2563eb!important}

/* DC Hero (branding) */
.dc-hero{
  background:radial-gradient(1200px 400px at 0% 0%, rgba(59,130,246,.35) 0%, rgba(59,130,246,0) 60%),
             linear-gradient(180deg, rgba(15,23,42,.15), rgba(15,23,42,0));
}
.dc-hero-title{color:#fff;font-weight:700;letter-spacing:.2px;line-height:1.1}
.dc-hero-sub{color:var(--sidebar-fg-muted);font-size:.85rem;margin-top:.15rem}
.dc-hero-badge{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;letter-spacing:.5px;
  background:rgba(59,130,246,.25);
  border:1px solid rgba(59,130,246,.35);
}

main.container-fluid{padding:1rem}
@media(min-width:768px){main.container-fluid{padding:1.35rem}}
@media(min-width:992px){main.container-fluid{padding:1.75rem}}

/* Layout: sidebar + contenido (desktop) / offcanvas (mobile) */
.app-shell{min-height:100vh}
@media(min-width:992px){
  #sidebar.sidebar{position:sticky;top:56px;height:calc(100vh - 56px)}
  #sidebar.sidebar .offcanvas-body{overflow:hidden}
  #sidebar.sidebar .sidebar-scroll{height:100%;overflow-y:auto;overflow-x:hidden}
  #sidebar.sidebar .offcanvas-header{display:none}
}

/* Offcanvas (mobile) fix: scroll interno del menú */
.sidebar .offcanvas-body{padding:0; display:flex; flex-direction:column;}
@media(max-width:991.98px){
  #sidebar.sidebar{width:300px;}
  #sidebar.sidebar .sidebar-scroll{height:calc(100vh - 74px);} /* header del offcanvas */
}

/* Footer */
.app-footer, footer{border-top:1px solid rgba(148,163,184,.20); background:#fff;}

/* Charts: evita "crecimiento infinito" de Chart.js cuando el contenedor no tiene altura fija */
.chart-box{position:relative; height:240px;}
.chart-box.sm{height:160px;}
.chart-box.lg{height:320px;}
.chart-box canvas{display:block; width:100% !important; height:100% !important;}

/* Tablero Central (Caña) */
.board-table th, .board-table td{vertical-align:middle}
.board-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(92px, 1fr)); gap:10px;}
.tile{
  border-radius:16px;
  padding:10px 10px 8px;
  border:1px solid rgba(148,163,184,.20);
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.tile::after{
  content:"";
  position:absolute; inset:auto -18px -22px auto;
  width:70px; height:70px;
  border-radius:26px;
  background:rgba(255,255,255,.35);
  transform:rotate(10deg);
}
.tile-k{font-size:.74rem; font-weight:700; opacity:.9; text-transform:uppercase; letter-spacing:.05em;}
.tile-v{font-size:1.35rem; font-weight:900; margin-top:4px; line-height:1;}
.tile-info{background:linear-gradient(135deg, rgba(56,189,248,.28), rgba(14,165,233,.08));}
.tile-warning{background:linear-gradient(135deg, rgba(251,191,36,.30), rgba(245,158,11,.08));}
.tile-danger{background:linear-gradient(135deg, rgba(248,113,113,.28), rgba(239,68,68,.08));}

@media(max-width:575.98px){
  .board-tiles{grid-template-columns:repeat(auto-fit, minmax(80px, 1fr));}
  .tile-v{font-size:1.2rem}
}

/* Dashboard / KPIs */
.dash-badge{
  width:42px;height:42px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  color:#0f172a;
  background:rgba(59,130,246,.12);
  border:1px solid rgba(59,130,246,.18);
}

.btn-dc{
  background:linear-gradient(135deg, rgba(59,130,246,1), rgba(34,211,238,1));
  color:#fff!important;
  border:0;
}
.btn-dc:hover{filter:brightness(.96)}

.kpi-card{
  border-radius:18px;
  padding:14px 14px 12px;
  border:1px solid rgba(148,163,184,.18);
  box-shadow:var(--shadow-sm);
  color:#0f172a;
  position:relative;
  overflow:hidden;
  min-height:118px;
}
.kpi-card::after{
  content:"";
  position:absolute;inset:auto -40px -50px auto;
  width:120px;height:120px;border-radius:40px;
  background:rgba(255,255,255,.35);
  transform:rotate(12deg);
}
.kpi-icon{
  width:38px;height:38px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.55);
}
.kpi-meta{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-top:10px}
.kpi-val{font-size:1.35rem;font-weight:800;line-height:1.2;margin-top:2px}
.kpi-sub{font-size:.78rem;opacity:.85;margin-top:2px}

.kpi-primary{background:linear-gradient(135deg, rgba(96,165,250,.35), rgba(59,130,246,.12));}
.kpi-success{background:linear-gradient(135deg, rgba(52,211,153,.35), rgba(34,197,94,.10));}
.kpi-info{background:linear-gradient(135deg, rgba(56,189,248,.32), rgba(14,165,233,.10));}
.kpi-warning{background:linear-gradient(135deg, rgba(251,191,36,.35), rgba(245,158,11,.10));}
.kpi-purple{background:linear-gradient(135deg, rgba(167,139,250,.35), rgba(139,92,246,.10));}
.kpi-dark{background:linear-gradient(135deg, rgba(148,163,184,.35), rgba(15,23,42,.04));}

@media(max-width:575.98px){
  .kpi-card{min-height:108px}
  .kpi-val{font-size:1.25rem}
}