/* DB Flow — Mobile ≤767px */
@media (max-width: 767px) {

    /* ── Lista ── */
    .dbf-lista-grid {
        grid-template-columns: 1fr;
    }

    .mod-dbflow .mod-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ── Editor: toolbar compacta ── */
    .dbf-toolbar {
        padding: 4px 6px;
        gap: 3px;
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .dbf-diag-nombre {
        max-width: 100px;
        font-size: 11px;
    }

    .dbf-btn {
        font-size: 10px;
        padding: 3px 7px;
    }

    /* ── Editor: árbol de nodos aparece desde abajo ── */
    .dbf-workspace {
        position: relative;
    }

    .dbf-nav {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-width: unset;
        height: 55vh;
        border-right: none;
        border-top: 1px solid #1e1e38;
        z-index: 110;
        flex-direction: column;
    }

    .dbf-nav-body {
        max-height: unset;
    }

    /* ── Panel de propiedades: bottom sheet en mobile ── */
    #dbfPanel {
        display: flex !important; /* transform handles visibility; override any display:none from JS */
    }

    .dbf-panel {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-width: unset;
        height: auto;
        max-height: 60vh;
        z-index: 120;
        transform: translateY(100%);
        transition: transform 0.22s ease;
        border-right: none;
        border-top: 1px solid #252540;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    }

    .dbf-panel-body {
        overflow-y: auto;
        max-height: calc(60vh - 80px);
    }

    .dbf-panel-open {
        transform: translateY(0);
    }

    /* ── Ocultar controles de desktop que no aplican en mobile ── */
    #dbf-prop-btn,
    #dbfPanel .dbf-panel-head .dbf-btn-xs {
        display: none !important;
    }
}