/* FAC OPS - Mobile admin/supervisor responsive shell */
.mobile-bottom-nav{display:none}
.mobile-drawer-backdrop{display:none}
.mobile-more-panel{display:none}
@media (max-width: 820px){
  body{background:#fff!important;overflow-x:hidden}
  .app:not(.employee-mode){display:block!important;min-height:100vh;background:#fff!important}
  .app:not(.employee-mode) .sidebar{
    position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:min(86vw,340px)!important;height:100vh!important;z-index:4000!important;
    transform:translateX(-104%);transition:transform .22s ease;box-shadow:20px 0 60px rgba(20,10,14,.22);border-right:1px solid rgba(139,15,38,.12);background:#fff!important;
  }
  .app:not(.employee-mode).mobile-menu-open .sidebar{transform:translateX(0)}
  .app:not(.employee-mode) .mobile-drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(20,10,14,.34);z-index:3990;backdrop-filter:blur(2px)}
  .app:not(.employee-mode).mobile-menu-open .mobile-drawer-backdrop{display:block}
  .app:not(.employee-mode) .main{width:100%!important;min-width:0!important;margin:0!important;padding:0 0 92px!important;display:block!important;background:#fff!important;overflow-x:hidden}
  .app:not(.employee-mode) .topbar{
    position:sticky!important;top:0!important;z-index:1200!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
    padding:14px 16px!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(14px);border-bottom:1px solid rgba(139,15,38,.09)!important;
  }
  .app:not(.employee-mode) .top-left{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important}
  .app:not(.employee-mode) .menu-btn{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;border-radius:12px!important;border:1px solid rgba(139,15,38,.12)!important;background:#fff!important;color:#7c1029!important;font-size:18px!important;flex:0 0 auto}
  .app:not(.employee-mode) #greeting{font-size:17px!important;line-height:1.15!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
  .app:not(.employee-mode) #todayLabel{font-size:11px!important;margin-top:4px!important;color:#776b70!important}
  .app:not(.employee-mode) .top-actions{display:flex!important;align-items:center!important;gap:8px!important;flex:0 0 auto!important}
  .app:not(.employee-mode) .date-control{height:38px!important;border-radius:12px!important;padding:0 8px!important;width:42px!important;overflow:hidden;display:flex!important;align-items:center!important;justify-content:center!important;background:#fff!important;border:1px solid rgba(139,15,38,.12)!important}
  .app:not(.employee-mode) .date-control input{position:absolute;opacity:0;width:42px;height:38px}
  .app:not(.employee-mode) .date-control span{font-size:16px!important;margin:0!important}
  .app:not(.employee-mode) .bell-btn{width:42px!important;height:38px!important;border-radius:12px!important;background:#fff!important;border:1px solid rgba(139,15,38,.12)!important;position:relative!important}
  .app:not(.employee-mode) .bell-btn span{position:absolute!important;right:-7px!important;top:-8px!important;min-width:19px!important;height:19px!important;font-size:10px!important;background:#c50f36!important;color:#fff!important;border-radius:999px!important;display:grid!important;place-items:center!important}
  .app:not(.employee-mode) #refreshBtn,.app:not(.employee-mode) #logoutBtn{display:none!important}
  .app:not(.employee-mode) .panel{padding:14px!important;display:none!important;max-width:100%!important;overflow-x:hidden!important}
  .app:not(.employee-mode) .panel.show{display:block!important}
  .app:not(.employee-mode) .footer{display:none!important}
  .app:not(.employee-mode) .page-card,
  .app:not(.employee-mode) .fac-ai-card,
  .app:not(.employee-mode) .dash-centers,
  .app:not(.employee-mode) .ops-center-card{border-radius:20px!important;box-shadow:0 12px 28px rgba(30,20,25,.045)!important}

  /* Dashboard mobile: one-column, app-like */
  #panelDashboard .fac-ai-layout,#panelDashboard .fac-ai-bottom{display:block!important}
  #panelDashboard .fac-ai-side{display:none!important}
  #panelDashboard .dash-centers{padding:16px!important;border-radius:22px!important;background:#fff!important}
  #panelDashboard .dash-centers-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;margin-bottom:14px!important}
  #panelDashboard .dash-centers-head h2{font-size:21px!important;margin:0 0 4px!important}
  #panelDashboard .dash-centers-head p{font-size:12px!important;line-height:1.35!important}
  #panelDashboard .dash-center-actions{display:none!important}
  #panelDashboard .dash-center-kpis{grid-template-columns:1fr 1fr!important;gap:10px!important;margin-bottom:14px!important}
  #panelDashboard .dash-center-kpi{min-height:96px!important;border-radius:17px!important;padding:14px!important}
  #panelDashboard .dash-center-kpi span{font-size:10px!important}
  #panelDashboard .dash-center-kpi b{font-size:25px!important}
  #panelDashboard .dash-center-kanban{display:block!important;margin-top:8px!important}
  #panelDashboard .dash-center-column{display:none!important;min-height:auto!important;padding:12px!important;border-radius:20px!important}
  body.fac-mobile-tab-pending #panelDashboard .dash-center-column.warn,
  body.fac-mobile-tab-active #panelDashboard .dash-center-column.ok,
  body.fac-mobile-tab-done #panelDashboard .dash-center-column.blue{display:block!important}
  #panelDashboard .dash-center-column-list{max-height:none!important;gap:12px!important;overflow:visible!important;padding-right:0!important}
  #panelDashboard .dash-center-card{border-radius:18px!important;padding:14px!important;min-height:116px!important}
  #panelDashboard .dash-center-metrics{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  #panelDashboard .dash-center-next{font-size:12px!important}
  .fac-mobile-tabs{display:flex;gap:8px;overflow:auto;padding:2px 0 12px;margin:0 0 4px;scrollbar-width:none}
  .fac-mobile-tabs::-webkit-scrollbar{display:none}
  .fac-mobile-tabs button{flex:0 0 auto;border:0;background:transparent;border-bottom:2px solid transparent;color:#33272c;font-weight:900;padding:10px 6px;font-size:13px;white-space:nowrap;cursor:pointer}
  .fac-mobile-tabs button.active.warn{color:#b57900;border-color:#e0a008}.fac-mobile-tabs button.active.ok{color:#087a42;border-color:#0fa45a}.fac-mobile-tabs button.active.blue{color:#0e55b7;border-color:#1264d6}
  .fac-mobile-tabs .count{display:inline-flex;margin-left:5px;min-width:20px;height:20px;border-radius:999px;align-items:center;justify-content:center;background:#f4edf0;color:#8b0f26;font-size:11px}

  /* Centros operativos / servicios responsive */
  .ops-hero{padding:18px 16px 12px!important;display:flex!important;align-items:flex-start!important;gap:10px!important}
  .ops-hero h2{font-size:24px!important;margin:2px 0!important}
  .team-badge{padding:8px 10px!important;font-size:11px!important}
  .ops-kpi-grid{grid-template-columns:1fr 1fr!important;padding:0 16px 12px!important;gap:9px!important}
  .ops-kpi{border-radius:16px!important;padding:12px!important;min-height:76px!important}.ops-kpi b{font-size:22px!important}.ops-kpi span{font-size:10px!important}.ops-kpi small{font-size:10px!important}
  .ops-toolbar{padding:0 16px 12px!important;display:flex!important;flex-direction:row!important}.ops-toolbar input{height:42px!important;min-width:0!important}.ops-toolbar button{min-height:40px!important;padding:8px 10px!important;font-size:11px!important}
  .ops-today-grid{grid-template-columns:1fr!important;padding:0 16px 14px!important}.ops-employee-card{border-radius:17px!important;padding:13px!important}.ops-card-metrics{grid-template-columns:1fr 1fr 1fr!important}.team-emp-actions{display:grid!important;grid-template-columns:1fr 1fr!important}.team-emp-actions button{min-height:36px!important}
  .ops-week-grid{display:block!important;padding:0 16px 20px!important;overflow:visible!important}.ops-day-col{min-width:0!important;margin-bottom:12px!important}

  /* Generic grids/tables */
  .mini-kpis,.service-card-grid,.client-grid,.employee-grid,.cards-grid{grid-template-columns:1fr 1fr!important}
  .table-wrap{overflow:auto!important;-webkit-overflow-scrolling:touch!important}
  table.full{min-width:760px!important}
  .modal-card,.service-modal-card{width:calc(100vw - 22px)!important;max-width:calc(100vw - 22px)!important;max-height:90vh!important;overflow:auto!important;border-radius:22px!important}

  /* bottom navigation */
  .app:not(.employee-mode) .mobile-bottom-nav{display:grid!important;position:fixed;left:0;right:0;bottom:0;z-index:3000;grid-template-columns:repeat(5,1fr);height:72px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid rgba(139,15,38,.10);box-shadow:0 -10px 28px rgba(30,20,25,.08);padding:7px 8px max(7px,env(safe-area-inset-bottom))}
  .mobile-bottom-nav button{border:0;background:transparent;color:#6d6066;font-weight:900;font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:14px;min-width:0;cursor:pointer}.mobile-bottom-nav button span{font-size:20px;line-height:1}.mobile-bottom-nav button.active{color:#a20b2d;background:#fff1f5}.mobile-bottom-nav button.fab{background:#a20b2d;color:#fff;border-radius:999px;width:54px;height:54px;margin:-16px auto 0;box-shadow:0 12px 26px rgba(162,11,45,.26);font-size:0}.mobile-bottom-nav button.fab span{font-size:28px}.mobile-bottom-nav button.fab.active{background:#8b0f26;color:#fff}
  .mobile-more-panel{position:fixed;left:12px;right:12px;bottom:84px;z-index:3010;background:#fff;border:1px solid rgba(139,15,38,.12);border-radius:22px;box-shadow:0 24px 60px rgba(30,20,25,.20);padding:14px;display:none}.mobile-more-panel.open{display:block}.mobile-more-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 12px}.mobile-more-user{display:flex;align-items:center;gap:10px}.mobile-more-user .avatar{width:40px;height:40px}.mobile-more-panel button{width:100%;min-height:44px;border:0;background:#fff;text-align:left;border-radius:14px;padding:10px 12px;font-weight:900;color:#21181c}.mobile-more-panel button:active,.mobile-more-panel button:hover{background:#fff3f6}.mobile-more-panel .danger{color:#c70d31}.mobile-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.mobile-more-close{width:38px!important;min-height:38px!important;text-align:center!important;padding:0!important;color:#8b0f26!important;background:#fff3f6!important}
}
@media (max-width: 420px){
  .app:not(.employee-mode) .panel{padding:10px!important}
  #panelDashboard .dash-center-kpis,.ops-kpi-grid,.mini-kpis,.service-card-grid,.client-grid,.employee-grid,.cards-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  #greeting{max-width:185px!important}
}

/* RC7.2 - FIX login mobile: el shell mobile admin no debe bloquear el formulario */
#loginView:not(.hidden) ~ .mobile-bottom-nav,
#loginView:not(.hidden) ~ .mobile-more-panel,
#loginView:not(.hidden) ~ .mobile-drawer-backdrop{
  display:none!important;
  pointer-events:none!important;
}
.login-view::before,
.login-view::after{
  pointer-events:none!important;
}
.login-card,
.login-card *{
  pointer-events:auto!important;
}
.login-card input,
.login-card button{
  position:relative!important;
  z-index:30!important;
  -webkit-user-select:text!important;
  user-select:text!important;
  touch-action:manipulation!important;
}
@media (max-width:820px){
  .login-view{min-height:100dvh!important;padding:18px!important;display:grid!important;place-items:center!important;}
  .login-card{width:100%!important;max-width:420px!important;margin:0!important;padding:26px 20px!important;border-radius:24px!important;z-index:50!important;}
  .login-card input{height:48px!important;font-size:16px!important;} /* evita zoom/bloqueo raro en iPhone */
  .login-card button{height:50px!important;font-size:16px!important;}
}