/**
 * ============================================================================
 * ARCHIVO: Csslogin.css
 * UBICACIÓN: Css_Styles/
 * ============================================================================
 * DESCRIPCIÓN GENERAL:
 * Estilos visuales de la página de login del sistema General Sales.
 * Diseño moderno con efecto glassmorphism, fondo degradado oscuro,
 * animaciones CSS suaves y paleta verde-azulada profesional.
 * ============================================================================
 * ÍNDICE DE SECCIONES:
 * 1. Variables CSS Personalizadas
 * 2. Reset y Estilos Base
 * 3. Fondo y Efectos Decorativos
 * 4. Contenedor Principal del Login
 * 5. Tarjeta del Formulario (Glassmorphism)
 * 6. Encabezado: Ícono y Títulos
 * 7. Campos de Entrada del Formulario
 * 8. Botón de Inicio de Sesión
 * 9. Mensajes de Error y Éxito
 * 10. Pie de Página
 * 11. Animaciones CSS (Keyframes)
 * 12. Diseño Responsivo (Media Queries)
 * ============================================================================
 */

/* ============================================================================
   SECCIÓN 1: VARIABLES CSS PERSONALIZADAS
   Descripción: Colores, fuentes y valores reutilizables en todo el login.
   ============================================================================ */
:root {
    --lg-primary: #1B6B4A;              /* Verde bosque principal */
    --lg-primary-hover: #145236;        /* Verde oscuro para hover */
    --lg-accent: #48BB78;               /* Verde brillante de acento */
    --lg-bg-dark: #0C1B2A;             /* Azul muy oscuro del fondo */
    --lg-bg-mid: #122438;              /* Azul oscuro medio */
    --lg-bg-accent: #0F2818;           /* Verde muy oscuro del fondo */
    --lg-card-bg: rgba(255, 255, 255, 0.035); /* Fondo semi-transparente tarjeta */
    --lg-card-border: rgba(255, 255, 255, 0.07); /* Borde sutil tarjeta */
    --lg-text-white: #EAF2ED;          /* Texto principal claro */
    --lg-text-muted: #8FABBF;          /* Texto secundario gris-azul */
    --lg-text-label: #7A9E8E;          /* Texto de etiquetas */
    --lg-input-bg: rgba(255, 255, 255, 0.055); /* Fondo de campos */
    --lg-input-border: rgba(255, 255, 255, 0.1); /* Borde de campos */
    --lg-input-focus: #48BB78;          /* Borde verde en focus */
    --lg-error-bg: rgba(229, 62, 62, 0.12); /* Fondo mensaje error */
    --lg-error-border: rgba(229, 62, 62, 0.3); /* Borde mensaje error */
    --lg-error-text: #FC8181;           /* Texto rojo de error */
    --lg-shadow: rgba(0, 0, 0, 0.35);  /* Sombra base */
    --lg-font-body: 'Nunito Sans', sans-serif; /* Fuente de textos */
    --lg-font-heading: 'Outfit', sans-serif;   /* Fuente de títulos */
}

/* ============================================================================
   SECCIÓN 2: RESET Y ESTILOS BASE
   Descripción: Elimina márgenes/paddings por defecto y aplica border-box.
   ============================================================================ */
*, *::before, *::after {
    margin: 0;                          /* Sin márgenes por defecto */
    padding: 0;                         /* Sin padding por defecto */
    box-sizing: border-box;            /* Padding incluido en el ancho */
}

html {
    font-size: 16px;                    /* Tamaño base para cálculos rem */
    -webkit-font-smoothing: antialiased; /* Suavizado de fuentes WebKit */
}

/* ============================================================================
   SECCIÓN 3: FONDO Y EFECTOS DECORATIVOS
   Descripción: Body con degradado diagonal y orbes luminosas decorativas.
   ============================================================================ */
body {
    font-family: var(--lg-font-body);   /* Fuente Nunito Sans */
    background: linear-gradient(145deg, var(--lg-bg-dark) 0%, var(--lg-bg-mid) 45%, var(--lg-bg-accent) 100%); /* Degradado diagonal */
    min-height: 100vh;                  /* Altura completa de ventana */
    display: flex;                      /* Flexbox para centrar */
    align-items: center;               /* Centrado vertical */
    justify-content: center;           /* Centrado horizontal */
    overflow: hidden;                   /* Sin scroll */
    position: relative;                 /* Para pseudo-elementos */
}

body::before {
    content: '';                         /* Orbe decorativa superior derecha */
    position: absolute;                  /* Posición absoluta */
    top: -15%;                           /* Fuera del viewport arriba */
    right: -8%;                          /* Fuera del viewport derecha */
    width: 550px;                        /* Tamaño de la orbe */
    height: 550px;
    background: radial-gradient(circle, rgba(72, 187, 120, 0.06) 0%, transparent 65%); /* Resplandor verde suave */
    border-radius: 50%;                  /* Forma circular */
    pointer-events: none;                /* No interfiere con clics */
}

body::after {
    content: '';                         /* Orbe decorativa inferior izquierda */
    position: absolute;
    bottom: -12%;                        /* Fuera del viewport abajo */
    left: -8%;                           /* Fuera del viewport izquierda */
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(27, 107, 74, 0.08) 0%, transparent 65%); /* Resplandor verde oscuro */
    border-radius: 50%;
    pointer-events: none;
}

/* ============================================================================
   SECCIÓN 4: CONTENEDOR PRINCIPAL DEL LOGIN
   Descripción: Wrapper que centra y anima la aparición de la tarjeta.
   ============================================================================ */
.login-wrapper {
    width: 100%;                         /* Ancho completo disponible */
    max-width: 430px;                    /* Máximo 430px de ancho */
    padding: 20px;                       /* Padding para pantallas pequeñas */
    position: relative;                  /* Para z-index */
    z-index: 10;                         /* Encima de las orbes */
    animation: slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; /* Entrada desde abajo */
    opacity: 0;                          /* Inicia invisible */
    transform: translateY(25px);         /* Inicia desplazado abajo */
}

/* ============================================================================
   SECCIÓN 5: TARJETA DEL FORMULARIO (GLASSMORPHISM)
   Descripción: Fondo semi-transparente con desenfoque tipo vidrio esmerilado.
   ============================================================================ */
.login-card {
    background: var(--lg-card-bg);      /* Fondo casi transparente */
    border: 1px solid var(--lg-card-border); /* Borde muy sutil */
    border-radius: 20px;                /* Esquinas redondeadas */
    padding: 44px 38px;                 /* Espaciado interno generoso */
    backdrop-filter: blur(30px);        /* Efecto glassmorphism */
    -webkit-backdrop-filter: blur(30px); /* Compatibilidad Safari */
    box-shadow: 0 20px 50px var(--lg-shadow), /* Sombra exterior */
                inset 0 1px 0 rgba(255, 255, 255, 0.04); /* Brillo superior */
}

/* ============================================================================
   SECCIÓN 6: ENCABEZADO: ÍCONO Y TÍTULOS
   Descripción: Ícono de gráfica, título "General Sales" y subtítulo.
   ============================================================================ */
.login-header {
    text-align: center;                  /* Contenido centrado */
    margin-bottom: 36px;                /* Espacio antes del formulario */
}

.login-icon-box {
    width: 68px;                         /* Tamaño del contenedor ícono */
    height: 68px;
    background: linear-gradient(135deg, var(--lg-primary) 0%, var(--lg-accent) 100%); /* Degradado verde */
    border-radius: 16px;                /* Esquinas redondeadas */
    display: flex;                       /* Centra contenido */
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;               /* Centrado con margen inferior */
    box-shadow: 0 8px 25px rgba(27, 107, 74, 0.3); /* Sombra verde */
    position: relative;                  /* Para efecto brillo */
    overflow: hidden;                    /* Oculta brillo que sale */
}

.login-icon-box::after {
    content: '';                          /* Efecto de brillo animado */
    position: absolute;
    top: 0;
    left: -100%;                         /* Inicia fuera por izquierda */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); /* Línea de brillo */
    animation: shine 4s infinite;        /* Animación infinita */
}

.login-icon-box svg {
    width: 32px;                         /* Tamaño del SVG */
    height: 32px;
    fill: none;                          /* Sin relleno */
    stroke: white;                       /* Trazo blanco */
    stroke-width: 2;                     /* Grosor del trazo */
    stroke-linecap: round;              /* Puntas redondeadas */
    stroke-linejoin: round;             /* Uniones redondeadas */
    position: relative;                  /* Sobre el brillo */
    z-index: 2;
}

/* ============================================================================
   SECCIÓN 6B: LOGO DE IMAGEN DE LA EMPRESA
   Descripción: Cuando la empresa tiene un archivo de logo en la carpeta Images,
   se muestra como imagen real en lugar del ícono SVG. Se ajusta dentro de
   un contenedor redondeado con fondo semi-transparente.
   ============================================================================ */
.login-logo-img {
    width: 90px;                         /* Ancho del contenedor del logo */
    height: 90px;                        /* Alto del contenedor del logo */
    border-radius: 18px;                /* Esquinas redondeadas */
    display: flex;                       /* Centra la imagen */
    align-items: center;                /* Centrado vertical */
    justify-content: center;            /* Centrado horizontal */
    margin: 0 auto 18px;               /* Centrado con margen inferior */
    background: rgba(255, 255, 255, 0.06); /* Fondo sutil */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil */
    padding: 8px;                        /* Espacio interno */
    box-shadow: 0 8px 25px rgba(27, 107, 74, 0.2); /* Sombra verde */
    overflow: hidden;                    /* Oculta desbordamiento */
}

.login-logo-img img {
    width: 100%;                         /* Ocupa todo el ancho */
    height: 100%;                        /* Ocupa todo el alto */
    object-fit: contain;                /* Mantiene proporciones sin deformar */
    border-radius: 10px;                /* Bordes redondeados */
}

.login-title {
    font-family: var(--lg-font-heading); /* Fuente Outfit */
    font-size: 26px;                     /* Tamaño grande */
    font-weight: 700;                    /* Negrita */
    color: var(--lg-text-white);         /* Blanco verdoso */
    letter-spacing: -0.3px;
    margin-bottom: 5px;
}

.login-subtitle {
    font-size: 13.5px;                   /* Tamaño pequeño */
    color: var(--lg-text-muted);         /* Gris azulado */
    font-weight: 400;
}

/* ============================================================================
   SECCIÓN 7: CAMPOS DE ENTRADA DEL FORMULARIO
   Descripción: Campos de email y password con íconos y estados de focus.
   ============================================================================ */
.form-group {
    margin-bottom: 20px;                 /* Espacio entre campos */
}

.form-group label {
    display: block;                       /* Ocupa toda la línea */
    font-size: 11.5px;                   /* Tamaño pequeño */
    font-weight: 700;                    /* Negrita */
    color: var(--lg-text-label);         /* Verde grisáceo */
    text-transform: uppercase;           /* Mayúsculas */
    letter-spacing: 0.8px;              /* Espaciado amplio */
    margin-bottom: 7px;                 /* Espacio antes del input */
}

.input-wrapper {
    position: relative;                   /* Para posicionar ícono dentro */
}

.input-icon {
    position: absolute;                   /* Dentro del campo */
    left: 14px;                           /* A 14px del borde izquierdo */
    top: 50%;                             /* Centrado vertical */
    transform: translateY(-50%);         /* Ajuste de centrado */
    color: var(--lg-text-muted);         /* Color gris azulado */
    font-size: 16px;                     /* Tamaño del ícono */
    transition: color 0.3s ease;         /* Transición suave */
    pointer-events: none;                /* No bloquea clics */
}

.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;                          /* Ancho completo */
    padding: 13px 15px 13px 42px;        /* Espacio izquierdo para ícono */
    background: var(--lg-input-bg);      /* Fondo semi-transparente */
    border: 1px solid var(--lg-input-border); /* Borde sutil */
    border-radius: 10px;                /* Esquinas redondeadas */
    font-family: var(--lg-font-body);   /* Fuente Nunito Sans */
    font-size: 14.5px;                   /* Tamaño texto */
    color: var(--lg-text-white);         /* Color texto claro */
    outline: none;                        /* Sin borde focus por defecto */
    transition: all 0.3s ease;           /* Transición suave */
}

.form-group input::placeholder {
    color: rgba(143, 171, 191, 0.45);    /* Placeholder semi-transparente */
}

.form-group input:focus {
    border-color: var(--lg-input-focus); /* Borde verde al focus */
    background: rgba(255, 255, 255, 0.07); /* Fondo más claro */
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.1); /* Resplandor verde */
}

.form-group input:focus ~ .input-icon {
    color: var(--lg-input-focus);        /* Ícono verde al focus */
}

/* ============================================================================
   SECCIÓN 8: BOTÓN DE INICIO DE SESIÓN
   Descripción: Botón verde con degradado, hover y efecto de presión.
   ============================================================================ */
.login-btn {
    width: 100%;                          /* Ancho completo */
    padding: 14px;                       /* Espaciado interno */
    background: linear-gradient(135deg, var(--lg-primary) 0%, #2D8B5E 100%); /* Degradado verde */
    color: white;                         /* Texto blanco */
    border: none;                         /* Sin borde */
    border-radius: 10px;                /* Esquinas redondeadas */
    font-family: var(--lg-font-body);   /* Fuente Nunito Sans */
    font-size: 15px;                     /* Tamaño texto */
    font-weight: 700;                    /* Negrita */
    letter-spacing: 0.5px;
    cursor: pointer;                     /* Cursor de mano */
    transition: all 0.3s ease;           /* Transición suave */
    margin-top: 8px;                    /* Espacio superior */
    box-shadow: 0 4px 15px rgba(27, 107, 74, 0.25); /* Sombra verde */
}

.login-btn:hover {
    background: linear-gradient(135deg, var(--lg-primary-hover) 0%, var(--lg-primary) 100%); /* Más oscuro */
    box-shadow: 0 6px 20px rgba(27, 107, 74, 0.35); /* Sombra más fuerte */
    transform: translateY(-1px);         /* Se eleva 1px */
}

.login-btn:active {
    transform: translateY(1px);          /* Se hunde al clic */
    box-shadow: 0 2px 8px rgba(27, 107, 74, 0.2); /* Sombra reducida */
}

/* ============================================================================
   SECCIÓN 9: MENSAJES DE ERROR Y ÉXITO
   Descripción: Alertas visuales para errores de autenticación y éxitos.
   ============================================================================ */
.alert {
    padding: 12px 16px;                 /* Espaciado interno */
    border-radius: 10px;                /* Esquinas redondeadas */
    margin-bottom: 20px;                /* Espacio debajo */
    font-size: 13.5px;                   /* Tamaño texto */
    font-weight: 500;
    display: flex;                       /* Alinea ícono y texto */
    align-items: center;
    gap: 10px;                           /* Espacio entre ícono y texto */
    animation: fadeIn 0.4s ease;        /* Aparición suave */
}

.alert-error {
    background: var(--lg-error-bg);     /* Fondo rojo suave */
    border: 1px solid var(--lg-error-border); /* Borde rojo */
    color: var(--lg-error-text);         /* Texto rojo claro */
}

.alert-success {
    background: rgba(72, 187, 120, 0.12); /* Fondo verde suave */
    border: 1px solid rgba(72, 187, 120, 0.3); /* Borde verde */
    color: #68D391;                      /* Texto verde claro */
}

.alert-icon {
    font-size: 18px;                     /* Tamaño ícono */
    flex-shrink: 0;                      /* No se encoge */
}

/* ============================================================================
   SECCIÓN 10: PIE DE PÁGINA
   Descripción: Copyright y versión del sistema debajo del formulario.
   ============================================================================ */
.login-footer {
    text-align: center;                  /* Texto centrado */
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Línea separadora */
}

.login-footer p {
    font-size: 12px;                     /* Texto muy pequeño */
    color: rgba(143, 171, 191, 0.4);    /* Color muy tenue */
}

/* ============================================================================
   SECCIÓN 11: ANIMACIONES CSS (KEYFRAMES)
   Descripción: Animaciones de entrada y efectos del login.
   ============================================================================ */
@keyframes slideUp {
    0%   { opacity: 0; transform: translateY(25px); } /* Inicia abajo e invisible */
    100% { opacity: 1; transform: translateY(0); }    /* Termina visible y en posición */
}

@keyframes shine {
    0%, 75% { left: -100%; }  /* Se mantiene fuera */
    100%    { left: 100%; }   /* Cruza hacia la derecha */
}

@keyframes fadeIn {
    0%   { opacity: 0; transform: translateY(-8px); } /* Inicia arriba e invisible */
    100% { opacity: 1; transform: translateY(0); }    /* Termina visible */
}

/* ============================================================================
   SECCIÓN 12: DISEÑO RESPONSIVO (MEDIA QUERIES)
   Descripción: Ajustes para pantallas pequeñas.
   ============================================================================ */
@media screen and (max-width: 480px) {
    .login-card {
        padding: 32px 24px;             /* Menos padding */
        border-radius: 16px;
    }
    .login-title { font-size: 22px; }   /* Título más pequeño */
    .login-icon-box { width: 58px; height: 58px; } /* Ícono más pequeño */
    .login-icon-box svg { width: 26px; height: 26px; }
}

@media screen and (max-width: 360px) {
    .login-wrapper { padding: 12px; }    /* Menos padding exterior */
    .login-card { padding: 28px 20px; }
}