/* 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 registro */
            .registro-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 */
            .registro-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 registro */
            .registro-box {
                background: white; /* Fondo degradado */      
                border-radius: 20px;            /* Bordes redondeados */
                padding: 35px 40px;             /* Padding reducido */
                max-width: 420px;               /* Ancho máximo reducido */
                width: 80%;                    /* 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 registro */
            .registro-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 registro */
            .registro-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 registro */
            .btn-registro {
                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 registro */
            .btn-registro: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 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 registro para móviles 
                .registro-box {
                    padding: 30px 25px;         /* Padding reducido 
                    margin: 20px;               /* Margen alrededor 
                }

                Ajuste de tamaño de título para móviles 
                .registro-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 
                }
            } */
            /* 🌐 Responsividad general */
    @media (max-width: 992px) {
        .navbar-brand {
            font-size: 1.4rem;
        }
        .logo-icon {
            width: 38px;
            height: 38px;
            font-size: 18px;
        }
        .registro-box {
            max-width: 90%;
            padding: 30px 25px;
        }
    }

    @media (max-width: 768px) {
        .registro-container {
            padding: 80px 15px 30px;
        }
        .registro-box h1 {
            font-size: 1.5rem;
        }
        .registro-box h2 {
            font-size: 0.9rem;
        }
        .form-control {
            font-size: 0.9rem;
            padding: 8px 12px;
        }
        .btn-registro {
            font-size: 0.9rem;
            padding: 10px;
        }
        .navbar-nav {
            text-align: center;
        }
    }

    @media (max-width: 576px) {
        body {
            background: linear-gradient(135deg, var(--primary-color) 20%, var(--accent-color) 100%);
        }
        .registro-box {
            padding: 25px 20px;
            border-radius: 16px;
        }
        .registro-box h1 {
            font-size: 1.3rem;
        }
        .volver {
            font-size: 0.8rem;
        }
    }