body {
    background-image: url('/imagenes/dia0.png'); /* Imagen de fondo */
    background-size: cover; /* Cubrir toda la página */
    background-position: center; /* Centrar la imagen */
    background-repeat: no-repeat; /* No repetir la imagen */
    background-attachment: fixed; /* Fijar la imagen al fondo */
    min-height: 100vh; /* Asegurar que el fondo cubra toda la altura */
    margin: 0; /* Eliminar márgenes por defecto */
}
.header-container {
    position: fixed; /* Fijar el contenedor del título en la parte superior */
    top: 2px; /* Alinear con la parte superior de la pantalla */
    left: 0; /* Alinear con el borde izquierdo */
    width: 100%; /* Ocupar todo el ancho de la pantalla */
    background-color: transparent; /* Fondo inicialmente transparente */
    text-align: center;
    margin: 0; /* Eliminar el margen por defecto */
    padding: 20px; /* Igual que el footer */
    z-index: 10; /* Asegurar que esté por encima del resto del contenido */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave para el fondo y la sombra */
    box-sizing: border-box; /* Igual que el footer */
}
.header-container.visible {
    background-color: #333333; /* Fondo oscuro igual que el footer */
    border: 2px solid #17d1d1; /* Borde azul igual que el footer */
    border-radius: 15px; /* Esquinas redondeadas igual que el footer */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
}
h1 {
    color: #0c09ad; /* Texto blanco para que sea legible sobre el fondo oscuro */
    font-size: 40px;
    font-family: 'Angsana New', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgb(0, 254, 241), -1px -1px 5px rgb(126, 253, 246); /* Sombra desde .titulo */
    padding: 10px;
    margin: 0; /* Ajustar margen para que no interfiera con los botones */
    display: inline-block; /* Para que el título se centre correctamente */
    line-height: 18px; /* Igual que el footer */
}
.button-container {
    position: absolute;
    top: 50%; /* Centrar verticalmente respecto al título */
    transform: translateY(-50%); /* Ajustar posición vertical */
    display: flex;
    gap: 10px; /* Espacio entre los botones */
}
.button-container.left {
    left: 20px; /* Botones a la izquierda del título */
}
.button-container img {
    width: 40px; /* Tamaño de las imágenes */
    height: 40px;
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s; /* Transición para el hover */
    background-color: #333333; /* Fondo oscuro como el footer */
    border-radius: 15px; /* Esquinas redondeadas como el footer */
    padding: 7px; /* Padding como el footer */
    border: 2px solid #17d1d1; /* Borde azul como el footer */
}
.button-container img:hover {
    transform: scale(1.1); /* Efecto de escala al hacer hover */
    background-color: #0a9c9c; /* Color que combina con el borde azul del header/footer */
}
.table-container {
    position: relative; /* Para posicionar la marca de agua encima */
    width: 100%;
    max-width: 800px;
    margin: 100px auto 20px; /* Margen superior para evitar superposición con el título fijo */
}
table {
    border-collapse: separate; /* Cambiar a separate para permitir border-radius */
    border-spacing: 0; /* Eliminar espacios entre celdas */
    width: 100%;
    font-family: Arial, sans-serif;
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco semitransparente como antes */
    backdrop-filter: blur(5px); /* Efecto de desenfoque */
    border: 4px solid #17d1d1; /* Borde azul desde el CSS de referencia */
    border-radius: 15px; /* Esquinas redondeadas */
}
th, td {
    padding: 8px;
    text-align: center;
    background-color: transparent; /* Sin fondo adicional en las celdas */
}
/* Asegurar que las celdas en las esquinas respeten el border-radius */
th:first-child, td:first-child {
    border-top-left-radius: 15px; /* Ajustado para coincidir con el border-radius de la tabla */
    border-bottom-left-radius: 15px;
}
th:last-child, td:last-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
th {
    background-color: #f2f2f2;
}
tr:nth-child(even) {
    background-color: rgba(81, 78, 78, 0.5);
}
.subheader {
    background-color: #e6e6e6;
}
.estacion-nombre {
    text-align: left; /* Alinear nombres de estaciones a la izquierda */
}
.conteo {
    width: 10px; /* Ancho fijo para la columna de conteo */
}
.watermark {
    position: absolute;
    top: 75px;
    left: 0;
    width: 90%;
    height: 95%;
    background-image: url('/imagenes/cenaos.png'); /* Imagen de marca de agua */
    background-repeat: repeat-y; /* Repetir la imagen verticalmente */
    background-position: left; /* Centrar horizontalmente */
    background-size: 35%; /* Ajustar tamaño de la imagen */
    opacity: 0.2; /* Hacer la marca de agua más sutil */
    pointer-events: none; /* Para que no interfiera con las interacciones de la tabla */
    z-index: 1; /* Asegurar que esté por encima de la tabla */
}
.watermark2 {
    position: absolute;
    top: 75px;
    left: 0;
    width: 90%;
    height: 95%;
    background-image: url('/imagenes/cenaos.png'); /* Imagen de marca de agua */
    background-repeat: repeat-y; /* Repetir la imagen verticalmente */
    background-position: center; /* Centrar horizontalmente */
    background-size: 35%; /* Ajustar tamaño de la imagen */
    opacity: 0.3; /* Hacer la marca de agua más sutil */
    pointer-events: none; /* Para que no interfiera con las interacciones de la tabla */
    z-index: 1; /* Asegurar que esté por encima de la tabla */
}
.watermark3 {
    position: absolute;
    top: 75px;
    left: 0;
    width: 90%;
    height: 95%;
    background-image: url('/imagenes/cenaos.png'); /* Imagen de marca de agua */
    background-repeat: repeat-y; /* Repetir la imagen verticalmente */
    background-position: right; /* Centrar horizontalmente */
    background-size: 35%; /* Tamaño intermedio entre watermark y watermark2 */
    opacity: 0.2; /* Un poco más sutil que las otras */
    pointer-events: none; /* Para que no interfiera con las interacciones de la tabla */
    z-index: 1; /* Asegurar que esté por encima de la tabla */
}
table {
    position: relative;
    z-index: 0; /* La tabla está debajo de las marcas de agua */
}
/* Estilos para el footer, basados en .actu */
.footer {
    width: 100%; /* Ocupar todo el ancho de la pantalla */
    margin: 20px 0; /* Margen vertical, sin margen horizontal */
    padding: 7px; /* Desde .actu */
    line-height: 18px; /* Desde .actu */
    background-color: #333333; /* Fondo oscuro desde .actu */
    color: #FFFFFF; /* Texto blanco desde .actu */
    border: 2px solid #17d1d1; /* Borde azul desde .actu */
    border-radius: 15px; /* Esquinas redondeadas desde .actu */
    font-size: 12px; /* Tamaño de fuente desde .actu */
    font-family: Arial, sans-serif;
    text-align: center;
    box-sizing: border-box; /* Incluir padding y borde en el ancho total */
}
.disclaimer {
    display: flex;
    justify-content: space-between; /* Desde .actu */
    color: white;
    font-size: 12px;
    margin: 4px 10px; /* Añadir margen horizontal para que el texto no toque los bordes */
    background-color: #333333; /* Fondo oscuro para que el texto blanco sea legible */
    padding: 5px;
}
/* Media query para ocultar los botones y ajustar estilos en dispositivos móviles (ancho <= 768px) */
@media (max-width: 768px) {
    .button-container {
        display: none; /* Ocultar los botones */
    }
    h1 {
        font-size: 30px; /* Reducir el tamaño del título en móviles para mejor ajuste */
        padding: 5px; /* Reducir el padding */
    }
    .header-container {
        padding: 5px; /* Reducir el padding vertical en móviles */
    }
    .header-container.visible {
        border-radius: 15px; /* Mantener las esquinas redondeadas en móviles */
    }
    .table-container {
        max-width: 100%; /* Asegurar que la tabla ocupe todo el ancho disponible */
        padding: 0 10px; /* Añadir un pequeño padding lateral */
        margin-top: 60px; /* Ajustar el margen superior para el título más pequeño */
    }
    table {
        font-size: 14px; /* Reducir el tamaño de fuente de la tabla para mejor legibilidad */
    }
    th, td {
        padding: 5px; /* Reducir el padding de las celdas */
    }
    .footer {
        font-size: 12px; /* Reducir el tamaño de fuente del footer */
        padding: 5px; /* Reducir el padding */
    }
    .disclaimer {
        font-size: 8px; /* Reducir el tamaño de fuente del disclaimer */
        margin: 2px 5px; /* Reducir los márgenes */
    }
}