/* Definición de variables CSS globales para colores del tema */
        :root {
            --primary-color: #003b50;      /* Color principal azul oscuro */
            --secondary-color: #667eea;    /* Color secundario morado claro */
            --accent-color: #764ba2;       /* Color de acento morado */
            --dark-color: #1a1a2e;         /* Color oscuro para textos */
            --light-color: #f8f9fa;        /* Color claro para fondos */
        }

        /* Reseteo de estilos por defecto del navegador */
        * {
            margin: 0;                      /* Elimina márgenes por defecto */
            padding: 0;                     /* Elimina padding por defecto */
            box-sizing: border-box;         /* Incluye padding y border en el tamaño total */
        }

        /* Estilos generales del body */
        body {
            font-family: 'Poppins', sans-serif;  /* Aplica la fuente Poppins */
            overflow-x: hidden;                    /* Oculta scroll horizontal */
            background: linear-gradient(135deg, var(--primary-color) 0%, #005a7a 50%, var(--secondary-color) 100%);
            min-height: 100vh;                     /* Altura mínima del 100% del viewport */
            display: flex;                         /* Usa flexbox para layout */
            flex-direction: column;                /* Dirección de columna para flexbox */
        }

        /* Estilos personalizados para el navbar */
        .navbar-custom {
            background: linear-gradient(135deg, var(--primary-color) 0%, #005a7a 100%);  /* Fondo degradado */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);  /* Sombra suave */
            padding: 1rem 0;                             /* Espaciado vertical */
            transition: all 0.3s ease;                   /* Transición suave para cambios */
        }

        /* Estilos del navbar cuando se hace scroll */
        .navbar-custom.scrolled {
            padding: 0.5rem 0;                           /* Reduce padding al hacer scroll */
            box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);  /* Sombra más pronunciada */
        }

        /* Estilos para el logo/marca del navbar */
        .navbar-brand {
            font-size: 1.8rem;              /* Tamaño de fuente grande */
            font-weight: 700;               /* Peso de fuente bold */
            color: white !important;        /* Color blanco forzado */
            display: flex;                  /* Usa flexbox */
            align-items: center;            /* Centra verticalmente */
            gap: 12px;                      /* Espacio entre elementos */
            transition: transform 0.3s ease;  /* Transición suave para transformaciones */
        }

        /* Efecto hover en el logo */
        .navbar-brand:hover {
            transform: scale(1.05);         /* Agranda ligeramente al pasar el mouse */
        }

        /* Estilos para el icono del logo */
        .logo-icon {
            width: 45px;                    /* Ancho del icono */
            height: 45px;                   /* Alto del icono */
            background: white;  /* Fondo degradado */
            border-radius: 12px;            /* Bordes redondeados */
            display: flex;                  /* Usa flexbox */
            align-items: center;            /* Centra verticalmente */
            justify-content: center;        /* Centra horizontalmente */
            font-size: 24px;                /* Tamaño del icono interno */
            color: white;                   /* Color blanco */
           /* box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);   Sombra con color */
        }

        /* Estilos para los enlaces del navbar */
        .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;  /* Color blanco semi-transparente */
            font-weight: 500;                            /* Peso de fuente medio */
            margin: 0 10px;                              /* Margen horizontal */
            padding: 8px 16px !important;                /* Padding interno */
            border-radius: 8px;                          /* Bordes redondeados */
            transition: all 0.3s ease;                   /* Transición suave */
            position: relative;                          /* Posicionamiento relativo para pseudo-elemento */
        }

        /* Pseudo-elemento para línea animada bajo los enlaces */
        .nav-link::after {
            content: '';                    /* Contenido vacío */
            position: absolute;             /* Posicionamiento absoluto */
            bottom: 0;                      /* Posicionado en la parte inferior */
            left: 50%;                      /* Centrado horizontalmente */
            width: 0;                       /* Ancho inicial cero */
            height: 2px;                    /* Altura de la línea */
            background: white;              /* Color blanco */
            transition: all 0.3s ease;      /* Transición suave */
            transform: translateX(-50%);    /* Centrado perfecto */
        }

        /* Efecto hover en enlaces del navbar */
        .nav-link:hover {
            background: rgba(255, 255, 255, 0.1);  /* Fondo blanco semi-transparente */
            color: white !important;                /* Color blanco forzado */
        }

        /* Animación de la línea al hacer hover */
        .nav-link:hover::after {
            width: 80%;                     /* Expande la línea al 80% */
        }

        /* Estilos para menús dropdown */
        .dropdown-menu {
            background: white;              /* Fondo blanco */
            border: none;                   /* Sin borde */
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);  /* Sombra pronunciada */
            border-radius: 12px;            /* Bordes redondeados */
            padding: 10px;                  /* Padding interno */
        }

        /* Estilos para items dentro del dropdown */
        .dropdown-item {
            border-radius: 8px;             /* Bordes redondeados */
            padding: 10px 16px;             /* Padding interno */
            transition: all 0.3s ease;      /* Transición suave */
        }

        /* Efecto hover en items del dropdown */
        .dropdown-item:hover {
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));  /* Fondo degradado */
            color: white;                   /* Color blanco */
            transform: translateX(5px);     /* Desplazamiento a la derecha */
        }

        /* Contenedor principal del formulario de inicio de sesión */
        .iniciosesion-container {
            flex: 1;                        /* Ocupa el espacio disponible */
            display: flex;                  /* Usa flexbox */
            align-items: center;            /* Centra verticalmente */
            justify-content: center;        /* Centra horizontalmente */
            padding: 100px 20px 40px;       /* Padding: superior, horizontal, inferior */
            position: relative;             /* Posicionamiento relativo */
        }

        /* Pseudo-elemento para patrón de fondo */
        .iniciosesion-container::before {
            content: '';                    /* Contenido vacío */
            position: absolute;             /* Posicionamiento absoluto */
            top: 0;                         /* Desde arriba */
            left: 0;                        /* Desde la izquierda */
            right: 0;                       /* Hasta la derecha */
            bottom: 0;                      /* Hasta abajo */
            background: transparent;        /* Fondo transparente */
            opacity: 0.3;                   /* Opacidad reducida */
        }

        /* Caja/tarjeta del formulario de inicio de sesión */
        .iniciosesion-box {
            background: white;              /* Fondo blanco */      
            border-radius: 20px;            /* Bordes redondeados */
            padding: 35px 40px;             /* Padding reducido */
            max-width: 420px;               /* Ancho máximo reducido */
            width: 100%;                    /* Ancho completo hasta el máximo */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);  /* Sombra más sutil */
            position: relative;             /* Posicionamiento relativo */
            z-index: 1;                     /* Sobre el fondo */
            animation: fadeInUp 0.8s ease;  /* Animación de entrada */
            border: 1px solid #e0e0e0;      /* Borde sutil */
        }

        /* Definición de la animación fadeInUp */
        @keyframes fadeInUp {
            from {
                opacity: 0;                 /* Inicia invisible */
                transform: translateY(30px);  /* Inicia 30px abajo */
            }
            to {
                opacity: 1;                 /* Termina visible */
                transform: translateY(0);   /* Termina en posición normal */
            }
        }

        /* Título principal (h1) en la caja de inicio de sesión */
        .iniciosesion-box h1 {
            color: var(--primary-color);    /* Color principal */
            font-size: 2rem;                /* Tamaño reducido */
            font-weight: 700;               /* Peso bold */
            text-align: center;             /* Centrado */
            margin-bottom: 8px;             /* Margen inferior reducido */
        }

        /* Subtítulo (h2) en la caja de inicio de sesión */
        .iniciosesion-box h2 {
            color: #6c757d;                 /* Color gris */
            font-size: 1rem;                /* Tamaño reducido */
            font-weight: 400;               /* Peso normal */
            text-align: center;             /* Centrado */
            margin-bottom: 25px;            /* Margen inferior reducido */
        }

        /* Estilos para etiquetas de formulario */
        .form-label {
            color: var(--dark-color);       /* Color oscuro */
            font-weight: 600;               /* Peso semi-bold */
            margin-bottom: 6px;             /* Margen inferior reducido */
            font-size: 0.9rem;              /* Tamaño reducido */
        }

        /* Estilos para campos de entrada del formulario */
        .form-control {
            border: 2px solid #e0e0e0;      /* Borde gris claro */
            border-radius: 10px;            /* Bordes redondeados */
            padding: 10px 14px;             /* Padding reducido */
            font-size: 0.95rem;             /* Tamaño de fuente reducido */
            transition: all 0.3s ease;      /* Transición suave */
            margin-bottom: 15px;            /* Margen inferior reducido */
        }

        /* Efecto focus en campos de entrada */
        .form-control:focus {
            border-color: var(--secondary-color);  /* Cambia color del borde */
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);  /* Sombra de enfoque */
        }

        /* Estilo para placeholder de campos de entrada */
        .form-control::placeholder {
            color: #adb5bd;                 /* Color gris claro */
        }

        /* Contenedor para inputs con iconos */
        .input-icon {
            position: relative;             /* Posicionamiento relativo */
        }

        /* Iconos dentro de los inputs */
        .input-icon i {
            position: absolute;             /* Posicionamiento absoluto */
            right: 16px;                    /* Posicionado a la derecha */
            top: 50%;                       /* Centrado verticalmente */
            transform: translateY(-50%);    /* Ajuste fino del centrado */
            color: #6c757d;                 /* Color gris */
            font-size: 1.2rem;              /* Tamaño del icono */
        }

        /* Estilos para el botón de inicio de sesión */
        .btn-iniciosesion {
            width: 100%;                    /* Ancho completo */
            padding: 12px;                  /* Padding reducido */
            font-size: 1rem;                /* Tamaño de fuente reducido */
            font-weight: 600;               /* Peso semi-bold */
            border-radius: 10px;            /* Bordes redondeados */
            border: none;                   /* Sin borde */
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));  /* Fondo degradado */
            color: white;                   /* Texto blanco */
            transition: all 0.3s ease;      /* Transición suave */
            margin-top: 8px;                /* Margen superior reducido */
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);  /* Sombra con color */
        }

        /* Efecto hover en botón de inicio de sesión */
        .btn-iniciosesion:hover {
            transform: translateY(-2px);    /* Levanta el botón */
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);  /* Sombra más pronunciada */
        }

        /* Estilos para el enlace de restablecer contraseña */
        .restablecer {
            text-align: center;             /* Centrado */
            margin-top: 18px;               /* Margen superior reducido */
            font-size: 0.88rem;             /* Tamaño de fuente más pequeño */
            color: #6c757d;                 /* Color gris */
        }

        /* Estilos para enlaces dentro de .restablecer */
        .restablecer a {
            color: var(--secondary-color);  /* Color secundario */
            text-decoration: none;          /* Sin subrayado */
            font-weight: 600;               /* Peso semi-bold */
            transition: all 0.3s ease;      /* Transición suave */
        }

        /* Efecto hover en enlaces de .restablecer */
        .restablecer a:hover {
            color: var(--accent-color);     /* Cambia a color de acento */
            text-decoration: underline;     /* Agrega subrayado */
        }

        /* Estilos para el enlace de volver */
        .volver {
            text-align: center;             /* Centrado */
            margin-top: 18px;               /* Margen superior reducido */
            font-size: 0.88rem;             /* Tamaño de fuente más pequeño */
            color: #6c757d;                 /* Color gris */
        }

        /* Estilos para enlaces dentro de .volver */
        .volver a {
            color: var(--secondary-color);  /* Color secundario */
            text-decoration: none;          /* Sin subrayado */
            font-weight: 600;               /* Peso semi-bold */
            transition: all 0.3s ease;      /* Transición suave */
        }

        /* Efecto hover en enlaces de .volver */
        .volver a:hover {
            color: var(--accent-color);     /* Cambia a color de acento */
            text-decoration: underline;     /* Agrega subrayado */
        }

        /* Divisor visual con texto */
        .divider {
            text-align: center;             /* Centrado */
            margin: 18px 0;                 /* Margen vertical reducido */
            position: relative;             /* Posicionamiento relativo */
        }

        /* Línea del divisor */
        .divider::before {
            content: '';                    /* Contenido vacío */
            position: absolute;             /* Posicionamiento absoluto */
            left: 0;                        /* Desde la izquierda */
            top: 50%;                       /* Centrado verticalmente */
            width: 100%;                    /* Ancho completo */
            height: 1px;                    /* Altura de 1px */
            background: #e0e0e0;            /* Color gris claro */
        }

        /* Texto del divisor */
        .divider span {
            background: white;              /* Fondo blanco para cubrir la línea */
            padding: 0 15px;                /* Padding horizontal */
            position: relative;             /* Posicionamiento relativo */
            color: #6c757d;                 /* Color gris */
            font-size: 0.9rem;              /* Tamaño pequeño */
        }

        /* Media query para dispositivos móviles */
        @media (max-width: 768px) {
            /* Ajuste de padding en caja de inicio de sesión para móviles */
            .iniciosesion-box {
                padding: 30px 25px;         /* Padding reducido */
                margin: 20px;               /* Margen alrededor */
            }

            /* Ajuste de tamaño de título para móviles */
            .iniciosesion-box h1 {
                font-size: 1.75rem;         /* Tamaño reducido */
            }

            /* Ajuste de tamaño de marca del navbar para móviles */
            .navbar-brand {
                font-size: 1.5rem;          /* Tamaño reducido */
            }

            /* Ajuste de tamaño de icono del logo para móviles */
            .logo-icon {
                width: 40px;                /* Ancho reducido */
                height: 40px;               /* Alto reducido */
                font-size: 20px;            /* Tamaño de icono reducido */
            }
        }
        @media (max-width: 480px) {
  .iniciosesion-box {
    padding: 25px 20px;
    margin: 10px;
  }

  .navbar-brand span {
    display: none; /* Oculta el texto y deja solo el icono si se ve muy apretado */
  }

  .btn-iniciosesion {
    font-size: 0.9rem;
    padding: 10px;
  }

  .form-control {
    font-size: 0.85rem;
    padding: 8px 12px;
  }
}