/* Estilos del header */
header {
    background-color: #084494; /* Fondo azul oscuro */
    padding: 15px 10px; /* Reducir el padding para hacerlo más pequeño */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    overflow: hidden; /* Asegura que no haya contenido desbordado */
    position: fixed; /* Fijar el header en la parte superior */
    top: 0; /* Asegura que se quede en la parte superior */
    left: 0; /* Alineado al lado izquierdo */
    width: 100%; /* Asegura que el header ocupe todo el ancho */
    z-index: 1000; /* Asegura que el header quede encima de los demás elementos */
    box-sizing: border-box; /* Asegura que el padding no afecte al ancho */
}

/* Estilos de la barra de navegación */
.navbar {
    display: flex; /* Disposición en fila */
    justify-content: center; /* Centra los elementos de la barra de navegación */
    align-items: center; /* Centra verticalmente los elementos */
}

/* Lista de navegación */
.nav-list {
    list-style: none; /* Elimina los puntos de las listas */
    display: flex; /* Coloca los elementos en una fila */
    gap: 15px; /* Espacio entre los enlaces */
    padding: 0;
    margin: 0;
}

/* Estilos de los enlaces */
.nav-list li a {
    color: white; /* Color de texto blanco */
    font-weight: 500; /* Grosor de fuente medio */
    font-size: 1rem; /* Tamaño de fuente 1rem */
    position: relative; /* Para permitir el uso de pseudo-elementos */
    padding: 8px 12px; /* Espaciado alrededor del texto */
    text-decoration: none; /* Elimina el subrayado */
    transition: color 0.3s ease; /* Transición suave para el color del texto */
}

/* Subrayado de los enlaces */
.nav-list li a::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px; /* El grosor del subrayado */
    left: 0;
    bottom: 0;
    background-color: #ffcc00; /* Color del subrayado */
    transition: width 0.3s ease; /* Transición suave para expandir el subrayado */
    border-radius: 2px;
}

/* Efecto al pasar el ratón por encima del enlace */
.nav-list li a:hover {
    color: #ffcc00; /* Cambia el color del texto cuando se pasa el ratón */
}

.nav-list li a:hover::after {
    width: 100%; /* Hace que el subrayado ocupe toda la longitud del enlace */
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f4f9;
    color: #333;
    line-height: 1.6;
    margin-top: 80px;
    padding-bottom: 30px; /* Asegura que haya espacio suficiente para el footer */
}


/* Asegura que el contenido no se vea debajo del header */
.content {
    margin-top: 120px; /* Deja espacio por encima para que el contenido no quede oculto por el header */
}

footer {
    background-color: #333; /* Color de fondo del footer */
    color: white; /* Color de texto blanco */
    text-align: center;
    padding: 0px;
    position: fixed; /* Fijamos el footer en la parte inferior */
    left: 0; /* Lo alineamos con el borde izquierdo */
    bottom: 0; /* Siempre en la parte inferior de la ventana */
    width: 100%; /* Aseguramos que cubra todo el ancho de la pantalla */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
    z-index: 1;
}

.alert {
    margin: 15px 0;
    padding: 10px;
    border-radius: 25px; /* Bordes más redondeados para un estilo moderno */
    font-weight: bold;
    text-align: center;
}

.alert.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 25px; /* Bordes más redondeados para un estilo moderno */

}

.alert.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 25px; /* Bordes más redondeados para un estilo moderno */

}

button {
    background-color: #084494; /* Color azul principal */
    color: white; /* Texto blanco */
    font-size: 1rem; /* Fuente en tamaño moderado */
    font-weight: 600; /* Fuente en negrita para destacarlo */
    padding: 12px 30px; /* Padding adecuado para un botón bien espaciado */
    border-radius: 25px; /* Bordes más redondeados para un estilo moderno */
    border: 2px solid transparent; /* Sin borde visible, pero tenemos el efecto de borde en hover */
    cursor: pointer; /* Apunta el cursor para indicar que es clickeable */
    background-clip: padding-box; /* Para no tener bordes difusos */
    transition: all 0.3s ease; /* Transición suave para los efectos */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para darle profundidad */
    width: 100%; /* El botón ocupará todo el ancho disponible */
}

/* Efecto hover */
button:hover {
    background-color: #25e40b;   /* Color azul más suave al pasar el ratón */
    transform: scale(1.05); /* El botón se agranda ligeramente */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al hacer hover */
}

/* Efecto activo (cuando se presiona el botón) */
button:active {
    background-color: #138009; /* Color más oscuro cuando se presiona */
    transform: scale(0.98); /* El botón se reduce ligeramente al presionar */
    box-shadow: none; /* Quitamos la sombra para simular la presión */
}

h2 {
    text-align: center;
    font-size: 1.8rem;
    color: #084494;
    margin-bottom: 25px;
}

/* Estilos de los grupos de entrada */
.input-group {
    margin-bottom: 20px;
}

/* Estilo para las etiquetas de los campos de entrada */
.input-group label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

/* Estilo de los campos de entrada */
.input-group input {
    width: 100%; /* Ocupa el 100% del contenedor */
    padding: 14px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-sizing: border-box; /* Incluye el padding en el cálculo del ancho */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Efecto de enfoque para los campos de entrada */
.input-group input:focus {
    background-color: #ffffff;
    border-color: #007BFF;
    outline: none;
}

.btn-eliminar {       background-color: #084494; /* Color azul principal */

    color: white; /* Texto blanco */
    font-size: 1rem; /* Fuente en tamaño moderado */
    font-weight: 600; /* Fuente en negrita para destacarlo */
    padding: 12px 30px; /* Padding adecuado para un botón bien espaciado */
    border-radius: 25px; /* Bordes más redondeados para un estilo moderno */
    border: 2px solid transparent; /* Sin borde visible, pero tenemos el efecto de borde en hover */
    cursor: pointer; /* Apunta el cursor para indicar que es clickeable */
    background-clip: padding-box; /* Para no tener bordes difusos */
    transition: all 0.3s ease; /* Transición suave para los efectos */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para darle profundidad */
    width: 100%; /* El botón ocupará todo el ancho disponible */
}

/* Efecto hover */
.btn-eliminar:hover {
    background-color: #ff0404;   /* Color azul más suave al pasar el ratón */
    transform: scale(1.05); /* El botón se agranda ligeramente */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al hacer hover */
}

/* Efecto activo (cuando se presiona el botón) */
.btn-eliminar:active {
    background-color: #790707; /* Color más oscuro cuando se presiona */
    transform: scale(0.98); /* El botón se reduce ligeramente al presionar */
    box-shadow: none; /* Quitamos la sombra para simular la presión */
}

label.required::before {
    content: " *";
    color: red;
}


.main-container {
    width: 100%;
    max-width: 1200px; /* Máximo ancho para el contenedor */
    margin: 0 auto; /* Centra el contenedor */
    padding: 20px; /* Espaciado alrededor */
    box-sizing: border-box;
}

.card {
    background-color: #ffffff; /* Fondo blanco */
    padding: 30px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    margin-top: 0px;
}

.alert {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.fade-out {
    opacity: 0;  /* Hace que el mensaje se desvanezca */
    transition: opacity 0.5s ease-out;  /* Aplica la animación de desvanecimiento */
}

/* Estilos para el efecto fade-out */
.alert.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

p.nosecomollamarlo {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb; /* Aumenté el grosor del borde a 3px */
    border-radius: 25px; /* Bordes más redondeados para un estilo moderno */
    padding: 10px; /* Añadí padding para que el texto no esté pegado al borde */
    font-weight: bold; /* Texto en negritas */
    text-align: center; /* Centramos el texto */
}

.mensaje-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb; /* Aumenté el grosor del borde a 3px */
    border-radius: 25px; /* Bordes más redondeados para un estilo moderno */
    padding: 10px; /* Añadí padding para que el texto no esté pegado al borde */
    font-weight: bold; /* Texto en negritas */
    text-align: center; /* Centramos el texto */
}
/* Estilo para las etiquetas de los campos de entrada */
.input-group label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

/* Estilo para el select */
.input-group select {
    width: 100%; /* Ocupa el 100% del contenedor */
    padding: 14px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-sizing: border-box; /* Incluye el padding en el cálculo del ancho */
    transition: background-color 0.3s ease, border-color 0.3s ease;
    -webkit-appearance: none; /* Elimina el estilo nativo en algunos navegadores */
    -moz-appearance: none; /* Elimina el estilo nativo en algunos navegadores */
    appearance: none; /* Elimina el estilo nativo */
    
}

/* Estilo para el icono de dropdown (si el navegador lo permite) */
.input-group select::-ms-expand {
    display: none; /* Elimina el ícono del dropdown en IE */
}

/* Efecto de enfoque para el select */
.input-group select:focus {
    background-color: #ffffff;
    border-color: #007BFF;
    outline: none;
}

/* Efecto de hover para el select */
.input-group select:hover {
    border-color: #084494; /* Cambio de color al pasar el ratón */
}

/* Estilo para el placeholder (cuando no se ha seleccionado nada) */
.input-group select option:first-child {
    color: #aaa; /* Color gris para la opción por defecto */
}

/* Estilo para las opciones seleccionables */
.input-group select option {
    padding: 10px; /* Espaciado adecuado para las opciones */
    background-color: #ffffff;
    color: black;
}

#chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    height: 400px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: move; /* Cambiar el cursor a uno de arrastre */
    z-index: 9999; /* Aseguramos que el chatbot esté por encima del footer */

}

/* Estilo para el encabezado del chat */
#chat-header {
    position: relative;
    padding: 10px;
    background-color: #084494;
    color: white;
    text-align: center;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px 10px 0 0;  /* Bordes redondeados en la parte superior */
}
.close-button {
    font-size: 24px;  /* Tamaño de la "X" */
    color: white;  /* Color blanco */
    background-color: transparent;  /* Fondo transparente */
    padding: 5px 10px; 
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;  
}

.close-button:hover {
    background-color: red;  /* Cambia el fondo a rojo al pasar el mouse */
    border-color: red;  /* Cambia el borde a rojo */
    color: white;  /* Mantiene el color de la "X" blanca */
}
#chat-title {
    flex-grow: 1;  /* Hace que el texto ocupe el espacio restante y se centre */
    text-align: center;  /* Centra el texto */
    margin-left: 20px;  /* Mueve el botón a la derecha */
    

}

/* Estilo para el área de conversación */
#chat-box {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
    background-color: white;
    border-bottom: 1px solid #ccc;
    
    
}

/* Estilo para el formulario de envío de mensajes */
#chat-form {
    display: flex;
    padding: 10px;
    z-index: 10000;  /* Asegura que el botón de chat esté sobre otros elementos */

    
}

#chat-form input {
    width: 80%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    
}

/* Estilo para el botón de enviar mensajes (tipo WhatsApp) */
/* Estilo para el botón de enviar mensajes (tipo WhatsApp) */
#chat-form button {
    
    width: 30px; /* Ajusta el tamaño del botón para hacerlo redondo */
    height: 30px; /* Tamaño igual para hacer un círculo perfecto */
    padding: 0; /* Eliminar el padding adicional */
    border: none; /* Eliminar borde */
    background-color:#084494; /* Color de fondo similar al de WhatsApp */
    color: white; /* Color del texto o ícono */
    border-radius: 50%; /* Redondear los bordes para hacerlo circular */
    cursor: pointer; /* Mostrar el cursor como puntero */
    display: flex; /* Usamos flex para centrar el ícono */
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Agregar sombra para el efecto flotante */
    transition: background-color 0.3s ease; /* Agregar transición para el hover */
    position: relative;
    left: 10px; /* Desplaza el botón a la derecha */
    margin-left: 1px;  /* Mueve el botón a la derecha */
    margin-right: 10px; /* Ajusta si es necesario */
    margin-top: 1px
}

/* Efecto al pasar el mouse por encima */
#chat-form button:hover {
    background-color: #128C7E; /* Color más oscuro cuando se pasa el mouse */
}

/* Efecto al hacer clic */
#chat-form button:active {
    background-color: #075E54; /* Color más oscuro al hacer clic */
}


/* Botón para abrir el chatbox */
#open-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #084494;
    color: white;
    padding: 15px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10000;  /* Asegura que el botón de chat esté sobre otros elementos */

}

/* Estilo para los mensajes */
.user-message, .bot-message {
    margin: 10px 0;
    padding: 5px;
    border-radius: 5px;
}

.user-message {
    background-color: #e1f5fe;
    align-self: flex-end;
    text-align: right;

}

.bot-message {
    background-color: #f1f1f1;
}

.material-icons{
    margin-left: 2px; /* Ajusta este valor según el desplazamiento que desees */
    color: black; /* Cambia el color del ícono a negro */
    scale: 0.75;
}

.card2 {
    background-color: #ffffff; /* Fondo blanco */
    padding: 30px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    margin-top: 20px;
}