@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;800&display=swap');
/* NutriCare — pantallas de acceso. Se carga después de los estilos del core.
   Diseño sobrio: foto de manzanas a la izquierda, formulario limpio a la derecha, colores planos verde manzana. */

:root {
    --nc-manzana: #47801D;         /* botones y enlaces (contraste 4.8:1 con blanco) */
    --nc-manzana-hover: #3D6E16;
    --nc-granny: #8DB600;          /* detalles */
    --nc-suave: #E8F3D2;
    --nc-fondo: #F6FAEE;
    --nc-texto: #263618;
    --nc-gris: #66705C;
}

body {
    background: var(--nc-fondo) !important;
    background-image: none !important;
    font-family: 'Nunito Sans', 'Segoe UI', Tahoma, sans-serif !important;
    color: var(--nc-texto);
}

/* Sin adornos genéricos */
.brand-section::before, .brand-section::after, .btn-primary::before { display: none !important; }
.brand-icon { animation: none !important; }
.aws-badge, .security-badge { display: none !important; }
.login-card { animation: none !important; }

.login-wrapper { max-width: 960px !important; }
.login-card {
    border-radius: 14px !important;
    border: 1px solid #DDE8C8;
    box-shadow: 0 6px 24px rgba(38, 54, 24, .08) !important;
}

/* Panel de marca: foto real de manzanas verdes (si no carga, queda el verde liso) */
.brand-section {
    background-color: var(--nc-manzana) !important;
    background-image:
        linear-gradient(to top, rgba(30, 48, 12, .78) 0%, rgba(30, 48, 12, .15) 45%, rgba(30, 48, 12, 0) 70%),
        url('/img/login-manzanas.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    text-align: left !important;
}
.brand-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
    padding: 6px !important;
    margin: 0 0 14px 0 !important;
    box-shadow: none !important;
    background: #fff !important;
}
.brand-title { font-size: 1.6rem !important; font-weight: 800 !important; letter-spacing: 0 !important; }
.brand-subtitle { font-size: .95rem !important; opacity: .95; }

/* Formulario */
.form-header { text-align: left !important; }
.form-title { color: var(--nc-texto) !important; font-weight: 800 !important; font-size: 1.6rem !important; }
.form-subtitle { color: var(--nc-gris) !important; }
.form-label { color: var(--nc-texto) !important; font-weight: 600 !important; }
.form-input {
    border: 1.5px solid #D5DFC4 !important;
    background: #fff !important;
    border-radius: 10px !important;
}
.form-input:hover { border-color: #B9CB98 !important; }
.form-input:focus {
    border-color: var(--nc-granny) !important;
    box-shadow: 0 0 0 3px rgba(141, 182, 0, .22) !important;
}
.input-wrapper:focus-within .input-icon { color: var(--nc-manzana) !important; }
.btn-primary {
    background: var(--nc-manzana) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transform: none !important;
}
.btn-primary:hover { background: var(--nc-manzana-hover) !important; box-shadow: none !important; transform: none !important; }
a[style*="17a2b8"], .form-section a { color: var(--nc-manzana) !important; }
a[style*="17a2b8"]:hover, .form-section a:hover { color: var(--nc-manzana-hover) !important; text-decoration: underline !important; }
.toggle-pass-btn:hover { color: var(--nc-manzana) !important; }
.footer-text { color: var(--nc-gris) !important; }

/* Escritorio: dos columnas, la foto ocupa toda la altura */
@media (min-width: 900px) {
    .login-card { display: flex !important; min-height: 580px; }
    .brand-section {
        flex: 0 0 46%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 40px !important;
    }
    .form-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 48px 60px !important;
    }
}

/* Celular: la foto queda como franja arriba */
@media (max-width: 899px) {
    .brand-section { min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px !important; }
}