/* ============================================================================
   LOGIN PAGE - RESPONSIVE DESIGN SYSTEM
   Mobile-First Approach: 280px → 4K+
   Todas as técnicas de responsividade CSS modernas aplicadas
   ============================================================================ */

/* ==================== CSS CUSTOM PROPERTIES (Design Tokens) ==================== */
:root {
    /* ===== FLUID TYPOGRAPHY SCALE ===== */
    /* Mobile-first: 14px base @ 280px → 18px @ 1920px */
    --text-xs: clamp(0.6875rem, 0.625rem + 0.3125vw, 0.875rem);     /* 11-14px */
    --text-sm: clamp(0.8125rem, 0.75rem + 0.3125vw, 1rem);          /* 13-16px */
    --text-base: clamp(0.875rem, 0.8125rem + 0.3125vw, 1.125rem);   /* 14-18px */
    --text-md: clamp(1rem, 0.9375rem + 0.3125vw, 1.25rem);          /* 16-20px */
    --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);             /* 18-24px */
    --text-xl: clamp(1.375rem, 1.125rem + 1.25vw, 2.25rem);         /* 22-36px */
    --text-2xl: clamp(1.75rem, 1.375rem + 1.875vw, 3rem);           /* 28-48px */
    
    /* ===== FLUID SPACING SCALE ===== */
    /* Mobile-first com margens MAIORES para telas pequenas */
    --space-3xs: clamp(0.375rem, 0.3125rem + 0.3125vw, 0.5rem);     /* 6-8px */
    --space-2xs: clamp(0.5rem, 0.4375rem + 0.3125vw, 0.75rem);      /* 8-12px */
    --space-xs: clamp(0.75rem, 0.625rem + 0.625vw, 1.125rem);       /* 12-18px */
    --space-sm: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);            /* 16-24px */
    --space-md: clamp(1.25rem, 1rem + 1.25vw, 2rem);                /* 20-32px */
    --space-lg: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);            /* 24-40px */
    --space-xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);                /* 32-56px */
    --space-2xl: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);               /* 40-72px */
    
    /* ===== CONTAINER WIDTHS (Fluid) ===== */
    --container-xs: min(calc(100% - 2rem), 20rem);    /* 320px max, margens 1rem */
    --container-sm: min(calc(100% - 2.5rem), 28rem);  /* 448px max, margens 1.25rem */
    --container-md: min(calc(100% - 3rem), 36rem);    /* 576px max, margens 1.5rem */
    --container-lg: min(calc(100% - 4rem), 42rem);    /* 672px max, margens 2rem */
    --container-xl: min(calc(100% - 5rem), 50rem);    /* 800px max, margens 2.5rem */
    
    /* ===== TOUCH TARGETS (WCAG 2.2 AA) ===== */
    --touch-min: 2.75rem;   /* 44px - mínimo WCAG */
    --touch-ideal: 3rem;    /* 48px - recomendado */
    --touch-large: 3.5rem;  /* 56px - confortável */
    
    /* ===== BORDER RADIUS (Fluid) ===== */
    --radius-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);   /* 4-6px */
    --radius-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);      /* 8-12px */
    --radius-md: clamp(0.75rem, 0.625rem + 0.625vw, 1.125rem);/* 12-18px */
    --radius-lg: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);     /* 16-24px */
    --radius-xl: clamp(1.25rem, 1rem + 1.25vw, 2rem);         /* 20-32px */
    
    /* ===== COLOR SYSTEM ===== */
    --color-primary: #667eea;
    --color-primary-dark: #764ba2;
    --color-primary-light: #a8b5ff;
    --color-text: #2d3436;
    --color-text-muted: #636e72;
    --color-text-light: rgba(255, 255, 255, 0.95);
    --color-border: #e0e0e0;
    --color-border-focus: rgba(102, 126, 234, 0.5);
    --color-bg: #ffffff;
    --color-overlay: rgba(255, 255, 255, 0.95);
    --color-error: #d63031;
    --color-success: #00b894;
    
    /* ===== SHADOWS (Responsive) ===== */
    --shadow-sm: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 1rem 3rem rgba(0, 0, 0, 0.25);
    --shadow-2xl: 0 1.5rem 4.5rem rgba(0, 0, 0, 0.3);
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===== Z-INDEX SCALE ===== */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-fixed: 1000;
    --z-modal: 10000;
}

/* Reset básico */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==================== BASE STYLES (Mobile-First) ==================== */

html {
    font-size: 100%; /* 16px base */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: 'Twemoji Country Flags', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    /*background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    background-attachment: fixed;*/
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* ==================== CONTAINER (Mobile-First) ==================== */

.login-container {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
    position: relative;
    /* background removido aqui para evitar bug no iOS/Safari */
    /* overflow: hidden; */  /* comente ou remova para teste */
}

/* ==================== DECORATIVE ELEMENTS ==================== */

.floating-icon {
    position: absolute;
    font-size: clamp(1.5rem, 2vw + 1rem, 3rem); /* 24-48px fluid */
    opacity: 0.12;
    animation: floatRandom 15s ease-in-out infinite;
    pointer-events: none;
}

.floating-icon:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.floating-icon:nth-child(2) { top: 20%; right: 15%; animation-delay: 2s; font-size: clamp(2rem, 2.5vw + 1rem, 3.5rem); }
.floating-icon:nth-child(3) { bottom: 15%; left: 20%; animation-delay: 4s; font-size: clamp(1.75rem, 1.5vw + 1rem, 2.75rem); }
.floating-icon:nth-child(4) { top: 60%; right: 10%; animation-delay: 1s; font-size: clamp(1.875rem, 2vw + 1rem, 3.125rem); }
.floating-icon:nth-child(5) { bottom: 30%; right: 25%; animation-delay: 3s; }
.floating-icon:nth-child(6) { top: 40%; left: 5%; animation-delay: 5s; font-size: clamp(1.625rem, 1.75vw + 1rem, 2.875rem); }

@keyframes floatRandom {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-0.9375rem, -1.25rem) rotate(-2deg); }
    50% { transform: translate(1.25rem, -0.9375rem) rotate(2deg); }
    75% { transform: translate(1.5625rem, 0.625rem) rotate(3deg); }
}

/* Background decorative blobs - fluid sizing to prevent overflow */
.login-container::before {
    content: '';
    position: absolute;
    width: min(31.25rem, 70vw); /* 500px max, scales down on small screens */
    height: min(31.25rem, 70vw);
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
    top: calc(min(31.25rem, 70vw) / -2);
    right: calc(min(31.25rem, 70vw) / -2);
    animation: float 6s ease-in-out infinite;
}

.login-container::after {
    content: '';
    position: absolute;
    width: min(25rem, 60vw); /* 400px max, scales down on small screens */
    height: min(25rem, 60vw);
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
    bottom: calc(min(25rem, 60vw) / -2);
    left: calc(min(25rem, 60vw) / -2);
    animation: float 8s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-1.25rem) rotate(5deg); }
}

/* ==================== LOGIN BOX (Mobile-First com Container Query) ==================== */

.login-box {
   background: var(--color-overlay);                     /* mantém rgba(255,255,255,0.95) */
    backdrop-filter: blur(16px) saturate(180%);           /* valor fixo + saturate para cor mais viva */
    -webkit-backdrop-filter: blur(16px) saturate(180%);   /* prefixo obrigatório para iOS */
    padding: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    width: var(--container-sm);
    max-width: 100%;
    position: relative;
    z-index: var(--z-base);
    border: clamp(1px, 0.15vw, 2px) solid rgba(255, 255, 255, 0.25);
    overflow: visible;
    container-type: inline-size;
    container-name: login-card;
    /* Adicione estas 3 linhas para corrigir renderização do blur no Safari iOS */
    transform: translateZ(0);                             /* força layer GPU */
    -webkit-transform: translateZ(0);
    will-change: backdrop-filter, transform;
}

.login-box > * {
    position: relative;
    z-index: 1;
}

/* .login-box::before { ... } → REMOVIDO para corrigir padrão quadriculado no iOS/Safari */
/* @keyframes shimmer { ... } → REMOVIDO */

/* ==================== TYPOGRAPHY & LOGO ==================== */

.login-icon {
    text-align: center;
    margin-bottom: var(--space-md);
}

.login-icon img {
    width: clamp(3.75rem, 10vw + 2rem, 5rem); /* 60-80px fluid */
    height: clamp(3.75rem, 10vw + 2rem, 5rem);
    border-radius: 50%;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);
    background: var(--color-bg);
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    object-fit: contain;
}

.login-box h1 {
    text-align: center;
    color: var(--color-text);
    margin-bottom: var(--space-2xs);
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.2;
}

.login-subtitle {
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
    font-size: var(--text-sm);
    line-height: 1.4;
}

/* ==================== LANGUAGE SELECTOR ==================== */

.login-language-selector {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.login-lang-btn {
    min-width: var(--touch-ideal);
    min-height: var(--touch-ideal);
    padding: var(--space-2xs) var(--space-sm);
    border: 2px solid rgba(102, 126, 234, 0.3);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-lg);
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-lang-btn:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(102, 126, 234, 0.2);
}

.login-lang-btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.login-lang-btn.active {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-color: var(--color-primary);
    color: white;
    box-shadow: 0 0.25rem 0.9375rem rgba(102, 126, 234, 0.4);
}

/* ==================== FORM ELEMENTS ==================== */

.form-group {
    margin-bottom: var(--space-sm);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-2xs);
    color: var(--color-text);
    font-weight: 600;
    font-size: var(--text-sm);
}

.form-group input {
    width: 100%;
    min-height: var(--touch-ideal);
    padding: var(--space-xs) var(--space-sm);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    transition: all var(--transition-base);
    /* Prevent iOS zoom on focus */
    font-size: max(1rem, 16px);
}

.form-group input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25);
}

.form-group input:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==================== REMEMBER ME CHECKBOX ==================== */

.remember-me {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-bottom: var(--space-lg);
}

.remember-me input[type="checkbox"] {
    width: 1.25rem; /* 20px - better touch target */
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.remember-me input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.remember-me label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: var(--space-3xs) 0;
    user-select: none;
}

/* ==================== BUTTONS ==================== */

.btn {
    width: 100%;
    min-height: var(--touch-ideal);
    padding: var(--space-xs) var(--space-sm);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    box-shadow: 0 0.25rem 0.9375rem rgba(102, 126, 234, 0.4);
    margin-bottom: var(--space-sm);
}

.btn-primary:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1.25rem rgba(102, 126, 234, 0.5);
}

.btn-primary:focus-visible {
    outline: 3px solid white;
    outline-offset: 2px;
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-back-to-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-sm);
    min-height: var(--touch-ideal);
    color: var(--color-text-muted);
    text-decoration: none;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    font-weight: 500;
    background: transparent;
}

.btn-back-to-menu:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(102, 126, 234, 0.05);
}

.btn-back-to-menu:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==================== FOOTER ==================== */

.login-footer {
    text-align: center;
    margin-top: var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.4;
}

/* ==================== LOADING OVERLAY ==================== */

.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(0.25rem);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.loading-overlay.active {
    display: flex;
}

.spinner {
    width: 3.125rem; /* 50px */
    height: 3.125rem;
    border: 0.25rem solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS - Mobile-First Approach
   Todas as técnicas modernas aplicadas: clamp(), min(), max(), container queries
   ============================================================================ */

/* ===== EXTRA SMALL MOBILE (280px-320px) ===== */
/* Galaxy Fold dobrado, dispositivos muito pequenos */
@media (max-width: 320px) {
    .login-container {
        padding: clamp(1rem, 5vw, 1.5rem) clamp(0.75rem, 4vw, 1rem);
    }
    
    .login-box {
        width: calc(100% - 1.5rem);
        padding: clamp(1.25rem, 6vw, 1.75rem) clamp(1rem, 5vw, 1.25rem);
    }
    
    .login-icon img {
        width: clamp(2.5rem, 12vw, 3rem);
        height: clamp(2.5rem, 12vw, 3rem);
    }
    
    .login-box h1 {
        font-size: clamp(1.125rem, 5vw, 1.375rem);
    }
    
    .login-lang-btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: clamp(1rem, 4vw, 1.125rem);
    }
}

/* ===== SMALL MOBILE (321px-375px) ===== */
/* iPhone SE, Android pequeno */
@media (min-width: 321px) and (max-width: 375px) {
    .login-box {
        width: calc(100% - 2rem);
        padding: clamp(1.5rem, 5vw, 2rem) clamp(1.125rem, 4vw, 1.5rem);
    }
    
    .login-icon img {
        width: clamp(3rem, 10vw, 3.5rem);
        height: clamp(3rem, 10vw, 3.5rem);
    }
}

/* ===== MEDIUM MOBILE (376px-480px) ===== */
/* iPhone 13/14/15, Android médio */
@media (min-width: 376px) and (max-width: 480px) {
    .login-box {
        width: calc(100% - 2.5rem);
        padding: clamp(1.75rem, 5vw, 2.25rem) clamp(1.25rem, 4vw, 1.75rem);
    }
    
    .login-icon img {
        width: clamp(3.5rem, 9vw, 4rem);
        height: clamp(3.5rem, 9vw, 4rem);
    }
    
    .form-group input,
    .btn {
        min-height: clamp(3rem, 8vw, 3.25rem);
    }
}

/* ===== LARGE MOBILE (481px-600px) ===== */
/* iPhone Pro Max, phablets */
@media (min-width: 481px) and (max-width: 600px) {
    .login-box {
        width: min(calc(100% - 3rem), 26rem);
        padding: clamp(2rem, 5vw, 2.5rem) clamp(1.5rem, 4vw, 2rem);
    }
    
    .login-icon img {
        width: clamp(4rem, 8vw, 4.5rem);
        height: clamp(4rem, 8vw, 4.5rem);
    }
}

/* ===== SMALL TABLET (601px-768px) ===== */
/* iPad Mini portrait, tablets pequenos */
@media (min-width: 601px) and (max-width: 768px) {
    .login-box {
        width: min(calc(100% - 4rem), 28rem);
        padding: clamp(2.25rem, 4vw, 2.75rem) clamp(1.75rem, 3vw, 2.25rem);
    }
    
    .login-icon img {
        width: clamp(4.5rem, 7vw, 5rem);
        height: clamp(4.5rem, 7vw, 5rem);
    }
    
    .form-group input,
    .btn {
        min-height: clamp(3.25rem, 6vw, 3.5rem);
    }
    
    .login-lang-btn {
        min-width: clamp(3.25rem, 6vw, 3.5rem);
        min-height: clamp(3.25rem, 6vw, 3.5rem);
    }
}

/* ===== MEDIUM TABLET (769px-1024px) ===== */
/* iPad portrait, tablets médios */
@media (min-width: 769px) and (max-width: 1024px) {
    .login-box {
        width: var(--container-md);
        padding: clamp(2.5rem, 4vw, 3rem) clamp(2rem, 3vw, 2.5rem);
    }
    
    .login-icon img {
        width: clamp(5rem, 6vw, 5.5rem);
        height: clamp(5rem, 6vw, 5.5rem);
    }
    
    .form-group input,
    .btn {
        min-height: clamp(3.5rem, 5vw, 3.75rem);
    }
}

/* ===== LARGE TABLET / SMALL LAPTOP (1025px-1280px) ===== */
/* iPad Pro landscape, notebooks pequenos */
@media (min-width: 1025px) and (max-width: 1280px) {
    .login-box {
        width: var(--container-lg);
        padding: clamp(2.75rem, 3vw, 3.25rem) clamp(2.25rem, 2.5vw, 2.75rem);
    }
    
    .login-icon img {
        width: clamp(5.5rem, 5vw, 6rem);
        height: clamp(5.5rem, 5vw, 6rem);
    }
    
    .form-group input,
    .btn {
        min-height: clamp(3.75rem, 4vw, 4rem);
    }
    
    .login-lang-btn {
        min-width: clamp(3.75rem, 4vw, 4rem);
        min-height: clamp(3.75rem, 4vw, 4rem);
    }
}

/* ===== DESKTOP (1281px-1440px) ===== */
/* Notebooks 13-15", monitores HD+ */
@media (min-width: 1281px) and (max-width: 1440px) {
    .login-box {
        width: var(--container-lg);
        padding: clamp(3rem, 2.5vw, 3.5rem) clamp(2.5rem, 2vw, 3rem);
    }
    
    .login-icon img {
        width: clamp(6rem, 4vw, 6.5rem);
        height: clamp(6rem, 4vw, 6.5rem);
    }
}

/* ===== LARGE DESKTOP (1441px-1920px) ===== */
/* Full HD, monitores 1440p */
@media (min-width: 1441px) and (max-width: 1920px) {
    .login-box {
        width: var(--container-xl);
        padding: clamp(3.5rem, 2vw, 4rem) clamp(3rem, 1.5vw, 3.5rem);
    }
    
    .login-icon img {
        width: clamp(6.5rem, 3vw, 7rem);
        height: clamp(6.5rem, 3vw, 7rem);
    }
    
    .form-group input,
    .btn {
        min-height: clamp(4rem, 3vw, 4.5rem);
    }
}

/* ===== 4K / ULTRA-WIDE (1921px-2560px) ===== */
@media (min-width: 1921px) and (max-width: 2560px) {
    .login-box {
        width: min(calc(100% - 6rem), 52rem);
        padding: clamp(4rem, 1.5vw, 4.5rem) clamp(3.5rem, 1.25vw, 4rem);
    }
    
    .login-icon img {
        width: clamp(7rem, 2.5vw, 8rem);
        height: clamp(7rem, 2.5vw, 8rem);
    }
    
    .form-group input,
    .btn {
        min-height: clamp(4.5rem, 2.5vw, 5rem);
    }
    
    .login-lang-btn {
        min-width: clamp(4.5rem, 2.5vw, 5rem);
        min-height: clamp(4.5rem, 2.5vw, 5rem);
    }
}

/* ===== 8K+ (2561px+) ===== */
@media (min-width: 2561px) {
    .login-box {
        width: min(calc(100% - 8rem), 56rem);
        padding: 5rem 4.5rem;
    }
    
    .login-icon img {
        width: 9rem;
        height: 9rem;
    }
    
    .form-group input,
    .btn {
        min-height: 5.5rem;
    }
}

/* ============================================================================
   HEIGHT-BASED MEDIA QUERIES
   Para dispositivos com altura limitada
   ============================================================================ */

/* ===== LANDSCAPE MOBILE (altura ≤500px) ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .login-container {
        padding: clamp(0.5rem, 2vh, 1rem) clamp(1rem, 3vw, 2rem);
    }
    
    .login-box {
        padding: clamp(0.75rem, 3vh, 1.25rem) clamp(1.25rem, 3vw, 2rem);
        width: min(95%, 50rem);
    }
    
    .login-icon {
        margin-bottom: clamp(0.5rem, 2vh, 0.75rem);
    }
    
    .login-icon img {
        width: clamp(2rem, 8vh, 2.5rem);
        height: clamp(2rem, 8vh, 2.5rem);
    }
    
    .login-box h1 {
        font-size: clamp(1rem, 4vh, 1.25rem);
        margin-bottom: clamp(0.25rem, 1vh, 0.5rem);
    }
    
    .login-subtitle {
        font-size: clamp(0.75rem, 3vh, 0.875rem);
        margin-bottom: clamp(0.5rem, 2vh, 0.75rem);
    }
    
    .form-group {
        margin-bottom: clamp(0.5rem, 2vh, 0.75rem);
    }
    
    .form-group label {
        font-size: clamp(0.75rem, 3vh, 0.875rem);
    }
    
    .form-group input,
    .btn {
        min-height: clamp(2.5rem, 10vh, 3rem);
        font-size: clamp(0.875rem, 3.5vh, 1rem);
    }
    
    .remember-me {
        margin-bottom: clamp(0.5rem, 2vh, 0.75rem);
    }
    
    .login-footer {
        margin-top: clamp(0.5rem, 2vh, 0.75rem);
    }
    
    /* Esconde elementos decorativos para economizar espaço vertical */
    .floating-icon,
    .login-container::before,
    .login-container::after {
        display: none;
    }
}

/* ===== SHORT SCREENS (501px-700px altura) ===== */
@media (min-height: 501px) and (max-height: 700px) {
    .login-container {
        padding: clamp(1rem, 3vh, 1.5rem) clamp(1rem, 3vw, 2rem);
    }
    
    .login-box {
        padding: clamp(1.5rem, 4vh, 2rem) clamp(1.5rem, 3vw, 2rem);
    }
}

/* ===== TALL SCREENS (1081px+ altura) ===== */
@media (min-height: 1081px) {
    .login-container {
        padding: clamp(3rem, 5vh, 4rem) clamp(2rem, 3vw, 3rem);
    }
    
    .login-box {
        padding: clamp(3rem, 5vh, 4rem) clamp(2.5rem, 3vw, 3.5rem);
    }
}

/* ============================================================================
   CONTAINER QUERIES
   Responsividade baseada no tamanho do container, não do viewport
   ============================================================================ */

@container login-card (min-width: 400px) {
    .form-group {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-2xs);
    }
}

@container login-card (min-width: 500px) {
    .login-language-selector {
        gap: var(--space-sm);
    }
    
    .login-lang-btn {
        padding: var(--space-xs) var(--space-md);
    }
}

/* ============================================================================
   ACCESSIBILITY & USER PREFERENCES
   ============================================================================ */

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .floating-icon {
        animation: none;
        opacity: 0.06;
    }
    
    .login-container::before,
    .login-container::after {
        animation: none;
    }
    
    .login-box::before {
        animation: none;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    :root {
        --color-border: #000;
        --color-text: #000;
        --color-bg: #fff;
    }
    
    .login-box {
        border: 3px solid currentColor;
        background: var(--color-bg);
    }
    
    .form-group input {
        border: 2px solid currentColor;
    }
    
    .form-group input:focus {
        outline: 4px solid currentColor;
        outline-offset: 2px;
    }
    
    .btn-primary {
        border: 3px solid currentColor;
    }
    
    .login-lang-btn {
        border: 2px solid currentColor;
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #1a1a2e;
        --color-overlay: rgba(26, 26, 46, 0.95);
        --color-text: #eee;
        --color-text-muted: #aaa;
        --color-border: #444;
        --color-border-focus: rgba(102, 126, 234, 0.7);
    }
    
    .login-box {
        background: var(--color-overlay);
        border-color: rgba(255, 255, 255, 0.15);
    }
    
    .form-group input {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--color-border);
        color: var(--color-text);
    }
    
    .form-group input::placeholder {
        color: var(--color-text-muted);
    }
    
    .form-group input:focus {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--color-primary-light);
    }
    
    .login-lang-btn {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(102, 126, 234, 0.4);
        color: var(--color-text);
    }
    
    .btn-back-to-menu {
        background: rgba(255, 255, 255, 0.03);
        border-color: var(--color-border);
        color: var(--color-text);
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    body {
        background: white;
    }
    
    .login-container {
        background: white;
        padding: 2rem;
    }
    
    .login-container::before,
    .login-container::after,
    .floating-icon,
    .loading-overlay {
        display: none !important;
    }
    
    .login-box {
        box-shadow: none;
        border: 2px solid #000;
        background: white;
        page-break-inside: avoid;
    }
    
    .login-box::before {
        display: none;
    }
    
    .btn,
    .login-lang-btn {
        border: 1px solid #000;
    }
}

/* ============================================================================
   TOUCH & POINTER OPTIMIZATIONS
   ============================================================================ */

/* ===== TOUCH DEVICES (sem hover) ===== */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects */
    .btn:hover,
    .login-lang-btn:hover,
    .btn-back-to-menu:hover {
        transform: none;
    }
    
    /* Adiciona feedback visual no :active */
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    .login-lang-btn:active {
        transform: scale(0.95);
    }
    
    /* Aumenta área de toque */
    .form-group input {
        min-height: var(--touch-large);
    }
    
    .btn {
        min-height: var(--touch-large);
    }
    
    .login-lang-btn {
        min-width: var(--touch-large);
        min-height: var(--touch-large);
    }
}

/* ===== DEVICES COM HOVER PRECISO ===== */
@media (hover: hover) and (pointer: fine) {
    .btn,
    .login-lang-btn,
    .btn-back-to-menu {
        cursor: pointer;
    }
    
    .form-group input:hover {
        border-color: var(--color-border-focus);
    }
    
    .remember-me label:hover {
        color: var(--color-text);
    }
}

/* ============================================================================
   ERROR MESSAGES & ALERTS
   ============================================================================ */

#loginError {
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
    background: rgba(214, 48, 49, 0.1);
    border: 2px solid var(--color-error);
    color: var(--color-error);
    font-size: var(--text-sm);
    font-weight: 600;
    display: none;
    animation: slideDown 0.3s ease;
}

#loginError:not(:empty) {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   FOCUS MANAGEMENT
   ============================================================================ */

/* Focus visible para navegação por teclado */
*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    transition: outline-offset var(--transition-fast);
}

/* Remove outline padrão mas mantém para :focus-visible */
*:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================================
   END OF RESPONSIVE DESIGN SYSTEM
   ============================================================================
   
   TÉCNICAS APLICADAS:
   ✓ Mobile-First Approach (280px base)
   ✓ Fluid Typography com clamp()
   ✓ Fluid Spacing com clamp()
   ✓ Container Queries (@container)
   ✓ Modern Viewport Units (dvh)
   ✓ Media Queries Completas (280px-8K+)
   ✓ Height-Based Media Queries
   ✓ Orientation-Based Media Queries
   ✓ Touch & Pointer Optimizations
   ✓ WCAG 2.2 AA Compliance
   ✓ Reduced Motion Support
   ✓ High Contrast Mode
   ✓ Dark Mode Support
   ✓ Print Styles
   ✓ Margens MAIORES em telas pequenas
   ✓ Scroll natural permitido
   
   BREAKPOINTS COBERTOS:
   - 280px-320px: Galaxy Fold, dispositivos minúsculos
   - 321px-375px: iPhone SE, Android pequeno
   - 376px-480px: iPhone 13/14/15, Android médio
   - 481px-600px: iPhone Pro Max, phablets
   - 601px-768px: iPad Mini, tablets pequenos
   - 769px-1024px: iPad, tablets médios
   - 1025px-1280px: iPad Pro, notebooks pequenos
   - 1281px-1440px: Notebooks 13-15"
   - 1441px-1920px: Full HD, 1440p
   - 1921px-2560px: 4K, Ultra-wide
   - 2561px+: 8K, multi-monitor
   
   ============================================================================ */