:root{
  --bg:#f5f7fb;
  --sidebar-bg:#ffffff;
  --sidebar-border:#e9edf5;
  --surface:#ffffff;
  --surface-soft:#f8faff;
  --text:#111827;
  --muted:#7b8794;
  --border:#e6ebf2;
  --primary:#2348c8;
  --primary-2:#3b63f0;
  --active-bg:#edf3ff;
  --active-line:#2348c8;
  --success:#1f9d57;
  --danger:#dc3545;
  --warning:#ff9f43;
  --shadow:0 20px 45px rgba(15, 23, 42, 0.08);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:16px;
  --sidebar-width:280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{text-decoration:none}

.app-layout{
  min-height:100vh;
  display:flex;
}

.sidebar{
  width:var(--sidebar-width);
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  position:fixed;
  inset:0 auto 0 0;
  z-index:1040;
  padding:26px 18px 20px;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}

.brand-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:26px;
  padding:4px 6px;
}

.brand-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--primary),#6b21ff);
  color:#fff;
  font-size:18px;
  box-shadow:0 12px 24px rgba(35,72,200,.25);
}

.brand-text h1{
  margin:0;
  font-size:1.15rem;
  font-weight:800;
  color:#1b2440;
}

.brand-text span{
  display:block;
  font-size:.83rem;
  color:var(--muted);
  margin-top:2px;
}

.sidebar-caption{
  font-size:.88rem;
  font-weight:700;
  color:#1f2937;
  margin:4px 10px 14px;
}

.sidebar-nav{
  flex:1;
}

.sidebar-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

.sidebar-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border-radius:16px;
  color:#657084;
  font-weight:600;
  transition:all .2s ease;
}

.sidebar-link:hover{
  background:#f4f7fd;
  color:#25324b;
}

.sidebar-link.active{
  background:var(--active-bg);
  color:var(--primary);
  box-shadow:inset -4px 0 0 var(--active-line);
}

.sidebar-icon{
  width:20px;
  text-align:center;
  font-size:15px;
}

.sidebar-label{
  flex:1;
  font-size:.96rem;
}

.sidebar-arrow{
  opacity:.4;
  font-size:.8rem;
}

.sidebar-link.active .sidebar-arrow{
  opacity:1;
}

.sidebar-cta{
  margin-top:18px;
}

.cta-btn{
  border-radius:18px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  border:none;
  box-shadow:0 16px 28px rgba(35,72,200,.22);
  font-weight:700;
  padding:14px 16px;
}

.sidebar-footer{
  margin-top:18px;
  padding:14px 8px 0;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:4px;
  color:var(--muted);
}

.main{
  flex:1;
  min-width:0;
  margin-left:var(--sidebar-width);
}

.main-inner{
  padding:22px 26px 28px;
}

.topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:14px;
}

.btn-menu-toggle{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  display:none;
}

.page-eyebrow{
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#8a94a6;
}

.page-block h2{
  margin:3px 0 0;
  font-size:clamp(1.65rem,2.4vw,2.1rem);
  font-weight:800;
  color:#0f172a;
}

.topbar-center{
  display:flex;
  justify-content:center;
}

.search-shell{
  width:min(100%,420px);
  position:relative;
}

.search-shell i{
  position:absolute;
  top:50%;
  left:15px;
  transform:translateY(-50%);
  color:#94a3b8;
}

.search-shell .form-control{
  height:46px;
  border-radius:16px;
  border:1px solid transparent;
  background:#ffffff;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
  padding-left:42px;
}

.search-shell .form-control:focus{
  border-color:#bfd1ff;
  box-shadow:0 0 0 .2rem rgba(35,72,200,.10);
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.top-icon-btn{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--primary);
  display:grid;
  place-items:center;
  transition:.2s ease;
}

.top-icon-btn:hover{
  background:#f2f6ff;
  transform:translateY(-1px);
}

.user-chip{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:10px 12px;
  box-shadow:0 12px 24px rgba(15,23,42,.05);
}

.user-avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  font-weight:800;
}

.user-meta strong,
.user-meta small{
  display:block;
  line-height:1.2;
}

.user-meta strong{
  color:#111827;
  font-size:.96rem;
}

.user-meta small{
  color:var(--muted);
  margin-top:2px;
}

.btn-logout{
  border-radius:12px;
}

.main-content{
  min-width:0;
}

.card,
.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.card-header{
  background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
  border-bottom:1px solid var(--border);
  font-weight:800;
  color:#1f2b45;
  padding:16px 20px;
}

.card-body,
.card-footer,
.modal-body,
.modal-footer,
.modal-header{
  padding:18px 20px;
}

.table{
  --bs-table-bg:transparent;
}

.table thead th{
  background:#f6f8fc;
  color:#334155;
  font-weight:700;
  border-bottom:1px solid var(--border);
}

.table td{
  border-color:#eef2f7;
}

.btn{
  border-radius:14px;
  font-weight:600;
}

.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  border:none;
}

.btn-success{
  background:linear-gradient(135deg,#18a957,#15924b);
  border:none;
}

.form-control,
.form-select{
  min-height:44px;
  border-radius:14px;
  border:1px solid #dbe4f0;
  background:#fff;
}

.form-control:focus,
.form-select:focus{
  border-color:#bfd1ff;
  box-shadow:0 0 0 .2rem rgba(35,72,200,.10);
}

.modal-content{
  border:none;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(15,23,42,.16);
}

.sidebar-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  opacity:0;
  visibility:hidden;
  transition:.2s ease;
  z-index:1030;
}

@media (max-width: 1200px){
  .search-shell{
    width:100%;
  }

  .topbar{
    grid-template-columns:1fr;
  }

  .topbar-center{
    justify-content:flex-start;
  }
}

@media (max-width: 991.98px){
  .sidebar{
    transform:translateX(-100%);
    transition:transform .25s ease;
  }

  body.sidebar-open .sidebar{
    transform:translateX(0);
  }

  body.sidebar-open .sidebar-overlay{
    opacity:1;
    visibility:visible;
  }

  .main{
    margin-left:0;
  }

  .btn-menu-toggle{
    display:grid;
    place-items:center;
  }

  .topbar-right{
    flex-wrap:wrap;
    justify-content:flex-start;
  }
}

@media (max-width: 576px){
  .main-inner{
    padding:16px;
  }

  .user-chip{
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
  }

  .search-shell{
    width:100%;
  }
}
/* ===== FIX DASHBOARD / HOSTING LAYOUT ===== */
.sidebar-logo{margin-bottom:22px;padding:16px 2px 18px}.sidebar-logo h1{margin:0 0 10px;font-size:clamp(1.9rem,2.3vw,2.6rem);line-height:1.12;font-weight:900;color:#111827}.sidebar-logo span{display:block;color:#172033;font-weight:500}.main-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}.main-header h2{font-size:clamp(1.7rem,2.2vw,2.3rem);font-weight:900;color:#0f172a}.btn-toggle-sidebar{width:42px;height:42px;border-radius:999px;display:grid;place-items:center}.page-hero{position:relative;overflow:hidden;border-radius:30px;padding:48px 52px;color:#fff;background:radial-gradient(circle at 78% 25%,rgba(255,255,255,.22),transparent 33%),linear-gradient(135deg,#1737a6 0%,#2348c8 48%,#4774ff 100%);box-shadow:var(--shadow)}.page-hero h3{margin:0 0 12px;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;color:#fff}.page-hero p{max-width:820px;margin:0 0 22px;color:rgba(255,255,255,.9);font-size:1rem}.metric-pill{display:inline-flex;align-items:center;gap:8px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 12px;font-weight:700}.page-actions{display:flex;flex-wrap:wrap;gap:12px}.info-list{display:grid;gap:14px}.info-item{display:flex;gap:12px;align-items:flex-start}.info-item i{width:22px;margin-top:3px}.info-item strong,.info-item span{display:block}.info-item span{color:rgba(255,255,255,.72)}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.stat-card{padding:22px}.stat-label{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#64748b;font-weight:800}.stat-label i{color:var(--primary)}.stat-value{margin-top:12px;font-size:clamp(1.9rem,3vw,2.7rem);line-height:1;color:#0f172a;font-weight:900}.stat-note{margin-top:10px;color:#64748b}.kpi-primary{border-top:5px solid var(--primary)}.kpi-success{border-top:5px solid var(--success)}.kpi-warning{border-top:5px solid var(--warning)}.kpi-danger{border-top:5px solid var(--danger)}.kpi-success .stat-label i{color:var(--success)}.kpi-warning .stat-label i{color:var(--warning)}.kpi-danger .stat-label i{color:var(--danger)}.empty-state{text-align:center;color:#64748b;padding:30px!important}.empty-state i{display:block;font-size:2rem;margin-bottom:8px}@media (max-width:1200px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-hero{padding:34px}}@media (max-width:991.98px){.main-header{align-items:flex-start;flex-direction:column}}@media (max-width:576px){.page-hero{padding:24px;border-radius:22px}.stats-grid{grid-template-columns:1fr}}

/* =====================================================================
   SOLUCION DEFINITIVA HOSTING - TEMA AZUL OSCURO RESPONSIVE
   Este bloque va al final para ganar prioridad incluso si Bootstrap/cache
   o estilos viejos se cargan antes. No borrar.
   ===================================================================== */
:root{
  --bg:#eef4ff !important;
  --sidebar-bg:#0b1222 !important;
  --sidebar-bg-2:#101a31 !important;
  --sidebar-border:rgba(255,255,255,.08) !important;
  --surface:#ffffff !important;
  --surface-soft:#f8fbff !important;
  --text:#0f172a !important;
  --muted:#6b7890 !important;
  --border:#dfe8f5 !important;
  --primary:#2454f4 !important;
  --primary-2:#12399b !important;
  --active-bg:linear-gradient(135deg,rgba(36,84,244,.33),rgba(36,84,244,.16)) !important;
  --active-line:#3b82f6 !important;
  --shadow:0 18px 44px rgba(15,23,42,.10) !important;
}
html,body{min-height:100%;background:#eef4ff !important;color:#0f172a !important;overflow-x:hidden;}
body{background:linear-gradient(180deg,#f3f7ff 0%,#eef4ff 42%,#f8fbff 100%) !important;}
.app-layout{background:transparent !important;}
.sidebar{
  background:linear-gradient(180deg,#111a30 0%,#0b1222 52%,#070d19 100%) !important;
  border-right:1px solid rgba(255,255,255,.08) !important;
  box-shadow:18px 0 45px rgba(15,23,42,.20) !important;
  color:#e5edff !important;
}
.sidebar-logo{
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  padding:18px !important;
}
.sidebar-logo h1,.brand-text h1{color:#ffffff !important;font-size:1.1rem !important;line-height:1.2 !important;}
.sidebar-logo span,.brand-text span{color:#c5d0e6 !important;}
.sidebar-caption{color:#aab7cf !important;text-transform:uppercase;letter-spacing:.08em;}
.sidebar-footer{border-top-color:rgba(255,255,255,.10) !important;color:#8ea0bd !important;}
.sidebar-footer .text-light{color:#ffffff !important;}
.sidebar-link{
  color:#cbd5e1 !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
}
.sidebar-link i{color:inherit !important;min-width:18px;text-align:center;}
.sidebar-link:hover{
  background:rgba(255,255,255,.08) !important;
  color:#ffffff !important;
  transform:translateX(2px);
}
.sidebar-link.active{
  background:linear-gradient(135deg,rgba(36,84,244,.55),rgba(30,64,175,.35)) !important;
  color:#ffffff !important;
  border-color:rgba(96,165,250,.25) !important;
  box-shadow:inset 4px 0 0 #60a5fa,0 14px 28px rgba(37,99,235,.22) !important;
}
.main{background:transparent !important;min-width:0;}
.main-inner{background:transparent !important;}
.main-header,.topbar{background:transparent !important;}
.main-header h2,.page-block h2{color:#071226 !important;font-weight:900 !important;}
.page-eyebrow{color:#64748b !important;font-weight:900 !important;}
.user-chip,.card,.stat-card,.modal-content{
  background:#ffffff !important;
  border:1px solid #dfe8f5 !important;
  box-shadow:0 18px 44px rgba(15,23,42,.10) !important;
}
.user-avatar,.btn-primary{
  background:linear-gradient(135deg,#2454f4,#12399b) !important;
  color:#fff !important;
}
.btn-primary,.btn-success{border:0 !important;}
.page-hero{
  background:radial-gradient(circle at 82% 24%,rgba(255,255,255,.18),transparent 32%),linear-gradient(135deg,#0d1b3f 0%,#183287 45%,#2454f4 100%) !important;
  color:#fff !important;
}
.page-hero .card{background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.10) !important;color:#fff !important;box-shadow:none !important;}
.info-item{background:rgba(255,255,255,.10);border-radius:16px;padding:14px;}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table{min-width:760px;vertical-align:middle;}
.table thead th{background:#f3f7ff !important;color:#0f172a !important;white-space:nowrap;}
.table td{white-space:nowrap;}
.form-control,.form-select{background:#fff !important;color:#111827 !important;border-color:#d9e4f2 !important;}
.form-control:focus,.form-select:focus{border-color:#2454f4 !important;box-shadow:0 0 0 .2rem rgba(36,84,244,.14) !important;}
.btn-toggle-sidebar,.btn-menu-toggle{display:none !important;background:#fff !important;border:1px solid #dfe8f5 !important;color:#2454f4 !important;}
@media (max-width: 991.98px){
  .sidebar{width:min(86vw,300px) !important;transform:translateX(-105%) !important;transition:transform .25s ease !important;}
  body.sidebar-open .sidebar{transform:translateX(0) !important;}
  .main{margin-left:0 !important;}
  .btn-toggle-sidebar,.btn-menu-toggle{display:grid !important;place-items:center !important;}
  .main-header{flex-direction:column !important;align-items:stretch !important;}
  .user-chip{width:100% !important;justify-content:space-between !important;flex-wrap:wrap !important;}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width: 576px){
  .main-inner{padding:14px !important;}
  .stats-grid{grid-template-columns:1fr !important;}
  .page-hero{padding:22px !important;border-radius:22px !important;}
  .card-body,.card-footer,.modal-body,.modal-footer,.modal-header{padding:14px !important;}
  .btn{width:auto;}
}