/* Configuraci贸n para que el body ocupe toda la pantalla */
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Contenedor principal para ambos contenedores */
        .contenedor-principal {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            gap: 20px;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
        }

        /* Estilo general del contenedor */
        .contenedor {
            flex: 1 1 100%; /* Ocupa el 100% del ancho por defecto */
            min-height: 40vh;
            padding: 20px;
            box-sizing: border-box;
            text-align: center;
            border-radius: 10px;
            /* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); */
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        /* Estilos espec铆ficos para cada contenedor */
        .contenedor1 {
            background-color: #ffffff;
        }

        .contenedor2 {
            background-color: #ffffff;
        }

        /* Estilos para el formulario de inicio de sesi贸n */
        .login-container {
            width: 100%;
            max-width: 300px;
            text-align: left;
        }

        .login-container h2 {
            text-align: center;
        }

        .login-container label,
        .login-container input,
        .login-container button {
            width: 100%;
            margin-bottom: 10px;
        }

        .login-container input {
            padding: 8px;
            box-sizing: border-box;
        }

        .login-container button {
            padding: 10px;
            background-color: #33719c;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }

        /* Centrado de la imagen en el contenedor 2 */
        .contenedor2 img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        /* Ajustes para pantallas grandes */
       
        
        .texto-grande-gris {
            font-size: 2.5em; /* Aumenta el tamaño del texto */
            color: #666666; /* Color gris */
            text-align: left; /* Alineado a la izquierda */
            font-weight: bold; /* Opcional: hace que el texto sea negrita */
            margin: 0px 0; /* Opcional: añade un margen */
            line-height: 1.2; /* Reduce el espacio entre líneas */
        }
        
        .texto-grande-gris2 {
            font-size: 14px; /* Tamaño de la letra */
            color: #666666; /* Color gris */
            text-align: left; /* Alineado a la izquierda */
            margin: 0px 0; /* Opcional: añade un margen */
            font-weight: 200; /* Letra más delgada */
            font-family: Arial, sans-serif; /* Asegúrate de usar una fuente compatible */
        }
        
        
        .img-logo {
            /* width: 165px; */
            /* height: auto; */
            /* display: block; */
            /* float: left; */
            margin-right: 81%;
            margin-top: -2px;
        }
                        
        
        @media (min-width: 1252px) {
            .contenedor {
                flex: 1 1 45%; /* Ocupa el 45% del ancho en pantallas grandes */
            }
        }
        
        @media  (max-width: 1252px) {
            .contenedor2 {
                display: none;
            }
        }