/* Estilos personalizados para el cuerpo y el contenedor del reloj */
.clock-container {
    border: 12px solid #263238; /* Borde más pronunciado para el reloj */
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), /* Sombra más profunda */
                0 0 0 5px rgba(255, 255, 255, 0.5) inset; /* Borde interno sutil */
    background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%); /* Gradiente suave */
    padding: 10px; /* Espaciado interno */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ocupa el ancho completo del contenedor */
    max-width: 240px; /* Ancho máximo para el reloj */
    aspect-ratio: 1 / 1; /* Mantiene la proporción cuadrada */
}

#analogClock {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Asegura que el canvas también tenga bordes redondeados si su contenedor lo tiene */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .clock-container {
        max-width: 200px; /* Más pequeño en tabletas */
        border-width: 8px;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25),
                    0 0 0 4px rgba(255, 255, 255, 0.4) inset;
    }
}

@media (max-width: 480px) {
    .clock-container {
        max-width: 150px; /* Aún más pequeño en móviles */
        border-width: 6px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2),
                    0 0 0 3px rgba(255, 255, 255, 0.3) inset;
    }
}