/* Estilo para los botones */

input:focus {
	border: 1px solid #335B55;
	border-radius: 3px;
	background-color: #DDEEEC;
}

input[type=submit] {
	background:linear-gradient(145deg, #3b6e68, #457E76);;
	border: 1px solid #323452;	
	color: #ffffff;
	vertical-align: middle;
	cursor: pointer;
	border-radius: 10px;
	padding: 10px 30px 10px 30px;
	margin-right: 100px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* sombra suave por debajo */
	transition: all 0.3s ease; /* suaviza el hover */		
}

input[type=submit]:hover {
	background: #DDEEEC;
	color: black;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35); /* sombra más pronunciada al hacer hover */
	transform: translateY(-2px); /* efecto de "levantarse" un poco */
}

/* Estilo para el input oculto */
input[type="file"] {
    display: none;
}

/* Estilo para etiquetas */
label {
    display: inline-block;
}


/* titulo sy cabeceras  */
h1, h2, h3 {
	background-color: #DDEEEC;
	color: #9e1834;
}

h2 {
	font-size: 1.4rem;	
}



div.clear { 
	clear: both; 
}

.cuadro {
	border-color: #DDEEEC;
	border-style: solid;
	box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.2);
	padding-left: 6px;
}

.obligatorio {
  color: black;
  font-weight: bold;;
}



/* Estilo general para los botones */
.btn-personalizado {
    display: inline-block;
    padding: 5px 5px;
    font-size: 16px;
    color: #fff;
    background-color: #457E76;  /* Color de fondo */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    user-select: none; /* Evita que el texto sea seleccionado */
}

.btn-personalizado:hover {
    transform: scale(1.05);  /* Efecto de agrandar el botón al pasar el ratón */
}

.btn-personalizado:active {
    background-color: #003f8c;  /* Color al hacer clic */
    transform: scale(1);  /* El botón vuelve a su tamaño normal al hacer clic */
}

.color_message {	
	 color: red;
}

.mensaje-advertencia {
    color: red;
    font-weight: bold;
    margin: 10px 0;
    display: block;
}

.alerta_errores {
	border: 1px solid #f5c2c7;
    background-color: #f3d3d3;
    color: #842029;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 9px 11px 8px 0px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}


/* Estilo para el panel de espera */
#loadingPanel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el panel en la pantalla */
    width: 400px;  /* Define el tamaño del panel */
    height: 100px; /* Define la altura del panel */
    background-color: rgba(51, 91, 85, 0.8);/*Color rojo INE 149,33,57, con Fondo semitransparente 0.8 */
    color: white; /* Color del texto */
    text-align: center;
    padding-top: 20px;
    display: none; /* Inicialmente oculto */
    z-index: 9999; /* Asegúrate de que el panel esté por encima de otros elementos */
    border-radius: 10px; /* Bordes redondeados para un aspecto más amigable */
}

/* Estilo para el spinner (círculo giratorio) */
 .spinner {
    border: 4px solid rgba(0, 0, 0, 0);
	border-top: 6px solid #ffffff;
	border-bottom: 6px solid #ffffff; /* Otro color */
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
	margin: 0 auto;
}

  /* Animación de rotación del spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estilo especifico */
.cuerpo_principal{
	width: 65%;
	float: left;
	padding : 0em 1em 1em 1em;
}

.cuerpo_lateral{
	width: 23%;
	float: right;
	padding : 1em 2em 2em 2em;
	display: inline;
}

.cuerpo_texto_borde{
	list-style: none;
	border-bottom: 1px  solid #e5e5ff; 
	border-top: 1px  solid #e5e5ff; 
	border-right: 1px  solid #e5e5ff;
	border-left: 1px  solid #e5e5ff;
	padding : 0.6em;
}

.cuerpo_lateral_borde{
	list-style: none;
	border: 1px  solid #e5e5ff;
	width: 100%;
	float: left;
	padding : 0.6em;
	margin: 0em 0em 0em 0em;	
}

.cuerpo_resaltado_titulo_cabecera{
	box-shadow: 5px 5px 12px 0px rgba(0, 0, 0, 0.2);
}

.cuerpo_resaltado_titulo{
	box-shadow: 5px 5px 12px 0px rgba(0, 0, 0, 0.2);
	margin-top: 2%;
}

.cuerpo_principal h2{
	margin-top: 2%;
}

.label-style {
    font-weight: bold;
    margin-right: 10px;  /* Espacio entre la etiqueta y el valor */
   
}

#div_enviar span {
    font-weight: bold;
    margin-right: 10px; /* Espacio entre la etiqueta y el valor */
    display: inline-block;
    width: 30%;
    background-color: #ebf7f6
}

.clear {clear: both;}

.margen_dcha100 {margin-right: 100px;
}

.requerido {
  color: red;
}

.imagen {
	-webkit-box-shadow: 14px 10px 43px -11px rgba(0,0,0,0.75);
	-moz-box-shadow: 14px 10px 43px -11px rgba(0,0,0,0.75);
	box-shadow: 14px 10px 43px -11px rgba(0,0,0,0.75);
	margin: 2%;
}

label.requerido::after {
  content: " *";
  color: red;
  font-weight: bold;
}


/* Estilo para el ancho de campo*/
.ancho30 {
	width:					30%;
}

.ancho50 {
	width:					50%;
}

.ancho65 {
	width:					65%;
}

.ancho80 {
	width:					80%;
}

.ancho100 {
	width:					100%;
}

.alto6 {
	height:					6em;
}