.contenedor-principal {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* espacio entre la sección superior y la inferior */
    width: 100%;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    scrollbar-width: thin;
    overflow-y: auto;
    overflow-x: hidden;
}

.seccion-superior {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    padding: 0rem 1.25rem;
    border-radius: 8px;
    text-align: start;
}

/* sección inferior en una sola fila */
.seccion-inferior {
    display: flex;
    flex-wrap: nowrap; /* no se rompen a otra fila */
    gap: 1rem;
    width: 100%;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
}

/* Columna izquierda 40% */
.columna-40 {
    flex: 0 0 40%; /* ocupa exactamente el 40% */
    min-width: 0; /* permite encogerse en pantallas pequeñas */
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    padding: 1rem;
    border-radius: 8px;
    overflow-wrap: break-word;
}

/* Columna derecha 60% */
.columna-60 {
    flex: 60%; /* ocupa exactamente el 60% */
    min-width: 0;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    overflow-wrap: break-word;
}
    /* Ajustes en móviles: evitar scroll horizontal forzando proporción */
    @media (max-width: 768px) {
        .columna-40 {
            flex: 0 1 40%;
        }

        .columna-60 {
            flex: 0 1 60%;
        }
    }

.contenedor-vertical
{
    display: flex;
    flex-direction: column;
    height: 100vh; /* ocupa toda la altura de la ventana */
}

/* Parte superior = 20% */
.parte-30 {
    flex: 0 0 20%; /* ocupa el 20% exacto */
    display: flex; /* dos columnas internas */
    flex-direction: row;
    gap: 1rem; /* espacio entre columnas */
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    padding: 1rem;
    overflow: hidden; /* evita que se salga del contenedor */
}

    /* Columnas internas flexibles */
    .parte-30 .columna {
        flex: 1 1 0; /* ambas crecen de forma proporcional */
        min-width: 0; /* permite que se reduzcan sin salirse */
        background: rgba(0,0,0,0.05);
        padding: 0.5rem;
        border-radius: 6px;
        overflow: auto; /* si hay mucho contenido, aparece scroll */
    }

/* Parte inferior = 80% */
.parte-70 {
    flex: 0 0 80%; /* ocupa el 80% exacto */
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    padding: 1rem;
    overflow: auto;
}