/* Reseteo básico para evitar márgenes fantasma */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.header-principal {
    width: 100%;
    /*background-color: #f8f9fa;*/ /* Color de fondo claro, cámbialo a tu gusto */
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 0;
}

.contenedor-header {
    display: flex;
    width: 100%;
    max-width: 1200px; /* Limita el ancho máximo en pantallas muy grandes */
    margin: 0 auto; /* Centra el contenedor completo en la pantalla */
    padding: 0 20px; /* Margen interno a los lados */
    align-items: center; /* Centra verticalmente el logo y los datos */
}

/* Columna del Logo: 1/3 de ancho */
.columna-logo {
    flex: 0 0 33.333%;
    max-width: 33.333%;
}

.logo-img {
    max-height: 60px; /* Ajusta el alto máximo de tu logo */
    width: auto;
    display: block;
}

/* Columna de Datos: 2/3 de ancho */
.columna-datos {
    flex: 0 0 66.666%;
    max-width: 66.666%;
    text-align: center; /* Alinea los datos a la derecha (opcional) */
}

/* --- Adaptación para Celulares --- */
@media (max-width: 768px) {
    .contenedor-header {
        flex-direction: column; /* Apila el logo arriba y los datos abajo en móviles */
        text-align: center;
    }

    .columna-logo, .columna-datos {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }

    .columna-datos {
        text-align: center; /* Centra los datos en pantallas chicas */
    }
}