/*
 * weewx mobile CSS settings
 *
 * MODIFICADO PARA OPTIMIZACIÓN Y MODERNIZACIÓN:
 * - Centrado del contenido principal usando CSS (margin: auto).
 * - Diseño más responsive con max-width y width en porcentaje.
 * - Ajuste del tamaño de las imágenes (incluida la webcam) para que sean adaptables.
 * - Añadido un contenedor principal con fondo blanco y sombra para una mejor presentación.
 */

/* Global */

body {
    background-color: #75a1d0; /* Color de fondo general de la página */
    font-family: helvetica, arial;
    margin: 0; /* Elimina el margen predeterminado del body */
    padding: 0; /* Elimina el padding predeterminado del body */
    /* text-align: center; se puede eliminar aquí si el div principal gestiona el centrado */
}

/* Contenedor principal de todo el contenido de la página */
/* Este div es el que antes estaba envuelto por <center> en el HTML */
body > div {
    max-width: 480px; /* Ancho máximo para pantallas más grandes (ej. tablets pequeñas, escritorio) */
    width: 95%; /* Ocupa el 95% del ancho del viewport en móviles, es adaptable */
    margin: 10px auto; /* Centra el div horizontalmente y le da un margen superior/inferior */
    background-color: #fff; /* Fondo blanco para el área de contenido principal */
    padding: 10px; /* Espacio interno dentro del contenedor */
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho/alto total */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra suave para darle profundidad */
    text-align: center; /* Centra el texto y los elementos inline dentro de este div */
}


a {
    text-decoration: none;
    color: black;
}

table.readings {
    font-size: 13px;
    width: 100%; /* La tabla ocupará el 100% del ancho de su contenedor (el div) */
    border: 2px solid black;
    border-collapse: collapse;
    margin: 10px auto; /* Centra la tabla dentro del div y le da un pequeño margen */
}

tr.alt {
    background-color: #9bc4e2;
}

td {
    text-align: right;
    font-weight: 600;
    border: 1px solid black;
    width: 50%; /* Cada celda ocupa el 50% del ancho de la tabla */
    padding: 2px;
}

td.data {
    text-align: left;
    color: #990000;
}

div.radar {
    /* Si necesitas estilos específicos para el contenedor del radar, añádelos aquí. */
    /* Por ejemplo, un margen o padding extra. */
    margin-top: 15px; /* Separación de la tabla superior */
    margin-bottom: 15px; /* Separación de la webcam del pie */
}

/* Regla general para todas las imágenes (webcam, gráficos, etc.) */
img {
    max-width: 100%; /* Asegura que la imagen nunca exceda el ancho de su contenedor */
    height: auto; /* Mantiene la proporción original de la imagen */
    border: 2px solid black;
    display: block; /* La imagen se comporta como un bloque, permitiendo el uso de margin: auto */
    margin: 10px auto; /* Centra la imagen horizontalmente y le da margen vertical */
}

/* Si en algún momento necesitas una regla específica para la webcam
   que sea diferente a otras imágenes, puedes usar:
   div.radar img {
       width: 280px;
       height: auto;
       max-width: 100%;
   }
   Pero la regla general de 'img' suele ser suficiente para la adaptabilidad.
*/