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

/* ---------------------------------------------------
   RESET + PWA FIRST
--------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.body {
    font-family: 'Inter', sans-serif;

    /* Fundo */
    background-color: #F1F8E9;
    background-image: radial-gradient(#2E7D32 0.5px, transparent 0.5px);
    background-size: 20px 20px;

    /* Viewport PWA correta */
    min-height: 100svh;
    min-height: 100dvh;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Safe-area (notch / gesture bar) */
    padding:
        calc(16px + env(safe-area-inset-top))
        calc(16px + env(safe-area-inset-right))
        calc(16px + env(safe-area-inset-bottom))
        calc(16px + env(safe-area-inset-left));

    overflow-x: hidden;
}

/* ---------------------------------------------------
   CONTAINER
--------------------------------------------------- */
.container {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.2);
    overflow: hidden;
    position: relative;
}

/* Animação */
.fade-in {
    animation: fadeIn .4s ease-in-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------------
   HEADER
--------------------------------------------------- */
.header {
    height: 132px;
    background: linear-gradient(to bottom right, #2E7D32, #1B5E20);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.header-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23ffffff"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/svg%3E');
}

/* Logo */
.logo-area {
    text-align: center;
    z-index: 10;
}

.logo-icon {
    background: #ffffff;
    border-radius: 999px;
    padding: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.logo-icon i {
    font-size: 22px;
    color: #2E7D32;
}

.logo-area h1 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
}

/* Curva inferior */
.header-curve {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 48px;
}

/* ---------------------------------------------------
   CONTEÚDO
--------------------------------------------------- */
.content {
    padding: 28px 28px 20px;
}

/* Textos */
.title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.subtitle {
    margin-top: 2px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #666;
}

/* ---------------------------------------------------
   INPUTS
--------------------------------------------------- */
.input-group {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.input-field {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border: 1px solid #CFD8DC;
    border-radius: 12px;
    background: #ffffff;
    font-size: 15px;
    transition: .25s ease;
}

.input-field:focus {
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46,125,50,0.25);
    outline: none;
}

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #78909C;
    font-size: 16px;
}

/* ---------------------------------------------------
   BOTÃO LOGIN
--------------------------------------------------- */
.btn-login {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    background: #2E7D32;
    color: #ffffff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    transition: background .25s ease;
    font-size: medium;
}

.btn-login:hover {
    background: #1B5E20;
}

.loader {
    width: 20px;
    height: 20px;
    border: 3px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

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

.hidden {
    display: none;
}

/* ---------------------------------------------------
   DIVISOR
--------------------------------------------------- */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
}

.divider div {
    flex: 1;
    height: 1px;
    background: #E0E0E0;
}

.divider span {
    font-size: 11px;
    color: #999;
}

/* ---------------------------------------------------
   SOCIAL
--------------------------------------------------- */
.social-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.social-btn {
    margin-top: 2%;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #E0E0E0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: medium;
}

.social-btn-apple {
    margin-top: 2%;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #E0E0E0;
    background: #000000;
    color: #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: medium;
}

.social-btn:hover {
    background: #FAFAFA;
}

/* ---------------------------------------------------
   TOAST (SAFE AREA)
--------------------------------------------------- */
.toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(20px + env(safe-area-inset-bottom));

    background: #2E7D32;
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 20px;

    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;

    display: flex;
    align-items: center;
    gap: 8px;
    font-size: medium;
}

/* Estados */
.toast.success {
    background: #2E7D32;
}

.toast.error {
    background: #C62828;
}

.toast.info {
    background: #1565C0;
}

.toast.warning {
    background: #F9A825;
    color: #212121;
}


/* ---------------------------------------------------
   DESKTOP (opcional)
--------------------------------------------------- */
@media (min-width: 768px) {
    body.body {
        padding: 32px;
    }
}