/* ============================================================
   ARCHIVO  : CssLogin.css
   MODULO   : Login (FreLogin.php)
   DESCRIPCION: Estilos exclusivos de la pagina de Login.
                Diseño profesional y moderno con dos columnas:
                panel izquierdo decorativo + panel derecho con form.
                Mensajes de error/info con estilos HTML/CSS propios.
                No depende de CssMenu.css — pagina completamente autonoma.
   COMENTARIOS: En español  |  CODIGO: En ingles
   AUTOR    : Trucking Management System
   FECHA    : 2026
   ============================================================ */

/* -------------------------------------------------------
   RESET Y BASE
   ------------------------------------------------------- */
*, *::before, *::after {
    margin: 0;                          /* Sin margen por defecto */
    padding: 0;                         /* Sin padding por defecto */
    box-sizing: border-box;             /* Incluye borde en el calculo de ancho */
}

html, body {
    height: 100%;                       /* Ocupa toda la ventana */
    font-family: 'Nunito', sans-serif;  /* Fuente principal del sistema */
    background: #0a1628;                /* Fondo muy oscuro — azul casi negro */
    color: #2c3e50;                     /* Texto oscuro por defecto */
    overflow: hidden;                   /* Sin scroll en el body */
}

/* -------------------------------------------------------
   CONTENEDOR RAIZ — dos columnas (panel + formulario)
   ------------------------------------------------------- */
.lg-root {
    display: flex;                      /* Flexbox horizontal */
    height: 100vh;                      /* Altura completa de la ventana */
    width: 100vw;                       /* Ancho completo de la ventana */
}

/* -------------------------------------------------------
   PANEL IZQUIERDO — decorativo con imagen y branding
   ------------------------------------------------------- */
.lg-panel {
    flex: 1;                            /* Ocupa el espacio disponible */
    background: linear-gradient(
        145deg,
        #0d1f3c 0%,
        #1a3a5c 45%,
        #0f2d50 100%
    );                                  /* Gradiente azul marino profundo */
    display: flex;                      /* Flexbox para centrar contenido */
    flex-direction: column;             /* Columna vertical */
    align-items: center;                /* Centrado horizontal */
    justify-content: center;            /* Centrado vertical */
    padding: 60px 50px;                 /* Espaciado interior generoso */
    position: relative;                 /* Para elementos decorativos */
    overflow: hidden;                   /* Recorta decorativos */
}

/* Circulo decorativo grande en esquina superior derecha */
.lg-panel::before {
    content: '';                        /* Elemento decorativo */
    position: absolute;                 /* Posicion absoluta */
    top: -120px;                        /* Fuera del borde superior */
    right: -120px;                      /* Fuera del borde derecho */
    width: 400px;                       /* Tamaño del circulo */
    height: 400px;                      /* Tamaño del circulo */
    border-radius: 50%;                 /* Circular */
    background: rgba(61,155,212,0.08);  /* Azul acento muy suave */
    pointer-events: none;               /* No interfiere con clicks */
}

/* Circulo decorativo pequeño en esquina inferior izquierda */
.lg-panel::after {
    content: '';                        /* Elemento decorativo */
    position: absolute;                 /* Posicion absoluta */
    bottom: -80px;                      /* Fuera del borde inferior */
    left: -80px;                        /* Fuera del borde izquierdo */
    width: 280px;                       /* Tamaño del circulo */
    height: 280px;                      /* Tamaño del circulo */
    border-radius: 50%;                 /* Circular */
    background: rgba(61,155,212,0.05);  /* Azul acento muy suave */
    pointer-events: none;               /* No interfiere con clicks */
}

/* Contenido del panel izquierdo */
.lg-panel-content {
    position: relative;                 /* Por encima de los decorativos */
    z-index: 1;                         /* Capa sobre los circulos */
    text-align: center;                 /* Centrado */
    max-width: 420px;                   /* Ancho maximo */
}

/* Icono / Logo del camion */
.lg-panel-icon {
    font-size: 90px;                    /* Camion grande */
    line-height: 1;                     /* Sin separacion extra */
    margin-bottom: 28px;                /* Separacion inferior */
    display: block;                     /* Bloque para centrar */
    filter: drop-shadow(0 8px 24px rgba(61,155,212,0.35)); /* Sombra azul */
}

/* Titulo principal del panel */
.lg-panel-title {
    font-family: 'Oswald', sans-serif;  /* Fuente Oswald */
    font-size: 34px;                    /* Tamaño grande */
    font-weight: 700;                   /* Negrita */
    color: #ffffff;                     /* Blanco */
    letter-spacing: 1px;                /* Espaciado de letras */
    margin-bottom: 12px;                /* Separacion inferior */
    line-height: 1.2;                   /* Altura de linea */
}

/* Subtitulo del panel */
.lg-panel-sub {
    font-size: 15px;                    /* Tamaño del subtitulo */
    color: rgba(255,255,255,0.55);      /* Blanco con transparencia */
    line-height: 1.6;                   /* Altura de linea comoda */
    margin-bottom: 40px;                /* Separacion inferior */
}

/* Linea divisora decorativa */
.lg-panel-divider {
    width: 60px;                        /* Ancho de la linea */
    height: 3px;                        /* Grosor de la linea */
    background: linear-gradient(
        90deg, #3d9bd4, transparent
    );                                  /* Gradiente hacia transparente */
    border-radius: 2px;                 /* Bordes redondeados */
    margin: 0 auto 36px;                /* Centrado con separacion */
}

/* Features / caracteristicas listadas */
.lg-panel-features {
    display: flex;                      /* Flexbox vertical */
    flex-direction: column;             /* Columna */
    gap: 14px;                          /* Espacio entre items */
    text-align: left;                   /* Texto a la izquierda */
}

.lg-feature-item {
    display: flex;                      /* Flexbox horizontal */
    align-items: center;                /* Alineacion vertical */
    gap: 12px;                          /* Espacio entre icono y texto */
}

.lg-feature-icon {
    width: 34px;                        /* Ancho fijo del circulo */
    height: 34px;                       /* Alto fijo del circulo */
    border-radius: 50%;                 /* Circular */
    background: rgba(61,155,212,0.18);  /* Fondo azul suave */
    border: 1px solid rgba(61,155,212,0.30); /* Borde azul suave */
    display: flex;                      /* Flexbox para centrar */
    align-items: center;                /* Centrado vertical */
    justify-content: center;            /* Centrado horizontal */
    font-size: 15px;                    /* Tamaño del emoji */
    flex-shrink: 0;                     /* No se encoge */
}

.lg-feature-text {
    font-size: 13px;                    /* Tamaño del texto */
    color: rgba(255,255,255,0.65);      /* Blanco con transparencia */
    font-weight: 500;                   /* Peso medio */
}

/* -------------------------------------------------------
   PANEL DERECHO — formulario de login
   ------------------------------------------------------- */
.lg-form-panel {
    width: 480px;                       /* Ancho fijo del panel de formulario */
    min-width: 480px;                   /* Ancho minimo */
    background: #ffffff;                /* Fondo blanco */
    display: flex;                      /* Flexbox vertical */
    flex-direction: column;             /* Columna */
    align-items: center;                /* Centrado horizontal */
    justify-content: center;            /* Centrado vertical */
    padding: 50px 50px;                 /* Espaciado interior */
    position: relative;                 /* Para el logo superior */
    overflow-y: auto;                   /* Scroll si el contenido es largo */
}

/* Logo de la compañia en la parte superior */
.lg-company-logo {
    width: 72px;                        /* Ancho del logo */
    height: 72px;                       /* Alto del logo */
    border-radius: 16px;                /* Bordes redondeados */
    background: linear-gradient(
        135deg, #1a3a5c, #1565c0
    );                                  /* Gradiente azul si no hay imagen */
    display: flex;                      /* Flexbox para centrar */
    align-items: center;                /* Centrado vertical */
    justify-content: center;            /* Centrado horizontal */
    font-size: 34px;                    /* Tamaño del icono */
    margin-bottom: 20px;                /* Separacion inferior */
    overflow: hidden;                   /* Recorta la imagen */
    box-shadow: 0 6px 20px rgba(21,101,192,0.25); /* Sombra azul */
}

.lg-company-logo img {
    width: 100%;                        /* Ocupa todo el ancho */
    height: 100%;                       /* Ocupa todo el alto */
    object-fit: contain;                /* Sin distorsion */
}

/* Titulo del formulario */
.lg-form-title {
    font-family: 'Oswald', sans-serif;  /* Fuente Oswald */
    font-size: 26px;                    /* Tamaño del titulo */
    font-weight: 700;                   /* Negrita */
    color: #1a3a5c;                     /* Azul oscuro del sistema */
    margin-bottom: 6px;                 /* Separacion inferior */
    text-align: center;                 /* Centrado */
}

/* Subtitulo del formulario */
.lg-form-sub {
    font-size: 13px;                    /* Tamaño del subtitulo */
    color: #111111;                     /* Gris azulado */
    margin-bottom: 32px;                /* Separacion inferior */
    text-align: center;                 /* Centrado */
}

/* Formulario completo */
.lg-form {
    width: 100%;                        /* Ancho completo */
    display: flex;                      /* Flexbox vertical */
    flex-direction: column;             /* Columna */
    gap: 18px;                          /* Espacio entre campos */
}

/* Grupo de campo (label + input) */
.lg-field {
    display: flex;                      /* Flexbox vertical */
    flex-direction: column;             /* Columna */
    gap: 6px;                           /* Espacio entre label e input */
}

/* Etiqueta del campo */
.lg-label {
    font-size: 12px;                    /* Tamaño de la etiqueta */
    font-weight: 700;                   /* Negrita */
    color: #111111;                     /* Gris azulado medio */
    text-transform: uppercase;          /* Mayusculas */
    letter-spacing: 0.5px;             /* Espaciado de letras */
}

/* Input base */
.lg-input {
    width: 100%;                        /* Ancho completo */
    padding: 13px 16px;                 /* Espaciado interior */
    border: 2px solid #eceff1;          /* Borde gris claro */
    border-radius: 10px;                /* Bordes redondeados */
    font-size: 15px;                    /* Tamaño del texto */
    font-family: 'Nunito', sans-serif;  /* Fuente Nunito */
    color: #111111;                     /* Texto oscuro */
    background: #fafbfc;                /* Fondo gris muy claro */
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    outline: none;                      /* Sin outline nativo */
}

.lg-input:focus {
    border-color: #1565c0;              /* Borde azul al enfocar */
    background: #ffffff;                /* Fondo blanco al enfocar */
    box-shadow: 0 0 0 4px rgba(21,101,192,0.10); /* Halo azul suave */
}

.lg-input::placeholder {
    color: #111111;                     /* Gris claro para placeholder */
    font-weight: 400;                   /* Peso normal */
}

/* -------------------------------------------------------
   BOTÓN DE LOGIN
   ------------------------------------------------------- */
.lg-btn {
    width: 100%;                        /* Ancho completo */
    padding: 14px 20px;                 /* Espaciado interior */
    background: linear-gradient(
        135deg, #1565c0, #0d47a1
    );                                  /* Gradiente azul solido */
    color: #ffffff;                     /* Texto blanco */
    border: none;                       /* Sin borde */
    border-radius: 10px;                /* Bordes redondeados */
    font-size: 16px;                    /* Tamaño del texto */
    font-weight: 700;                   /* Negrita */
    font-family: 'Nunito', sans-serif;  /* Fuente Nunito */
    cursor: pointer;                    /* Cursor de mano */
    letter-spacing: 0.5px;             /* Espaciado de letras */
    transition: all 0.2s;               /* Transicion suave */
    box-shadow: 0 4px 16px rgba(21,101,192,0.35); /* Sombra azul */
    margin-top: 6px;                    /* Separacion superior */
    display: flex;                      /* Flexbox para centrar */
    align-items: center;                /* Centrado vertical */
    justify-content: center;            /* Centrado horizontal */
    gap: 8px;                           /* Espacio entre icono y texto */
}

.lg-btn:hover {
    background: linear-gradient(
        135deg, #1976d2, #1565c0
    );                                  /* Azul mas claro al hover */
    transform: translateY(-1px);        /* Leve elevation */
    box-shadow: 0 6px 20px rgba(21,101,192,0.45);
}

.lg-btn:active {
    transform: translateY(0);           /* Vuelve al presionar */
    box-shadow: 0 2px 8px rgba(21,101,192,0.30);
}

.lg-btn:disabled {
    opacity: 0.7;                       /* Atenuado cuando deshabilitado */
    cursor: not-allowed;                /* Cursor de no disponible */
    transform: none;                    /* Sin transformacion */
}

/* Spinner dentro del boton */
.lg-spinner {
    display: none;                      /* Oculto por defecto */
    width: 18px;                        /* Ancho */
    height: 18px;                       /* Alto */
    border: 3px solid rgba(255,255,255,0.35); /* Borde base */
    border-top-color: #ffffff;          /* Borde superior blanco */
    border-radius: 50%;                 /* Circular */
    animation: lgSpin 0.7s linear infinite; /* Giro continuo */
    flex-shrink: 0;                     /* No se encoge */
}

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

/* -------------------------------------------------------
   MENSAJES DE ERROR / INFORMACION
   Estilos HTML/CSS propios — sin alert() del navegador
   ------------------------------------------------------- */

/* Contenedor del mensaje */
.lg-msg {
    width: 100%;                        /* Ancho completo */
    border-radius: 10px;                /* Bordes redondeados */
    padding: 14px 16px;                 /* Espaciado interior */
    display: flex;                      /* Flexbox horizontal */
    align-items: flex-start;            /* Alineacion superior */
    gap: 12px;                          /* Espacio entre icono y texto */
    animation: lgMsgIn 0.3s ease;       /* Animacion de entrada */
    margin-bottom: 4px;                 /* Separacion inferior */
}

/* Icono del mensaje */
.lg-msg-icon {
    font-size: 20px;                    /* Tamaño del icono */
    line-height: 1;                     /* Sin separacion extra */
    flex-shrink: 0;                     /* No se encoge */
    margin-top: 1px;                    /* Ajuste visual */
}

/* Bloque de texto del mensaje */
.lg-msg-body {
    display: flex;                      /* Flexbox vertical */
    flex-direction: column;             /* Columna */
    gap: 2px;                           /* Espacio entre titulo y subtexto */
    flex: 1;                            /* Ocupa el espacio disponible */
}

.lg-msg-title {
    font-size: 14px;                    /* Tamaño del titulo */
    font-weight: 700;                   /* Negrita */
    line-height: 1.3;                   /* Altura de linea */
}

.lg-msg-text {
    font-size: 13px;                    /* Tamaño del subtexto */
    font-weight: 500;                   /* Peso medio */
    line-height: 1.4;                   /* Altura de linea */
    opacity: 0.85;                      /* Ligeramente transparente */
}

/* Variante ERROR */
.lg-msg.error {
    background: #fdecea;                /* Rojo muy claro */
    border: 1px solid #ef9a9a;          /* Borde rojo */
    border-left: 4px solid #c62828;     /* Borde izquierdo rojo oscuro */
}

.lg-msg.error .lg-msg-title { color: #b71c1c; } /* Titulo rojo oscuro */
.lg-msg.error .lg-msg-text  { color: #c62828; } /* Subtexto rojo */

/* Variante SUCCESS */
.lg-msg.success {
    background: #e8f5e9;                /* Verde muy claro */
    border: 1px solid #a5d6a7;          /* Borde verde */
    border-left: 4px solid #2e7d32;     /* Borde izquierdo verde oscuro */
}

.lg-msg.success .lg-msg-title { color: #1b5e20; }
.lg-msg.success .lg-msg-text  { color: #2e7d32; }

/* Variante WARNING */
.lg-msg.warning {
    background: #fff8e1;                /* Amarillo muy claro */
    border: 1px solid #ffe082;          /* Borde amarillo */
    border-left: 4px solid #f57f17;     /* Borde izquierdo naranja */
}

.lg-msg.warning .lg-msg-title { color: #e65100; }
.lg-msg.warning .lg-msg-text  { color: #f57f17; }

/* Variante INFO */
.lg-msg.info {
    background: #e3f2fd;                /* Azul muy claro */
    border: 1px solid #90caf9;          /* Borde azul */
    border-left: 4px solid #1565c0;     /* Borde izquierdo azul oscuro */
}

.lg-msg.info .lg-msg-title { color: #0d47a1; }
.lg-msg.info .lg-msg-text  { color: #1565c0; }

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

/* -------------------------------------------------------
   PIE DE PAGINA DEL FORMULARIO
   ------------------------------------------------------- */
.lg-footer {
    margin-top: 28px;                   /* Separacion superior */
    text-align: center;                 /* Centrado */
    font-size: 12px;                    /* Tamaño pequeño */
    color: #111111;                     /* Gris claro */
    line-height: 1.6;                   /* Altura de linea */
}

.lg-footer strong {
    color: #111111;                     /* Ligeramente mas oscuro */
}

/* -------------------------------------------------------
   RESPONSIVE — Pantallas pequeñas
   ------------------------------------------------------- */
@media (max-width: 900px) {
    .lg-panel {
        display: none;                  /* Oculta el panel izquierdo en mobile */
    }
    .lg-form-panel {
        width: 100%;                    /* Ancho completo en mobile */
        min-width: 0;                   /* Sin ancho minimo */
    }
}