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

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

    /* ── Cabecera: una columna, sin desbordamiento ── */
    .mod-dbflow .mod-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 14px;
    }

    /* Fila interna: botón volver + título */
    .mod-dbflow .mod-header > div:first-child {
        width: 100%;
        min-width: 0;
    }

    .mod-dbflow .mod-title {
        font-size: 1.2rem;
        word-break: break-word;
        white-space: normal;
        min-width: 0;
    }

    /* Botones de acción: fila, alineados a la derecha */
    .dbf-header-actions {
        width: 100%;
        flex-shrink: 1;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .dbf-header-actions .btn {
        flex: 0 0 auto;
        min-width: 0;
        font-size: 0.78rem;
        padding: 6px 10px;
        white-space: nowrap;
    }

    /* Nuevo Schema ocupa todo el ancho disponible */
    #dbf-btn-nuevo-schema {
        flex: 1 1 100%;
    }

    /* En mobile ocultar los botones texto (los reemplazan los circulares) */
    #dbf-btn-nuevo:not(.hidden),
    #dbf-btn-nuevo-schema:not(.hidden) {
        display: none !important;
    }

    /* ── Editor: toolbar en 2 filas ── */
    .dbf-toolbar {
        padding: 6px 8px;
        gap: 4px;
        flex-wrap: wrap;
        overflow-x: visible;
        align-items: center;
    }

    /* Todos al orden 2 (fila 2) por defecto */
    .dbf-toolbar > * {
        order: 2;
    }

    /* Fila 1: volver, nombre, buscar */
    #dbf-back {
        order: 0;
        flex: 0 0 auto;
        font-size: 0.8rem;
        padding: 5px 10px;
    }

    /* Separador entre volver y nombre: oculto */
    #dbf-back + .dbf-toolbar-sep {
        order: 0;
        display: none;
    }

    .dbf-diag-nombre {
        order: 0;
        flex: 1;
        min-width: 0;
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Buscar: fila 1, pegado a la derecha */
    #dbf-search-btn {
        order: 0;
        margin-left: auto;
        font-size: 10px;
        padding: 3px 8px;
    }

    /* Separador tras el nombre: order 1 → fuerza salto a fila 2 */
    .dbf-diag-nombre + .dbf-toolbar-sep {
        order: 1;
        flex-basis: 100%;
        height: 1px;
        border-top: 1px solid rgba(255,255,255,0.12);
        margin: 2px 0;
        background: none;
    }

    /* Fila 2+: resto de botones compactos */
    .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;
    }
}