/* Variables CSS para la nueva paleta de colores */
:root {
    --primary-bg: #141414; /* Fondo principal */
    --secondary-bg: #F90F4A; /* Color de resalte */
    --sidebar-bg: #09020e; /* Fondo de sidebar */
    --text-color: #F0F0F0; /* Color del texto */
    --highlight-color: #48DBE3; /* Color para botones/interacción */
    --shadow-dark: rgba(0, 0, 0, 0.3); /* Sombras oscuras */
    --shadow-light: rgba(255, 255, 255, 0.2); /* Sombras claras */
}

/* Estilos generales */
body {
    background-color: var(--primary-bg) ;
    font-family: 'Helvetica Neue', sans-serif;
    color: var(--text-color);
}

/* Estilo para el fondo de pantalla completa con imagen */
.full-screen-bg {
    background-image: url("https://img.freepik.com/fotos-premium/arafed-ansicht-eines-autos-das-nachts-auf-einer-autobahn-faehrt-generative-ki_900321-34523.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
}

/* Overlay oscuro que se coloca sobre la imagen de fondo */
.overlay {
    background-color: rgba(0, 0, 0, 0.8); /* Color negro con 80% de opacidad */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}

/* Estilo para el contenedor del formulario */
.form-container {
    background-color: white; /* Fondo blanco para el formulario */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    z-index: 2;
    max-width: 400px;
    width: 100%;
}


/* Estilo personalizado para el botón de enviar */
.form-submit-btn {
    background-color: var(--highlight-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    width: 100%;
    font-size: 16px;
    cursor: pointer;
}

.form-submit-btn:hover {
    background-color: var(--secondary-bg);
}

/* Estilo para el campo de formulario */
.form-control {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    margin-bottom: 15px;
}

/* From Uiverse.io by gharsh11032000 */ 
.form-container {
    width: 600px;
    background: linear-gradient(#212121, #212121) padding-box,
                linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;
    border: 2px solid transparent;
    padding: 32px 24px;
    font-size: 14px;
    font-family: inherit;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    border-radius: 16px;
  }
  
  .form-container button:active {
    scale: 0.95;
  }
  
  .form-container .form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .form-container .form-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .form-container .form-group label {
    display: block;
    margin-bottom: 5px;
    color: #717171;
    font-weight: 600;
    font-size: 12px;
  }
  
  .form-container .form-group input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    background-color: transparent;
    border: 1px solid #414141;
  }
  
  .form-container .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    resize: none;
    color: #fff;
    height: 96px;
    border: 1px solid #414141;
    background-color: transparent;
    font-family: inherit;
  }
  
  .form-container .form-group input::placeholder {
    opacity: 0.5;
  }
  
  .form-container .form-group input:focus {
    outline: none;
    border-color: #e81cff;
  }
  
  .form-container .form-group textarea:focus {
    outline: none;
    border-color: #e81cff;
  }
  
  .form-container .form-submit-btn {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-self: flex-start;
    font-family: inherit;
    color: #717171;
    font-weight: 600;
    width: 40%;
    background: #313131;
    border: 1px solid #414141;
    padding: 12px 16px;
    font-size: inherit;
    gap: 8px;
    margin-top: 8px;
    cursor: pointer;
    border-radius: 6px;
  }
  
  .form-container .form-submit-btn:hover {
    background-color: #fff;
    border-color: #fff;
  }
  /* Estilo general para el modal */
.modal-content {
    width: 100%;
    max-width: 800px; /* Ajustar el ancho del modal */
    background: linear-gradient(#212121, #212121) padding-box,
                linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;
    border: 2px solid transparent;
    padding: 30px;
    font-size: 14px;
    color: white;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilo del título del modal */
.modal-header h5 {
    color: #cecece;  /* Resaltar el título */
    font-weight: bold;
    font-size: 1.25rem;
    margin: 0;
    padding: 0;
}

/* Estilo del cuerpo del modal */
.modal-body p {
    font-size: 14px;
    color: #f0f0f0;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* Ajuste de botones dentro del modal */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap; /* Asegura que los botones se queden en una sola línea */
}

.modal-footer {
    display: flex;
    justify-content: center;  /* Centra horizontalmente los botones */
    gap: 10px;  /* Espaciado entre los botones */
}

.modal-footer .btn {
    background-color: var(--highlight-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.modal-footer .btn:hover {
    background-color: var(--secondary-bg);
}

/* Estilo para el botón de cerrar (secondary) */
.modal-footer .btn-secondary {
    background-color: #313131;
    color: #fff;
}

.modal-footer .btn-secondary:hover {
    background-color: #fff;
    color: #313131;
}

/* Estilo para el contenedor del formulario */
.form-container {
    width: 400px;
    background: linear-gradient(#212121, #212121) padding-box,
                linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;
    border: 2px solid transparent;
    padding: 32px 24px;
    font-size: 14px;
    font-family: inherit;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    border-radius: 16px;
}

.form-group label {
    margin-bottom: 5px;
    color: #717171;
}

.form-group input, .form-group select {
    padding: 12px 16px;
    border-radius: 8px;
    background-color: transparent;
    border: 1px solid #414141;
    color: #fff;
}

.form-group input::placeholder {
    opacity: 0.5;
}

.form-submit-btn {
    background-color: var(--highlight-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-submit-btn:hover {
    background-color: var(--secondary-bg);
}

.full-screen-container {
    height: 100vh;  /* 100% de la altura del viewport */
    width: 100%;    /* 100% del ancho */
    padding: 20px;  /* O el padding que prefieras */
}


.form-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}