/* ========================================
   UNIVERSO LÚDICO - RESPONSIVO SM
   Smartphones (320px - 767px)
   
   Contexto: Cliente em movimento, toque
   Distância leitura: 30-40cm
   ======================================== */

/* Aplicado apenas em telas até 767px */
@media (max-width: 767px) {
    
    /* ========================================
       VARIÁVEIS RESPONSIVAS - MOBILE
       ======================================== */
    
    :root {
        /* Tipografia Mobile Otimizada */
        --font-size-base: 0.9375rem;    /* 15px - legível em mobile */
        --font-size-sm: 0.8125rem;      /* 13px */
        --font-size-xs: 0.75rem;        /* 12px */
        --font-size-lg: 1rem;           /* 16px */
        --font-size-h1: 1.5rem;         /* 24px - títulos mobile */
        --font-size-h2: 1.25rem;        /* 20px */
        --font-size-h3: 1.0625rem;      /* 17px */
        --font-size-btn: 0.9375rem;     /* 15px */
        
        /* Espaçamentos Mobile (mais compactos) */
        --spacing-xs: 6px;
        --spacing-sm: 10px;
        --spacing-md: 14px;
        --spacing-lg: 20px;
        --spacing-xl: 28px;
        --spacing-2xl: 36px;
        
        /* Componentes Mobile */
        --header-height: 65px;
        --logo-height: 38px;
        --card-padding: 18px 18px;
        --card-padding-boas-vindas: 36px 24px;
        --card-padding-inicial: 28px 26px;
        --input-padding: 13px 15px;
        --button-padding: 13px 18px;
        --footer-padding: 26px 18px;
    }
    
    /* ========================================
       AJUSTES MOBILE
       ======================================== */
    
    /* Header mais compacto */
    header {
        padding: var(--spacing-sm) 0;
    }
    
    header img {
        height: var(--logo-height);
    }
    
    /* Main com menos padding vertical */
    main {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    /* Cards ajustados */
    .card-body {
        padding: var(--card-padding) !important;
    }
    
    /* Card boas-vindas independente */
    .card-boas-vindas .card-body {
        padding: var(--card-padding-boas-vindas) !important;
    }
    
    .card-inicial .card-body {
        padding: var(--card-padding-inicial) !important;
    }
    
    .card-title {
        font-size: var(--font-size-h2);
        font-weight: 700;
        margin-bottom: var(--spacing-lg);
        line-height: 1.4;
        letter-spacing: -0.02em;
    }
    
    /* Formulários mobile-friendly */
    .form-control {
        padding: var(--input-padding);
        font-size: var(--font-size-base);
        /* Área de toque mínima 44px */
        min-height: 44px;
    }
    
    /* Botões full-width e área de toque adequada */
    .btn-azul {
        width: 100%;
        padding: var(--button-padding);
        font-size: var(--font-size-btn);
        /* Área de toque mínima 44px */
        min-height: 44px;
    }
    
    /* Footer compacto */
    footer {
        padding: var(--footer-padding);
        text-align: center; /* Centralizado em mobile */
    }
    
    footer p {
        font-size: var(--font-size-sm);
        margin: var(--spacing-xs) 0;
    }
    
    footer p:last-child {
        font-size: var(--font-size-xs);
        margin-top: var(--spacing-sm);
    }
    
    /* Alertas compactos */
    .alert {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
    
    /* Container com padding lateral reduzido */
    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

/* ========================================
   AJUSTES MICRO-MOBILE (Extra Small)
   320px - 480px
   ======================================== */

@media (max-width: 480px) {
    :root {
        /* Tipografia ainda mais compacta para telas muito pequenas */
        --font-size-h1: 1.375rem;       /* 22px */
        --font-size-h2: 1.125rem;       /* 18px */
        --font-size-h3: 1rem;           /* 16px */
        
        /* Espaçamentos ultra-compactos */
        --spacing-2xl: 30px;
        --spacing-xl: 24px;
        
        /* Componentes micro-mobile */
        --logo-height: 35px;
        --card-padding: 16px 16px;
        --card-padding-boas-vindas: 32px 20px;
        --card-padding-inicial: 24px 22px;
    }
    
    .card-body {
        padding: var(--card-padding) !important;
    }
    
    .card-inicial .card-body {
        padding: var(--card-padding-inicial) !important;
    }
    
    .card-title {
        font-size: var(--font-size-h2);
        line-height: 1.35;
    }
    
    header img {
        height: var(--logo-height);
    }
    
    main {
        padding: var(--spacing-xl) var(--spacing-sm);
    }
}

/* ========================================
   PÁGINA INICIAL - MOBILE
   ======================================== */

@media (max-width: 767px) {
    .pagina-inicial {
        padding: var(--spacing-md);
    }
    
    .logo-inicial {
        max-width: 75%; /* Mais espaço em mobile */
    }
    
    /* Card da página inicial */
    .pagina-inicial .card-inicial .card-body {
        padding: var(--card-padding-inicial) !important;
    }
}

@media (max-width: 480px) {
    .pagina-inicial {
        padding: var(--spacing-sm);
    }
    
    .logo-inicial {
        max-width: 80%; /* Ainda mais espaço em telas muito pequenas */
    }
    
    .logo-wrapper {
        margin-bottom: var(--spacing-md);
    }
    
    /* Loading mobile */
    .loading-overlay .spinner-border {
        width: 1.625rem; /* 26px em telas muito pequenas */
        height: 1.625rem;
        border-width: 2.5px;
    }
    
    .loading-text {
        font-size: var(--font-size-base);
    }
}

/* ========================================
   ORIENTAÇÃO LANDSCAPE MOBILE
   Ajustes quando smartphone está deitado
   ======================================== */

@media (max-width: 767px) and (orientation: landscape) {
    main {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .card-inicial .card-body {
        padding: 35px 30px !important;
    }
    
    header {
        padding: var(--spacing-xs) 0;
    }
    
    header img {
        height: 32px;
    }
}