/* EduSmart360 V1.1.3.4.10 — Responsive Adaptive Design System
   Fuente única para escritorio, tablet, móvil y consulta en pantallas grandes. */
:root{
  --es360-sidebar-width:238px;
  --es360-topbar-height:56px;
  --es360-content-max:1680px;
  --es360-touch:44px;
  --es360-safe-top:env(safe-area-inset-top,0px);
  --es360-safe-right:env(safe-area-inset-right,0px);
  --es360-safe-bottom:env(safe-area-inset-bottom,0px);
  --es360-safe-left:env(safe-area-inset-left,0px);
}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
body{min-width:320px;max-width:100vw;overflow-x:hidden;}
img,svg,video,canvas{max-width:100%;height:auto;}
button,input,select,textarea{max-width:100%;}
.app,.main,.page,.card,.g2>*,.g3>*,.g4>*,.g24>*,.audit-grid>*,.billing-grid>*{min-width:0;}
.main>.page{width:min(100%,var(--es360-content-max));margin-inline:auto;}
.es360-mobile-toggle,.es360-nav-backdrop{display:none;}
.es360-mobile-toggle{width:var(--es360-touch);height:var(--es360-touch);border:0;border-radius:10px;background:var(--gr,#f0f4f8);color:var(--tx,#0f1e35);font-size:22px;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;}
.es360-nav-backdrop{position:fixed;inset:0;background:rgba(4,18,38,.52);backdrop-filter:blur(2px);z-index:89;}
.responsive-table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border-radius:10px;overscroll-behavior-inline:contain;}
.responsive-table-wrap>.tbl{min-width:680px;}
.tbl th,.tbl td{overflow-wrap:normal;word-break:normal;}
.tabs{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;}
.tab{min-width:max-content;}
.sb,.as-topbar,.billing-toolbar,.billing-section-head,.ct{min-width:0;}
.fi,.si{min-height:42px;}
.btn,.tb-btn,.mi,.tab,.as-btn{touch-action:manipulation;}
.mbox,.es360-dialog-panel{overscroll-behavior:contain;}
.toast{max-width:min(420px,calc(100vw - 32px));overflow-wrap:anywhere;}

/* Escritorio compacto y tablet horizontal */
@media (max-width:1199px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .audit-grid{grid-template-columns:minmax(180px,240px) minmax(0,1fr);}
  .audit-grid>*:last-child{grid-column:1/-1;}
  .billing-wide{min-width:900px;}
}

/* Tablet y móvil: navegación off-canvas, no una miniatura del escritorio */
@media (max-width:1024px){
  :root{--es360-topbar-height:60px;}
  body.es360-nav-open{overflow:hidden;}
  .sidebar{left:0!important;top:0!important;width:min(86vw,300px)!important;height:100dvh!important;transform:translateX(-105%);transition:transform .24s ease;z-index:1000!important;padding-bottom:var(--es360-safe-bottom);box-shadow:12px 0 34px rgba(0,0,0,.24)!important;}
  body.es360-nav-open .sidebar{transform:translateX(0);}
  body.es360-nav-open .es360-nav-backdrop{display:block;}
  .topbar{left:0!important;height:calc(var(--es360-topbar-height) + var(--es360-safe-top));padding:var(--es360-safe-top) max(14px,var(--es360-safe-right)) 0 max(14px,var(--es360-safe-left))!important;gap:10px;}
  .tb-left{min-width:0;flex:1;}
  .tb-title{font-size:15px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tb-bc,.tb-url{display:none!important;}
  .tb-right{flex:0 0 auto;gap:6px!important;}
  .es360-mobile-toggle{display:inline-flex;}
  .main{margin-left:0!important;margin-top:calc(var(--es360-topbar-height) + var(--es360-safe-top))!important;padding:18px max(16px,var(--es360-safe-right)) calc(22px + var(--es360-safe-bottom)) max(16px,var(--es360-safe-left))!important;min-height:calc(100dvh - var(--es360-topbar-height));}
  .observer-banner{left:0!important;}
  .g24,.audit-grid{grid-template-columns:1fr!important;}
  .audit-grid>*{grid-column:auto!important;}
  .menu .mi{min-height:44px;}
  .sf{padding-bottom:max(12px,var(--es360-safe-bottom));}
  .modal{padding:16px;}
  .mbox{width:min(680px,100%)!important;max-width:100%!important;}
}

/* Tablet vertical y teléfonos grandes */
@media (max-width:768px){
  .main{padding-inline:max(12px,var(--es360-safe-left))!important;}
  .pt{font-size:19px!important;line-height:1.25;overflow-wrap:anywhere;}
  .ps{font-size:12px!important;line-height:1.55;}
  .g2,.g3,.g4,.g24,.frow,.frow3{grid-template-columns:1fr!important;gap:12px!important;}
  .card{padding:14px!important;border-radius:12px!important;}
  .sc{padding:14px!important;}
  .sc-n{font-size:23px!important;}
  .ct,.billing-section-head{align-items:flex-start;}
  .sb,.billing-toolbar,.as-topbar{display:grid!important;grid-template-columns:1fr!important;}
  .sb>*,.billing-toolbar>*,.billing-toolbar .grow,.billing-toolbar .fg,.as-topbar>*{width:100%!important;min-width:0!important;}
  .si{min-width:0!important;}
  .tabs{justify-content:flex-start;scroll-snap-type:x proximity;}
  .tab{flex:0 0 auto;scroll-snap-align:start;padding-inline:14px;}
  .btn{min-height:var(--es360-touch);justify-content:center;}
  .btn-xs,.btn-sm{min-height:38px;}
  .tb-btn{width:var(--es360-touch)!important;height:var(--es360-touch)!important;}
  .tbl th,.tbl td{padding:9px 10px!important;font-size:11.5px!important;}
  .responsive-table-wrap>.tbl{min-width:620px;}
  .billing-wide{min-width:850px!important;}
  .ag{grid-template-columns:1fr!important;}
  .as-card{min-height:0!important;}
  .cal-grid,.cal-hdr{min-width:420px;}
  .cal-grid,.cal-hdr{font-size:11px;}
  .chart-wrap{min-width:420px;}
  .toast{left:12px!important;right:12px!important;bottom:calc(12px + var(--es360-safe-bottom))!important;max-width:none!important;text-align:center;}
  .login-wrap{padding:20px max(14px,var(--es360-safe-right)) calc(20px + var(--es360-safe-bottom)) max(14px,var(--es360-safe-left));align-items:flex-start!important;}
  .login-box{width:100%!important;max-width:480px!important;padding:26px 20px!important;margin-top:max(20px,var(--es360-safe-top));}
}

/* Teléfono */
@media (max-width:480px){
  :root{--es360-topbar-height:58px;}
  .logo-area{padding-top:calc(16px + var(--es360-safe-top))!important;}
  .topbar{padding-inline:10px!important;}
  .tb-right .tb-btn:not(:last-child){display:none;}
  .main{padding:12px 10px calc(18px + var(--es360-safe-bottom))!important;}
  .card,.sc{border-radius:11px!important;padding:12px!important;}
  .pt{font-size:18px!important;}
  .ct{font-size:13px!important;flex-direction:column;}
  .ct>*{width:100%;}
  .btn{width:100%;}
  .tabs{margin-inline:-2px;}
  .modal{padding:0!important;align-items:flex-end!important;}
  .mbox,.es360-dialog-panel{width:100%!important;max-width:none!important;max-height:calc(100dvh - var(--es360-safe-top))!important;border-radius:18px 18px 0 0!important;padding:20px 16px calc(18px + var(--es360-safe-bottom))!important;}
  .es360-dialog-actions{display:grid!important;grid-template-columns:1fr!important;}
  .es360-dialog-actions button{width:100%!important;}
  .frow,.frow3{display:grid!important;grid-template-columns:1fr!important;}
  .as-card-actions,.as-card-status-row{grid-template-columns:1fr 1fr!important;}
  .billing-plan-grid{grid-template-columns:1fr!important;}
  .responsive-table-wrap{margin-inline:-2px;width:calc(100% + 4px);}
  .responsive-table-wrap>.tbl{min-width:560px;}
}

/* Móvil horizontal: prioriza altura útil */
@media (max-height:520px) and (orientation:landscape) and (max-width:1024px){
  .sidebar{width:min(72vw,300px)!important;}
  .logo-area{padding-block:10px!important;}
  .mi{padding-block:6px!important;min-height:38px!important;}
  .mbox,.es360-dialog-panel{max-height:96dvh!important;}
}

/* Pantallas muy grandes y Smart TV: consulta legible, no captura compleja con control remoto */
@media (min-width:1920px){
  html{font-size:112.5%;}
  :root{--es360-sidebar-width:280px;--es360-topbar-height:68px;--es360-content-max:2100px;}
  .sidebar{width:280px!important;}
  .topbar{left:280px!important;height:68px!important;padding-inline:30px!important;}
  .main{margin-left:280px!important;margin-top:68px!important;padding:28px 34px!important;}
  .mi{min-height:48px;font-size:13px!important;}
  .btn,.fi,.si{min-height:46px;}
  .card{padding:20px!important;}
}

@media (hover:none),(pointer:coarse){
  .btn,.mi,.tab,.tb-btn,.as-btn,.cbtn{min-height:var(--es360-touch);}
  .sc:hover,.as-card:hover,.plan-card:hover{transform:none!important;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}
}

@media print{
  .es360-mobile-toggle,.es360-nav-backdrop{display:none!important;}
}