/* PARCHE 092 · HOME web con la misma navegación y disposición de /app */
.web-home-shell{
  --web-shell-bg:#050b14;
  --web-shell-line:rgba(180,204,232,.13);
  --web-shell-text:rgba(255,255,255,.96);
  --web-shell-mut:rgba(226,235,246,.70);
  --web-shell-accent:#c79b32;
}
.web-home-shell .wrap{
  max-width:1200px;
  padding:82px 14px 92px;
}
.webShellTop{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--web-shell-line);
  background:rgba(5,11,20,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.webShellTopLeft{display:flex;align-items:center;gap:10px;min-width:0}
.webShellMenu{
  width:48px;height:44px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--web-shell-line);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(25,58,94,.48),rgba(10,25,43,.68));
  color:var(--web-shell-text);cursor:pointer;
}
.webShellMenu:active{transform:scale(.98)}
.webShellBars{width:20px;height:14px;display:grid;gap:4px}
.webShellBars span{display:block;height:2px;border-radius:999px;background:rgba(255,255,255,.88)}
.webShellBrandIcon{width:36px;height:36px;border-radius:10px;object-fit:cover;box-shadow:0 7px 18px rgba(0,5,13,.38);flex:0 0 auto}
.webShellTitleWrap{min-width:0}
.webShellTitle{font-weight:900;letter-spacing:.2px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.webShellSubtitle{font-weight:700;font-size:11px;color:var(--web-shell-mut);margin-top:1px}
.webShellUser{
  max-width:min(38vw,300px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:8px 11px;border-radius:14px;border:1px solid var(--web-shell-line);
  background:rgba(255,255,255,.045);color:var(--web-shell-mut);font-size:12px;font-weight:800;
}
.webShellTabs{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  min-height:68px;
  padding:9px 10px 10px;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
  border-top:1px solid var(--web-shell-line);
  background:rgba(5,11,20,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.webShellTab{
  min-width:0;min-height:48px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px solid transparent;border-radius:18px;
  color:var(--web-shell-mut);text-decoration:none;font-weight:800;font-size:11px;
}
.webShellTab:hover{background:rgba(255,255,255,.035);color:var(--web-shell-text)}
.webShellTabDot{width:26px;height:4px;border-radius:999px;background:transparent}
.webShellTab.active{background:rgba(199,155,50,.08);border-color:rgba(199,155,50,.22);color:var(--web-shell-text)}
.webShellTab.active .webShellTabDot{background:var(--web-shell-accent)}

/* En HOME web usamos un solo menú: el superior, como en /app. El guard de CC sigue cargando desde app_nav.js. */
.web-home-shell > .appNavBtn,
.web-home-shell > .appNavMask,
.web-home-shell > .appNavPanel{display:none!important}

/* El drawer histórico de HOME se transforma en el panel lateral de /app. */
.web-home-shell .backdrop{z-index:70;background:rgba(0,4,10,.68);backdrop-filter:none}
.web-home-shell .drawer{
  left:10px;right:auto;top:10px;bottom:10px;height:auto;
  width:min(340px,92vw);z-index:71;
  border-radius:22px;border:1px solid rgba(180,204,232,.14);
  border-left:1px solid rgba(180,204,232,.14);
  background:linear-gradient(180deg,rgba(23,53,87,.58),rgba(5,11,20,.96));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 60px rgba(0,0,0,.5);
  transform:translateX(-110%);
  transition:transform .18s ease;
  padding:10px;display:flex;flex-direction:column;overflow:hidden;
}
.web-home-shell .drawer.open{transform:translateX(0)}
.web-home-shell .dhead{padding:2px 2px 10px;border-bottom:1px solid rgba(255,255,255,.10)}
.web-home-shell .dhead b{font-size:14px}
.web-home-shell .dhead .hamb{width:38px;height:38px;border-radius:12px}
.web-home-shell .dlist{overflow:auto;padding:8px 0 4px;gap:8px}
.web-home-shell .ditem{padding:10px 12px;border-radius:16px;background:linear-gradient(145deg,rgba(18,42,70,.60),rgba(6,16,29,.72));border-color:rgba(255,255,255,.10)}
.web-home-shell .ditem:hover{background:rgba(255,255,255,.07)}
.web-home-shell .ditem b{font-size:13px}
.web-home-shell .ditem small{font-size:11px;color:rgba(205,219,236,.70)}

@media (max-width:700px){
  .web-home-shell .wrap{padding:76px 10px 84px}
  .webShellTop{min-height:60px;padding:8px 10px}
  .webShellMenu{width:44px;height:40px;border-radius:14px}
  .webShellBrandIcon{width:32px;height:32px;border-radius:9px}
  .webShellUser{max-width:28vw;padding:7px 9px;font-size:10px}
  .webShellTabs{min-height:64px;padding:8px 8px;gap:4px}
  .webShellTab{min-height:46px;border-radius:16px;font-size:10px;gap:3px}
  .webShellTabDot{width:22px}
  .web-home-shell .drawer{left:8px;top:8px;bottom:8px;width:min(300px,90vw);border-radius:18px}
}
@media (max-width:420px){
  .webShellUser{display:none}
}
@media print{
  .webShellTop,.webShellTabs,.web-home-shell .drawer,.web-home-shell .backdrop{display:none!important}
  .web-home-shell .wrap{padding:0!important;max-width:none!important}
}


/* PARCHE 093 · HOME cargado dentro del shell persistente. */
.web-embedded-home .webShellTop,
.web-embedded-home .webShellTabs,
.web-embedded-home .drawer,
.web-embedded-home .backdrop{display:none!important}
.web-embedded-home .wrap{max-width:1200px;padding:18px 14px 36px!important}
@media(max-width:700px){.web-embedded-home .wrap{padding:12px 10px 28px!important}}
