/* Importamos la fuente Open Sans de Google Fonts */
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700');

/* Estilos para el encabezado (sticky header) */
.myEnc {
    position: sticky; /* El encabezado permanece visible al hacer scroll */
    top: 0; /* Se pega en la parte superior */
    z-index: 3; /* Asegura que esté por encima del resto del contenido */
    background-color: #213343; /* Color de fondo */
    text-align: center; /* Centra el contenido horizontalmente */
    width: 100%; /* Ocupa todo el ancho */
    height: 15%; /* Altura del encabezado */
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
	padding: 10px; /* Ajustamos el padding para hacerlo más compacto */
}

/* Estilos para el pie de página */
.myfoot {
    bottom: 0; /* Se coloca en la parte inferior */
    width: 100%; /* Ocupa todo el ancho */
    height: 10%; /* Altura del pie de página */
    background-color: #213343; /* Color de fondo */
    text-align: center; /* Centra el contenido horizontalmente */
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
}

/* Contenedor de resultados de búsqueda */
.results-container {
    display: flex;
    flex-direction: column; /* Los resultados se organizan en columna */
    align-items: center; /* Los elementos se alinean al centro */
    margin-top: 20px; /* Espacio superior */
}

/* Estilos para cada elemento de resultado */
.result-item {
    border: 1px solid #ccc; /* Borde alrededor de cada resultado */
    width: 100%; /* Ocupa todo el ancho del contenedor */
    margin-bottom: 10px; /* Espacio entre resultados */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra ligera */
}

/* Fondo blanco para ciertos elementos */
.image-header, .white-background {
    background-color: #ffffff; /* Fondo blanco */
}

/* Fondo gris claro para alternar filas */
.light-background {
    background-color: #f7f7f7; /* Fondo gris claro */
}

/* Estilo para la imagen de los resultados */
.result-image {
    width: 80%; /* Ocupa el 80% del ancho del contenedor */
    height: auto; /* Ajusta la altura automáticamente */
    max-height: 240px; /* Altura máxima */
    margin: 10px 0; /* Margen superior e inferior */
    object-fit: contain; /* Mantiene la proporción de la imagen */
}

/* Contenedor de datos dentro de los resultados */
.data-container {
    display: flex;
    flex-direction: column; /* Los datos se organizan en columna */
    padding: 10px; /* Relleno interno */
}

/* Estilos para los campos dentro de los resultados */
.field {
    text-align: left; /* Alinea el texto a la izquierda */
    margin-bottom: 5px; /* Espacio inferior */
    font-size: 1.5em; /* Aumenta el tamaño del texto */
    padding: 15px; /* Relleno interno */
}

/* Estilos para las etiquetas de los campos */
.label {
    font-weight: bold; /* Negrita para destacar las etiquetas */
}

/* Estilos para los encabezados h3 */
h3 {
    color: gray; /* Color gris */
    font-size: 0.9em; /* Tamaño de fuente reducido */
    margin-top: 10px; /* Margen superior */
    margin-bottom: 10px; /* Margen inferior */
    text-align: center; /* Texto centrado */
    padding: 15px; /* Relleno interno */
}
p {
    font-size: 0.7em; /* Tamaño de fuente reducido */
    margin-top: 10px; /* Margen superior */
    margin-bottom: 10px; /* Margen inferior */
    text-align: justify; /* Texto justificado */
    line-height: 1.3em; /* Altura de línea aumentada para mejor legibilidad */
    padding: 15px; /* Relleno interno */
}
/* Estilos personalizados para los párrafos */
.custom-p {
    font-size: 0.7em; /* Tamaño de fuente reducido */
    margin-top: 10px; /* Margen superior */
    margin-bottom: 10px; /* Margen inferior */
    text-align: justify; /* Texto justificado */
    line-height: 1.3em; /* Altura de línea aumentada para mejor legibilidad */
    padding: 15px; /* Relleno interno */
}

/* Estilos personalizados para los encabezados h3 */
.custom-h3 {
    color: gray; /* Color gris */
    font-size: 0.9em; /* Tamaño de fuente reducido */
    margin-top: 10px; /* Margen superior */
    margin-bottom: 10px; /* Margen inferior */
    text-align: center; /* Texto centrado */
    padding: 15px; /* Relleno interno */
}

/* Estilos generales para el formulario */
form {
    text-align: center; /* Centra el contenido del formulario */
    margin: 20px auto; /* Añade espacio alrededor del formulario */
    padding: 20px; /* Relleno interno del formulario */
    background-color: #f9f9f9; /* Color de fondo suave */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

/* Estilo para la etiqueta del formulario */
form label {
    font-size: 1.3em; /* Tamaño de fuente consistente con el resto */
    color: #213343; /* Color similar al del encabezado */
    display: block; /* Hace que la etiqueta ocupe toda la línea */
    margin-bottom: 10px; /* Espaciado inferior */
}

/* Estilo para el campo de entrada */
form input[type="text"] {
    font-size: 1.5em; /* Tamaño de fuente moderado */
    padding: 10px; /* Relleno interno para mayor comodidad */
    width: 80%; /* El campo ocupa el 80% del ancho */
    border: 1px solid #ccc; /* Borde sutil */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Sombra interna */
    text-align: center; /* Texto centrado dentro del campo */
    margin-bottom: 20px; /* Espaciado inferior */
    outline: none; /* Elimina el contorno al hacer clic */
}

/* Estilo para el botón de enviar */
form input[type="submit"] {
    font-size: 1.1em; /* Tamaño de fuente moderado */
    padding: 10px 20px; /* Relleno interno (alto y ancho) */
    background-color: #213343; /* Color de fondo similar al encabezado */
    color: #fff; /* Color del texto en blanco */
    border: none; /* Sin bordes */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Indicador de clic */
    transition: background-color 0.3s ease; /* Efecto de transición */
}

/* Efecto hover en el botón */
form input[type="submit"]:hover {
    background-color: #1a2a3b; /* Cambia el color al pasar el ratón */
}


/* Estilo general para el cuerpo de la página */
body {
    width: 100%; /* Ocupa todo el ancho disponible */
    height: 100vh; /* Ocupa toda la altura visible */
    margin: 0; /* Sin margen externo */
    padding: 0; /* Sin relleno externo */
    font-family: Helvetica, Arial, sans-serif; /* Fuente utilizada */
    color: #666; /* Color de texto gris */
    background: #f2f2f2; /* Fondo gris claro */
    font-size: 1em; /* Tamaño de fuente base */
    line-height: 1.5em; /* Altura de línea base */
    text-align: center; /* Centra el texto */
}

/* Estilo para el título principal (h1) */
h1 {
    font-size: 3.8em; /* Tamaño grande para el título */
    line-height: 2.3em; /* Altura de línea aumentada */
    margin: 15px 0; /* Margen superior e inferior */
    text-align: center; /* Texto centrado */
    font-weight: 300; /* Fuente ligera */
}

/* Estilos adicionales para el cuerpo */
body {
    width: 100%;
    height: 100vh; /* Ocupa toda la pantalla */
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
    color: #666;
    background: #f2f2f2;
    font-size: 1em;
    line-height: 1.5em;
    top: 0; /* Posición superior */
}

/* Estilo para el título h1 */
h1 {
    font-size: 2.3em; /* Tamaño moderado */
    line-height: 1.3em; /* Altura de línea */
    margin: 15px 0; /* Margen superior e inferior */
    text-align: center; /* Texto centrado */
    font-weight: 300; /* Fuente ligera */
}

/* Estilo para los párrafos */
p {
    margin: 0 0 1.5em 0; /* Margen inferior */
}

/* Estilos para las imágenes dentro del pie de página */
.myfoot img {
    height: 90%; /* Ocupa el 90% de la altura del contenedor */
    width: auto; /* Ajusta el ancho automáticamente */
    max-width: 80%; /* Ancho máximo */
}

/* Estilos para las imágenes dentro del encabezado */
.myEnc img {
    width: 80%; /* Ocupa el 80% del ancho */
    height: auto; /* Ajusta la altura automáticamente */
}

/* Contenedor principal de contenido */
#main-content {
    background: white; /* Fondo blanco */
    width: 90%; /* Ocupa el 90% del ancho */
    max-width: 900px; /* Ancho máximo */
    margin: 20px auto; /* Centra el contenido horizontalmente */
    min-height: 65%; /* Altura mínima */
    box-shadow: 0 0 10px rgba(0,0,0,.1); /* Sombra alrededor */
}

/* Padding del contenido principal */
#main-content header,
#main-content .content {
    padding: 40px; /* Relleno interno */
}

/* Estilo para mensajes de resultados */
.mensajeresult {
    color: gray; /* Color gris */
    font-style: italic; /* Texto en cursiva */
    font-size: 0.9em; /* Tamaño de fuente más pequeño */
}



/* Estilo para botón sitio de los CE */

		  .search-button {
           	
			
			font-size: 0.8em; /* Tamaño de fuente moderado */
    padding: 10px 20px; /* Relleno interno (alto y ancho) */
    background-color: #213343; /* Color de fondo similar al encabezado */
    color: #fff; /* Color del texto en blanco */
    border: none; /* Sin bordes */
    border-radius: 20px; /* Bordes redondeados */
    cursor: pointer; /* Indicador de clic */
    transition: background-color 0.3s ease; /* Efecto de transición */
        }
		
		 .search-button:hover {
			 background-color: #1a2a3b; /* Cambia el color al pasar el ratón */
        }
	
	

/* Estilos responsivos para móviles */
@media screen and (max-width: 600px) {
    .result-image {
        width: 100%; /* La imagen ocupa todo el ancho en móviles */
    }

    .field {
        font-size: 1.5em; /* Tamaño de fuente reducido */
        padding: 10px; /* Relleno más pequeño */
    }

    .custom-h3 {
        font-size: 0.9em; /* Tamaño de fuente reducido */
        line-height: 1.2em; /* Ajuste de la altura de línea */
    }

    .custom-p {
        font-size: 0.7em; /* Tamaño reducido para el párrafo */
        line-height: 1.2em; /* Ajuste de la altura de línea */
        margin: 0 0 1.5em 0; /* Ajuste del margen inferior */
    }
	
	.myEnc {
        height: 10%; /* Reducimos aún más la altura en móviles */
        padding: 5px; /* Menor padding en móviles */
    }

    .myEnc img {
        width: 70%; /* Reducimos el tamaño de la imagen del encabezado en móviles */
    }
	
	  form input[type="text"],
    form input[type="submit"] {
        width: 90%; /* Aumenta el ancho del campo en móviles */
        font-size: 1.5em; /* Tamaño de fuente más pequeño */
    }
}