/* Qubexza Work 1.0.85
   Navegacion responsive unificada. Esta capa no modifica logica ni datos. */

:root{
  --qx-nav-wide:252px;
  --qx-nav-compact:88px;
  --qx-nav-medium:112px;
  --qx-nav-drawer:min(296px,92vw);
  --qx-nav-ease:cubic-bezier(.22,1,.36,1);
}

html{
  width:100%;
  min-width:0;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.app-body{
  width:100%;
  min-width:0;
  overflow-x:hidden;
}

.app-main,
.content-wrap,
.top-hero,
.premium-card,
.metric-card,
.worker-grid,
.admin-main-grid,
.settings-grid,
.two-col,
.form-grid{
  min-width:0;
  max-width:100%;
}

.app-main{
  transition:margin-left .3s var(--qx-nav-ease),width .3s var(--qx-nav-ease)!important;
}

.sidebar{
  box-sizing:border-box!important;
  overscroll-behavior:contain;
  transition:width .3s var(--qx-nav-ease),transform .3s var(--qx-nav-ease),box-shadow .3s ease!important;
  will-change:width,transform;
}

.sidebar .side-nav{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,145,45,.34) transparent;
  overscroll-behavior:contain;
}

.sidebar .side-nav::-webkit-scrollbar{width:4px}
.sidebar .side-nav::-webkit-scrollbar-thumb{background:rgba(255,145,45,.34);border-radius:10px}
.sidebar .nav-item{
  flex:0 0 auto;
  touch-action:manipulation;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease!important;
}
.sidebar .nav-item:active{transform:scale(.985)}
.sidebar .nav-icon{flex:0 0 25px}
.sidebar .nav-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .sidebar-bottom{flex:0 0 auto}
.sidebar .sidebar-close{z-index:8}

.mobile-overlay{
  opacity:0;
  visibility:hidden;
  display:block!important;
  pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease!important;
}

/* Escritorio amplio: menu completo, con colapso manual persistente. */
body.nav-mode-wide .sidebar{
  width:var(--qx-nav-wide)!important;
  transform:translate3d(0,0,0)!important;
}
body.nav-mode-wide .app-main{
  margin-left:var(--qx-nav-wide)!important;
  width:calc(100% - var(--qx-nav-wide))!important;
}
body.nav-mode-wide .sidebar-close{display:none!important}
body.nav-mode-wide:not(.sidebar-collapsed) .qx-brand-wordmark-final{display:block!important}
body.nav-mode-wide:not(.sidebar-collapsed) .qx-brand-icon-final{display:none!important}
body.nav-mode-wide:not(.sidebar-collapsed) .sidebar .nav-label,
body.nav-mode-wide:not(.sidebar-collapsed) .sidebar .mini-profile>div:last-child{display:block!important}
body.nav-mode-wide:not(.sidebar-collapsed) .sidebar .nav-item{justify-content:flex-start!important;padding-inline:15px!important;gap:14px!important}

body.nav-mode-wide.sidebar-collapsed .sidebar{
  width:var(--qx-nav-compact)!important;
}
body.nav-mode-wide.sidebar-collapsed .app-main{
  margin-left:var(--qx-nav-compact)!important;
  width:calc(100% - var(--qx-nav-compact))!important;
}

/* Pantalla media, media ventana o zoom: barra compacta fija y apertura flotante. */
body.nav-mode-compact .sidebar{
  width:var(--qx-nav-medium)!important;
  transform:translate3d(0,0,0)!important;
  z-index:1000!important;
  padding-inline:8px!important;
}
body.nav-mode-compact .app-main{
  margin-left:var(--qx-nav-medium)!important;
  width:calc(100% - var(--qx-nav-medium))!important;
}
body.nav-mode-compact .sidebar-close{display:none!important}
body.nav-mode-compact .sidebar .qx-brand-wordmark-final,
body.nav-mode-compact .sidebar .mini-profile>div:last-child{display:none!important}
body.nav-mode-compact .sidebar .qx-brand-icon-final{display:block!important}
body.nav-mode-compact .sidebar .qx-brand-lockup-final{justify-content:center!important;padding-inline:0!important}
body.nav-mode-compact:not(.medium-sidebar-open) .sidebar .side-nav{gap:4px!important}
body.nav-mode-compact:not(.medium-sidebar-open) .sidebar .nav-item{
  min-height:64px!important;
  height:auto!important;
  justify-content:center!important;
  align-items:center!important;
  flex-direction:column!important;
  padding:7px 4px!important;
  gap:4px!important;
  text-align:center!important;
}
body.nav-mode-compact:not(.medium-sidebar-open) .sidebar .nav-icon{
  width:auto!important;
  flex:0 0 auto!important;
}
body.nav-mode-compact:not(.medium-sidebar-open) .sidebar .nav-label{
  display:block!important;
  width:100%!important;
  max-width:96px!important;
  font-size:10px!important;
  line-height:1.08!important;
  font-weight:800!important;
  letter-spacing:0!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
}
body.nav-mode-compact .sidebar .mini-profile{justify-content:center!important}

body.nav-mode-compact.medium-sidebar-open{overflow:hidden}
body.nav-mode-compact.medium-sidebar-open .sidebar{
  width:272px!important;
  box-shadow:28px 0 70px rgba(0,0,0,.48)!important;
}
body.nav-mode-compact.medium-sidebar-open .sidebar-close{display:grid!important}
body.nav-mode-compact.medium-sidebar-open .sidebar .qx-brand-wordmark-final{display:block!important}
body.nav-mode-compact.medium-sidebar-open .sidebar .qx-brand-icon-final{display:none!important}
body.nav-mode-compact.medium-sidebar-open .sidebar .qx-brand-lockup-final{justify-content:flex-start!important;padding-inline:10px!important}
body.nav-mode-compact.medium-sidebar-open .sidebar .nav-label,
body.nav-mode-compact.medium-sidebar-open .sidebar .mini-profile>div:last-child{display:block!important}
body.nav-mode-compact.medium-sidebar-open .sidebar .nav-item{justify-content:flex-start!important;padding-inline:15px!important;gap:14px!important}
body.nav-mode-compact.medium-sidebar-open .sidebar .mini-profile{justify-content:flex-start!important}
body.nav-mode-compact.medium-sidebar-open .mobile-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:990!important;
  background:rgba(0,0,0,.58)!important;
  backdrop-filter:blur(3px);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Icono y wordmark con espacio seguro para que ninguna letra se recorte. */
#sidebar .qx-brand-lockup-final{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}
#sidebar .qx-brand-wordmark-final{
  width:218px!important;
  max-width:calc(100% - 4px)!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:left center!important;
  clip-path:none!important;
  transform:none!important;
}
#sidebar .qx-brand-icon-final{
  width:54px!important;
  height:54px!important;
  padding:4px!important;
  box-sizing:border-box!important;
  object-fit:contain!important;
  clip-path:none!important;
}

/* Cabecera y contenido: se ajustan sin taparse ni desbordarse. */
.top-hero{box-sizing:border-box!important;width:100%!important}
.hero-copy{min-width:0}
.hero-copy h1,.hero-copy p{overflow-wrap:anywhere}
.hero-tools{max-width:calc(100% - 24px)}
.content-wrap{box-sizing:border-box!important;width:100%!important}
.content-wrap img,.content-wrap video,.content-wrap canvas,.content-wrap svg{max-width:100%}

/* Componentes anchos: el desplazamiento queda dentro del componente, no en toda la pagina. */
.table-wrap,
.table-responsive,
.workers-table-card,
.links-org-table-card,
.links-org-data-wrap,
.notification-tabs,
.org-inner-tabs,
.opportunity-inner-tabs,
.admin-workers-tabs,
.qwa-pay-filters,
.activity-filter-pills{
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
table{max-width:100%}
.notification-tabs,.org-inner-tabs,.opportunity-inner-tabs,.admin-workers-tabs,.qwa-pay-filters,.activity-filter-pills{
  flex-wrap:nowrap!important;
  scrollbar-width:none;
}
.notification-tabs::-webkit-scrollbar,.org-inner-tabs::-webkit-scrollbar,.opportunity-inner-tabs::-webkit-scrollbar,.admin-workers-tabs::-webkit-scrollbar,.qwa-pay-filters::-webkit-scrollbar,.activity-filter-pills::-webkit-scrollbar{display:none}
.notification-tabs>a,.org-inner-tabs>a,.opportunity-inner-tabs>a,.admin-workers-tabs>a,.qwa-pay-filters>a,.activity-filter-pills>*{flex:0 0 auto}

input,select,textarea,button{max-width:100%}
dialog.qx-dialog{max-width:min(94vw,760px);max-height:min(90dvh,900px);overflow:auto}
.worker-notification-overlay,.worker-welcome-overlay{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}

@media(max-width:1279px){
  .content-wrap{padding-inline:clamp(12px,2vw,20px)!important}
  .top-hero{padding-inline:clamp(14px,2vw,24px)!important}
  .hero-copy h1{font-size:clamp(28px,3.2vw,35px)!important}
  .hero-copy p{font-size:clamp(13px,1.6vw,16px)!important}
  .hero-quote{display:none!important}
  .cuba-clock{min-width:160px!important}
}

/* Movil y ventanas estrechas: drawer completo y contenido al 100 %. */
body.nav-mode-drawer .app-main{
  margin-left:0!important;
  width:100%!important;
}
body.nav-mode-drawer .sidebar{
  width:var(--qx-nav-drawer)!important;
  max-width:92vw!important;
  transform:translate3d(-104%,0,0)!important;
  z-index:1000!important;
  padding:max(12px,env(safe-area-inset-top)) 11px max(16px,env(safe-area-inset-bottom))!important;
  box-shadow:none!important;
}
body.nav-mode-drawer .sidebar.open{
  transform:translate3d(0,0,0)!important;
  box-shadow:30px 0 80px rgba(0,0,0,.56)!important;
}
body.nav-mode-drawer.drawer-open{overflow:hidden}
body.nav-mode-drawer .mobile-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:990!important;
  background:rgba(0,0,0,.64)!important;
  backdrop-filter:blur(3px);
}
body.nav-mode-drawer.drawer-open .mobile-overlay{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
body.nav-mode-drawer .sidebar .qx-brand-wordmark-final{display:block!important}
body.nav-mode-drawer .sidebar .qx-brand-icon-final{display:none!important}
body.nav-mode-drawer .sidebar .qx-brand-lockup-final{justify-content:flex-start!important;padding:7px 36px 15px 10px!important}
body.nav-mode-drawer .sidebar .nav-label,
body.nav-mode-drawer .sidebar .mini-profile>div:last-child{display:block!important}
body.nav-mode-drawer .sidebar .nav-item{
  justify-content:flex-start!important;
  min-height:52px!important;
  height:auto!important;
  padding:10px 14px!important;
  gap:14px!important;
}
body.nav-mode-drawer .sidebar .mini-profile{justify-content:flex-start!important}
body.nav-mode-drawer .sidebar-close{display:grid!important;top:max(13px,env(safe-area-inset-top))!important;right:10px!important}

@media(max-width:899px){
  .top-hero{
    min-height:132px!important;
    height:auto!important;
    padding:15px 13px 18px!important;
    align-items:flex-start!important;
  }
  .menu-toggle{flex:0 0 42px!important;width:42px!important;height:42px!important;margin-right:10px!important}
  .hero-copy{padding-top:5px!important;padding-right:132px!important}
  .hero-copy h1{font-size:clamp(25px,6vw,31px)!important;line-height:1.05!important}
  .hero-copy p{font-size:13px!important;line-height:1.35!important;margin-top:6px!important}
  .hero-tools{right:12px!important;top:14px!important;gap:7px!important}
  .hero-tools .cuba-clock{display:none!important}
  .hero-tools .tool-btn,.hero-tools .avatar.top{width:42px!important;height:42px!important;flex:0 0 42px!important}
  .content-wrap{padding:13px 11px max(34px,env(safe-area-inset-bottom))!important}
  .impersonation{margin-inline:11px!important}
  .page-heading{gap:12px!important}
  .page-heading,.page-heading-buttons,.table-toolbar,.card-head{max-width:100%}
  .page-heading-buttons{flex-wrap:wrap}
  .btn{min-height:42px;touch-action:manipulation}
  .premium-card,.metric-card{max-width:100%;overflow:hidden}
  .premium-card:has(>table),.premium-card:has(.data-table),.premium-card:has(.links-org-data-table){overflow-x:auto}
  .form-grid,.two-col,.settings-grid{min-width:0}
  input,select,textarea{font-size:16px}
  .login-shell{width:100%;min-height:100dvh;overflow:hidden}
  .login-panel{width:100%;padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important}
  .login-card{width:min(100%,520px);max-width:100%;box-sizing:border-box}
  .qx-mobile-wordmark-final,.qx-login-wordmark-final{max-width:100%!important;height:auto!important;object-fit:contain!important;clip-path:none!important}
}

@media(max-width:560px){
  .top-hero{min-height:122px!important;padding-inline:10px!important}
  .hero-copy{padding-right:92px!important}
  .hero-copy h1{font-size:clamp(22px,6.6vw,28px)!important}
  .hero-copy p{font-size:12px!important;max-width:34ch}
  .hero-tools{right:9px!important;gap:6px!important}
  .hero-tools .admin-search-btn{display:none!important}
  .hero-tools .tool-btn,.hero-tools .avatar.top{width:40px!important;height:40px!important;flex-basis:40px!important}
  .content-wrap{padding-inline:9px!important}
  .premium-card,.metric-card{border-radius:clamp(14px,4vw,20px)!important}
  .card-head{flex-wrap:wrap}
  .card-head>a{white-space:normal}
  .flash{overflow-wrap:anywhere}
  .worker-notification-actions,.worker-welcome-actions{width:100%}
  .worker-notification-actions .btn,.worker-welcome-actions .btn{width:100%}
}

@media(max-height:720px) and (min-width:900px){
  .sidebar{padding-top:9px!important;padding-bottom:9px!important}
  #sidebar .qx-brand-lockup-final{min-height:60px!important;padding-top:2px!important;padding-bottom:8px!important}
  #sidebar .qx-brand-wordmark-final{max-height:45px!important}
  .sidebar .nav-item{min-height:45px!important;height:45px!important}
  .sidebar .side-nav{gap:5px!important}
  .sidebar-art{display:none!important}
  .sidebar-bottom{padding-top:7px!important}
}

@media(orientation:landscape) and (max-height:520px) and (max-width:899px){
  body.nav-mode-drawer .sidebar{width:min(330px,70vw)!important}
  .sidebar .nav-item{min-height:45px!important;padding-block:7px!important}
  #sidebar .qx-brand-lockup-final{min-height:54px!important;padding-block:2px 7px!important}
  #sidebar .qx-brand-wordmark-final{max-height:43px!important}
  .sidebar-art{display:none!important}
}

@media(hover:hover) and (pointer:fine){
  .sidebar .nav-item:hover{transform:translateX(2px)}
  body.sidebar-collapsed .sidebar .nav-item:hover,
  body.nav-mode-compact:not(.medium-sidebar-open) .sidebar .nav-item:hover{transform:translateY(-1px)}
}

@media(prefers-reduced-motion:reduce){
  .sidebar,.app-main,.mobile-overlay,.sidebar .nav-item{transition:none!important;scroll-behavior:auto!important}
}


/* Qubexza Work v1.0.206 · Media pantalla: icono + nombre siempre visible. */
body.nav-mode-compact:not(.medium-sidebar-open) .sidebar{
  width:var(--qx-nav-medium)!important;
}
body.nav-mode-compact:not(.medium-sidebar-open) .app-main{
  margin-left:var(--qx-nav-medium)!important;
  width:calc(100% - var(--qx-nav-medium))!important;
}
body.nav-mode-compact:not(.medium-sidebar-open) #sidebar .nav-label{
  display:block!important;
}
body.nav-mode-compact:not(.medium-sidebar-open) #sidebar .nav-item{
  min-height:64px!important;
  height:auto!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  padding:7px 4px!important;
  gap:4px!important;
}
body.nav-mode-compact.medium-sidebar-open #sidebar .nav-item{
  flex-direction:row!important;
}