/* MRAPI HUB mobile layer v1.5.36-mobile
   Applies to Hub, Bandeja, CRM, Contactos, Agenda, Recontacto, Mi Estado and Usuarios.
   Desktop stays unchanged; rules activate mainly <= 850px. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
button,a,select,input,textarea{touch-action:manipulation}
@media(max-width:850px){
  :root{--mrapi-mobile-nav-h:62px}
  html,body{width:100%;max-width:100vw;overscroll-behavior-x:none}
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  button,.btn,.icon-btn,.miniBtn,.quickFilter,.tab{min-height:40px}
  input,select,textarea{font-size:16px!important;max-width:100%}
  img{max-width:100%}

  /* HUB home */
  .hubTop{padding-top:env(safe-area-inset-top);height:calc(58px + env(safe-area-inset-top))!important;position:sticky;top:0;z-index:50}
  .hubMain{padding:12px 10px calc(84px + env(safe-area-inset-bottom))!important}
  .hero{padding:18px 16px!important;border-radius:16px!important}
  .hero h1{font-size:28px!important;line-height:1.06!important;margin:8px 0 10px!important}
  .hero p{font-size:13px!important;line-height:1.45!important}
  .hubGrid{grid-template-columns:1fr!important;gap:10px!important}
  .hubModule{min-height:0!important;padding:16px!important;border-radius:16px!important}
  .hubModule h2{font-size:20px!important;margin:2px 0 5px!important}
  .hubModule p{font-size:12px!important;line-height:1.4!important}
  .hubStatus{grid-template-columns:1fr!important;gap:8px!important}
  .hubMobileNav{display:grid!important;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:90;background:#20242b;border-top:1px solid rgba(255,255,255,.08);padding:5px 6px calc(5px + env(safe-area-inset-bottom));min-height:var(--mrapi-mobile-nav-h)}
  .hubMobileNav a{color:#c9d0d2;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9px;font-weight:800;min-width:0}
  .hubMobileNav a b{font-size:18px;line-height:20px}.hubMobileNav a.active{color:var(--tenant-primary,#57b530)}

  /* Bandeja */
  .shell{height:100dvh!important;max-width:100vw;overflow:hidden}
  .scbTopbar{padding-top:env(safe-area-inset-top)!important;height:calc(56px + env(safe-area-inset-top))!important}
  .shell{grid-template-rows:calc(56px + env(safe-area-inset-top)) auto minmax(0,1fr)!important}
  .kpiStrip{display:flex!important;overflow-x:auto;scroll-snap-type:x proximity;gap:7px!important;padding:7px 8px!important;scrollbar-width:none}
  .kpiStrip::-webkit-scrollbar{display:none}.kpiCard{flex:0 0 44vw;min-width:145px;scroll-snap-align:start}
  .shell.chatOpen .kpiStrip{display:none!important}
  .shell.chatOpen{grid-template-rows:calc(56px + env(safe-area-inset-top)) minmax(0,1fr)!important}
  .workspace{width:100vw;min-width:0}
  .sidebar,.chat{width:100%;max-width:100vw}
  .sideHead{padding:10px!important}.sideActions{display:grid!important;grid-template-columns:1fr 1fr}.searchRow input{height:42px}
  .quickFilters{margin-left:-2px;margin-right:-2px}.ownerFilterBtn{min-height:42px}
  .item{padding:12px 11px!important}.name{font-size:14px}.preview{font-size:12px}
  .chatHead{gap:6px;align-items:flex-start!important;min-height:62px!important;height:auto!important;overflow:visible}
  .chatIdentity{min-width:0;flex:1}.chatIdentity>div:last-child{min-width:0}.chatTitle{display:block;max-width:58vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chatActions{display:flex;max-width:46vw;overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none;padding-bottom:2px}.chatActions::-webkit-scrollbar{display:none}.chatActions>*{flex:0 0 auto}
  #backBtn{min-width:40px;padding:7px!important}.avatarCircle{flex:0 0 auto}
  .adContext{max-height:86px!important}.multiLineAlert{font-size:11px}.multiLineAlert button{min-height:36px;flex:0 0 auto}
  .messages{padding:9px!important;overscroll-behavior:contain}.msgRow{margin:6px 0}.bubble{max-width:92%!important;padding:9px 10px!important;border-radius:13px!important}
  .composer{padding:7px 8px calc(8px + env(safe-area-inset-bottom))!important}.composerTools{display:flex!important;gap:6px!important;overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}.composerTools::-webkit-scrollbar{display:none}.composerTools>*{flex:0 0 auto}.composerTools select{max-width:48vw!important}.attachButton,.audioRecordBtn,.composerTools .btn{min-height:38px;display:inline-flex!important;align-items:center}
  .modernComposer{grid-template-columns:minmax(0,1fr) 44px!important}.modernComposer textarea{min-height:44px!important;max-height:112px!important}.sendCircle{width:44px!important;height:44px!important;min-width:44px!important}
  .crmPanel{width:100vw!important;max-width:100vw!important;top:calc(56px + env(safe-area-inset-top))!important;bottom:0!important}.crmPanelBody{padding-bottom:calc(74px + env(safe-area-inset-bottom))!important}
  .lineModalBack{padding:0!important;align-items:flex-end!important}.lineModal,.ticketModal{width:100vw!important;max-width:100vw!important;max-height:92dvh!important;border-radius:20px 20px 0 0!important;padding-bottom:env(safe-area-inset-bottom)}
  .mobileBottom{height:calc(58px + env(safe-area-inset-bottom))!important;padding-bottom:env(safe-area-inset-bottom)}
  .shell.chatOpen .mobileBottom{display:none!important}

  /* CRM pipeline */
  .crm-shell>.topbar{padding-top:env(safe-area-inset-top)!important;height:calc(58px + env(safe-area-inset-top))!important;position:sticky;top:0;z-index:60}
  .crm-main{padding:10px 9px calc(82px + env(safe-area-inset-bottom))!important;max-width:100vw;overflow-x:hidden}
  .page-head{gap:8px}.page-head h1{font-size:22px!important}.crmModuleBar{margin-bottom:8px!important}
  .stats{gap:6px!important}.stat{min-width:0}.stat-label{font-size:9px!important}.stat-value{font-size:18px!important}
  .filters{top:calc(64px + env(safe-area-inset-top))!important;left:8px!important;right:8px!important;max-height:calc(100dvh - 90px);overflow:auto}
  .kanban-wrap,.list-view{max-width:100%;overflow-x:hidden}.deal-card{border-radius:13px!important}.deal-row{min-width:0}
  .drawer{max-width:100vw!important;height:100dvh!important}.drawer-body{overflow-x:hidden}.drawer-actions{padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}
  .modal-backdrop{align-items:flex-end!important;padding:0!important}.stage-modal{width:100vw!important;max-width:100vw!important;border-radius:20px 20px 0 0!important;max-height:92dvh!important;padding-bottom:env(safe-area-inset-bottom)}
  .bottom-nav{min-height:calc(62px + env(safe-area-inset-bottom))!important;padding-bottom:env(safe-area-inset-bottom)!important}

  /* CRM tools: Contactos, Agenda, Mi Estado, Usuarios */
  .tools-top{padding-top:env(safe-area-inset-top)!important;height:calc(58px + env(safe-area-inset-top))!important;position:sticky;top:0;z-index:60}
  .tools-main{padding:10px 9px calc(82px + env(safe-area-inset-bottom))!important;max-width:100vw;overflow-x:hidden}
  .tools-head{gap:8px}.tools-head h1{font-size:22px!important}.tools-head>.btn,.tools-head>a.btn{width:100%;text-align:center}
  .quick-modules{margin-left:-2px;margin-right:-2px;scrollbar-width:none}.quick-modules::-webkit-scrollbar{display:none}
  .toolbar{gap:7px!important}.toolbar>*{min-width:0!important}.tabs{overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{white-space:nowrap}
  .card{border-radius:14px!important}.agenda-grid{grid-template-columns:1fr!important}
  .table-wrap{overflow:visible!important}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.row-actions .btn{flex:1 1 auto}
  .modal-back{padding:0!important;align-items:flex-end!important}.modal{width:100vw!important;max-width:100vw!important;border-radius:20px 20px 0 0!important;max-height:92dvh!important;padding-bottom:env(safe-area-inset-bottom)}

  /* Recontacto */
  .dueTop{padding-top:env(safe-area-inset-top)!important;height:calc(58px + env(safe-area-inset-top))!important;position:sticky;top:0;z-index:60}
  .dueMain{padding:10px 9px calc(82px + env(safe-area-inset-bottom))!important;overflow-x:hidden}
  .dueHead{align-items:flex-start!important;flex-direction:column!important;gap:8px}.dueHead h1{font-size:22px!important}.dueModules{scrollbar-width:none}.dueModules::-webkit-scrollbar{display:none}
  .dueFilters,.sendGrid,.campaignEditGrid,.campaignCreateOptions{grid-template-columns:1fr!important}.dueStats{grid-template-columns:1fr 1fr!important}
  .dueInfo{gap:8px;flex-direction:column}.dueRow{grid-template-columns:28px minmax(0,1fr)!important}.dueDateCell,.rowActions{grid-column:2!important}.rowActions{justify-content:flex-start!important;flex-wrap:wrap}
  .dueModalBack{padding:0!important;align-items:flex-end!important}.dueModal{width:100vw!important;max-width:100vw!important;max-height:92dvh!important;border-radius:20px 20px 0 0!important;padding-bottom:env(safe-area-inset-bottom)}

  /* Generic resilience */
  [class*="Grid"],[class*="grid"]{max-width:100%}
  pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
}
@media(max-width:420px){
  .kpiCard{flex-basis:48vw;min-width:138px}.bubble{max-width:94%!important}.chatTitle{max-width:52vw}.chatActions{max-width:42vw}
  .stats,.dueStats,.status-summary-grid,.quality-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:360px){
  .stats,.dueStats,.status-summary-grid,.quality-grid{grid-template-columns:1fr!important}.kpiCard{flex-basis:70vw}
}

/* v1.5.38 — Mobile App mode: one screen at a time, no stacked desktop panes */
@media(max-width:850px){
  body{background:#fff;overflow:hidden!important}
  .shell{height:100dvh!important;display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;background:#fff}
  .scbTopbar{height:52px!important;min-height:52px!important;padding:env(safe-area-inset-top) 10px 0!important;border-bottom:1px solid #e8ecef;background:#fff!important;color:#111827!important}
  .scbTopbar .tenantBrand{color:#111827!important}.scbTopbar .tenantBrand img{width:34px!important;height:34px!important;object-fit:contain}.scbTopbar .tenantBrand b{font-size:14px!important}.scbTopbar .tenantBrand small{font-size:9px!important;color:#7b8490!important}
  .scbTopbar .mainNav,.scbTopbar .statusOnline,.scbTopbar .versionPill,.scbTopbar .userName{display:none!important}.scbTopbar #logoutBtn{min-height:36px!important;padding:7px 11px!important;font-size:12px!important}
  .kpiStrip{display:none!important}
  .workspace{display:block!important;height:100%!important;min-height:0!important;overflow:hidden!important;background:#fff!important}
  .sidebar,.chat{height:100%!important;min-height:0!important;width:100%!important;max-width:none!important}
  .shell:not(.chatOpen) .sidebar{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important}
  .shell:not(.chatOpen) .chat{display:none!important}
  .shell.chatOpen .sidebar{display:none!important}
  .shell.chatOpen .chat{display:grid!important;grid-template-rows:auto auto auto minmax(0,1fr) auto!important}
  .crmPanel{display:none!important}

  /* conversation list = native inbox screen */
  .sideHead{padding:10px 12px 8px!important;background:#fff;position:relative;z-index:2}
  .sideTitleRow{margin-bottom:7px!important}.sideTitleRow strong{font-size:19px!important}.sideTitleRow span:not(.readsTiny){font-size:11px!important}.readsTiny{font-size:9px!important}
  .sideActions{display:grid!important;grid-template-columns:1fr auto!important;gap:7px!important;margin:7px 0!important}.sideActions .compactBtn{min-height:40px!important;padding:8px 12px!important}
  .searchRow{gap:7px!important}.searchRow input{height:42px!important;border-radius:12px!important}.searchRow button{width:42px!important;padding:0!important}
  .quickFilters{display:flex!important;gap:6px!important;overflow-x:auto!important;flex-wrap:nowrap!important;margin:8px 0 7px!important;padding-bottom:2px!important}.quickFilter{min-height:34px!important;padding:6px 11px!important;font-size:11px!important;white-space:nowrap!important}
  .ownerFilterBtn{height:40px!important;border-radius:11px!important}
  .list{min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .item{padding:11px 12px!important;min-height:72px!important}.itemTop{align-items:center!important}.name{font-size:14px!important}.preview{font-size:12px!important;margin-top:3px!important}.tags{margin-top:6px!important;gap:4px!important}.tag2,.multiLineBadge{font-size:9px!important}
  .more{padding:8px 12px calc(70px + env(safe-area-inset-bottom))!important;background:#fff}.more button{height:42px!important}

  /* chat = full-screen messenger */
  .chatHead{height:auto!important;min-height:58px!important;padding:7px 8px!important;background:#fff!important;border-bottom:1px solid #e8ecef!important;align-items:center!important;gap:6px!important}
  .chatIdentity{display:grid!important;grid-template-columns:38px 34px minmax(0,1fr)!important;align-items:center!important;gap:7px!important;flex:1!important;min-width:0!important}
  #backBtn{display:inline-flex!important;width:38px!important;height:38px!important;align-items:center!important;justify-content:center!important;padding:0!important;border-radius:12px!important;font-size:20px!important}
  .avatarCircle{width:34px!important;height:34px!important;min-width:34px!important;font-size:11px!important}
  .chatIdentity>div:last-child{min-width:0!important}.chatTitle{font-size:14px!important;max-width:none!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.chatSub{font-size:9.5px!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin-top:2px!important}.lineManageBtn{margin-top:3px!important;min-height:26px!important;padding:2px 7px!important;font-size:9px!important}
  .chatActions{display:flex!important;gap:5px!important;max-width:43vw!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding:0!important}.chatActions .btn{min-height:34px!important;padding:6px 8px!important;font-size:9.5px!important;border-radius:10px!important}.modeButtons{gap:4px!important}.crmMobileBtn{display:none!important}
  .adContext{padding:5px 7px!important;max-height:74px!important;overflow:auto!important}.adContext .ad-card{padding:5px 7px!important;gap:6px!important}.adContext .ad-card img{width:38px!important;height:38px!important}.adContext .ad-kicker{font-size:8px!important}.adContext .ad-copy strong{font-size:10px!important}.adContext .ad-copy p{font-size:9px!important;line-height:1.15!important;max-height:22px!important}.adContext .ad-meta span{font-size:8px!important;padding:2px 4px!important}
  .multiLineAlert{margin:0!important;border-radius:0!important;border-left:0!important;border-right:0!important;padding:6px 8px!important;min-height:0!important}.multiLineAlert b{font-size:10px!important}.multiLineAlert span{font-size:9px!important;line-height:1.2!important;max-height:24px!important;overflow:hidden!important}.multiLineAlert button{min-height:30px!important;padding:5px 8px!important;font-size:9px!important}
  .messages{padding:8px 8px 10px!important;background:#f7faf6!important;-webkit-overflow-scrolling:touch!important}.msgRow{margin:5px 0!important}.bubble{max-width:88%!important;padding:8px 9px!important;border-radius:14px!important}.msgText{font-size:13px!important;line-height:1.35!important}.msgMeta{font-size:8.5px!important;margin-top:4px!important}.msgActor{font-size:9px!important;margin-bottom:3px!important}
  .composer{padding:6px 7px calc(7px + env(safe-area-inset-bottom))!important;background:#fff!important;border-top:1px solid #e4e9ec!important;min-height:0!important}
  .composerTools{display:grid!important;grid-template-columns:auto auto minmax(0,1fr) auto!important;gap:5px!important;overflow:visible!important;margin-bottom:5px!important;align-items:center!important}.composerTools>*{min-width:0!important}.attachButton,.audioRecordBtn,.composerTools .btn{min-height:34px!important;height:34px!important;padding:5px 8px!important;font-size:10px!important;white-space:nowrap!important}.composerTools select{height:34px!important;max-width:100%!important;width:100%!important;font-size:11px!important;padding:4px 28px 4px 8px!important}.composerTools #fileInput{display:none!important}
  .modernComposer{display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;gap:6px!important}.modernComposer textarea{min-height:42px!important;max-height:90px!important;border-radius:16px!important;padding:10px 12px!important;font-size:16px!important}.sendCircle{width:42px!important;height:42px!important;min-width:42px!important;border-radius:50%!important}.composeMeta{display:none!important}
  .newMsgBadge{bottom:92px!important;right:12px!important}

  /* Bottom navigation only on list / modules; chat gets maximum vertical room */
  .mobileBottom{display:grid!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:100!important;height:calc(58px + env(safe-area-inset-bottom))!important;background:#20252a!important;padding-bottom:env(safe-area-inset-bottom)!important}
  .shell.chatOpen .mobileBottom{display:none!important}

  /* Modals as sheets */
  .lineModalBack,.modal-backdrop,.modal-back,.dueModalBack{padding:0!important;align-items:flex-end!important}.lineModal,.modal,.stage-modal,.dueModal,.ticketModal{width:100vw!important;max-width:100vw!important;max-height:88dvh!important;border-radius:18px 18px 0 0!important}
}

@media(max-width:390px){
  .chatActions{max-width:39vw!important}.chatActions #deskOpenBtn{display:none!important}.composerTools{grid-template-columns:auto auto minmax(0,1fr)!important}.composerTools #templateBtn{grid-column:1/-1;width:100%!important}.adContext{max-height:66px!important}
}