/*
 * ZIVO · PWA instalada en teléfono.
 * El modo PWA y el tamaño CSS del viewport son cosas distintas. Este archivo
 * adapta el marco global y navegación sin cambiar los estilos de una laptop.
 * Las pantallas específicas siguen usando sus estilos responsivos propios.
 */
html.zivo-pwa-phone,
html.zivo-pwa-phone body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
html.zivo-pwa-phone app-root,
html.zivo-pwa-phone .app-layout {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
html.zivo-pwa-phone .app-layout .page-content,
html.zivo-pwa-phone .app-layout.sidebar-oculto .page-content {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  padding: calc(58px + env(safe-area-inset-top, 0px)) 0
    env(safe-area-inset-bottom, 0px) !important;
}
html.zivo-pwa-phone .page-content .window-shell {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: calc(100dvh - 58px);
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.zivo-pwa-phone .page-content .window-titlebar {
  display: none !important;
}
html.zivo-pwa-phone .page-content .window-body {
  min-width: 0 !important;
  width: 100% !important;
  min-height: calc(100dvh - 58px);
  max-height: none !important;
  margin-top: 0 !important;
  overflow: visible !important;
}
html.zivo-pwa-phone .app-layout .mobile-sidebar-backdrop {
  display: block;
  position: fixed;
  inset: calc(58px + env(safe-area-inset-top, 0px)) 0 0;
  width: 100%;
  height: auto;
  z-index: 998;
  border: 0;
  background: rgba(2, 6, 23, .58);
}
/* Cabecera compacta y sin acciones textuales de escritorio. */
html.zivo-pwa-phone app-top-bar .top-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: calc(58px + env(safe-area-inset-top, 0px)) !important;
  min-height: 58px !important;
  padding: env(safe-area-inset-top, 0px)
    max(8px, env(safe-area-inset-right, 0px))
    0 max(60px, env(safe-area-inset-left, 0px)) !important;
  gap: 6px !important;
  justify-content: flex-end;
  overflow: visible;
}
html.zivo-pwa-phone app-top-bar .btn-support span,
html.zivo-pwa-phone app-top-bar .btn-lms span,
html.zivo-pwa-phone app-top-bar .usuario-info > span {
  display: none !important;
}
html.zivo-pwa-phone app-top-bar .btn-directory,
html.zivo-pwa-phone app-top-bar #zivo-pwa-install-button,
html.zivo-pwa-phone app-top-bar .btn-lms,
html.zivo-pwa-phone app-top-bar .btn-support,
html.zivo-pwa-phone app-top-bar .notificaciones-container,
html.zivo-pwa-phone app-top-bar .usuario-info {
  box-sizing: border-box;
  min-width: 38px !important;
  width: 38px !important;
  min-height: 38px !important;
  height: 38px !important;
  flex: 0 0 38px;
  padding: 0 !important;
  justify-content: center !important;
}
html.zivo-pwa-phone app-top-bar .bandeja {
  position: fixed !important;
  top: calc(64px + env(safe-area-inset-top, 0px));
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  max-width: none !important;
}
html.zivo-pwa-phone app-top-bar .directory-modal {
  position: fixed !important;
  top: calc(58px + env(safe-area-inset-top, 0px)) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: calc(100dvh - 58px) !important;
}
/* Menú de aplicaciones móvil, incluso si el viewport viene en "escritorio". */
html.zivo-pwa-phone app-sidebar {
  --sidebar-width: min(92vw, 390px);
}
html.zivo-pwa-phone app-sidebar .sidebar-classic,
html.zivo-pwa-phone app-sidebar .desktop-toggle {
  display: none !important;
}
html.zivo-pwa-phone app-sidebar .sidebar-mobile {
  display: flex !important;
}
html.zivo-pwa-phone app-sidebar .mobile-toggle {
  display: block !important;
  width: 22px;
  height: 22px;
}
html.zivo-pwa-phone app-sidebar .menu-toggle {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: max(10px, env(safe-area-inset-left, 0px));
  display: grid !important;
  place-items: center;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  z-index: 1300;
}
html.zivo-pwa-phone app-sidebar .sidebar {
  top: calc(58px + env(safe-area-inset-top, 0px)) !important;
  bottom: 0;
  height: auto !important;
  max-width: min(92vw, 390px);
}
html.zivo-pwa-phone app-sidebar .app-launcher,
html.zivo-pwa-phone app-sidebar .app-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px;
}
html.zivo-pwa-phone app-sidebar .menu-group.expanded {
  grid-column: 1 / -1;
}
/* No aplastar los formularios o tablas: permitir desplazamiento local. */
html.zivo-pwa-phone .window-body table,
html.zivo-pwa-phone .window-body .table-wrapper {
  max-width: 100%;
}
html.zivo-pwa-phone .window-body input,
html.zivo-pwa-phone .window-body select,
html.zivo-pwa-phone .window-body textarea {
  max-width: 100%;
}

/* v1.1.54 · El modo teléfono se aplica también en el navegador cuando pide
   "sitio de escritorio". No depende de @media (max-width: 768px). */
html.zivo-phone-ui,
html.zivo-phone-ui body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.zivo-phone-ui app-sidebar .sidebar {
  border-top: 1px solid rgba(34,211,238,.15);
  border-radius: 0 16px 16px 0;
  border-right-color: rgba(34,211,238,.18);
  box-shadow: 16px 0 44px rgba(2,6,23,.4);
}
html.zivo-phone-ui app-sidebar .sidebar-header {
  padding: 12px 14px 8px;
}
html.zivo-phone-ui app-sidebar .sidebar-scroll {
  padding: 12px 12px max(18px, env(safe-area-inset-bottom, 0px));
}
html.zivo-phone-ui app-sidebar .app-card {
  min-height: 104px;
  height: 100%;
  grid-template-columns: minmax(0,1fr) 20px;
  grid-template-rows: 42px auto;
  align-content: start;
  gap: 7px 4px;
  padding: 11px;
  border-radius: 15px;
}
html.zivo-phone-ui app-sidebar .menu-group.expanded .app-card {
  min-height: 72px;
  grid-template-columns: 42px minmax(0,1fr) 22px;
  grid-template-rows: auto;
  align-items: center;
}
html.zivo-phone-ui app-sidebar .app-icon {
  width: 42px;
  height: 42px;
}
html.zivo-phone-ui app-sidebar .app-card-copy {
  grid-column: 1 / -1;
  align-self: end;
  min-width: 0;
}
html.zivo-phone-ui app-sidebar .menu-group.expanded .app-card-copy {
  grid-column: auto;
  align-self: center;
}
html.zivo-phone-ui app-sidebar .app-card-copy strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: .78rem;
}
html.zivo-phone-ui app-sidebar .app-list {
  padding: 8px 5px;
}
html.zivo-phone-ui app-sidebar .app-list li + li {
  margin-top: 0;
}
html.zivo-phone-ui app-sidebar .mobile-subgroup {
  grid-column: 1 / -1;
}
html.zivo-phone-ui app-sidebar .mobile-subgroup-children {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
}
html.zivo-phone-ui app-sidebar .app-link {
  min-height: 75px;
  height: 100%;
  grid-template-columns: 30px minmax(0,1fr);
  grid-template-rows: 30px auto;
  gap: 5px 7px;
  padding: 9px;
}
html.zivo-phone-ui app-sidebar .app-link-copy {
  grid-column: 1 / -1;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: .72rem;
}
html.zivo-phone-ui app-sidebar .launch-icon {
  display: none;
}
html.zivo-phone-ui app-top-bar .top-bar {
  align-items: center;
  background: rgba(7,16,29,.97);
  border-bottom: 1px solid rgba(34,211,238,.18);
  box-shadow: 0 7px 20px rgba(2,6,23,.3);
}
html.zivo-phone-ui app-top-bar .bandeja-inner {
  max-height: calc(100dvh - 78px);
}
html.zivo-phone-ui .app-layout .window-body {
  overflow-x: hidden;
}
/* La navegación y los diálogos nunca deben medir lo mismo que el escritorio. */
html.zivo-phone-ui .app-layout .page-content .window-shell,
html.zivo-phone-ui .app-layout .page-content .window-body {
  box-sizing: border-box;
  max-width: 100%;
}
@media (orientation: portrait) {
  html.zivo-phone-ui app-sidebar .app-list {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}