/* Asegura que el html y el body ocupen toda la altura del viewport */
html, body_ {
    height: 100%; /* La altura es del 100% del viewport */
    margin: 0; /* Elimina el margen por defecto */
    padding: 0; /* Elimina el padding por defecto */
    display: flex; /* Usa el modelo de diseño flexbox */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: flex-start; /* Alinea el contenido al principio verticalmente */
    background-color: #fff; /* Establece el color de fondo blanco */
    box-sizing: border-box; /* Incluye el padding y el borde en el cálculo del ancho y la altura */
    overflow-x: hidden; /* Evita el scroll horizontal por defecto */
}

/* Estilo para el contenedor de la cabecera */
.header {
    width: 100%; /* Ancho del 100% del contenedor padre */
    max-width: 1080px; /* Ancho máximo de 1080 píxeles */
    height: auto; /* La altura se ajusta automáticamente según el contenido */
    padding: 0; /* Elimina el relleno interno */
    box-sizing: border-box; /* Incluye el padding y el borde en el cálculo del ancho */
}

/* Estilo para el contenedor específico de la cabecera */
#Centrar_Head {
    width: 100%; /* Ancho del 100% del contenedor padre */
    max-width: 1080px; /* Ancho máximo de 1080 píxeles */
    padding: 10px; /* Relleno de 10 píxeles */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Añade una sombra difusa sutil */
    background-color: #fff; /* Establece el color de fondo blanco */
    box-sizing: border-box; /* Incluye el relleno y el borde en el cálculo del ancho */
    text-align: start; /* Alinea el texto a la izquierda */
    margin: 0 auto; /* Centra el contenido horizontalmente */
}

    /* Estilo específico para los formularios dentro de #Centrar_Head */
    #Centrar_Head form {
        width: 100%; /* Ancho del 100% del contenedor padre */
    }

/* Estilo para el contenido principal dentro del contenedor #Centrar_Contenido */
#Centrar_Contenido {
    width: 100%; /* Ancho del 100% del contenedor padre */
    max-width: 800px; /* Ancho máximo de 800 píxeles */
    padding: 0 20px; /* Relleno horizontal para evitar el borde */
    background-color: #fff; /* Establece el color de fondo blanco */
    text-align: left; /* Alinea el texto a la izquierda */
    box-sizing: border-box; /* Incluye el padding y el borde en el cálculo del ancho */
}

/* Estilo para el contenedor del menú */
.menu-container {
    width: 90%; /* Ancho del 90% del contenedor padre */
    max-width: 100%; /* Ancho máximo del 100% del contenedor padre */
}

/* Estilo para los botones de icono */
.icon-button {
    width: 32px; /* Ancho fijo de 32 píxeles */
    height: 32px; /* Altura fija de 32 píxeles */
    vertical-align: middle; /* Alinea verticalmente al medio */
}

/* Estilo para los botones de formulario */
.form-button {
    margin: 5px; /* Margen de 5 píxeles alrededor del botón */
    padding: 6px 6px; /* Relleno de 6 píxeles en todos los lados */
    border: none; /* Elimina el borde del botón */
    border-radius: 4px; /* Redondea las esquinas con un radio de 4 píxeles */
    font-size: 14px; /* Tamaño de la fuente de 14 píxeles */
    cursor: pointer; /* Cambia el cursor a una mano al pasar sobre el botón */
    background-color: #007BFF; /* Color de fondo azul brillante */
    color: #fff; /* Color del texto blanco */
    font-family: Calibri, sans-serif; /* Familia tipográfica Calibri o sans-serif */
}

    /* Estilo para el botón de formulario al pasar el ratón sobre él */
    .form-button:hover {
        background-color: #0056b3; /* Color de fondo azul más oscuro */
    }

    /* Estilo para el botón de formulario cuando está deshabilitado */
    .form-button:disabled {
        background-color: #d3d3d3; /* Color de fondo gris claro */
        color: #a9a9a9; /* Color del texto gris oscuro */
        cursor: not-allowed; /* Cambia el cursor a una señal de prohibición */
    }

/* Estilo para el contenedor de carga de archivos */
.file-upload-container {
    margin: 5px 0; /* Margen vertical de 5 píxeles */
    display: flex; /* Usa el modelo de diseño flexbox */
    align-items: center; /* Centra verticalmente los elementos hijos */
}

/* Estilo para el botón de carga de archivos */
.file-upload-button {
    margin: 5px; /* Margen de 5 píxeles alrededor del botón */
    border: none; /* Elimina el borde del botón */
    border-radius: 4px; /* Redondea las esquinas con un radio de 4 píxeles */
    font-size: 14px; /* Tamaño de la fuente de 14 píxeles */
    cursor: pointer; /* Cambia el cursor a una mano al pasar sobre el botón */
    background-color: #007BFF; /* Color de fondo azul brillante */
    color: #fff; /* Color del texto blanco */
    padding: 4px 4px; /* Relleno de 4 píxeles en todos los lados */
}

    /* Estilo para el botón de carga de archivos cuando está deshabilitado */
    .file-upload-button:disabled {
        background-color: #d3d3d3; /* Color de fondo gris claro */
        color: #a9a9a9; /* Color del texto gris oscuro */
        cursor: not-allowed; /* Cambia el cursor a una señal de prohibición */
    }

/* Oculta el control de carga de archivos */
.file-upload {
    display: none; /* Oculta el elemento */
}

/* Contenedor del gridview para permitir el desplazamiento horizontal */
.gridview-wrapper {
    overflow-x: auto; /* Permite el desplazamiento horizontal si el contenido es más ancho */
    -webkit-overflow-scrolling: touch; /* Habilita el desplazamiento suave en dispositivos táctiles */
    padding: 0 10px; /* Ajusta el padding para evitar el desplazamiento */
    box-sizing: border-box; /* Incluye el padding en el cálculo del ancho */
}

/* Estilo del gridview */
.gridview {
    display: table; /* Usa display: table para un ajuste mejorado */
    width: 100%; /* Ocupa el ancho disponible del contenedor */
    max-width: 100%; /* No permite que el gridview sea más ancho que el contenedor */
    box-sizing: border-box; /* Incluye el padding y el borde en el cálculo del ancho */
}

    /* Estilo de las celdas del gridview */
    .gridview td, .gridview th {
        overflow: hidden; /* Oculta el contenido que desborda */
        text-overflow: ellipsis; /* Muestra puntos suspensivos para texto largo */
        white-space: nowrap; /* Evita el ajuste de línea dentro de las celdas */
        font-size: 11px; /* Tamaño de la fuente por defecto */
        border: 1px solid #ddd; /* Borde de las celdas */
        box-sizing: border-box; /* Incluye el padding y el borde en el cálculo del ancho */
    }

/* Ajustes para pantallas más pequeñas */
@media (max-width: 768px) {
    html, body {
        overflow-x: auto; /* Habilita el scroll horizontal solo en pantallas pequeñas */
    }

    #Centrar_Contenido {
        padding: 10px; /* Relleno de 10 píxeles */
        width: calc(100% - 20px); /* Ancho completo menos el relleno */
    }

    .icon-button {
        width: 24px; /* Ancho de 24 píxeles */
        height: 24px; /* Altura de 24 píxeles */
    }

    .form-button {
        font-size: 14px; /* Tamaño de la fuente de 14 píxeles */
        padding: 8px 16px; /* Relleno de 8 píxeles vertical y 16 píxeles horizontal */
    }

    .gridview td, .gridview th {
        font-size: 10px; /* Tamaño de la fuente ajustado */
    }
}

@media (max-width: 480px) {
    .icon-button {
        width: 20px; /* Ancho de 20 píxeles */
        height: 20px; /* Altura de 20 píxeles */
    }

    .form-button {
        font-size: 12px; /* Tamaño de la fuente de 12 píxeles */
        padding: 6px 12px; /* Relleno de 6 píxeles vertical y 12 píxeles horizontal */
    }

    .gridview td, .gridview th {
        font-size: 9px; /* Tamaño de la fuente ajustado */
    }
}