/* ============================================
   SISTEMA DE RESPONSIVIDADE GLOBAL
   Limite maximo: 6.9 polegadas (~414px largura)
============================================ */

:root {
    /* ============================================
       TAMANHOS MAXIMOS (6.9 polegadas)
    ============================================ */
    --max-app-width: 414px;
    --max-app-height: 896px;

    /* ============================================
       ESCALA PROPORCIONAL
       Base: 375px (iPhone SE)
    ============================================ */
    --scale-base: 375;
    --scale-factor: min(100vw / var(--scale-base), var(--max-app-width) / var(--scale-base));

    /* ============================================
       ESPACAMENTOS PROPORCIONAIS
    ============================================ */
    --space-xs: clamp(4px, 1vw, 6px);
    --space-sm: clamp(8px, 2vw, 12px);
    --space-md: clamp(12px, 3vw, 18px);
    --space-lg: clamp(16px, 4vw, 24px);
    --space-xl: clamp(20px, 5vw, 30px);

    /* ============================================
       FONTES PROPORCIONAIS
    ============================================ */
    --font-xs: clamp(0.6rem, 2.5vw, 0.75rem);
    --font-sm: clamp(0.7rem, 3vw, 0.85rem);
    --font-md: clamp(0.85rem, 3.5vw, 1rem);
    --font-lg: clamp(1rem, 4vw, 1.2rem);
    --font-xl: clamp(1.2rem, 5vw, 1.5rem);
    --font-2xl: clamp(1.5rem, 6vw, 2rem);
    --font-3xl: clamp(2rem, 8vw, 2.5rem);

    /* ============================================
       TAMANHOS DE ELEMENTOS
    ============================================ */
    --btn-height-sm: clamp(32px, 8vw, 40px);
    --btn-height-md: clamp(40px, 10vw, 48px);
    --btn-height-lg: clamp(48px, 12vw, 56px);

    --icon-sm: clamp(16px, 4vw, 20px);
    --icon-md: clamp(24px, 6vw, 32px);
    --icon-lg: clamp(32px, 8vw, 40px);
    --icon-xl: clamp(40px, 10vw, 50px);

    --avatar-sm: clamp(32px, 8vw, 40px);
    --avatar-md: clamp(40px, 10vw, 55px);
    --avatar-lg: clamp(55px, 14vw, 70px);

    /* ============================================
       BORDER RADIUS PROPORCIONAIS
    ============================================ */
    --radius-sm: clamp(6px, 1.5vw, 10px);
    --radius-md: clamp(10px, 2.5vw, 16px);
    --radius-lg: clamp(16px, 4vw, 24px);
    --radius-xl: clamp(20px, 5vw, 30px);
    --radius-full: 50%;

    /* ============================================
       CORES (mantidas do design original)
    ============================================ */
    --primary: #00C9A7;
    --primary-dark: #009E83;
    --accent: #845EC2;
    --accent-light: #D65DB1;
    --text-dark: #1F2937;
    --text-medium: #6B7280;
    --text-light: #9CA3AF;
    --bg-light: #F9FAFB;
    --bg-lighter: #F3F4F6;
    --border-color: #E5E7EB;
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;

    /* ============================================
       GLASS MORPHISM
    ============================================ */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-bg-light: rgba(255, 255, 255, 0.95);
    --glass-border: 1px solid rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    --glass-blur: blur(12px);

    /* ============================================
       HEADER/FOOTER HEIGHTS
    ============================================ */
    --header-height: clamp(60px, 14vh, 90px);
    --footer-height: clamp(50px, 12vh, 70px);
    --nav-height: clamp(55px, 13vh, 75px);
}

/* ============================================
   RESET E BASE
============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #E0F2F1;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ============================================
   APP WRAPPER - LIMITE DE 6.9 POLEGADAS
============================================ */
#app-wrapper {
    position: relative;
    width: 100%;
    max-width: var(--max-app-width);
    height: 100vh;
    height: 100dvh;
    max-height: var(--max-app-height);
    overflow: hidden;
    background: linear-gradient(180deg, #E0F2F1 0%, #F7F9FC 100%);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.15);
}

/* Em telas maiores, centraliza e adiciona bordas arredondadas */
@media (min-width: 415px) and (min-height: 897px) {
    #app-wrapper {
        border-radius: var(--radius-xl);
        margin: auto;
    }
}

/* ============================================
   CONTAINERS FULL SCREEN DENTRO DO WRAPPER
============================================ */
.app-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ============================================
   MODAL OVERLAY PADRAO
============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* Increased from 100 to always be above UI elements */
    transition: opacity 0.3s ease;
}

/* ============================================
   MODAL BOX PADRAO
============================================ */
.modal-box {
    width: calc(100% - var(--space-lg) * 2);
    max-width: calc(var(--max-app-width) - var(--space-lg) * 2);
    max-height: 85vh;
    max-height: 85dvh;
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================
   SCROLLBAR CUSTOMIZADA
============================================ */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* ============================================
   MEDIA QUERIES PARA TELAS PEQUENAS
============================================ */
@media (max-height: 600px) {
    :root {
        --header-height: clamp(50px, 12vh, 70px);
        --footer-height: clamp(40px, 10vh, 55px);
        --nav-height: clamp(45px, 11vh, 60px);
    }
}

@media (max-height: 500px) {
    :root {
        --header-height: clamp(40px, 10vh, 55px);
        --footer-height: clamp(35px, 8vh, 45px);
        --nav-height: clamp(40px, 9vh, 50px);
    }
}

/* ============================================
   SAFE AREA (NOTCH/DYNAMIC ISLAND)
============================================ */
@supports (padding-top: env(safe-area-inset-top)) {
    #app-wrapper {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}