/* =========================================================
   KOVRA PASO 46 — COMPACTACIÓN VERTICAL FINAL
   No cambia diseño, colores ni estructura.
   Reduce espacio vertical sobrante y evita scroll innecesario.
========================================================= */

:root {
    --kovra-safe-gap-compact: 2px;
}

html,
body {
    min-height: 100%;
}

body {
    min-height: 100svh;
    min-height: 100dvh;
    box-sizing: border-box;
}

/*
 * El fondo sigue llegando hasta el borde físico.
 * Solo el contenido se separa 2px después del safe-area real.
 */
.app,
.page,
.access-shell,
.register-shell {
    min-height: 0 !important;
    height: auto !important;
    padding-top: max(
        2px,
        calc(env(safe-area-inset-top) + var(--kovra-safe-gap-compact))
    ) !important;
}

/* En pantallas con barra fija no hace falta reservar espacio extra dentro del main. */
body:has(.bottom-nav) > .app,
body:has(.bottom-nav) > main.app {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 4px !important;
}

/* Pantallas cortas: compactar únicamente separaciones grandes de cabecera. */
@media (max-height: 900px) {
    .header {
        margin-bottom: 14px !important;
    }

    .page-header {
        margin-bottom: 12px !important;
    }

    .topbar {
        margin-bottom: 7px !important;
    }

    .screen-header,
    .register-header {
        margin-bottom: 6px !important;
    }

    .access-shell .brand-panel {
        margin-bottom: 6px !important;
    }

    .app > :first-child,
    .page > :first-child,
    .access-shell > :first-child,
    .register-shell > :first-child {
        margin-top: 0 !important;
    }
}

/*
 * Esta clase solo se activa si JS confirma que todo cabe en la ventana.
 * Elimina el rebote/scroll vacío de iOS sin cortar páginas largas.
 */
body.kovra-no-scroll {
    overflow-y: hidden !important;
    overscroll-behavior-y: none;
}

/* PASO 47 — logo KOVRA más protagonista, sin alterar la identidad visual. */
.kovra-logo-home {
    width: clamp(176px, 48vw, 236px) !important;
    height: clamp(48px, 13vw, 62px) !important;
    margin-bottom: 6px !important;
}

.kovra-logo-login {
    width: clamp(224px, 68vw, 310px) !important;
    height: clamp(58px, 18vw, 78px) !important;
    margin-bottom: 5px !important;
}