/* path: /files/public_html/app/assets/escritorio.css */
/* 0.1.0 Archivo creado: panel de escritorio de la App Biosafras. Desde 1024 px: barra lateral fija con las secciones y los módulos abiertos en el área
   principal (en el celular la app queda como siempre, a pantalla completa). Usa las variables de portal.css. */
.bd-lateral { display: none; }

@media (min-width: 1024px) {
  .ios-wrapper { padding-left: 272px; }
  .ios-wrapper > .bd-lateral {
    position: fixed; top: 0; left: 0; bottom: 0; width: 272px; z-index: 45;
    display: flex; flex-direction: column; gap: 10px; padding: 16px 12px;
    background: var(--bg-card); border-right: 1px solid var(--border-color); overflow-y: auto;
  }
  .bd-marca { display: flex; align-items: center; gap: 10px; padding: 2px 8px 6px; }
  .bd-marca img { border-radius: 9px; }
  .bd-marca strong { font-size: 1rem; }
  .bd-usuario { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--bg-main); }
  .bd-usuario > span:last-child { display: grid; min-width: 0; }
  .bd-usuario strong { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bd-usuario small { font-size: 0.72rem; color: var(--muted); }
  .bd-nav { display: grid; gap: 2px; flex: 1; align-content: start; }
  .bd-sec { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; margin: 14px 10px 4px; }
  .bd-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
    background: transparent; color: var(--text-color); font: inherit; font-size: 0.84rem; text-align: left; text-decoration: none; cursor: pointer;
  }
  .bd-item i { width: 18px; text-align: center; color: var(--muted); }
  .bd-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bd-item:hover { background: rgba(126,168,66,0.10); }
  .bd-item.activo { background: rgba(126,168,66,0.16); color: #3f6516; font-weight: 700; }
  html.oscuro .bd-item.activo { color: #c5e49b; }
  .bd-item.activo i { color: var(--verde); }
  .bd-item .bm-contador { background: var(--rojo); }
  .bd-item .bm-contador[hidden] { display: none; }
  .bd-pend { font-size: 0.62rem; color: var(--muted); font-weight: 600; }
  .bd-pie { display: grid; gap: 2px; border-top: 1px solid var(--border-color); padding-top: 8px; }
  .bd-item.salir, .bd-item.salir i { color: var(--rojo); }

  /* La barra de arriba del celular no hace falta: usuario, campanita y menú están en la lateral */
  .ios-top-bar { display: none !important; }
  .ios-container { max-width: 1180px; padding: 22px 28px; }
  .ios-apps-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* El módulo abierto ocupa el área principal, no toda la pantalla */
  .ios-spa-view { position: relative; inset: auto; z-index: auto; /* relative: queda por encima del velo del fondo (.ios-wrapper::before) */ min-height: 100vh; overflow: visible; background: transparent; }
  .ios-spa-header { padding: 14px 28px; justify-content: flex-start; }
  .ios-spa-header strong { font-size: 1.05rem; text-align: left; flex: 1; }
  .ios-spa-header > span:last-child { display: none; }
  #ios-spa-body { padding: 20px 28px; max-width: 1180px; margin: 0; }
}