body {
            font-family: Arial, sans-serif;
            background-color: #E8F1FA;
        }
        .navbar {
            background-color: #0353A4;
            padding: 10px 0;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .navbar .logo {
            margin-left: 20px;
            font-size: 24px;
            font-weight: bold;
        }
        .navbar .menu {
            list-style-type: none;
            display: flex;
            gap: 20px;
            margin-right: 20px;
        }
        .navbar .menu li {
            display: inline;
        }
        .login-section {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .login-form input[type="text"], .login-form input[type="password"] {
            padding: 10px;
            margin: 5px 0;
        }
        .login-form input[type="submit"] {
            padding: 10px 20px;
            background-color: #0353A4;
            color: white;
            border: none;
            cursor: pointer;
            margin-top: 10px;
        }

  /* Estilos para la lista de usuarios y sus cámaras */
        .user-list {
            background-color: #f4f4f4; /* Fondo claro */
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-top: 20px;
        }

        .user-item {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .user-item h3 {
            margin: 0;
            color: #0353A4; /* Azul oscuro */
        }

        .user-item .user-type {
            font-weight: bold;
        }

/* Estilos para la barra lateral derecha */
.sidebar {
    width: 33%; /* Ocupa 1/3 del ancho */
    background-color: #f4f4f4; /* Fondo claro */
    float: right; /* Alinea a la derecha */
    padding: 20px;
    box-sizing: border-box;
}

.sidebar h2 {
    color: #0353A4;
}

.user-list {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

/* Estilos para el contenido principal */
.content {
    width: 66%; /* Ocupa 2/3 del ancho */
    float: left; /* Alinea a la izquierda */
    padding: 20px;
    box-sizing: border-box;
}

/* ... Estilos para otros elementos ... */

      /* Estilos para la barra lateral derecha */
        .sidebar {
            background-color: #f4f4f4;
            float: right; /* Alineación a la derecha */
            width: 33.33%; /* 1/3 del ancho total */
            box-sizing: border-box;
            padding: 20px;
            border-left: 1px solid #ccc;
            min-height: 100vh;
        }

        .sidebar h2 {
            color: #0353A4;
        }

        .user-list {
            margin-top: 20px;
        }

        .user-item {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .user-item h3 {
            margin: 0;
            color: #0353A4;
        }

        .user-item .user-type {
            font-weight: bold;
        }

/* Estilo para el enlace de eliminación */
.delete-link {
    color: red;
    text-decoration: underline;
    cursor: pointer;
}

.camera-section {
    margin-bottom: 30px;
}


.image-card {
    display: inline-block;
    margin: 10px;
    text-align: center;
}

.image-card img {
    margin-bottom: 5px;
}
.camera-section {
    width: calc(33.333% - 20px); /* Ancho para que tres secciones quepan en una fila */
    margin: 10px;
    text-align: center;
    background-color: #f0f0f0; /* Color de fondo para resaltar el recuadro */
    border: 1px solid black; /* Borde de 1px de ancho y color negro */
    border-radius: 8px; /* Esquinas redondeadas con un radio de 8px */
    padding: 10px; /* Espacio interno alrededor del contenido */
    box-sizing: border-box; /* Incluir el borde en el cálculo del ancho */
}


        .camera-table {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

       .camera-image {
            max-width: 100%;
        }


@media (max-width: 768px) {

    /* Secciones principales al 100% de ancho y sin float */
    .content, .sidebar {
        width: 100%;
        float: none;
        padding: 10px;
    }

    /* Sidebar debajo de la barra azul */
    .sidebar {
        margin-top: 20px;
    }

    /* Imágenes de la cámara ocupan todo el ancho y se muestran en una sola columna */
    .camera-section, .image-card, .camera-table {
        width: 100%;
        margin: 10px 0; /* Ajuste vertical del margen */
        display: block;
    }

    .camera-image {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /* Ajustes para la barra de navegación */
    .navbar .menu, .navbar .auth {
        display: block; /* Si los elementos del navbar están horizontalmente alineados, los cambiamos a vertical */
        text-align: center;
        margin: 10px 0; /* Añade espacio entre los elementos */
    }
}