.contenedor-principal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    background: transparent;
    color: var(--hunter-card-text, var(--neutral-foreground-rest));
    scrollbar-width: thin;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.15rem;
    box-sizing: border-box;
}

.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: color-mix(in srgb, var(--hunter-card-text, #050505) 4%, var(--hunter-card, var(--neutral-layer-2)));
        border: 1px solid var(--hunter-border-subtle, transparent);
        padding: 0.5rem;
        border-radius: 12px;
        overflow: auto; /* si hay mucho contenido, aparece scroll */
    }

/* Parte inferior = 80% */
.parte-70 {
    flex: 0 0 80%; /* ocupa el 80% exacto */
    background: var(--hunter-card, var(--neutral-layer-2));
    color: var(--hunter-card-text, var(--neutral-foreground-rest));
    border: 1px solid var(--hunter-border-subtle, transparent);
    border-radius: 16px;
    padding: 1rem;
    overflow: auto;
}