/* ========================================================== */
/* ==   CSS da Página de Login - v2.1 UX PREMIUM           == */
/* ==   PROJETO HAVAIANÁTICOS - PERFECCIONISMO FINAL       == */
/* ==   REFINAMENTO: Micro-interações, Sombras e Coerência == */
/* ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Inter:wght@400;500;700&display=swap');

:root {
    /* Cores atualizadas para um tom más profundo e premium */
    --color-primary: #004d80; /* Azul principal más escuro */
    --color-primary-dark: #003a60; /* Para hover, ainda más escuro */
    --color-primary-light: #b3e0ff; /* Para foco, um azul más claro e vibrante */
    --color-secondary: #FFC300; /* Amarelo de destaque */
    --color-surface: #ffffff;
    --color-background: #f8f9fa; /* Fundo do input más claro */
    --color-text-primary: #212529; /* Texto principal más escuro */
    --color-text-secondary: #6c757d; /* Texto secundário más suave */
    --color-border: #ced4da; /* Borda más neutra */
    --color-danger: #dc3545; /* Vermelho padrão para erros */
    
    /* Fontes e Espaçamento */
    --font-family-sans: 'Inter', sans-serif;
    --font-family-headings: 'Poppins', sans-serif;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Bordas e Sombras refinadas */
    --radius-md: 8px;
    --radius-lg: 16px;
    --shadow-subtle: 0 4px 8px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 10px 20px rgba(0, 0, 0, 0.1);
    --shadow-deep: 0 15px 30px rgba(0, 0, 0, 0.15);

    /* Transições más responsivas e fluidas */
    --transition-fast: 0.2s ease-out;
    --transition-base: 0.3s ease-in-out;
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- RESET BÁSICO E CONFIGURAÇÕES GLOBAIS --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px; /* Garante base para rem units */
}

body {
    font-family: var(--font-family-sans);
    background-color: #f3f8e9; /* Um verde bem claro como fallback */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden; /* Evita scroll desnecessário */
    padding: var(--spacing-md);
    /* Novo fundo com gradiente RGB complexo e tropical */
    background: linear-gradient(135deg,
        rgba(252, 234, 187, 0.8) 10%,   /* Amarelo suave do sol tropical */
        rgba(173, 216, 230, 0.7) 30%,   /* Azul claro do céu matinal */
        rgba(144, 238, 144, 0.6) 50%,   /* Verde vívido da vegetação */
        rgba(255, 165, 0, 0.7) 70%,     /* Laranja quente do entardecer */
        rgba(139, 0, 139, 0.6) 90%      /* Roxo crepuscular sutil */
    );
    /* Adicionando uma segunda camada de gradiente sutil para profundidade */
    background-size: 200% 200%;
    animation: gradientAnimation 15s ease infinite; /* Animação lenta e suave */
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* --- LOGIN CONTAINER E CAIXA --- */
.login-container {
    width: 100%;
    max-width: 440px; /* Levemente maior para um visual más robusto */
    padding: var(--spacing-md); /* Garante padding em telas pequenas */
}

.login-box {
    background-color: var(--color-surface);
    padding: var(--spacing-xl) 2.5rem; /* Ajuste de padding */
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-medium); /* Sombra más destacada */
    text-align: center;
    animation: fadeInSlideUp 0.8s var(--transition-slow) forwards; /* Animação de entrada aprimorada */
    opacity: 0;
    transform: translateY(20px);
    position: relative; /* Para z-index se necessário */
    z-index: 2; /* Garante que fique acima de possíveis elementos de fundo */
}

@keyframes fadeInSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-logo-img {
    max-width: 220px; /* Tamanho do logo ajustado */
    height: auto;
    margin-bottom: var(--spacing-lg); /* Más espaçamento */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* Sombra sutil no logo */
}

.login-subtitle {
    font-family: var(--font-family-headings); /* Fonte Poppins para o subtítulo */
    font-size: 1.15rem; /* Subtítulo um pouco mayor */
    color: var(--color-text-secondary);
    margin-top: 0.5rem;
    margin-bottom: var(--spacing-xl); /* Más espaçamento */
    font-weight: 500;
}

/* --- CAMPOS DE INPUT --- */
.input-group {
    text-align: left;
    margin-bottom: var(--spacing-lg); /* Espaçamento entre grupos de input */
}

.input-group label {
    display: block;
    font-weight: 600; /* Más peso para o label */
    font-size: 0.95rem; /* Tamaño da fonte do label ajustado */
    color: var(--color-text-primary);
    margin-bottom: 0.6rem; /* Más espaçamento entre label e input */
    transition: color var(--transition-fast);
}

.input-group input {
    width: 100%;
    padding: 13px 18px; /* Padding aprimorado */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md); /* Borda más suave */
    font-size: 1.05rem; /* Tamaño da fonte do input ajustado */
    background-color: var(--color-background);
    color: var(--color-text-primary);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

.input-group input:hover {
    border-color: var(--color-primary-light);
}

.input-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 77, 128, 0.2); /* Sombra de foco más sutil */
    background-color: var(--color-surface); /* Fundo branco no foco */
}

/* --- BOTÃO DE LOGIN --- */
.login-button {
    width: 100%;
    min-height: 52px; /* Altura ligeiramente mayor */
    padding: 14px 20px;
    border: none;
    border-radius: var(--radius-md); /* Borda más suave */
    background-color: var(--color-primary);
    color: white;
    font-size: 1.15rem; /* Fonte um pouco mayor */
    font-weight: 700; /* Más impacto */
    cursor: pointer;
    transition: background-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
    margin-top: var(--spacing-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-subtle); /* Sombra sutil no botão */
}

.login-button:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px); /* Efeito de elevação sutil */
    box-shadow: var(--shadow-medium); /* Sombra mayor no hover */
}

.login-button:active:not(:disabled) {
    transform: translateY(0); /* Retorna na ativação */
    box-shadow: var(--shadow-subtle); /* Sombra menor na ativação */
}

.login-button:disabled {
    cursor: not-allowed;
    background-color: #a0aec0; /* Cor más suave para disabled */
    opacity: 0.8;
    box-shadow: none;
}

/* --- MENSAGEM DE ERRO --- */
.error-message {
    color: var(--color-danger);
    margin-top: var(--spacing-md);
    font-size: 0.95rem;
    font-weight: 600; /* Más peso para a mensagem de erro */
    min-height: 20px;
    text-align: center;
    opacity: 0; /* Começa invisível */
    animation: fadeInError 0.5s ease-out forwards; /* Animação de entrada para erro */
}

@keyframes fadeInError {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ESTILOS DO SPINNER E TREMOR --- */
.loader {
    width: 26px; /* Tamaño do spinner ajustado */
    height: 26px;
    border: 3px solid rgba(255, 255, 255, 0.4); /* Borda más visível */
    border-left-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite; /* Rotação más rápida */
}

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

.shake {
    animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}

/* --- RESPONSIVIDADE ADICIONAL --- */
@media (max-width: 480px) {
    .login-box {
        padding: var(--spacing-xl) var(--spacing-lg); /* Menos padding lateral em telas muito pequenas */
    }

    .login-logo-img {
        max-width: 180px; /* Logo menor em telas muito pequenas */
    }

    .login-subtitle {
        font-size: 1rem;
        margin-bottom: var(--spacing-lg);
    }

    .input-group label {
        font-size: 0.875rem;
    }

    .input-group input {
        font-size: 0.95rem;
        padding: 10px 14px;
    }

    .login-button {
        font-size: 1rem;
        min-height: 48px;
        padding: 10px 14px;
    }
}

/* ========================================================== */
/* ==   ESTILOS ADICIONAIS PARA O RECIBO (TROCO)           == */
/* ========================================================== */
.receipt-line-item {
    display: flex;
    justify-content: space-between;
    padding: 2px 5px;
    font-size: 10pt;
}

.receipt-line-item.receipt-change {
    font-weight: bold;
    font-size: 12pt;
    margin-top: 5px;
}