/* ZETAPE Workspace — mobile application layer
   Keeps desktop behavior intact and turns the authenticated workspace into a mobile-first UI. */

@media (max-width: 900px) {
  html,body{max-width:100%;overflow-x:hidden}
  body{background:#f6f8fb;-webkit-text-size-adjust:100%}

  #appRoot.app{
    display:block;
    min-height:100dvh;
    padding-bottom:calc(76px + env(safe-area-inset-bottom));
  }

  /* Bottom app navigation */
  #appRoot .sidebar{
    display:block;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:40;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom));
    background:rgba(16,35,49,.98);
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -8px 24px rgba(16,35,49,.14);
  }
  #appRoot .sidebar>.brand,
  #appRoot .sidebar .nav-label,
  #appRoot .sidebar-foot{display:none!important}
  #appRoot .sidebar>div{width:100%}
  #appRoot .nav-list{
    width:100%;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
    gap:5px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  #appRoot .nav-list::-webkit-scrollbar{display:none}
  #appRoot .nav-btn{
    min-width:0;
    min-height:48px;
    padding:7px 6px;
    border-radius:10px;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#b9c6cf;
    font-size:11px;
    font-weight:700;
    line-height:1.15;
    white-space:normal;
  }
  #appRoot .nav-btn.active{
    background:rgba(255,255,255,.12);
    color:#fff;
  }

  /* Compact app header */
  #appRoot .main{min-height:100dvh;min-width:0}
  #appRoot .topbar{
    height:auto;
    min-height:62px;
    padding:9px 14px;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    z-index:30;
  }
  #appRoot .view-title{
    flex:1 1 auto;
    min-width:110px;
    font-size:14px;
    line-height:1.2;
  }
  #appRoot .user{margin-left:auto;gap:7px}
  #appRoot .user-meta{display:none}
  #appRoot .avatar{width:32px;height:32px;font-size:13px}
  #appRoot .logout-btn{font-size:0;padding:8px 10px;min-height:34px}
  #appRoot .logout-btn:after{content:"Salir";font-size:11px}

  /* Workspace switcher gets its own clean row */
  #appRoot .topbar .crmzp-workspace{
    order:3!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
  }
  #appRoot .topbar .crmzp-workspace-label{display:none!important}
  #appRoot .topbar .crmzp-workspace select,
  #appRoot .topbar .crmzp-workspace-pill{
    width:100%!important;
    max-width:none!important;
    min-height:38px;
    border-radius:10px!important;
    background:#f7f9fa!important;
    border-color:#e8ecef!important;
    font-size:12px!important;
  }

  /* Content rhythm */
  #appRoot .content{
    width:100%;
    max-width:none;
    padding:18px 14px 24px;
  }
  #appRoot .eyebrow{font-size:10px;letter-spacing:.08em}
  #appRoot h1{font-size:24px;line-height:1.15;margin:5px 0 7px}
  #appRoot .sub{font-size:13px;line-height:1.45}
  #appRoot .section{margin-top:20px}
  #appRoot .section-head{align-items:flex-start;margin-bottom:9px}

  /* KPI cards are compact enough to stay side-by-side */
  #appRoot .kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:18px;
  }
  #appRoot .kpi{padding:14px 13px;min-width:0}
  #appRoot .kpi-label{font-size:11px;line-height:1.25}
  #appRoot .kpi-value{
    font-size:24px;
    line-height:1.05;
    margin-top:7px;
    overflow-wrap:anywhere;
  }
  #appRoot .kpi-detail{font-size:10px;line-height:1.35;margin-top:5px}

  /* Director cards */
  #appRoot .director-grid{grid-template-columns:1fr;gap:10px;margin-top:16px}
  #appRoot .exec-card{padding:14px}
  #appRoot .exec-kpis{gap:8px;margin-top:12px}
  #appRoot .mini{padding:10px}
  #appRoot .mini-val{font-size:18px}

  /* Executive selector */
  #appRoot .view-as{
    margin-top:15px;
    padding:12px;
    align-items:stretch;
    flex-direction:column;
    gap:9px;
  }
  #appRoot .view-as select{width:100%;min-height:42px}

  /* Main client tables become mobile cards */
  #executiveView .table-wrap,
  #directorDetail .table-wrap{
    overflow:visible;
    background:transparent;
    border:0;
    box-shadow:none;
  }
  #executiveView .table,
  #directorDetail .table{
    display:block;
    width:100%;
    min-width:0;
  }
  #executiveView .table thead,
  #directorDetail .table thead{display:none}
  #executiveView .table tbody,
  #directorDetail .table tbody{
    display:grid;
    gap:10px;
  }
  #executiveView .table tr,
  #directorDetail .table tr{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 14px;
    padding:13px 14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 2px 10px rgba(16,24,40,.035);
  }
  #executiveView .table td,
  #directorDetail .table td{
    display:flex;
    min-width:0;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    padding:7px 0;
    border:0;
    font-size:13px;
  }
  #executiveView .table td:first-child,
  #directorDetail .table td:first-child{
    grid-column:1/-1;
    padding:2px 0 11px;
    margin-bottom:3px;
    border-bottom:1px solid #eef1f3;
  }
  #executiveView .table td:nth-child(n+2):before,
  #directorDetail .table td:nth-child(n+2):before{
    display:block;
    color:var(--muted);
    font-size:9px;
    line-height:1.1;
    font-weight:750;
    letter-spacing:.055em;
    text-transform:uppercase;
  }
  #executiveView .table td:nth-child(2):before,
  #directorDetail .table td:nth-child(2):before{content:"Facturación"}
  #executiveView .table td:nth-child(3):before,
  #directorDetail .table td:nth-child(3):before{content:"Meta"}
  #executiveView .table td:nth-child(4):before,
  #directorDetail .table td:nth-child(4):before{content:"Cumplimiento"}
  #executiveView .table td:nth-child(5):before,
  #directorDetail .table td:nth-child(5):before{content:"Satisfacción"}
  #executiveView .table td:nth-child(6):before,
  #directorDetail .table td:nth-child(6):before{content:"Estado"}
  #executiveView .client-link,
  #directorDetail .client-link{
    width:100%;
    font-size:16px;
    line-height:1.25;
    text-align:left;
  }

  /* Admin remains data-dense, but scrolls cleanly instead of breaking layout */
  #adminView .admin-card{padding:14px}
  #adminView .table-wrap{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  #adminView .admin-table{min-width:660px}
  #adminView .admin-toolbar{align-items:stretch}

  /* Client detail behaves like a native full-screen sheet */
  #clientModal.modal{display:block}
  #clientModal .modal-backdrop{display:none}
  #clientModal .modal-panel{
    width:100%;
    height:100dvh;
    padding:0 14px calc(22px + env(safe-area-inset-bottom));
    box-shadow:none;
  }
  #clientModal .modal-head{
    position:sticky;
    top:0;
    z-index:5;
    margin:0 -14px 14px;
    padding:14px 14px 11px;
    background:rgba(246,248,251,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  #clientModal .modal-head h2{font-size:23px}
  #clientModal .profile-grid{gap:10px}
  #clientModal .profile-card{padding:14px}
  #clientModal .result-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  #clientModal .result-item{padding:10px 8px;min-width:0}
  #clientModal .result-item strong{font-size:16px;overflow-wrap:anywhere}
  #clientModal .result-item span,
  #clientModal .result-item small{font-size:9px}
  #clientModal .identity-list{grid-template-columns:1fr}
  #clientModal .contact-row,
  #clientModal .contact-form{grid-template-columns:1fr}
  #clientModal input,
  #clientModal select,
  #clientModal textarea{width:100%;min-height:42px}
}

@media (max-width: 600px) {
  #appRoot .content{padding:16px 12px 20px}
  #appRoot .topbar{padding-left:12px;padding-right:12px}
  #adminView .admin-toolbar>.field,
  #adminView .admin-toolbar>.grow,
  #adminView .admin-toolbar>button{width:100%;min-width:0}
  #adminView .admin-toolbar input,
  #adminView .admin-toolbar select{width:100%;min-height:42px}
  #adminView .admin-toolbar>button{min-height:42px}
}

@media (max-width: 360px) {
  #appRoot .kpis{grid-template-columns:1fr}
  #clientModal .result-grid{grid-template-columns:1fr}
}