select:hover {
    box-shadow: 1px 1px 2px rgba(70, 21, 2, 0.5), -1px -1px 2px rgba(77, 14, 3, 0.5);
    background-color: rgba(44, 152, 125, 0.1); /* Aquí puedes elegir otro color para el fondo */
  }
  
  select option:hover {
    background-color: rgba(118, 29, 9, 0.5); /* Color al pasar el mouse sobre las opciones */
    color: white; /* Color del texto de la opción */
  } 


#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

.logo_espcmm {
    width: 230px; /* o el ancho que desees */
    height: auto; /* Esto mantiene la proporción original */
  }

  .header-bg {
  font-family: 'KontoraBold';
  background-image: url('../img/patron1.png'); /* Ruta de la imagen de fondo */
  background-size: cover; /* Ajusta el tamaño para cubrir el área del header */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  padding: 20px 0; /* Añade algo de espacio interno si es necesario */
}


.moderno-formulario {
    background-color: #f9f9f9;
    background-image: url('../img/fondof.png');
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .moderno-titulo {
    font-family: 'KontoraNormal', sans-serif; 
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: rgb(48, 147, 126); 
}

.moderno-subtitulo {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: rgb(48, 147, 126); 
    font-family: 'KontoraBold', sans-serif; 
}

  .moderno-grupo {
    margin-bottom: 20px;
  }
  
  .moderno-label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: rgb(44, 152, 125);
  }   
  
  .label-normal {
    font-family: 'KontoraNormal', sans-serif; 
    font-size: 1.25rem;
    color: rgb(255, 255, 255); 
  } 
  
  .label-normalNegrita {
    font-family: 'KontoraNormal', sans-serif; 
    font-size: 1.25rem;
    color: rgb(0, 0, 0); 
  } 

  .label-encabezadoNormal {
    font-family: 'KontoraNormal', sans-serif; 
    font-size: 18px;
    color: #606060 !important; 
  } 

  .label-titulo {
    font-family: 'KontoraBold', sans-serif; 
    font-size: 1.75rem;
    color: rgb(48, 147, 126); 
  } 
  
  .moderno-input,
  .moderno-select {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .moderno-input:focus,
  .moderno-select:focus {
    outline: none;
    border-color: #B6213C;
    box-shadow: 0 0 5px rgba(182,33,60);
  }
  
  .moderno-boton {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: rgb(2554, 255, 255) !important; /* Fuerza que se use este color */
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .encabezado1 {
    /* background: linear-gradient(to right, #2c9882, #b6213c);  */
    background: #d5dcdb; 
    color: rgb(48, 147, 126); /* Texto blanco para contraste */
    font-family: 'KontoraNormal', sans-serif; 
    font-size: 1.2rem; /* Tamaño de texto moderado */
    /* font-weight: bold; Texto destacado */
    padding: 15px 20px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    text-align: center; /* Centrar el texto */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin: 20px auto; /* Margen superior e inferior, centrado automático */
    max-width: 80%; /* Ancho máximo relativo */
  }
    
  .moderno-boton:hover {
    background-color: #0056b3;
  }
  
  .moderno-mensaje-error {
    color: red;
    font-weight: bold;
  }
  
  .moderno-footer img.moderno-icono {
    width: 80px;
    margin: 0 10px;
  }

  /* Estilo general del formulario */
.formulario-moderno {
    max-width: 900px;
    margin: 0 auto;
    padding: 5px;
    background-color: #f4f4f9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: 'KontoraNormal', sans-serif; 
}

/* Contenedor del formulario */
.formulario-contenedor {
    padding: 20px;
}

/* Estilos para el fieldset */
.fieldset-estilo {
    border: 2px solid #2c9882;
    border-radius: 8px;
    padding: 20px;
    background-color: #ffffff;
    margin-bottom: 20px;
}

/* Estilo para el legend */
.legend-estilo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2c9882;
    padding: 0 10px;
}

/* Estilos de las etiquetas (labels) */
.label-estilo {
    font-size: 1.1rem;
    font-weight: 600;
    /* color: #30937e; */
    margin-bottom: 10px;
}

/* Estilo para los inputs y selects */
.input-estilo {
    border: 2px solid #2c9882;
    border-radius: 5px;
    background-color: #f7f7f7;
    padding: 12px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.input-estilo:focus {
    border-color: #b6213c;
    outline: none;
    box-shadow: 0 0 5px rgba(182, 33, 60, 0.5);
}

/* Estilo para los contenedores opcionales */
.formulario-optional {
    margin-top: 20px;
}

/* Estilo para los botones */
.btn-submit {
    padding: 12px 30px;
    font-size: 1.1rem;
    background-color: #2c9882;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-submit:hover {
    background-color: #1f7a63;
}

/* Estilo para los grupos de errores */
.error-estilo {
    color: red;
    font-size: 1rem;
    margin-top: 10px;
}

.error-estilo h4 {
    font-weight: bold;
}

/* Contenedor de los botones */
.btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

  /* Contenedor de los elementos para que estén en línea */
.formulario-datos {
    display: flex; /* Flexbox para alinearlos en línea */
    justify-content: space-between; /* Espacio entre los elementos */
    align-items: center; /* Alinea verticalmente los elementos */
    gap: 20px; /* Espacio entre las cajas */
    margin-bottom: 20px; /* Espacio inferior */
}

/* Estilo para cada uno de los elementos */
.formulario-dato {
    flex: 1; /* Los hace ocupar espacio igual */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Estilo de las etiquetas para una presentación más limpia */
.label-estilo1 {
    font-size: 16px; /* Tamaño de fuente adecuado */
    font-weight: 600; /* Peso de fuente en negrita */
    color: #333; /* Color oscuro */
    padding: 10px; /* Espaciado alrededor del texto */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #f4f4f4; /* Fondo suave */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    transition: all 0.3s ease; /* Transición suave */
}

/* Efecto hover para las etiquetas */
.label-estilo:hover {
    background-color: #e0e0e0; /* Fondo un poco más oscuro */
    transform: translateY(-2px); /* Pequeña elevación */
}

/* Estilos para la etiqueta en dispositivos móviles */
@media (max-width: 768px) {
    .formulario-datos {
        flex-direction: column; /* Los apila en dispositivos pequeños */
    }
    .formulario-dato {
        margin-bottom: 15px; /* Espaciado inferior para cada elemento */
    }
}


/* Botones más anchos y alineados */
.btn-container2 {
  display: flex;
  justify-content: center;
  gap: 10px; /* Espacio entre botones */
}

.btn-submit2 {
  background-color: #007bff; /* Color del botón */
  color: #fff; /* Color del texto */
  border: none;
  padding: 10px 30px; /* Ajusta el tamaño del botón */
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  min-width: 150px; /* Ancho mínimo */
  text-align: center;
}

.btn-submit2:hover {
  background-color: #0056b3; /* Color del botón al pasar el cursor */
}

.fila-grande {
  font-size: 22px;
}

.alerta {
  background-color: #ff4d4d; /* Rojo vibrante */
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 5px auto;
  animation: fadeIn 0.5s ease-in-out;
}

.alerta .icono {
  font-size: 20px;
  margin-right: 10px;
}

.alerta .cerrar {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.alerta .cerrar:hover {
  transform: scale(1.2);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Asegurar que el fondo del modal sea visible */
.modal {
  background: rgba(0, 0, 0, 0.7) !important; /* Fondo oscuro semitransparente */
}

/* Centrar correctamente el modal */
.modal-dialog {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100vh - 8rem) !important; /* Ajusta este valor para subir o bajar */
  margin-top: -50px !important; /* Valor negativo para subirlo más */
}


/* Estilos del contenido del modal */
.modal-content {
  background: #ffffff !important; /* Fondo sólido blanco */
  border-radius: 12px !important;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3) !important; /* Sombra elegante */
  padding: 15px !important;
  border: none !important;
}

/* Encabezado */
.modal-header {
  background: #30937e !important;
  color: white !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

/* Pie del modal */
.modal-footer {
  background: #f1f1f1 !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  padding: 10px !important;
}

/* Botón de cerrar */
.btn-close {
  filter: invert(1) !important; /* Hace que el botón se vea blanco */
  opacity: 1 !important;
}

/* Botones */
.btn-close-custom {
  background-color: #6c757d !important;
  color: white !important;
  border-radius: 6px !important;
  padding: 8px 15px !important;
  border: none !important;
}

.btn-close-custom:hover {
  background-color: #545b62 !important;
}

.btn-save-custom {
  background-color: #30937e !important; /* Verde */
  color: white !important;
  border-radius: 6px !important;
  padding: 8px 15px !important;
  border: none !important;
}

.btn-save-custom:hover {
  background-color: #218838 !important;
}

/* Select estilizado */
.form-select {
  border-radius: 6px !important;
  padding: 8px !important;
  border: 1px solid #ccc !important;
}