:root{
  --footer-h: 60px;
  --pager-h: 35px;
}

/* base */
html, body { height: 100%; margin: 0; background:#fff; overflow:hidden; }
body.app-shell { height: 100%; }

/* ====== ROTACIÓN FORZADA EN MÓVIL ====== */
.orientation-root{
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #fff;
}

/* Este bloque se vuelve ?el viewport real? que nosotros controlamos */
.orientation-inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  transform-origin: top left;
}

/* Si el teléfono está en portrait, rotamos toda la UI a landscape */
.orientation-root.force-landscape .orientation-inner{
  width: 100dvh;     /* se intercambian */
  height: 100vw;
  transform: rotate(90deg) translateY(-100%);
}

.navbar{ padding: 4px 0; }

#reportContainer.report-container{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(var(--pager-h));
  overflow: hidden;
  background:#fff;
  z-index: 1;
}

/* paginación */
.pb-pagination{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pager-h);

  display:flex;
  align-items:center;
  gap: 4px;
  padding: 6px 8px;

  background:#fff;
  border-top:1px solid #ddd;

  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
  z-index: 5;
}
.pb-pagination::-webkit-scrollbar{ display:none; }

.pb-pagination button{
  background:none;
  border:none;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 600;
  color:#666;
  border-radius: 8px;
  flex: 0 0 auto;
}
.pb-pagination button.active{
  background:#dc3545;
  color:#fff;
}

/* footer */
.app-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  display:flex;
  justify-content:center;
  align-items:center;

  height: var(--footer-h);
  background:#fff;
  border-top:1px solid #eee;
  z-index: 6;
}

.vcBody {
  height:350px !important;
  background-color: #dc3545 !important;
}


#reportContainer{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--pager-h);
  overflow: hidden;
}

/* PowerBI mete DIV + IFRAME dentro; forzamos a 100% */
#reportContainer > div{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#reportContainer iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}
/*02032026*/