html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Asegura que el contenido no se quede detrás del navbar */
body {
  overflow-x: hidden;
}

/* Elimina márgenes en el contenedor */
main {
  margin-top: 0; /* Evita márgenes innecesarios en la parte superior */
  padding-top: 0; /* Evita relleno innecesario */
}

.header {
  position: relative;
  width: 100%;
  min-height: 70vh; /* Establece una altura mínima */
  overflow: hidden;
  display: block;
  z-index: 1; /* Asegúrate de que el header esté por encima de los otros elementos */
}
.header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7%;
  background: rgba(205, 203, 203, 0.355);
}

/* Asegura que ocupe todo el fondo del navbar */
.imagen-fondo {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  clip-path: polygon(8% 15%, 100% 15%, 100% 100%, 0% 100%);
  background-repeat: no-repeat;
  background-size: cover;
}

/* Ajuste de video para mostrar solo la parte superior */
.imagen-fondo-contenido {
  width: 100%;
  height: 100vh; /* Ocupa toda la altura de la ventana */
  object-fit: cover; /* Cubre el contenedor sin deformarse */
  object-position: center; /* Centra la imagen */
  position: absolute; /* Para que esté en el fondo */
  top: 0;
  left: 0;
  z-index: -1; /* Mantiene la imagen detrás del contenido */
}

/* -------------------------------------- */
/* -------------- Navbar ---------------- */
/* -------------------------------------- */

.navbar {
  position: fixed; /* Asegura que el contenido del navbar se coloque por encima del video */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; /* El navbar debe estar por encima del contenido */
  background: transparent; /* Hace que el fondo del navbar sea transparente */
}
/* Ajuste de los enlaces del navbar */
.navbar li {
  position: relative;
  list-style: none;
  display: inline;
  margin-right: 1vw;

  font-size: 1.225rem;
}
.navbar li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 2px;
  background: rgb(128, 73, 137);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 250ms ease;
}
.navbar li:hover::after {
  transform: scaleX(1);
  transform-origin: left;

  box-shadow: 0px 4px 5px 2px rgba(237, 235, 235, 0.244);
}

/* Estilo para el logo */
.navbar .navbar-brand {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
}
/* Estilo para los enlaces del navbar */
.navbar-nav .nav-link {
  color: rgba(40, 24, 42, 0.904) !important; /* Color del texto en negro */
  font-weight: bold; /* Texto en negrita */
  text-shadow: 1px 1px 3px white; /* Sombra blanca alrededor del texto */
}

.navbar-nav .nav-link.active {
  font-weight: bold;
  color: rgb(
    140,
    60,
    154
  ) !important; /* Color para resaltar la opción activa */
}

nav .container-fluid {
  display: flex;
  justify-content: flex-start; /* Alinea los elementos (logo y enlaces) a la izquierda */
  align-items: center;
}

nav .logo {
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.navbar .logo img {
  max-width: 120px;
  height: auto;
}

.nav .navbar-nav {
  text-align: left;
  width: 100%;
  justify-content: left;
}

nav .navbar-toggler-icon {
  filter: invert(50%);
}

.navbar-toggler {
  border: none;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  box-shadow: none;
}

/* Estilo para el logo */
.navbar .logo {
  max-height: 120px;
  width: auto;
}

.navbar .logo img {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}

/* Estilo para pantallas más pequeñas */

@media (max-width: 992px) {
  .vimagen-fondo-content {
    height: 100%; /* Ocupa toda la altura del header */
  }
  .video-text-container h2 {
    display: none; /* Oculta los títulos en pantallas pequeñas */
  }

  .logo {
    max-height: 150px; /* Ajusta la altura máxima del logo para pantallas grandes */
    width: auto; /* Ajusta el ancho automáticamente para mantener la proporción */
  }

  nav ul {
    display: block; /* Cambiar a bloque para que los elementos estén uno debajo del otro */
    text-align: center; /* Centrar el contenido de la lista */
  }

  nav ul li {
    display: block; /* Cambiar a bloque para que los elementos estén uno debajo del otro */
    margin-bottom: 10px; /* Agregar espacio entre elementos apilados */
  }

  /* Evitar que el navbar o cualquier otro contenido se superponga o recorte */
  .navbar {
    padding-top: 20px; /* Añade un padding superior para que no quede recortado */
    position: relative; /* Para que el z-index funcione correctamente */
    z-index: 1; /* Z-index más bajo que el icono de la hamburguesa */
  }

  .header {
    background-color: rgba(
      255,
      255,
      255,
      0.751
    ); /* Fondo oscuro con opacidad */
  }

  /* Asegurar que el navbar no se desplace hacia abajo */
  .navbar-collapse {
    position: relative; /* Necesario para que el z-index de .navbar-toggler funcione */
    padding-top: 50px; /* Ajuste el padding superior si es necesario */
  }

  /* Ajuste para el navbar-toggler */
  .navbar-toggler {
    position: absolute; /* Coloca el botón de manera absoluta */
    top: 15px; /* Ajusta la distancia desde la parte superior */
    right: 15px; /* Ajusta la distancia desde la derecha */
    z-index: 1050; /* Asegura que el icono esté por encima del navbar y otros elementos */
  }

  .navbar-toggler i.bi-list {
    color: #ffffff !important; /* Cambiar color del icono a blanco */
  }
}

/* -------------------------------------- */
/* -------------------------------------- */



/* Contenedor del texto que cambiará sobre el video */
.img-text-container {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 3em;
  font-weight: bold;
  z-index: 2; /* Asegura que el texto esté encima del video */
}

/* Estilo de los títulos */
.img-text {
  color: rgb(140, 60, 154); /* Cambié el color a rojo */
  display: none; /* Inicialmente ocultos */
}

/* Clase para mostrar el texto activo */
.img-text.active {
  display: block;
}

/* -------------------------------------- */
/* ------------- Contacto --------------- */
/* -------------------------------------- */
.contacto{
  padding: 6%;
  height: auto;

}
.col-md-3{
  background: #7a57a1;
  padding: 4%;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  display: flex;  /* Asegura que el contenido interno se pueda alinear */
  flex-direction: column;
  justify-content: center; /* Centra verticalmente */
  align-items: center; /* Centra horizontalmente */
}
.contacto-info {
  display: flex;
  flex-direction: column;  /* Alinea los elementos en columna */
  justify-content: center; /* Centra verticalmente */
  align-items: center;     /* Centra horizontalmente */
  text-align: center;      /* Asegura que el texto esté centrado */
  color: #ffffff;
}

.contacto-info img{
  margin-bottom: 15%;
  
}
.contacto-info h2{
  margin-bottom: 10%;
}
.col-md-9{
  background: #fff;
  padding: 3%;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.contacto-form label{
  font-weight:600;
}
.contacto-form button{
  background: #25274d;
  color: #fff;
  font-weight: 600;
  width: 45%;
}
.contacto-form button:hover{
  background: #2d317e;
}

.titulo-form{
  text-align: center;
  color: #7a57a1 !important;
  padding: 2%;
}


.titulo-bienvenida{
  text-align: center;
  color: #7a57a1 !important;
  margin-top: 50px;

}

/* -------------------------------------- */
/* -------------- FECHAS ---------------- */
/* -------------------------------------- */

    /* Estilos para hacer que el icono tenga el mismo tamaño de altura que el input */
    .input-group .input-group-text {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%; /* Asegura que el icono tenga el mismo alto que el input */
  }
  .input-group .form-control {
      height: 38px; /* Ajusta el alto del input */
  }


/* -------------------------------------- */
/* ------------- V E R  -------------- */
/* -------------------------------------- */
.visualizar {
  position: relative;
  width: 900px;
  max-width: 80%;
  border: 2px solid #333;
  border-top: none;
  text-align: center;
  margin: 60px auto;
 
}

.visualizar h1 {
  position: relative;
  margin-top: -14px;
  display: inline-block;
  letter-spacing: 4px;
}

.visualizar .top-border{
  position: absolute;
  height: 2px;
  width: 24%;
  background-color: #333;
}

.right {
  right: 0;
}

.left {
  left: 0;
}

@media (max-width: 685px) {
.visualizar.top-border {	
  width: 18%;
	}
}

.visualizar p {
  width: 61%;
  margin: 20px auto 40px auto;
  line-height: 30px;
}

.visualizar .caja_dark {
  outline: 0;
  display: inline-block;
  padding: 20px;
  margin-bottom: 40px;
  width: 440px;
  max-width: 80%;
  background-color: #333;
  color: #fff;
  font-size: 22px;
  letter-spacing: 3px;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}

.visualizar .caja_dark:hover {
  background-color: #1D222D;
}

.visualizar .caja_dark:link, .visualizar .caja_dark:visited, .visualizar .caja_dark:link:hover, .visualizar .caja_dark:visited:hover {
  text-decoration: none;
  color: #fff;
}

@media (max-width: 500px) {
  .visualizar .top-border {	
    display: none;
  }
  .visualizar {
  border-top: 2px solid #333;
  }
  .visualizar h1 {
    margin: 20px 6px;
  }
}


.icono-retroceso {
  font-size: 2rem;
  color: #9800c2; /* El color que prefieras */
}


/* -------------------------------------- */
/* ---- A Ñ A D I R - E M P R E S A ----- */
/* -------------------------------------- */

.formulario-empresa .form-group {
  text-align: left;
  margin-bottom: 15px; /* Espacio entre los campos */
}

.formulario-empresa label {
  display: block;
  text-align: left;
  margin-left: 12px;
  margin-bottom: 5px;
}

.formulario-empresa .form-control {
  width: 100%;
  padding: 7px; /* Ajusta el espacio dentro del input */
  margin: 0 auto; /* Centra los inputs dentro de su contenedor */
  max-width: 98%; /* Limita el ancho máximo de los inputs */
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}


.add-empresa {
  position: relative;
  width: 900px;
  max-width: 80%;
  border: 2px solid #890694ad;
  border-top: none;

  text-align: center; /* Asegura que todo el contenido dentro de .add-empresa esté centrado */
}

.add-empresa h1 {
  position: relative;
  margin-top: -16px; /* Restablecer el margen superior */
  letter-spacing: 4px;
  text-align: center; /* Asegura que el h1 se alinee al centro */
  color: #28002cad;
}

.add-empresa .top-border{
  position: absolute;
  height: 2px;
  width: 24%;
  background-color: #86068f;
}


@media (max-width: 685px) {
.add-empresa.top-border {	
  width: 18%;
	}
}

.add-empresa .caja_dark {
  outline: 0;
  display: inline-block;
  padding: 20px;
  margin-bottom: 40px;
  width: 440px;
  max-width: 80%;
  background-color: #333;
  color: #fff;
  font-size: 22px;
  letter-spacing: 3px;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}

.add-empresa .caja_dark:hover {
  background-color: #843d8b;
  color: #fff;
}

.add-empresa .caja_dark:link, .add-empresa .caja_dark:visited, .add-empresa .caja_dark:link:hover, .add-empresa .caja_dark:visited:hover {
  text-decoration: none;
  color: #fff;
}

@media (max-width: 500px) {
  .add-empresa .top-border {	
    display: none;
  }
  .add-empresa {
  border-top: 2px solid #333;
  }
  .add-empresa h1 {
    margin: 20px 6px;
  }
}





/* Estilos del div selectorEmpresa */
.selectorEmpresa {
  padding: 20px;
  width: 60%;
  max-width: 70%; /* Esto asegura que no se haga más grande de lo permitido */
  background-color: #333;
  color: #fff;
  font-size: 22px;
  letter-spacing: 3px;
  text-align: center; /* Centra el texto dentro del contenedor */
  border-radius: 10px; /* Bordes redondeados para suavizar */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
  margin-top: 0; /* Elimina el margen superior del div */
  margin-bottom: 0;
}

/* Estilos para el formulario dentro del contenedor */
.selectorEmpresa form {
  display: flex; /* Usa flexbox para organizar los elementos en una fila */
  align-items: center; /* Centra verticalmente los elementos en la fila */
  justify-content: space-between; /* Da espacio entre los elementos */
  gap: 10px; /* Espacio entre los elementos */
}

/* Estilo para el label, select y button */
.selectorEmpresa label,
.selectorEmpresa select,
.selectorEmpresa button {
  font-size: 18px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* Estilo del select */
.selectorEmpresa select {
  flex-grow: 1; /* Hace que el select ocupe todo el espacio disponible */
}

/* Estilo del botón */
.selectorEmpresa button {
  background-color: #8b5cc0;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 120px; /* Ajusta el tamaño del botón */
}

.selectorEmpresa button:hover {
  background-color: #b88ddb;
}

/* Media query para pantallas pequeñas (p.ej., móviles) */
@media (max-width: 768px) {

  .selectorEmpresa form {
    flex-direction: column; /* Cambia la dirección de los elementos a columna */
    align-items: center; /* Alinea los elementos al centro */
    width: 100%; /* Asegura que el formulario ocupe todo el ancho disponible */
  }

  /* Asegurarse de que el select y el botón ocupen el 100% del ancho en pantallas pequeñas */
  .selectorEmpresa select,
  .selectorEmpresa button {
    width: 100%; /* Ocupa el 100% del ancho */
    margin-bottom: 10px; /* Añade un margen inferior entre los elementos */
  }
}



/* -------------------------------------- */
/* ---------- Logo Empresa -------------- */
/* -------------------------------------- */

.contenedor-logoE{
  width: 250px; 
  height: 250px; 
  position: relative;
  border-radius: 50%;
  margin: 1rem auto;
  display: block; 
}

.logo-empresa{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid #3333337e;
  border-radius: 50%;
}
.contenedor-logoE::before {
  transition: all 0.5s ease-in;
  background-color: rgba(152, 99, 161, 0.529);
  border: 2px solid pink;
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
  border-radius: 50%; /* 👈 esto lo hace coincidir con el círculo */
}

.contenedor-logoE:hover::before{
  opacity: .6 ;
}


.contenedor-grafica {
  display: flex;
  justify-content: center; /* Centra el canvas horizontalmente */
  align-items: center; /* Centra el canvas verticalmente */
  width: 40%; /* Ajusta el ancho del contenedor al 50% o lo que necesites */
  height: 40%; /* Ajusta la altura del contenedor al 50% o lo que necesites */
  margin: 0 auto; /* Centra el contenedor dentro de su padre */
}

/* Estilo para el canvas */
#grafica {
  max-width: 100%; /* Asegura que el canvas no se desborde */
  height: auto; /* Mantiene la relación de aspecto */
}

/* -------------------------------------- */
/* - M O S T R A R - D E N U N C I A S  - */
/* -------------------------------------- */

.mi-tabla {
  width: 100%;
  border-collapse: collapse;
}

.mi-tabla th {
  background-color: #8d66a4;
  color: white;
  padding: 10px;
  border: 1px solid #ccc;
}

.mi-tabla th:first-child {
  border-top-left-radius: 10px;
}

.mi-tabla th:last-child {
  border-top-right-radius: 10px;
}

.mi-tabla tr:nth-child(even) {
  background-color: #d0c3d792;
}

.mi-tabla tr:nth-child(odd) {
  background-color: #ffffff;
}

.mi-tabla tr:hover {
  background-color: rgba(232, 185, 252, 0.379);
}

.mi-tabla td {
  padding: 8px;
  border: 1px solid #ccc;
}

.mi-tabla .btn-primary {
  background-color: #7168ea;
  border-color: #a5a2d5;
}

.mi-tabla .btn-primary:hover {
  background-color: #8e88c6;
  border-color: #8e88c6;
}


.mi-tabla .btn-danger {
  background-color: #f44049;
  border-color: #f44049;
}

.mi-tabla .btn-danger:hover {
  background-color: #fd6e75;
  border-color: #f44049;
}

/* -------------------------------------- */
/* ----------- C O D I G O  ------------- */
/* -------------------------------------- */



.gallery {
  --g: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  clip-path: inset(1px);
  width: 450px; /* controlar tamaño conjunto */
  aspect-ratio: 1;
  position: relative;
}

.img-wrapper {
  grid-area: 1 / 1 / 2 / 3;
  position: relative;
  overflow: hidden; /* Oculta bordes duros de imágenes recortadas */
  border-radius: 20px; /* Ajusta el valor a tu gusto */
}

.img-wrapper img {
  --_p: calc(-1 * var(--g));
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .4s .1s;
  position: absolute;
  top: 0;
  left: 0;
}

/* clip-path visual */
.img-wrapper:first-child img {
  clip-path: polygon(0 0, calc(100% + var(--_p)) 0 , 0 calc(100% + var(--_p)));
}
.img-wrapper:last-child img {
  clip-path: polygon(100% 100%, 100% calc(0% - var(--_p)), calc(0% - var(--_p)) 100%);
}
.gallery:hover .img-wrapper:last-child img,
.gallery:hover .img-wrapper:first-child img:hover {
  --_p: calc(50% - var(--g));
}
.gallery:hover .img-wrapper:first-child img,
.gallery:hover .img-wrapper:first-child img:hover + img {
  --_p: calc(-50% - var(--g));
}

.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 10px 20px;
  border-radius: 8px;
  z-index: 1;
  pointer-events: none;
  text-align: center;
}



/* -------------------------------------- */
/* -------------- Footer ---------------- */
/* -------------------------------------- */

footer {
  position: relative;
  margin-top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(25, 25, 25, 0.955);
  text-align: center;
  padding-top: 2%;
  padding-bottom: 2%;
}

.footer p {
  color: rgb(213, 212, 212);
}
/* -------------------------------------- */