/* DASVP AIR - Estilos base solo para móvil */                                         /* Comentario general indicando que estos estilos son base para móvil */

/* Montserrat Regular */
@font-face {
    font-family: 'Montserrat';                                                          /* Define la familia de fuente como 'Montserrat' */
    font-style: normal;                                                                  /* Estilo normal (no cursiva) */
    font-weight: 400;                                                                    /* Peso de fuente normal (regular) */
    src: url('../fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2'),               /* Ruta y formato para fuente woff2 */
         url('../fonts/Montserrat-ExtraBoldItalic.woff') format('woff');                 /* Ruta y formato para fuente woff */
    font-display: swap;                                                                  /* Estrategia para mostrar la fuente: swap evita bloqueos */
  }
  
  /* Montserrat Bold */
  @font-face {
    font-family: 'Montserrat';                                                          /* Define la familia de fuente 'Montserrat' para negrita */
    font-style: normal;                                                                  /* Estilo normal, no cursiva */
    font-weight: 700;                                                                    /* Peso negrita */
    src: url('../fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2'),               /* Ruta fuente woff2 para negrita */
         url('../fonts/Montserrat-ExtraBoldItalic.woff') format('woff');                 /* Ruta fuente woff para negrita */
    font-display: swap;                                                                  /* Mismo comportamiento de carga que arriba */
  }
  
  /* --- NUEVA PALETA Y FONDO MODERNO --- */
  :root {
    --color-principal: #7b2ff2;                                                          /* Variable CSS para color principal púrpura */
    --color-secundario: #43e9fe;                                                         /* Variable CSS para color secundario azul claro */
    --color-acento: #f357a8;                                                             /* Variable CSS para color de acento rosa */
    --color-fondo: #f7fafd;                                                              /* Variable CSS para color de fondo muy claro */
    --color-blanco: #fff;                                                                /* Variable CSS para color blanco */
    --color-texto: #232946;                                                              /* Variable CSS para color de texto principal oscuro */
    --color-gris: #e5e9f2;                                                               /* Variable CSS para color gris claro */
    --color-shadow: rgba(123,47,242,0.10);                                              /* Variable CSS para sombra con transparencia del color principal */
  }
  
  body {
    font-family: 'Montserrat', Arial, sans-serif;                                        /* Fuente principal de todo el sitio */
    margin: 0;                                                                           /* Elimina margen por defecto del body */
    padding: 0;                                                                          /* Elimina padding por defecto */
    min-height: 100vh;                                                                   /* Altura mínima 100% de viewport */
    background-attachment: fixed;                                                        /* Fondo fijo al hacer scroll */
    background-size: 200% 200%;                                                          /* Tamaño del fondo al doble del contenedor (para animación) */
    animation: fondoAnimado 5s ease-in-out infinite alternate;                           /* Animación del fondo, duración 5s, va y viene infinitamente */
    position: relative;                                                                  /* Posicionamiento relativo para elementos hijos */
    overflow-x: hidden;                                                                  /* Oculta scroll horizontal para evitar desbordes */
  }

  @keyframes fondoAnimado {
    0% { background-position: 0% 50%; }                                                     /* Inicio de la animación: posición inicial del fondo */
    100% { background-position: 100% 50%; }                                                /* Fin de la animación: fondo se mueve horizontalmente al 100% */
  }
  
  .header {
    background: linear-gradient(to right, #d4145a, #3a7bd5);                               /* Fondo con degradado horizontal entre dos colores */
    background-size: 200% 200%;                                                            /* Tamaño del fondo para permitir animación */
    animation: headerAnimado 8s ease infinite alternate;                                  /* Animación de fondo, 8 segundos, va y viene infinitamente */
    border-radius: 0;                                                                      /* Sin bordes redondeados */
    padding: 50px 20px 40px;                                                               /* Espaciado interno: arriba 50px, lados 20px, abajo 40px */
    text-align: center;                                                                    /* Texto centrado */
    color: #fff;                                                                           /* Color de texto blanco */
    position: relative;                                                                    /* Posicionamiento relativo para elementos hijos */
    overflow: hidden;                                                                      /* Oculta cualquier contenido que sobresalga del contenedor */
  }
  
  @keyframes headerAnimado {
    0% { background-position: 0% 50%; }                                                   /* Animación inicia con fondo en posición inicial */
    50% { background-position: 100% 50%; }                                                /* Mitad de la animación: fondo desplazado al 100% horizontal */
    100% { background-position: 0% 50%; }                                                 /* Fin de la animación: vuelve a posición inicial */
  }
  
  .header-glass {
    backdrop-filter: blur(6px);                                                            /* Efecto de desenfoque detrás del elemento (vidrio esmerilado) */
    background-color: rgba(255, 255, 255, 0.15);                                           /* Fondo semitransparente blanco */
    padding: 20px;                                                                         /* Espaciado interno de 20px */
    border-radius: 12px;                                                                   /* Bordes redondeados de 12px */
    max-width: 600px;                                                                      /* Ancho máximo del contenedor */
    margin: 0 auto;                                                                        /* Centra horizontalmente con margen automático */
    border: 1px solid rgba(255, 255, 255, 0.2);                                           /* Borde sutil blanco semitransparente */
    animation: glassPop 0.8s ease-out;                                                     /* Animación de entrada suave para el vidrio */
  }
  
  .header-logo {
    width: 90px;                                                                           /* Ancho fijo para el logo */
    margin-bottom: 15px;                                                                   /* Margen inferior para separar del contenido siguiente */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));                                    /* Sombra sutil para dar profundidad al logo */
    transition: transform 0.3s ease;                                                      /* Transición suave para transformaciones */
  }
  
  .header-logo:hover {
    transform: scale(1.05);                                                               /* Escala ligeramente el logo al pasar el cursor */
  }
  
  .header-title {
    font-size: 2.5rem; /* 40px aprox */                                                   /* Tamaño grande para el título */
    font-weight: 800;                                                                      /* Peso extra negrita */
    margin: 0;                                                                            /* Sin margen */
    letter-spacing: 1.5px;                                                                 /* Espaciado entre letras */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);                                           /* Sombra para dar profundidad al texto */
    line-height: 1.2;                                                                     /* Altura de línea ajustada para buena legibilidad */
  }
  
  .header-slogan {
    font-size: 1.25rem; /* 20px aprox */                                                   /* Tamaño de fuente ligeramente más grande */
    margin: 12px 0 0;                                                                       /* Margen superior de 12px, sin margen horizontal ni inferior */
    font-weight: 300;                                                                       /* Fuente ligera para estilo delicado */
    font-style: italic;                                                                     /* Texto en cursiva */
    letter-spacing: 0.8px;                                                                  /* Espaciado entre letras pequeño */
    opacity: 0.95;                                                                          /* Ligera transparencia para suavizar */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);                                            /* Sombra sutil para dar profundidad */
  }
  
  /* LOGIN - Centrado y animación */
  .login-box {
    margin-top: 32px;                                                                       /* Margen superior para separar del contenido anterior */
    padding-top: 48px;                                                                      /* Padding superior para separar contenido interno */
    background: var(--color-blanco);                                                       /* Fondo blanco definido en variables CSS */
    border-radius: 18px 18px 0 0;                                                          /* Bordes superiores redondeados */
    box-shadow: 0 4px 24px var(--color-shadow);                                           /* Sombra profunda para efecto flotante */
    max-width: 420px;                                                                       /* Ancho máximo del contenedor */
    margin-left: auto;                                                                      /* Centrado horizontal automático */
    margin-right: auto;                                                                     /* Centrado horizontal automático */
    display: flex;                                                                          /* Uso de flexbox para layout */
    flex-direction: column;                                                                 /* Elementos apilados verticalmente */
    align-items: center;                                                                    /* Alineación centrada horizontal */
    animation: fadeIn 0.7s;                                                                 /* Animación de aparición suave */
    transition: box-shadow 0.3s, background 0.3s;                                          /* Transiciones suaves para sombra y fondo */
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(40px); }                                      /* Comienza invisible y desplazado hacia abajo */
    to { opacity: 1; transform: translateY(0); }                                           /* Termina visible y en posición original */
  }
  
  .login-logo {
    width: 90px;                                                                            /* Ancho fijo para logo */
    height: 90px;                                                                           /* Alto fijo para logo */
    margin-bottom: 18px;                                                                    /* Margen inferior para separar del contenido */
    animation: logoPop 1s;                                                                  /* Animación de "pop" para logo */
  }
  
  @keyframes logoPop {
    0% { transform: scale(0.7); opacity: 0; }                                             /* Inicia pequeño e invisible */
    80% { transform: scale(1.1); opacity: 1; }                                            /* Crece ligeramente y se hace visible */
    100% { transform: scale(1); }                                                          /* Regresa a tamaño normal */
  }
  
  .section-title {
    font-size: 2rem;                                                                       /* Tamaño grande para título de sección */
    font-weight: 700;                                                                      /* Fuente en negrita */
    margin: 0 0 24px 0;                                                                    /* Margen inferior para separar secciones */
    color: var(--color-texto);                                                             /* Color de texto principal */
    background: #ffffffc9;                                                                 /* Fondo blanco con opacidad */
    text-align: center;                                                                    /* Texto centrado */
  }
  
  .input-field,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea {
    background: #fff !important;                                                           /* Fondo blanco (importante para sobreescribir) */
    color: #bdc7f8 !important;                                                             /* Color de texto claro (importante) */
    border: 1.5px solid #ccc;                                                              /* Borde gris claro y delgado */
    border-radius: 8px;                                                                    /* Bordes redondeados suaves */
    font-size: 1.08rem;                                                                    /* Tamaño de fuente legible */
    padding: 14px 12px;                                                                    /* Espaciado interno para comodidad */
    transition: border 0.2s, box-shadow 0.2s;                                             /* Transiciones suaves para borde y sombra */
    outline: none;                                                                         /* Quita el contorno por defecto al enfocar */
  }

  .input-field:focus,                                                               /* Cuando el input personalizado está enfocado */
input[type="text"]:focus,                                                         /* Input de texto enfocado */
input[type="email"]:focus,                                                        /* Input de email enfocado */
input[type="password"]:focus,                                                     /* Input de contraseña enfocado */
input[type="tel"]:focus,                                                          /* Input de teléfono enfocado */
input[type="date"]:focus,                                                         /* Input de fecha enfocado */
select:focus,                                                                     /* Select enfocado */
textarea:focus {                                                                  /* Área de texto enfocada */
  border: 1.5px solid var(--color-principal);                                    /* Borde con color principal */
  box-shadow: 0 0 0 2px var(--color-secundario);                                 /* Sombra de caja con color secundario */
  background: #fff !important;                                                    /* Fondo blanco obligatorio */
  color: #090911ee !important;                                                    /* Color de texto casi negro */
}

.remember-row {                                                                    /* Contenedor para checkbox y etiqueta */
  width: 100%;                                                                    /* Ocupa todo el ancho disponible */
  display: flex;                                                                  /* Usar flexbox para alinear */
  align-items: center;                                                            /* Centrar verticalmente */
  gap: 8px;                                                                       /* Espacio entre elementos */
  margin-bottom: 18px;                                                            /* Margen inferior */
}

.remember-row label {                                                              /* Estilo para etiqueta de checkbox */
  font-size: 1rem;                                                                /* Tamaño de fuente normal */
  color: #a70d0d;                                                                 /* Color rojo oscuro */
  cursor: pointer;                                                                /* Cursor tipo puntero para indicar clic */
}

.btn-primary {                                                                     /* Botón principal */
  width: 100%;                                                                    /* Ancho completo */
  background: linear-gradient(90deg, var(--color-principal) 0%, var(--color-acento) 100%);  /* Degradado de colores */
  color: var(--color-blanco);                                                     /* Texto blanco */
  border: none;                                                                   /* Sin borde */
  border-radius: 8px;                                                             /* Bordes redondeados */
  padding: 16px 0;                                                                /* Espaciado vertical */
  font-size: 1.1rem;                                                              /* Tamaño de fuente */
  font-weight: 700;                                                               /* Texto en negrita */
  margin-top: 8px;                                                                /* Margen superior */
  cursor: pointer;                                                                /* Cursor puntero */
  box-shadow: 0 2px 8px var(--color-shadow);                                     /* Sombra suave */
  transition: background 0.3s, box-shadow 0.3s, transform 0.15s;                  /* Transiciones suaves */
}

.btn-primary:hover {                                                               /* Efecto hover para botón */
  background: linear-gradient(90deg, var(--color-acento) 0%, var(--color-principal) 100%); /* Inversión de degradado */
  box-shadow: 0 4px 16px var(--color-shadow);                                    /* Sombra más intensa */
  transform: translateY(-2px) scale(1.02);                                       /* Ligero desplazamiento y escala */
}

.login-links {                                                                     /* Contenedor para enlaces en login */
  width: 100%;                                                                    /* Ancho completo */
  display: flex;                                                                  /* Flexbox para disposición */
  flex-direction: column;                                                         /* Columna vertical */
  align-items: center;                                                            /* Centrado horizontal */
  margin-top: 22px;                                                               /* Margen superior */
  gap: 8px;                                                                       /* Espacio entre enlaces */
}

.login-links a {                                                                   /* Estilo para enlaces */
  color: var(--color-principal);                                                  /* Color principal */
  text-decoration: none;                                                          /* Sin subrayado */
  font-size: 1.05rem;                                                             /* Tamaño de fuente */
  transition: color 0.2s;                                                          /* Transición de color suave */
}

.login-links a:hover {                                                             /* Hover para enlaces */
  color: var(--color-acento);                                                     /* Color acento */
  text-decoration: underline;                                                     /* Subrayado */
}

/* Responsive solo móvil */
@media (min-width: 600px) {                                                        /* Para pantallas mayores a 600px */
  .login-box {                                                                    /* Modificaciones para caja login */
    min-height: unset;                                                            /* Sin altura mínima fija */
    border-radius: 24px;                                                          /* Bordes más redondeados */
    margin: 40px auto;                                                            /* Margen superior e inferior y centrado horizontal */
  }
}

/* Resto de estilos generales y de otras vistas aquí... */

@keyframes headerFadeIn {                                                           /* Animación para fade-in desde arriba */
    from { opacity: 0; transform: translateY(-40px); }                              /* Comienza invisible y desplazado hacia arriba */
    to { opacity: 1; transform: translateY(0); }                                   /* Termina visible y en posición normal */
  }
  
  /* --- BOTÓN CON ICONO Y MICROINTERACCIONES --- */
  .btn-primary {                                                                     /* Botón principal con diseño moderno */
    width: 100%;                                                                    /* Ocupa todo el ancho del contenedor */
    background: linear-gradient(90deg, var(--color-principal) 0%, var(--color-acento) 100%); /* Degradado horizontal */
    color: var(--color-blanco);                                                     /* Texto blanco */
    border: none;                                                                   /* Sin borde */
    border-radius: 8px;                                                             /* Bordes redondeados */
    padding: 16px 0;                                                                /* Padding vertical */
    font-size: 1.1rem;                                                              /* Tamaño del texto */
    font-weight: 700;                                                               /* Negrita */
    margin-top: 8px;                                                                /* Margen superior */
    cursor: pointer;                                                                /* Cursor puntero */
    box-shadow: 0 2px 8px var(--color-shadow);                                     /* Sombra suave */
    transition: background 0.3s, box-shadow 0.3s, transform 0.15s;                  /* Transiciones para hover y click */
    display: flex;                                                                  /* Flex para alinear icono y texto */
    align-items: center;                                                            /* Alineación vertical centrada */
    justify-content: center;                                                        /* Centrado horizontal */
    gap: 10px;                                                                      /* Espacio entre icono y texto */
    position: relative;                                                             /* Para posicionar elementos hijos si es necesario */
  }
  
  .btn-primary:active {                                                              /* Estado activo (clickeado) */
    transform: scale(0.98);                                                         /* Reduce un poco el tamaño */
    box-shadow: 0 1px 4px var(--color-shadow);                                     /* Sombra más tenue */
  }
  
  .btn-primary:hover {                                                               /* Estado hover */
    background: linear-gradient(90deg, var(--color-acento) 0%, var(--color-principal) 100%); /* Invertir degradado */
    box-shadow: 0 4px 16px var(--color-shadow);                                    /* Sombra más grande e intensa */
    transform: translateY(-2px) scale(1.02);                                       /* Levantar y aumentar ligeramente */
  }
  
  .btn-primary .btn-icon {                                                           /* Icono dentro del botón */
    font-size: 1.3em;                                                               /* Tamaño un poco mayor */
    display: inline-flex;                                                           /* Flex para alineación */
    align-items: center;                                                            /* Centrar vertical */
    margin-right: 4px;                                                              /* Espacio a la derecha del icono */
  }
  
  /* Spinner para feedback visual */
  .spinner {                                                                        /* Círculo giratorio para carga */
    border: 3px solid #e0e0e0;                                                      /* Borde gris claro */
    border-top: 3px solid var(--color-acento);                                     /* Borde superior con color acento */
    border-radius: 50%;                                                             /* Circular */
    width: 22px;                                                                    /* Ancho fijo */
    height: 22px;                                                                   /* Alto fijo */
    animation: spin 0.8s linear infinite;                                          /* Animación de giro continuo */
    display: inline-block;                                                          /* Mostrar en línea */
    vertical-align: middle;                                                         /* Alineación vertical en medio */
  }
  @keyframes spin {                                                                  /* Definición de la animación giro */
    0% { transform: rotate(0deg); }                                                 /* Giro inicio */
    100% { transform: rotate(360deg); }                                             /* Giro completo */
  }
  
  /* --- INPUTS Y ACCESIBILIDAD --- */
  .input-group {                                                                    /* Grupo de input para organización */
    width: 98%;                                                                     /* Casi todo el ancho del contenedor */
    margin-bottom: 18px;                                                            /* Margen inferior */
  }
  
  .input-field[aria-invalid="true"] {                                               /* Input con error de validación accesible */
    border-color: var(--color-acento);                                              /* Borde con color acento */
    box-shadow: 0 0 0 2px var(--color-acento);                                     /* Sombra para destacar error */
  }
  
  .input-label {                                                                    /* Etiqueta para inputs */
    font-size: 1rem;                                                                /* Tamaño estándar */
    color: var(--color-principal);                                                  /* Color principal */
    margin-bottom: 4px;                                                             /* Margen inferior pequeño */
    display: block;                                                                 /* Mostrar en bloque para separar del input */
  }
  
  /* Error visual */
.error-msg {
    color: var(--color-acento);        /* Color de texto para errores */
    font-size: 1rem;                   /* Tamaño de fuente estándar */
    margin-bottom: 10px;              /* Margen inferior para separar del siguiente elemento */
    margin-top: -8px;                 /* Margen superior negativo para ajustar espacio */
    text-align: left;                 /* Texto alineado a la izquierda */
    width: 100%;                     /* Ocupa todo el ancho disponible */
    display: none;                   /* Oculto por defecto */
  }
  .error-msg.active {
    display: block;                  /* Mostrar cuando está activo */
  }
  
  body {
    margin: 0;                      /* Eliminar margen por defecto */
    font-family: 'Montserrat', Arial, sans-serif; /* Tipografía principal */
    background-color: #f9f9f9;     /* Fondo gris muy claro */
  }
  
  .container {
    max-width: 400px;               /* Ancho máximo para centrar contenido */
    margin: 60px auto;              /* Centrado horizontal y margen superior */
    background-color: #fff;         /* Fondo blanco */
    border-radius: 12px;            /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(190, 167, 167, 0.1); /* Sombra suave */
    padding: 30px;                  /* Espaciado interno */
    text-align: center;             /* Centrado del texto */
    position: relative;             /* Posicionamiento para capas */
    z-index: 1;                    /* Aparece por encima de elementos con z menor */
    animation: box-fadein 1s cubic-bezier(.4,1.4,.6,1) 0.2s both; /* Animación de aparición */
  }
  
  /* El resto de los estilos de las otras vistas se mantienen igual, pero ahora usan la nueva paleta y mejoras */
  
  .user-profile {
    display: flex;                  /* Flexbox para alinear horizontalmente */
    align-items: center;            /* Centrar verticalmente */
    gap: 12px;                     /* Espacio entre elementos */
    margin-bottom: 16px;           /* Espacio debajo del perfil */
    padding: 8px 0;                /* Espaciado vertical interno */
    border-bottom: 1px solid #e0e0e0; /* Línea sutil separadora */
  }
  
  .user-avatar {
    width: 50px;                   /* Tamaño fijo ancho */
    height: 50px;                  /* Tamaño fijo alto */
    border-radius: 50%;            /* Circular */
    background: #f0f0f0;           /* Fondo gris claro */
    display: flex;                 /* Flex para alinear contenido dentro */
    align-items: left;             /* Alinear contenido hacia la izquierda */
    justify-content: left;         /* Justificar contenido a la izquierda */
    font-size: 2.2rem;             /* Tamaño del texto o icono */
    color: #fff;                   /* Color blanco para texto o icono */
    border: 2px solid #7b2ff2;    /* Borde con color vibrante */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para profundidad */
  }
  
  .user-avatar img {
    width: 100%;                  /* Imagen ocupa todo el contenedor */
    height: 100%;                 /* Altura completa */
    border-radius: 50%;           /* Imagen circular */
    object-fit: cover;            /* Mantener proporción y rellenar */
  }
  
  .user-info {
    flex: 1;                     /* Ocupa el espacio restante */
    display: flex;               /* Flex para layout vertical */
    flex-direction: column;      /* Dirección de columna */
    justify-content: center;     /* Centrar verticalmente */
  }
  
  .user-info h3 {
    margin: 0;                   /* Sin márgenes */
    font-size: 1.1rem;           /* Tamaño legible */
    color: #333;                 /* Color texto oscuro suave */
    font-weight: 600;            /* Peso medio */
    line-height: 1.4;            /* Espaciado entre líneas */
  }
  
  .user-info p {
    margin: 4px 0;               /* Márgenes verticales pequeños */
    font-size: 0.9rem;           /* Texto más pequeño */
    color: #7b2ff2;              /* Color llamativo para el texto */
  }
  
  .user-info .user-role {
    font-size: 0.85rem;          /* Texto pequeño para rol */
    color: #666;                 /* Gris neutro */
  }
  
  .user-name {
    font-size: 1.1rem;           /* Tamaño consistente */
    color: #232946;              /* Color texto oscuro */
    margin: 0;                   /* Sin márgenes */
    font-weight: 700;            /* Negrita */
    text-align: left;            /* Alineación a la izquierda */
  }
  

  .user-greeting-box {
    text-align: center;               /* Centra el texto dentro del contenedor */
    padding: 1rem 0;                  /* Espaciado vertical arriba y abajo */
  }
  
  .user-greeting {
    font-size: 1.5rem;                /* Tamaño de fuente grande para saludo */
    font-weight: 600;                 /* Peso seminegrita para destacar */
    color: #222;                     /* Color de texto oscuro */
    margin: 0;                       /* Sin márgenes */
    font-family: 'Montserrat', sans-serif; /* Tipografía limpia y moderna */
  }
  
  .welcome-subtitle {
    font-size: 1.1rem;               /* Tamaño de fuente ligeramente menor */
    font-weight: 400;                /* Peso normal */
    color: #333;                    /* Gris oscuro */
    margin: 0.5rem 0 1rem 0;        /* Margen arriba y abajo para separación */
  }
  
  /* Interacción visual cuando el texto está enfocado o hover */
  .user-name:hover {
    color: #9032a3;                 /* Cambio de color al pasar el cursor */
    transform: scale(1.05);          /* Agrandar ligeramente */
    transition: color 0.3s, transform 0.3s; /* Transición suave para color y tamaño */
  }
  
  .logout-link {
    color: #7b2ff2;                 /* Color principal violeta */
    font-size: 1.05rem;             /* Tamaño de fuente mediano */
    margin-left: 2px;               /* Pequeño margen a la izquierda */
    margin-top: 4px;                /* Margen superior para separación */
    transition: color 0.2s;         /* Transición suave en color */
    text-decoration: underline;     /* Subrayado para indicar enlace */
    display: inline-block;          /* Para aplicar márgenes y alinear texto */
    text-align: left;               /* Alineación a la izquierda */
  }
  .logout-link:hover {
    color: #f357a8;                 /* Cambio de color rosa al hover */
  }
  
  /* Perfil de usuario - versión minimalista */
  .user-profile1 {
    display: flex;                  /* Flexbox para layout horizontal */
    align-items: center;            /* Centrar verticalmente */
    gap: 12px;                     /* Espacio entre elementos */
    margin-bottom: 16px;           /* Espacio debajo del contenedor */
    padding: 8px 0;                /* Espaciado arriba y abajo */
    border-bottom: 1px solid #e0e0e0; /* Línea sutil separadora */
  }
  
  .user-avatar1 {
    width: 50px;                   /* Ancho fijo */
    height: 50px;                  /* Alto fijo */
    border-radius: 50%;            /* Forma circular */
    background: #f0f0f0;           /* Fondo gris claro */
    display: flex;                 /* Flexbox para alinear contenido interno */
    align-items: left;             /* Alinear verticalmente a la izquierda (mejor usar flex-start) */
    justify-content: left;         /* Justificar contenido a la izquierda */
    font-size: 2.2rem;             /* Tamaño grande para icono o inicial */
    color: #fff;                   /* Color blanco para el texto */
    border: 2px solid #7b2ff2;    /* Borde violeta */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidad */
  }
  
  .user-avatar img {
    width: 24px;                     /* Ancho fijo para la imagen del avatar */
    height: 24px;                    /* Alto fijo para mantener proporción */
    object-fit: contain;             /* Ajusta la imagen dentro del contenedor sin recortarla */
  }
  
  .user-name1 {
    font-size: 1.1rem;               /* Tamaño de fuente legible */
    color: #232946;                  /* Color oscuro para el texto */
    margin: 0;                      /* Sin márgenes para controlar mejor el layout */
    font-weight: 700;                /* Texto en negrita */
  }
  
  .logout-link1 {
    color: #7b2ff2;                 /* Color violeta para el enlace */
    font-size: 1.05rem;             /* Tamaño de fuente mediano */
    margin-left: 2px;               /* Pequeño margen a la izquierda */
    margin-top: 4px;                /* Margen superior para separación vertical */
    transition: color 0.2s;         /* Transición suave para el color */
    text-decoration: underline;     /* Subrayado para indicar que es un enlace */
    display: inline-block;          /* Permite aplicar márgenes y alineación */
  }
  .logout-link1:hover {
    color: #f357a8;                 /* Color rosa en hover */
    text-decoration: underline;     /* Mantiene subrayado al hacer hover */
  }
  
  .section-subtitle {
    font-size: 1.05rem;             /* Tamaño de fuente ligeramente mayor */
    text-align: center;             /* Centra el texto */
    color: #eb1010;                 /* Color rojo intenso */
    margin-bottom: 18px;            /* Espacio debajo para separar del contenido siguiente */
  }
  
  .flight-list {
    display: flex;                  /* Contenedor flexible */
    flex-direction: column;         /* Dirección vertical */
    gap: 16px;                     /* Espaciado entre tarjetas de vuelo */
    margin-bottom: 24px;            /* Margen inferior para separar del siguiente contenido */
  }
  
  .flight-card {
    background: #fff;               /* Fondo blanco para las tarjetas */
    border-radius: 12px;            /* Bordes redondeados para estilo moderno */
    box-shadow: 0 2px 8px var(--color-shadow); /* Sombra suave para profundidad */
    display: flex;                  /* Flexbox para contenido interno */
    align-items: center;            /* Alineación vertical centrada */
    padding: 16px;                  /* Espacio interno cómodo */
    gap: 12px;                     /* Separación entre elementos hijos */
    transition: box-shadow 0.2s;    /* Transición suave en sombra al pasar el cursor */
    color: #634343;                 /* Color marrón para el texto */
  }
  
  .flight-card:hover {
    box-shadow: 0 4px 16px var(--color-shadow); /* Sombra más pronunciada al hacer hover */
  }
  
  .flight-icon {
    width: 36px;                     /* Ancho fijo del ícono de vuelo */
    height: 36px;                    /* Alto fijo del ícono */
    color: #7b2ff2;                  /* Color violeta para destacar */
    flex-shrink: 0;                  /* Evita que se reduzca en tamaño dentro de un flex container */
  }
  
  .flight-info {
    flex: 1;                         /* Ocupa todo el espacio restante disponible */
  }
  
  .flight-time {
    font-weight: 700;                /* Negrita para resaltar la hora */
    font-size: 1.1rem;               /* Tamaño de fuente cómodo y visible */
    color: #232946;                  /* Color oscuro para buena legibilidad */
  }
  
  .flight-duration {
    font-size: 0.95rem;              /* Tamaño ligeramente más pequeño */
    color: #232946;                  /* Color uniforme con la hora */
  }
  
  .flight-code {
    font-size: 0.95rem;              /* Tamaño moderado */
    color: #e40000;                  /* Color rojo para llamar la atención (ej. código del vuelo) */
    text-align: right;              /* Alineación a la derecha */
  }
  
  .flight-price {
    font-size: 1.2rem;               /* Tamaño mayor para destacar el precio */
    font-weight: 700;                /* Negrita para enfatizar */
    color: #7b2ff2;                  /* Color violeta característico del diseño */
    text-align: right;              /* Alineación a la derecha */
  }
  
  .flight-status {
    font-size: 1.1rem;               /* Tamaño intermedio */
    font-weight: 700;                /* Negrita para resaltar el estado */
    color: #4caf50;                  /* Verde para estado (ej. activo, confirmado) */
    text-align: right;              /* Alineación a la derecha */
  }
  
  /* Estilos para inputs y botón */
  
  .input-group {
    margin-bottom: 20px;            /* Espacio inferior entre grupos de formulario */
  }
  
  .input-label {
    display: block;                 /* Hace que la etiqueta ocupe toda la línea */
    font-size: 1rem;                /* Tamaño legible */
    margin-bottom: 6px;             /* Espacio entre la etiqueta y el campo de entrada */
    color: #7b2ff2;                 /* Color violeta para destacar el texto */
  }
  
  .input-field {
    width: 100%;                    /* El campo se expande a todo el ancho disponible */
    padding: 12px;                  /* Espaciado interno para mejor usabilidad */
    border: 1px solid #ccc;         /* Borde gris claro */
    border-radius: 6px;             /* Esquinas ligeramente redondeadas */
    font-size: 16px;                /* Tamaño de fuente adecuado para inputs */
  }
  
  .link {
    color: #2196f3;                 /* Azul para enlaces, estilo común de web */
    text-decoration: none;          /* Quita el subrayado por defecto */
    font-size: 1rem;                /* Tamaño estándar */
    transition: color 0.2s;         /* Transición suave al cambiar de color */
  }
  
  .link:hover {
    color: #f357a8;                 /* Cambia a rosa al pasar el cursor */
  }
  
/* --- REGISTRO --- */
.registro-box {
    margin-top: 32px;                                /* Espacio superior para separar de otros elementos */
    padding-top: 48px;                               /* Espacio interno superior */
    background: var(--color-blanco);                 /* Fondo blanco (usando variable personalizada) */
    border-radius: 18px 18px 0 0;                    /* Bordes superiores redondeados */
    box-shadow: 0 4px 24px var(--color-shadow);      /* Sombra para dar efecto de elevación */
    max-width: 420px;                                /* Ancho máximo centrado */
    margin-left: auto;                               /* Centrado horizontal */
    margin-right: auto;                              /* Centrado horizontal */
    display: flex;                                   /* Contenedor flexible */
    flex-direction: column;                          /* Elementos en columna */
    align-items: center;                             /* Centra los elementos horizontalmente */
    animation: fadeIn 0.7s;                          /* Animación de entrada suave */
    transition: box-shadow 0.3s, background 0.3s;     /* Transiciones suaves en sombra y fondo */
  }
  
  .divider {
    border: none;                                    /* Sin borde lateral */
    border-top: 1.5px solid #ececec;                 /* Línea divisoria superior suave */
    margin: 0 0 24px 0;                              /* Solo margen inferior */
    width: 100%;                                     /* Ocupar todo el ancho del contenedor */
  }
  
  .registro-box .section-title {
    font-size: 2rem;                                 /* Título grande */
    font-weight: 700;                                /* Negrita */
    margin-bottom: 12px;                             /* Espacio inferior */
    color: #222;                                     /* Color oscuro para buena legibilidad */
    text-align: center;                              /* Centrado */
  }
  
  .registro-box .input-group {
    width: 100%;                                     /* Que cada grupo de input ocupe todo el ancho */
    margin-bottom: 18px;                             /* Espacio inferior entre campos */
  }
  
  .registro-box .input-field {
    width: 100%;                                     /* Campo ocupa todo el ancho */
    padding: 14px 12px;                              /* Espaciado interno cómodo */
    border: 1.5px solid #ccc;                        /* Borde gris claro */
    border-radius: 8px;                              /* Esquinas redondeadas */
    font-size: 1.08rem;                              /* Tamaño de fuente adecuado */
    transition: border 0.2s, box-shadow 0.2s, background 0.2s; /* Transiciones suaves */
    background: #fafbff;                             /* Fondo ligeramente azulado para diferenciar */
    outline: none;                                   /* Elimina borde azul al enfocar */
  }
  
  .registro-box .input-field:focus {
    border: 1.5px solid #7b2ff2;                     /* Borde violeta al enfocar */
    box-shadow: 0 0 0 2px #e6e0fa;                   /* Sombra externa suave */
    background: #fff;                                /* Fondo blanco al enfocar */
  }
  
  .registro-box select.input-field {
    background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); /* Ícono personalizado para desplegable */
    background-repeat: no-repeat;                    /* No se repite la imagen */
    background-position: right 12px center;          /* Posición del ícono al lado derecho centrado */
    background-size: 22px 22px;                      /* Tamaño del ícono */
    padding-right: 38px;                             /* Espacio para no tapar el ícono */
  }
  
  .registro-box .btn-primary {
    width: 100%;                                     /* Botón ocupa todo el ancho del contenedor */
    background: #0e1316;                             /* Fondo oscuro elegante */
    color: #fff;                                     /* Texto blanco */
    border: none;                                    /* Sin borde */
    border-radius: 8px;                              /* Bordes redondeados */
    padding: 16px 0;                                 /* Altura generosa para el botón */
    font-size: 1.1rem;                               /* Tamaño de letra medio */
    font-weight: 700;                                /* Negrita */
    margin-top: 8px;                                 /* Separación del campo anterior */
    cursor: pointer;                                 /* Cursor de mano al pasar por encima */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);         /* Sombra para efecto elevado */
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s; /* Transiciones suaves */
  }
  
  .registro-box .btn-primary:hover {
    background: #1769aa;                                     /* Cambia a azul más claro al pasar el mouse */
    box-shadow: 0 4px 16px rgba(33,150,243,0.18);            /* Sombra más pronunciada en hover */
    transform: translateY(-2px) scale(1.02);                 /* Efecto de elevación y leve aumento de tamaño */
  }
  
  /* --- RECUPERAR CONTRASEÑA --- */
  .recuperar-box {
    margin-top: 32px;                                        /* Espacio superior externo */
    padding-top: 48px;                                       /* Espacio superior interno */
    background: var(--color-blanco);                         /* Fondo blanco usando variable */
    border-radius: 18px 18px 0 0;                            /* Bordes superiores redondeados */
    box-shadow: 0 4px 24px var(--color-shadow);              /* Sombra suave alrededor */
    max-width: 420px;                                        /* Ancho máximo centrado */
    margin-left: auto;                                       /* Centrado horizontal */
    margin-right: auto;                                      /* Centrado horizontal */
    display: flex;                                           /* Contenedor flexible */
    flex-direction: column;                                  /* Elementos en columna */
    align-items: center;                                     /* Alineación horizontal centrada */
    animation: fadeIn 0.7s;                                  /* Animación de aparición suave */
    transition: box-shadow 0.3s, background 0.3s;            /* Transiciones suaves de sombra y fondo */
  }
  
  .recuperar-box .section-title {
    font-size: 2rem;                                         /* Título grande */
    font-weight: 700;                                        /* Texto en negrita */
    margin-bottom: 12px;                                     /* Espacio inferior */
    color: #222;                                             /* Color oscuro para buena legibilidad */
    text-align: center;                                      /* Texto centrado */
  }
  
  .recuperar-box .divider {
    border: none;                                            /* Elimina bordes predeterminados */
    border-top: 1.5px solid #ececec;                         /* Línea divisoria gris clara */
    margin: 0 0 24px 0;                                      /* Margen inferior */
    width: 100%;                                             /* Ocupar todo el ancho disponible */
  }
  
  .recuperar-box .input-group {
    width: 100%;                                             /* Grupo ocupa todo el ancho */
    margin-bottom: 18px;                                     /* Espacio entre campos */
  }
  
  .recuperar-box .input-field {
    width: 100%;                                             /* Campo de entrada de ancho completo */
    padding: 14px 12px;                                      /* Relleno interno cómodo */
    border: 1.5px solid #ccc;                                /* Borde gris claro */
    border-radius: 8px;                                      /* Bordes redondeados */
    font-size: 1.08rem;                                      /* Tamaño de fuente ligeramente grande */
    transition: border 0.2s, box-shadow 0.2s, background 0.2s; /* Transiciones suaves en focus */
    background: #fafbff;                                     /* Fondo azul claro */
    outline: none;                                           /* Quitar contorno predeterminado */
  }
  
  .recuperar-box .input-field:focus {
    border: 1.5px solid #7b2ff2;                             /* Borde morado al enfocar */
    box-shadow: 0 0 0 2px #e6e0fa;                           /* Sombra externa morada clara */
    background: #fff;                                        /* Fondo blanco al enfocar */
  }
  
  .ayuda-recuperar {
    color: #000000;                                          /* Texto negro */
    font-size: 16px;                                         /* Tamaño de fuente estándar */
    line-height: 1.5;                                        /* Espaciado de línea agradable */
    margin-bottom: 25px;                                     /* Separación inferior */
  }
  
  .recuperar-box .btn-primary {
    width: 100%;                                             /* Botón ocupa todo el ancho */
    background: #2196f3;                                     /* Azul principal de recuperación */
    color: #fff;                                             /* Texto blanco */
    border: none;                                            /* Sin borde */
    border-radius: 8px;                                      /* Bordes redondeados */
    padding: 16px 0;                                         /* Altura cómoda del botón */
    font-size: 1.1rem;                                       /* Tamaño de fuente medio */
    font-weight: 700;                                        /* Texto en negrita */
    margin-top: 8px;                                         /* Separación superior */
    cursor: pointer;                                         /* Cursor de mano en hover */
    box-shadow: 0 2px 8px rgba(33,150,243,0.10);             /* Sombra sutil azul */
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s; /* Transiciones suaves */
  }
  
  .recuperar-box .btn-primary:hover {
    background: #1769aa;                                     /* Cambia a un azul más oscuro al pasar el cursor */
    box-shadow: 0 4px 16px rgba(33,150,243,0.18);            /* Aumenta la sombra para un efecto de elevación */
    transform: translateY(-2px) scale(1.02);                 /* Eleva ligeramente el botón y lo agranda un poco */
  }
  
  /* --- CREAR CONTRASEÑA --- */
  .crearpass-box {
    background: var(--color-blanco);                         /* Fondo blanco utilizando variable */
    border-radius: var(--border-radius);                     /* Bordes redondeados con valor definido por variable */
    box-shadow: 0 4px 24px var(--color-shadow);              /* Sombra suave alrededor */
    padding: 30px;                                           /* Espaciado interno uniforme */
    max-width: 420px;                                        /* Ancho máximo del contenedor */
    margin: 30px auto;                                       /* Centrado horizontal y separación vertical */
    animation: fadeIn 0.6s ease-out;                         /* Animación de entrada suave */
  }
  
  .crearpass-box .section-title {
    font-size: 1.8rem;                                       /* Tamaño de fuente grande para título */
    font-weight: 700;                                        /* Título en negrita */
    color: var(--color-texto);                               /* Color del texto definido por variable */
    text-align: center;                                      /* Texto centrado */
    margin-bottom: 20px;                                     /* Espacio inferior */
  }
  
  .crearpass-box .divider {
    border: none;                                            /* Sin bordes laterales ni inferior */
    border-top: 1px solid var(--color-gris);                 /* Línea superior gris como separador */
    margin: 0 0 25px 0;                                      /* Margen inferior */
    width: 100%;                                             /* Ocupar todo el ancho disponible */
  }
  
  .crearpass-box .input-group {
    margin-bottom: 20px;                                     /* Espacio inferior entre campos de entrada */
  }
  
  .crearpass-box .input-field {
    width: 95%;                                              /* Ancho del campo ligeramente menor al 100% */
    padding: 15px;                                           /* Espaciado interno para el texto */
    border: 1.5px solid var(--color-gris);                   /* Borde gris definido por variable */
    border-radius: 8px;                                      /* Bordes redondeados */
    font-size: 1rem;                                         /* Tamaño estándar del texto */
    background: var(--color-blanco);                         /* Fondo blanco */
    transition: all 0.3s ease;                               /* Transición suave en todos los cambios */
  }
  
  .crearpass-box .input-field:focus {
    border-color: var(--color-principal);                   /* Cambia el color del borde al enfocar */
    box-shadow: 0 0 0 2px rgba(123, 47, 242, 0.2);           /* Sombra suave violeta alrededor del borde */
    outline: none;                                           /* Elimina contorno predeterminado */
  }
  
  .crearpass-box .btn-primary {
    width: 100%;                                             /* El botón ocupa todo el ancho disponible */
    background: linear-gradient(90deg, var(--color-principal), var(--color-acento)); /* Degradado de colores principales */
    color: var(--color-blanco);                              /* Texto blanco */
    border: none;                                            /* Sin borde */
    border-radius: 8px;                                      /* Bordes redondeados */
    padding: 18px;                                           /* Espaciado interno amplio */
    font-size: 1.1rem;                                       /* Tamaño de fuente medio-grande */
    font-weight: 900;                                        /* Fuente muy gruesa para resaltar */
    cursor: pointer;                                         /* Cursor tipo mano al pasar el mouse */
    box-shadow: 0 2px 8px var(--color-shadow);               /* Sombra inferior sutil */
    transition: all 0.3s ease;                               /* Transiciones suaves en todos los cambios */
    margin-top: 10px;                                        /* Separación superior respecto a otros elementos */
  }
  
  .crearpass-box .btn-primary:hover {
    background: linear-gradient(90deg, var(--color-acento), var(--color-principal)); /* Inversa el degradado al pasar el mouse */
    box-shadow: 0 4px 16px var(--color-shadow);                                      /* Aumenta la sombra para destacar el botón */
    transform: translateY(-2px);                                                     /* Eleva ligeramente el botón */
  }
  
  /* Animación de entrada */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }  /* Empieza invisible y desplazado hacia abajo */
    to { opacity: 1; transform: translateY(0); }       /* Termina visible y en su posición original */
  }
  
  /* Responsive */
  @media (max-width: 480px) {                          /* Estilos para pantallas pequeñas (móviles) */
    .crearpass-box {
      padding: 25px 20px;                              /* Reduce el relleno lateral */
      margin: 20px auto;                               /* Reduce el margen exterior */
    }
  
    .crearpass-box .section-title {
      font-size: 1.6rem;                               /* Reduce el tamaño del título */
    }
  }
  
  .menu-saludo {
    font-size: 1.35rem;                                /* Tamaño mediano para saludo principal */
    font-weight: 700;                                  /* Negrita */
    color: #222;                                       /* Gris oscuro */
    margin-bottom: 4px;                                /* Espacio inferior */
    text-align: center;                                /* Centrado horizontal */
  }
  
  .menu-sub {
    font-size: 1.15rem;                                /* Tamaño ligeramente menor al saludo */
    color: #444;                                       /* Gris medio */
    margin-bottom: 10px;                               /* Espacio inferior */
    text-align: center;                                /* Centrado horizontal */
  }
  
  .menu-box .logout-link {
    color: #7b2ff2;                                    /* Color violeta para el enlace de cerrar sesión */
    font-size: 1rem;                                   /* Tamaño estándar de texto */
    text-decoration: underline;                        /* Subrayado */
    margin-bottom: 18px;                               /* Espacio inferior */
    margin-top: 2px;                                   /* Espacio superior */
    display: block;                                    /* Se comporta como un bloque para ocupar todo el ancho */
    text-align: center;                                /* Centrado horizontal */
    transition: color 0.2s;                            /* Transición suave de color */
  }
  
  .menu-box .logout-link:hover {
    color: #f357a8;                                    /* Cambia a rosa al pasar el mouse */
  }
  
  .menu-actions {
    width: 100%;                                       /* Ocupa todo el ancho disponible */
    display: flex;                                     /* Contenedor flexbox */
    flex-direction: column;                           /* Apila verticalmente los elementos */
    gap: 18px;                                         /* Espacio entre los elementos hijos */
    margin-top: 10px;                                  /* Separación superior */
  }
  
  .menu-card {
    display: flex;                                     /* Contenedor flexible horizontal */
    align-items: center;                              /* Centra verticalmente los íconos y texto */
    background: #fff;                                  /* Fondo blanco */
    border-radius: 14px;                               /* Bordes redondeados */
    box-shadow: 0 2px 8px var(--color-shadow);         /* Sombra suave */
    padding: 18px 16px;                                /* Relleno interno */
    font-size: 1.15rem;                                /* Tamaño de texto medio */
    font-weight: 700;                                  /* Texto en negrita */
    color: #444;                                       /* Color gris oscuro */
    text-decoration: none;                             /* Quita el subrayado típico de los enlaces */
    transition: background 0.3s, box-shadow 0.3s, transform 0.15s; /* Transiciones suaves al pasar el mouse */
    gap: 16px;                                         /* Espacio entre el ícono y el texto */
    border: 1.5px solid #ececec;                       /* Borde claro */
    position: relative;                                /* Posición relativa para manejar elementos internos si es necesario */
  }
  
  .menu-card:hover {
    background: #f5f6fa;                               /* Cambia el fondo a un gris muy claro */
    box-shadow: 0 4px 16px var(--color-shadow);        /* Sombra más pronunciada al pasar el mouse */
    transform: translateY(-2px) scale(1.01);           /* Eleva y agranda ligeramente la tarjeta */
  }
  
  .menu-icon {
    width: 38px;                                       /* Tamaño fijo del ícono */
    height: 38px;                                      /* Altura fija del ícono */
    display: flex;                                     /* Flex para centrar contenido */
    align-items: center;                              /* Centra verticalmente el ícono */
    justify-content: center;                          /* Centra horizontalmente el ícono */
    flex-shrink: 0;                                    /* Evita que el ícono se reduzca si el contenedor se estrecha */
  }
  
  @media (min-width: 768px) {  /* Aplica estilos solo a pantallas con un ancho igual o mayor a 768px */
    body {
      background: linear-gradient(           /* Fondo con degradado vertical de blanco a gris claro */
        to bottom,
        #ffffff 0%,                          /* Desde blanco en la parte superior */
        #f8f9fa 100%                         /* Hasta gris claro en la parte inferior */
      );
      display: flex;                         /* Utiliza flexbox para el contenido del body */
      flex-direction: column;               /* Los elementos hijos se colocan en columna */
      min-height: 100vh;                    /* Altura mínima igual al alto de la ventana */
      margin: 0;                             /* Elimina márgenes por defecto */
      font-family: 'Montserrat', sans-serif;/* Aplica fuente personalizada Montserrat */
      position: relative;                   /* Establece posición relativa para posicionar elementos hijos absolutamente */
    }
    
    /* Efecto visual decorativo en el fondo con ondas suaves y sutiles */
    body::before {
      content: "";                          /* Crea un pseudo-elemento vacío */
      position: absolute;                   /* Posición absoluta dentro del body */
      width: 100%;                          /* Ocupa todo el ancho del body */
      height: 100%;                         /* Ocupa todo el alto del body */
      background:                           /* Fondo compuesto por dos gradientes radiales */
        radial-gradient(ellipse at 20% 20%, /* Primer gradiente radial en la esquina superior izquierda */
          rgba(123, 47, 242, 0.02) 0%,      /* Color morado muy tenue */
          transparent 40%),                /* Se desvanece a transparente */
        radial-gradient(ellipse at 80% 80%, /* Segundo gradiente radial en la esquina inferior derecha */
          rgba(67, 233, 254, 0.02) 0%,      /* Color azul muy tenue */
          transparent 40%);                /* Se desvanece a transparente */
      z-index: -1;                          /* Coloca el pseudo-elemento detrás del contenido */
      opacity: 0.6;                         /* Aplica opacidad al efecto decorativo */
    }
    
    .container {
      display: none;                        /* Oculta completamente el contenedor principal en pantallas grandes */
    }
    
    body::after {
      content: "✨ Esta app solo funciona en móviles."; /* Muestra este mensaje como contenido del pseudo-elemento */
      display: flex;                        /* Usa flexbox para alinear el mensaje */
      flex-direction: column;              /* Alinea el contenido del mensaje en columna */
      justify-content: center;             /* Centra verticalmente el contenido */
      align-items: center;                 /* Centra horizontalmente el contenido */
      text-align: center;                  /* Alinea el texto al centro */
      padding: 40px;                       /* Espaciado interno generoso */
      font-size: 24px;                     /* Tamaño de fuente grande para el mensaje */
      color: #2d3748;                      /* Color de texto oscuro */
      width: 80%;                          /* Ocupa el 80% del ancho disponible */
      max-width: 600px;                    /* Máximo ancho de 600px */
      margin: 30vh auto 0;                 /* Centrado vertical aproximado (30% del alto) y horizontal automático */
      line-height: 1.6;                    /* Espaciado entre líneas para mejor lectura */
      border: none;                        /* Sin borde visible */
      border-radius: 16px;                 /* Bordes redondeados para el recuadro */
      background: rgba(173, 120, 189, 0.96);/* Fondo violeta claro con transparencia */
      box-shadow:                          /* Sombra suave para dar profundidad */
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.04);
      animation: fadeIn 0.6s ease-out;     /* Aplica animación de entrada suave */
      position: relative;                  /* Posición relativa dentro del body */
      backdrop-filter: blur(4px);          /* Difumina el fondo detrás del mensaje */
      -webkit-backdrop-filter: blur(4px);  /* Compatibilidad para navegadores WebKit */
    }
  
    @keyframes fadeIn {
      from { 
        opacity: 0;                         /* Comienza totalmente transparente */
        transform: translateY(20px) scale(0.98); /* Ligeramente desplazado hacia abajo y reducido */
      }
      to { 
        opacity: 1;                         /* Termina completamente visible */
        transform: translateY(0) scale(1);  /* Posición normal y escala original */
      }
    }
  }
  
  .menu-actions {
    display: flex;                     /* Usa flexbox para alinear elementos hijos */
    flex-direction: column;           /* Apila los elementos verticalmente */
    gap: 18px;                        /* Espacio entre cada elemento */
    margin-top: 24px;                 /* Espacio superior entre el menú y el elemento anterior */
  }
  
  .menu-card {
    display: flex;                    /* Usa flexbox para alinear contenido horizontalmente */
    align-items: center;             /* Centra verticalmente los elementos */
    background: #f5f6fa;             /* Fondo claro para la tarjeta */
    border-radius: 12px;             /* Bordes redondeados */
    box-shadow: 0 2px 8px rgba(123,47,242,0.08); /* Sombra suave morada */
    padding: 18px 16px;              /* Espaciado interno: 18px arriba/abajo y 16px izquierda/derecha */
    font-size: 1.15rem;              /* Tamaño de fuente ligeramente aumentado */
    font-weight: 700;                /* Texto en negrilla */
    color: #7b2ff2;                  /* Color de texto morado */
    text-decoration: none;          /* Elimina subrayado en enlaces */
    transition: box-shadow 0.2s, background 0.2s; /* Transiciones suaves al interactuar */
    gap: 16px;                       /* Espacio entre ícono y texto */
  }
  
  .menu-card:hover {
    background: #e6e0fa;            /* Cambia fondo al pasar el mouse */
    box-shadow: 0 4px 16px rgba(123,47,242,0.16); /* Sombra más marcada en hover */
  }
  
  .menu-icon {
    font-size: 2rem;                 /* Tamaño grande para íconos */
    width: 40px;                     /* Ancho fijo para mantener alineación */
    text-align: center;             /* Centra el ícono horizontalmente */
    flex-shrink: 0;                  /* Evita que el ícono se reduzca al ajustar el contenedor */
  }
  
  .buscar-box {
    background: var(--color-blanco);                /* Fondo blanco personalizado desde variables */
    border-radius: var(--border-radius);            /* Bordes redondeados personalizados */
    box-shadow: 0 4px 24px var(--color-shadow);     /* Sombra definida desde variable */
    padding: 30px;                                  /* Espaciado interno uniforme */
    position: relative;                             /* Necesario para z-index y efectos */
    z-index: 1;                                     /* Se posiciona encima de otros elementos si se superponen */
    animation: fadeIn 0.6s ease-out;                /* Animación de entrada suave */
  }
  
  /* PERFIL DE USUARIO */
  .user-avatar {
    width: 60px;                     /* Ancho fijo del avatar */
    height: 60px;                    /* Alto fijo del avatar */
    border-radius: 50%;             /* Hace el contenedor perfectamente circular */
    background: var(--color-gris);  /* Fondo gris desde variable */
    display: flex;                  /* Usa flexbox para centrar la imagen */
    align-items: center;            /* Centra verticalmente */
    justify-content: center;        /* Centra horizontalmente */
    margin-bottom: 10px;            /* Espacio inferior */
    overflow: hidden;               /* Oculta cualquier parte de la imagen que sobresalga */
  }
  
  .user-avatar img {
    width: 100%;                    /* La imagen ocupa el 100% del contenedor */
    height: auto;                   /* Mantiene la proporción original */
  }
  
  .input-field {
    width: 100%;                                     /* Ocupa todo el ancho disponible */
    padding: 15px;                                   /* Espaciado interno uniforme */
    border: 1.5px solid var(--color-gris);           /* Borde gris claro personalizado */
    border-radius: var(--border-radius-sm);          /* Bordes redondeados pequeños desde variable */
    font-size: 1rem;                                 /* Tamaño de fuente estándar */
    font-family: 'Montserrat', sans-serif;           /* Fuente personalizada */
    transition: all 0.3s;                            /* Transición suave en todos los cambios */
    background: var(--color-blanco);                 /* Fondo blanco */
  }
  
  .input-field:focus {
    border-color: var(--color-principal);            /* Cambia el color del borde al enfocar */
    box-shadow: 0 0 0 2px rgba(123, 47, 242, 0.2);    /* Efecto de sombra morado alrededor del campo */
    outline: none;                                   /* Elimina el borde predeterminado del navegador */
  }
  
  /* CHECKBOX PERSONALIZADO */
  .checkbox-group {
    display: flex;                    /* Alinea el checkbox y su texto en línea */
    align-items: center;             /* Centra verticalmente */
    margin-bottom: 25px;             /* Espacio inferior con otros elementos */
  }
  
  .checkbox-group input[type="checkbox"] {
    -webkit-appearance: none;                          /* Elimina el estilo nativo en WebKit */
    appearance: none;                                  /* Elimina el estilo nativo general */
    width: 20px;                                       /* Tamaño del checkbox */
    height: 20px;                                      /* Altura del checkbox */
    border: 2px solid var(--color-gris-oscuro);        /* Borde gris oscuro personalizado */
    border-radius: 4px;                                /* Bordes ligeramente redondeados */
    margin-right: 10px;                                /* Espacio a la derecha del texto */
    cursor: pointer;                                   /* Cambia el cursor al pasar sobre el checkbox */
    position: relative;                                /* Necesario para colocar el check con ::after */
    transition: all 0.3s;                              /* Transición suave para cambios */
  }
  
  .checkbox-group input[type="checkbox"]:checked {
    background-color: var(--color-principal);          /* Fondo morado al estar marcado */
    border-color: var(--color-principal);              /* Borde morado al estar marcado */
  }
  
  .checkbox-group input[type="checkbox"]:checked::after {
    content: "✓";                                      /* Muestra el check en el centro */
    position: absolute;                                /* Posicionamiento absoluto dentro del checkbox */
    color: white;                                      /* Color blanco del símbolo */
    font-size: 14px;                                   /* Tamaño del check */
    top: 50%;                                          /* Centrado vertical */
    left: 50%;                                         /* Centrado horizontal */
    transform: translate(-50%, -50%);                  /* Centrado exacto usando transformación */
  }
  
  .checkbox-group label {
    font-size: 1rem;                /* Tamaño del texto del label */
    color: var(--color-texto);     /* Color personalizado del texto */
    cursor: pointer;               /* Cambia el cursor al pasar sobre el texto */
  }

  /* ===== ENHANCED STYLES FOR JAVASCRIPT INTEGRATION ===== */

  /* Notification System */
  #notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 400px;
  }

  .notification {
    background: var(--color-blanco);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border-left: 4px solid var(--color-principal);
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideInRight 0.3s ease-out;
    backdrop-filter: blur(10px);
  }

  .notification-success {
    border-left-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
  }

  .notification-error {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2, #fef2f2);
  }

  .notification-warning {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
  }

  .notification-info {
    border-left-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
  }

  .notification-message {
    font-weight: 500;
    color: var(--color-texto);
    flex: 1;
  }

  .notification-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    transition: color 0.2s;
  }

  .notification-close:hover {
    color: var(--color-texto);
  }

  .notification.fade-out {
    animation: slideOutRight 0.3s ease-in forwards;
  }

  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slideOutRight {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  /* Loading Overlay */
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease-out;
  }

  .loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--color-principal);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  /* ✅ FIN DEL ARCHIVO DE ESTILOS CSS — COMPLETADO CON ÉXITO */

  /* ===== ADDITIONAL ENHANCED STYLES ===== */

  /* Demo Credentials */
  .demo-credentials {
    margin-top: 24px;
    padding: 16px;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border-radius: 12px;
    border: 1px solid #cbd5e1;
  }

  .demo-credentials summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-principal);
    padding: 8px 0;
    transition: color 0.2s;
  }

  .demo-credentials summary:hover {
    color: var(--color-secundario);
  }

  .demo-info {
    margin-top: 12px;
    padding: 12px;
    background: var(--color-blanco);
    border-radius: 8px;
    border-left: 4px solid var(--color-principal);
  }

  .demo-info p {
    margin: 4px 0;
    font-size: 0.875rem;
    color: var(--color-texto);
  }

  /* User Stats */
  .user-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 16px 0;
  }

  .stat-item {
    text-align: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--color-principal), var(--color-secundario));
    border-radius: 12px;
    color: var(--color-blanco);
    min-width: 80px;
    transition: transform 0.3s ease;
  }

  .stat-item:hover {
    transform: translateY(-2px);
  }

  .stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
  }

  .stat-label {
    font-size: 0.75rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Enhanced Logout Button */
  .logout-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: var(--color-blanco);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
  }

  .logout-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
  }

  .logout-icon {
    font-size: 1.1rem;
  }

  /* Menu Descriptions */
  .menu-description {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 4px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
  }

  .menu-card:hover .menu-description {
    opacity: 1;
    transform: translateY(0);
  }

  /* Quick Actions */
  .quick-actions {
    margin-top: 32px;
    padding: 24px;
    background: linear-gradient(135deg, var(--color-blanco), #f8fafc);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
  }

  .quick-actions h3 {
    margin: 0 0 16px 0;
    color: var(--color-texto);
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
  }

  .quick-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .quick-btn {
    background: linear-gradient(135deg, var(--color-principal), var(--color-secundario));
    color: var(--color-blanco);
    border: none;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    min-width: 120px;
    justify-content: center;
  }

  .quick-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(123, 47, 242, 0.3);
  }

  .quick-icon {
    font-size: 1.1rem;
  }

  /* Menu Icon Text */
  .menu-icon-text {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-principal), var(--color-secundario));
    border-radius: 50%;
    color: var(--color-blanco);
  }

  /* Enhanced Button Loading State */
  .btn-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .btn-primary.loading .btn-text {
    opacity: 0;
  }

  .btn-primary.loading .btn-loading {
    display: block;
  }

  /* Responsive Enhancements for New Features */
  @media (max-width: 480px) {
    .user-stats {
      flex-direction: column;
      gap: 12px;
      align-items: center;
    }
    
    .stat-item {
      min-width: 120px;
    }
    
    .quick-buttons {
      flex-direction: column;
    }
    
    .quick-btn {
      min-width: 100%;
    }
    
    .menu-description {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Animation Delays for Menu Cards */
  .menu-card:nth-child(1) { animation-delay: 0.1s; }
  .menu-card:nth-child(2) { animation-delay: 0.2s; }
  .menu-card:nth-child(3) { animation-delay: 0.3s; }
  .menu-card:nth-child(4) { animation-delay: 0.4s; }
  .menu-card:nth-child(5) { animation-delay: 0.5s; }

  /* Enhanced Focus States */
  .quick-btn:focus,
  .logout-btn:focus {
    outline: 2px solid var(--color-principal);
    outline-offset: 2px;
  }

  /* Accessibility Improvements */
  @media (prefers-reduced-motion: reduce) {
    .menu-card,
    .stat-item,
    .quick-btn,
    .logout-btn {
      animation: none;
      transition: none;
    }
  }

  /* High Contrast Mode */
  @media (prefers-contrast: high) {
    .demo-credentials {
      border-width: 2px;
    }
    
    .stat-item {
      border: 2px solid var(--color-texto);
    }
    
    .quick-btn,
    .logout-btn {
      border: 2px solid var(--color-texto);
    }
  }

  /* ===== SEARCH PAGE ENHANCEMENTS ===== */

  /* Recent Searches */
  .recent-searches {
    margin-top: 32px;
    padding: 20px;
    background: linear-gradient(135deg, var(--color-blanco), #f8fafc);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
  }

  .recent-searches h4 {
    margin: 0 0 16px 0;
    color: var(--color-texto);
    font-size: 1.1rem;
    font-weight: 600;
  }

  .recent-search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--color-blanco);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .recent-search-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(123, 47, 242, 0.1);
    border-color: var(--color-principal);
  }

  .search-route {
    font-weight: 600;
    color: var(--color-texto);
    font-size: 0.9rem;
  }

  .search-date {
    font-size: 0.8rem;
    color: #6b7280;
  }

  /* Enhanced Search Results */
  .flight-list h3 {
    margin: 24px 0 16px 0;
    color: var(--color-texto);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
  }

  #vuelosContainer {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Enhanced Form Validation */
  .input-field:invalid {
    border-color: #ef4444;
  }

  .input-field:valid {
    border-color: #10b981;
  }

  /* Date Input Enhancements */
  input[type="date"] {
    position: relative;
  }

  input[type="date"]::-webkit-calendar-picker-indicator {
    background: var(--color-principal);
    border-radius: 4px;
    cursor: pointer;
    padding: 4px;
  }

  /* Select Enhancements */
  select.input-field {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
    appearance: none;
  }

  /* Enhanced Checkbox */
  .remember-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-principal);
    cursor: pointer;
  }

  .remember-row label {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
  }

  .remember-row label:hover {
    color: var(--color-principal);
  }

  /* Loading State Enhancements */
  .btn-primary.loading {
    position: relative;
    color: transparent;
  }

  .btn-primary.loading .btn-loading {
    display: block;
  }

  .btn-primary.loading .btn-text {
    opacity: 0;
  }

  /* Responsive Enhancements for Search */
  @media (max-width: 480px) {
    .recent-search-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    
    .search-route {
      font-size: 1rem;
    }
    
    .search-date {
      font-size: 0.875rem;
    }
    
    .flight-list h3 {
      font-size: 1.25rem;
    }
  }

  /* Animation for Search Results */
  .flight-card.enhanced {
    animation: slideInUp 0.5s ease-out;
  }

  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Enhanced Error Messages */
  .error-msg {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0;
    color: #dc2626;
    font-size: 0.875rem;
    font-weight: 500;
    display: none;
  }

  .error-msg.show {
    display: block;
    animation: shake 0.5s ease-in-out;
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
  }

  /* Success Messages */
  .success-msg {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0;
    color: #059669;
    font-size: 0.875rem;
    font-weight: 500;
    display: none;
  }

  .success-msg.show {
    display: block;
    animation: slideInRight 0.3s ease-out;
  }

  /* Enhanced Form Layout */
  .buscar-box {
    max-width: 600px;
    margin: 0 auto;
    padding: 24px;
  }

  .buscar-box .section-title {
    margin-bottom: 32px;
    text-align: center;
    font-size: 2.2rem;
    background: linear-gradient(135deg, var(--color-principal), var(--color-secundario));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Enhanced User Profile in Search */
  .user-profile1 {
    background: linear-gradient(135deg, var(--color-principal), var(--color-secundario));
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    color: var(--color-blanco);
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .user-avatar1 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
  }

  .user-info1 {
    flex: 1;
  }

  .user-name1 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 4px;
  }

  .logout-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-blanco);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .logout-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
  }

  /* Enhanced Form Groups */
  .input-group {
    margin-bottom: 20px;
    position: relative;
  }

  .input-group label {
    position: absolute;
    top: -8px;
    left: 12px;
    background: var(--color-blanco);
    padding: 0 8px;
    font-size: 0.75rem;
    color: var(--color-principal);
    font-weight: 600;
    z-index: 1;
  }

  /* Enhanced Button States */
  .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  .btn-primary:disabled:hover {
    transform: none;
    box-shadow: none;
  }

  /* Enhanced Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .recent-search-item,
    .flight-card.enhanced,
    .error-msg,
    .success-msg {
      animation: none;
      transition: none;
    }
  }

  /* High Contrast Mode */
  @media (prefers-contrast: high) {
    .recent-search-item {
      border-width: 2px;
    }
    
    .input-field {
      border-width: 2px;
    }
    
    .btn-primary {
      border: 2px solid var(--color-texto);
    }
  }