* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --standalone-nav-safe-area-cap: 0px;

    --nav-height: clamp(48px, 13vw, 58px);

    --nav-bottom-padding: var(--safe-bottom);

    --nav-bottom-offset: 0px;

    --nav-clearance: calc(var(--nav-height) + var(--nav-bottom-padding));
    --page-end-gap: max(clamp(20px, 4vh, 32px), var(--safe-bottom));
    --page-bottom-padding: calc(var(--nav-clearance) + var(--page-end-gap));
}

html.standalone-app {
    /* No PWA instalado, o WebKit pode reportar uma safe-area inferior maior que a home indicator. */
    --nav-height: clamp(46px, 12vw, 52px);
    --nav-bottom-padding: min(var(--safe-bottom), var(--standalone-nav-safe-area-cap));
    --page-end-gap: clamp(20px, 4vh, 32px);
    --page-bottom-padding: calc(var(--nav-clearance) + var(--page-end-gap));
}

@media (max-height: 670px) {
    html.standalone-app {
        --nav-height: clamp(44px, 11vw, 50px);
        --page-end-gap: clamp(18px, 4vh, 28px);
        --page-bottom-padding: calc(var(--nav-clearance) + var(--page-end-gap));
    }
}

html,
body {
    background-color: var(--dx-bg);
    color: var(--dx-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    overflow: hidden;
    /* Impede o scroll do body inteiro */
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100dvh;
    /* Altura dinâmica da tela (respeita barras do navegador) */
    width: 100%;
    background: var(--dx-bg);
}

@supports (-webkit-touch-callout: none) {

    html,
    body {
        min-height: -webkit-fill-available;
    }

    #app {
        min-height: -webkit-fill-available;
        height: -webkit-fill-available;
    }
}

html.bottom-nav-visible,
html.bottom-nav-visible body {
    background-color: var(--dx-surface);
}

#main-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* ZONA DE SEGURANÇA SUPERIOR (Dynamic Island / Notch) */
    /* Usamos padding aqui para o conteúdo rolar por baixo do padding se necessário, 
       ou podemos usar um spacer. Vamos de padding generoso + env */
    padding-top: calc(45px + env(safe-area-inset-top));

    /* O respiro inferior das rotas autenticadas fica no proprio scroll container em pages.css. */
    padding-bottom: 0;
    scroll-padding-bottom: var(--page-bottom-padding);
}

.page-container {
    padding: 0 20px;
}

/* Garante que títulos e elementos importantes respirem */
h1 {
    margin-bottom: 24px;
    padding-top: 10px;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    outline: none;
    border: none;
}

button {
    cursor: pointer;
    background: none;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.hidden {
    display: none !important;
}