/* Estilos generales del cuerpo */
body {
    font-family: Arial, sans-serif; /* Fuente general para el cuerpo */
    margin: 0; /* Eliminar márgenes por defecto */
    padding: 0; /* Eliminar relleno por defecto */
}
/* Header Styles */
.header {
    background-color: #000; /* Franja negra */
    padding: 10px; /* Espaciado interno en la franja */
    text-align: left; /* Alineación a la izquierda del logo */
}

.header .logo {
    max-width: 100px; /* Ancho máximo para el logo */
    height: auto; /* Altura automática para mantener la proporción */
}
* Enlaces Horizontales */
.links-container {
    background-color: #f0f0f0;
    padding: 10px;
}

ul {
    list-style-type: none;
    padding-left: 0;
    display: flex; /* Establece la lista como un contenedor flexible */
    justify-content: center;
    gap: 20px; /* Espacio entre los enlaces */
}

ul li {
    margin: 0;
    display: inline-block;
}

a {
    text-decoration: none;
    color: #000; /* Color negro para los enlaces */
    padding: 10px;
    position: relative;
    display: inline-block;
    font-weight: bold; /* Letras en negrita */
}

/* Línea vertical separadora */
a:not(.dropdown-content a):not(.link-container a):after {
    content: "";
    position: absolute;
    right: -10px; /* Ajusta la distancia entre el enlace y la línea */
    top: 0;
    bottom: 0; /* Asegura que la línea sea del mismo tamaño que el texto */
    border-right: 2px solid #000; /* Línea vertical negra */
    display: inline-block;
}

/* Elimina la línea vertical después del último enlace */
ul li:last-child a::after {
    content: none;
}

a:hover {
    color: #333; /* Color ligeramente más oscuro al pasar el mouse */
}

/* Estilos para el formulario de búsqueda */


.form-container1 {
    display: flex;
    justify-content: space-between; /* Distribuye el espacio entre columnas */
    align-items: flex-start; /* Alinea las columnas horizontalmente en la parte superior */
    flex-wrap: wrap;
    box-sizing: border-box;
    margin-right: 10%;
}

.column {
    display: flex;
    flex-direction: column;
   margin: 10px;
    flex: 1; /* Cada columna ocupa el mismo ancho */
    align-items: center;
    justify-content: space-between;
}

.form-container1 input[type="date"],
.form-container1 input[type="text"],
.form-container1 input[type="submit"],
.form-container1 input[type="button"] {
    width: 100%; /* Hace que todos los campos tengan el mismo ancho */
    padding: 8px;
   
    box-sizing: border-box;
}

.form-container1 input[type="submit"],
.form-container1 input[type="button"] {
    margin-top: 10px;
}

/* Estilos para el formulario de filtro */
#filterForm {
    display: flex; /* Usar flexbox para alinear elementos */
    justify-content: center; /* Centrar los elementos horizontalmente */
    flex-wrap: wrap; /* Permitir que los elementos se ajusten a la siguiente línea si no hay espacio suficiente */
    max-width: 600px; /* Ancho máximo para el formulario */
}

/* Estilo para las columnas de filtros */
.column {
    display: flex; /* Usar flexbox para la columna */
    flex-direction: column; /* Organizar elementos verticalmente */
    align-items: stretch; /* Centrar los elementos dentro de la columna */
    margin: 10px; /* Espaciado entre columnas */
    flex-wrap: wrap;
    justify-content: space-evenly;
}

/* Estilo para los campos del formulario */
#filterForm label,
#filterForm input {
    margin: 5px; /* Espaciado entre los elementos */
}

/* Estilo para el botón de filtro */

.container {
    display: flex; /* Usar flexbox para organizar los elementos en fila */
    justify-content: space-between; /* Espaciar entre los elementos para alinearlos a los extremos */
  
    margin: 20px 0; /* Espaciado vertical alrededor del contenedor */
}
/* Estilos para la sección de información */
.info {
    display: flex;
    flex-direction: column;
   
    width: 100%;
    justify-content: space-evenly;
    margin-left: 1%;
}

.row {
    display: flex;
    width: 100%;
    
    flex-direction: column;
    
}

.row div {

    padding: 5px;
}


/* Estilos para la tabla de resultados */
table {
    width: 100%; /* Tabla ocupa todo el ancho disponible */
    border-collapse: collapse; /* Colapsar bordes */
    margin-top: 20px; /* Espaciado superior para la tabla */
}

th, td {
    border: 1px solid #ddd; /* Bordes ligeros para celdas */
    padding: 8px; /* Espaciado interior de celdas */
    text-align: left; /* Alinear texto a la izquierda */
}

th {
    background-color: #00d9ff80; /* Color de fondo para encabezados */
    font-weight: bold; /* Negrita para encabezados */
}

tr:nth-child(even) {
    background-color: #f9f9f9; /* Color de fondo alterno para filas */
}

tr:hover {
    background-color: #f1f1f1; /* Color de fondo al pasar el ratón */
}

/* Estilos para el botón en general */
input[type="submit"] {
    background-color: #002169; /* Color de fondo verde */
    color: white; /* Color de texto blanco */
    border: none; /* Sin borde */
    padding: 5px 15px; /* Espaciado interior */
    text-align: center; /* Centrar texto */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Mostrar como bloque en línea */
   
    cursor: pointer; /* Cambiar cursor al pasar el ratón */
    border-radius: 20px;
}


/* Estilo para el botón de filtro al pasar el ratón */
input[type="submit"]:hover {
    background-color: #002169bb; /* Color más oscuro al pasar el ratón */
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #ffffff;
}

.footer img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

.footer .contactos-image {
    margin-bottom: 10px; /* Espacio entre las imágenes de contactos y marcas */
}

/* Nueva imagen debajo del footer */
.bottom-image {
    text-align: center; /* Centrar la imagen */
    padding: 20px;
}

.bottom-image img {
    max-width: 100%;
    height: auto;
    display: inline-block; /* Asegurarse de que se alinee correctamente en el centro */
}
/* Estilo para el label del campo RUT */
label {
    display: block; /* Hace que el label ocupe toda la línea */
    margin-bottom: 8px; /* Espacio debajo del label */
    font-weight: bold; /* Hacer que el texto sea más destacado */
    text-align: center; /* Centrar el texto del label */
}

/* Estilo para el campo de entrada RUT */
input[type="text"] {
    display: block; /* Hace que el input ocupe toda la línea */
   
   
    border: 1px solid #000000; /* Borde del campo */
    border-radius: 20px;

}


.center-button {
    padding: 5px 10px; /* Tamaño y espaciado interno del botón */    
    display: inline-block; /* Asegura que el botón se comporte como un bloque en línea */
    margin-top: 10px; /* Espacio superior */
    padding: 10px 20px; /* Espaciado interno del botón */
    border: none; /* Sin borde */
    border-radius: 20px;
    background-color: #002169; /* Color de fondo del botón */
    color: white; /* Color del texto */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}

.center-button:hover {
    background-color: #0056b3; /* Color de fondo al pasar el mouse */
}

/* Contenedor para centrar y alinear el formulario de búsqueda del RUT */

/* Contenedor para centrar y alinear el formulario de búsqueda del RUT */
.rut-form-container {
    display: flex; /* Usar flexbox para alinear los elementos en una fila */
  flex-direction: row;
  align-items: baseline;
  margin-left: 1%;
}

/* Estilos para el label de RUT */
.rut-form-container label {
    margin-right: 5px; /* Espacio pequeño entre el label y el input */
}

/* Estilos para el input de RUT */
.rut-form-container input[type="text"] {
    margin-right: 5px; /* Espacio pequeño entre el input y el botón */
    padding: 5px; /* Espaciado interno para mayor comodidad al escribir */
}

/* Estilos para el botón */

.pagination {
    text-align: center; /* Centrar los enlaces de paginación */
    margin: 20px 0; /* Espaciado vertical */
}

.pagination a {
    margin: 0 5px; /* Espacio entre enlaces */
    padding: 8px 12px; /* Espaciado interno */
    background-color: #002169; /* Color de fondo */
    color: white; /* Color del texto */
    text-decoration: none; /* Sin subrayado */
    border-radius: 20px;
}

.pagination a:hover {
    background-color: #0056b3; /* Color de fondo al pasar el mouse */
}

.pagination a.active {
    background-color: #0056b3; /* Color para la página activa */
    font-weight: bold; /* Resaltar texto */
}
/* Estilos generales para todos los botones */
input[type="button"] {
    background-color: #002169; /* Color de fondo */
    color: white; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 20px;
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
    
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
    margin-top: 10px; /* Espacio arriba */
    width: 50%; /* Ancho completo del contenedor */
}

/* Efecto hover para los botones */
input[type="button"]:hover, input[type="button"]:hover {
    background-color: #0056b3; /* Color de fondo en hover */
}

/* Estilos adicionales para el botón de limpiar, si deseas que tenga un color diferente */
input[type="button"] {
    background-color: #002169; /* Color de fondo diferente para el botón de limpiar */
}

input[type="button"]:hover {
    background-color: #002169; /* Color de fondo en hover para el botón de limpiar */
}


/* Estilos adicionales para el botón de limpiar, si deseas que tenga un color diferente */
input[type="button"] {
    background-color: #002169; /* Color de fondo diferente para el botón de limpiar */
}

input[type="button"]:hover {
    background-color: #002169; /* Color de fondo en hover para el botón de limpiar */
}
/* Estilos para el contenedor principal */



/* Efecto al pasar el mouse sobre el contenedor */


/* Estilos generales del formulario */
.form-container {
    max-width: 400px; /* Ancho máximo del formulario */
    padding: 30px; /* Espaciado interno aumentado */
    background-color: #ffffff; /* Fondo blanco para un mejor contraste */
    border-radius: 20px;
    transition: box-shadow 0.3s ease; /* Transición suave para la sombra */
    text-align: center; /* Centrar el contenido del formulario */
}


/* Estilos para los campos del formulario */
.form-container input {
    
    padding: 12px; /* Mayor padding para más espacio */
    margin: 12px 0; /* Espaciado superior e inferior aumentado */
    border: 1px solid #d1d1d1; /* Color de borde más suave */
    border-radius: 20px;
   
    transition: border 0.3s; /* Transición suave para el borde */
}

/* Efecto al enfocarse en los campos del formulario */
.form-container input:focus {
    border-color: #002169; /* Cambia el color del borde al enfocar */
    outline: none; /* Elimina el contorno predeterminado */
}

/* Estilos para el botón de envío */
.form-container input[type="submit"] {
    background-color: #002169; /* Color de fondo */
    color: white; /* Color del texto */
    cursor: pointer; /* Cambia el cursor a pointer */
    border: none; /* Sin borde */
    border-radius: 20px;
    padding: 12px; /* Espaciado interno aumentado */
   
    transition: background-color 0.3s; /* Transición suave para el fondo */
}

/* Efecto al pasar el mouse sobre el botón de envío */
.form-container input[type="submit"]:hover {
    background-color: #0056b3; /* Color del botón al pasar el mouse */
}

/* Estilo para las etiquetas */
.form-container label {
    font-weight: bold; /* Texto en negrita */
    margin-bottom: 5px; /* Espaciado inferior para las etiquetas */
    display: block; /* Cada etiqueta en una nueva línea */
    color: #333; /* Color del texto */
}

/* Imagen Portal sobre el login */
.portal-image {
    position: absolute;
    top: 10%; /* Ajusta según sea necesario */
    right: 24%; /* Mover más a la derecha */
    transform: translateX(50%);
    z-index: 1;
    max-width: 100%;
    height: auto;
    z-index: 1
}

/* Login Wrapper Styles */
.login-wrapper {
    display: flex;
    justify-content: space-between; /* Mueve el contenido a ambos lados */
    align-items: center; /* Centra verticalmente */
}

/* Imagen Login Imagen a la izquierda del login */
.login-image {
    margin-right: 20px;
}

.login-image img {
    max-width: 100%; /* Ajusta la imagen al contenedor */
    height: auto;
}
/* Estilo para el menú desplegable */
.dropdown {
    position: relative; /* Posición relativa para contener el menú */
    display: inline-block; /* Para que se alinee en línea con otros elementos */
    text-align: center; /* Centrar texto en el botón */

   
}

.dropbtn {
    background-color: #002169; /* Color de fondo del botón */
    color: white; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 20px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}

.dropdown-content {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 100%; /* Posiciona el menú justo debajo del contenedor */
    left: -40px;
    z-index: 10;
    background-color: white;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    min-width: 160px;
    border: none; /* Asegúrate de que no haya bordes en el contenedor */
}


.dropdown-content a {
    color: black; /* Color del texto de los enlaces */
    padding: 12px 16px; /* Espaciado interno de los enlaces */
    text-decoration: none; /* Sin subrayado */
    display: block; /* Hacer que los enlaces ocupen toda la línea */
    border: none; /* Quita bordes de los enlaces */
    
}

.dropdown-content a:hover {
    background-color: #f1f1f1; /* Color de fondo al pasar el ratón */
}

/* Mostrar el contenido del menú al pasar el ratón sobre el botón */
.dropdown:hover .dropdown-content {
    display: block; /* Mostrar contenido del menú */
}

/* Cambiar el color del botón al pasar el ratón */
.dropdown:hover .dropbtn {
    background-color: #0056b3; /* Color de fondo al pasar el ratón */
}




/* Contenedor centrado solo para el formulario */
.form-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 66vh;
    margin-top: 5%;
}
/* Estilos del formulario */
.rut-form-new {
    display: flex;
    flex-direction: column; /* Alinea los elementos en columna */
    align-items: center; /* Centra los elementos dentro del formulario */
    width: 300px; /* Tamaño fijo */
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Estilo para las etiquetas dentro del formulario */
.rut-form-new label {
    font-weight: bold;
    margin-bottom: 10px;
}

/* Estilo para el campo de texto */
.rut-form-new input[type="text"] {
    padding: 8px;
    margin: 10px 0;
    width: 100%; /* Hace que el input ocupe el 100% del ancho del contenedor */
    border: 1px solid #ccc;
    border-radius: 20px;
}

.rut-form-new input[type="password"] {
    padding: 8px;
    margin: 10px 0;
    width: 100%; /* Hace que el input ocupe el 100% del ancho del contenedor */
    border: 1px solid #ccc;
    border-radius: 20px;
}

/* Estilo para el botón de enviar */
.submit-button {
    padding: 10px 20px;
    background-color: #002169; /* Color de fondo */
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    width: 100%; /* Hace que el botón ocupe el 100% del ancho */
    
    margin-top: 10px;
}

/* Cambio de color cuando el botón se pasa por encima */
.submit-button:hover {
    background-color: #0056b3;
}
.content-container {
    display: flex;
    align-items: center; /* Alinea verticalmente al centro */
    gap: 20px; /* Espacio entre el texto y la imagen */
}

.portal-text {
    text-align: center; /* Alinea el texto internamente a la derecha */
    margin-left: auto; /* Mueve el contenedor al extremo derecho */
}


.inicio-secion{
    margin-right: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info2 {
    display: flex;
    width: 100%;
    margin-left: 1%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
#resultsTable {
    border-collapse: collapse;
    width: 100%;
}

#resultsTable th,
#resultsTable td {
    border: 1px solid #ddd; /* Bordes estándar */
    text-align: center;
    padding: 8px;
}

/* Bordes verticales gruesos entre secciones */
#resultsTable .border-left {
    border-left: 4px solid black; /* Línea vertical gruesa */
}

/* Opcional: Mejorar visualización del encabezado */
#resultsTable tr:first-child th {
    background-color: #f9f9f9;
    font-weight: bold;
    text-align: center;
}