/* Preview de marco institucional: sidebar fijo + encabezado con breadcrumbs */
@media (min-width: 769px){
  .screen.active#screen-app{background:#f4f6fa!important;gap:0!important;padding:0!important}
  .screen.active#screen-app .sidebar{
    height:100vh!important;top:0!important;margin:0!important;border-radius:0!important;
    box-shadow:none!important;border-right:1px solid rgba(255,255,255,.14)!important
  }
  .screen.active#screen-app .main{
    height:100vh!important;margin:0!important;border-radius:0!important;background:#f4f6fa!important
  }
  .topbar{
    min-height:78px!important;padding:12px 30px!important;background:#fff!important;
    border-bottom:1px solid #dce3ea!important;box-shadow:none!important
  }
  #topbar-left{gap:3px}
  #topbar-breadcrumb{display:flex!important;align-items:center;gap:8px;color:#8190a0;font-size:11px;line-height:1}
  #topbar-breadcrumb strong{color:#31475d;font-weight:700}
  #topbar-breadcrumb i{font-style:normal;color:#b1bbc5}
  .topbar h2{font-size:23px!important;line-height:1.05!important;letter-spacing:-.2px!important}
  #topbar-subtitle{font-size:12px!important;margin-top:1px!important;color:#738397!important}
  .page{background:#f4f6fa}
  .page.active{padding:26px 30px!important}
  #page-habilitacion.page.active{padding:0!important}
  .sb-brand{border-radius:0!important}
  .sb-link{border-radius:6px!important}
  .card,.home-attention-card,.home-ops-card,.home-metric-card{box-shadow:none!important}
}
@media (max-width:768px){
  #topbar-breadcrumb{display:none!important}
}
/* En Habilitación el breadcrumb funciona como único contexto del encabezado.
   El título y descripción permanecen una sola vez dentro del módulo. */
@media (min-width:769px){
  #screen-app:has(#page-habilitacion.active) .topbar{
    min-height:58px!important;height:58px!important;padding-top:10px!important;padding-bottom:10px!important
  }
  #screen-app:has(#page-habilitacion.active) #topbar-title,
  #screen-app:has(#page-habilitacion.active) #topbar-subtitle{display:none!important}
  #screen-app:has(#page-habilitacion.active) #topbar-left{justify-content:center!important}
  #screen-app:has(#page-habilitacion.active) #page-habilitacion iframe{
    height:calc(100vh - 58px)!important
  }
}
/* Dent-iOS Estética se comporta como página interna, no como modal. */
@media (min-width:769px){
  #screen-app:has(#page-esthetic-tools.active) .topbar{
    min-height:58px!important;height:58px!important;padding-top:10px!important;padding-bottom:10px!important
  }
  #screen-app:has(#page-esthetic-tools.active) #topbar-title,
  #screen-app:has(#page-esthetic-tools.active) #topbar-subtitle{display:none!important}
  #screen-app:has(#page-esthetic-tools.active) #topbar-left{justify-content:center!important}
  #page-esthetic-tools.page.active{padding:26px 30px!important}
}
/* Patrón definitivo de encabezado: breadcrumb + título + descripción, igual a Pacientes. */
@media (min-width:769px){
  #screen-app:has(#page-habilitacion.active) .topbar,
  #screen-app:has(#page-esthetic-tools.active) .topbar{
    min-height:78px!important;height:auto!important;padding:12px 30px!important
  }
  #screen-app:has(#page-habilitacion.active) #topbar-title,
  #screen-app:has(#page-habilitacion.active) #topbar-subtitle,
  #screen-app:has(#page-esthetic-tools.active) #topbar-title,
  #screen-app:has(#page-esthetic-tools.active) #topbar-subtitle{display:block!important}
  #screen-app:has(#page-habilitacion.active) #topbar-left,
  #screen-app:has(#page-esthetic-tools.active) #topbar-left{justify-content:flex-start!important}
  #screen-app:has(#page-habilitacion.active) #page-habilitacion iframe{
    height:calc(100vh - 78px)!important
  }
  #page-esthetic-tools .dei-hub-page-shell .dei-hub-head{display:none!important}
}

/* Habilitación: un solo scroll dentro del módulo, sin pie superpuesto. */
#screen-app:has(#page-habilitacion.active) .main{
  overflow:hidden!important;
}
#screen-app:has(#page-habilitacion.active) .app-footer{
  display:none!important;
}
#page-habilitacion.active{
  height:calc(100vh - 78px)!important;
  min-height:0!important;
  overflow:hidden!important;
}
#page-habilitacion.active #habilitacion-frame{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:auto!important;
}
@media (max-width:768px){
  #page-habilitacion.active{
    height:calc(100dvh - 64px)!important;
  }
}