/* Sistema RH · Mobile Shell 1.0
 * Only geometry/visibility ownership lives here.
 * Visual tokens continue to come from app.css / Design System.
 */
@media (min-width:861px){
  .topbar-movil,
  .mobile-more-sheet,
  .mobile-more-overlay,
  .bottom-nav-movil{
    display:none !important;
  }
}

@media (max-width:860px){
  .desktop-sidebar,
  .app-header{
    display:none !important;
  }

  .mobile-more-sheet{
    display:flex;
  }

  .mobile-more-overlay{
    display:block;
  }

  /* One geometry contract for More + floating nav. */
  .mobile-more-sheet,
  .bottom-nav-movil{
    left:var(--mobile-layer-inset,18px) !important;
    right:var(--mobile-layer-inset,18px) !important;
    width:auto !important;
    border-radius:var(--mobile-layer-radius,28px) !important;
  }

  .mobile-more-sheet{
    bottom:var(--mobile-layer-bottom,max(10px,env(safe-area-inset-bottom))) !important;
    overflow:hidden;
  }

  .mobile-more-sheet > nav{
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-bottom:calc(96px + env(safe-area-inset-bottom));
  }

  body > .rh-mobile-glass-portal{
    /* exact bottom-nav glass contract */
    background:var(--glass-bg) !important;
    border-color:var(--glass-border) !important;
    box-shadow:var(--glass-shadow) !important;
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
    backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
  }
}


/* =========================================================
   v2.7.17 · Mobile overlay geometry authority
   Fix: legacy .notificaciones-panel.activity-center rules in app.css have
   higher specificity than the generic portal rule. Own final geometry here.
   ========================================================= */
@media (max-width:860px){
  body > [data-mobile-notifications-panel].rh-mobile-glass-portal,
  body > [data-mobile-account-panel].rh-mobile-glass-portal{
    position:fixed !important;
    top:var(--rh-mobile-overlay-top,82px) !important;
    left:var(--mobile-layer-inset,18px) !important;
    right:var(--mobile-layer-inset,18px) !important;
    bottom:auto !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - var(--rh-mobile-overlay-top,82px) - 14px - env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    overflow:auto !important;
    overscroll-behavior:contain;
    z-index:1600 !important;
    display:block !important;

    background:var(--glass-bg) !important;
    border:1px solid var(--glass-border) !important;
    border-radius:var(--mobile-layer-radius,28px) !important;
    box-shadow:var(--glass-shadow) !important;
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;
    backdrop-filter:blur(var(--glass-blur)) saturate(150%) !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-6px) scale(.992) !important;
  }

  body > [data-mobile-notifications-panel].rh-mobile-glass-portal.is-open,
  body > [data-mobile-account-panel].rh-mobile-glass-portal.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) scale(1) !important;
  }

  /* Explicit trigger hit target remains above topbar decoration. */
  .topbar-movil [data-mobile-notifications-toggle],
  .topbar-movil [data-mobile-account-toggle]{
    pointer-events:auto !important;
    touch-action:manipulation;
  }
}


/* =========================================================
   v2.7.29 · Mobile Shell Product UX authority
   Shell-only geometry stays here so app.css cannot steal
   ownership of notification/account overlay placement.
   ========================================================= */
@media (max-width:860px){
  .mobile-more-sheet,
  .bottom-nav-movil{
    left:var(--mobile-chrome-inset,var(--mobile-layer-inset,18px)) !important;
    right:var(--mobile-chrome-inset,var(--mobile-layer-inset,18px)) !important;
  }

  body > [data-mobile-notifications-panel].rh-mobile-glass-portal,
  body > [data-mobile-account-panel].rh-mobile-glass-portal{
    top:max(var(--rh-mobile-overlay-top,82px),calc(env(safe-area-inset-top) + 68px)) !important;
    left:var(--mobile-chrome-inset,var(--mobile-layer-inset,18px)) !important;
    right:var(--mobile-chrome-inset,var(--mobile-layer-inset,18px)) !important;
    max-height:calc(
      100dvh
      - max(var(--rh-mobile-overlay-top,82px),calc(env(safe-area-inset-top) + 68px))
      - 14px
      - env(safe-area-inset-bottom)
    ) !important;
    overscroll-behavior:contain;
  }
}

@media (max-width:390px){
  .mobile-more-sheet,
  .bottom-nav-movil,
  body > [data-mobile-notifications-panel].rh-mobile-glass-portal,
  body > [data-mobile-account-panel].rh-mobile-glass-portal{
    left:12px !important;
    right:12px !important;
  }
}


/* ============================================================
   v2.7.49 · Mobile Header Optical Alignment Authority
   One center line, one control box, one spacing rhythm.
   ============================================================ */
@media (max-width:860px){
  .topbar-movil{
    box-sizing:border-box !important;
    min-height:calc(var(--mobile-topbar-h,64px) + env(safe-area-inset-top)) !important;
    padding:
      env(safe-area-inset-top)
      max(14px,env(safe-area-inset-right))
      0
      max(14px,env(safe-area-inset-left)) !important;
    display:grid !important;
    grid-template-columns:44px 44px minmax(0,1fr) auto !important;
    align-items:center !important;
    align-content:center !important;
    column-gap:8px !important;
  }

  .topbar-movil-logo{
    grid-column:1;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    display:grid !important;
    place-items:center !important;
    align-self:center !important;
    justify-self:center !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
    overflow:visible !important;
  }
  .topbar-movil-logo img{
    display:block !important;
    width:42px !important;
    height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    margin:auto !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  .topbar-movil > .btn-menu-movil{
    grid-column:2;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    align-self:center !important;
    justify-self:center !important;
    line-height:0 !important;
  }
  .topbar-movil > .btn-menu-movil .nav-motion-lines{
    margin:auto !important;
  }

  .topbar-movil .cabecera-acciones-movil{
    grid-column:4;
    align-self:center !important;
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    height:44px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .topbar-movil .cabecera-acciones-movil > .btn-icono-cabecera,
  .topbar-movil .cabecera-acciones-movil > .theme-toggle-mobile,
  .topbar-movil .cabecera-acciones-movil > .notificaciones,
  .topbar-movil .cabecera-acciones-movil > .mobile-account-menu{
    flex:0 0 44px !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
  }

  .topbar-movil .cabecera-acciones-movil .theme-toggle-mobile,
  .topbar-movil .cabecera-acciones-movil .notificaciones > .btn-icono-cabecera,
  .topbar-movil .cabecera-acciones-movil .mobile-account-trigger{
    box-sizing:border-box !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:0 !important;
  }

  .topbar-movil .cabecera-acciones-movil .theme-toggle-mobile > svg,
  .topbar-movil .cabecera-acciones-movil .notificaciones > .btn-icono-cabecera > svg{
    display:block !important;
    margin:auto !important;
  }

  .topbar-movil .cabecera-acciones-movil .mobile-account-trigger{
    border-radius:50% !important;
    overflow:hidden !important;
  }
  .topbar-movil .cabecera-acciones-movil .mobile-account-trigger img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  .topbar-movil .notificacion-contador{
    top:-2px !important;
    right:-2px !important;
  }
}

@media (max-width:390px){
  .topbar-movil{
    grid-template-columns:42px 42px minmax(0,1fr) auto !important;
    column-gap:5px !important;
    padding-left:max(10px,env(safe-area-inset-left)) !important;
    padding-right:max(10px,env(safe-area-inset-right)) !important;
  }
  .topbar-movil .cabecera-acciones-movil{
    gap:5px !important;
  }
}

/* ============================================================
   v2.8.40 · Mobile Chrome Continuity Authority
   Android can recompute sticky positioning when body overflow is locked.
   Promote the existing topbar while More is open; no duplicate header.
   ============================================================ */
body.mobile-nav-open .topbar-movil{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:1700;
  visibility:visible;
  opacity:1;
  transform:none;
  isolation:isolate;
}

/* =========================================================
   DS-2026-049 · Mobile Bottom Navigation single geometry owner
   No module/app stylesheet may position or size this viewport layer.
   ========================================================= */
@media(max-width:860px){
  body{
    padding-bottom:calc(var(--mobile-bottom-nav-h,76px) + max(18px,env(safe-area-inset-bottom)))!important;
  }
  .bottom-nav-movil{
    position:fixed!important;
    left:max(var(--mobile-chrome-inset,14px),env(safe-area-inset-left))!important;
    right:max(var(--mobile-chrome-inset,14px),env(safe-area-inset-right))!important;
    top:auto!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    min-height:var(--mobile-bottom-nav-h,76px)!important;
    z-index:1100!important;
    overflow:visible!important;
    border-radius:var(--mobile-layer-radius,24px)!important;
    padding:7px 8px max(4px,env(safe-area-inset-bottom))!important;
    box-sizing:border-box!important;
    contain:layout;
  }
  .bottom-nav-movil > :is(a,button){
    min-width:0!important;
    min-height:52px!important;
  }
  .app-shell,.content,main{
    min-width:0;
    max-width:100%;
  }
}
@media(max-width:390px){
  .bottom-nav-movil{
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
  }
}