/* Inventario > Categorias/Almacenes > Nueva categoria.
 * Correccion exclusiva para telefono: la paleta abierta participa en el flujo
 * del formulario y ya no cubre el selector de almacen ni el boton de crear.
 */
@media (max-width: 539px) {
    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-create-form {
        grid-template-columns: minmax(112px, .42fr) minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-name-field,
    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-submit-field {
        grid-column: 1 / -1 !important;
    }

    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-color-field {
        grid-column: 1 !important;
        min-width: 0 !important;
    }

    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-warehouse-field {
        grid-column: 2 !important;
        min-width: 0 !important;
    }

    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-color-field .pv-color-picker,
    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-color-field .pv-color-picker-trigger {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-color-field .pv-color-picker-trigger {
        min-height: 46px !important;
        justify-content: space-between !important;
        padding: 7px 12px !important;
    }

    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-color-field:has(.pv-color-picker-trigger.open) {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
    }

    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-create-form:has(.pv-color-picker-trigger.open) .rv-cat-warehouse-field {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }

    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-create-form:has(.pv-color-picker-trigger.open) .rv-cat-submit-field {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
    }

    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-color-field:has(.pv-color-picker-trigger.open) .pv-color-picker-panel:not([hidden]) {
        position: relative !important;
        z-index: auto !important;
        inset: auto !important;
        display: grid !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin-top: 9px !important;
        padding: 11px !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
        border-radius: 13px !important;
        box-shadow: 0 8px 22px rgba(30, 27, 46, .12) !important;
        transform: none !important;
    }

    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-color-field:has(.pv-color-picker-trigger.open) .pv-color-swatch {
        box-sizing: border-box !important;
        width: 42px !important;
        height: 42px !important;
        max-width: 100% !important;
        justify-self: center !important;
    }

    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-submit-field {
        width: 100% !important;
        margin-top: 2px !important;
    }

    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-form-actions,
    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-form-actions > .rv-cat-submit-btn {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html body #pvf-shell .pvf-main-body .rv-cat-create-card:not(:has(input[name="categoria_id"])) .rv-cat-form-actions > .rv-cat-submit-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 15px !important;
        border-radius: 12px !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
}