:root {
    --header-h:      56px;
    --footer-h:      64px;
    --nav-ativo:     #AB2328;
    --nav-inativo:   #555555;
    --layout-bg:     #000000;
    --layout-borda:  #1a1a1a;
}

/* ── BODY PADDING ─────────────────────────────────────────── */
body.has-layout {
    padding-top:    var(--header-h);
    padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));
}

/* evita double-padding no container do formulário */
body.has-layout .app-container {
    min-height: calc(100vh - var(--header-h) - var(--footer-h));
    padding-bottom: 28px;
}

/* ── APP HEADER ───────────────────────────────────────────── */
.app-header {
    position: fixed;
    top:    0;
    left:   0;
    right:  0;
    height: var(--header-h);
    background: var(--layout-bg);
    border-bottom: 1px solid var(--layout-borda);
    z-index: 200;
    padding-top: env(safe-area-inset-top, 0px);
}

.app-header-inner {
    max-width: 480px;
    margin:    0 auto;
    height:    var(--header-h);
    display:   flex;
    align-items:     center;
    justify-content: space-between;
    padding:   0 16px;
}

.app-header-brand {
    display:   flex;
    align-items: center;
    gap:       9px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.app-header-logo {
    width:  30px;
    height: 30px;
    flex-shrink: 0;
}

.app-header-title {
    font-size:   0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:       #ffffff;
    line-height: 1.15;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

.app-header-title em {
    color:       var(--nav-ativo);
    font-style:  normal;
    display:     block;
}

.app-header-actions {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.app-avatar {
    width:         34px;
    height:        34px;
    border-radius: 50%;
    background:    #1c1c1c;
    border:        1.5px solid #2e2e2e;
    color:         #aaaaaa;
    font-size:     0.7rem;
    font-weight:   700;
    letter-spacing: 0.5px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    transition:    border-color 0.2s, color 0.2s;
    text-transform: uppercase;
}
.app-avatar:active { border-color: var(--nav-ativo); color: #fff; }

.app-logout-btn {
    width:         34px;
    height:        34px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         #555555;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    transition:    color 0.18s;
    text-decoration: none;
}
.app-logout-btn:active { color: #ffffff; }
.app-logout-btn svg { width: 18px; height: 18px; }

/* ── FOOTER NAV ───────────────────────────────────────────── */
.app-footer-nav {
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    background: #080808;
    border-top: 1px solid var(--layout-borda);
    z-index:    200;
    height:     calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app-nav-inner {
    max-width: 480px;
    margin:    0 auto;
    height:    var(--footer-h);
    display:   flex;
    align-items: stretch;
}

.app-nav-item {
    flex:             1;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              3px;
    text-decoration:  none;
    color:            var(--nav-inativo);
    font-size:        0.58rem;
    font-weight:      600;
    letter-spacing:   0.2px;
    text-transform:   uppercase;
    -webkit-tap-highlight-color: transparent;
    transition:       color 0.18s;
    position:         relative;
    padding-top:      6px;
    font-family:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    white-space:      nowrap;
}

.app-nav-item svg {
    width:      22px;
    height:     22px;
    transition: transform 0.15s;
    flex-shrink: 0;
}

.app-nav-item.ativo {
    color: var(--nav-ativo);
}

.app-nav-item.ativo::after {
    content:    '';
    position:   absolute;
    top:        0;
    left:       22%;
    right:      22%;
    height:     2.5px;
    background: var(--nav-ativo);
    border-radius: 0 0 3px 3px;
}

.app-nav-item:active svg { transform: scale(0.82); }