/* V415A · AppShell global modular — Home Mode sin sidebar + Module Mode con sidebar */
@media screen {
  :root{
    --app-shell-navy:#061c45;
    --app-shell-navy-2:#082859;
    --app-shell-cyan:#0ea5c6;
    --app-shell-cyan-2:#38bdf8;
    --app-shell-page:#f7f9fc;
    --app-shell-surface:#ffffff;
    --app-shell-line:#e2e8f0;
    --app-shell-text:#172033;
    --app-shell-muted:#64748b;
    --app-shell-sidebar-width:230px;
    --app-shell-topbar-height:64px;
    --app-shell-z-sidebar:1250;
    --app-shell-z-backdrop:1240;
  }

  body.app-shell-active{overflow:hidden!important;background:var(--app-shell-page)!important;}
  .app-shell[hidden]{display:none!important;}
  .app-shell{
    position:fixed;inset:0;z-index:1;
    width:100%;height:100vh;height:100dvh;min-width:0;min-height:0;
    display:grid;grid-template-columns:var(--app-shell-sidebar-width) minmax(0,1fr);
    overflow:hidden;background:var(--app-shell-page);color:var(--app-shell-text);
  }
  /* V415A: una sola arquitectura con dos modos visuales. Inicio no reserva columna lateral. */
  .app-shell.app-shell--home{grid-template-columns:minmax(0,1fr);}
  .app-shell .app-sidebar[hidden]{display:none!important;}
  .app-shell.app-shell--home .app-sidebar{display:none!important;}
  .app-shell.app-shell--home .app-body{grid-column:1;min-width:0;}
  .app-shell.app-shell--home .app-menu-btn{display:none!important;}
  .app-shell.app-shell--home .app-shell-backdrop{display:none!important;pointer-events:none!important;}
  .app-shell.app-shell--home .app-content{width:100%;}
  .app-shell.app-shell--home .app-content>#pantallaInicio{width:100%;}
  .app-shell.app-shell--home .app-content .home-dashboard-card{width:min(920px,calc(100% - 32px));margin-inline:auto;}
  .app-sidebar{
    min-width:0;min-height:0;height:100%;padding:18px 13px 14px;
    display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
    background:linear-gradient(180deg,var(--app-shell-navy) 0%,var(--app-shell-navy-2) 100%);color:#fff;
    border-right:1px solid rgba(255,255,255,.07);
  }
  .app-sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 7px 17px;border-bottom:1px solid rgba(255,255,255,.10);}
  .app-sidebar-mark{width:36px;height:36px;flex:0 0 36px;border-radius:10px;display:grid;place-items:center;background:rgba(56,189,248,.14);border:1px solid rgba(125,211,252,.24);color:#e0f7ff;font-size:12px;font-weight:950;letter-spacing:.03em;}
  .app-sidebar-brand div{min-width:0;display:grid;gap:2px;}
  .app-sidebar-brand strong{font-size:13px;font-weight:900;line-height:1.2;}
  .app-sidebar-brand small{color:#9ec8de;font-size:10px;font-weight:700;}
  .app-nav{display:grid;gap:5px;padding:17px 0;}
  .app-nav-item{
    width:100%;min-height:40px;margin:0!important;padding:8px 10px!important;border:1px solid transparent!important;border-radius:9px!important;
    display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;
    background:transparent!important;color:#c8d9e8!important;box-shadow:none!important;text-align:left!important;
    font-size:12px!important;font-weight:800!important;line-height:1.2!important;cursor:pointer;
  }
  .app-nav-item svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .app-nav-item:hover{background:rgba(255,255,255,.07)!important;color:#fff!important;transform:none!important;}
  .app-nav-item.is-active{background:linear-gradient(135deg,var(--app-shell-cyan),#0284c7)!important;color:#fff!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 8px 20px rgba(2,132,199,.20)!important;}
  .app-nav-item:focus-visible{outline:3px solid rgba(125,211,252,.34)!important;outline-offset:2px!important;}
  .app-nav-item.is-permission-hidden{display:none!important;}

  .app-body{min-width:0;min-height:0;height:100%;display:grid;grid-template-rows:var(--app-shell-topbar-height) minmax(0,1fr);overflow:hidden;background:var(--app-shell-page);}
  .app-topbar{
    min-width:0;min-height:0;height:var(--app-shell-topbar-height);padding:0 16px;
    display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--app-shell-line);backdrop-filter:blur(14px);z-index:20;
  }
  .app-topbar-session{min-width:0;flex:1 1 auto;}
  html body.app-shell-active .app-shell .app-topbar .auth-session-bar{
    position:static!important;top:auto!important;z-index:auto!important;width:100%!important;min-height:var(--app-shell-topbar-height)!important;
    margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;
  }
  .app-menu-btn{
    display:none;width:40px;height:40px;min-width:40px;min-height:40px;margin:0!important;padding:0!important;border:1px solid var(--app-shell-line)!important;border-radius:12px!important;
    background:#fff!important;color:#16324a!important;box-shadow:none!important;place-items:center!important;
  }
  .app-menu-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .app-menu-btn:focus-visible{outline:3px solid rgba(14,165,198,.18)!important;outline-offset:2px!important;}
  .app-content{
    min-width:0;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;
    background:var(--app-shell-page);position:relative;
  }
  .app-content>#pantallaInicio,.app-content>#pantallaSistema,.app-content>#pantallaAdministracion,
  .app-content>#pantallaPaquetesFinalizados,.app-content>#identityAuditScreen,.app-content>#packageDuplicateAuditScreen{width:100%;}
  .app-content .home-dashboard,.app-content .admin-dashboard{min-height:100%!important;}

  /* V417B · SAFE INITIAL RENDER
     El AppShell reemplaza definitivamente la navegación global legacy.
     La ocultación no depende de que JS haya movido primero la pantalla a .app-content,
     por lo que refresh/hard reload nunca puede exponer esa variante transitoria. */
  #mainNav,.system-app-header{display:none!important;}

  /* Antes de que el router sincronice el estado, el único estado visual seguro es Home. */
  .app-shell:not(.app-shell--module){grid-template-columns:minmax(0,1fr);}
  .app-shell:not(.app-shell--module) .app-sidebar{display:none!important;}
  .app-shell:not(.app-shell--module) .app-menu-btn{display:none!important;}

  /* Operaciones consume el scroll global del MainContent; ya no monta shell/scroll propios. */
  body[data-modulo-activo="operaciones"] .app-content #pantallaSistema,
  body[data-modulo-activo="operaciones"] .app-content #pantallaSistema>.container,
  body[data-modulo-activo="operaciones"] .app-content #operationsPanel,
  body[data-modulo-activo="operaciones"] .app-content #operationsRoot{
    width:100%!important;max-width:none!important;height:auto!important;min-height:100%!important;margin:0!important;padding:0!important;overflow:visible!important;
  }
  body[data-modulo-activo="operaciones"] .app-content #pantallaSistema,
  body[data-modulo-activo="operaciones"] .app-content #pantallaSistema>.container{background:var(--operations-page,#f7f9fc)!important;}

  /* Catálogo conserva exactamente su contenido V414B, sin shell propio. */
  body[data-modulo-activo="catalogoVenta"] .app-content #packageSaleSelectorPanel{min-height:100%!important;}
  body[data-modulo-activo="catalogoVenta"] .app-content .catalog-content{min-height:100%;}

  /* Historial conserva su patrón V413E de listado interno, pero sin sidebar propia. */
  body[data-modulo-activo="historial"] .app-content .history-module-shell{display:block!important;width:100%!important;height:100%!important;min-height:0!important;}
  body[data-modulo-activo="historial"] .app-content .history-module-main{width:100%!important;}

  .app-shell-backdrop{display:none;}

  html[data-theme="dark"] .app-shell,html[data-theme="dark"] .app-body,html[data-theme="dark"] .app-content{--app-shell-page:#0b1321;--app-shell-surface:#14243c;--app-shell-line:#30445d;--app-shell-text:#edf4fb;--app-shell-muted:#a9b8ca;background:var(--app-shell-page);color:var(--app-shell-text);}
  html[data-theme="dark"] .app-topbar{background:rgba(11,19,33,.96);border-bottom-color:var(--app-shell-line);}
  html[data-theme="dark"] .app-menu-btn{background:#14243c!important;color:#edf4fb!important;border-color:#30445d!important;}

  @media(max-width:860px){
    :root{--app-shell-topbar-height:60px;}
    .app-shell{grid-template-columns:minmax(0,1fr);}
    .app-sidebar{
      position:fixed;left:0;top:0;bottom:0;z-index:var(--app-shell-z-sidebar);width:min(286px,86vw);height:100dvh;
      transform:translateX(-102%);transition:transform .2s ease;box-shadow:18px 0 45px rgba(3,16,38,.24);
    }
    .app-shell.is-drawer-open .app-sidebar{transform:translateX(0);}
    .app-body{grid-column:1;}
    .app-topbar{padding:0 10px;}
    .app-menu-btn{display:grid!important;}
    .app-shell-backdrop{
      position:fixed;inset:0;z-index:var(--app-shell-z-backdrop);margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
      background:rgba(2,8,23,.42)!important;box-shadow:none!important;opacity:0;pointer-events:none;display:block;transition:opacity .2s ease;
    }
    .app-shell.is-drawer-open .app-shell-backdrop{opacity:1;pointer-events:auto;}
    .app-content{scrollbar-gutter:auto;}
    .app-topbar .auth-user-copy strong{max-width:38vw;}
  }

  @media(prefers-reduced-motion:reduce){.app-sidebar,.app-shell-backdrop{transition:none!important;}}
}