/* =====================================================
   ISPControl V1.3.3 - Homologacion visual con ISPai,
   ISPcalendar e ISPpay.
   Solo header superior + mockup notebook/celular.
===================================================== */

/* ---------- HEADER: misma logica visual del ecosistema ---------- */
:root{--header:76px}
.site-header{height:var(--header)!important;background:rgba(255,255,255,.93)!important;border-bottom:1px solid rgba(219,233,248,.82)!important}
.header-inner{height:100%!important;display:flex!important;align-items:center!important;gap:22px!important}
.brand{display:flex!important;align-items:center!important;flex:0 0 auto!important;width:205px!important}
.brand img{display:block!important;width:100%!important;height:auto!important;max-height:54px!important;object-fit:contain!important;object-position:left center!important}
.main-nav{display:flex!important;align-items:center!important;gap:10px!important;margin-left:auto!important}
.main-nav a{padding:7px 8px!important;border-radius:10px!important;color:#315173!important;font-size:13px!important;font-weight:650!important;white-space:nowrap!important}
.main-nav a:hover,.main-nav a.active{color:#0875ea!important;background:#f0f7ff!important}
.header-actions{display:flex!important;align-items:center!important;flex:0 0 auto!important;margin:0!important}
.header-demo{min-width:165px!important;min-height:44px!important;border-radius:13px!important;padding:0 18px!important;font-weight:750!important;white-space:nowrap!important}

/* ---------- HERO MOCKUP: mismo marco notebook + celular ---------- */
.hero-visual{position:relative!important;min-height:520px!important}
.visual-note{right:25px!important;top:-5px!important;z-index:10!important;font-size:13px!important;line-height:1.15!important}
.laptop{position:absolute!important;left:2%!important;right:4%!important;top:54px!important}
.dashboard-shell.laptop-screen{position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;overflow:hidden!important;border:8px solid #17365e!important;border-radius:23px 23px 12px 12px!important;background:#fff!important;box-shadow:0 35px 70px rgba(18,70,123,.23)!important;transform:none!important}
.laptop-base{width:100%!important;height:10px!important;margin:0!important;border-radius:0 0 50px 50px!important;background:linear-gradient(180deg,#dce8f2,#9eb6c8)!important;box-shadow:0 8px 14px rgba(30,77,124,.15)!important}
.dashboard-body{min-width:0!important}
.dash-content{min-width:0!important;overflow:hidden!important}
.stat-grid,.charts-grid{min-width:0!important}
.stat-card,.chart-card{min-width:0!important;overflow:hidden!important}
.dash-brand img{max-width:100%!important;object-fit:contain!important}

.phone-preview{position:absolute!important;right:-10px!important;bottom:12px!important;z-index:12!important;width:150px!important;height:300px!important;border:7px solid #0b2547!important;border-radius:30px!important;background:#f8fbff!important;box-shadow:0 25px 55px rgba(13,55,105,.30)!important;padding:22px 10px 12px!important;transform:rotate(4deg)!important;overflow:hidden!important;isolation:isolate!important}
.phone-notch{width:66px!important;height:14px!important}
.phone-logo{width:auto!important;height:auto!important;max-width:100%!important;overflow:hidden!important;margin-bottom:12px!important}
.phone-logo img{display:block!important;width:95px!important;max-width:100%!important;height:auto!important;object-fit:contain!important}
.phone-stat,.phone-bars{max-width:100%!important}

@media(max-width:1100px){
  .header-inner{gap:14px!important}
  .brand{width:185px!important}
  .main-nav{gap:4px!important}
  .main-nav a{padding:7px 6px!important;font-size:12px!important}
  .header-demo{min-width:150px!important;padding:0 14px!important}
}

@media(max-width:900px){
  :root{--header:70px}
  .brand{width:180px!important}
  .header-actions{display:none!important}
  .nav-toggle{display:block!important;margin-left:auto!important}
  .main-nav{position:fixed!important;left:14px!important;right:14px!important;top:81px!important;z-index:1001!important;display:grid!important;gap:1px!important;padding:11px!important;border:1px solid #dbe8f4!important;border-radius:17px!important;background:rgba(255,255,255,.99)!important;box-shadow:0 20px 55px rgba(22,66,113,.17)!important;opacity:0!important;pointer-events:none!important;transform:translateY(-8px)!important;transition:.2s!important}
  .main-nav.open{opacity:1!important;pointer-events:auto!important;transform:translateY(0)!important}
  .main-nav a{padding:11px!important;font-size:13px!important}
  .hero-visual{min-height:510px!important;margin-top:20px!important}
  .laptop{left:5%!important;right:5%!important;top:40px!important}
  .phone-preview{right:0!important;bottom:8px!important}
}

@media(max-width:620px){
  .brand{width:155px!important}
  .hero-visual{min-height:395px!important;margin-top:14px!important}
  .visual-note{display:none!important}
  .laptop{left:0!important;right:0!important;top:30px!important}
  .dashboard-shell.laptop-screen{border-width:5px!important;border-radius:18px 18px 9px 9px!important}
  .laptop-base{display:none!important}
  .dashboard-body{grid-template-columns:95px 1fr!important;min-height:280px!important}
  .dash-sidebar{padding:9px 6px!important}
  .dash-sidebar a{font-size:7px!important;padding:6px 5px!important}
  .dash-brand{height:28px!important}
  .dash-brand img{width:75px!important}
  .dash-content{padding:10px!important}
  .stat-grid{grid-template-columns:repeat(2,1fr)!important}
  .charts-grid{grid-template-columns:1fr!important}
  .donut-card{display:none!important}
  .phone-preview{width:104px!important;height:214px!important;border-width:5px!important;border-radius:22px!important;padding:15px 6px 8px!important;right:-4px!important;bottom:0!important}
  .phone-notch{width:46px!important;height:9px!important}
  .phone-logo{margin-bottom:8px!important}
  .phone-logo img{width:60px!important}
  .phone-stat{padding:5px!important}
  .phone-stat i{font-size:10px!important}
  .phone-stat strong{font-size:9px!important}
  .phone-stat span{font-size:6px!important}
  .phone-bars{height:45px!important;gap:3px!important}
}