/* flicker-fix.css (v2)

   - Quita el “hueco” tipo cabecera (no usar visibility:hidden que conserva espacio)

   - Vault/PIN a pantalla completa + scroll

   - Reduce flashes mostrando un fondo consistente mientras está locked

*/

/* Boot overlay: que no bloquee el PIN (siempre por debajo del vault) */

#bootOverlay {
  z-index: 9000 !important;
}

/* Mostrar el bootOverlay también cuando la app esté locked

   (así el fondo no “parpadea” aunque el vault tarde 1 frame) */

html[data-app-locked="true"] #bootOverlay,
body[data-app-locked="true"] #bootOverlay {
  display: flex !important;
}

/* IMPORTANTE:

   En boot/locked, NO uses visibility:hidden porque deja el hueco del header.

   Usamos display:none para que nada “empuje” el modal. */

html[data-boot="1"]
  body
  > :not(#bootOverlay):not(#vaultModal):not(#lockOverlay) {
  display: none !important;
}

html[data-app-locked="true"]
  body
  > :not(#bootOverlay):not(#vaultModal):not(#lockOverlay),
body[data-app-locked="true"]
  > :not(#bootOverlay):not(#vaultModal):not(#lockOverlay) {
  display: none !important;
}

/* Evita scroll de la página cuando está locked */

html[data-app-locked="true"],
body[data-app-locked="true"] {
  overflow: hidden !important;
}

/* ===== VAULT/PIN FULLSCREEN ===== */

#vaultModal {
  /* Fullscreen real */

  position: fixed !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100dvh !important;

  /* Backdrop */

  background: rgba(0, 0, 0, 0.72);

  /* Encima de todo lo demás */

  z-index: 10001 !important;

  /* Layout */

  display: none;

  align-items: center;

  justify-content: center;

  /* iOS safe areas */

  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);

  overflow: hidden;
}

/* Si está abierto */

#vaultModal[aria-hidden="false"] {
  display: flex !important;
}

/* Si está cerrado, que no se vea jamás */

#vaultModal[aria-hidden="true"] {
  display: none !important;
}



/* El "panel" interno: centrado, tamaño multiempresa */
#vaultModal .modal-content {
  width: min(520px, 92vw) !important;
  height: auto !important;
  max-width: 520px !important;
  max-height: 90vh !important;
  margin: 0 !important;
  border-radius: 16px !important;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


/* Lock overlay: lo dejamos existir, pero siempre por debajo del vault */

#lockOverlay {
  position: fixed;

  inset: 0;

  z-index: 9990;
}